Make corrections #2

mdbootstrap · Jul 19, 2023 · a8169d8 · a8169d8
1 parent 37e5f04
commit a8169d8
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 31 deletions.
diff --git a/demo/sites/data/datatables.html b/demo/sites/data/datatables.html
@@ -1048,7 +1048,6 @@ <h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-200">
           colorClass.forEach((className) => {
             cell.classList.add(className);
           });
-          cell.classList.add("font-medium");
         };
 
         const columns = [

diff --git a/site/content/docs/standard/data/datatables/a.html b/site/content/docs/standard/data/datatables/a.html
@@ -600,8 +600,8 @@ <h4 class="mb-5 text-lg font-bold">Via JavaScript</h4>
                   <td
                     class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
                     <code
-                      >&lt;svg xmlns="http://www.w3.org/2000/svg"
-                      fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5"
+                      >&lt;svg xmlns="http://www.w3.org/2000/svg" fill="none"
+                      viewBox="0 0 24 24" stroke-width="1.5"
                       stroke="currentColor" class="w-4 h-4"> &lt;path
                       stroke-linecap="round" stroke-linejoin="round" d="M18.75
                       19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5"
@@ -662,7 +662,7 @@ <h4 class="mb-5 text-lg font-bold">Via JavaScript</h4>
                     class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
                     <code
                       >&lt;svg xmlns="http://www.w3.org/2000/svg"
-                      fill="currentColor" viewBox="0 0 24 24" stroke-width="2"
+                      fill="currentColor" viewBox="0 0 24 24" stroke-width="3"
                       stroke="currentColor"> &lt;path stroke-linecap="round"
                       stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12
                       3v18" /> &lt;/svg></code
@@ -1149,7 +1149,7 @@ <h4 class="mb-5 text-lg font-bold">Via JavaScript</h4>
                   </td>
                   <td
                     class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
-                    py-4 text-clip overflow-hidden
+                    py-4 pl-1 text-clip overflow-hidden text-[#212529]
                   </td>
                   <td class="px-6 py-4 max-lg:whitespace-nowrap">
                     Sets table columns styles.
@@ -1369,7 +1369,7 @@ <h4 class="mb-5 text-lg font-bold">Via JavaScript</h4>
                   <td
                     class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
                     flex md:flex-row justify-end items-center py-2 space-x-4
-                    text-sm flex-col
+                    text-sm flex-col leading-[1.6]
                   </td>
                   <td class="px-6 py-4 max-lg:whitespace-nowrap">
                     Sets datatable pagination styles.
@@ -1553,7 +1553,7 @@ <h4 class="mb-5 text-lg font-bold">Via JavaScript</h4>
                   </td>
                   <td
                     class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
-                    whitespace-nowrap text-clip overflow-hidden px-6 py-4
+                    whitespace-nowrap text-clip overflow-hidden px-[1.4rem] py-4
                   </td>
                   <td class="px-6 py-4 max-lg:whitespace-nowrap">
                     Sets row item styles.
@@ -1609,7 +1609,7 @@ <h4 class="mb-5 text-lg font-bold">Via JavaScript</h4>
                   </td>
                   <td
                     class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
-                    w-20
+                    w-[70px]
                   </td>
                   <td class="px-6 py-4 max-lg:whitespace-nowrap">
                     Sets select wrapper styles.
@@ -1638,9 +1638,9 @@ <h4 class="mb-5 text-lg font-bold">Via JavaScript</h4>
                   </td>
                   <td
                     class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
-                    w-5 h-5 pb-1 mr-1 opacity-0 text-neutral-500
-                    group-hover:opacity-100 transition hover:ease-in-out
-                    transform ease-linear duration-300
+                    w-[15px] h-[10px] origin-bottom font-black mr-1 opacity-0
+                    text-neutral-500 group-hover:opacity-100 transition
+                    hover:ease-in-out transform ease-linear duration-300
                     motion-reduce:transition-none dark:text-neutral-400
                   </td>
                   <td class="px-6 py-4 max-lg:whitespace-nowrap">
@@ -1700,7 +1700,7 @@ <h4 class="mb-5 text-lg font-bold">Via JavaScript</h4>
                   </td>
                   <td
                     class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
-                    border-b font-medium
+                    border-b font-normal px-[1.4rem]
                   </td>
                   <td class="px-6 py-4 max-lg:whitespace-nowrap">
                     Sets table header styles.
@@ -1714,7 +1714,7 @@ <h4 class="mb-5 text-lg font-bold">Via JavaScript</h4>
                   </td>
                   <td
                     class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
-                    text-left text-sm font-light w-full
+                    text-left text-sm font-light w-full leading-[1.6]
                   </td>
                   <td class="px-6 py-4 max-lg:whitespace-nowrap">
                     Sets table styles.

diff --git a/site/content/docs/standard/data/datatables/index-js.html b/site/content/docs/standard/data/datatables/index-js.html
@@ -619,7 +619,6 @@
       colorClass.forEach((className) => {
         cell.classList.add(className);
       });
-      cell.classList.add("font-medium");
     };
 
     const columns = [

diff --git a/site/content/docs/standard/data/datatables/index.html b/site/content/docs/standard/data/datatables/index.html
@@ -1955,7 +1955,6 @@
             colorClass.forEach((className) => {
               cell.classList.add(className);
             });
-            cell.classList.add("font-medium");
           };
 
           const columns = [
@@ -2003,7 +2002,6 @@
             colorClass.forEach((className) => {
               cell.classList.add(className);
             });
-            cell.classList.add("font-medium");
           };
 
           const columns = [

diff --git a/src/js/data/datatables/html/columns.js b/src/js/data/datatables/html/columns.js
@@ -48,7 +48,7 @@ const columns = (
             column.field
           }" ${ATTR_SORT_ICON}>${sortIconTemplate}</span>`
         : ""
-    } <span class="${column.sort ? "" : "ml-6"}">${
+    } <span class="${column.sort ? "" : "pl-[18px]"}">${
       column.label
     }</span></div></th>`;
   });

diff --git a/src/js/data/datatables/html/pagination.js b/src/js/data/datatables/html/pagination.js
@@ -61,24 +61,24 @@ const pagination = (
   <div class="${classes.paginationButtonsWrapper}">
     ${
       fullPagination
-        ? `<button data-te-ripple-color="dark" class="${classes.paginationStartButton}" ${ATTR_PAGINATION_START}>
+        ? `<button data-te-ripple-init data-te-ripple-color="dark" class="${classes.paginationStartButton}" ${ATTR_PAGINATION_START}>
            ${paginationStartIconTemplate}
           </button>`
         : ""
     }
-    <button data-te-ripple-color="dark" class="${
+    <button data-te-ripple-init data-te-ripple-color="dark" class="${
       classes.paginationLeftButton
     }" ${ATTR_PAGINATION_LEFT}>
       ${paginationLeftIconTemplate}
   </button>
-    <button data-te-ripple-color="dark" class="${
+    <button data-te-ripple-init data-te-ripple-color="dark" class="${
       classes.paginationRightButton
     }" ${ATTR_PAGINATION_RIGHT}>
       ${paginationRightIconTemplate}
   </button>
     ${
       fullPagination
-        ? `<button data-te-ripple-color="dark" class="${classes.paginationEndButton}" ${ATTR_PAGINATION_END}>
+        ? `<button data-te-ripple-init data-te-ripple-color="dark" class="${classes.paginationEndButton}" ${ATTR_PAGINATION_END}>
            ${paginationEndIconTemplate}
           </button>`
         : ""

diff --git a/src/js/data/datatables/html/rows.js b/src/js/data/datatables/html/rows.js
@@ -27,7 +27,6 @@ const rows = ({
             class="${classes.checkboxRow}"
             type="checkbox"
             value=""
-            id="checkboxDefault" 
             data-te-row-index="${row.rowIndex}"  ${ATTR_ROW_CHECKBOX}/>
         </div>
       </td>`;

diff --git a/src/js/data/datatables/index.js b/src/js/data/datatables/index.js
@@ -49,10 +49,10 @@ const EVENT_RENDER = `render${EVENT_KEY}`;
 const EVENT_ROW_CLICK = `rowClick${EVENT_KEY}`;
 const EVENT_UPDATE = `update${EVENT_KEY}`;
 
-const sortIconTemplate = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+const sortIconTemplate = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor">
   <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
 </svg>`;
-const paginationStartIconTemplate = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+const paginationStartIconTemplate = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
   <path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
 </svg>`;
 const paginationLeftIconTemplate = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
@@ -76,7 +76,7 @@ const CHECKBOX_ROW_CLASSES =
 const CHECKBOX_ROW_WRAPPER_CLASSES =
   "mb-[0.125rem] min-h-[1.5rem] pl-[1.5rem] ml-3 flex items-center";
 const COLOR_CLASSES = "bg-white dark:bg-neutral-800";
-const COLUMNS_CLASSES = "py-4 text-clip overflow-hidden";
+const COLUMNS_CLASSES = "py-4 pl-1 text-clip overflow-hidden text-[#212529]";
 const EDIT_CLASSES = "focus:outline-none";
 const FIXED_HEADER_CLASSES = "sticky top-0 z-30";
 const FIXED_HEADER_BODY_CLASSES = "sticky z-10 bg-inherit";
@@ -99,7 +99,7 @@ const NO_FOUND_MESSAGE_CLASSES =
   "pl-2 py-3 font-light text-sm dark:text-neutral-300";
 const NO_FOUND_MESSAGE_WRAPPER_CLASSES = "border-b";
 const PAGINATION_CLASSES =
-  "flex md:flex-row justify-end items-center py-2 space-x-4 text-sm flex-col";
+  "flex md:flex-row justify-end items-center py-2 space-x-4 text-sm flex-col leading-[1.6]";
 const PAGINATION_BORDERED_CLASSES = "border border-t-0";
 const PAGINATION_BUTTONS_WRAPPER_CLASSES =
   "order-1 my-3 md:order-none md:my-0 md:pr-1";
@@ -117,21 +117,21 @@ const ROW_CLASSES = "border-b";
 const ROW_ANIMATION_CLASSES =
   "transition ease-in-out duration-300 motion-reduce:transition-none";
 const ROW_ITEM_CLASSES =
-  "whitespace-nowrap text-clip overflow-hidden px-6 py-4";
+  "whitespace-nowrap text-clip overflow-hidden px-[1.4rem] py-4";
 const SCROLL_CLASSES = "relative";
 const SELECTABLE_ROW_CLASSES = "!bg-neutral-100 dark:!bg-neutral-600";
 const SELECT_ITEMS_WRAPPER_CLASSES =
   "flex items-center space-x-4 order-3 md:order-none";
-const SELECT_WRAPPER_CLASSES = "w-20";
+const SELECT_WRAPPER_CLASSES = "w-[70px]";
 const SM_CLASSES = "!py-2";
 const SORT_ICON_CLASSES =
-  "w-5 h-5 pb-1 mr-1 opacity-0 text-neutral-500 group-hover:opacity-100 transition hover:ease-in-out transform ease-linear duration-300 motion-reduce:transition-none dark:text-neutral-400";
+  "w-[15px] h-[10px] origin-bottom font-black mr-1 opacity-0 text-neutral-500 group-hover:opacity-100 transition hover:ease-in-out transform ease-linear duration-300 motion-reduce:transition-none dark:text-neutral-400";
 const SORT_ICON_WRAPPER_CLASSES = "flex flex-row group";
 const STRIPED_CLASSES =
   "[&:nth-child(odd)]:bg-neutral-50 [&:nth-child(odd)]:dark:bg-neutral-700";
 const TABLE_BORDERED_CLASSES = "border";
-const TABLE_HEADER_CLASSES = "border-b font-medium";
-const TABLE_CLASSES = "text-left text-sm font-light w-full";
+const TABLE_HEADER_CLASSES = "border-b font-normal px-[1.4rem]";
+const TABLE_CLASSES = "text-left text-sm font-light w-full leading-[1.6]";
 
 const TYPE_OPTIONS = {
   bordered: "boolean",