vueless 0.0.254 → 0.0.255

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.254",
+  "version": "0.0.255",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button/index.stories.js

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

package/ui.button-link/index.stories.js

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

package/ui.button-toggle/index.stories.js

@@ -37,8 +37,8 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UToggle
-      v-model="value"
       v-bind="args"
+      v-model="value"
       :options="OPTIONS"
     >
       ${args.slotTemplate || getSlotsFragment()}
@@ -62,8 +62,8 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
       <UToggle
         v-for="(option, index) in options"
         :key="index"
-        v-model="value"
         v-bind="args"
+        v-model="value"
         :[args.enum]="option"
         :label="option"
         :options="[

package/ui.button-toggle-item/index.stories.js

@@ -28,8 +28,12 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UToggleItem v-bind="args" name="toggle" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+    <UToggleItem
+        v-bind="args"
+        v-model="args.modelValue"
+        name="toggle"
+      >
+        ${args.slotTemplate || getSlotsFragment()}
     </UToggleItem>
   `,
 });

package/ui.container-card/index.stories.js

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

package/ui.dropdown-button/index.stories.js

@@ -40,10 +40,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UDropdownButton
-      v-bind="args"
-      v-model="args.modelValue"
-    >
+    <UDropdownButton v-bind="args">
       ${args.slotTemplate || getSlotsFragment()}
     </UDropdownButton>
   `,
@@ -83,12 +80,12 @@ const VariantColorsTemplate = (args, { argTypes } = {}) => ({
     <UCol>
       <URow v-for="(variant, index) in variants" :key="index">
         <UDropdownButton
-          v-for="(color, idx) in colors"
+          v-for="(color, index) in colors"
+          :key="index"
           v-bind="args"
           :color="color"
           :variant="variant"
           :label="color"
-          :key="idx"
         />
       </URow>
     </UCol>

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UCheckbox from "../ui.form-checkbox";
 import UCheckboxGroup from "../ui.form-checkbox-group";
@@ -14,23 +14,23 @@ export default {
   component: UCheckbox,
   args: {
     label: "Label",
-    value: {},
   },
   argTypes: {
     ...getArgTypes(UCheckbox.name),
+    modelValue: { control: { type: "boolean" } },
   },
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UCheckbox },
+  components: { UCheckbox, UBadge },
   setup() {
     const slots = getSlotNames(UCheckbox.name);
 
     return { args, slots };
   },
   template: `
-    <UCheckbox v-bind="args" v-model="args.value">
-      ${allSlotsFragment}
+    <UCheckbox v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment()}
     </UCheckbox>
   `,
 });
@@ -89,48 +89,35 @@ const ValueTypesTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCheckbox, UCol },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <UCol gap="xl">
       <UCheckbox
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        v-model="args.value[size]"
-        :size="size"
-        :label="size"
+        :[args.enum]="option"
+        :label="option"
       />
     </UCol>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UCheckbox, UBadge },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UCheckbox v-bind="args" v-model="args.value" description="hello">
-      ${args.slotTemplate}
-    </UCheckbox>
-  `,
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const CustomValues = ValueTypesTemplate.bind({});
 CustomValues.args = {};
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
@@ -138,7 +125,7 @@ Disabled.args = { disabled: true };
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Some description" };
 
-export const slotFooter = SlotTemplate.bind({});
+export const slotFooter = DefaultTemplate.bind({});
 slotFooter.args = {
   slotTemplate: `
     <template #footer>

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

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UCheckboxGroup from "../ui.form-checkbox-group";
 import UCheckbox from "../ui.form-checkbox";
@@ -29,7 +29,9 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UCheckboxGroup, UCheckbox, UAlert, URow },
   setup() {
-    return { args };
+    const slots = getSlotNames(UCheckboxGroup.name);
+
+    return { args, slots };
   },
   data() {
     return {
@@ -39,9 +41,7 @@ const DefaultTemplate = (args) => ({
   template: `
     <URow class="!flex-col">
       <UCheckboxGroup v-bind="args" v-model="value">
-        <template v-for="(radio, index) in args.options" :key="index">
-          <UCheckbox v-bind="radio"/>
-        </template>
+        ${args.slotTemplate || getSlotsFragment()}
       </UCheckboxGroup>
 
       <URow>
@@ -53,25 +53,29 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const OptionsTemplate = (args) => ({
-  components: { UCheckboxGroup, UCheckbox, UAlert, URow },
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UCheckboxGroup, URow },
   setup() {
     return { args };
   },
   data() {
     return {
       value: args.value,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow class="!flex-col">
-      <UCheckboxGroup v-bind="args" v-model="value" :options="args.options" />
-
-      <URow>
-        <UAlert color="blue">
-          <p>Selected value: {{ value }}</p>
-        </UAlert>
-      </URow>
+      <UCheckboxGroup
+        v-for="(option, index) in options"
+        :key="option"
+        v-bind="args"
+        v-model="value"
+        :label="option"
+        :[args.enum]="option"
+        :options="args.options"
+        name="option"
+      />
     </URow>
   `,
 });
@@ -79,7 +83,11 @@ const OptionsTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {
   name: "Default",
-  isDefaultStory: true,
+  slotTemplate: `
+    <template v-for="(radio, index) in args.options" :key="index">
+      <UCheckbox v-bind="radio"/>
+    </template>
+  `,
   options: [
     { name: "Default", label: "String", value: "One" },
     { name: "Default", label: "Boolean", value: false },
@@ -97,7 +105,7 @@ Default.args = {
   ],
 };
 
-export const Options = OptionsTemplate.bind({});
+export const Options = DefaultTemplate.bind({});
 Options.args = {
   name: "Options",
   options: [
@@ -109,68 +117,14 @@ Options.args = {
   ],
 };
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UCheckboxGroup, URow },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      value: args.value,
-      colors: argTypes.color.options,
-    };
-  },
-  template: `
-    <URow class="!flex-col">
-      <UCheckboxGroup
-        v-bind="args"
-        v-for="color in colors"
-        :key="color"
-        :label="color"
-        :color="color"
-        :options="args.options"
-        name="color"
-        v-model="value"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UCheckboxGroup, URow },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      value: args.value,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow class="!flex-col">
-      <UCheckboxGroup
-        v-bind="args"
-        v-for="size in sizes"
-        :key="size"
-        :label="size"
-        :size="size"
-        :options="args.options"
-        name="size"
-        v-model="value"
-      />
-    </URow>
-  `,
-});
-
 export const disabled = DefaultTemplate.bind({});
 disabled.args = { name: "Disabled", disabled: true };
 
 export const error = DefaultTemplate.bind({});
 error.args = { name: "Error", error: "some error" };
 
-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-checkbox-multi-state/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UCheckboxMultiState from "../ui.form-checkbox-multi-state";
 import URow from "../ui.container-row";
@@ -11,7 +11,6 @@ export default {
   title: "Form Inputs & Controls / Checkbox Multistate",
   component: UCheckboxMultiState,
   args: {
-    modelValue: false,
     options: [
       { value: false, label: "empty", icon: "", description: "checkbox empty" },
       { value: true, label: "selected", icon: "check", description: "checkbox selected" },
@@ -20,36 +19,41 @@ export default {
   },
   argTypes: {
     ...getArgTypes(UCheckboxMultiState.name),
+    modelValue: { control: { type: "boolean" } },
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UCheckboxMultiState },
   setup() {
-    return { args };
+    const slots = getSlotNames(UCheckboxMultiState.name);
+
+    return { args, slots };
   },
   template: `
-    <UCheckboxMultiState v-bind="args" v-model="args.value" />
+    <UCheckboxMultiState v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UCheckboxMultiState>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCheckboxMultiState, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UCheckboxMultiState
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        v-model="args.value"
-        :label="size"
+        v-for="(option, index) in options"
         :key="index"
+        v-bind="args"
+        v-model="args.modelValue"
+        :[args.enum]="option"
+        :label="option"
       />
     </URow>
   `,
@@ -58,5 +62,5 @@ const SizesTemplate = (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" };

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

@@ -11,7 +11,7 @@ export default {
   component: UColorPicker,
   args: {
     label: "Label",
-    value: "",
+    modelValue: "",
   },
   argTypes: {
     ...getArgTypes(UColorPicker.name),
@@ -26,7 +26,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UColorPicker v-bind="args" v-model="args.value">
+    <UColorPicker v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment()}
     </UColorPicker>
   `,
@@ -46,7 +46,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
         v-for="(option, index) in options"
         :key="index"
         v-bind="args"
-        v-model="args.value"
+        v-model="args.modelValue"
         :[args.enum]="option"
         :name="option"
       />

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>