vueless 0.0.254 → 0.0.256

package/ui.form-switch/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import USwitch from "../ui.form-switch";
 import UIcon from "../ui.image-icon";
@@ -22,50 +22,34 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { USwitch, UIcon },
   setup() {
-    return { args };
-  },
-  template: `
-    <USwitch v-bind="args" v-model="args.value" />
-  `,
-});
+    const slots = getSlotNames(USwitch.name);
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { USwitch, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
+    return { args, slots };
   },
   template: `
-    <URow>
-      <USwitch
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :color="color"
-        v-model="args.value"
-        :key="index"
-      />
-    </URow>
+    <USwitch v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment()}
+    </USwitch>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { USwitch, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <USwitch
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        v-model="args.value"
+        v-for="(option, index) in options"
         :key="index"
+        v-bind="args"
+        v-model="args.modelValue"
+        :[args.enum]="option"
+        :label="option"
       />
     </URow>
   `,
@@ -80,14 +64,14 @@ label.args = { label: "Some label" };
 export const description = DefaultTemplate.bind({});
 description.args = { label: "Label", description: "Some description" };
 
-export const colors = ColorsTemplate.bind({});
-colors.args = { modelValue: true };
+export const colors = EnumVariantTemplate.bind({});
+colors.args = { enum: "color", modelValue: true };
 
 export const toggleLabel = DefaultTemplate.bind({});
 toggleLabel.args = { toggleLabel: true };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = { color: "yellow" };
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size", color: "yellow" };
 
 export const icon = DefaultTemplate.bind({});
 icon.args = { toggleIcon: true, color: "yellow" };

package/ui.form-textarea/index.stories.js

@@ -28,9 +28,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UTextarea
-      v-bind="args"
-    >
+    <UTextarea v-bind="args">
       ${args.slotTemplate || getSlotsFragment()}
     </UTextarea>
   `,

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

@@ -44,9 +44,9 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     <URow>
       <UIcon
         v-for="(option, index) in options"
+        :key="index"
         v-bind="args"
         :[args.enum]="option"
-        :key="index"
       />
     </URow>
   `,

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

@@ -56,8 +56,8 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
         <UProgress
           v-for="(option, index) in options"
           :key="index"
-          :[args.enum]="option"
           v-bind="args"
+          :[args.enum]="option"
           :value="args.progress"
         />
       </UCol>

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

@@ -30,7 +30,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UTabs v-model="args.modelValue" v-bind="args">
+    <UTabs v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment()}
     </UTabs>
   `,
@@ -47,11 +47,11 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   template: `
     <div class="space-y-16">
       <UTabs
-        v-model="args.modelValue"
         v-for="(option, index) in options"
+        :key="index"
         v-bind="args"
+        v-model="args.modelValue"
         :[args.enum]="option"
-        :key="index"
       />
     </div>
   `,

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

@@ -48,11 +48,11 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
       <URow v-for="(variant, index) in variants" :key="index">
         <UBadge
           v-for="(color, index) in colors"
+          :key="index"
           v-bind="args"
           :color="color"
           :variant="variant"
           :label="color"
-          :key="index"
         />
       </URow>
     </UCol>
@@ -72,10 +72,10 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     <URow>
       <UBadge
         v-for="(option, index) in options"
+        :key="index"
         v-bind="args"
         :[args.enum]="option"
         :label="getText(option)"
-        :key="index"
       />
     </URow>
   `,

package/ui.text-block/index.stories.js

@@ -50,9 +50,9 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     <URow>
       <UText
         v-for="(option, index) in options"
-        :[args.enum]="option"
-        v-bind="args"
         :key="index"
+        v-bind="args"
+        :[args.enum]="option"
       >
         ${args.slotTemplate || defaultTemplate}
       </UText>

package/ui.text-empty/index.stories.js

@@ -47,10 +47,10 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     <URow>
       <UEmpty
         v-for="(option, index) in options"
+        :key="index"
         v-bind="args"
         :[args.enum]="option"
         :title="option"
-        :key="index"
       />
     </URow>
   `,

package/web-types.json

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