vueless 0.0.2 → 0.0.3

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

@@ -0,0 +1,188 @@
+import useUI from "vueless/composable.ui";
+import defaultConfig from "../configs/default.config";
+import { cva, cx } from "vueless/service.ui";
+import { computed, useSlots } from "vue";
+
+export function useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFooterSticky }) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { wrapper, customHeaderItem, headerCell } = config.value;
+
+  const slot = useSlots();
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaCustomHeaderItem = cva({
+    base: customHeaderItem.base,
+    variants: customHeaderItem.variants,
+    compoundVariants: customHeaderItem.compoundVariants,
+  });
+
+  const cvaHeaderCell = cva({
+    base: headerCell.base,
+    variants: headerCell.variants,
+    compoundVariants: headerCell.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() => cvaWrapper({ compact: props.compact }));
+
+  const customHeaderItemClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
+
+  const headerCellClasses = computed(() => cvaHeaderCell({ compact: props.compact }));
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const customHeaderItemAttrsRaw = getAttrs("customHeaderItem", {
+    classes: customHeaderItemClasses,
+  });
+  const selectedRowsCountAttrs = getAttrs("selectedRowsCount");
+  const selectAllCheckboxAttrs = getAttrs("selectAllCheckbox", { isComponent: true });
+  const headerStickyLoaderAttrs = getAttrs("headerStickyLoader", { isComponent: true });
+  const tableAttrs = getAttrs("table");
+  const headerAttrs = getAttrs("header");
+  const headerRowAttrs = 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 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 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 bodyRowAttrsRaw = getAttrs("bodyRow");
+
+  const bodyCellAttrs = computed(() => (tdClass) => ({
+    ...bodyCellAttrsRaw.value,
+    class: cx([bodyCellAttrsRaw.value.class, tdClass || ""]),
+  }));
+
+  const bodyRowAttrs = computed(() => (row) => ({
+    ...bodyRowAttrsRaw.value,
+    class: cx([bodyRowAttrsRaw.value.class, row]),
+  }));
+
+  const headerCellAttrs = computed(() => (classes) => ({
+    ...headerCellAttrsRaw.value,
+    class: cx([headerCellAttrsRaw.value.class, classes]),
+  }));
+
+  const beforeFirstRowAttrs = computed(() => ({
+    ...beforeFirstRowAttrsRaw.value,
+    class: cx([
+      beforeFirstRowAttrsRaw.value.class,
+      tableRows.value[0]?.isChecked ? config.value.checkedRow : "",
+    ]),
+  }));
+
+  const tableWrapperAttrs = computed(() => ({
+    class: cx([
+      config.value.innerWrapper,
+      selectedRows.value.length && config.value.innerWrapperSelected,
+    ]),
+  }));
+
+  const headerRowCellAttrs = computed(() => ({
+    class: cx([
+      config.value.headerRow,
+      selectedRows.value.length && !isHeaderSticky.value && config.value.customHeaderHidden,
+    ]),
+  }));
+
+  const customHeaderAttrs = computed(() => ({
+    class: cx([
+      config.value.customHeader,
+      selectedRows.value.length && config.value.customHeaderActions,
+      isHeaderSticky.value && props.stickyHeader && config.value.customHeaderSticky,
+    ]),
+  }));
+
+  const footerClassesAttrs = computed(() => ({
+    class: cx([config.value.footer, 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,
+    ]),
+  }));
+
+  const customHeaderItemAttrs = computed(() => (thClass) => ({
+    ...customHeaderItemAttrsRaw.value,
+    class: cx([customHeaderItemAttrsRaw.value.class, thClass]),
+  }));
+
+  const dateSeparatorRowAttrs = computed(() => (rowIndex) => {
+    const isCheckedRowBefore = tableRows.value[rowIndex - 1]?.isChecked;
+    const isCheckedRowAfter = tableRows.value[rowIndex]?.isChecked;
+
+    return {
+      class:
+        (isCheckedRowBefore && isCheckedRowAfter) || (rowIndex === 0 && isCheckedRowAfter)
+          ? config.value.checkedRow
+          : "",
+    };
+  });
+
+  const toggleButtonWrapperAttrs = computed(() => (index) => ({
+    class: index === 0 && props.nesting ? config.value.toggleButtonWrapper : "",
+  }));
+
+  return {
+    config,
+    wrapperAttrs,
+    customHeaderItemAttrs,
+    customHeaderAttrs,
+    tableWrapperAttrs,
+    headerRowCellAttrs,
+    bodyRowAttrs,
+    footerClassesAttrs,
+    afterLastRowAttrs,
+    afterLastRowCellAttrs,
+    beforeFirstRowAttrs,
+    beforeFirstRowCellAttrs,
+    dateSeparatorRowAttrs,
+    toggleButtonWrapperAttrs,
+    headerCellAttrs,
+    bodyCellAttrs,
+    checkboxBodyWrapperCellAttrs,
+    footerCellAttrs,
+    selectAllCheckboxAttrs,
+    headerSelectAllCheckboxAttrs,
+    tableCheckboxAttrs,
+    collapseIconAttrs,
+    expandIconAttrs,
+    emptyAttrs,
+    dateSeparatorAttrs,
+    selectedRowsCountAttrs,
+    headerStickyLoaderAttrs,
+    tableAttrs,
+    headerRowAttrs,
+    tableLoaderAttrs,
+    bodyAttrs,
+    toggleItemButtonAttrs,
+    secondaryRowAttrs,
+    secondaryRowEmptyAttrs,
+    footerRowAttrs,
+    footerStickyRowAttrs,
+    hasSlotContent,
+    headerAttrs,
+  };
+}

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

@@ -0,0 +1,82 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "relative bg-white rounded-2xl",
+    variants: {
+      compact: {
+        true: "group/table-compact",
+      },
+    },
+  },
+  customHeader: "flex items-center z-30 overflow-hidden",
+  customHeaderSticky: "fixed top-0 border border-t-0 border-gray-200 bg-white group/fixed-header",
+  customHeaderActions: "rounded-t-lg border border-blue-200 !bg-blue-50 group-[]/fixed-header:!rounded-none",
+  customHeaderHidden: "relative -top-[3.75rem] collapse",
+  customHeaderItem: {
+    base: "flex-none text-sm font-normal text-gray-500 px-[1.125rem] py-4 [&:nth-child(2)]:pl-0",
+    variants: {
+      compact: {
+        true: "!p-4 [&:nth-child(2)]:!pl-0",
+      },
+    },
+  },
+  selectedRowsCount: "flex items-center pr-4 font-medium text-gray-900",
+  selectAllCheckbox: "flex-none text-sm font-normal text-gray-500 pr-[1.125rem] pl-4 py-4 group-[]/table-compact:!px-4",
+  headerStickyLoader: "top-[3.75rem] group-[]/table-compact:!top-[3.25rem]",
+  innerWrapper: "overflow-auto rounded-lg border border-gray-200",
+  innerWrapperSelected: "!rounded-t-none border-t-0",
+  table: "min-w-full border-none bg-white text-sm w-full",
+  headerCheckboxWrapper: "w-[3.75rem]",
+  header: "border-b border-solid border-gray-200",
+  headerRow: "",
+  headerCell: {
+    base: `
+      px-[1.125rem] py-4 text-sm font-normal text-gray-500
+      text-left first:p-4 last:p-4 [&:nth-child(2)]:pl-0
+    `,
+    variants: {
+      compact: {
+        true: "bg-white p-4 first:p-4 last:p-4",
+      },
+    },
+  },
+  headerSelectAllCheckbox: "",
+  tableLoader: "!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",
+  body: "group/body divide-none",
+  bodyRow: "hover:bg-gray-50",
+  checkboxBodyWrapperCell: "w-[3.75rem] py-3 px-4 align-top",
+  bodyCell: "",
+  tableCheckbox: "",
+  dateSeparator: "",
+  toggleItemButton: "flex relative -top-px",
+  secondaryRow: "mt-1 text-xs text-gray-500",
+  secondaryRowEmpty: "inline-block",
+  footer: "group/footer border-t border-solid border-gray-200",
+  footerSticky: "relative group/footer-fixed",
+  footerRow: "",
+  footerCell: "",
+  footerStickyRow: `
+    fixed bottom-0 -ml-px border border-b border-gray-200 bg-white
+    collapse group-[]/footer-fixed:[visibility:inherit]
+  `,
+  empty: "my-8",
+  defaultVariants: {
+    nestingFrom: 0,
+    nesting: false,
+    compact: false,
+    selectable: false,
+    stickyHeader: false,
+    stickyFooter: false,
+  },
+};

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

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UTable = "UTable";

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

@@ -1,12 +1,15 @@
 import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getRandomId } from "vueless/service.ui";
 
 import UTable from "vueless/ui.data-table";
+import UTableCell from "vueless/ui.data-table-cell";
 import UButton from "vueless/ui.button";
-
-const ROW_CLASS = "pt-4 p-3";
-const FOOTER_CLASS = "flex justify-between p-3";
+import ULink from "vueless/ui.button-link";
+import UMoney from "vueless/ui.text-money";
+import UBadge from "vueless/ui.text-badge";
 
 export default {
+  id: "7010",
   title: "Data / Table",
   component: UTable,
   argTypes: {
@@ -21,26 +24,28 @@ export default {
     },
   },
   args: {
-    headers: [
-      { value: "value_1", text: "title 1", thClass: "w-2/5" },
-      { value: "value_2", text: "title 2" },
-      { value: "value_3", text: "title 3" },
-      { value: "value_4", text: "title 4" },
+    columns: [
+      { key: "key_1", label: "title 1", thClass: "w-2/5" },
+      { key: "key_2", label: "title 2" },
+      { key: "key_3", label: "title 3" },
+      { key: "key_4", label: "title 4" },
     ],
     itemsRow: {
-      value_1: {
+      id: getRandomId(),
+      isChecked: false,
+      key_1: {
         primaryRow: "primaryRow",
         secondaryRow: "secondaryRow",
       },
-      value_2: {
+      key_2: {
         primaryRow: "primaryRow",
         secondaryRow: "secondaryRow",
       },
-      value_3: {
+      key_3: {
         primaryRow: "primaryRow",
         secondaryRow: "secondaryRow",
       },
-      value_4: {
+      key_4: {
         primaryRow: "primaryRow",
         secondaryRow: "secondaryRow",
       },
@@ -59,41 +64,41 @@ const DefaultTemplate = (args) => ({
   template: `
     <UTable
       v-bind="args"
-      :items="itemsData"
+      :rows="itemsData"
     >
     </UTable>
   `,
   computed: {
     itemsData() {
-      const items = [];
+      const rows = [];
 
-      for (let i = 0; i < args.numberOfRow; i++) items.push(args.itemsRow);
+      for (let i = 0; i < args.numberOfRow; i++) rows.push(args.itemsRow);
 
-      return items;
+      return rows;
     },
   },
 });
 
 const SlotTemplate = (args) => ({
-  components: { UTable, UButton },
+  components: { UTable, UButton, UTableCell, ULink, UMoney, UBadge },
   setup() {
     return { args };
   },
   template: `
     <UTable
       v-bind="args"
-      :items="itemsData"
+      :rows="itemsData"
     >
       ${args.slotTemplate}
     </UTable>
   `,
   computed: {
     itemsData() {
-      const items = [];
+      const rows = [];
 
-      for (let i = 0; i < args.numberOfRow; i++) items.push(args.itemsRow);
+      for (let i = 0; i < args.numberOfRow; i++) rows.push(args.itemsRow);
 
-      return items;
+      return rows;
     },
   },
 });
@@ -102,28 +107,51 @@ const SlotTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const defaultCells = DefaultTemplate.bind({});
+export const defaultCells = SlotTemplate.bind({});
 defaultCells.args = {
-  headers: [
-    { value: "date", text: "date" },
-    { value: "link", text: "link" },
-    { value: "money", text: "money", thClass: "text-right" },
-    { value: "email", text: "email" },
-    { value: "tags", text: "tags" },
+  columns: [
+    { key: "link", label: "link" },
+    { key: "money", label: "money", thClass: "text-right" },
+    { key: "email", label: "email" },
+    { key: "tags", label: "tags" },
   ],
   itemsRow: {
-    date: 1645692407,
     link: "some link",
     money: {
       sum: 10,
       currencySymbol: "$",
     },
-    email: "some email",
+    email: "some@email.ua",
     tags: {
-      tags: { text: "some tag" },
+      tags: { label: "some tag" },
       variant: "orange",
     },
   },
+
+  slotTemplate: `
+    <template #cell-link="{ value }">
+      <ULink :url="value" size="value" :label="value" />
+    </template>
+
+    <template #cell-money="{ value }">
+      <UMoney :sum="value.sum" :symbol="value.currencySymbol" />
+    </template>
+
+    <template #cell-email="{ value }">
+      <ULink :label="value" :url="value" type="email" size="sm" />
+    </template>
+
+    <template #cell-tags="{ value }">
+      <div>
+        <UBadge
+          v-for="item in value.tags"
+          :key="item"
+          :label="item"
+          :color="value.variant"
+        />
+      </div>
+    </template>
+  `,
 };
 
 export const selectable = DefaultTemplate.bind({});
@@ -136,10 +164,12 @@ fixedFooter.args = {
   selectable: true,
   slotTemplate: `
     <template #tfoot>
-      <p class="${ROW_CLASS}">
-        🤘🤘🤘
-        Lorem ipsum dolor sit amet.
-      </p>
+      <UTableCell>
+        <p>
+          🤘🤘🤘
+          Lorem ipsum dolor sit amet.
+        </p>
+      </UTableCell>
     </template>
   `,
 };
@@ -153,7 +183,7 @@ compact.args = { compact: true };
 export const slotDefault = SlotTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
-    <template #cell-value_3="{value}">
+    <template #cell-key_3="{value}">
       🤘🤘🤘
     </template>
   `,
@@ -164,7 +194,7 @@ slotTheadActions.args = {
   selectable: true,
   slotTemplate: `
     <template #thead-actions>
-      <p class="${ROW_CLASS}">
+      <p>
         🤘🤘🤘
         Lorem ipsum dolor sit amet.
       </p>
@@ -173,14 +203,14 @@ slotTheadActions.args = {
         size="sm"
         variant="thirdary"
         filled
-        text="some button"
+        label="some button"
       />
 
       <UButton
         size="sm"
         variant="thirdary"
         filled
-        text="some button"
+        label="some button"
       />
     </template>
   `,
@@ -190,7 +220,7 @@ export const slotBeforeFirstRow = SlotTemplate.bind({});
 slotBeforeFirstRow.args = {
   slotTemplate: `
     <template #before-first-row>
-      <p class="${ROW_CLASS}">
+      <p>
         🤘🤘🤘
         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna
@@ -204,7 +234,7 @@ export const slotAfterLastRow = SlotTemplate.bind({});
 slotAfterLastRow.args = {
   slotTemplate: `
     <template #after-last-row>
-      <p class="${ROW_CLASS}">
+      <p>
         🤘🤘🤘
         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna
@@ -218,14 +248,14 @@ export const slotTfoot = SlotTemplate.bind({});
 slotTfoot.args = {
   slotTemplate: `
     <template #tfoot>
-      <div class="${FOOTER_CLASS}">
+      <UTableCell>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit,
           sed do eiusmod tempor incididunt ut labore et dolore magna
           aliqua. Ut enim ad minim veniam, quis nostrud exercitation
           ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </p>
-      </div>
+      </UTableCell>
     </template>
   `,
 };