vueless 0.0.246 → 0.0.248

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UDataList from "../ui.data-list";
 import UIcon from "../ui.image-icon";
@@ -42,39 +42,21 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UDataList },
+  components: { UDataList, UIcon, URow },
   setup() {
-    const slots = getSlotNames(UDataList.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UDataList v-bind="args" @dragSort="onDragSort">
-      ${allSlotsFragment}
-    </UDataList>
-  `,
-  methods: {
-    onDragSort(value) {
+    function onDragSort(value) {
       this.list = value;
-    },
-  },
-});
+    }
 
-const SlotTemplate = (args) => ({
-  components: { UDataList, UIcon, URow },
-  setup() {
-    return { args };
+    const slots = getSlotNames(UDataList.name);
+
+    return { args, slots, onDragSort };
   },
   template: `
     <UDataList v-bind="args" @dragSort="onDragSort">
-      ${args.slotTemplate}
+      ${args.slotTemplate || getSlotsFragment()}
     </UDataList>
   `,
-  methods: {
-    onDragSort(value) {
-      this.list = value;
-    },
-  },
 });
 
 export const Default = DefaultTemplate.bind({});
@@ -90,7 +72,7 @@ emptyState.args = {
 export const nesting = DefaultTemplate.bind({});
 nesting.args = { nesting: true };
 
-export const slotLabel = SlotTemplate.bind({});
+export const slotLabel = DefaultTemplate.bind({});
 slotLabel.args = {
   slotTemplate: `
     <template #label="{ item }">
@@ -102,7 +84,7 @@ slotLabel.args = {
   `,
 };
 
-export const slotActions = SlotTemplate.bind({});
+export const slotActions = DefaultTemplate.bind({});
 slotActions.args = {
   slotTemplate: `
     <template #actions>

package/ui.data-table/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 import { getRandomId } from "../service.ui";
 
 import UTable from "../ui.data-table";
@@ -157,7 +157,7 @@ function getRow() {
 }
 
 const DefaultTemplate = (args) => ({
-  components: { UTable },
+  components: { UTable, UButton, ULink, UMoney, UBadge, URow },
   setup() {
     const slots = getSlotNames(UTable.name);
 
@@ -168,6 +168,7 @@ const DefaultTemplate = (args) => ({
       v-bind="args"
       :rows="itemsData"
     >
+      ${args.slotTemplate || getSlotsFragment()}
     </UTable>
   `,
   computed: {
@@ -195,32 +196,6 @@ const EmptyTemplate = (args) => ({
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UTable, UButton, ULink, UMoney, UBadge, URow },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UTable
-      v-bind="args"
-      :rows="itemsData"
-    >
-      ${args.slotTemplate}
-    </UTable>
-  `,
-  computed: {
-    itemsData() {
-      let rows = [];
-
-      for (let i = 0; i < args.numberOfRows; i++) {
-        rows.push(args.row());
-      }
-
-      return rows;
-    },
-  },
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
@@ -247,7 +222,7 @@ stickyHeader.args = {
   stickyHeader: true,
 };
 
-export const stickyFooter = SlotTemplate.bind({});
+export const stickyFooter = DefaultTemplate.bind({});
 stickyFooter.parameters = STICKY_PARAMETERS;
 stickyFooter.args = {
   numberOfRows: 50,
@@ -281,7 +256,7 @@ DateDividerCustomLabel.args = {
   ],
 };
 
-export const slotDefault = SlotTemplate.bind({});
+export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
     <template #cell-key_3="{value}">
@@ -290,7 +265,7 @@ slotDefault.args = {
   `,
 };
 
-export const slotHeaderActions = SlotTemplate.bind({});
+export const slotHeaderActions = DefaultTemplate.bind({});
 slotHeaderActions.args = {
   numberOfRows: 50,
   stickyHeader: true,
@@ -316,7 +291,7 @@ slotHeaderActions.args = {
   `,
 };
 
-export const slotBeforeFirstRow = SlotTemplate.bind({});
+export const slotBeforeFirstRow = DefaultTemplate.bind({});
 slotBeforeFirstRow.args = {
   slotTemplate: `
     <template #before-first-row>
@@ -330,7 +305,7 @@ slotBeforeFirstRow.args = {
   `,
 };
 
-export const slotAfterLastRow = SlotTemplate.bind({});
+export const slotAfterLastRow = DefaultTemplate.bind({});
 slotAfterLastRow.args = {
   slotTemplate: `
     <template #after-last-row>
@@ -344,7 +319,7 @@ slotAfterLastRow.args = {
   `,
 };
 
-export const slotFooter = SlotTemplate.bind({});
+export const slotFooter = DefaultTemplate.bind({});
 slotFooter.args = {
   slotTemplate: `
     <template #footer>
@@ -360,7 +335,7 @@ slotFooter.args = {
   `,
 };
 
-export const cellSlots = SlotTemplate.bind({});
+export const cellSlots = DefaultTemplate.bind({});
 cellSlots.args = {
   columns: [
     { key: "link", label: "link" },

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/ui.image-avatar/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UAvatar from "../ui.image-avatar";
 import URow from "../ui.container-row";
@@ -19,94 +19,43 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UAvatar },
   setup() {
-    return { args };
-  },
-  template: `
-    <UAvatar v-bind="args" />
-  `,
-});
+    const slots = getSlotNames(UAvatar.name);
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UCol, URow, UAvatar },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
+    return { args, slots };
   },
   template: `
-    <UCol gap="xl">
-      <URow>
-        <UAvatar
-          v-for="(size, index) in sizes"
-          :key="index"
-          v-bind="args"
-          :size="size"
-          :label="size"
-        />
-      </URow>
-      <URow>
-        <UAvatar
-          v-for="(size, index) in sizes"
-          :key="index"
-          v-bind="args"
-          :size="size"
-          :label="''"
-        />
-      </URow>
-    </UCol>
+    <UAvatar v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UAvatar>
   `,
 });
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCol, URow, UAvatar },
   setup() {
     return {
       args,
-      colors: argTypes.color.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <UCol gap="xl">
       <URow>
         <UAvatar
-          v-for="(color, index) in colors"
-          v-bind="args"
-          :color="color"
-          :key="index"
-          :label="color"
-        />
-      </URow>
-      <URow>
-        <UAvatar
-          v-for="(color, index) in colors"
+          v-for="(option, index) in options"
           :key="index"
           v-bind="args"
-          :color="color"
-          :label="''"
+          :[args.enum]="option"
+          :label="option"
         />
       </URow>
-    </UCol>
-  `,
-});
-
-const RoundedTemplate = (args, { argTypes } = {}) => ({
-  components: { UCol, UAvatar, URow },
-  setup() {
-    return {
-      args,
-      roundedValues: argTypes.rounded.options,
-    };
-  },
-  template: `
-    <UCol>
       <URow>
         <UAvatar
-          v-for="(rounded, index) in roundedValues"
+          v-for="(option, index) in options"
           :key="index"
           v-bind="args"
-          :rounded="rounded"
-          :label="rounded"
+          :[args.enum]="option"
+          :label="''"
         />
       </URow>
     </UCol>
@@ -128,23 +77,23 @@ label.args = { label: "Name Surname", size: "3xl" };
 /**
  * Hold cursor above an avatar to see value.
  */
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
 /**
  * Hold cursor above an avatar to see value.
  */
-export const rounded = RoundedTemplate.bind({});
-rounded.args = { label: "John Doe", color: "orange" };
+export const rounded = EnumVariantTemplate.bind({});
+rounded.args = { enum: "rounded", label: "John Doe", color: "orange" };
 
 /**
  * Hold cursor above an avatar to see value.
  */
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
+export const colors = EnumVariantTemplate.bind({});
+colors.args = { enum: "color" };
 
 /**
  * Hold cursor above an avatar to see value.
  */
-export const bordered = ColorsTemplate.bind({});
-bordered.args = { bordered: true };
+export const bordered = EnumVariantTemplate.bind({});
+bordered.args = { enum: "color", bordered: true };

package/ui.image-icon/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UIcon from "../ui.image-icon";
 import URow from "../ui.container-row";
@@ -21,70 +21,31 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UIcon },
   setup() {
-    return { args };
-  },
-  template: `
-    <UIcon v-bind="args"/>
-  `,
-});
+    const slots = getSlotNames(UIcon.name);
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UIcon, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
+    return { args, slots };
   },
   template: `
-    <URow>
-      <UIcon
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :color="color"
-        name="close"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UIcon, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UIcon
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        name="close"
-        :key="index"
-      />
-    </URow>
+    <UIcon v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UIcon>
   `,
 });
 
-const VariantsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UIcon, URow },
   setup() {
     return {
       args,
-      variants: argTypes.variant.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UIcon
-        v-for="(variant, index) in variants"
-        :variant="variant"
-        name="close"
+        v-for="(option, index) in options"
         v-bind="args"
+        :[args.enum]="option"
         :key="index"
       />
     </URow>
@@ -94,14 +55,14 @@ const VariantsTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const colors = ColorsTemplate.bind({});
-colors.args = {};
+export const colors = EnumVariantTemplate.bind({});
+colors.args = { enum: "color" };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const variants = VariantsTemplate.bind({});
-variants.args = { color: "red" };
+export const variants = EnumVariantTemplate.bind({});
+variants.args = { enum: "variant", color: "red" };
 
 export const tooltip = DefaultTemplate.bind({});
 tooltip.args = { tooltip: "Some text" };
@@ -109,5 +70,5 @@ tooltip.args = { tooltip: "Some text" };
 export const interactive = DefaultTemplate.bind({});
 interactive.args = { interactive: true };
 
-export const pill = ColorsTemplate.bind({});
-pill.args = { pill: true };
+export const pill = EnumVariantTemplate.bind({});
+pill.args = { enum: "color", pill: true };

package/ui.loader/index.stories.js

@@ -1,8 +1,9 @@
 import ULoader from "../ui.loader";
 import URow from "../ui.container-row";
 import UButton from "../ui.button";
+import { ref } from "vue";
 
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 /**
  * The `ULoader` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader)
@@ -22,48 +23,32 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { ULoader },
   setup() {
-    return { args };
-  },
-  template: `
-    <ULoader v-bind="args" />
-  `,
-});
+    const slots = getSlotNames(ULoader.name);
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { ULoader, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
+    return { args, slots };
   },
   template: `
-    <URow class="flex-wrap">
-      <ULoader
-        v-for="(color, index) in colors"
-        :key="index"
-        v-bind="args"
-        :color="color"
-      />
-    </URow>
+    <ULoader v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </ULoader>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { ULoader, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
-    <URow>
+    <URow class="flex-wrap">
       <ULoader
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        :size="size"
+        :[args.enum]="option"
       />
     </URow>
   `,
@@ -72,17 +57,13 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 const LoadingTemplate = (args) => ({
   components: { ULoader, UButton, URow },
   setup() {
-    return { args };
-  },
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-  methods: {
-    toggleLoader() {
-      this.isLoading = !this.isLoading;
-    },
+    function toggleLoader() {
+      isLoading.value = !isLoading.value;
+    }
+
+    const isLoading = ref(false);
+
+    return { args, isLoading, toggleLoader };
   },
   template: `
     <URow>
@@ -95,11 +76,11 @@ const LoadingTemplate = (args) => ({
 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 loading = LoadingTemplate.bind({});
 loading.args = {};

package/ui.loader-rendering/index.stories.js

@@ -4,7 +4,7 @@ import UCol from "../ui.container-col";
 
 import { useLoaderRendering } from "./composables/useLoaderRendering";
 
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 /**
  * The `ULoaderRendering` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-rendering)
@@ -28,10 +28,14 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { ULoaderRendering },
   setup() {
-    return { args };
+    const slots = getSlotNames(ULoaderRendering.name);
+
+    return { args, slots };
   },
   template: `
-    <ULoaderRendering v-bind="args" class="w-full h-full" />
+    <ULoaderRendering v-bind="args" class="w-full h-full">
+      ${args.slotTemplate || getSlotsFragment()}
+    </ULoaderRendering>
   `,
 });
 
@@ -40,12 +44,11 @@ const LoadingTemplate = (args) => ({
   setup() {
     const { loaderRenderingOn, loaderRenderingOff, isLoading } = useLoaderRendering();
 
-    return { args, loaderRenderingOn, loaderRenderingOff, isLoading };
-  },
-  methods: {
-    toggleLoading() {
-      this.isLoading ? this.loaderRenderingOff() : this.loaderRenderingOn();
-    },
+    function toggleLoading() {
+      isLoading.value ? loaderRenderingOff() : loaderRenderingOn();
+    }
+
+    return { args, loaderRenderingOn, loaderRenderingOff, isLoading, toggleLoading };
   },
   template: `
     <UCol align="center" class="pb-4">

package/ui.loader-top/index.stories.js

@@ -7,7 +7,7 @@ import UBadge from "../ui.text-badge";
 import { useLoaderTop } from "./composables/useLoaderTop";
 import { loaderTopOff, loaderTopOn } from "./services/loaderTop.service";
 
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
 /**
  * The `ULoaderTop` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.loader-top)
@@ -26,7 +26,9 @@ const DefaultTemplate = (args) => ({
   setup() {
     const { loaderTopOn, loaderTopOff } = useLoaderTop();
 
-    return { args, loaderTopOn, loaderTopOff };
+    const slots = getSlotNames(ULoaderTop.name);
+
+    return { args, slots, loaderTopOn, loaderTopOff };
   },
   template: `
     <ULoaderTop color="blue" v-bind="args" resources="https://api.publicapis.org/entries"/>
@@ -38,14 +40,14 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { ULoaderTop, UButton, UCol, URow, UBadge },
   setup() {
     return {
       args,
       loaderTopOff,
       loaderTopOn,
-      colors: argTypes.color.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
@@ -55,12 +57,19 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
         <UButton label="Off" size="sm" @click="loaderTopOff('https://api.publicapis.org/images')" />
       </URow>
 
-      <URow align="center" v-for="(color, index) in colors" :key="index">
-        <UBadge :label="color" :color="color" />
+      <URow
+        align="center"
+        v-for="(option, index) in options"
+        :key="index"
+      >
+        <UBadge
+          :label="option"
+          :[args.enum]="option"
+        />
         <ULoaderTop
           resources="https://api.publicapis.org/images"
           class="static"
-          :color="color"
+          :[args.enum]="option"
           v-bind="args"
         />
       </URow>
@@ -72,5 +81,5 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Color = ColorsTemplate.bind({});
-Color.args = {};
+export const Color = EnumVariantTemplate.bind({});
+Color.args = { enum: "color" };

package/ui.other-dot/index.stories.js

@@ -3,7 +3,7 @@ import URow from "../ui.container-row";
 import UCol from "../ui.container-col";
 import UBadge from "../ui.text-badge";
 
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 /**
  * The `UDot` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.other-dot)
@@ -20,44 +20,35 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UDot },
   setup() {
-    return { args };
-  },
-  template: `
-    <UDot v-bind="args" />
-  `,
-});
+    const slots = getSlotNames(UDot.name);
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UCol, URow, UDot, UBadge },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
+    return { args, slots };
   },
   template: `
-    <UCol>
-      <URow v-for="(color, index) in colors" :key="index" gap="none" align="center">
-        <UDot v-bind="args" :color="color"/>
-        <UBadge :label="color" :color="color" variant="thirdary" />
-      </URow>
-    </UCol>
+    <UDot v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UDot>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCol, URow, UDot, UBadge },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <UCol>
-      <URow v-for="(size, index) in sizes" :key="index" gap="none" align="center">
-        <UDot v-bind="args" :size="size"/>
-        <UBadge :label="size" variant="thirdary" />
+      <URow
+        v-for="(color, index) in colors"
+        :key="index"
+        gap="none"
+        align="center"
+      >
+        <UDot v-bind="args" :[args.enum]="option"/>
+        <UBadge :label="option" :[args.enum]="option" variant="thirdary" />
       </URow>
     </UCol>
   `,
@@ -66,8 +57,8 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
+export const Colors = EnumVariantTemplate.bind({});
+Colors.args = { enum: "color" };
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };

package/web-types.json

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