vueless 0.0.217 → 0.0.219

package/ui.form-radio/index.vue

@@ -91,7 +91,7 @@ const props = defineProps({
 
   /**
    * Radio size.
-   * @values xs, sm, md, lg, xl
+   * @values sm, md, lg
    */
   size: {
     type: String,
@@ -108,8 +108,8 @@ const props = defineProps({
   },
 
   /**
-   * Set label placement related from the default slot.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * Label placement.
+   * @values left, right
    */
   labelAlign: {
     type: String,

package/ui.form-radio-group/configs/default.config.js

@@ -5,10 +5,9 @@ export default /*tw*/ {
     base: "flex flex-col",
     variants: {
       size: {
-        sm: "gap-2",
-        md: "gap-3",
-        lg: "gap-4",
-        xl: "gap-5",
+        sm: "gap-1.5 mt-1",
+        md: "gap-2 mt-1.5",
+        lg: "gap-2.5 mt-2",
       },
     },
   },

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

@@ -38,21 +38,13 @@ const DefaultTemplate = (args) => ({
     };
   },
   template: `
-    <UGroup>
+    <UGroup gap="2xl">
       <URadioGroup v-bind="args" v-model="value">
-        <template v-for="(radio,index) in args.radios" :key="index">
-          <URadio
-            v-bind="radio"
-          >
-          </URadio>
-        </template>
+        <URadio v-for="(radio, index) in args.radios" :key="index" v-bind="radio" />
       </URadioGroup>
-
-      <URow>
-        <UAlert color="green" size="sm">
-          <p>Selected value: <b>{{ value }}</b></p>
-        </UAlert>
-      </URow>
+      <UAlert color="gray" size="xs">
+        <code>Selected value: <b>{{ value }}</b></code>
+      </UAlert>
     </UGroup>
   `,
 });
@@ -100,7 +92,7 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
         :label="color"
         :color="color"
         :options="args.radios"
-        name="color"
+        :name="color"
         v-model="value"
       />
     </URow>
@@ -127,7 +119,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
         :label="size"
         :size="size"
         :options="args.radios"
-        name="size"
+        :name="size"
         v-model="value"
       />
     </URow>

package/ui.form-radio-group/index.vue

@@ -84,7 +84,7 @@ const props = defineProps({
 
   /**
    * Radio size.
-   * @values xs, sm, md, lg, xl
+   * @values sm, md, lg
    */
   size: {
     type: String,

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

@@ -1,20 +1,15 @@
 export default /*tw*/ {
-  label: "{ULabel} w-full relative",
+  label: "{ULabel}",
   labelWrapperTop: "group/top", // applies when an open direction is top
   labelWrapperActive: "group/active",
   wrapper: {
     base: `
-      pb-2 pt-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
+      py-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-lg border border-gray-300 bg-white
       hover:border-gray-400 hover:transition hover:focus-within:border-brand-500
       focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15] focus-within:outline-none
     `,
     variants: {
-      size: {
-        sm: "pt-2 pb-1.5",
-        md: "pt-2.5 pb-1.5",
-        lg: "pt-3 pb-2",
-      },
       error: {
         true: `
           border-red-300 hover:border-red-300
@@ -36,7 +31,7 @@ export default /*tw*/ {
   },
   wrapperActive: "z-[inherit]", // applies when select active
   innerWrapper: {
-    base: "flex px-4 min-h-full w-full overflow-hidden justify-between",
+    base: "px-3 flex min-h-full w-full overflow-hidden justify-between",
     variants: {
       multiple: {
         true: "grid grid-cols-1 grid-rows-[minmax(0, 1fr)_min-content]",
@@ -51,9 +46,9 @@ export default /*tw*/ {
       `,
     variants: {
       size: {
-        sm: "text-sm min-h-4",
-        md: "text-base min-h-5",
-        lg: "text-lg min-h-6",
+        sm: "text-xs min-h-4",
+        md: "text-sm min-h-5",
+        lg: "text-base min-h-6",
       },
       disabled: {
         true: "bg-gray-100",
@@ -63,9 +58,9 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { size: "sm", multiple: true, class: "text-sm" },
-      { size: "md", multiple: true, class: "text-base" },
-      { size: "lg", multiple: true, class: "text-lg" },
+      { size: "sm", multiple: true, class: "text-xs" },
+      { size: "md", multiple: true, class: "text-sm" },
+      { size: "lg", multiple: true, class: "text-base" },
     ],
   },
   leftIcon: "pr-3 flex items-center",
@@ -90,12 +85,11 @@ export default /*tw*/ {
   clearMultipleIcon: "{UIcon}",
   clearMultipleIconName: "close_small",
   clearMultipleTextAll: {
-    // TODO: clearMultiple is better
     base: "cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:text-gray-500 transition",
     compoundVariants: [
-      { size: "sm", class: "text-sm" },
-      { size: "md", class: "text-base" },
-      { size: "lg", class: "text-lg" },
+      { size: "sm", class: "text-xs" },
+      { size: "md", class: "text-sm" },
+      { size: "lg", class: "text-base" },
     ],
   },
   search: "flex w-fit",
@@ -107,9 +101,9 @@ export default /*tw*/ {
       `,
     variants: {
       size: {
-        sm: "text-sm placeholder:text-sm",
-        md: "text-base placeholder:text-base",
-        lg: "text-lg placeholder:text-lg",
+        sm: "text-xs placeholder:text-xs",
+        md: "text-sm placeholder:text-sm",
+        lg: "text-base placeholder:text-base",
       },
     },
   },

package/ui.form-select/index.vue

@@ -85,7 +85,7 @@
             @binding {string} icon-size
           -->
           <slot name="icon-left" :icon-name="iconLeft" :icon-size="iconSize">
-            <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" />
+            <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" internal />
           </slot>
         </span>
 
@@ -196,7 +196,7 @@
             @binding {string} icon-size
           -->
           <slot name="icon-right" :icon-name="iconRight" :icon-size="iconSize">
-            <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" />
+            <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" internal />
           </slot>
         </span>
       </div>
@@ -303,7 +303,7 @@ const props = defineProps({
 
   /**
    * Set label placement related from the default slot.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * @values top, topInside, topWithDesc, left, right
    */
   labelAlign: {
     type: String,
@@ -588,7 +588,7 @@ const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props
 const iconSize = computed(() => {
   const sizes = {
     sm: "sm",
-    md: "md",
+    md: "sm",
     lg: "md",
   };
 

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

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  label: "{ULabel} flex items-start",
+  label: "{ULabel}",
   wrapper: {
     base: `
       transition duration-300
@@ -12,15 +12,15 @@ export default /*tw*/ {
         false: "bg-gray-300 ring-gray-700 hover:bg-gray-400 active:bg-gray-500",
       },
       size: {
-        sm: "w-8",
-        md: "w-10",
-        lg: "w-12",
+        sm: "w-6",
+        md: "w-8",
+        lg: "w-10",
       },
     },
     compoundVariants: [
-      { toggleLabel: true, size: "sm", class: "w-12" },
-      { toggleLabel: true, size: "md", class: "w-14" },
-      { toggleLabel: true, size: "lg", class: "w-16" },
+      { toggleLabel: true, size: "sm", class: "w-10" },
+      { toggleLabel: true, size: "md", class: "w-12" },
+      { toggleLabel: true, size: "lg", class: "w-14" },
       { disabled: true, checked: true, class: "bg-opacity-50 pointer-events-none" },
       { disabled: true, checked: false, class: "bg-opacity-50 pointer-events-none" },
       { color: "grayscale", checked: true, class: "bg-gray-800 ring-gray-800" },
@@ -31,15 +31,15 @@ export default /*tw*/ {
     base: "transition duration-300 rounded-full bg-white flex items-center justify-center",
     variants: {
       size: {
-        sm: "size-4",
-        md: "size-5",
-        lg: "size-6",
+        sm: "size-3",
+        md: "size-4",
+        lg: "size-5",
       },
     },
     compoundVariants: [
-      { checked: true, size: "sm", class: "ml-[calc(100%-1rem)]" },
-      { checked: true, size: "md", class: "ml-[calc(100%-1.25rem)]" },
-      { checked: true, size: "lg", class: "ml-[calc(100%-1.5rem)]" },
+      { checked: true, size: "sm", class: "ml-[calc(100%-0.75rem)]" },
+      { checked: true, size: "md", class: "ml-[calc(100%-1rem)]" },
+      { checked: true, size: "lg", class: "ml-[calc(100%-1.25rem)]" },
     ],
   },
   icon: "{UIcon}",
@@ -62,7 +62,7 @@ export default /*tw*/ {
   defaultVariants: {
     color: "brand",
     size: "md",
-    labelAlign: "left",
+    labelAlign: "right",
     disabled: false,
     toggleIcon: false,
     toggleLabel: false,

package/ui.form-switch/index.vue

@@ -64,7 +64,7 @@ const props = defineProps({
 
   /**
    * Label alignment.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * @values top, left, right
    */
   labelAlign: {
     type: String,

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

@@ -1,13 +1,12 @@
 export default /*tw*/ {
-  label: "{ULabel} relative w-full",
+  label: "{ULabel}",
   leftSlot: "flex items-center justify-center h-full w-11 absolute left-0",
   rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
   textareaWrapper: {
     base: `
-      transition focus-within:outline-none
-      rounded-lg border border-solid border-gray-300 ring-0 cursor-text bg-white pr-4
-      hover:border-gray-400 pl-4 hover:focus-within:border-gray-500
-      focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
+      px-3 py-2 rounded-md border border-gray-300 cursor-text bg-white transition
+      hover:border-gray-400 hover:focus-within:border-gray-500
+      focus-within:outline-none focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
     `,
     variants: {
       error: {
@@ -23,16 +22,12 @@ export default /*tw*/ {
       readonly: {
         true: "ring-0 border-gray-300 focus-within:ring-0 focus-within:border-brand-300",
       },
-      size: {
-        sm: "pt-2 pb-2",
-        md: "pt-2.5 pb-2.5",
-        lg: "pt-3 pb-3",
-      },
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, class: "pt-5 pb-1.5" },
-      { labelAlign: "topInside", label: true, class: "pt-6 pb-1.5" },
-      { labelAlign: "topInside", label: true, class: "pt-7 pb-2" },
+      { labelAlign: "topInside", label: true, class: "rounded-lg" },
+      { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },
+      { labelAlign: "topInside", label: true, size: "md", class: "pt-6" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },
     ],
   },
   textarea: {
@@ -45,16 +40,16 @@ export default /*tw*/ {
     variants: {
       size: {
         sm: "text-xs placeholder:text-xs",
-        md: "text-base placeholder:text-base",
-        lg: "text-lg placeholder:text-lg",
+        md: "text-sm placeholder:text-sm",
+        lg: "text-base placeholder:text-base",
       },
     },
   },
   defaultVariants: {
+    rows: "2",
     size: "md",
     type: "text",
     inputmode: "text",
-    rows: "2",
     labelAlign: "topInside",
     error: false,
     disabled: false,

package/ui.form-textarea/index.vue

@@ -97,7 +97,7 @@ const props = defineProps({
 
   /**
    * Set label placement related from the default slot.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * @values top, topInside, topWithDesc, left, right
    */
   labelAlign: {
     type: String,

package/ui.image-icon/configs/default.config.js

@@ -55,17 +55,17 @@ export default /*tw*/ {
   icon: {
     variants: {
       size: {
-        "3xs": "h-3 w-3",
-        "2xs": "h-3.5 w-3.5",
-        xs: " h-4 w-4",
-        sm: "h-5 w-5",
-        md: "h-6 w-6",
-        lg: "h-8 w-8",
-        xl: "h-10 w-10",
-        "2xl": "h-12 w-12",
-        "3xl": "h-14 w-14",
-        "4xl": "h-16 w-16",
-        "5xl": "h-20 w-20",
+        "3xs": "size-3",
+        "2xs": "size-3.5",
+        xs: "size-4",
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-8",
+        xl: "size-10",
+        "2xl": "size-12",
+        "3xl": "size-14",
+        "4xl": "size-16",
+        "5xl": "size-20",
       },
     },
   },

package/ui.text-badge/configs/default.config.js

@@ -8,7 +8,7 @@ export default /*tw*/ {
         thirdary: "text-{color}-500 border-transparent",
       },
       size: {
-        sm: "p-0.5 px-2 text-2xs",
+        sm: "px-2 py-1 text-2xs",
         md: "px-2 py-1 text-xs",
         lg: "px-3 py-1.5 text-sm",
       },
@@ -31,9 +31,9 @@ export default /*tw*/ {
     base: "flex items-center",
     variants: {
       size: {
-        sm: "space-x-1",
-        md: "space-x-1.5",
-        lg: "space-x-2",
+        sm: "space-x-0.5",
+        md: "space-x-1",
+        lg: "space-x-1.5",
       },
     },
   },

package/ui.text-block/configs/default.config.js

@@ -12,10 +12,9 @@ export default /*tw*/ {
     `,
     variants: {
       size: {
-        xs: "text-xs space-y-2",
-        sm: "text-sm space-y-3",
-        md: "text-base space-y-4",
-        lg: "text-lg space-y-5",
+        sm: "text-xs space-y-2",
+        md: "text-sm space-y-3",
+        lg: "text-base space-y-4",
       },
       align: {
         left: "text-left",

package/ui.text-block/index.vue

@@ -27,7 +27,7 @@ const props = defineProps({
 
   /**
    * Text size.
-   * @values xs, sm, md, lg
+   * @values sm, md, lg
    */
   size: {
     type: String,

package/ui.text-empty/configs/default.config.js

@@ -1,26 +1,26 @@
 export default /*tw*/ {
   wrapper: "flex flex-col items-center justify-center size-full",
-  header: "mb-4 flex justify-center",
-  icon: "{UIcon}",
-  iconName: "emoji_food_beverage",
-  footer: "mt-4 flex justify-center",
-  title: {
-    base: "mb-2 font-medium text-center",
+  header: {
+    base: "flex justify-center",
     variants: {
       size: {
-        sm: "text-base",
-        md: "text-lg",
-        lg: "text-xl",
+        sm: "mb-4",
+        md: "mb-5",
+        lg: "mb-6",
       },
     },
   },
+  icon: "{UIcon}",
+  iconName: "emoji_food_beverage",
+  footer: "mt-4 flex justify-center",
+  title: "{UHeader}",
   description: {
     base: "text-center",
     variants: {
       size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
       },
     },
   },

package/ui.text-empty/index.vue

@@ -16,12 +16,8 @@
 
     <!-- @slot Use it to add something inside. -->
     <slot>
-      <div v-if="title" v-bind="titleAttrs">
-        {{ title }}
-      </div>
-      <div v-if="description" v-bind="descriptionAttrs">
-        {{ description }}
-      </div>
+      <UHeader v-if="title" :label="title" :size="titleSize" v-bind="titleAttrs" />
+      <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
     </slot>
 
     <div v-bind="footerAttrs">
@@ -35,6 +31,7 @@
 import { computed } from "vue";
 
 import UIcon from "../ui.image-icon";
+import UHeader from "../ui.text-header";
 import UIService from "../service.ui";
 
 import { UEmpty } from "./constants";
@@ -92,9 +89,19 @@ const { config, titleAttrs, descriptionAttrs, wrapperAttrs, headerAttrs, footerA
 
 const iconSize = computed(() => {
   const sizes = {
-    sm: "xl",
-    md: "2xl",
-    lg: "3xl",
+    sm: "2xl",
+    md: "3xl",
+    lg: "4xl",
+  };
+
+  return sizes[props.size];
+});
+
+const titleSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
   };
 
   return sizes[props.size];

package/ui.text-file/configs/default.config.js

@@ -1,6 +1,15 @@
 export default /*tw*/ {
   file: "{UFile}",
-  info: "flex items-center gap-2 ",
+  info: {
+    base: "flex items-center",
+    variants: {
+      size: {
+        sm: "gap-1",
+        md: "gap-1.5",
+        lg: "gap-2",
+      },
+    },
+  },
   icon: "{UIcon}",
   iconName: "description",
   image: "rounded-sm max-w-7",
@@ -11,9 +20,9 @@ export default /*tw*/ {
         true: "underline decoration-dashed underline-offset-4",
       },
       size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
       },
     },
   },

package/ui.text-file/index.vue

@@ -11,7 +11,7 @@
           internal
           interactive
           color="gray"
-          :size="size"
+          :size="iconSize"
           :name="config.iconName"
           v-bind="iconAttrs"
           @focus="onFocus"
@@ -27,7 +27,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import ULink from "../ui.button-link";
 import UIcon from "../ui.image-icon";
@@ -107,6 +107,16 @@ const { config, fileAttrs, infoAttrs, iconAttrs, labelAttrs, imageAttrs } = useA
   focus,
 });
 
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
+  };
+
+  return sizes[props.size];
+});
+
 function onFocus() {
   focus.value = true;
 }

package/ui.text-files/configs/default.config.js

@@ -1,16 +1,9 @@
 export default /*tw*/ {
-  label: "block text-sm font-normal text-gray-500",
-  body: {
-    base: "flex gap-4 flex-col",
-    variants: {
-      label: {
-        true: "mt-4",
-      },
-    },
-  },
+  label: "{ULabel}",
+  body: "flex flex-col gap-1",
   file: "{UFile} block",
   defaultVariants: {
-    placement: "topInside",
+    placement: "top",
     size: "md",
   },
 };

package/ui.text-files/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ULabel :label="label" :description="description" v-bind="labelAttrs">
+  <ULabel :label="label" :description="description" :size="size" v-bind="labelAttrs">
     <div v-bind="bodyAttrs">
       <slot>
         <UFile

package/ui.text-money/configs/default.config.js

@@ -23,14 +23,13 @@ export default /*tw*/ {
   sum: {
     variants: {
       size: {
-        xs: "text-xs",
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
-        xl: "text-xl",
-        "2xl": "text-2xl",
-        "3xl": "text-3xl",
-        "4xl": "text-4xl",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+        xl: "text-lg",
+        "2xl": "text-xl",
+        "3xl": "text-2xl",
+        "4xl": "text-3xl",
       },
       planned: {
         true: "opacity-75 before:content-['('] after:content-[')']",

package/ui.text-money/index.stories.js

@@ -243,10 +243,7 @@ export const slotLeft = SlotTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
-      <UIcon
-        :src="icons.Debit"
-        size="xs"
-      />
+      <UIcon :src="icons.Debit" size="3xs" />
     </template>
   `,
 };
@@ -255,11 +252,7 @@ export const slotRight = SlotTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #right>
-      <UIcon
-        :src="icons.Credit"
-        size="xs"
-        color="gray"
-      />
+      <UIcon :src="icons.Credit" size="3xs" />
     </template>
   `,
 };