vueless 0.0.217 → 0.0.219

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

@@ -5,13 +5,13 @@
       :id="id"
       ref="inputRef"
       v-model="userFormatDate"
+      :size="size"
       :label="label"
+      :disabled="disabled"
       :placeholder="placeholder"
-      :error="error"
       :description="description"
+      :error="error"
       readonly
-      :disabled="disabled"
-      :size="size"
       v-bind="inputAttrs"
       @focus="activate"
     >
@@ -19,8 +19,8 @@
         <slot name="left" />
       </template>
 
-      <template #right-icon>
-        <slot name="right-icon" />
+      <template #icon-right>
+        <slot name="icon-right" />
       </template>
 
       <template #right>
@@ -36,21 +36,20 @@
         :disabled="disabled"
         variant="thirdary"
         filled
+        :icon-left="config.prevIconName"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('prev')"
-      >
-        <UIcon internal interactive size="sm" :name="config.prevIconName" v-bind="prevIconAttrs" />
-      </UButton>
+      />
 
       <UButton
         :id="id"
         ref="buttonRef"
         square
+        filled
         :size="size"
         :disabled="disabled"
         :label="userFormatDate"
         variant="thirdary"
-        filled
         v-bind="buttonAttrs"
         @click="activate"
       />
@@ -58,15 +57,14 @@
       <UButton
         ref="buttonNextRef"
         square
+        filled
         :size="size"
         :disabled="disabled"
         variant="thirdary"
-        filled
+        :icon-left="config.nextIconName"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('next')"
-      >
-        <UIcon internal interactive size="sm" :name="config.nextIconName" v-bind="nextIconAttrs" />
-      </UButton>
+      />
     </div>
 
     <Transition v-bind="config.menuTransition">
@@ -82,22 +80,23 @@
           <UButton
             v-for="periodButton in periods"
             :key="periodButton.name"
-            variant="thirdary"
-            size="xs"
             square
-            color="brand"
+            filled
+            size="xs"
+            variant="thirdary"
+            :label="periodButton.title"
             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"
+            square
+            filled
+            size="xs"
             variant="thirdary"
-            color="brand"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.custom))"
             @click="onClickCustomRangeButton"
           >
@@ -106,30 +105,26 @@
           </UButton>
 
           <UButton
+            square
+            filled
+            size="xs"
             variant="thirdary"
-            color="brand"
+            :label="locale.ownRange"
+            :icon-left="config.periodButtonIconName"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.ownRange))"
             @click="onClickOwnRange"
-          >
-            <UIcon
-              internal
-              :name="config.periodButtonIconName"
-              size="xs"
-              v-bind="periodButtonIconAttrs"
-            />
-            {{ locale.ownRange }}
-          </UButton>
+          />
         </div>
 
         <template v-if="!isPeriod.ownRange && !isPeriod.custom">
           <div v-bind="rangeSwitchWrapperAttrs">
-            <UIcon
-              internal
-              interactive
-              color="grayscale"
-              size="sm"
-              :name="config.prevIconName"
-              v-bind="prevIconAttrs"
+            <UButton
+              square
+              size="xs"
+              color="gray"
+              variant="thirdary"
+              :icon-left="config.prevIconName"
+              v-bind="rangeSwitchButtonAttrs"
               @click="onClickShiftDatesList('prev')"
             />
 
@@ -137,13 +132,13 @@
               {{ rangeSwitchTitle }}
             </div>
 
-            <UIcon
-              internal
-              interactive
-              class="icon"
-              size="sm"
-              :name="config.nextIconName"
-              v-bind="nextIconAttrs"
+            <UButton
+              square
+              size="xs"
+              color="gray"
+              variant="thirdary"
+              :icon-left="config.nextIconName"
+              v-bind="rangeSwitchButtonAttrs"
               @click="onClickShiftDatesList('next')"
             />
           </div>
@@ -152,10 +147,9 @@
             <UButton
               v-for="date in periodDateList"
               :key="date.title"
-              :disabled="isDatePeriodOutOfRange(date)"
-              variant="thirdary"
-              color="brand"
               size="sm"
+              variant="thirdary"
+              :disabled="isDatePeriodOutOfRange(date)"
               v-bind="periodDateAttrs(getPeriodDateClasses(date))"
               :label="String(date.title)"
               @click="selectDate(date), toggleMenu()"
@@ -168,7 +162,7 @@
             ref="rangeInputStartRef"
             v-model="rangeStart"
             :error="inputRangeFromError"
-            size="sm"
+            size="md"
             v-bind="rangeInputAttrs"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.start)"
@@ -178,14 +172,14 @@
             ref="rangeInputEndRef"
             v-model="rangeEnd"
             :error="inputRangeToError"
-            size="sm"
+            size="md"
             v-bind="rangeInputAttrs"
             :name="rangeInputName"
             @input="onInputRangeInput($event, INPUT_RANGE_TYPE.end)"
           />
         </div>
 
-        <div v-bind="inputRangeErrorAttrs">
+        <div v-if="inputRangeToError || inputRangeFromError" v-bind="inputRangeErrorAttrs">
           {{ inputRangeToError || inputRangeFromError }}
         </div>
 
@@ -209,7 +203,6 @@
 import { computed, watch, ref, nextTick } from "vue";
 import { merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
 import UInput from "../ui.form-input";
 import UButton from "../ui.button";
 import UCalendar from "../ui.form-calendar";
@@ -462,12 +455,10 @@ const {
   menuAttrs,
   periodsRowAttrs,
   periodButtonAttrs,
-  periodButtonIconAttrs,
-  rangeSwitchWrapperAttrs,
-  nextIconAttrs,
-  prevIconAttrs,
   periodDateAttrs,
   periodDateListAttrs,
+  rangeSwitchWrapperAttrs,
+  rangeSwitchButtonAttrs,
   rangeSwitchTitleAttrs,
   buttonWrapperAttrs,
   buttonAttrs,

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]
     `,
@@ -27,40 +28,44 @@ export default /*tw*/ {
         `,
       },
     },
+    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 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">
@@ -22,7 +23,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>
 
@@ -76,7 +77,7 @@
           @binding {string} icon-size
         -->
         <slot name="icon-right" :icon-name="iconLeft" :icon-size="iconSize">
-          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" />
+          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" internal />
         </slot>
       </span>
     </label>
@@ -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,
   },