vueless 0.0.253 → 0.0.255

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

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import URadioGroup from "../ui.form-radio-group";
 import URadio from "../ui.form-radio";
@@ -14,113 +14,70 @@ export default {
   title: "Form Inputs & Controls / Radio Group",
   component: URadioGroup,
   args: {
-    label: "Label",
-    value: "One",
-    radios: [
-      { name: "radio", label: "Radio 1", value: "1" },
-      { name: "radio", label: "Radio 2", value: "2" },
-      { name: "radio", label: "Radio 3", value: "3" },
-    ],
+    modelValue: "One",
   },
   argTypes: {
     ...getArgTypes(URadioGroup.name),
   },
 };
 
+const defaultRadios = [
+  { name: "slotValues", label: "Boolean", value: false },
+  { name: "slotValues", label: "String", value: "One" },
+  { name: "slotValues", label: "Number", value: 3 },
+  { name: "slotValues", label: "Object", value: { key: "value" } },
+  { name: "slotValues", label: "Array", value: ["Array", 1] },
+];
+
 const DefaultTemplate = (args) => ({
   components: { URadioGroup, URadio, UAlert, URow, UCol },
   setup() {
-    return { args };
-  },
-  data() {
-    return {
-      value: args.value,
-    };
+    const slots = getSlotNames(URadioGroup.name);
+
+    const radios = args.radios ? args.radios : defaultRadios;
+
+    return { args, slots, radios };
   },
   template: `
     <UCol gap="2xl">
-      <URadioGroup v-bind="args" v-model="value">
-        <URadio v-for="(radio, index) in args.radios" :key="index" v-bind="radio" />
+      <URadioGroup v-bind="args" v-model="args.modelValue">
+        <URadio
+          v-for="(radio, index) in radios"
+          :key="index"
+          v-bind="radio"
+        >
+          ${args.slotTemplate || getSlotsFragment()}
+        </URadio>
       </URadioGroup>
       <UAlert color="gray" size="xs">
-        <code>Selected value: <b>{{ value }}</b></code>
+        <code>Selected value: <b>{{ args.modelValue }}</b></code>
       </UAlert>
     </UCol>
   `,
 });
 
-const OptionsTemplate = (args) => ({
-  components: { URadioGroup, URadio, UAlert, URow },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      value: args.value,
-    };
-  },
-  template: `
-    <URow class="!flex-col">
-      <URadioGroup v-bind="args" v-model="value" :options="args.radios" />
-
-      <URow>
-        <UAlert color="blue">
-          <p>Selected value: {{ value }}</p>
-        </UAlert>
-      </URow>
-    </URow>
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { URadioGroup, URow },
   setup() {
-    return { args };
-  },
-  data() {
-    return {
-      value: args.value,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow class="!flex-col">
-      <URadioGroup
-        v-bind="args"
-        v-for="color in colors"
-        :key="color"
-        :label="color"
-        :color="color"
-        :options="args.radios"
-        :name="color"
-        v-model="value"
-      />
-    </URow>
-  `,
-});
+    const radios = defaultRadios;
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { URadioGroup, URow },
-  setup() {
-    return { args };
-  },
-  data() {
     return {
-      value: args.value,
-      sizes: argTypes.size.options,
+      args,
+      options: argTypes[args.enum].options,
+      radios,
     };
   },
   template: `
     <URow class="!flex-col">
       <URadioGroup
+        v-for="(option, index) in options"
+        :key="index"
         v-bind="args"
-        v-for="size in sizes"
-        :key="size"
-        :label="size"
-        :size="size"
-        :options="args.radios"
-        :name="size"
-        v-model="value"
+        v-model="args.modelValue"
+        :[args.enum]="option"
+        :label="option"
+        :options="radios"
+        :name="option"
       />
     </URow>
   `,
@@ -129,30 +86,22 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {
   name: "Default",
-  isDefaultStory: true,
-  radios: [
-    { name: "slotValues", label: "Boolean", value: false },
-    { name: "slotValues", label: "String", value: "One" },
-    { name: "slotValues", label: "Number", value: 3 },
-    { name: "slotValues", label: "Object", value: { key: "value" } },
-    { name: "slotValues", label: "Array", value: ["Array", 1] },
-  ],
 };
 
-export const Options = OptionsTemplate.bind({});
+export const Options = DefaultTemplate.bind({});
 Options.args = {
   name: "Options",
   radios: [
     { name: "radioValues", label: "Boolean", value: false },
-    { name: "radioValues", label: "String", value: "One" },
-    { name: "radioValues", label: "Number", value: 3 },
-    { name: "radioValues", label: "Object", value: { key: "value" } },
-    { name: "radioValues", label: "Array", value: ["Array", 1] },
+    { name: "radioValues", label: "String", value: "Custom string value" },
+    { name: "radioValues", label: "Number", value: 4 },
+    { name: "radioValues", label: "Object", value: { key: "Custom object value" } },
+    { name: "radioValues", label: "Array", value: ["Custom array value", 2] },
   ],
 };
 
-export const Colors = ColorsTemplate.bind({});
-Colors.args = { name: "Colors" };
+export const Colors = EnumVariantTemplate.bind({});
+Colors.args = { enum: "color", name: "Colors" };
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = { name: "Sizes" };
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size", name: "Sizes" };

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