vueless 0.0.254 → 0.0.255

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

@@ -1,10 +1,9 @@
 import ULabel from "../ui.form-label";
-import URow from "../ui.container-row";
 import UCol from "../ui.container-col";
 import UText from "../ui.text-block";
 import UIcon from "../ui.image-icon";
 
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 /**
  * The `ULabel` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-label)
@@ -22,73 +21,51 @@ export default {
   },
 };
 
-const message = "This is plain text";
+const defaultTemplate = "This is plain text";
 
 const DefaultTemplate = (args) => ({
-  components: { ULabel, UText },
-  setup() {
-    return { args };
-  },
-  template: `
-    <ULabel v-bind="args">
-      <UText v-bind="args">${message}</UText>
-    </ULabel>
-  `,
-});
-
-const SlotTemplate = (args) => ({
   components: { ULabel, UText, UIcon },
   setup() {
-    return { args };
+    const slots = getSlotNames(ULabel.name);
+
+    return { args, slots };
   },
   template: `
     <ULabel v-bind="args">
-      <UText v-bind="args">${message}</UText>
-      ${args.slotTemplate}
+      <UText v-bind="args">${getSlotsFragment(defaultTemplate)}</UText>
+      ${args.slotTemplate ? args.slotTemplate : ""}
     </ULabel>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { ULabel, URow, UText },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <ULabel
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :key="index"
-      >
-        <UText :size="size">This is <b>"{{ size }}"</b> size.</UText>
-      </ULabel>
-    </URow>
-  `,
-});
-
-const LabelPlacementTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { ULabel, UCol, UText },
   setup() {
+    function getText(value, name) {
+      return name === "size" ? `This is ${value} size.` : `This is ${value} label placement.`;
+    }
+
+    const { name, options } = argTypes[args.enum];
+    const prefixedOptions = options.map((option) => getText(option, name));
+
     return {
       args,
-      placements: argTypes.align.options,
+      options: argTypes[args.enum].options,
+      prefixedOptions,
     };
   },
   template: `
     <UCol>
       <ULabel
-        v-for="(align, index) in placements"
-        v-bind="args"
-        :align="align"
+        v-for="(option, index) in options"
         :key="index"
+        v-bind="args"
+        :[args.enum]="option"
         class="border border-gray-200 rounded p-4"
       >
-        <UText>This is <b>"{{ align }}"</b> label placement.</UText>
+        <UText :[args.enum]="option">
+          {{ prefixedOptions[index] }}
+        </UText>
       </ULabel>
     </UCol>
   `,
@@ -97,11 +74,11 @@ const LabelPlacementTemplate = (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 LabelPlacement = LabelPlacementTemplate.bind({});
-LabelPlacement.args = {};
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "align" };
 
 export const Error = DefaultTemplate.bind({});
 Error.args = { error: "Error description" };
@@ -109,7 +86,7 @@ Error.args = { error: "Error description" };
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
-export const slotFooter = SlotTemplate.bind({});
+export const slotFooter = DefaultTemplate.bind({});
 slotFooter.args = {
   slotTemplate: `
     <template #footer>

package/ui.form-radio-group/index.stories.js

@@ -13,7 +13,9 @@ export default {
   id: "3160",
   title: "Form Inputs & Controls / Radio Group",
   component: URadioGroup,
-  args: {},
+  args: {
+    modelValue: "One",
+  },
   argTypes: {
     ...getArgTypes(URadioGroup.name),
   },
@@ -36,14 +38,9 @@ const DefaultTemplate = (args) => ({
 
     return { args, slots, radios };
   },
-  data() {
-    return {
-      value: args.value,
-    };
-  },
   template: `
     <UCol gap="2xl">
-      <URadioGroup v-bind="args" v-model="value">
+      <URadioGroup v-bind="args" v-model="args.modelValue">
         <URadio
           v-for="(radio, index) in radios"
           :key="index"
@@ -53,7 +50,7 @@ const DefaultTemplate = (args) => ({
         </URadio>
       </URadioGroup>
       <UAlert color="gray" size="xs">
-        <code>Selected value: <b>{{ value }}</b></code>
+        <code>Selected value: <b>{{ args.modelValue }}</b></code>
       </UAlert>
     </UCol>
   `,
@@ -70,18 +67,13 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
       radios,
     };
   },
-  data() {
-    return {
-      value: args.value,
-    };
-  },
   template: `
     <URow class="!flex-col">
       <URadioGroup
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        v-model="value"
+        v-model="args.modelValue"
         :[args.enum]="option"
         :label="option"
         :options="radios"

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import USelect from "../ui.form-select";
 import URow from "../ui.container-row";
@@ -36,66 +36,42 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { USelect },
+  components: { USelect, UIcon, UBadge },
   setup() {
-    const slots = getSlotNames(USelect.name);
-
-    return { args, slots };
-  },
-  template: `
-    <USelect v-bind="args" v-model="args.modelValue">
-      ${allSlotsFragment}
-    </USelect>
-  `,
-});
+    function getSelectedBadge(options, currentValue) {
+      return options?.find((option) => option.id === currentValue);
+    }
 
-const multipleTemplate = (args) => ({
-  components: { USelect },
-  setup() {
     const slots = getSlotNames(USelect.name);
 
-    return { args, slots };
+    return { args, slots, getSelectedBadge };
   },
   template: `
-    <USelect v-bind="args" multiple v-model="args.modelValue">
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+    <USelect v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment()}
     </USelect>
   `,
 });
 
-const OpenDirectionsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { USelect, URow },
   setup() {
     return {
       args,
-      openDirections: argTypes.openDirection.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
-    <div class="flex flex-col gap-6">
-      <URow>
-        <USelect
-          v-for="(openDirection, index) in openDirections"
-          :key="index"
-          v-bind="args"
-          :open-direction="openDirection"
-          :label="openDirection"
-          v-model="args.modelValue"
-        />
-      </URow>
-      <URow>
-        <USelect
-          v-for="(openDirection, index) in openDirections"
-          :key="index"
-          v-bind="args"
-          :open-direction="openDirection"
-          v-model="args.modelValue"
-          label=""
-        />
-      </URow>
-    </div>
+    <URow>
+      <USelect
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        v-model="args.modelValue"
+        :[args.enum]="option"
+        :label="option"
+      />
+    </URow>
   `,
 });
 
@@ -109,8 +85,8 @@ const GroupValuesTemplate = (args) => ({
   template: `
     <USelect
       v-bind="args"
-      label="Single"
       v-model="args.modelValue"
+      label="Single"
     />
     <USelect
       class="mt-5"
@@ -122,104 +98,14 @@ const GroupValuesTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { USelect, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <div class="flex flex-col gap-6">
-      <URow>
-        <USelect
-          v-for="(size, index) in sizes"
-          v-bind="args"
-          :key="index"
-          :size="size"
-          :label="size"
-          v-model="args.modelValue"
-        />
-        </URow>
-      <URow>
-        <USelect
-          v-for="(size, index) in sizes"
-          v-bind="args"
-          :key="index"
-          :size="size"
-          :label="size"
-          label-outside
-          v-model="args.modelValue"
-        />
-      </URow>
-      <URow>
-        <USelect
-          v-for="(size, index) in sizes"
-          v-bind="args"
-          :key="index"
-          :label="size"
-          :size="size"
-          multiple
-          v-model="args.multipleModelValue"
-        />
-      </URow>
-    </div>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { USelect, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <USelect
-      v-bind="args"
-      v-model="args.modelValue"
-    >
-      ${args.slotTemplate}
-    </USelect>
-  `,
-});
-
-const BadgeTemplate = (args) => ({
-  components: { USelect, UBadge },
-  setup() {
-    return { args };
-  },
-  methods: {
-    getSelectedBadge(options, currentValue) {
-      return options?.find((option) => option.id === currentValue);
-    },
-  },
-  template: `
-    <USelect
-      v-bind="args"
-      v-model="args.modelValue"
-    >
-      <template #after-caret="{ scopeProps }">
-        <UBadge
-          v-show="scopeProps?.modelValue"
-          :label="getSelectedBadge(scopeProps?.options, scopeProps?.modelValue)?.badge"
-        />
-      </template>
-      <template #option="{ option }">
-        {{ option.label }}
-        <UBadge :label="option.badge" />
-      </template>
-    </USelect>
-  `,
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Multiple = multipleTemplate.bind({});
-Multiple.args = { modelValue: [] };
+export const Multiple = DefaultTemplate.bind({});
+Multiple.args = { multiple: true, modelValue: [] };
 
-export const openDirection = OpenDirectionsTemplate.bind({});
-openDirection.args = {};
+export const openDirection = EnumVariantTemplate.bind({});
+openDirection.args = { enum: "openDirection" };
 
 export const groupValue = GroupValuesTemplate.bind({});
 groupValue.args = {
@@ -280,53 +166,70 @@ optionIsHidden.args = {
   ],
 };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = { multipleModelValue: [] };
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = {
+  enum: "size",
+  multiple: true,
+  multipleModelValue: [],
+};
 
-export const slotSelectedValueLabel = SlotTemplate.bind({});
+export const slotSelectedValueLabel = DefaultTemplate.bind({});
 slotSelectedValueLabel.args = {
   slotTemplate: `
     <template #selected-label>
-       🤘🤘🤘
+      🤘🤘🤘
     </template>
   `,
 };
 
-export const slotSelectedValueLabelAfter = SlotTemplate.bind({});
+export const slotSelectedValueLabelAfter = DefaultTemplate.bind({});
 slotSelectedValueLabelAfter.args = {
   slotTemplate: `
     <template #selected-label-after>
-       🤘🤘🤘
+      🤘🤘🤘
     </template>
   `,
 };
 
-export const slotOption = SlotTemplate.bind({});
+export const slotOption = DefaultTemplate.bind({});
 slotOption.args = {
   slotTemplate: `
     <template #option>
-       🤘🤘🤘
+      🤘🤘🤘
     </template>
   `,
 };
 
-export const slotAfterCaret = BadgeTemplate.bind({});
-slotAfterCaret.args = {};
+export const slotAfterCaret = DefaultTemplate.bind({});
+slotAfterCaret.args = {
+  slotTemplate: `
+    <template #after-caret="{ scopeProps }">
+      <UBadge
+        v-show="scopeProps?.modelValue"
+        :label="getSelectedBadge(scopeProps?.options, scopeProps?.modelValue)?.badge"
+      />
+    </template>
+    <template #option="{ option }">
+      {{ option.label }}
+      <UBadge :label="option.badge" />
+    </template>
+  `,
+};
 
-export const slotBeforeCaret = SlotTemplate.bind({});
+export const slotBeforeCaret = DefaultTemplate.bind({});
 slotBeforeCaret.args = {
   slotTemplate: `
     <template #before-caret>
-       🤘
+      🤘
     </template>
   `,
 };
 
-export const slotBeforeOption = SlotTemplate.bind({});
+export const slotBeforeOption = DefaultTemplate.bind({});
 slotBeforeOption.args = {
   slotTemplate: `
     <template #before-option>
-       🤘
+      🤘
     </template>
   `,
 };
@@ -341,7 +244,7 @@ iconRight.args = {
   iconRight: "star",
 };
 
-export const iconLeftSlot = SlotTemplate.bind({});
+export const iconLeftSlot = DefaultTemplate.bind({});
 iconLeftSlot.args = {
   slotTemplate: `
     <template #icon-left>
@@ -350,7 +253,7 @@ iconLeftSlot.args = {
   `,
 };
 
-export const iconRightSlot = SlotTemplate.bind({});
+export const iconRightSlot = DefaultTemplate.bind({});
 iconRightSlot.args = {
   slotTemplate: `
     <template #icon-right>
@@ -359,20 +262,20 @@ iconRightSlot.args = {
   `,
 };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
-       🤘
+      🤘
     </template>
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
+export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #right>
-       🤘
+      🤘
     </template>
   `,
 };

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>
   `,