vueless 0.0.3 → 0.0.4

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

@@ -1,91 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UDataList from "vueless/ui.data-list";
-import UIcon from "vueless/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

@@ -1,258 +0,0 @@
-<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 "vueless/ui.image-icon";
-import UDivider from "vueless/ui.container-divider";
-import UIService from "vueless/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

@@ -1,16 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "vueless/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

@@ -1,188 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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,
-  },
-};