vueless 0.0.808 → 0.0.810

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 };