vueless 0.0.10 → 0.0.11

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

@@ -0,0 +1,91 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UDataList from "../ui.data-list";
+import UIcon from "../ui.image-icon";
+
+export default {
+  id: "7020",
+  title: "Data / Data List",
+  component: UDataList,
+  args: {
+    list: [
+      {
+        name: "name 1",
+        id: 1,
+        children: [
+          { name: "name 1.1", id: 1.1 },
+          { name: "name 1.2", id: 1.2 },
+          { name: "name 1.3", id: 1.3 },
+        ],
+      },
+      {
+        name: "name 2",
+        id: 2,
+        children: [
+          { name: "name 2.1", id: 2.1 },
+          { name: "name 2.2", id: 2.2 },
+        ],
+      },
+      {
+        name: "name 3",
+        id: 3,
+      },
+    ],
+  },
+  argTypes: {
+    ...getArgTypes(UDataList.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UDataList },
+  setup() {
+    const slots = getSlotNames(UDataList.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UDataList v-bind="args" @dragSort="onDragSort"/>
+  `,
+  methods: {
+    onDragSort(value) {
+      this.list = value;
+    },
+  },
+});
+
+const SlotTemplate = (args) => ({
+  components: { UDataList, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UDataList v-bind="args" @dragSort="onDragSort">
+      ${args.slotTemplate}
+    </UDataList>
+  `,
+  methods: {
+    onDragSort(value) {
+      this.list = value;
+    },
+  },
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const nesting = DefaultTemplate.bind({});
+nesting.args = { nesting: true };
+
+export const slotIcons = SlotTemplate.bind({});
+slotIcons.args = {
+  slotTemplate: `
+    <template #icons>
+      <UIcon
+        name="star"
+        color="red"
+        size="md"
+       />
+    </template>
+  `,
+};

package/ui.data-list/index.vue

@@ -0,0 +1,259 @@
+<template>
+  <div v-bind="wrapperAttrs">
+    <UDivider v-if="upperlined" size="xl" no-top-padding v-bind="dividerAttrs" />
+
+    <UEmpty
+      v-if="!hideEmptyStateForNesting && !list?.length"
+      :description="emptyDescription"
+      :title="emptyTitle"
+      v-bind="emptyAttrs"
+    />
+
+    <draggable
+      v-else
+      :list="list"
+      item-key="id"
+      :group="{ name: group }"
+      handle=".icon-drag"
+      :ghost-class="config.draggableGhost"
+      :drag-class="config.draggableDrag"
+      :data-cy="dataCy"
+      v-bind="draggableAttrs"
+      :move="onDragMove"
+      @end="onDragEnd"
+    >
+      <template #item="{ element }">
+        <div :id="element.id" :data-cy="`${dataCy}-item`" v-bind="itemWrapperAttrs">
+          <div :data-cy="`${dataCy}-item-${element.id}`" v-bind="itemAttrs">
+            <UIcon :name="config.iconDragName" color="gray" v-bind="iconDragAttrs" />
+
+            <div v-bind="titleAttrs(element.isActive)">
+              <slot :item="element">
+                {{ element.name }}
+              </slot>
+            </div>
+
+            <template v-if="!element.isHiddenAction">
+              <div
+                v-if="hasSlotContent($slots['icons']) && !element.isHiddenCustomActions"
+                v-bind="customActionsAttrs"
+              >
+                <!-- @slot Use it to add icons. -->
+                <slot name="icons" :item="element" />
+              </div>
+
+              <UIcon
+                v-if="!element.isHiddenDelete"
+                interactive
+                :name="config.iconDeleteName"
+                color="gray"
+                :data-cy="`${dataCy}-delete`"
+                :tooltip="$t('button.delete')"
+                v-bind="iconDeleteAttrs"
+                @click="onClickDelete(element.id, element.name)"
+              />
+
+              <UIcon
+                v-if="!element.isHiddenEdit"
+                interactive
+                :name="config.iconEditName"
+                color="gray"
+                :data-cy="`${dataCy}-edit`"
+                :tooltip="$t('button.edit')"
+                v-bind="iconEditAttrs"
+                @click="onClickEdit(element.id)"
+              />
+            </template>
+          </div>
+
+          <UDataList
+            v-if="nesting && !element.isDisabledNesting"
+            :nesting="nesting"
+            hide-empty-state-for-nesting
+            :list="element.children"
+            :group="group"
+            :data-cy="`${dataCy}-table`"
+            v-bind="nestedAttrs"
+            @clickDelete="onClickDelete"
+            @clickEdit="onClickEdit"
+            @dragSort="onDragEnd"
+          >
+            <template #default="{ item }">
+              <slot :item="item">
+                <div v-bind="titleAttrs" v-text="item.name" />
+              </slot>
+            </template>
+
+            <template #icons="{ item }">
+              <!-- @slot Use it to add icons. -->
+              <slot name="icons" :item="item" />
+            </template>
+          </UDataList>
+        </div>
+      </template>
+    </draggable>
+  </div>
+</template>
+
+<script setup>
+import draggable from "vuedraggable";
+
+import UIcon from "../ui.image-icon";
+import UEmpty from "../ui.text-empty";
+import UDivider from "../ui.container-divider";
+import UIService from "../service.ui";
+
+import { UDataListName } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDataList", inheritAttrs: true });
+
+const props = defineProps({
+  /**
+   * Data list array.
+   */
+  list: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Group name.
+   */
+  group: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Enables nesting.
+   */
+  nesting: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDataListName).default.nesting,
+  },
+
+  /**
+   * Empty state title.
+   */
+  emptyTitle: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Empty state description.
+   */
+  emptyDescription: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Drag animation duration.
+   */
+  animationDuration: {
+    type: Number,
+    default: UIService.get(defaultConfig, UDataListName).default.animationDuration,
+  },
+
+  /**
+   * Add line divider above the list.
+   */
+  upperlined: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDataListName).default.upperlined,
+  },
+
+  /**
+   * @ignore
+   * Disable empty state for nested elements if empty (internal prorps).
+   */
+  hideEmptyStateForNesting: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UDataListName).default.hideEmptyStateForNesting,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["dragSort", "clickEdit", "clickDelete"]);
+
+const {
+  config,
+  wrapperAttrs,
+  dividerAttrs,
+  emptyAttrs,
+  draggableAttrs,
+  nestedAttrs,
+  itemWrapperAttrs,
+  itemAttrs,
+  titleAttrs,
+  customActionsAttrs,
+  iconDeleteAttrs,
+  iconEditAttrs,
+  iconDragAttrs,
+  hasSlotContent,
+} = useAttrs(props);
+
+function onDragMove(event) {
+  const isDisabledNestingItem = event.draggedContext.element.isDisabledNesting;
+  const isNestingAction = !event.relatedContext.element?.isDisabledNesting;
+
+  if (isDisabledNestingItem && isNestingAction) {
+    return false;
+  }
+}
+
+function onDragEnd() {
+  const sortData = prepareSortData(props.list);
+
+  emit("dragSort", sortData);
+}
+
+function onClickEdit(id) {
+  emit("clickEdit", id);
+}
+
+function onClickDelete(id, title) {
+  emit("clickDelete", id, title);
+}
+
+function prepareSortData(list, parentId) {
+  let sortData = [];
+
+  list.forEach((item) => {
+    let hasItemChildren = item?.children?.length;
+
+    if (hasItemChildren) {
+      let childrenItem = prepareSortData(item.children, item.id);
+
+      childrenItem.forEach((item) => {
+        sortData.push(item);
+      });
+    }
+
+    let parentItem = { ...item, parentId: 0 || parentId };
+
+    sortData.push(parentItem);
+  });
+
+  return sortData;
+}
+</script>

package/ui.data-table/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/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/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/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";