vueless 0.0.217 → 0.0.218

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

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  label: "{ULabel} relative w-full",
+  label: "{ULabel}",
   inputWrapper: "flex relative w-full",
   rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-3 rounded-r-lg rounded-l-none",
   leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-3 rounded-l-lg rounded-r-none",
@@ -8,7 +8,8 @@ export default /*tw*/ {
   passwordHiddenIconName: "visibility_off-fill",
   block: {
     base: `
-      rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex transition
+      w-full bg-white !opacity-100 relative flex transition
+      rounded-md border border-solid border-gray-300
       hover:border-gray-400 hover:focus-within:border-brand-500
       focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15]
     `,
@@ -21,46 +22,50 @@ export default /*tw*/ {
       },
       error: {
         true: `
-          border-red-300
+          hover:bg-red-300 border-red-300
           hover:border-red-400 hover:focus-within:border-red-500
           focus-within:border-red-500 focus-within:ring-red-100
         `,
       },
     },
+    compoundVariants: [{ labelAlign: "topInside", label: true, class: "rounded-lg" }],
   },
   input: {
     base: `
-      block w-full pb-2 px-4 font-normal leading-none text-gray-900 placeholder:font-normal placeholder-gray-400
-      transition bg-white border-none border-gray-300 rounded-lg shadow-none
+      block w-full py-2 px-3 font-normal leading-none text-gray-900
+      placeholder:font-normal placeholder-gray-400
+      transition bg-white border-none border-gray-300 rounded-md shadow-none
       focus:outline-none focus:ring-0 disabled:opacity-50
       disabled:cursor-not-allowed disabled:text-gray-900 disabled:border-gray-100
       read-only:border-gray-300 read-only:ring-0
     `,
     variants: {
       size: {
-        sm: "pt-2 pb-2 text-sm placeholder:text-sm placeholder:font-normal",
-        md: "pt-2.5 pb-2.5 text-base placeholder:text-base placeholder:font-normal",
-        lg: "pt-3 pb-3 text-lg placeholder:text-lg placeholder:font-normal",
+        sm: "text-xs placeholder:text-xs placeholder:font-normal",
+        md: "text-sm placeholder:text-sm placeholder:font-normal",
+        lg: "text-base placeholder:text-base placeholder:font-normal",
       },
-      error: `
-        border-red-300 hover:border-red-400 focus:border-red-500 focus:ring-red-100
+      error: {
+        true: `
+        bg-red-50 border-red-900 hover:border-red-400 focus:border-red-500 focus:ring-red-100
         focus-within:border-red-500 focus-within:ring-red-100
       `,
+      },
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, size: "sm", class: "pt-5 pb-1.5" },
-      { labelAlign: "topInside", label: true, size: "md", class: "pt-6 pb-1.5" },
-      { labelAlign: "topInside", label: true, size: "lg", 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" },
     ],
   },
   defaultVariants: {
     size: "md",
     type: "text",
     inputmode: "text",
-    error: false,
+    labelAlign: "topInside",
     readonly: false,
     disabled: false,
-    labelAlign: "topInside",
     noAutocomplete: false,
   },
 };

package/ui.form-input/index.vue

@@ -8,6 +8,7 @@
     :error="error"
     :size="size"
     :align="labelAlign"
+    centred
     v-bind="labelAttrs"
   >
     <label :for="id" v-bind="blockAttrs">
@@ -168,7 +169,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.form-input-file/configs/default.config.js

@@ -1,18 +1,9 @@
 export default /*tw*/ {
-  label: {
-    wrapper: "{ULabel} relative w-full",
-    label: {
-      compoundVariants: [
-        { align: "topInside", size: "sm", class: "left-5 top-4" },
-        { align: "topInside", size: "md", class: "left-5 top-5" },
-        { align: "topInside", size: "lg", class: "left-5 top-6" },
-      ],
-    },
-  },
+  label: "{ULabel} w-full",
   dropzoneWrapper: {
     base: `
       size-auto w-full rounded-lg border border-solid border-gray-300 bg-white
-      p-4 px-5 py-6 transition hover:border-gray-400
+      p-3 transition hover:border-gray-400
     `,
     variants: {
       error: {
@@ -20,14 +11,14 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, size: "sm", class: "pt-8" },
-      { labelAlign: "topInside", label: true, size: "md", class: "pt-10" },
-      { labelAlign: "topInside", label: true, size: "lg", class: "pt-12" },
+      { labelAlign: "topInside", label: true, size: "sm", class: "pt-7" },
+      { labelAlign: "topInside", label: true, size: "md", class: "pt-8" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "pt-9" },
     ],
   },
   description: "{UText} text-gray-700",
   contentWrapper: {
-    base: "relative mt-3 flex w-full gap-6 justify-between items-start rounded bg-brand-50 p-3",
+    base: "relative flex w-full gap-6 justify-between items-start rounded-lg bg-brand-50 p-3",
     variants: {
       multiple: {
         false: "items-center",
@@ -38,9 +29,9 @@ export default /*tw*/ {
     base: "pr-4 text-gray-700 flex-grow w-full self-center",
     variants: {
       size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
       },
     },
   },

package/ui.form-input-file/index.vue

@@ -116,7 +116,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.form-input-money/index.vue

@@ -68,7 +68,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.form-input-rating/index.vue

@@ -99,7 +99,7 @@ const props = defineProps({
 
   /**
    * Rating label placement.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * @values top, topWithDesc, left, right
    */
   labelAlign: {
     type: String,

package/ui.form-input-search/index.vue

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

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

@@ -1,40 +1,41 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex",
+    base: "flex gap-2",
     variants: {
-      size: {
-        xs: "gap-2",
-        sm: "gap-2",
-        md: "gap-2.5",
-        lg: "gap-3",
-        xl: "gap-3.5",
-      },
       align: {
         top: "flex-col",
-        topInside: "flex-col gap-0",
+        topInside: "flex-col gap-0 relative",
         topWithDesc: "flex-col-reverse w-fit",
-        left: "flex-row w-fit",
-        right: "flex-row-reverse w-fit",
-        bottom: "flex-col-reverse w-fit",
+        right: "flex-row w-fit",
+        left: "flex-row-reverse w-fit",
       },
     },
+    compoundVariants: [
+      { align: "left", size: "sm", class: "gap-2" },
+      { align: "left", size: "md", class: "gap-3" },
+      { align: "left", size: "lg", class: "gap-4" },
+      { align: "right", size: "sm", class: "gap-2.5" },
+      { align: "right", size: "md", class: "gap-3" },
+      { align: "right", size: "lg", class: "gap-3.5" },
+      { align: "left", centred: true, class: "items-center" },
+      { align: "right", centred: true, class: "items-center" },
+    ],
   },
   labelWrapper: "",
   label: {
-    base: "text-gray-500 z-10 font-normal block !leading-none",
+    base: "text-gray-900 z-10 block !leading-none",
     variants: {
       size: {
-        xs: "text-2xs",
         sm: "text-xs",
         md: "text-sm",
         lg: "text-base",
-        xl: "text-lg",
       },
       align: {
-        topInside: "absolute left-4",
-        topWithDesc: "pt-1 pb-1.5",
-        left: "pt-1 pb-1 text-gray-900",
-        right: "pt-1 pb-1 text-gray-900",
+        top: "font-medium",
+        topInside: "font-normal absolute left-3 text-gray-500",
+        topWithDesc: "font-medium",
+        left: "font-normal",
+        right: "font-normal",
       },
       error: {
         true: "text-red-500",
@@ -44,61 +45,52 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { align: "topInside", size: "xs", class: "top-1.5" },
-      { align: "topInside", size: "sm", class: "top-2" },
-      { align: "topInside", size: "md", class: "top-2.5" },
-      { align: "topInside", size: "lg", class: "top-3" },
-      { align: "topInside", size: "xl", class: "top-3.5" },
-      { align: "topWithDesc", size: "xs", class: "-mt-px" },
-      { align: "topWithDesc", size: "sm", class: "" },
-      { align: "topWithDesc", size: "md", class: "mt-px" },
-      { align: "topWithDesc", size: "lg", class: "mt-0.5" },
-      { align: "topWithDesc", size: "xl", class: "mt-1" },
-      { align: "left", size: "xs", class: "-mt-0.5 text-sm" },
-      { align: "left", size: "sm", class: "text-sm" },
-      { align: "left", size: "md", class: "mt-px text-base" },
-      { align: "left", size: "lg", class: "mt-0.5 text-lg" },
-      { align: "left", size: "xl", class: "mt-1 text-xl" },
-      { align: "right", size: "sm", class: "-mt-0.5 text-xs" },
-      { align: "right", size: "sm", class: "text-sm" },
-      { align: "right", size: "md", class: "mt-px text-base" },
-      { align: "right", size: "lg", class: "mt-0.5 text-lg" },
-      { align: "right", size: "xl", class: "mt-1 text-xl" },
+      { align: "topInside", size: "sm", class: "top-2 text-2xs" },
+      { align: "topInside", size: "md", class: "top-2.5 text-xs" },
+      { align: "topInside", size: "lg", class: "top-2.5 text-sm" },
+      { align: "topWithDesc", size: "sm", class: "-mt-px" },
+      { align: "topWithDesc", size: "md", class: "" },
+      { align: "topWithDesc", size: "lg", class: "mt-px" },
+      { align: "left", size: "sm", class: "-mt-px text-sm" },
+      { align: "left", size: "md", class: "text-sm" },
+      { align: "left", size: "lg", class: "mt-px text-base" },
+      { align: "right", size: "sm", class: "-mt-px text-xs" },
+      { align: "right", size: "md", class: "text-sm" },
+      { align: "right", size: "lg", class: "mt-px text-base" },
+      { align: "left", centred: false, class: "pt-1" },
+      { align: "right", centred: false, class: "pt-1" },
     ],
   },
   description: {
-    base: "font-normal text-gray-500/[85] !leading-none",
+    base: "font-normal text-gray-500 !leading-none",
     variants: {
       size: {
-        xs: "text-2xs",
         sm: "text-2xs",
         md: "text-xs",
         lg: "text-sm",
-        xl: "text-base",
       },
       align: {
-        topInside: "pl-4",
         top: "pl-0 -mt-0.5",
-        left: "pl-0",
-        right: "pl-0",
-        bottom: "-order-1 -mt-2",
+        topInside: "pl-3",
+        topWithDesc: "pt-1",
+        left: "pt-1 pl-0",
+        right: "pt-1 pl-0",
       },
       error: {
         true: "text-red-500",
       },
     },
     compoundVariants: [
-      { align: "topInside", size: "xs", class: "mt-1" },
       { align: "topInside", size: "sm", class: "mt-1.5" },
       { align: "topInside", size: "md", class: "mt-2" },
       { align: "topInside", size: "lg", class: "mt-2.5" },
-      { align: "topInside", size: "xl", class: "mt-3" },
     ],
   },
   defaultVariants: {
     align: "top",
     size: "md",
     error: false,
+    centred: false,
     disabled: false,
   },
 };

package/ui.form-label/index.vue

@@ -94,14 +94,22 @@ const props = defineProps({
   },
 
   /**
-   * Set label placement related from the default slot.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * Label placement.
+   * @values top, topInside, topWithDesc, left, right
    */
   align: {
     type: String,
     default: UIService.get(defaultConfig, ULabel).default.align,
   },
 
+  /**
+   * Centre label.
+   */
+  centred: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULabel).default.centred,
+  },
+
   /**
    * Set error message.
    */

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

@@ -1,8 +1,5 @@
 export default /*tw*/ {
-  label: {
-    wrapper: "inline-flex",
-    label: "{ULabel} cursor-pointer",
-  },
+  label: "{ULabel}",
   radio: {
     base: `
       cursor-pointer
@@ -15,11 +12,9 @@ export default /*tw*/ {
     `,
     variants: {
       size: {
-        xs: "size-4",
-        sm: "size-5",
-        md: "size-6",
-        lg: "size-7",
-        xl: "size-8",
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-6",
       },
     },
     compoundVariants: [
@@ -38,7 +33,7 @@ export default /*tw*/ {
   defaultVariants: {
     size: "md",
     color: "brand",
-    labelAlign: "left",
+    labelAlign: "right",
     disabled: false,
     checked: false,
   },

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

@@ -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,