vueless 0.0.4 → 0.0.5

package/src/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/src/ui.data-list/index.vue

@@ -0,0 +1,258 @@
+<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 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/src/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/src/ui.data-table-cell/configs/default.config.js

@@ -0,0 +1,19 @@
+export default /*tw*/ {
+  tableCell: {
+    base: `
+      p-[1.125rem] py-5 first:p-5 [&:nth-child(2)]:pl-0 group-[]/body:truncate group-[]/body:align-top 
+      group-[]/body:last:p-5
+    `,
+    variants: {
+      compact: {
+        true: `
+          group-[]/body:px-4 group-[]/body:py-3 group-[]/body:last:px-4 group-[]/body:last:py-3 
+          group-[]/body:first:px-4 group-[]/body:first:py-3 group-[]/footer:p-4:
+        `,
+      },
+    },
+  },
+  defaultVariants: {
+    compact: false,
+  },
+};

package/src/ui.dropdown-badge/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/src/ui.dropdown-badge/composables/attrs.composable.js

@@ -0,0 +1,63 @@
+import useUI from "../../composable.ui";
+import { cva, cx } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props, { isShownOptions }) {
+  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { listWrapper } = config.value;
+
+  const cvaListWrapper = cva({
+    base: listWrapper.base,
+    variants: listWrapper.variants,
+    compoundVariants: listWrapper.compoundVariants,
+  });
+
+  // Get list wrapper position classes to apply them to list without wrapper
+  const cvaListWrapperVariants = cva({
+    base: "",
+    variants: listWrapper.variants,
+    compoundVariants: [],
+  });
+
+  const listWrapperPositionClasses = computed(() =>
+    cvaListWrapperVariants({
+      listYPosition: props.listYPosition,
+      listXPosition: props.listXPosition,
+    }),
+  );
+
+  const listWrapperClasses = computed(() =>
+    cvaListWrapper({
+      listYPosition: props.listYPosition,
+      listXPosition: props.listXPosition,
+    }),
+  );
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const badgeAttrs = getAttrs("badge", { isComponent: true });
+  const iconAttrsRaw = getAttrs("icon", { isComponent: true });
+
+  const iconAttrs = computed(() => {
+    const rotateClasses = isShownOptions.value && config.value.iconRotate;
+
+    return {
+      ...iconAttrsRaw.value,
+      class: cx([iconAttrsRaw.value.class, rotateClasses]),
+    };
+  });
+
+  const listWrapperAttrs = getAttrs("listWrapper", { classes: listWrapperClasses });
+  const listAttrs = getAttrs("list", { isComponent: true, classes: listWrapperPositionClasses });
+
+  return {
+    listWrapperAttrs,
+    wrapperAttrs,
+    badgeAttrs,
+    listAttrs,
+    iconAttrs,
+    config,
+    hasSlotContent,
+  };
+}

package/src/ui.dropdown-badge/configs/default.config.js

@@ -0,0 +1,34 @@
+export default /*tw*/ {
+  wrapper: "relative inline-block",
+  badge: "cursor-pointer",
+  icon: "transition-all duration-300",
+  iconName: "keyboard_arrow_down",
+  iconRotate: "rotate-180",
+  listWrapper: {
+    base: `
+      absolute z-10
+      max-h-60 overflow-y-auto overflow-x-hidden md:!w-auto
+      rounded-lg border-gray-300 shadow bg-white
+    `,
+    variants: {
+      listYPosition: {
+        top: "bottom-6 mb-6",
+        bottom: "top-3 mt-6",
+      },
+      listXPosition: {
+        left: "left-0",
+        right: "right-0",
+      },
+    },
+  },
+  list: "w-fit",
+  defaultVariants: {
+    color: "brand",
+    size: "md",
+    weight: "medium",
+    variant: "primary",
+    listYPosition: "bottom",
+    listXPosition: "left",
+    noIcon: false,
+  },
+};

package/src/ui.dropdown-badge/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 UDropdownBadge = "UDropdownBadge";

package/src/ui.dropdown-badge/index.stories.js

@@ -0,0 +1,126 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UDropdownBadge from "../ui.dropdown-badge";
+import UDropdownItem from "../ui.dropdown-item";
+import URow from "../ui.container-row";
+
+export default {
+  id: "2020",
+  title: "Dropdowns / Dropdown Badge",
+  component: UDropdownBadge,
+  args: {
+    label: "Dropdown",
+    options: [
+      { label: "option 1", value: "1" },
+      { label: "option 2", value: "2" },
+      { label: "option 3", value: "3" },
+    ],
+  },
+  argTypes: {
+    ...getArgTypes(UDropdownBadge.name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        height: "200px",
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UDropdownBadge },
+  setup() {
+    const slots = getSlotNames(UDropdownBadge.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UDropdownBadge
+      v-bind="args"
+    >
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </UDropdownBadge>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UDropdownBadge, UDropdownItem },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UDropdownBadge
+      v-bind="args"
+    >
+      ${args.slotTemplate}
+    </UDropdownBadge>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UDropdownBadge, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDropdownBadge
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :label="size"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+const ColorsTemplate = (args, { argTypes } = {}) => ({
+  components: { UDropdownBadge, URow },
+  setup() {
+    return {
+      args,
+      colors: argTypes.color.options,
+    };
+  },
+  template: `
+    <URow>
+      <UDropdownBadge
+        v-for="(color, index) in colors"
+        :color="color"
+        :label="color"
+        v-bind="args"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const colors = ColorsTemplate.bind({});
+colors.args = {};
+
+export const withoutDropdownIcon = DefaultTemplate.bind({});
+withoutDropdownIcon.args = { noIcon: true };
+
+export const dropdownListSlot = SlotTemplate.bind({});
+dropdownListSlot.args = {
+  slotTemplate: `
+    <template #default>
+      <UDropdownItem label="Some option" />
+      <UDropdownItem label="Some option 2" />
+      <UDropdownItem label="Some option 3" />
+    </template>
+  `,
+};