vueless 0.0.253 → 0.0.255

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UDatePicker from "../ui.form-date-picker";
 import UIcon from "../ui.image-icon";
@@ -13,6 +13,7 @@ export default {
   component: UDatePicker,
   args: {
     label: "Label",
+    modelValue: null,
   },
   argTypes: {
     ...getArgTypes(UDatePicker.name),
@@ -27,46 +28,40 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UDatePicker },
+  components: { UDatePicker, UIcon },
   setup() {
     const slots = getSlotNames(UDatePicker.name);
 
     return { args, slots };
   },
-  data() {
-    return {
-      value: this.args.value,
-    };
-  },
   template: `
-    <UDatePicker v-bind="args" v-model="value">
-      ${allSlotsFragment}
+    <UDatePicker v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment()}
     </UDatePicker>
 
     <div class="mt-4">
-      {{ value }}
+      {{ args.modelValue }}
     </div>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDatePicker, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UDatePicker
-        v-for="(size, index) in sizes"
-        :size="size"
-        :label="size"
-        v-bind="args"
+        v-for="(option, index) in options"
         :key="index"
-      >
-      </UDatePicker>
+        v-bind="args"
+        :[args.enum]="option"
+        :label="option"
+      />
     </URow>
   `,
 });
@@ -83,50 +78,44 @@ const OpenDirectionTemplate = (args) => ({
       <UDatePicker
         class="w-full"
         open-direction-y="top"
+        open-direction-x="left"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
+        label="Top Left"
       />
       <UDatePicker
         class="w-full"
-        open-direction-y="bottom"
+        open-direction-y="top"
         open-direction-x="right"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
+        label="Top Right"
       />
       <UDatePicker
         class="w-full"
         open-direction-y="bottom"
+        open-direction-x="left"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
+        label="Bottom Left"
       />
       <UDatePicker
         class="w-full"
         open-direction-y="bottom"
-        open-direction-x="left"
+        open-direction-x="right"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
+        label="Bottom Right"
       />
     </URow>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UDatePicker, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDatePicker v-bind="args">
-      ${args.slotTemplate}
-    </UDatePicker>
-  `,
-});
-
 export const Default = DefaultTemplate.bind({});
-Default.args = { value: new Date() };
+Default.args = { modelValue: new Date() };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = { label: "" };
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size", label: "" };
 
 export const openDirection = OpenDirectionTemplate.bind({});
 openDirection.args = {};
@@ -144,44 +133,41 @@ 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 = SlotTemplate.bind({});
+export const slotIcon = DefaultTemplate.bind({});
 slotIcon.args = {
   slotTemplate: `
     <template #right-icon>
-      <UIcon
-        name="star"
-        color="black"
-       />
+      <UIcon name="star" color="black" />
     </template>
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
+export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #right>
-        🤘🤘🤘
+      🤘🤘🤘
     </template>
   `,
 };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #left>
-        🤘🤘🤘
+      🤘🤘🤘
     </template>
   `,
 };

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UDatePickerRange from "../ui.form-date-picker-range";
 import URow from "../ui.container-row";
@@ -44,7 +44,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDatePickerRange v-bind="args" v-model="value">
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UDatePickerRange>
 
     <div class="mt-4">
@@ -53,74 +53,65 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UDatePickerRange },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDatePickerRange v-bind="args" v-model="args.value">
-      ${args.slotTemplate}
-    </UDatePickerRange>
-  `,
-});
-
-const VariantsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDatePickerRange, URow },
   setup() {
     return {
       args,
-      variants: argTypes.variant.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UDatePickerRange
-        v-for="(variant, index) in variants"
-        :variant="variant"
+        v-for="(option, index) in options"
+        :key="index"
         v-bind="args"
         v-model="args.value"
-        :key="index"
+        :[args.enum]="option"
       />
     </URow>
   `,
 });
 
-const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
+const OpenDirectionTemplate = (args) => ({
   components: { UDatePickerRange, URow },
   setup() {
-    return {
-      args,
-      directions: argTypes.openDirection.options,
-    };
+    return { args };
   },
   template: `
     <URow class="!flex-col">
       <UDatePickerRange
         class="w-full"
         open-direction-y="top"
+        open-direction-x="left"
         v-bind="args"
         v-model="args.value"
+        label="Top Left"
       />
       <UDatePickerRange
         class="w-full"
-        open-direction-y="bottom"
+        open-direction-y="top"
         open-direction-x="right"
         v-bind="args"
         v-model="args.value"
+        label="Top Right"
       />
       <UDatePickerRange
         class="w-full"
         open-direction-y="bottom"
+        open-direction-x="left"
         v-bind="args"
         v-model="args.value"
+        label="Bottom Left"
       />
       <UDatePickerRange
         class="w-full"
         open-direction-y="bottom"
-        open-direction-x="left"
+        open-direction-x="right"
         v-bind="args"
         v-model="args.value"
+        label="Bottom Right"
       />
     </URow>
   `,
@@ -129,14 +120,14 @@ const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const variants = VariantsTemplate.bind({});
-variants.args = {};
+export const variants = EnumVariantTemplate.bind({});
+variants.args = { enum: "variant" };
 
 export const openDirection = OpenDirectionTemplate.bind({});
 openDirection.args = {};
 
-export const disabled = VariantsTemplate.bind({});
-disabled.args = { disabled: true };
+export const disabled = EnumVariantTemplate.bind({});
+disabled.args = { enum: "variant", disabled: true };
 
 export const label = DefaultTemplate.bind({});
 label.args = { variant: "input", label: "some label" };
@@ -174,7 +165,7 @@ customRangeButton.args = {
   value: { from: null, to: null },
 };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   variant: "input",
   slotTemplate: `
@@ -184,7 +175,7 @@ slotLeft.args = {
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
+export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   variant: "input",
   slotTemplate: `

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/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import URadio from "../ui.form-radio";
 import UBadge from "../ui.text-badge";
@@ -22,7 +22,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { URadio },
+  components: { URadio, UBadge },
   setup() {
     const slots = getSlotNames(URadio.name);
 
@@ -30,19 +30,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <URadio v-bind="args">
-      ${allSlotsFragment}
-    </URadio>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { URadio, UBadge },
-  setup() {
-    return { args };
-  },
-  template: `
-    <URadio v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || getSlotsFragment()}
     </URadio>
   `,
 });
@@ -59,14 +47,14 @@ description.args = { name: "radio3", description: "description" };
 export const checked = DefaultTemplate.bind({});
 checked.args = { checked: true, name: "radio4" };
 
-export const slotFooter = SlotTemplate.bind({});
+export const slotFooter = DefaultTemplate.bind({});
 slotFooter.args = {
   name: "radio5",
   label: "radio",
   value: "radio",
   slotTemplate: `
     <template #footer>
-       <UBadge label="favourite" color="green" size="sm" />
+      <UBadge label="favourite" color="green" size="sm" />
     </template>
   `,
 };