vueless 0.0.383 → 0.0.385

package/ui.form-calendar/config.js

@@ -31,6 +31,8 @@ export default /*tw*/ {
   firstDayInRange: "",
   anotherMonthFirstDayInRange: "",
   lastDayInRange: "",
+  currentLastDayInRange: "",
+  currentFirstDayInRange: "",
   anotherMonthLastDayInRange: "",
   selectedDay: "",
   activeDay: "",
@@ -38,9 +40,12 @@ export default /*tw*/ {
   month: "{UButton} mx-auto flex h-12 w-full",
   currentMonth: "",
   currentMonthInRange: "",
+  currentLastMonthInRange: "",
+  currentFirstMonthInRange: "",
   lastMonthInRange: "",
   firstMonthInRange: "",
   singleMonthInRange: "rounded-dynamic",
+  singleCurrentMonthInRange: "rounded-dynamic",
   monthInRange: "",
   selectedMonth: "",
   activeMonth: "",
@@ -52,6 +57,9 @@ export default /*tw*/ {
   lastYearInRange: "",
   yearInRange: "",
   singleYearInRange: "rounded-dynamic",
+  singleCurrentYearInRange: "rounded-dynamic",
+  currentLastYearInRange: "",
+  currentFirstYearInRange: "",
   selectedYear: "",
   activeYear: "",
   timepicker: "mt-2 pl-1 pt-3 text-sm flex items-center justify-between gap-2 border-t border-brand-200",

package/ui.form-calendar/useAttrs.js

@@ -67,6 +67,22 @@ export default function useAttrs(props) {
         extendingKeysClasses.currentDate.value,
       ]),
     },
+    currentFirstDayInRange: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.firstDateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
+    currentLastDayInRange: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.lastDateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
     firstDayInRange: {
       base: computed(() => [
         extendingKeysClasses.day.value,
@@ -115,6 +131,29 @@ export default function useAttrs(props) {
         extendingKeysClasses.dateInRange.value,
       ]),
     },
+    singleCurrentMonthInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.dateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
+    currentFirstYearInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.firstDateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
+    currentLastYearInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.lastDateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
     currentMonthInRange: {
       base: computed(() => [
         extendingKeysClasses.month.value,
@@ -129,6 +168,22 @@ export default function useAttrs(props) {
         extendingKeysClasses.lastDateInRange.value,
       ]),
     },
+    currentFirstMonthInRange: {
+      base: computed(() => [
+        extendingKeysClasses.month.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.firstDateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
+    currentLastMonthInRange: {
+      base: computed(() => [
+        extendingKeysClasses.month.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.lastDateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
     firstMonthInRange: {
       base: computed(() => [
         extendingKeysClasses.month.value,
@@ -160,6 +215,13 @@ export default function useAttrs(props) {
         extendingKeysClasses.dateInRange.value,
       ]),
     },
+    singleCurrentYearInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.dateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
     singleYearInRange: {
       base: computed(() => [
         extendingKeysClasses.year.value,

package/ui.form-date-picker/config.js

@@ -10,8 +10,8 @@ export default /*tw*/ {
     base: "absolute mb-3 z-40",
     variants: {
       openDirectionX: {
-        left: "right-0",
-        right: "left-0",
+        left: "left-0 right-auto",
+        right: "right-0 left-auto",
       },
       openDirectionY: {
         top: "bottom-full mt-0",

package/ui.form-date-picker/useAttrs.js

@@ -1,66 +1,44 @@
-import useUI from "../composables/useUI.js";
-import { cva } from "../utils/utilUI.js";
 import { computed, watchEffect } from "vue";
 import { merge } from "lodash-es";
+import useUI from "../composables/useUI.js";
 
 import defaultConfig from "./config.js";
 import { POSITION } from "../composables/useAutoPosition.js";
 
 export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
-  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
   );
-  const attrs = {};
-
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
 
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-          openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
-          openDirectionX: isRight.value ? POSITION.right : POSITION.left,
-          error: Boolean(props.error),
-          description: Boolean(props.description),
-        });
-      }
+  const mutatedProps = computed(() => ({
+    openDirectionY: isTop.value ? POSITION.top : POSITION.bottom,
+    openDirectionX: isRight.value ? POSITION.right : POSITION.left,
+    error: Boolean(props.error),
+    description: Boolean(props.description),
+  }));
 
-      return value;
-    });
+  const extendingKeys = ["inputFocused"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys, mutatedProps);
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (key === "input") {
-      const inputAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...inputAttrs.value,
-        config: {
-          ...inputAttrs.value.config,
-          ...(isShownCalendar.value ? config.value.inputFocused : {}),
-        },
-      }));
-    }
+  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
+    input: {
+      extend: computed(() => [isShownCalendar.value && extendingKeysClasses.inputFocused.value]),
+    },
+  });
 
-    if (key === "calendar") {
-      /* Merging DatePicker's i18n translations into Calendar's i18n translations. */
-      watchEffect(() => {
-        const calendarConfig = attrs[`${key}Attrs`].value.config || {};
+  /* Merging DatePicker's i18n translations into Calendar's i18n translations. */
+  watchEffect(() => {
+    const calendarConfig = keysAttrs.calendarAttrs.value.config || {};
 
-        if (!calendarConfig.i18n || props.config.i18n) {
-          attrs[`${key}Attrs`].value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
-        }
-      });
+    if (!calendarConfig.i18n || props.config.i18n) {
+      keysAttrs.calendarAttrs.value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
     }
-  }
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

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

@@ -98,7 +98,7 @@
           :is-period="isPeriod"
           :custom-range-button="customRangeButton"
           :locale="locale"
-          :attrs="periodDatesMenuAttrs"
+          :attrs="keysAttrs"
           :date-format="dateFormat"
           :min-date="minDate"
           :max-date="maxDate"
@@ -120,7 +120,7 @@
           :locale="locale"
           :date-format="dateFormat"
           :config="config"
-          :attrs="rangeInputsAttrs"
+          :attrs="keysAttrs"
         />
 
         <div v-if="inputRangeToError || inputRangeFromError" v-bind="inputRangeErrorAttrs">
@@ -403,6 +403,7 @@ const elementId = props.id || useId();
 
 const {
   config,
+  keysAttrs,
   wrapperAttrs,
   calendarAttrs,
   inputAttrs,
@@ -412,8 +413,6 @@ const {
   shiftRangeButtonAttrs,
   rangeInputWrapperAttrs,
   inputRangeErrorAttrs,
-  periodDatesMenuAttrs,
-  rangeInputsAttrs,
 } = useAttrs(props, { isShownMenu, isTop, isRight, isPeriod });
 
 const calendarValue = ref(props.modelValue);

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

@@ -5,7 +5,7 @@
       v-model="rangeStart"
       :error="inputRangeFromError"
       size="md"
-      v-bind="attrs.rangeInputFirstAttrs"
+      v-bind="rangeInputFirstAttrs"
       :name="rangeInputName"
       @input="onInputRangeInput($event, INPUT_RANGE_TYPE.start)"
     />
@@ -15,7 +15,7 @@
       v-model="rangeEnd"
       :error="inputRangeToError"
       size="md"
-      v-bind="attrs.rangeInputLastAttrs"
+      v-bind="rangeInputLastAttrs"
       :name="rangeInputName"
       @input="onInputRangeInput($event, INPUT_RANGE_TYPE.end)"
     />
@@ -58,6 +58,8 @@ const props = defineProps({
   },
 });
 
+const { rangeInputFirstAttrs, rangeInputLastAttrs } = props.attrs;
+
 const localValue = defineModel("localValue", { required: true, type: Object });
 const inputRangeFromError = defineModel("inputRangeFromError", { required: true, type: String });
 const inputRangeToError = defineModel("inputRangeToError", { required: true, type: String });

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="attrs.periodsRowAttrs">
+  <div v-bind="periodsRowAttrs">
     <template v-for="periodButton in periods" :key="periodButton.name">
       <UButton
         v-if="periodButton.name !== period"
@@ -9,7 +9,7 @@
         size="xs"
         variant="thirdary"
         :label="periodButton.title"
-        v-bind="attrs.periodButtonAttrs"
+        v-bind="periodButtonAttrs"
         @click="onClickPeriodButton(periodButton.name)"
       />
 
@@ -21,13 +21,13 @@
         size="xs"
         variant="thirdary"
         :label="periodButton.title"
-        v-bind="attrs.periodButtonActiveAttrs"
+        v-bind="periodButtonActiveAttrs"
         @click="onClickPeriodButton(periodButton.name)"
       />
     </template>
   </div>
 
-  <div v-bind="attrs.periodsRowAttrs">
+  <div v-bind="periodsRowAttrs">
     <UButton
       v-if="customRangeButton.range.to && customRangeButton.range.from && PERIOD.custom !== period"
       square
@@ -35,13 +35,13 @@
       no-ring
       size="xs"
       variant="thirdary"
-      v-bind="attrs.periodButtonAttrs"
+      v-bind="periodButtonAttrs"
       @click="onClickCustomRangeButton"
     >
       {{ customRangeButton.label }}
       <span
         v-if="customRangeButton.description"
-        v-bind="attrs.customRangeDescription"
+        v-bind="customRangeDescription"
         v-text="customRangeButton.description"
       />
     </UButton>
@@ -53,13 +53,13 @@
       no-ring
       size="xs"
       variant="thirdary"
-      v-bind="attrs.periodButtonActiveAttrs"
+      v-bind="periodButtonActiveAttrs"
       @click="onClickCustomRangeButton"
     >
       {{ customRangeButton.label }}
       <span
         v-if="customRangeButton.description"
-        v-bind="attrs.customRangeDescription"
+        v-bind="customRangeDescription"
         v-text="customRangeButton.description"
       />
     </UButton>
@@ -73,7 +73,7 @@
       variant="thirdary"
       :label="locale.ownRange"
       :left-icon="config.defaults.ownRangeIcon"
-      v-bind="attrs.periodButtonAttrs"
+      v-bind="periodButtonAttrs"
       @click="onClickOwnRange"
     />
 
@@ -86,13 +86,13 @@
       variant="thirdary"
       :label="locale.ownRange"
       :left-icon="config.defaults.ownRangeIcon"
-      v-bind="attrs.periodButtonActiveAttrs"
+      v-bind="periodButtonActiveAttrs"
       @click="onClickOwnRange"
     />
   </div>
 
   <template v-if="!isPeriod.ownRange && !isPeriod.custom">
-    <div v-bind="attrs.rangeSwitchWrapperAttrs">
+    <div v-bind="rangeSwitchWrapperAttrs">
       <UButton
         square
         no-ring
@@ -100,11 +100,11 @@
         color="gray"
         variant="thirdary"
         :left-icon="config.defaults.prevIcon"
-        v-bind="attrs.rangeSwitchButtonAttrs"
+        v-bind="rangeSwitchButtonAttrs"
         @click="emit('clickPrev')"
       />
 
-      <div v-bind="attrs.rangeSwitchTitleAttrs">
+      <div v-bind="rangeSwitchTitleAttrs">
         {{ rangeSwitchTitle }}
       </div>
 
@@ -115,12 +115,12 @@
         color="gray"
         variant="thirdary"
         :left-icon="config.defaults.nextIcon"
-        v-bind="attrs.rangeSwitchButtonAttrs"
+        v-bind="rangeSwitchButtonAttrs"
         @click="emit('clickNext')"
       />
     </div>
 
-    <div v-if="isDatePeriodOutOfRange" v-bind="attrs.periodDateListAttrs">
+    <div v-if="isDatePeriodOutOfRange" v-bind="periodDateListAttrs">
       <template v-for="(date, index) in periodDateList" :key="date.title">
         <UButton
           v-if="getDatePeriodState(date, index).isActive"
@@ -128,7 +128,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.periodDateActiveAttrs"
+          v-bind="periodDateActiveAttrs"
           :label="String(date.title)"
           :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
@@ -140,7 +140,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.firstPeriodGridDateAttrs"
+          v-bind="firstPeriodGridDateAttrs"
           :label="String(date.title)"
           :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
@@ -152,7 +152,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.firstPeriodListDateAttrs"
+          v-bind="firstPeriodListDateAttrs"
           :label="String(date.title)"
           :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
@@ -164,7 +164,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.lastPeriodGridDateAttrs"
+          v-bind="lastPeriodGridDateAttrs"
           :label="String(date.title)"
           :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
@@ -176,7 +176,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.lastPeriodListDateAttrs"
+          v-bind="lastPeriodListDateAttrs"
           :label="String(date.title)"
           :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
@@ -188,7 +188,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.periodDateInRangeAttrs"
+          v-bind="periodDateInRangeAttrs"
           :label="String(date.title)"
           :class="{ 'rounded-dynamic': getDatePeriodState(date, index).isSingleItem }"
           @click="selectDate(date), toggleMenu()"
@@ -200,7 +200,7 @@
           size="sm"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
-          v-bind="attrs.periodDateAttrs"
+          v-bind="periodDateAttrs"
           :label="String(date.title)"
           @click="selectDate(date), toggleMenu()"
         />
@@ -274,6 +274,24 @@ const period = defineModel("period", { required: true, type: String });
 
 const isDatePeriodOutOfRange = inject("isDatePeriodOutOfRange", null);
 
+const {
+  periodButtonAttrs,
+  periodsRowAttrs,
+  periodButtonActiveAttrs,
+  customRangeDescription,
+  rangeSwitchWrapperAttrs,
+  rangeSwitchButtonAttrs,
+  rangeSwitchTitleAttrs,
+  periodDateListAttrs,
+  periodDateActiveAttrs,
+  firstPeriodGridDateAttrs,
+  firstPeriodListDateAttrs,
+  lastPeriodGridDateAttrs,
+  lastPeriodListDateAttrs,
+  periodDateInRangeAttrs,
+  periodDateAttrs,
+} = props.attrs;
+
 const periods = computed(() => [
   { name: PERIOD.week, title: props.locale.week },
   { name: PERIOD.month, title: props.locale.month },

package/ui.form-date-picker-range/config.js

@@ -19,11 +19,12 @@ export default /*tw*/ {
     `,
     variants: {
       openDirectionX: {
-        left: "right-0",
-        right: "left-0",
+        left: "left-0 right-auto",
+        right: "right-0 left-auto",
       },
       openDirectionY: {
         top: "bottom-full mt-0",
+        bottom: "top-full mb-0",
       },
     },
     compoundVariants: [
@@ -64,20 +65,25 @@ export default /*tw*/ {
   periodDateActive: "bg-gray-100",
   customRangeDescription: "",
   rangeInputWrapper: "flex mt-4 -space-x-px group/range-input-wrapper",
-  rangeInputFirst: "group/range-input-first",
-  rangeInputLast: "group/range-input-last",
-  rangeInput: {
+  rangeInputFirst: {
     component: "{UInput}",
     label: {
       component: "{ULabel}",
       wrapper: "w-full hover:z-10 focus:z-10",
       description: "hidden",
     },
-    block: `
-      focus-within:z-10 focus-within:ring-0
-      group-[]/range-input-first:rounded-r-none group-[]/range-input-last:rounded-l-none
-    `,
-    input: "group-[]/range-input-first:rounded-r-none group-[]/range-input-last:rounded-l-none",
+    block: "focus-within:z-10 focus-within:ring-0 rounded-r-none",
+    input: "rounded-r-none",
+  },
+  rangeInputLast: {
+    component: "{UInput}",
+    label: {
+      component: "{ULabel}",
+      wrapper: "w-full hover:z-10 focus:z-10",
+      description: "hidden",
+    },
+    block: "focus-within:z-10 focus-within:ring-0 rounded-l-none",
+    input: "rounded-l-none",
   },
   inputRangeError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
   calendar: {