vueless 0.0.253 → 0.0.254

package/package.json

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

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-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";
 
@@ -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.value">
+      ${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-bind="args"
         v-model="args.value"
+        :[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",
       },
     },
   },

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";
@@ -27,7 +27,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UDatePicker },
+  components: { UDatePicker, UIcon },
   setup() {
     const slots = getSlotNames(UDatePicker.name);
 
@@ -40,7 +40,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDatePicker v-bind="args" v-model="value">
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UDatePicker>
 
     <div class="mt-4">
@@ -49,24 +49,23 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-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 +82,44 @@ const OpenDirectionTemplate = (args) => ({
       <UDatePicker
         class="w-full"
         open-direction-y="top"
+        open-direction-x="left"
         v-bind="args"
         v-model="args.value"
+        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"
+        label="Top Right"
       />
       <UDatePicker
         class="w-full"
         open-direction-y="bottom"
+        open-direction-x="left"
         v-bind="args"
         v-model="args.value"
+        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"
+        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() };
 
-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 = {};
@@ -156,32 +149,29 @@ MinMax.args = {
   value: 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-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>
   `,
 };

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";
@@ -13,24 +13,28 @@ export default {
   id: "3160",
   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" },
-    ],
-  },
+  args: {},
   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 };
+    const slots = getSlotNames(URadioGroup.name);
+
+    const radios = args.radios ? args.radios : defaultRadios;
+
+    return { args, slots, radios };
   },
   data() {
     return {
@@ -40,7 +44,13 @@ const DefaultTemplate = (args) => ({
   template: `
     <UCol gap="2xl">
       <URadioGroup v-bind="args" v-model="value">
-        <URadio v-for="(radio, index) in args.radios" :key="index" v-bind="radio" />
+        <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>
@@ -49,78 +59,33 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-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() {
+    const radios = defaultRadios;
+
     return {
-      value: args.value,
-      colors: argTypes.color.options,
+      args,
+      options: argTypes[args.enum].options,
+      radios,
     };
   },
-  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 SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { URadioGroup, URow },
-  setup() {
-    return { args };
-  },
   data() {
     return {
       value: args.value,
-      sizes: argTypes.size.options,
     };
   },
   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"
+        :[args.enum]="option"
+        :label="option"
+        :options="radios"
+        :name="option"
       />
     </URow>
   `,
@@ -129,30 +94,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/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.253",
+  "version": "0.0.254",
   "contributions": {
     "html": {
       "description-markup": "markdown",