vueless 0.0.251 → 0.0.253

package/package.json

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

package/ui.button/configs/default.config.js

@@ -10,12 +10,12 @@ export default /*tw*/ {
     `,
     variants: {
       size: {
-        "2xs": "px-2 py-1 text-xs leading-tight gap-0.5",
-        xs: "px-3 py-1.5 text-xs leading-tight gap-0.5",
-        sm: "px-4 py-2 text-sm leading-tight gap-1",
-        md: "px-5 py-3 text-sm leading-tight gap-1",
-        lg: "px-6 py-3.5 text-base leading-tight gap-1.5",
-        xl: "px-7 py-4 text-base leading-tight gap-1.5",
+        "2xs": "px-2 py-1 text-xs gap-0.5",
+        xs: "px-3 py-1.5 text-xs gap-1",
+        sm: "px-4 py-2 text-sm gap-1.5",
+        md: "px-5 py-3 text-sm gap-1.5",
+        lg: "px-6 py-3.5 text-base gap-1.5",
+        xl: "px-7 py-4 text-base gap-2",
       },
       variant: {
         primary: `
@@ -134,11 +134,11 @@ export default /*tw*/ {
       },
       { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
       { iconLeft: true, size: "2xs", class: "pl-1" },
-      { iconLeft: true, size: "xs", class: "pl-1.5" },
-      { iconLeft: true, size: "sm", class: "pl-2" },
+      { iconLeft: true, size: "xs", class: "pl-2" },
+      { iconLeft: true, size: "sm", class: "pl-3" },
       { iconLeft: true, size: "md", class: "pl-4" },
-      { iconLeft: true, size: "lg", class: "pl-3.5" },
-      { iconLeft: true, size: "xl", class: "pl-4" },
+      { iconLeft: true, size: "lg", class: "pl-5" },
+      { iconLeft: true, size: "xl", class: "pl-6" },
       { iconRight: true, size: "2xs", class: "pr-1" },
       { iconRight: true, size: "xs", class: "pr-2" },
       { iconRight: true, size: "sm", class: "pr-3" },
@@ -154,6 +154,8 @@ export default /*tw*/ {
     ],
   },
   text: "whitespace-nowrap focus-visible:outline-none",
+  iconLeft: "{UIcon}",
+  iconRight: "{UIcon}",
   defaultVariants: {
     color: "brand",
     variant: "primary",

package/ui.button/index.vue

@@ -33,6 +33,7 @@
             :size="iconSize"
             :color="componentColor"
             internal
+            v-bind="iconLeftAttrs"
           />
         </slot>
       </div>
@@ -71,6 +72,7 @@
             :size="iconSize"
             :color="componentColor"
             internal
+            v-bind="iconRightAttrs"
           />
         </slot>
       </div>
@@ -234,7 +236,8 @@ const props = defineProps({
   },
 });
 
-const { buttonAttrs, loaderAttrs, textAttrs, hasSlotContent } = useAttrs(props);
+const { buttonAttrs, loaderAttrs, textAttrs, iconLeftAttrs, iconRightAttrs, hasSlotContent } =
+  useAttrs(props);
 
 const buttonRef = ref(null);
 
@@ -255,12 +258,12 @@ const loaderSize = computed(() => {
 
 const iconSize = computed(() => {
   const sizes = {
-    "2xs": "3xs",
-    xs: "2xs",
-    sm: "xs",
+    "2xs": "xs",
+    xs: "xs",
+    sm: "sm",
     md: "sm",
     lg: "md",
-    xl: "lg",
+    xl: "md",
   };
 
   return sizes[props.size];

package/ui.form-input/configs/default.config.js

@@ -3,6 +3,8 @@ export default /*tw*/ {
   inputWrapper: "flex relative w-full",
   rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-2 gap-1 rounded-dynamic rounded-l-none",
   leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-2 gap-1 rounded-dynamic rounded-r-none",
+  iconLeft: "{UIcon}",
+  iconRight: "{UIcon}",
   passwordIcon: "",
   passwordVisibleIconName: "visibility-fill",
   passwordHiddenIconName: "visibility_off-fill",

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

@@ -1,10 +1,9 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UInput from "../ui.form-input";
 import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
 import UCol from "../ui.container-col";
-import URow from "../ui.container-row";
 
 /**
  * The `UInput` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-input)
@@ -23,7 +22,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UInput },
+  components: { UInput, UIcon, UButton },
   setup() {
     const slots = getSlotNames(UInput.name);
 
@@ -31,81 +30,27 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UInput v-bind="args" v-model="args.modelValue">
-      ${allSlotsFragment}
-    </UInput>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UInput, UIcon, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UInput v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || getSlotsFragment()}
     </UInput>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UInput, URow },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <URow>
-      <UInput
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :key="index"
-      />
-    </URow>
-  `,
-});
-
-const ValidationRuleTemplate = (args, { argTypes } = {}) => ({
-  components: { UInput, URow },
-  setup() {
-    return {
-      args,
-      rules: argTypes.validationRule.options,
-    };
-  },
-  template: `
-    <URow>
-      <UInput
-        v-for="(rule, index) in rules"
-        v-bind="args"
-        :validationRule="rule"
-        :key="index"
-        :description="rule"
-      />
-    </URow>
-  `,
-});
-
-const LabelPlacementTemplate = (args) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UInput, UCol },
   setup() {
     return {
       args,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
-    <UCol gap="xl">
+    <UCol>
       <UInput
+        v-for="(option, index) in options"
         v-bind="args"
-        label-align="top"
-      />
-
-      <UInput
-        v-bind="args"
-        label-align="topInside"
+        :[args.enum]="option"
+        :label="option"
+        :key="index"
       />
     </UCol>
   `,
@@ -135,14 +80,14 @@ noAutocomplete.args = { noAutocomplete: true };
 export const typePassword = DefaultTemplate.bind({});
 typePassword.args = { type: "password" };
 
-export const labelPlacement = LabelPlacementTemplate.bind({});
-labelPlacement.args = {};
+export const labelPlacement = EnumVariantTemplate.bind({});
+labelPlacement.args = { enum: "labelAlign" };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const validationRules = ValidationRuleTemplate.bind({});
-validationRules.args = {};
+export const validationRules = EnumVariantTemplate.bind({});
+validationRules.args = { enum: "validationRule" };
 
 export const iconLeft = DefaultTemplate.bind({});
 iconLeft.args = {
@@ -154,7 +99,7 @@ iconRight.args = {
   iconRight: "star",
 };
 
-export const iconLeftSlot = SlotTemplate.bind({});
+export const iconLeftSlot = DefaultTemplate.bind({});
 iconLeftSlot.args = {
   slotTemplate: `
     <template #icon-left>
@@ -166,7 +111,7 @@ iconLeftSlot.args = {
   `,
 };
 
-export const iconRightSlot = SlotTemplate.bind({});
+export const iconRightSlot = DefaultTemplate.bind({});
 iconRightSlot.args = {
   slotTemplate: `
     <template #icon-right>
@@ -178,7 +123,7 @@ iconRightSlot.args = {
   `,
 };
 
-export const leftSlot = SlotTemplate.bind({});
+export const leftSlot = DefaultTemplate.bind({});
 leftSlot.args = {
   slotTemplate: `
     <template #left>
@@ -187,7 +132,7 @@ leftSlot.args = {
   `,
 };
 
-export const rightSlot = SlotTemplate.bind({});
+export const rightSlot = DefaultTemplate.bind({});
 rightSlot.args = {
   slotTemplate: `
     <template #right>

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

@@ -1,7 +1,7 @@
-import { getArgTypes, allSlotsFragment, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UInputFile from "../ui.form-input-file";
-import URow from "../ui.container-row";
+import UCol from "../ui.container-col";
 
 /**
  * The `UInputFile` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-input-file)
@@ -37,71 +37,29 @@ const DefaultTemplate = (args) => ({
       v-model="files"
       v-model:error="error"
     >
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UInputFile>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UInputFile },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      files: [],
-      error: args.error || "",
-    };
-  },
-  template: `
-    <UInputFile
-      v-bind="args"
-      v-model="files"
-      v-model:error="error"
-    >
-      ${args.slotTemplate}
-    </UInputFile>
-  `,
-});
-
-const LabelAlignTemplate = (args, { argTypes } = {}) => ({
-  components: { UInputFile, URow },
-  setup() {
-    return {
-      args,
-      alignOptions: argTypes.labelAlign.options,
-    };
-  },
-  template: `
-    <URow class="!flex-col" gap="xl">
-      <div v-for="(align, index) in alignOptions" :key="index">
-        <UInputFile
-          :label-align="align"
-          v-bind="args"
-          :label="align"
-        />
-      </div>
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UInputFile, URow },
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UInputFile, UCol },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
-    <URow>
-      <div v-for="(size, index) in sizes" :key="index">
+    <UCol gap="xl">
+      <div v-for="(option, index) in options" :key="index">
         <UInputFile
-          :size="size"
+          :[args.enum]="option"
           v-bind="args"
+          :label="option"
         />
       </div>
-    </URow>
+    </UCol>
   `,
 });
 
@@ -117,17 +75,17 @@ allowedFileTypes.args = { allowedFileTypes: ["png", "jpeg"], label: "Allow only
 export const error = DefaultTemplate.bind({});
 error.args = { error: "some error" };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const labelAlign = LabelAlignTemplate.bind({});
-labelAlign.args = {};
+export const labelAlign = EnumVariantTemplate.bind({});
+labelAlign.args = { enum: "labelAlign" };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
-      🥸
+      🤘
     </template>
   `,
 };

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

@@ -1,8 +1,7 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UInputMoney from "../ui.form-input-money";
-import URow from "../ui.container-row";
-// import UCol from "../ui.container-col";
+import UCol from "../ui.container-col";
 
 /**
  * The `UInputMoney` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.form-input-money)
@@ -32,67 +31,43 @@ const DefaultTemplate = (args) => ({
       v-bind="args"
       v-model="args.inputValue"
     >
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UInputMoney>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UInputMoney, URow },
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UInputMoney, UCol },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
-    <URow>
+    <UCol>
       <UInputMoney
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         v-bind="args"
-        :size="size"
+        :[args.enum]="option"
+        :label="option"
         :key="index"
       />
-    </URow>
+    </UCol>
   `,
 });
 
-// TODO: Rewrite to labelAlign
-// const LabelPlacementTemplate = (args) => ({
-//   components: { UInputMoney, UCol },
-//   setup() {
-//     return {
-//       args,
-//     };
-//   },
-//   template: `
-//     <UCol gap="xl">
-//       <UInputMoney
-//         v-bind="args"
-//         :label-outside="true"
-//         label="top"
-//       />
-//
-//       <UInputMoney
-//         v-bind="args"
-//         :label-outside="false"
-//         label="topInside"
-//       />
-//     </UCol>
-//   `,
-// });
-
 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 symbol = DefaultTemplate.bind({});
 symbol.args = { symbol: "€" };
 
-// export const labelOutside = LabelPlacementTemplate.bind({});
-// labelOutside.args = {};
+export const labelAlign = EnumVariantTemplate.bind({});
+labelAlign.args = { enum: "labelAlign" };
 
 export const placeholder = DefaultTemplate.bind({});
 placeholder.args = { placeholder: "Placeholder" };

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

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UInputNumber from "../ui.form-input-number";
 import UCol from "../ui.container-col";
@@ -19,7 +19,9 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UInputNumber },
   setup() {
-    return { args };
+    const slots = getSlotNames(UInputNumber.name);
+
+    return { args, slots };
   },
   data() {
     return {
@@ -27,16 +29,18 @@ const DefaultTemplate = (args) => ({
     };
   },
   template: `
-    <UInputNumber v-model="count" v-bind="args" />
+    <UInputNumber v-model="count" v-bind="args">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UInputNumber>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UInputNumber, UCol },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   data() {
@@ -51,9 +55,9 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
   template: `
     <UCol gap="xl">
       <UInputNumber
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         v-bind="args"
-        :size="size"
+        :[args.enum]="option"
         :key="index"
         :label="sizeValues[index].label"
         v-model="sizeValues[index].count"
@@ -79,8 +83,9 @@ label.args = {
   label: "Year",
 };
 
-export const sizes = SizesTemplate.bind({});
+export const sizes = EnumVariantTemplate.bind({});
 sizes.args = {
+  enum: "size",
   value: 1,
   step: 1,
   min: 1,

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UInputRating from "../ui.form-input-rating";
 import URow from "../ui.container-row";
@@ -31,42 +31,27 @@ const DefaultTemplate = (args) => ({
       v-bind="args"
       v-model="args.modelValue"
     >
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UInputRating>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UInputRating },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UInputRating
-      v-bind="args"
-      v-model="args.modelValue"
-    >
-      ${args.slotTemplate}
-    </UInputRating>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UInputRating, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow gap="2xl">
       <UInputRating
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         :key="index"
         v-bind="args"
         v-model="args.modelValue"
-        :size="size"
+        :[args.enum]="option"
       />
     </URow>
   `,
@@ -75,8 +60,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 starAmount = DefaultTemplate.bind({});
 starAmount.args = { value: 4, stars: 7 };
@@ -96,7 +81,7 @@ withCounter.args = { counter: true };
 export const withTotal = DefaultTemplate.bind({});
 withTotal.args = { total: 250 };
 
-export const slotCounter = SlotTemplate.bind({});
+export const slotCounter = DefaultTemplate.bind({});
 slotCounter.args = {
   slotTemplate: `
     <template #counter="{counter}">
@@ -105,7 +90,7 @@ slotCounter.args = {
   `,
 };
 
-export const slotTotal = SlotTemplate.bind({});
+export const slotTotal = DefaultTemplate.bind({});
 slotTotal.args = {
   total: 250,
   slotTemplate: `

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

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UInputSearch from "../ui.form-input-search";
 import UButton from "../ui.button";
@@ -17,51 +17,34 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UInputSearch },
+  components: { UInputSearch, UButton },
   setup() {
     const slots = getSlotNames(UInputSearch.name);
 
-    return {
-      args,
-      slots,
-    };
-  },
-  template: `
-    <UInputSearch v-bind="args" v-model="args.modelValue">
-      ${allSlotsFragment}
-    </UInputSearch>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { UInputSearch, UButton },
-  setup() {
-    return {
-      args,
-    };
+    return { args, slots };
   },
   template: `
     <UInputSearch v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || ""}
+      ${args.slotTemplate || getSlotsFragment()}
     </UInputSearch>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UInputSearch, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UInputSearch
-        v-for="(size, index) in sizes"
+        v-for="(option, index) in options"
         v-bind="args"
         v-model="args.modelValue"
-        :size="size"
+        :[args.enum]="option"
         :key="index"
       >
       </UInputSearch>
@@ -75,15 +58,15 @@ Default.args = {};
 export const searchButton = DefaultTemplate.bind({});
 searchButton.args = { searchButtonLabel: "Search" };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
       <UButton
-        label="filter"
+        label="Filter"
         variant="thirdary"
         filled
         no-ring

package/ui.form-select/configs/default.config.js

@@ -64,8 +64,10 @@ export default /*tw*/ {
       { size: "lg", multiple: true, class: "text-base" },
     ],
   },
-  leftIcon: "pr-3 flex items-center",
-  rightIcon: "pl-3 flex items-center",
+  leftIconWrapper: "pr-3 flex items-center",
+  rightIconWrapper: "pl-3 flex items-center",
+  iconLeft: "{UIcon}",
+  iconRight: "{UIcon}",
   beforeCaret: "",
   afterCaret: "mr-3",
   caret: {

package/ui.form-select/index.vue

@@ -78,7 +78,7 @@
         <span
           v-if="hasSlotContent($slots['icon-left']) || iconLeft"
           ref="leftSlotWrapperRef"
-          v-bind="leftIconAttrs"
+          v-bind="leftIconWrapperAttrs"
         >
           <!--
             @slot Use it to add icon before option.
@@ -86,7 +86,13 @@
             @binding {string} icon-size
           -->
           <slot name="icon-left" :icon-name="iconLeft" :icon-size="iconSize">
-            <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" internal />
+            <UIcon
+              v-if="iconLeft"
+              :name="iconLeft"
+              :size="iconSize"
+              internal
+              v-bind="iconLeftAttrs"
+            />
           </slot>
         </span>
 
@@ -190,14 +196,23 @@
         <!-- @slot Use it to add something after input. -->
         <slot name="right" />
 
-        <span v-if="hasSlotContent($slots['icon-right']) || iconRight" v-bind="rightIconAttrs">
+        <span
+          v-if="hasSlotContent($slots['icon-right']) || iconRight"
+          v-bind="rightIconWrapperAttrs"
+        >
           <!--
             @slot Use it to add icon after option.
             @binding {string} icon-name
             @binding {string} icon-size
           -->
           <slot name="icon-right" :icon-name="iconRight" :icon-size="iconSize">
-            <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" internal />
+            <UIcon
+              v-if="iconRight"
+              :name="iconRight"
+              :size="iconSize"
+              internal
+              v-bind="iconRightAttrs"
+            />
           </slot>
         </span>
       </div>
@@ -565,8 +580,10 @@ const {
   labelAttrs,
   wrapperAttrs,
   innerWrapperAttrs,
-  leftIconAttrs,
-  rightIconAttrs,
+  leftIconWrapperAttrs,
+  rightIconWrapperAttrs,
+  iconLeftAttrs,
+  iconRightAttrs,
   beforeCaretAttrs,
   afterCaretAttrs,
   toggleAttrs,

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

@@ -1,8 +1,7 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UTextarea from "../ui.form-textarea";
 import UIcon from "../ui.image-icon";
-import URow from "../ui.container-row";
 import UCol from "../ui.container-col";
 
 /**
@@ -22,7 +21,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UTextarea },
+  components: { UTextarea, UIcon },
   setup() {
     const slots = getSlotNames(UTextarea.name);
 
@@ -32,65 +31,28 @@ const DefaultTemplate = (args) => ({
     <UTextarea
       v-bind="args"
     >
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UTextarea>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UTextarea, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UTextarea
-      v-bind="args"
-    >
-      ${args.slotTemplate}
-    </UTextarea>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UTextarea, URow },
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UTextarea, UCol },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
-    <URow>
-      <div class="w-1/3" v-for="(size, index) in sizes" :key="index">
+    <UCol>
+      <div class="w-1/3" v-for="(option, index) in options" :key="index">
         <UTextarea
           v-bind="args"
-          :size="size"
+          :[args.enum]="option"
+          :label="option"
         />
       </div>
-    </URow>
-  `,
-});
-
-const LabelPlacementTemplate = (args) => ({
-  components: { UTextarea, UCol },
-  setup() {
-    return {
-      args,
-    };
-  },
-  template: `
-    <UCol gap="xl">
-      <UTextarea
-        v-bind="args"
-        label-align="top"
-        label="top"
-      />
-
-      <UTextarea
-        v-bind="args"
-        label-align="topInside"
-        label="topInside"
-      />
     </UCol>
   `,
 });
@@ -98,8 +60,8 @@ const LabelPlacementTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const labelPlacement = LabelPlacementTemplate.bind({});
-labelPlacement.args = {};
+export const labelPlacement = EnumVariantTemplate.bind({});
+labelPlacement.args = { enum: "labelAlign" };
 
 export const placeholder = DefaultTemplate.bind({});
 placeholder.args = { placeholder: "some placeholder text" };
@@ -122,10 +84,10 @@ readonly.args = { readonly: true, value: "some value for read" };
 export const noAutocomplete = DefaultTemplate.bind({});
 noAutocomplete.args = { noAutocomplete: true };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size" };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
@@ -137,7 +99,7 @@ slotLeft.args = {
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
+export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #right>

package/web-types.json

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