vueless 0.0.246 → 0.0.247

package/package.json

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

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.246",
+  "version": "0.0.247",
   "contributions": {
     "html": {
       "description-markup": "markdown",