vueless 0.0.216 → 0.0.218

package/ui.form-date-picker-range/index.vue

@@ -82,21 +82,22 @@
           <UButton
             v-for="periodButton in periods"
             :key="periodButton.name"
+            :label="periodButton.title"
             variant="thirdary"
             size="xs"
             square
+            filled
             color="brand"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(periodButton.name))"
             @click="onClickPeriodButton(periodButton.name)"
-          >
-            {{ periodButton.title }}
-          </UButton>
+          />
         </div>
 
         <div v-bind="periodsRowAttrs">
           <UButton
             v-if="customRangeButton.range.to && customRangeButton.range.from"
             variant="thirdary"
+            filled
             color="brand"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.custom))"
             @click="onClickCustomRangeButton"
@@ -107,6 +108,8 @@
 
           <UButton
             variant="thirdary"
+            size="xs"
+            filled
             color="brand"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.ownRange))"
             @click="onClickOwnRange"
@@ -123,29 +126,33 @@
 
         <template v-if="!isPeriod.ownRange && !isPeriod.custom">
           <div v-bind="rangeSwitchWrapperAttrs">
-            <UIcon
-              internal
-              interactive
-              color="grayscale"
-              size="sm"
-              :name="config.prevIconName"
-              v-bind="prevIconAttrs"
-              @click="onClickShiftDatesList('prev')"
-            />
+            <UButton size="sm" color="brand" variant="thirdary" square>
+              <UIcon
+                internal
+                interactive
+                size="sm"
+                color="gray"
+                :name="config.prevIconName"
+                v-bind="prevIconAttrs"
+                @click="onClickShiftDatesList('prev')"
+              />
+            </UButton>
 
             <div v-bind="rangeSwitchTitleAttrs">
               {{ rangeSwitchTitle }}
             </div>
 
-            <UIcon
-              internal
-              interactive
-              class="icon"
-              size="sm"
-              :name="config.nextIconName"
-              v-bind="nextIconAttrs"
-              @click="onClickShiftDatesList('next')"
-            />
+            <UButton size="sm" color="brand" variant="thirdary" square>
+              <UIcon
+                internal
+                interactive
+                size="sm"
+                color="gray"
+                :name="config.nextIconName"
+                v-bind="nextIconAttrs"
+                @click="onClickShiftDatesList('next')"
+              />
+            </UButton>
           </div>
 
           <div v-bind="periodDateListAttrs(getPeriodDateListClasses())">

package/ui.form-input/composables/attrs.composable.js

@@ -1,9 +1,9 @@
 import { computed } from "vue";
 import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
+import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
-export default function useAttrs(props, { inputPasswordClasses }) {
+export default function useAttrs(props) {
   const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
     defaultConfig,
     () => props.config,
@@ -29,14 +29,14 @@ export default function useAttrs(props, { inputPasswordClasses }) {
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    if (key === "input") {
-      const inputAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...inputAttrs.value,
-        class: cx([inputAttrs.value.class, inputPasswordClasses.value]),
-      }));
-    }
+    // if (key === "input") {
+    //   const inputAttrs = attrs[`${key}Attrs`];
+    //
+    //   attrs[`${key}Attrs`] = computed(() => ({
+    //     ...inputAttrs.value,
+    //     class: cx([inputAttrs.value.class]),
+    //   }));
+    // }
   }
 
   return {

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,