vueless 0.0.242 → 0.0.244

package/package.json

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

package/ui.container-card/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UCard from "../ui.container-card";
 import URow from "../ui.container-row";
@@ -16,90 +16,77 @@ export default {
   component: UCard,
   args: {
     title: "Title",
-    slotDefaultTemplate: `
-    <template #default>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-        sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-        ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit
-        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia
-        deserunt mollit anim id est laborum.
-      </p>
-    </template>
-  `,
   },
   argTypes: {
     ...getArgTypes(UCard.name),
   },
 };
 
+const defaultTemplate = `
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+    ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+    occaecat cupidatat non proident, sunt in culpa qui officia
+    deserunt mollit anim id est laborum.
+  </p>
+`;
+
 const DefaultTemplate = (args) => ({
   components: { UCard, UButton, UInput, UIcon, UHeader },
   setup() {
-    return { args };
+    const slots = getSlotNames(UCard.name);
+
+    return { args, slots };
   },
   template: `
     <UCard v-bind="args">
-      ${args.slotDefaultTemplate}
-      ${args.slotTemplate || ""}
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
     </UCard>
   `,
 });
 
-const PaddingTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCard, URow },
   setup() {
     return {
       args,
-      paddings: argTypes.padding.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
-      <UCard v-for="(padding, index) in paddings" v-bind="args" :padding="padding" :key="index">
-        ${args.slotDefaultTemplate}
+      <UCard
+        v-for="(option, index) in options"
+        v-bind="args"
+        :[args.enum]="option"
+        :key="index"
+      >
+        ${defaultTemplate}
       </UCard>
     </URow>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {
-  slotTemplate: `
-    <template #default>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-        sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-        ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit
-        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia
-        deserunt mollit anim id est laborum.
-      </p>
-    </template>
-  `,
-};
+Default.args = {};
 
 export const description = DefaultTemplate.bind({});
 description.args = { description: "Card description" };
 
-export const padding = PaddingTemplate.bind({});
-padding.args = {};
+export const padding = EnumVariantTemplate.bind({});
+padding.args = { enum: "padding" };
 
 export const slotHeaderLeftBefore = DefaultTemplate.bind({});
 slotHeaderLeftBefore.args = {
   slotTemplate: `
     <template #header-left-before>
-      <UIcon
-        name="star"
-        size="sm"
-        pill
-      />
+      <UIcon name="star" size="sm" pill />
     </template>
+    ${defaultTemplate}
   `,
 };
 
@@ -109,6 +96,7 @@ slotHeaderLeft.args = {
     <template #header-left>
       <UHeader size="lg" label="Large title" />
     </template>
+    ${defaultTemplate}
   `,
 };
 
@@ -116,12 +104,9 @@ export const slotHeaderLeftAfter = DefaultTemplate.bind({});
 slotHeaderLeftAfter.args = {
   slotTemplate: `
     <template #header-left-after>
-      <UIcon
-        name="star"
-        size="sm"
-        pill
-      />
+      <UIcon name="star" size="sm" pill />
     </template>
+    ${defaultTemplate}
   `,
 };
 
@@ -131,12 +116,14 @@ slotHeaderRight.args = {
     <template #header-right>
       <UButton size="sm" color="gray" label="Read more" />
     </template>
+    ${defaultTemplate}
   `,
 };
 
 export const slotFooterLeft = DefaultTemplate.bind({});
 slotFooterLeft.args = {
   slotTemplate: `
+    ${defaultTemplate}
     <template #footer-left>
       <UButton label="Read more" />
     </template>
@@ -146,6 +133,7 @@ slotFooterLeft.args = {
 export const slotFooterRight = DefaultTemplate.bind({});
 slotFooterRight.args = {
   slotTemplate: `
+    ${defaultTemplate}
     <template #footer-right>
       <UButton label="Read more" />
     </template>

package/ui.container-col/index.stories.js

@@ -1,11 +1,11 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UCol from "../ui.container-col";
 import UInput from "../ui.form-input";
 import UButton from "../ui.button";
 
 /**
- * The `UGroup` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-group)
+ * The `UCol` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-col)
  */
 export default {
   id: "5015",
@@ -24,22 +24,22 @@ export default {
   },
 };
 
-const defaultSlotTemplate = `
-  <template #default>
-    <UInput placeholder="Vasyl" label="Name" />
-    <UInput placeholder="Vasylenko" label="Surname" />
-    <UInput placeholder="Kyiv" label="Town" />
-  </template>
+const defaultTemplate = `
+  <UInput placeholder="Vasyl" label="Name" />
+  <UInput placeholder="Vasylenko" label="Surname" />
+  <UInput placeholder="Kyiv" label="Town" />
 `;
 
 const DefaultTemplate = (args) => ({
   components: { UCol, UInput, UButton },
   setup() {
-    return { args };
+    const slots = getSlotNames(UCol.name);
+
+    return { args, slots };
   },
   template: `
     <UCol v-bind="args">
-      ${args.slotTemplate || defaultSlotTemplate}
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
     </UCol>
   `,
 });

package/ui.container-divider/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 import URow from "../ui.container-row";
 
 import UDivider from "../ui.container-divider";
@@ -18,52 +18,32 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UDivider },
   setup() {
-    return { args };
-  },
-  template: `
-    <UDivider v-bind="args" />
-  `,
-});
+    const slots = getSlotNames(UDivider.name);
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UDivider, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
+    return { args, slots };
   },
   template: `
-    <URow>
-      <UDivider
-        class="w-1/4"
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :key="index"
-      />
-    </URow>
+    <UDivider v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UDivider>
   `,
-  created() {
-    this.mxArgTypes = argTypes;
-  },
 });
 
-const VariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDivider, URow },
   setup() {
     return {
       args,
-      variants: argTypes.variant.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UDivider
-        class="w-1/3"
-        v-for="(variant, index) in variants"
+        class="w-1/4"
+        v-for="(option, index) in options"
         v-bind="args"
-        :variant="variant"
+        :[args.enum]="option"
         :key="index"
       />
     </URow>
@@ -73,11 +53,11 @@ const VariantTemplate = (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 variants = VariantTemplate.bind({});
-variants.args = {};
+export const variants = EnumVariantTemplate.bind({});
+variants.args = { enum: "variant" };
 
 export const dashed = DefaultTemplate.bind({});
 dashed.args = { dashed: true };

package/ui.container-group/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UGroup from "../ui.container-group";
 import UCol from "../ui.container-col";
@@ -27,24 +27,24 @@ export default {
   },
 };
 
-const defaultSlotTemplate = `
-  <template #default>
-    <UCol>
-      <UInput placeholder="Vasyl" label="Name" />
-      <UInput placeholder="Vasylenko" label="Surname" />
-      <UInput placeholder="Kyiv" label="Town" />
-    </UCol>
-  </template>
+const defaultTemplate = `
+  <UCol>
+    <UInput placeholder="Vasyl" label="Name" />
+    <UInput placeholder="Vasylenko" label="Surname" />
+    <UInput placeholder="Kyiv" label="Town" />
+  </UCol>
 `;
 
 const DefaultTemplate = (args) => ({
   components: { UGroup, UCol, UInput, UButton },
   setup() {
-    return { args };
+    const slots = getSlotNames(UGroup.name);
+
+    return { args, slots };
   },
   template: `
     <UGroup v-bind="args">
-      ${args.slotTemplate || defaultSlotTemplate}
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
     </UGroup>
   `,
 });
@@ -79,6 +79,7 @@ slotDefault.parameters = {
 export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
+    ${defaultTemplate}
     <template #right>
       <UButton size="sm" label="Edit"/>
     </template>

package/ui.container-groups/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UGroups from "../ui.container-groups";
 import UGroup from "../ui.container-group";
@@ -12,6 +12,7 @@ export default {
   id: "5040",
   title: "Containers / Groups",
   component: UGroups,
+  args: {},
   argTypes: {
     ...getArgTypes(UGroups.name),
   },
@@ -24,25 +25,25 @@ export default {
   },
 };
 
-const defaultSlotTemplate = `
-  <template #default>
-    <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
-      <UCol>
-        <UInput placeholder="input" label="Label" />
-        <UInput placeholder="input" label="Label" />
-      </UCol>
-    </UGroup>
-  </template>
+const defaultTemplate = `
+  <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
+    <UCol>
+      <UInput placeholder="input" label="Label" />
+      <UInput placeholder="input" label="Label" />
+    </UCol>
+  </UGroup>
 `;
 
 const DefaultTemplate = (args) => ({
   components: { UGroups, UGroup, UCol, UInput },
   setup() {
-    return { args };
+    const slots = getSlotNames(UGroups.name);
+
+    return { args, slots };
   },
   template: `
     <UGroups v-bind="args">
-      ${args.slotTemplate || defaultSlotTemplate}
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
     </UGroups>
   `,
 });

package/ui.container-modal/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UModal from "../ui.container-modal";
 import UButton from "../ui.button";
@@ -17,17 +17,7 @@ export default {
   component: UModal,
   args: {
     title: "Modal title",
-    value: false,
-    slotDefaultTemplate: `
-      <template #default>
-        <URow>
-          <UInput label="Name" />
-          <UInput label="Lastname" />
-        </URow>
-
-        <UTextarea class="mb-7" label="Comments" rows="3" />
-      </template>
-    `,
+    modelValue: false,
   },
   argTypes: {
     ...getArgTypes(UModal.name),
@@ -41,64 +31,74 @@ export default {
   },
 };
 
+const defaultTemplate = `
+  <URow>
+    <UInput label="Name" />
+    <UInput label="Lastname" />
+  </URow>
+
+  <UTextarea class="mb-7" label="Comments" rows="3" />
+`;
+
 const DefaultTemplate = (args) => ({
   components: { UModal, URow, UButton, UIcon, UHeader, UInput, UTextarea },
   setup() {
-    return { args };
+    function onClick() {
+      args.modelValue = true;
+    }
+
+    const slots = getSlotNames(UModal.name);
+
+    return { args, slots, onClick };
   },
   template: `
     <div>
-      <UModal v-bind="args" v-model="args.value">
-        ${args.slotDefaultTemplate}
-        ${args.slotTemplate || ""}
+      <UModal v-bind="args" v-model="args.modelValue">
+        ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
       </UModal>
 
       <UButton label="show modal" @click="onClick"/>
     </div>
   `,
-  methods: {
-    onClick() {
-      args.value = true;
-    },
-  },
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UModal, UButton, URow, UInput, UTextarea },
   setup() {
+    function onClick(value) {
+      args.width = value;
+      args.modelValue = true;
+    }
+
     return {
       args,
-      sizes: argTypes.width.options,
+      options: argTypes[args.enum].options,
+      onClick,
     };
   },
   template: `
     <div>
-      <UModal v-bind="args" v-model="args.value">
-        ${args.slotDefaultTemplate}
-        ${args.slotTemplate || ""}
+      <UModal v-bind="args" v-model="args.modelValue">
+        ${defaultTemplate}
       </UModal>
 
       <URow>
         <UButton
-          v-for="(size, index) in sizes"
-          :key="index" :label="size" @click="onClick(size)"
+          v-for="(option, index) in options"
+          :key="index"
+          :label="option"
+          @click="onClick(option)"
         />
       </URow>
     </div>
   `,
-  methods: {
-    onClick(value) {
-      args.width = value;
-      args.value = true;
-    },
-  },
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = { text: "" };
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "width", text: "" };
 
 export const backRoute = DefaultTemplate.bind({});
 backRoute.args = { backRoute: { title: "route title" } };
@@ -121,6 +121,7 @@ slotHeaderLeftBefore.args = {
         color="gray"
       />
     </template>
+    ${defaultTemplate}
   `,
 };
 
@@ -130,6 +131,7 @@ slotHeaderLeft.args = {
     <template #header-left>
       <UHeader size="lg" label="Large title" />
     </template>
+    ${defaultTemplate}
   `,
 };
 
@@ -142,6 +144,7 @@ slotHeaderLeftAfter.args = {
         color="gray"
       />
     </template>
+    ${defaultTemplate}
   `,
 };
 
@@ -149,14 +152,16 @@ export const slotHeaderRight = DefaultTemplate.bind({});
 slotHeaderRight.args = {
   slotTemplate: `
     <template #header-right>
-       <UButton size="sm" color="gray" label="some button" />
+      <UButton size="sm" color="gray" label="some button" />
     </template>
+    ${defaultTemplate}
   `,
 };
 
 export const slotFooterLeft = DefaultTemplate.bind({});
 slotFooterLeft.args = {
   slotTemplate: `
+    ${defaultTemplate}
     <template #footer-left>
       <UButton label="Submit" />
     </template>
@@ -166,6 +171,7 @@ slotFooterLeft.args = {
 export const slotFooterRight = DefaultTemplate.bind({});
 slotFooterRight.args = {
   slotTemplate: `
+    ${defaultTemplate}
     <template #footer-right>
       <UButton label="Back" />
     </template>

package/ui.container-modal-confirm/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UModalConfirm from "../ui.container-modal-confirm";
 import UButton from "../ui.button";
@@ -16,11 +16,7 @@ export default {
   args: {
     title: "Modal Confirm title",
     confirmLabel: "Confirm",
-    slotTemplate: `
-      <template #default>
-       Confirm the action?
-      </template>
-    `,
+    modelValue: false,
   },
   argTypes: {
     ...getArgTypes(UModalConfirm.name),
@@ -34,106 +30,61 @@ export default {
   },
 };
 
+const defaultTemplate = "Confirm the action?";
+
 const DefaultTemplate = (args) => ({
-  components: { UModalConfirm, UButton },
+  components: { UModalConfirm, UButton, UHeader, UIcon },
   setup() {
-    return { args };
-  },
-  template: `
-    <div>
-      <UModalConfirm v-bind="args" v-model="args.value">
-        ${args.slotTemplate}
-      </UModalConfirm>
+    function onClick() {
+      args.modelValue = true;
+    }
 
-      <UButton label="show modal" @click="onClick"/>
-    </div>
-  `,
-  methods: {
-    onClick() {
-      args.value = true;
-    },
-  },
-});
+    const slots = getSlotNames(UModalConfirm.name);
 
-const SlotTemplate = (args) => ({
-  components: { UModalConfirm, UButton, UHeader, UIcon },
-  setup() {
-    return { args };
+    return { args, slots, onClick };
   },
   template: `
     <div>
-      <UModalConfirm v-bind="args" v-model="args.value">
-        ${args.slotTemplate}
+      <UModalConfirm v-bind="args" v-model="args.modelValue">
+        ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
       </UModalConfirm>
 
       <UButton label="show modal" @click="onClick"/>
     </div>
   `,
-  methods: {
-    onClick() {
-      args.value = true;
-    },
-  },
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UModalConfirm, UButton, URow },
   setup() {
-    return {
-      args,
-      sizes: argTypes.width.options,
-    };
-  },
-  template: `
-    <div>
-      <UModalConfirm v-bind="args" v-model="args.value">
-        ${args.slotTemplate}
-      </UModalConfirm>
+    function onClick(value) {
+      argTypes[args.enum].name === "color" ? (args.color = value) : (args.width = value);
 
-      <URow>
-        <UButton
-          v-for="(size, index) in sizes"
-          :key="index" :label="size" @click="onClick(size)"
-        />
-      </URow>
-    </div>
-  `,
-  methods: {
-    onClick(value) {
-      args.width = value;
-      args.value = true;
-    },
-  },
-});
+      args.modelValue = true;
+    }
 
-const ColorTemplate = (args, { argTypes } = {}) => ({
-  components: { UModalConfirm, UButton, URow },
-  setup() {
     return {
       args,
-      colors: argTypes.color.options,
+      onClick,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <div>
-      <UModalConfirm v-bind="args" v-model="args.value">
-        ${args.slotTemplate}
+      <UModalConfirm v-bind="args" v-model="args.modelValue">
+        ${defaultTemplate}
       </UModalConfirm>
 
       <URow>
         <UButton
-          v-for="(color, index) in colors"
-          :key="index" :label="color" @click="onClick(color)"
+          v-for="(option, index) in options"
+          :key="index"
+          :label="option"
+          @click="onClick(option)"
         />
       </URow>
     </div>
   `,
-  methods: {
-    onClick(value) {
-      args.color = value;
-      args.value = true;
-    },
-  },
 });
 
 export const Default = DefaultTemplate.bind({});
@@ -145,13 +96,13 @@ withoutCancelButton.args = { cancelButton: false };
 export const disableAcceptButton = DefaultTemplate.bind({});
 disableAcceptButton.args = { confirmDisabled: true };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = { text: "" };
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "width", text: "" };
 
-export const color = ColorTemplate.bind({});
-sizes.args = { text: "" };
+export const color = EnumVariantTemplate.bind({});
+color.args = { enum: "color", text: "" };
 
-export const slotHeaderLeftBefore = SlotTemplate.bind({});
+export const slotHeaderLeftBefore = DefaultTemplate.bind({});
 slotHeaderLeftBefore.args = {
   slotTemplate: `
     <template #header-left-before>
@@ -160,19 +111,21 @@ slotHeaderLeftBefore.args = {
         color="gray"
       />
     </template>
+    ${defaultTemplate}
   `,
 };
 
-export const slotHeaderLeft = SlotTemplate.bind({});
+export const slotHeaderLeft = DefaultTemplate.bind({});
 slotHeaderLeft.args = {
   slotTemplate: `
     <template #header-left>
       <UHeader size="lg" label="Large title" />
     </template>
+    ${defaultTemplate}
   `,
 };
 
-export const slotHeaderLeftAfter = SlotTemplate.bind({});
+export const slotHeaderLeftAfter = DefaultTemplate.bind({});
 slotHeaderLeftAfter.args = {
   slotTemplate: `
     <template #header-left-after>
@@ -181,19 +134,21 @@ slotHeaderLeftAfter.args = {
         color="gray"
       />
     </template>
+    ${defaultTemplate}
   `,
 };
 
-export const slotHeaderRight = SlotTemplate.bind({});
+export const slotHeaderRight = DefaultTemplate.bind({});
 slotHeaderRight.args = {
   slotTemplate: `
     <template #header-right>
-       <UButton label="I'm in the right slot" size="sm" color="gray" />
+      <UButton label="I'm in the right slot" size="sm" color="gray" />
     </template>
+    ${defaultTemplate}
   `,
 };
 
-export const slotDefault = SlotTemplate.bind({});
+export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
   slotTemplate: `
     <template #default>
@@ -202,11 +157,12 @@ slotDefault.args = {
   `,
 };
 
-export const slotFooterRight = SlotTemplate.bind({});
+export const slotFooterRight = DefaultTemplate.bind({});
 slotFooterRight.args = {
   slotTemplate: `
+    ${defaultTemplate}
     <template #footer-right>
-       <UButton label="I'm in the right slot" size="sm" color="gray" />
+      <UButton label="I'm in the right slot" size="sm" color="gray" />
     </template>
   `,
 };

package/ui.container-page/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UPage from "../ui.container-page";
 import UCard from "../ui.container-card";
@@ -19,23 +19,22 @@ export default {
   args: {
     title: "Title",
     gray: true,
-    slotDefaultTemplate: `
-      <template #default>
-        <UCard title="Card title">
-          <URow>
-            <UInput label="Name" />
-            <UInput label="Lastname" />
-          </URow>
-          <UTextarea class="mb-7 mt-4" label="Comments" rows="3" />
-        </UCard>
-      </template>
-    `,
   },
   argTypes: {
     ...getArgTypes(UPage.name),
   },
 };
 
+const defaultTemplate = `
+  <UCard title="Card title">
+    <URow>
+      <UInput label="Name" />
+      <UInput label="Lastname" />
+    </URow>
+    <UTextarea class="mb-7 mt-4" label="Comments" rows="3" />
+  </UCard>
+`;
+
 const DefaultTemplate = (args) => ({
   components: {
     UPage,
@@ -48,12 +47,13 @@ const DefaultTemplate = (args) => ({
     UHeader,
   },
   setup() {
-    return { args };
+    const slots = getSlotNames(UPage.name);
+
+    return { args, slots };
   },
   template: `
     <UPage v-bind="args">
-      ${args.slotDefaultTemplate}
-      ${args.slotTemplate || ""}
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
     </UPage>
   `,
 });
@@ -96,8 +96,9 @@ slotHeaderLeftBefore.args = {
       <UIcon
         name="close"
         color="gray"
-       />
+      />
     </template>
+    ${defaultTemplate}
   `,
 };
 
@@ -107,6 +108,7 @@ slotHeaderLeft.args = {
     <template #header-left>
       <UHeader size="lg" label="Large title" />
     </template>
+    ${defaultTemplate}
   `,
 };
 
@@ -117,8 +119,9 @@ slotHeaderLeftAfter.args = {
       <UIcon
         name="close"
         color="gray"
-       />
+      />
     </template>
+    ${defaultTemplate}
   `,
 };
 
@@ -126,14 +129,16 @@ export const slotHeaderRight = DefaultTemplate.bind({});
 slotHeaderRight.args = {
   slotTemplate: `
     <template #header-right>
-       <UButton size="sm" color="gray" label="button" />
+      <UButton size="sm" color="gray" label="button" />
     </template>
+    ${defaultTemplate}
   `,
 };
 
 export const slotFooterLeft = DefaultTemplate.bind({});
 slotFooterLeft.args = {
   slotTemplate: `
+    ${defaultTemplate}
     <template #footer-left>
         <UButton label="button" />
     </template>
@@ -143,8 +148,9 @@ slotFooterLeft.args = {
 export const slotFooterRight = DefaultTemplate.bind({});
 slotFooterRight.args = {
   slotTemplate: `
+    ${defaultTemplate}
     <template #footer-right>
-        <UButton label="button" />
+      <UButton label="button" />
     </template>
   `,
 };

package/ui.container-row/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import URow from "../ui.container-row";
 import UInput from "../ui.form-input";
@@ -17,56 +17,52 @@ export default {
   },
 };
 
-const defaultSlotTemplate = `
-  <template #default>
-    <UInput label="Name" />
-    <UButton label="Submit" size="xs" block />
-  </template>
+const defaultTemplate = `
+  <UInput label="Name" />
+  <UButton label="Submit" size="xs" block />
 `;
 
 const DefaultTemplate = (args) => ({
   components: { URow, UInput, UButton },
   setup() {
-    return { args };
+    const slots = getSlotNames(URow.name);
+
+    return { args, slots };
   },
   template: `
     <URow v-bind="args" class="flex">
-      ${args.slotTemplate || defaultSlotTemplate}
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
     </URow>
   `,
 });
 
-const GapTemplate = (args, { argTypes } = {}) => ({
-  components: { UCol, URow, UInput },
-  setup() {
-    return {
-      args,
-      gaps: argTypes.gap.options,
-    };
-  },
-  template: `
-    <UCol gap="xl">
-      <URow v-for="(gap, index) in gaps" :key="index" v-bind="args" :gap="gap" align="center">
-        <UInput :label="gap" />
-        <UInput :label="gap" />
-      </URow>
-    </UCol>
-  `,
-});
-
-const AlignTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCol, URow, UInput, UButton },
   setup() {
+    const isGapEnum = argTypes[args.enum].name === "gap";
+
     return {
       args,
-      aligns: argTypes.align.options,
+      options: argTypes[args.enum].options,
+      isGapEnum,
     };
   },
   template: `
     <UCol gap="xl">
-      <URow v-for="(align, index) in aligns" :key="index" v-bind="args" :align="align">
-        <UButton :label="align" size="xs" block />
-        <UInput label="Name" />
+      <URow
+        v-for="(option, index) in options"
+        v-bind="args"
+        :[args.enum]="option"
+        :key="index"
+      >
+        <template v-if="isGapEnum">
+          <UInput :label="option" />
+          <UInput :label="option" />
+        </template>
+        <template v-else>
+          <UButton :label="option" size="xs" block />
+          <UInput label="Name" />
+        </template>
       </URow>
     </UCol>
   `,
@@ -75,11 +71,11 @@ const AlignTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Gap = GapTemplate.bind({});
-Gap.args = {};
+export const Gap = EnumVariantTemplate.bind({});
+Gap.args = { enum: "gap" };
 
-export const Align = AlignTemplate.bind({});
-Align.args = {};
+export const Align = EnumVariantTemplate.bind({});
+Align.args = { enum: "align" };
 
 export const noMobile = DefaultTemplate.bind({});
 noMobile.args = {

package/ui.navigation-pagination/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UPagination from "../ui.navigation-pagination";
 
@@ -21,10 +21,14 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UPagination },
   setup() {
-    return { args };
+    const slots = getSlotNames(UPagination.name);
+
+    return { args, slots };
   },
   template: `
-    <UPagination v-bind="args" v-model="args.value" />
+    <UPagination v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UPagination>
   `,
 });
 

package/ui.navigation-progress/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, allSlotsFragment, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UProgress from "./index.vue";
 import UCol from "../ui.container-col";
@@ -33,7 +33,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UCol align="start">
-      <UProgress v-bind="args">${args.slotTemplate || allSlotsFragment}</UProgress>
+      <UProgress v-bind="args">${args.slotTemplate || getSlotsFragment()}</UProgress>
       <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
     </UCol>
   `,

package/ui.navigation-tab/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UTab from "../ui.navigation-tab";
 import UIcon from "../ui.image-icon";
@@ -19,23 +19,15 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UTab },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UTab v-bind="args" />
-  `,
-});
-
-const SlotTemplate = (args) => ({
   components: { UTab, UIcon },
   setup() {
-    return { args };
+    const slots = getSlotNames(UTab.name);
+
+    return { args, slots };
   },
   template: `
     <UTab v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || getSlotsFragment()}
     </UTab>
   `,
 });
@@ -46,7 +38,7 @@ defaultTemplate.args = {};
 export const disabled = DefaultTemplate.bind({});
 disabled.args = { disabled: true };
 
-export const slotDefault = SlotTemplate.bind({});
+export const slotDefault = DefaultTemplate.bind({});
 slotDefault.args = {
   label: "Tag",
   slotTemplate: `

package/ui.navigation-tabs/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UTabs from "../ui.navigation-tabs";
 
@@ -25,28 +25,32 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UTabs },
   setup() {
-    return { args };
+    const slots = getSlotNames(UTabs.name);
+
+    return { args, slots };
   },
   template: `
-    <UTabs v-model="args.modelValue" v-bind="args"/>
+    <UTabs v-model="args.modelValue" v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UTabs>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UTabs },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <div class="space-y-16">
       <UTabs
         v-model="args.modelValue"
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         v-bind="args"
-        :size="size"
+        :[args.enum]="option"
         :key="index"
       />
     </div>
@@ -56,8 +60,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 bottomLine = DefaultTemplate.bind({});
 bottomLine.args = { underlined: true };

package/web-types.json

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