vueless 0.0.254 → 0.0.256

package/ui.form-date-picker/index.stories.js

@@ -13,6 +13,7 @@ export default {
   component: UDatePicker,
   args: {
     label: "Label",
+    modelValue: null,
   },
   argTypes: {
     ...getArgTypes(UDatePicker.name),
@@ -33,18 +34,13 @@ const DefaultTemplate = (args) => ({
 
     return { args, slots };
   },
-  data() {
-    return {
-      value: this.args.value,
-    };
-  },
   template: `
-    <UDatePicker v-bind="args" v-model="value">
+    <UDatePicker v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment()}
     </UDatePicker>
 
     <div class="mt-4">
-      {{ value }}
+      {{ args.modelValue }}
     </div>
   `,
 });
@@ -84,7 +80,7 @@ const OpenDirectionTemplate = (args) => ({
         open-direction-y="top"
         open-direction-x="left"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
         label="Top Left"
       />
       <UDatePicker
@@ -92,7 +88,7 @@ const OpenDirectionTemplate = (args) => ({
         open-direction-y="top"
         open-direction-x="right"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
         label="Top Right"
       />
       <UDatePicker
@@ -100,7 +96,7 @@ const OpenDirectionTemplate = (args) => ({
         open-direction-y="bottom"
         open-direction-x="left"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
         label="Bottom Left"
       />
       <UDatePicker
@@ -108,7 +104,7 @@ const OpenDirectionTemplate = (args) => ({
         open-direction-y="bottom"
         open-direction-x="right"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
         label="Bottom Right"
       />
     </URow>
@@ -116,7 +112,7 @@ const OpenDirectionTemplate = (args) => ({
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = { value: new Date() };
+Default.args = { modelValue: new Date() };
 
 export const sizes = EnumVariantTemplate.bind({});
 sizes.args = { enum: "size", label: "" };
@@ -137,16 +133,16 @@ export const placeholder = DefaultTemplate.bind({});
 placeholder.args = { placeholder: "some placeholder" };
 
 export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", value: "28.06.2024" };
+DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", modelValue: "28.06.2024" };
 
 export const Timepicker = DefaultTemplate.bind({});
-Timepicker.args = { timepicker: true, value: new Date(2024, 2, 14, 12, 24, 14) };
+Timepicker.args = { timepicker: true, modelValue: new Date(2024, 2, 14, 12, 24, 14) };
 
 export const MinMax = DefaultTemplate.bind({});
 MinMax.args = {
   minDate: new Date(2022, 2, 22),
   maxDate: new Date(2022, 2, 26),
-  value: new Date(2022, 2, 24),
+  modelValue: new Date(2022, 2, 24),
 };
 
 export const slotIcon = DefaultTemplate.bind({});

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

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

package/ui.form-input-file/index.stories.js

@@ -54,8 +54,8 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     <UCol gap="xl">
       <div v-for="(option, index) in options" :key="index">
         <UInputFile
-          :[args.enum]="option"
           v-bind="args"
+          :[args.enum]="option"
           :label="option"
         />
       </div>

package/ui.form-input-money/index.stories.js

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

package/ui.form-input-number/index.stories.js

@@ -29,7 +29,7 @@ const DefaultTemplate = (args) => ({
     };
   },
   template: `
-    <UInputNumber v-model="count" v-bind="args">
+    <UInputNumber v-bind="args" v-model="count">
       ${args.slotTemplate || getSlotsFragment()}
     </UInputNumber>
   `,
@@ -56,11 +56,11 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     <UCol gap="xl">
       <UInputNumber
         v-for="(option, index) in options"
+        :key="index"
         v-bind="args"
+        v-model="sizeValues[index].count"
         :[args.enum]="option"
-        :key="index"
         :label="sizeValues[index].label"
-        v-model="sizeValues[index].count"
       />
     </UCol>
   `,

package/ui.form-input-search/index.stories.js

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

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