vueless 0.0.807 → 0.0.809

package/README.md

@@ -56,13 +56,11 @@ That's it! You can use components in your app now ✨
 
 ## Contributing
 
-We encourage you to contribute to Vueless! Please check out the
-[Contributing to Vueless](CONTRIBUTING.md) for guidelines about how to proceed.
-
-Trying to report a possible security vulnerability in Vueless? Please
-check out our [security policy](SECURITY.md) for guidelines about how to proceed.
-
-Everyone interacting in Vueless and its sub-projects' codebases, issue trackers, chat rooms, and mailing lists is expected to follow the Vueless [code of conduct](CODE_OF_CONDUCT.md).
+* We encourage you to contribute to Vueless! Please check out the
+[contributing to Vueless](CONTRIBUTING.md) for guidelines.
+* Trying to report a possible security vulnerability in Vueless? Please
+check out our [security policy](SECURITY.md) for guidelines.
+* Everyone interacting in Vueless and its sub-projects' codebases, issue trackers, chats, and mailing lists is expected to follow our [code of conduct](CODE_OF_CONDUCT.md) rules.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.807",
+  "version": "0.0.809",
   "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.form-input-rating/storybook/stories.ts

@@ -23,7 +23,6 @@ export default {
   component: UInputRating,
   args: {
     modelValue: 2,
-    label: "Rate your experience: ",
   },
   argTypes: {
     ...getArgTypes(UInputRating.__name),

package/ui.image-avatar/storybook/stories.ts

@@ -7,8 +7,8 @@ import {
 
 import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 import URow from "../../ui.container-row/URow.vue";
-import UCol from "../../ui.container-col/UCol.vue";
 import ULoader from "../../ui.loader/ULoader.vue";
+import tooltip from "../../directives/tooltip/vTooltip.ts";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { UAvatarProps } from "../types.ts";
@@ -47,7 +47,8 @@ const DefaultTemplate: StoryFn<UAvatarArgs> = (args: UAvatarArgs) => ({
 });
 
 const EnumVariantTemplate: StoryFn<UAvatarArgs> = (args: UAvatarArgs, { argTypes }) => ({
-  components: { UCol, URow, UAvatar },
+  components: { URow, UAvatar },
+  directives: { tooltip },
   setup() {
     return {
       args,
@@ -55,26 +56,16 @@ const EnumVariantTemplate: StoryFn<UAvatarArgs> = (args: UAvatarArgs, { argTypes
     };
   },
   template: `
-    <UCol gap="xl">
-      <URow>
-        <UAvatar
-          v-for="(option, index) in options"
-          :key="index"
-          v-bind="args"
-          :[args.enum]="option"
-          :label="option"
-        />
-      </URow>
-      <URow>
-        <UAvatar
-          v-for="(option, index) in options"
-          :key="index"
-          v-bind="args"
-          :[args.enum]="option"
-          :label="''"
-        />
-      </URow>
-    </UCol>
+    <URow>
+      <UAvatar
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+        :label="option"
+        v-tooltip="option"
+      />
+    </URow>
   `,
 });
 
@@ -83,43 +74,66 @@ Default.args = { size: "3xl" };
 
 export const Src = DefaultTemplate.bind({});
 Src.args = {
-  src: "https://avatars.githubusercontent.com/u/16276298?v=4",
+  src: "https://i.pravatar.cc/300?img=67",
+  size: "3xl",
+};
+
+export const PlaceholderIcon = DefaultTemplate.bind({});
+PlaceholderIcon.args = {
+  placeholderIcon: "account_circle",
   size: "3xl",
 };
 
 export const Label = DefaultTemplate.bind({});
 Label.args = { label: "Name Surname", size: "3xl" };
 
-/**
- * Hold cursor above an avatar to see value.
- */
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size" };
+export const Size = EnumVariantTemplate.bind({});
+Size.args = { enum: "size" };
+Size.parameters = {
+  docs: {
+    description: {
+      story: "Hold cursor above an avatar to see the value.",
+    },
+  },
+};
 
-/**
- * Hold cursor above an avatar to see value.
- */
 export const Rounded = EnumVariantTemplate.bind({});
 Rounded.args = { enum: "rounded", label: "John Doe", color: "orange" };
+Rounded.parameters = {
+  docs: {
+    description: {
+      story: "Hold cursor above an avatar to see the value.",
+    },
+  },
+};
 
-/**
- * Hold cursor above an avatar to see value.
- */
-export const Colors = EnumVariantTemplate.bind({});
-Colors.args = { enum: "color" };
+export const Color = EnumVariantTemplate.bind({});
+Color.args = { enum: "color" };
+Color.parameters = {
+  docs: {
+    description: {
+      story: "Hold cursor above an avatar to see the value.",
+    },
+  },
+};
 
-/**
- * Hold cursor above an avatar to see value.
- */
 export const Bordered = EnumVariantTemplate.bind({});
 Bordered.args = { enum: "color", bordered: true };
+Bordered.parameters = {
+  docs: {
+    description: {
+      story: "Hold cursor above an avatar to see the value.",
+    },
+  },
+};
 
 export const SlotPlaceholder = DefaultTemplate.bind({});
 SlotPlaceholder.args = {
+  color: "green",
   size: "3xl",
   slotTemplate: `
-    <template #placeholder>
-      <ULoader loading />
+    <template #placeholder="{ iconColor }">
+      <ULoader loading :color="iconColor" />
     </template>
   `,
 };

package/ui.image-icon/storybook/stories.ts

@@ -7,6 +7,9 @@ import {
 
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
+import tooltip from "../../directives/tooltip/vTooltip.ts";
+
+import Beverage from "../../assets/icons/vueless/emoji_food_beverage.svg?component";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -35,6 +38,7 @@ export default {
 
 const DefaultTemplate: StoryFn<UIconArgs> = (args: UIconArgs) => ({
   components: { UIcon },
+  directives: { tooltip },
   setup() {
     const slots = getSlotNames(UIcon.__name);
 
@@ -49,6 +53,7 @@ const DefaultTemplate: StoryFn<UIconArgs> = (args: UIconArgs) => ({
 
 const EnumVariantTemplate: StoryFn<UIconArgs> = (args: UIconArgs, { argTypes }) => ({
   components: { UIcon, URow },
+  directives: { tooltip },
   setup() {
     return {
       args,
@@ -62,6 +67,7 @@ const EnumVariantTemplate: StoryFn<UIconArgs> = (args: UIconArgs, { argTypes })
         :key="index"
         v-bind="args"
         :[args.enum]="option"
+        v-tooltip="option"
       />
     </URow>
   `,
@@ -70,6 +76,18 @@ const EnumVariantTemplate: StoryFn<UIconArgs> = (args: UIconArgs, { argTypes })
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Src = DefaultTemplate.bind({});
+Src.args = { src: Beverage };
+Src.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "To use a custom icon, import it with the suffix `?component` and pass the imported component in the `src` prop, like this: <br/> `import Beverage from '../../assets/icons/vueless/emoji_food_beverage.svg?component'`",
+    },
+  },
+};
+
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color" };
 
@@ -77,7 +95,7 @@ export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
 export const Variants = EnumVariantTemplate.bind({});
-Variants.args = { enum: "variant", color: "red" };
+Variants.args = { enum: "variant", color: "green" };
 
 export const Interactive = DefaultTemplate.bind({});
 Interactive.args = { interactive: true };