vueless 0.0.253 → 0.0.255

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.253",
+  "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-calendar/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UCalendar from "../ui.form-calendar";
 
@@ -36,7 +36,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
       <UCalendar v-bind="args" v-model="value">
-        ${allSlotsFragment}
+        ${args.slotTemplate || getSlotsFragment()}
       </UCalendar>
 
       <div class="mt-4">
@@ -52,8 +52,8 @@ export const Range = DefaultTemplate.bind({});
 Range.args = {
   range: true,
   value: {
-    from: new Date(2022, 2),
-    to: new Date(2024, 2, 14, 12, 24, 14),
+    from: new Date(new Date().setDate(new Date().getDate() - new Date().getDay())),
+    to: new Date(new Date().setDate(new Date().getDate() + (6 - new Date().getDay()))),
   },
 };
 

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

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 import UColorPicker from "../ui.form-color-picker";
 import UCol from "../ui.container-col";
 
@@ -11,7 +11,7 @@ export default {
   component: UColorPicker,
   args: {
     label: "Label",
-    value: "",
+    modelValue: "",
   },
   argTypes: {
     ...getArgTypes(UColorPicker.name),
@@ -21,30 +21,34 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UColorPicker },
   setup() {
-    return { args };
+    const slots = getSlotNames(UColorPicker.name);
+
+    return { args, slots };
   },
   template: `
-    <UColorPicker v-bind="args" v-model="args.value"/>
+    <UColorPicker v-bind="args" v-model="args.modelValue">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UColorPicker>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCol, UColorPicker },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <UCol>
       <UColorPicker
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
+        v-for="(option, index) in options"
         :key="index"
-        :name="size"
-        v-model="args.value"
+        v-bind="args"
+        v-model="args.modelValue"
+        :[args.enum]="option"
+        :name="option"
       />
     </UCol>
   `,
@@ -53,8 +57,8 @@ 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" };
 
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Description" };

package/ui.form-date-picker/configs/default.config.js

@@ -15,6 +15,7 @@ export default /*tw*/ {
       },
       openDirectionY: {
         top: "bottom-full mt-0",
+        bottom: "top-full mb-0",
       },
     },
   },