vueless 0.0.808 → 0.0.810

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.808",
+  "version": "0.0.810",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.data-list/UDataList.vue

@@ -29,20 +29,6 @@ const emit = defineEmits([
    * @property {array} sortData
    */
   "dragSort",
-
-  /**
-   * Triggers when edit button is clicked.
-   * @property {number} value
-   * @property {string} label
-   */
-  "clickEdit",
-
-  /**
-   * Triggers when delete button is clicked.
-   * @property {number} value
-   * @property {string} label
-   */
-  "clickDelete",
 ]);
 
 const { tm } = useLocale();
@@ -50,13 +36,13 @@ const { tm } = useLocale();
 const i18nGlobal = tm(COMPONENT_NAME);
 const currentLocale = computed(() => merge({}, defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
-function isActive(element: DataListItem) {
-  return element.isActive === undefined || element.isActive;
+function isCrossed(element: DataListItem) {
+  return Boolean(element.crossed);
 }
 
 function onDragMove(event: DragMoveEvent): boolean | void {
-  const isDisabledNestingItem = event.draggedContext.element.isDisabledNesting;
-  const isNestingAction = !event.relatedContext?.element?.isDisabledNesting;
+  const isDisabledNestingItem = !Boolean(event.draggedContext.element.nesting);
+  const isNestingAction = Boolean(event.relatedContext?.element?.nesting);
 
   if (isDisabledNestingItem && isNestingAction) {
     return false;
@@ -69,14 +55,6 @@ function onDragEnd() {
   emit("dragSort", sortData);
 }
 
-function onClickEdit(value: number, label: string) {
-  emit("clickEdit", value, label);
-}
-
-function onClickDelete(value: number, label: string) {
-  emit("clickDelete", value, label);
-}
-
 function prepareSortData(list: DataListItem[] = [], parentValue: string | number | null = null) {
   const sortData: DataListItem[] = [];
 
@@ -116,28 +94,27 @@ const {
   labelAttrs,
   labelCrossedAttrs,
   customActionsAttrs,
-  deleteIconAttrs,
-  editIconAttrs,
   dragIconAttrs,
+  dragAttrs,
 } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <div v-bind="wrapperAttrs">
     <!--
-      @slot Use it to add something instead of the drag icon.
+      @slot Use it to add custom empty state.
       @binding {string} empty-title
       @binding {string} empty-description
     -->
     <slot
       v-if="!hideEmptyStateForNesting && !list?.length"
       name="empty"
-      :empty-title="emptyTitle"
-      :empty-description="emptyDescription"
+      :empty-title="currentLocale.emptyTitle"
+      :empty-description="currentLocale.emptyDescription"
     >
       <UEmpty
-        :title="emptyTitle || currentLocale.emptyTitle"
-        :description="emptyDescription || currentLocale.emptyDescription"
+        :title="currentLocale.emptyTitle"
+        :description="currentLocale.emptyDescription"
         v-bind="emptyAttrs"
       />
     </slot>
@@ -159,105 +136,64 @@ const {
       <template #item="{ element }">
         <div :id="element[valueKey]" v-bind="itemWrapperAttrs" :data-test="getDataTest('item')">
           <div v-bind="itemAttrs" :data-test="getDataTest(`item-${element[valueKey]}`)">
-            <!--
-              @slot Use it to add something instead of the drag icon.
-              @binding {object} item
-              @binding {string} icon-name
-            -->
-            <slot name="drag" :item="element" :icon-name="config.defaults.dragIcon">
-              <UIcon
-                internal
-                color="gray"
-                variant="light"
-                :name="config.defaults.dragIcon"
-                v-bind="dragIconAttrs"
-              />
-            </slot>
+            <div v-bind="dragAttrs">
+              <!--
+                @slot Use it to add something instead of the drag icon.
+                @binding {object} item
+                @binding {string} icon-name
+              -->
+              <slot name="drag" :item="element" :icon-name="config.defaults.dragIcon">
+                <UIcon
+                  internal
+                  color="gray"
+                  variant="light"
+                  :name="config.defaults.dragIcon"
+                  v-bind="dragIconAttrs"
+                />
+              </slot>
+            </div>
 
-            <div v-bind="isActive(element) ? labelAttrs : labelCrossedAttrs">
+            <div v-bind="isCrossed(element) ? labelCrossedAttrs : labelAttrs">
               <!--
                 @slot Use it to modify label.
                 @binding {object} item
-                @binding {boolean} active
+                @binding {boolean} crossed
               -->
-              <slot name="label" :item="element" :active="isActive(element)">
+              <slot name="label" :item="element" :crossed="isCrossed(element)">
                 {{ element[labelKey] }}
               </slot>
             </div>
 
-            <template v-if="!element.isHiddenActions">
-              <div
-                v-if="hasSlotContent($slots['actions']) && !element.isHiddenCustomActions"
-                v-bind="customActionsAttrs"
-              >
+            <template v-if="element.actions !== false">
+              <div v-if="hasSlotContent($slots['actions'])" v-bind="customActionsAttrs">
                 <!--
                   @slot Use it to add custom actions.
                   @binding {object} item
                 -->
                 <slot name="actions" :item="element" />
               </div>
-
-              <!--
-                @slot Use it to add something instead of the delete icon.
-                @binding {object} item
-                @binding {string} icon-name
-              -->
-              <slot name="delete" :item="element" :icon-name="config.defaults.deleteIcon">
-                <UIcon
-                  v-if="!element.isHiddenDelete"
-                  internal
-                  interactive
-                  color="red"
-                  :name="config.defaults.deleteIcon"
-                  :tooltip="currentLocale.delete"
-                  v-bind="deleteIconAttrs"
-                  :data-test="getDataTest('delete')"
-                  @click="onClickDelete(element[valueKey], element[labelKey])"
-                />
-              </slot>
-
-              <!--
-                @slot Use it to add something instead of the edit icon.
-                @binding {object} item
-                @binding {string} icon-name
-              -->
-              <slot name="edit" :item="element" :icon-name="config.defaults.editIcon">
-                <UIcon
-                  v-if="!element.isHiddenEdit"
-                  internal
-                  interactive
-                  color="gray"
-                  :name="config.defaults.editIcon"
-                  :tooltip="currentLocale.edit"
-                  v-bind="editIconAttrs"
-                  :data-test="getDataTest('edit')"
-                  @click="onClickEdit(element[valueKey], element[labelKey])"
-                />
-              </slot>
             </template>
           </div>
 
           <UDataList
-            v-if="nesting && !element.isDisabledNesting"
+            v-if="nesting && element.nesting"
             :nesting="nesting"
             hide-empty-state-for-nesting
             :list="element.children"
             :group="group"
             v-bind="nestedAttrs"
             :data-test="getDataTest('table')"
-            @click-delete="onClickDelete"
-            @click-edit="onClickEdit"
             @drag-sort="onDragEnd"
           >
-            <template #label="slotProps: { item: DataListItem; active: boolean }">
+            <template #label="slotProps: { item: DataListItem; crossed: boolean }">
               <!--
                 @slot Use it to modify label.
                 @binding {object} item
-                @binding {boolean} active
+                @binding {boolean} crossed
               -->
-              <slot name="label" :item="slotProps.item" :active="slotProps.active">
+              <slot name="label" :item="slotProps.item" :crossed="slotProps.crossed">
                 <div
-                  v-bind="slotProps.active ? labelAttrs : labelCrossedAttrs"
+                  v-bind="slotProps.crossed ? labelCrossedAttrs : labelAttrs"
                   v-text="slotProps.item[labelKey]"
                 />
               </slot>

package/ui.data-list/config.ts

@@ -29,6 +29,7 @@ export default /*tw*/ {
       },
     },
   },
+  drag: "icon-drag cursor-move",
   dragIcon: "{UIcon} {>dataListIcon} icon-drag cursor-move opacity-100",
   label: {
     base: "font-normal flex-auto pt-px",
@@ -41,18 +42,11 @@ export default /*tw*/ {
     },
   },
   labelCrossed: "{>label} line-through",
-  customActions: `
-    space-x-5 opacity-50 md:flex md:items-center md:opacity-0
-    group-hover/item:md:block group-hover/item:opacity-100
-  `,
-  deleteIcon: "{UIcon} {>dataListIcon} hidden md:block md:opacity-0 group-hover/item:md:opacity-100",
-  editIcon: "{UIcon} {>dataListIcon} fill-gray-500 opacity-50",
+  customActions: "space-x-5 opacity-50 flex items-center md:opacity-0 group-hover/item:opacity-100",
   divider: "{UDivider}",
   empty: "{UEmpty}",
   nested: "{UDataList} group/nested ml-6",
   i18n: {
-    edit: "Edit",
-    delete: "Delete",
     emptyTitle: "",
     emptyDescription: "There is no data in the list.",
   },
@@ -64,7 +58,5 @@ export default /*tw*/ {
     nesting: false,
     /* icons */
     dragIcon: "drag_indicator",
-    deleteIcon: "delete",
-    editIcon: "edit_note",
   },
 };

package/ui.data-list/storybook/docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { Markdown, Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.ts";
@@ -13,28 +13,20 @@ import defaultConfig from "../config.ts?raw"
 <Stories of={stories} />
 
 ## Configuring items in a list
-You can configure any item in a list by passing the following params.
+You can configure any item in a `list` array by passing the following params:
 
-<Source code={`
-<UDataList :list="list" />
-
-const list = [
-  {
-    id: 1, // unique item identifier
-    label: "Rent", // item label
-    children: [ // nested items
-      { label: "Office", id: 11 },
-      { label: "Shops", id: 12, children: [...] }, // children of subitems
-    ],
-    isHiddenEdit: true, // hide edit button
-    isHiddenDelete: true, // hide delete button
-    isHiddenActions: true, // hide default and custom action buttons
-    isHiddenCustomActions: true, // hide only custom action buttons
-    isDisabledNesting: true, // disable nesting for the item
-  }
-  {...}
-];
-`} language="jsx" dark />
+<Markdown>
+{`
+|  Key name             | Description                                            | Type           | Default |
+| ----------------------| ------------------------------------------------------ | ---------------| --------|
+| id                    | Unique item identifier                                 | String, Number |         |
+| label                 | Item label                                             | String         |         |
+| children              | Nested items                                           | Array          |         |        
+| crossed               | Controls item style (line-through decoration)          | Boolean        | false   |
+| actions               | Show custom actions buttons                            | Boolean        | true    |
+| nesting               | Enable nesting for the item                            | Boolean        | false   |
+`}
+</Markdown>
 
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.data-list/storybook/stories.ts

@@ -1,3 +1,4 @@
+import { ref } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -9,12 +10,18 @@ import UDataList from "../../ui.data-list/UDataList.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UHeader from "../../ui.text-header/UHeader.vue";
+import ULoader from "../../ui.loader/ULoader.vue";
+import tooltip from "../../directives/tooltip/vTooltip.ts";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { Props } from "../types.ts";
+import type { Props, DataListItem } from "../types.ts";
 
 interface UDataListArgs extends Props {
   slotTemplate?: string;
+  enum: "size";
 }
 
 export default {
@@ -24,25 +31,34 @@ export default {
   args: {
     list: [
       {
-        label: "Salary",
+        label: "Expenses",
         id: 1,
+        nesting: true,
         children: [
-          { label: "IT", id: 1.1 },
-          { label: "HR", id: 1.2 },
-          { label: "C Level", id: 1.3 },
+          { label: "Office Supplies", id: 1.1 },
+          { label: "Travel & Lodging", id: 1.2 },
+          { label: "Utilities", id: 1.3 },
         ],
       },
       {
-        label: "Rent",
+        label: "Revenue Streams",
         id: 2,
+        nesting: true,
         children: [
-          { label: "Office", id: 2.1 },
-          { label: "Shops", id: 2.2 },
+          { label: "Product Sales", id: 2.1 },
+          { label: "Subscription Services", id: 2.2 },
+          { label: "Consulting", id: 2.3 },
         ],
       },
       {
-        label: "Marketing",
+        label: "Departments",
         id: 3,
+        nesting: true,
+        children: [
+          { label: "Engineering", id: 3.1 },
+          { label: "Marketing", id: 3.2 },
+          { label: "Finance", id: 3.3 },
+        ],
       },
     ],
   },
@@ -57,76 +73,143 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UDataListArgs> = (args: UDataListArgs) => ({
-  components: { UDataList, UIcon, URow, UButton },
+  components: { UDataList, UIcon, URow, UButton, UBadge, UAvatar, ULoader, UHeader },
+  directives: { tooltip },
   setup() {
     const slots = getSlotNames(UDataList.__name);
 
-    return { args, slots };
+    const avatars = [
+      "https://cdn-icons-png.flaticon.com/128/1999/1999625.png",
+      "https://cdn-icons-png.flaticon.com/128/4140/4140057.png",
+      "https://cdn-icons-png.flaticon.com/128/4140/4140047.png",
+    ];
+
+    const list = ref(
+      args.list?.map((item, index) => ({
+        ...item,
+        id: item.id,
+        avatar: avatars[index % avatars.length],
+      })),
+    );
+
+    function removeItem(targetItem: DataListItem) {
+      list.value = list.value?.filter((listItem) => listItem.id !== targetItem.id);
+
+      return alert(`Removed item: ${JSON.stringify(targetItem, null, 2)}`);
+    }
+
+    function editItem(targetItem: DataListItem) {
+      alert(`Edit item: ${JSON.stringify(targetItem, null, 2)}`);
+    }
+
+    return { args, slots, removeItem, editItem, list };
   },
   template: `
-    <UDataList v-bind="args">
+    <UDataList v-bind="args" :list="args.slotTemplate ? list : args.list">
       ${args.slotTemplate || getSlotsFragment("")}
     </UDataList>
   `,
 });
 
+const EnumVariantTemplate: StoryFn<UDataListArgs> = (args: UDataListArgs, { argTypes }) => ({
+  components: { URow, UDataList, UHeader },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <div v-for="(option, index) in options" :key="index">
+      <UHeader :label="option" size="xs" />
+      <UDataList v-bind="args" :[args.enum]="option" class="mb-4" />
+    </div>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const EmptyState = DefaultTemplate.bind({});
-EmptyState.args = {
-  list: [],
-  emptyTitle: "The list is empty.",
-  emptyDescription: "There is no data in the list.",
-};
+EmptyState.args = { list: [] };
 
 export const Nesting = DefaultTemplate.bind({});
 Nesting.args = { nesting: true };
 
+export const Size = EnumVariantTemplate.bind({});
+Size.args = { enum: "size" };
+
 export const SlotLabel = DefaultTemplate.bind({});
 SlotLabel.args = {
   slotTemplate: `
     <template #label="{ item }">
-      <URow gap="xs" align="center">
-        {{ item.label }}
-        <UIcon name="check" color="green" size="sm" />
-      </URow>
+      <UBadge :label="item.label" />
     </template>
   `,
 };
 
-export const SlotActions = DefaultTemplate.bind({});
-SlotActions.args = {
+export const SlotEmpty = DefaultTemplate.bind({});
+SlotEmpty.args = {
+  list: [],
+  config: {
+    wrapper: "flex flex-col items-center justify-center py-10 gap-4",
+    i18n: {
+      emptyTitle: "Fetching data...",
+      emptyDescription: "Please wait until data is received.",
+    },
+  },
   slotTemplate: `
-    <template #actions>
-      <UIcon interactive name="star" color="red" />
+    <template #empty="{ emptyTitle, emptyDescription }">
+      <ULoader loading size="lg" />
+      <UHeader :label="emptyTitle" size="xs" />
+      <p>{{ emptyDescription }}</p>
     </template>
   `,
 };
+SlotEmpty.parameters = {
+  docs: {
+    description: {
+      story:
+        "You can customize the `empty` slot's props (`emptyTitle` and `emptyDescription`) using the `i18n` config key.",
+    },
+  },
+};
 
 export const SlotDrag = DefaultTemplate.bind({});
 SlotDrag.args = {
+  list: [
+    { label: "John Doe (Engineering)", id: 1 },
+    { label: "Michael Johnson (Finance)", id: 2 },
+    { label: "Emma Smith (Marketing)", id: 3 },
+  ],
   slotTemplate: `
-    <template #drag>
-      <UIcon interactive name="swap_vert" size="sm" />
+    <template #drag="{ item }">
+      <UAvatar :src="item.avatar" rounded="full" />
     </template>
   `,
 };
 
-export const SlotDelete = DefaultTemplate.bind({});
-SlotDelete.args = {
-  slotTemplate: `
-    <template #delete>
-      <UButton label="Delete" size="xs" variant="secondary" color="red" />
-    </template>
-  `,
-};
-
-export const SlotEdit = DefaultTemplate.bind({});
-SlotEdit.args = {
+export const SlotActions = DefaultTemplate.bind({});
+SlotActions.args = {
   slotTemplate: `
-    <template #edit>
-      <UButton label="Edit" size="xs" variant="secondary" color="grayscale" />
+    <template #actions="{ item }">
+      <UButton label="Export" size="xs" />
+      <UIcon
+        name="delete"
+        size="sm"
+        color="red"
+        interactive
+        v-tooltip="'Delete'"
+        @click="removeItem(item)"
+      />
+      <UIcon
+        name="edit_note"
+        size="sm"
+        color="grayscale"
+        interactive
+        v-tooltip="'Edit'"
+        @click="editItem(item)"
+      />
     </template>
   `,
 };

package/ui.data-list/types.ts

@@ -12,12 +12,9 @@ export interface DragMoveEvent extends DragEvent {
 }
 
 export interface DataListItem {
-  isActive?: boolean;
-  isHiddenActions?: boolean;
-  isHiddenCustomActions?: boolean;
-  isHiddenDelete?: boolean;
-  isHiddenEdit?: boolean;
-  isDisabledNesting?: boolean;
+  crossed?: boolean;
+  actions?: boolean;
+  nesting?: boolean;
   children?: DataListItem[];
   [key: string]: UnknownType | DataListItem[];
 }
@@ -48,16 +45,6 @@ export interface Props {
    */
   valueKey?: string;
 
-  /**
-   * Empty state title.
-   */
-  emptyTitle?: string;
-
-  /**
-   * Empty state description.
-   */
-  emptyDescription?: string;
-
   /**
    * Drag animation duration.
    */

package/ui.data-table/UTable.vue

@@ -475,6 +475,7 @@ const {
   headerCheckboxAttrs,
   headerCounterAttrs,
   bodyEmptyStateAttrs,
+  bodyEmptyStateCellAttrs,
   bodyDateDividerAttrs,
   bodySelectedDateDividerAttrs,
   bodyCellDateDividerAttrs,
@@ -544,13 +545,6 @@ const {
         <template v-else>
           {{ column.label }}
         </template>
-
-        <!--
-            @slot Use it to add something after the needed header cell.
-            @binding {object} column
-            @binding {number} index
-          -->
-        <slot :name="`header-${column.key}-after`" :column="column" :index="index" />
       </div>
 
       <ULoaderProgress :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
@@ -626,14 +620,13 @@ const {
         <thead v-bind="headerAttrs" :style="tableRowWidthStyle">
           <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs">
             <!--
-                @slot Use it to add something before header row.
-                @binding {number} cols-count
-              -->
-            <slot name="before-header" :cols-count="colsCount" />
+              @slot Use it to add something before header row.
+              @binding {number} cols-count
+              @binding {string} classes
+            -->
+            <slot name="before-header" :cols-count="colsCount" :classes="headerRowAttrs.class" />
           </tr>
 
-          <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs"></tr>
-
           <tr ref="header-row" v-bind="headerRowAttrs">
             <th v-if="selectable" v-bind="headerCellCheckboxAttrs">
               <UCheckbox
@@ -672,13 +665,6 @@ const {
               <template v-else>
                 {{ column.label }}
               </template>
-
-              <!--
-                @slot Use it to add something after the needed header cell.
-                @binding {object} column
-                @binding {number} index
-              -->
-              <slot :name="`header-${column.key}-after`" :column="column" :index="index" />
             </th>
           </tr>
 
@@ -792,15 +778,23 @@ const {
               v-if="rowIndex === lastRow && hasSlotContent($slots['after-last-row'])"
               v-bind="bodyRowAfterAttrs"
             >
-              <!-- @slot Use it to add something after last row. -->
-              <slot name="after-last-row" :cols-count="colsCount" />
+              <!--
+                @slot Use it to add something after last row.
+                @binding {number} cols-count
+                @classes {string} classes
+              -->
+              <slot
+                name="after-last-row"
+                :cols-count="colsCount"
+                :classes="bodyCellBaseAttrs.class"
+              />
             </tr>
           </template>
         </tbody>
 
         <tbody v-else>
           <tr>
-            <td :colspan="colsCount">
+            <td :colspan="colsCount" v-bind="bodyEmptyStateCellAttrs">
               <!-- @slot Use it to add custom empty state. -->
               <slot name="empty-state">
                 <UEmpty