vueless 0.0.164 → 0.0.166

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.164",
+  "version": "0.0.166",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.data-table/composables/attrs.composable.js

@@ -1,34 +1,19 @@
 import useUI from "../../composable.ui";
 import defaultConfig from "../configs/default.config";
 import { cva, cx } from "../../service.ui";
-import { computed, useSlots } from "vue";
+import { computed } from "vue";
 
 export function useAttrs(
   props,
-  {
-    tableRows,
-    selectedRows,
-    isNesting,
-    isHeaderSticky,
-    isFooterSticky,
-    hasSlotContentTheadActions,
-  },
+  { tableRows, isNesting, isShownActionsHeader, isHeaderSticky, isFooterSticky },
 ) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { wrapper, stickyHeaderColumn, headerCell } = config.value;
-
-  const slot = useSlots();
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
+  const { stickyHeaderCell, headerCell } = config.value;
 
   const cvaCustomHeaderItem = cva({
-    base: stickyHeaderColumn.base,
-    variants: stickyHeaderColumn.variants,
-    compoundVariants: stickyHeaderColumn.compoundVariants,
+    base: stickyHeaderCell.base,
+    variants: stickyHeaderCell.variants,
+    compoundVariants: stickyHeaderCell.compoundVariants,
   });
 
   const cvaHeaderCell = cva({
@@ -37,53 +22,59 @@ export function useAttrs(
     compoundVariants: headerCell.compoundVariants,
   });
 
-  const wrapperClasses = computed(() => cvaWrapper({ compact: props.compact }));
-
-  const stickyHeaderColumnClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
+  const stickyHeaderCellClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
 
   const headerCellClasses = computed(() => cvaHeaderCell({ compact: props.compact }));
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const wrapperAttrs = getAttrs("wrapper");
   const stickyHeaderAttrsRaw = getAttrs("stickyHeader");
-  const stickyHeaderColumnAttrsRaw = getAttrs("stickyHeaderColumn", {
-    classes: stickyHeaderColumnClasses,
+  const stickyHeaderCellAttrsRaw = getAttrs("stickyHeaderCell", {
+    classes: stickyHeaderCellClasses,
+  });
+  const stickyHeaderCounterAttrs = getAttrs("stickyHeaderCounter");
+  const stickyHeaderActionsCounterAttrs = getAttrs("stickyHeaderActionsCounter");
+  const stickyHeaderCheckboxAttrs = getAttrs("stickyHeaderCheckbox", {
+    isComponent: true,
+  });
+  const stickyHeaderActionsCheckboxAttrs = getAttrs("stickyHeaderActionsCheckbox", {
+    isComponent: true,
   });
-  const selectedRowsCountAttrs = getAttrs("selectedRowsCount");
-  const selectAllCheckboxAttrs = getAttrs("selectAllCheckbox", { isComponent: true });
   const stickyHeaderLoaderAttrs = getAttrs("stickyHeaderLoader", { isComponent: true });
-  const tableWrapperAttrsRaw = getAttrs("tableWrapper");
+  const tableWrapperAttrs = getAttrs("tableWrapper");
   const tableAttrs = getAttrs("table");
   const headerAttrs = getAttrs("header");
   const headerRowAttrsRaw = getAttrs("headerRow");
   const headerCellAttrsRaw = getAttrs("headerCell", { classes: headerCellClasses });
-  const headerSelectAllCheckboxAttrs = getAttrs("headerSelectAllCheckbox", { isComponent: true });
-  const tableLoaderAttrs = getAttrs("tableLoader", { isComponent: true });
-  const expandIconAttrs = getAttrs("expandIcon", { isComponent: true });
-  const collapseIconAttrs = getAttrs("collapseIcon", { isComponent: true });
+  const headerCheckboxAttrs = getAttrs("headerCheckbox", { isComponent: true });
+  const headerLoaderAttrs = getAttrs("headerLoader", { isComponent: true });
+  const bodyCellNestedExpandIconAttrs = getAttrs("bodyCellNestedExpandIcon", { isComponent: true });
+  const bodyCellNestedCollapseIconAttrs = getAttrs("bodyCellNestedCollapseIcon", {
+    isComponent: true,
+  });
   const bodyAttrs = getAttrs("body");
   const bodyCellAttrsRaw = getAttrs("bodyCell", { isComponent: true });
-  const checkboxBodyWrapperCellAttrs = getAttrs("checkboxBodyWrapperCell");
-  const tableCheckboxAttrs = getAttrs("tableCheckbox", { isComponent: true });
-  const dateSeparatorAttrs = getAttrs("dateSeparator", { isComponent: true });
-  const toggleItemButtonAttrs = getAttrs("toggleItemButton");
-  const secondaryRowAttrs = getAttrs("secondaryRow");
-  const secondaryRowEmptyAttrs = getAttrs("secondaryRowEmpty");
+  const bodyCheckboxAttrs = getAttrs("bodyCheckbox", { isComponent: true });
+  const bodyCellDateSeparatorAttrs = getAttrs("bodyCellDateSeparator");
+  const bodyDateSeparatorAttrs = getAttrs("bodyDateSeparator", { isComponent: true });
+  const bodyCellNestedAttrs = getAttrs("bodyCellNested");
+  const bodyCellSecondaryAttrs = getAttrs("bodyCellSecondary");
+  const bodyCellSecondaryEmptyAttrs = getAttrs("bodyCellSecondaryEmpty");
   const footerAttrsRaw = getAttrs("footer");
   const footerRowAttrs = getAttrs("footerRow");
   const footerCellAttrs = getAttrs("footerCell", { isComponent: true });
-  const footerStickyRowAttrs = getAttrs("footerStickyRow");
-  const emptyAttrs = getAttrs("empty", { isComponent: true });
-  const beforeFirstRowAttrsRaw = getAttrs("beforeFirstRow");
-  const beforeFirstRowCellAttrs = getAttrs("beforeFirstRowCell", { isComponent: true });
-  const afterLastRowAttrsRaw = getAttrs("afterLastRow");
-  const afterLastRowCellAttrs = getAttrs("afterLastRowCell", { isComponent: true });
-  const toggleButtonWrapperAttrsRaw = getAttrs("toggleButtonWrapper");
+  const stickyFooterRowAttrs = getAttrs("stickyFooterRow");
+  const bodyEmptyStateAttrs = getAttrs("bodyEmptyState", { isComponent: true });
+  const bodyRowBeforeAttrsRaw = getAttrs("bodyRowBefore");
+  const bodyRowBeforeCellAttrs = getAttrs("bodyRowBeforeCell", { isComponent: true });
+  const bodyRowAfterAttrs = getAttrs("bodyRowAfter");
+  const bodyRowAfterCellAttrs = getAttrs("bodyRowAfterCell", { isComponent: true });
+  const bodyCellNestedWrapperAttrsRaw = getAttrs("bodyCellNestedWrapper");
 
   const bodyRowAttrsRaw = getAttrs("bodyRow");
 
-  const bodyCellAttrs = computed(() => (tdClass) => ({
+  const bodyCellAttrs = computed(() => (classes) => ({
     ...bodyCellAttrsRaw.value,
-    class: cx([bodyCellAttrsRaw.value.class, tdClass || ""]),
+    class: cx([bodyCellAttrsRaw.value.class, classes || ""]),
   }));
 
   const bodyRowAttrs = computed(() => (row) => ({
@@ -96,112 +87,112 @@ export function useAttrs(
     class: cx([headerCellAttrsRaw.value.class, classes]),
   }));
 
-  const beforeFirstRowAttrs = computed(() => ({
-    ...beforeFirstRowAttrsRaw.value,
+  const bodyRowBeforeAttrs = computed(() => ({
+    ...bodyRowBeforeAttrsRaw.value,
     class: cx([
-      beforeFirstRowAttrsRaw.value.class,
-      tableRows.value[0]?.isChecked ? config.value.checkedRow : "",
+      bodyRowBeforeAttrsRaw.value.class,
+      tableRows.value[0]?.isChecked ? config.value.bodyRowChecked : "",
     ]),
   }));
 
-  const tableWrapperAttrs = computed(() => ({
-    ...tableWrapperAttrsRaw.value,
-    class: cx([
-      tableWrapperAttrsRaw.value.class,
-      selectedRows.value.length && config.value.tableWrapperSelected,
-    ]),
-  }));
+  const headerRowAttrs = computed(() => {
+    return {
+      ...headerRowAttrsRaw.value,
+      class: cx([headerRowAttrsRaw.value.class]),
+    };
+  });
 
-  const headerRowAttrs = computed(() => ({
-    ...headerRowAttrsRaw.value,
-    class: cx([
-      headerRowAttrsRaw.value.class,
-      selectedRows.value.length && !isHeaderSticky.value && config.value.stickyHeaderHidden,
-    ]),
-  }));
+  const stickyHeaderAttrs = computed(() => {
+    const actionHeaderClasses = cx([
+      stickyHeaderAttrsRaw.value.class,
+      config.value.stickyHeaderActions,
+    ]);
 
-  const stickyHeaderAttrs = computed(() => ({
-    ...stickyHeaderAttrsRaw.value,
-    class: cx([
+    const actionHeaderStickyClasses = cx([
+      config.value.stickyHeaderActions,
       stickyHeaderAttrsRaw.value.class,
-      selectedRows.value.length &&
-        hasSlotContentTheadActions.value &&
-        config.value.stickyHeaderActions,
-      isHeaderSticky.value && props.stickyHeader && config.value.stickyHeaderActive,
-    ]),
-  }));
+    ]);
+
+    const stickyHeaderRowClasses = cx([
+      stickyHeaderAttrsRaw.value.class,
+      config.value.stickyHeaderRow,
+    ]);
+
+    return {
+      ...stickyHeaderAttrsRaw.value,
+      class: cx([
+        isShownActionsHeader.value && actionHeaderClasses,
+        isShownActionsHeader.value && isHeaderSticky.value && actionHeaderStickyClasses,
+        !isShownActionsHeader.value && isHeaderSticky.value && stickyHeaderRowClasses,
+      ]),
+    };
+  });
 
   const footerClassesAttrs = computed(() => ({
     ...footerAttrsRaw.value,
-    class: cx([footerAttrsRaw.value.class, isFooterSticky.value && config.value.footerSticky]),
-  }));
-
-  const afterLastRowAttrs = computed(() => ({
-    ...afterLastRowAttrsRaw.value,
-    class: cx([
-      afterLastRowAttrsRaw.value.class,
-      hasSlotContent(slot["after-last-row"]) ? config.value.moreRowHidden : config.value.moreRow,
-    ]),
+    class: cx([footerAttrsRaw.value.class, isFooterSticky.value && config.value.stickyFooter]),
   }));
 
-  const stickyHeaderColumnAttrs = computed(() => (thClass) => ({
-    ...stickyHeaderColumnAttrsRaw.value,
-    class: cx([stickyHeaderColumnAttrsRaw.value.class, thClass]),
+  const stickyHeaderCellAttrs = computed(() => (classes) => ({
+    ...stickyHeaderCellAttrsRaw.value,
+    class: cx([stickyHeaderCellAttrsRaw.value.class, classes]),
   }));
 
-  const dateSeparatorRowAttrs = (rowIndex) => {
+  const bodyRowDateSeparatorAttrs = (rowIndex) => {
     const isCheckedRowBefore = tableRows.value[rowIndex - 1]?.isChecked;
     const isCheckedRowAfter = tableRows.value[rowIndex]?.isChecked;
 
     const activeClass =
       (isCheckedRowBefore && isCheckedRowAfter) || (rowIndex === 0 && isCheckedRowAfter)
-        ? config.value.checkedRow
+        ? config.value.bodyRowChecked
         : "";
 
-    return getAttrs("option", { classes: activeClass }).value;
+    return getAttrs("bodyRowDateSeparator", { classes: activeClass }).value;
   };
 
-  const toggleButtonWrapperAttrs = computed(() => (index) => ({
-    ...toggleButtonWrapperAttrsRaw.value,
-    class: index === 0 && isNesting.value ? config.value.toggleButtonWrapper : "",
+  const bodyCellNestedWrapperAttrs = computed(() => (index) => ({
+    ...bodyCellNestedWrapperAttrsRaw.value,
+    class: index === 0 && isNesting.value ? config.value.bodyCellNestedWrapper : "",
   }));
 
   return {
     config,
     wrapperAttrs,
-    stickyHeaderColumnAttrs,
+    stickyHeaderCellAttrs,
     stickyHeaderAttrs,
     tableWrapperAttrs,
     headerCellAttrs,
     headerRowAttrs,
     bodyRowAttrs,
     footerClassesAttrs,
-    afterLastRowAttrs,
-    afterLastRowCellAttrs,
-    beforeFirstRowAttrs,
-    beforeFirstRowCellAttrs,
-    dateSeparatorRowAttrs,
-    toggleButtonWrapperAttrs,
+    bodyRowAfterAttrs,
+    bodyRowAfterCellAttrs,
+    bodyRowBeforeAttrs,
+    bodyRowBeforeCellAttrs,
+    bodyRowDateSeparatorAttrs,
+    bodyCellNestedWrapperAttrs,
     bodyCellAttrs,
-    checkboxBodyWrapperCellAttrs,
     footerCellAttrs,
-    selectAllCheckboxAttrs,
-    headerSelectAllCheckboxAttrs,
-    tableCheckboxAttrs,
-    collapseIconAttrs,
-    expandIconAttrs,
-    emptyAttrs,
-    dateSeparatorAttrs,
-    selectedRowsCountAttrs,
+    stickyHeaderCounterAttrs,
+    stickyHeaderActionsCounterAttrs,
+    headerCheckboxAttrs,
+    bodyCheckboxAttrs,
+    bodyCellNestedCollapseIconAttrs,
+    bodyCellNestedExpandIconAttrs,
+    bodyEmptyStateAttrs,
+    bodyDateSeparatorAttrs,
+    bodyCellDateSeparatorAttrs,
+    stickyHeaderCheckboxAttrs,
+    stickyHeaderActionsCheckboxAttrs,
     stickyHeaderLoaderAttrs,
     tableAttrs,
-    tableLoaderAttrs,
+    headerLoaderAttrs,
     bodyAttrs,
-    toggleItemButtonAttrs,
-    secondaryRowAttrs,
-    secondaryRowEmptyAttrs,
+    bodyCellNestedAttrs,
+    bodyCellSecondaryAttrs,
+    bodyCellSecondaryEmptyAttrs,
     footerRowAttrs,
-    footerStickyRowAttrs,
+    stickyFooterRowAttrs,
     hasSlotContent,
     headerAttrs,
   };

package/ui.data-table/configs/default.config.js

@@ -1,59 +1,52 @@
 export default /*tw*/ {
-  wrapper: {
-    base: "relative bg-white rounded-lg",
-    variants: {
-      compact: {
-        true: "group/table-compact",
-      },
-    },
-  },
-  headerCheckboxWrapper: "",
+  wrapper: "relative",
+  stickyHeader: "fixed top-0 flex items-center z-30 overflow-hidden rounded-none border",
+  stickyHeaderRow: "border-gray-200 bg-white",
+  stickyHeaderCell: "flex-none text-sm text-gray-500 p-4 whitespace-nowrap",
+  stickyHeaderCheckbox: "",
+  stickyHeaderCounter: "absolute top-4 left-11 pr-3 font-medium text-sm text-gray-900 bg-gradient-to-r from-white from-80%",
+  stickyHeaderLoader: "",
+  stickyHeaderActions: "absolute rounded-t-lg border-blue-200 bg-blue-50",
+  stickyHeaderActionsCheckbox: "",
+  stickyHeaderActionsCounter: "-ml-2.5 mr-3 font-medium text-sm text-gray-900", // style dupliactions
+  tableWrapper: "border border-gray-200 rounded-lg bg-white",
+  table: "min-w-full border-none text-sm w-full",
   header: "border-b border-gray-200",
   headerRow: "",
-  headerCell: "p-4 text-sm font-normal text-gray-500 text-left",
-  headerSelectAllCheckbox: "",
-  stickyHeader: "flex items-center z-30 overflow-hidden rounded-t-lg border border-gray-200 border-b-0",
-  stickyHeaderHidden: "relative -top-[3.75rem] collapse",
-  stickyHeaderLoader: "absolute top-[3.75rem] group-[]/table-compact:!top-[3.25rem]",
-  stickyHeaderActive: "fixed top-0 border  border-gray-200 bg-white rounded-none",
-  stickyHeaderActions: "rounded-t-lg border border-blue-200 !bg-blue-50",
-  stickyHeaderColumn: "flex-none text-sm font-normal text-gray-500 p-4 whitespace-nowrap",
-  selectedRowsCount: "absolute left-11 pr-2 font-medium text-sm text-gray-900 bg-gradient-to-r from-white from-80%",
-  selectAllCheckbox: "flex-none text-sm font-normal text-gray-500 pr-[1.125rem] pl-4 py-4 group-[]/table-compact:!px-4",
-  tableWrapper: "!overflow-x-auto rounded-lg border border-gray-200",
-  tableWrapperSelected: "!rounded-t-none border-t-0",
-  table: "min-w-full border-none text-sm w-full",
-  tableLoader: "absolute !top-auto",
-  moreRow: "!px-0 !py-4 first:mx-auto",
-  moreRowHidden: "!p-0",
-  checkedRow: "transition duration-100 bg-gray-100",
-  beforeFirstRow: "",
-  beforeFirstRowCell: "py-1",
-  afterLastRow: "",
-  afterLastRowCell: "py-1",
-  toggleButtonWrapper: "flex items-center",
-  expandIcon: "mr-2 rounded-sm bg-gray-200",
-  expandIconName: "add",
-  collapseIcon: "mr-2 rounded-sm bg-gray-200",
-  collapseIconName: "remove",
+  headerCell: "p-4 text-sm font-normal text-gray-500 text-left", // style dupliactions
+  headerCellCheckbox: "w-10",
+  headerCheckbox: "",
+  headerLoader: "absolute !top-auto",
   body: "group/body divide-none",
   bodyRow: "hover:bg-gray-50",
-  checkboxBodyWrapperCell: "py-3 px-4 align-top",
+  bodyRowChecked: "bg-gray-100 transition duration-100",
+  bodyRowBefore: "!p-0",
+  bodyRowBeforeCell: "py-1",
+  bodyRowAfter: "!p-0",
+  bodyRowAfterCell: "py-1",
+  bodyRowDateSeparator: "",
   bodyCell: "",
-  tableCheckbox: "",
-  dateSeparator: "",
-  toggleItemButton: "flex relative -top-px",
-  secondaryRow: "mt-1 text-xs text-gray-500",
-  secondaryRowEmpty: "inline-block",
+  bodyCellSecondary: "mt-1 text-xs text-gray-500",
+  bodyCellSecondaryEmpty: "inline-block",
+  bodyCellCheckbox: "!px-4", // try to remove important
+  bodyCellDateSeparator: "",
+  bodyCellNestedWrapper: "flex items-center",
+  bodyCellNested: "flex relative -top-px",
+  bodyCellNestedExpandIcon: "mr-2 rounded-sm bg-gray-200",
+  bodyCellNestedExpandIconName: "add",
+  bodyCellNestedCollapseIcon: "mr-2 rounded-sm bg-gray-200",
+  bodyCellNestedCollapseIconName: "remove",
+  bodyCheckbox: "",
+  bodyDateSeparator: "",
+  bodyEmptyState: "my-8",
   footer: "group/footer border-t border-solid border-gray-200",
-  footerSticky: "relative group/footer-fixed",
   footerRow: "",
   footerCell: "",
-  footerStickyRow: `
+  stickyFooter: "relative group/footer-fixed",
+  stickyFooterRow: `
     fixed bottom-0 -ml-px border border-b border-gray-200 bg-white
     collapse group-[]/footer-fixed:[visibility:inherit]
   `,
-  empty: "my-8",
   i18n: {
     noItems: "There is no data in the table yet.",
     noResultsForFilters: "No results were found for the specified filters.",

package/ui.data-table/index.stories.js

@@ -7,6 +7,7 @@ import UButton from "../ui.button";
 import ULink from "../ui.button-link";
 import UMoney from "../ui.text-money";
 import UBadge from "../ui.text-badge";
+import URow from "../ui.container-row";
 
 const STICKY_PARAMETERS = {
   docs: {
@@ -46,20 +47,20 @@ export default {
       id: 1,
       isChecked: false,
       key_1: {
-        primaryRow: "primaryRow",
-        secondaryRow: "secondaryRow",
+        primary: "primary",
+        secondary: "secondary",
       },
       key_2: {
-        primaryRow: "primaryRow",
-        secondaryRow: "secondaryRow",
+        primary: "primary",
+        secondary: "secondary",
       },
       key_3: {
-        primaryRow: "primaryRow",
-        secondaryRow: "secondaryRow",
+        primary: "primary",
+        secondary: "secondary",
       },
       key_4: {
-        primaryRow: "primaryRow",
-        secondaryRow: "secondaryRow",
+        primary: "primary",
+        secondary: "secondary",
       },
     },
     numberOfRows: 5,
@@ -109,7 +110,7 @@ const EmptyTemplate = (args) => ({
 });
 
 const SlotTemplate = (args) => ({
-  components: { UTable, UButton, UTableCell, ULink, UMoney, UBadge },
+  components: { UTable, UButton, UTableCell, ULink, UMoney, UBadge, URow },
   setup() {
     return { args };
   },
@@ -123,9 +124,14 @@ const SlotTemplate = (args) => ({
   `,
   computed: {
     itemsData() {
-      const rows = [];
+      let rows = [];
 
-      for (let i = 0; i < args.numberOfRows; i++) rows.push(args.row);
+      for (let i = 0; i < args.numberOfRows; i++) {
+        const newRow = { ...args.row };
+
+        newRow.id = getRandomId();
+        rows.push(newRow);
+      }
 
       return rows;
     },
@@ -159,7 +165,7 @@ stickyFooter.args = {
   selectable: true,
   stickyFooter: true,
   slotTemplate: `
-    <template #tfoot>
+    <template #footer>
       <UTableCell>
         <p>
           🤘🤘🤘
@@ -197,33 +203,32 @@ slotDefault.args = {
 
 export const slotTheadActions = SlotTemplate.bind({});
 slotTheadActions.args = {
+  numberOfRows: 50,
+  stickyHeader: true,
   selectable: true,
   slotTemplate: `
-    <template #thead-actions>
-      <p>
-        🤘🤘🤘
-        Lorem ipsum dolor sit amet.
-      </p>
-
-      <UButton
-        size="sm"
-        variant="thirdary"
-        filled
-        label="some button"
-      />
-
-      <UButton
-        size="sm"
-        variant="thirdary"
-        filled
-        label="some button"
-      />
+    <template #header-actions>
+      <URow gap="2xs">
+        <UButton
+          label="Edit"
+          variant="thirdary"
+          color="blue"
+          size="sm"
+        />
+
+        <UButton
+          label="Delete"
+          variant="thirdary"
+          color="blue"
+          size="sm"
+        />
+      </URow>
     </template>
   `,
 };
 
-export const slotBeforeFirstRow = SlotTemplate.bind({});
-slotBeforeFirstRow.args = {
+export const slotbodyRowBefore = SlotTemplate.bind({});
+slotbodyRowBefore.args = {
   slotTemplate: `
     <template #before-first-row>
       <p>
@@ -236,8 +241,8 @@ slotBeforeFirstRow.args = {
   `,
 };
 
-export const slotAfterLastRow = SlotTemplate.bind({});
-slotAfterLastRow.args = {
+export const slotbodyRowAfter = SlotTemplate.bind({});
+slotbodyRowAfter.args = {
   slotTemplate: `
     <template #after-last-row>
       <p>