From a8169d8e0dcb4512a068021fe703d4fdb2acd3e9 Mon Sep 17 00:00:00 2001 From: igor_przybysz Date: Wed, 19 Jul 2023 07:59:58 +0200 Subject: [PATCH] Make corrections #2 --- demo/sites/data/datatables.html | 1 - .../docs/standard/data/datatables/a.html | 24 +++++++++---------- .../standard/data/datatables/index-js.html | 1 - .../docs/standard/data/datatables/index.html | 2 -- src/js/data/datatables/html/columns.js | 2 +- src/js/data/datatables/html/pagination.js | 8 +++---- src/js/data/datatables/html/rows.js | 1 - src/js/data/datatables/index.js | 18 +++++++------- 8 files changed, 26 insertions(+), 31 deletions(-) diff --git a/demo/sites/data/datatables.html b/demo/sites/data/datatables.html index e4a0ee176..1b812f8d5 100644 --- a/demo/sites/data/datatables.html +++ b/demo/sites/data/datatables.html @@ -1048,7 +1048,6 @@

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 index 836c1a0cd..aaefb79aa 100644 --- a/site/content/docs/standard/data/datatables/a.html +++ b/site/content/docs/standard/data/datatables/a.html @@ -600,8 +600,8 @@

Via JavaScript

<svg xmlns="http://www.w3.org/2000/svg" - fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" + ><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" @@ -662,7 +662,7 @@

Via JavaScript

class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap"> <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"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" /> </svg>Via JavaScript - py-4 text-clip overflow-hidden + py-4 pl-1 text-clip overflow-hidden text-[#212529] Sets table columns styles. @@ -1369,7 +1369,7 @@

Via JavaScript

flex md:flex-row justify-end items-center py-2 space-x-4 - text-sm flex-col + text-sm flex-col leading-[1.6] Sets datatable pagination styles. @@ -1553,7 +1553,7 @@

Via JavaScript

- whitespace-nowrap text-clip overflow-hidden px-6 py-4 + whitespace-nowrap text-clip overflow-hidden px-[1.4rem] py-4 Sets row item styles. @@ -1609,7 +1609,7 @@

Via JavaScript

- w-20 + w-[70px] Sets select wrapper styles. @@ -1638,9 +1638,9 @@

Via JavaScript

- 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 @@ -1700,7 +1700,7 @@

Via JavaScript

- border-b font-medium + border-b font-normal px-[1.4rem] Sets table header styles. @@ -1714,7 +1714,7 @@

Via JavaScript

- text-left text-sm font-light w-full + text-left text-sm font-light w-full leading-[1.6] 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 index b9e1fdb95..e6a51b094 100644 --- 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 index de5307103..fedbb8694 100644 --- 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 index d35b58b2c..ca4088ef3 100644 --- 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}` : "" - } ${ + } ${ column.label }`; }); diff --git a/src/js/data/datatables/html/pagination.js b/src/js/data/datatables/html/pagination.js index 62e335ef6..e2766218c 100644 --- a/src/js/data/datatables/html/pagination.js +++ b/src/js/data/datatables/html/pagination.js @@ -61,24 +61,24 @@ const pagination = (
${ fullPagination - ? `` : "" } - - ${ fullPagination - ? `` : "" diff --git a/src/js/data/datatables/html/rows.js b/src/js/data/datatables/html/rows.js index eb28c1afa..ae372e27d 100644 --- 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}/>
`; diff --git a/src/js/data/datatables/index.js b/src/js/data/datatables/index.js index bfa172944..23279c4a6 100644 --- 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 = ` +const sortIconTemplate = ` `; -const paginationStartIconTemplate = ` +const paginationStartIconTemplate = ` `; const paginationLeftIconTemplate = ` @@ -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",