vueless 0.0.245 → 0.0.247

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.245",
+  "version": "0.0.247",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UButton from "../ui.button";
 import UIcon from "../ui.image-icon";
@@ -29,50 +29,28 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UButton v-bind="args">
-      ${args.slotTemplate || allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UButton>
   `,
 });
 
-const VariantsTemplate = (args, { argTypes } = {}) => ({
-  components: { UButton, URow },
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UButton, URow, UCol },
   setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-    };
+    return { args, options: argTypes[args.enum].options };
   },
   template: `
-    <URow>
-      <UButton
-        v-for="(variant, index) in variants"
-        v-bind="args"
-        :variant="variant"
-        :label="variant"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UButton, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UButton
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :label="size"
-        :key="index"
-      />
-    </URow>
+    <UCol>
+      <URow>
+        <UButton
+          v-for="(option, index) in options"
+          v-bind="args"
+          :[args.enum]="option"
+          :label="option"
+          :key="index"
+        />
+      </URow>
+    </UCol>
   `,
 });
 
@@ -104,17 +82,17 @@ const ColorTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const variants = VariantsTemplate.bind({});
-variants.args = {};
+export const variants = EnumVariantTemplate.bind({});
+variants.args = { enum: "variant" };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const pilled = VariantsTemplate.bind({});
-pilled.args = { pill: true };
+export const pilled = EnumVariantTemplate.bind({});
+pilled.args = { enum: "variant", pill: true };
 
-export const disabled = VariantsTemplate.bind({});
-disabled.args = { disabled: true };
+export const disabled = EnumVariantTemplate.bind({});
+disabled.args = { enum: "variant", disabled: true };
 
 export const noRing = DefaultTemplate.bind({});
 noRing.args = { noRing: true };

package/ui.button-link/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import ULink from "../ui.button-link";
 import UButton from "../ui.button";
@@ -21,7 +21,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { ULink },
+  components: { ULink, UButton },
   setup() {
     const slots = getSlotNames(ULink.name);
 
@@ -29,108 +29,56 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <ULink v-bind="args">
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </ULink>
   `,
 });
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { ULink, URow },
   setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULink
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :color="color"
-        :label="color"
-        :key="index"
-      />
-    </URow>
-  `,
-});
+    function getText(value) {
+      return `Link ${value}`;
+    }
 
-const TypesTemplate = (args, { argTypes } = {}) => ({
-  components: { ULink, URow },
-  setup() {
-    return {
-      args,
-      types: argTypes.type.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULink
-        v-for="(type, index) in types"
-        v-bind="args"
-        :label="type"
-        :type="type"
-        :key="index"
-      />
-    </URow>
-  `,
-});
+    let prefixedOptions = argTypes[args.enum].options;
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { ULink, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
+    if (argTypes[args.enum].name === "size") {
+      prefixedOptions = prefixedOptions.map((option) => getText(option));
+    }
+
+    return { args, options: argTypes[args.enum].options, prefixedOptions };
   },
   template: `
     <URow>
       <ULink
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         v-bind="args"
-        :size="size"
-        :label="getText(size)"
+        :[args.enum]="option"
+        :label="prefixedOptions[index]"
         :key="index"
       />
     </URow>
   `,
-  methods: {
-    getText(value) {
-      return `Link ${value}`;
-    },
-  },
-});
-
-const SlotTemplate = (args) => ({
-  components: { UButton, ULink },
-  setup() {
-    return { args };
-  },
-  template: `
-    <ULink>
-      ${args.slotTemplate}
-    </ULink>
-  `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
+export const colors = EnumVariantTemplate.bind({});
+colors.args = { enum: "color" };
 
-export const types = TypesTemplate.bind({});
-types.args = {};
+export const types = EnumVariantTemplate.bind({});
+types.args = { enum: "type" };
 
-export const underlined = ColorsTemplate.bind({});
-underlined.args = { underlined: true, dashed: false };
+export const underlined = EnumVariantTemplate.bind({});
+underlined.args = { enum: "color", underlined: true, dashed: false };
 
-export const dashed = ColorsTemplate.bind({});
-dashed.args = { dashed: true };
+export const dashed = EnumVariantTemplate.bind({});
+dashed.args = { enum: "color", dashed: true };
 
 export const url = DefaultTemplate.bind({});
 url.args = { url: "https://storybook.js.org/docs/react/get-started/introduction" };
@@ -150,7 +98,7 @@ disabled.args = { disabled: true };
 export const noRing = DefaultTemplate.bind({});
 noRing.args = { noRing: true };
 
-export const slotDefault = SlotTemplate.bind({});
+export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
     <template #default>

package/ui.button-toggle/index.stories.js

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UToggle from "../ui.button-toggle";
 import UIcon from "../ui.image-icon";
@@ -27,76 +27,26 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UToggle },
-  data() {
-    return {
-      value: "",
-    };
-  },
+  components: { UToggle, UIcon, UToggleItem },
   setup() {
-    return { args, OPTIONS };
-  },
-  template: `
-    <UToggle
-      v-model="value"
-      v-bind="args"
-      :options="OPTIONS"
-    />
-  `,
-});
+    const value = ref("");
 
-const multipleTemplate = (args) => ({
-  components: { UToggle },
-  data() {
-    return {
-      value: [],
-    };
-  },
-  setup() {
-    return { args, OPTIONS };
+    const slots = getSlotNames(UToggle.name);
+
+    return { args, slots, value, OPTIONS };
   },
   template: `
     <UToggle
       v-model="value"
       v-bind="args"
-      multiple
       :options="OPTIONS"
-      name="multipleTemplate"
-    />
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UToggle, URow },
-  setup() {
-    const value = ref("");
-
-    return {
-      args,
-      value,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UToggle
-        v-for="(size, index) in sizes"
-        :key="index"
-        name="sizeTemplate"
-        v-model="value"
-        v-bind="args"
-        :size="size"
-        :label="size"
-        :options="[
-          { value: size + 1, label: size },
-          { value: size + 2, label: size },
-        ]"
-      />
-    </URow>
+    >
+      ${args.slotTemplate || getSlotsFragment()}
+    </UToggle>
   `,
 });
 
-const VariantsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UToggle, URow },
   setup() {
     const value = ref("");
@@ -104,45 +54,27 @@ const VariantsTemplate = (args, { argTypes } = {}) => ({
     return {
       args,
       value,
-      variants: argTypes.variant.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UToggle
-        v-for="(variant, index) in variants"
+        v-for="(option, index) in options"
         :key="index"
-        name="sizeTemplate"
         v-model="value"
         v-bind="args"
-        :variant="variant"
-        :label="variant"
+        :[args.enum]="option"
+        :label="option"
         :options="[
-          { value: variant + 1, label: variant },
-          { value: variant + 2, label: variant },
+          { value: option + 1, label: option },
+          { value: option + 2, label: option },
         ]"
       />
     </URow>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UToggle, UIcon, UToggleItem },
-  setup() {
-    const selected = ref("");
-
-    return {
-      args,
-      selected,
-    };
-  },
-  template: `
-    <UToggle v-bind="args" name="slotTemplate" v-model="selected">
-      ${args.slotTemplate}
-    </UToggle>
-  `,
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {
   name: "Default",
@@ -161,19 +93,22 @@ label.args = {
   description: "description",
 };
 
-export const sizes = SizesTemplate.bind({});
+export const sizes = EnumVariantTemplate.bind({});
 sizes.args = {
-  name: "sizes",
+  name: "sizeTemplate",
+  enum: "size",
 };
 
-export const variants = VariantsTemplate.bind({});
+export const variants = EnumVariantTemplate.bind({});
 variants.args = {
-  name: "variants",
+  name: "sizeTemplate",
+  enum: "variant",
 };
 
-export const multiple = multipleTemplate.bind({});
+export const multiple = DefaultTemplate.bind({});
 multiple.args = {
-  name: "multiple",
+  name: "multipleTemplate",
+  multiple: true,
 };
 
 export const block = DefaultTemplate.bind({});
@@ -195,7 +130,7 @@ pill.args = {
   separated: true,
 };
 
-export const square = SlotTemplate.bind({});
+export const square = DefaultTemplate.bind({});
 square.args = {
   name: "square",
   variant: "secondary",
@@ -217,7 +152,7 @@ square.args = {
   `,
 };
 
-export const slotDefault = SlotTemplate.bind({});
+export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
   name: "slotDefault",
   slotTemplate: `

package/ui.button-toggle-item/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UToggleItem from "../ui.button-toggle-item";
 import UIcon from "../ui.image-icon";
@@ -21,27 +21,15 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UToggleItem },
+  components: { UToggleItem, UIcon },
   setup() {
     const slots = getSlotNames(UToggleItem.name);
 
     return { args, slots };
   },
   template: `
-    <UToggleItem v-bind="args" name="toggle">
-      ${allSlotsFragment}
-    </UToggleItem>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UToggleItem, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UToggleItem v-bind="args" >
-      ${args.slotTemplate}
+    <UToggleItem v-bind="args" name="toggle" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment()}
     </UToggleItem>
   `,
 });
@@ -52,7 +40,7 @@ Default.args = {};
 export const disabled = DefaultTemplate.bind({});
 disabled.args = { disabled: true };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
@@ -64,14 +52,14 @@ slotLeft.args = {
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
+export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #right>
       <UIcon
         name="star"
         color="green"
-       />
+      />
     </template>
   `,
 };

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UDropdownBadge from "../ui.dropdown-badge";
 import UDropdownItem from "../ui.dropdown-item";
@@ -32,7 +32,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UDropdownBadge },
+  components: { UDropdownBadge, UDropdownItem },
   setup() {
     const slots = getSlotNames(UDropdownBadge.name);
 
@@ -42,61 +42,26 @@ const DefaultTemplate = (args) => ({
     <UDropdownBadge
       v-bind="args"
     >
-      ${allSlotsFragment}
-    </UDropdownBadge>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UDropdownBadge, UDropdownItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDropdownBadge
-      v-bind="args"
-    >
-      ${args.slotTemplate}
+      ${args.slotTemplate || getSlotsFragment()}
     </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 } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDropdownBadge, URow },
   setup() {
     return {
       args,
-      colors: argTypes.color.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UDropdownBadge
-        v-for="(color, index) in colors"
-        :color="color"
-        :label="color"
+        v-for="(option, index) in options"
         v-bind="args"
+        :[args.enum]="option"
+        :label="option"
         :key="index"
       />
     </URow>
@@ -106,16 +71,16 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
+export const colors = EnumVariantTemplate.bind({});
+colors.args = { enum: "color" };
 
 export const withoutDropdownIcon = DefaultTemplate.bind({});
 withoutDropdownIcon.args = { noIcon: true };
 
-export const dropdownListSlot = SlotTemplate.bind({});
+export const dropdownListSlot = DefaultTemplate.bind({});
 dropdownListSlot.args = {
   slotTemplate: `
     <template #default>

package/ui.dropdown-button/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UDropdownButton from "../ui.dropdown-button";
 import UDropdownItem from "../ui.dropdown-item";
@@ -33,7 +33,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UDropdownButton },
+  components: { UDropdownButton, UDropdownItem },
   setup() {
     const slots = getSlotNames(UDropdownButton.name);
 
@@ -42,62 +42,28 @@ const DefaultTemplate = (args) => ({
   template: `
     <UDropdownButton
       v-bind="args"
+      v-model="args.modelValue"
     >
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UDropdownButton>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UDropdownButton, UDropdownItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDropdownButton
-      v-bind="args"
-    >
-      ${args.slotTemplate}
-    </UDropdownButton>
-  `,
-});
-
-const VariantsTemplate = (args, { argTypes } = {}) => ({
-  components: { UDropdownButton, URow },
-  setup() {
-    return {
-      args,
-      variants: argTypes.variant.options,
-    };
-  },
-  template: `
-    <URow>
-      <UDropdownButton
-        v-for="(variant, index) in variants"
-        v-bind="args"
-        :variant="variant"
-        :label="variant"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDropdownButton, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UDropdownButton
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         v-bind="args"
-        :size="size"
-        :label="size"
+        :[args.enum]="option"
+        :label="option"
         :key="index"
       />
     </URow>
@@ -135,19 +101,19 @@ Default.args = {};
 export const Filled = DefaultTemplate.bind({});
 Filled.args = { variant: "thirdary", filled: true };
 
-export const Variants = VariantsTemplate.bind({});
-Variants.args = { text: "" };
+export const Variants = EnumVariantTemplate.bind({});
+Variants.args = { enum: "variant", text: "" };
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = { text: "" };
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size", text: "" };
 
 export const VariantColors = VariantColorsTemplate.bind({});
 VariantColors.args = { text: "" };
 
-export const WithoutDropdownIcon = VariantsTemplate.bind({});
-WithoutDropdownIcon.args = { noIcon: true };
+export const WithoutDropdownIcon = EnumVariantTemplate.bind({});
+WithoutDropdownIcon.args = { enum: "variant", noIcon: true };
 
-export const dropdownListSlot = SlotTemplate.bind({});
+export const dropdownListSlot = DefaultTemplate.bind({});
 dropdownListSlot.args = {
   slotTemplate: `
     <template #default>

package/ui.dropdown-item/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UDropdownItem from "../ui.dropdown-item";
 
@@ -20,12 +20,14 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UDropdownItem },
   setup() {
-    return { args };
+    const slots = getSlotNames(UDropdownItem.name);
+
+    return { args, slots };
   },
   template: `
-    <UDropdownItem
-        v-bind="args"
-    />
+    <UDropdownItem v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UDropdownItem>
   `,
 });
 

package/ui.dropdown-link/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UDropdownLink from "../ui.dropdown-link";
 import UDropdownItem from "../ui.dropdown-item";
@@ -32,91 +32,60 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UDropdownLink },
+  components: { UDropdownLink, UDropdownItem },
   setup() {
     const slots = getSlotNames(UDropdownLink.name);
 
     return { args, slots };
   },
   template: `
-    <UDropdownLink
-      v-bind="args"
-    >
-      ${allSlotsFragment}
-    </UDropdownLink>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UDropdownLink, UDropdownItem },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDropdownLink
-      v-bind="args"
-    >
-      ${args.slotTemplate}
+    <UDropdownLink v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
     </UDropdownLink>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDropdownLink, URow },
   setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
+    function getText(value) {
+      return `Dropdown ${value}`;
+    }
+
+    let prefixedOptions = argTypes[args.enum].options;
+
+    if (argTypes[args.enum].name === "size") {
+      prefixedOptions = prefixedOptions.map((option) => getText(option));
+    }
+
+    return { args, options: argTypes[args.enum].options, prefixedOptions };
   },
   template: `
     <URow>
       <UDropdownLink
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         v-bind="args"
-        :size="size"
+        :[args.enum]="option"
+        :label="prefixedOptions[index]"
         :key="index"
       />
     </URow>
   `,
 });
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UDropdownLink, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <div>
-      <URow>
-        <UDropdownLink
-          v-for="(color, id) in colors"
-          v-bind="args"
-          :color="color"
-          :label="color"
-          :key="id"
-        />
-      </URow>
-    </div>
-  `,
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
+export const colors = EnumVariantTemplate.bind({});
+colors.args = { enum: "color" };
 
 export const WithoutDropdownIcon = DefaultTemplate.bind({});
 WithoutDropdownIcon.args = { noIcon: true };
 
-export const dropdownListSlot = SlotTemplate.bind({});
+export const dropdownListSlot = DefaultTemplate.bind({});
 dropdownListSlot.args = {
   slotTemplate: `
     <template #default>

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

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UDropdownList from "../ui.dropdown-list";
 import URow from "../ui.container-row";
@@ -32,29 +32,33 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UDropdownList },
   setup() {
-    return { args };
+    const slots = getSlotNames(UDropdownList.name);
+
+    return { args, slots };
   },
   template: `
-    <UDropdownList v-bind="args" class="mx-4 w-[24rem]"/>
+    <UDropdownList v-bind="args" class="mx-4 w-[24rem]">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UDropdownList>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDropdownList, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <div class="flex flex-col gap-6">
       <URow>
         <UDropdownList
-          v-for="(size, index) in sizes"
+          v-for="(option, index) in options"
           :key="index"
           v-bind="args"
-          :size="size"
+          :[args.enum]="option"
         />
       </URow>
     </div>
@@ -64,8 +68,8 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
 export const maxHeight = DefaultTemplate.bind({});
 maxHeight.args = { maxHeight: 80 };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.245",
+  "version": "0.0.247",
   "contributions": {
     "html": {
       "description-markup": "markdown",