vueless 0.0.3 → 0.0.4

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

@@ -0,0 +1,188 @@
+import useUI from "../../composable.ui";
+import defaultConfig from "../configs/default.config";
+import { cva, cx } from "../../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 = (rowIndex) => {
+    const isCheckedRowBefore = tableRows.value[rowIndex - 1]?.isChecked;
+    const isCheckedRowAfter = tableRows.value[rowIndex]?.isChecked;
+
+    const activeClass =
+      (isCheckedRowBefore && isCheckedRowAfter) || (rowIndex === 0 && isCheckedRowAfter)
+        ? config.value.checkedRow
+        : "";
+
+    return getAttrs("option", { classes: activeClass }).value;
+  };
+
+  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/src/ui.data-table/configs/default.config.js

@@ -0,0 +1,88 @@
+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",
+  i18n: {
+    noItems: "There is no data in the table yet.",
+    noResultsForFilters: "No results were found for the specified filters.",
+    today: "today",
+    tomorrow: "tomorrow",
+  },
+  defaultVariants: {
+    nestingFrom: 0,
+    nesting: false,
+    compact: false,
+    selectable: false,
+    stickyHeader: false,
+    stickyFooter: false,
+  },
+};

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

@@ -0,0 +1,261 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getRandomId } from "../service.ui";
+
+import UTable from "../ui.data-table";
+import UTableCell from "../ui.data-table-cell";
+import UButton from "../ui.button";
+import ULink from "../ui.button-link";
+import UMoney from "../ui.text-money";
+import UBadge from "../ui.text-badge";
+
+export default {
+  id: "7010",
+  title: "Data / Table",
+  component: UTable,
+  argTypes: {
+    ...getArgTypes(UTable.name),
+    itemsRow: {
+      description:
+        "The row of the table. It's not a prop (it created for ease of work with storybook).",
+    },
+    numberOfRow: {
+      description:
+        "The number of table rows. It's not a prop (it created for ease of work with storybook).",
+    },
+  },
+  args: {
+    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: {
+      id: getRandomId(),
+      isChecked: false,
+      key_1: {
+        primaryRow: "primaryRow",
+        secondaryRow: "secondaryRow",
+      },
+      key_2: {
+        primaryRow: "primaryRow",
+        secondaryRow: "secondaryRow",
+      },
+      key_3: {
+        primaryRow: "primaryRow",
+        secondaryRow: "secondaryRow",
+      },
+      key_4: {
+        primaryRow: "primaryRow",
+        secondaryRow: "secondaryRow",
+      },
+    },
+    numberOfRow: 5,
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UTable },
+  setup() {
+    const slots = getSlotNames(UTable.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UTable
+      v-bind="args"
+      :rows="itemsData"
+    >
+    </UTable>
+  `,
+  computed: {
+    itemsData() {
+      const rows = [];
+
+      for (let i = 0; i < args.numberOfRow; i++) rows.push(args.itemsRow);
+
+      return rows;
+    },
+  },
+});
+
+const SlotTemplate = (args) => ({
+  components: { UTable, UButton, UTableCell, ULink, UMoney, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UTable
+      v-bind="args"
+      :rows="itemsData"
+    >
+      ${args.slotTemplate}
+    </UTable>
+  `,
+  computed: {
+    itemsData() {
+      const rows = [];
+
+      for (let i = 0; i < args.numberOfRow; i++) rows.push(args.itemsRow);
+
+      return rows;
+    },
+  },
+});
+
+// TODO: Find how to interrupt styles inside a component for UMoney.
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const defaultCells = SlotTemplate.bind({});
+defaultCells.args = {
+  columns: [
+    { key: "link", label: "link" },
+    { key: "money", label: "money", thClass: "text-right" },
+    { key: "email", label: "email" },
+    { key: "tags", label: "tags" },
+  ],
+  itemsRow: {
+    link: "some link",
+    money: {
+      sum: 10,
+      currencySymbol: "$",
+    },
+    email: "some@email.ua",
+    tags: {
+      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({});
+selectable.args = { selectable: true };
+
+// TODO: Don't work fixed footer. Find how to fix it.
+export const fixedFooter = SlotTemplate.bind({});
+fixedFooter.args = {
+  fixedFooter: true,
+  selectable: true,
+  slotTemplate: `
+    <template #tfoot>
+      <UTableCell>
+        <p>
+          🤘🤘🤘
+          Lorem ipsum dolor sit amet.
+        </p>
+      </UTableCell>
+    </template>
+  `,
+};
+
+export const stickyHeader = DefaultTemplate.bind({});
+stickyHeader.args = { stickyHeader: true };
+
+export const compact = DefaultTemplate.bind({});
+compact.args = { compact: true };
+
+export const slotDefault = SlotTemplate.bind({});
+slotDefault.args = {
+  slotTemplate: `
+    <template #cell-key_3="{value}">
+      🤘🤘🤘
+    </template>
+  `,
+};
+
+export const slotTheadActions = SlotTemplate.bind({});
+slotTheadActions.args = {
+  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>
+  `,
+};
+
+export const slotBeforeFirstRow = SlotTemplate.bind({});
+slotBeforeFirstRow.args = {
+  slotTemplate: `
+    <template #before-first-row>
+      <p>
+        🤘🤘🤘
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua.
+      </p>
+    </template>
+  `,
+};
+
+export const slotAfterLastRow = SlotTemplate.bind({});
+slotAfterLastRow.args = {
+  slotTemplate: `
+    <template #after-last-row>
+      <p>
+        🤘🤘🤘
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua.
+      </p>
+    </template>
+  `,
+};
+
+export const slotTfoot = SlotTemplate.bind({});
+slotTfoot.args = {
+  slotTemplate: `
+    <template #tfoot>
+      <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>
+      </UTableCell>
+    </template>
+  `,
+};