vueless 0.0.377 → 0.0.379

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.377",
+  "version": "0.0.379",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.form-calendar/useAttrs.js

@@ -1,375 +1,209 @@
-import useUI from "../composables/useUI.js";
-import { cva, cx } from "../utils/utilUI.js";
-
 import { computed } from "vue";
+import useUI from "../composables/useUI.js";
 
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
   );
-  const attrs = {};
 
-  const buttonVariantKeys = [
+  const extendingKeys = [
     "firstDateInRange",
     "lastDateInRange",
     "anotherMonthDate",
     "activeDate",
     "selectedDate",
     "currentDate",
-    "currentDay",
-    "currentDayInRange",
-    "anotherMonthDay",
-    "firstDayInRange",
-    "anotherMonthFirstDayInRange",
-    "lastDayInRange",
-    "anotherMonthLastDayInRange",
-    "selectedDay",
-    "activeDay",
-    "dayInRange",
     "edgeDateInRange",
     "dateInRange",
-    "currentMonth",
-    "currentMonthInRange",
-    "lastMonthInRange",
-    "firstMonthInRange",
-    "singleMonthInRange",
-    "monthInRange",
-    "selectedMonth",
-    "activeMonth",
-    "currentYear",
-    "currentYearInRange",
-    "firstYearInRange",
-    "lastYearInRange",
-    "yearInRange",
-    "singleYearInRange",
-    "selectedYear",
-    "activeYear",
-  ];
-
-  const timepickerInputKeys = [
-    "timepickerInputHours",
-    "timepickerInputMinutes",
-    "timepickerInputSeconds",
+    "timepickerInput",
   ];
 
-  for (const key in defaultConfig) {
-    if (isSystemKey(key) || buttonVariantKeys.includes(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
-
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (timepickerInputKeys.includes(key)) {
-      const keyAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...keyAttrs.value,
-        class: cx([config.value.timepickerInput, keyAttrs.value.class]),
-      }));
-    }
-  }
-
-  for (const key of buttonVariantKeys) {
-    if (key === "dayInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.dayAttrs.value,
-        class: cx([attrs.dayAttrs.value.class, config.value.dateInRange, config.value.dayInRange]),
-      }));
-    }
-
-    if (key === "selectedDay") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.dayAttrs.value,
-        class: cx([
-          attrs.dayAttrs.value.class,
-          config.value.selectedDate,
-          config.value.selectedDay,
-        ]),
-      }));
-    }
-
-    if (key === "activeDay") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.dayAttrs.value,
-        class: cx([attrs.dayAttrs.value.class, config.value.activeDate, config.value.activeDay]),
-      }));
-    }
-
-    if (key === "anotherMonthDay") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.dayAttrs.value,
-        class: cx([
-          attrs.dayAttrs.value.class,
-          config.value.anotherMonthDate,
-          config.value.anotherMonthDay,
-        ]),
-      }));
-    }
-
-    if (key === "currentDay") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.dayAttrs.value,
-        class: cx([attrs.dayAttrs.value.class, config.value.currentDate, config.value.currentDay]),
-      }));
-    }
-
-    if (key === "currentDayInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.dayAttrs.value,
-        class: cx([
-          attrs.dayAttrs.value.class,
-          config.value.dateInRange,
-          config.value.currentDate,
-          config.value.currentDayInRange,
-        ]),
-      }));
-    }
-
-    if (key === "firstDayInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.dayAttrs.value,
-        class: cx([
-          attrs.dayAttrs.value.class,
-          config.value.edgeDateInRange,
-          config.value.firstDateInRange,
-          config.value.firstDayInRange,
-        ]),
-      }));
-    }
-
-    if (key === "lastDayInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.dayAttrs.value,
-        class: cx([
-          attrs.dayAttrs.value.class,
-          config.value.edgeDateInRange,
-          config.value.lastDateInRange,
-          config.value.lastDayInRange,
-        ]),
-      }));
-    }
-
-    if (key === "anotherMonthLastDayInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.dayAttrs.value,
-        class: cx([
-          attrs.dayAttrs.value.class,
-          config.value.anotherMonthDay,
-          config.value.edgeDateInRange,
-          config.value.lastDateInRange,
-          config.value.anotherMonthLastDayInRange,
-        ]),
-      }));
-    }
-
-    if (key === "anotherMonthFirstDayInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.dayAttrs.value,
-        class: cx([
-          attrs.dayAttrs.value.class,
-          config.value.anotherMonthDay,
-          config.value.edgeDateInRange,
-          config.value.firstDateInRange,
-          config.value.anotherMonthFirstDayInRange,
-        ]),
-      }));
-    }
-
-    if (key === "currentMonth") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.monthAttrs.value,
-        class: cx([
-          attrs.monthAttrs.value.class,
-          config.value.currentDate,
-          config.value.currentMonth,
-        ]),
-      }));
-    }
-
-    if (key === "monthInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.monthAttrs.value,
-        class: cx([
-          attrs.monthAttrs.value.class,
-          config.value.dateInRange,
-          config.value.monthInRange,
-        ]),
-      }));
-    }
-
-    if (key === "singleMonthInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.monthAttrs.value,
-        class: cx([
-          attrs.monthAttrs.value.class,
-          config.value.dateInRange,
-          config.value.singleMonthInRange,
-        ]),
-      }));
-    }
-
-    if (key === "currentMonthInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.monthAttrs.value,
-        class: cx([
-          attrs.monthAttrs.value.class,
-          config.value.currentDate,
-          config.value.dateInRange,
-          config.value.currentMonthInRange,
-        ]),
-      }));
-    }
-
-    if (key === "lastMonthInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.monthAttrs.value,
-        class: cx([
-          attrs.monthAttrs.value.class,
-          config.value.edgeDateInRange,
-          config.value.lastDateInRange,
-          config.value.lastMonthInRange,
-        ]),
-      }));
-    }
-
-    if (key === "firstMonthInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.monthAttrs.value,
-        class: cx([
-          attrs.monthAttrs.value.class,
-          config.value.edgeDateInRange,
-          config.value.firstDateInRange,
-          config.value.firstMonthInRange,
-        ]),
-      }));
-    }
-
-    if (key === "selectedMonth") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.monthAttrs.value,
-        class: cx([
-          attrs.monthAttrs.value.class,
-          config.value.selectedDate,
-          config.value.selectedMonth,
-        ]),
-      }));
-    }
-
-    if (key === "activeMonth") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.monthAttrs.value,
-        class: cx([
-          attrs.monthAttrs.value.class,
-          config.value.activeDate,
-          config.value.activeMonth,
-        ]),
-      }));
-    }
-
-    if (key === "currentYear") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.yearAttrs.value,
-        class: cx([
-          attrs.yearAttrs.value.class,
-          config.value.currentDate,
-          config.value.currentYear,
-        ]),
-      }));
-    }
-
-    if (key === "yearInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.yearAttrs.value,
-        class: cx([
-          attrs.yearAttrs.value.class,
-          config.value.dateInRange,
-          config.value.yearInRange,
-        ]),
-      }));
-    }
-
-    if (key === "singleYearInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.yearAttrs.value,
-        class: cx([
-          attrs.yearAttrs.value.class,
-          config.value.dateInRange,
-          config.value.singleYearInRange,
-        ]),
-      }));
-    }
-
-    if (key === "currentYearInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.yearAttrs.value,
-        class: cx([
-          attrs.yearAttrs.value.class,
-          config.value.currentDate,
-          config.value.dateInRange,
-          config.value.currentYearInRange,
-        ]),
-      }));
-    }
-
-    if (key === "lastYearInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.yearAttrs.value,
-        class: cx([
-          attrs.yearAttrs.value.class,
-          config.value.edgeDateInRange,
-          config.value.lastDateInRange,
-          config.value.lastYearInRange,
-        ]),
-      }));
-    }
-
-    if (key === "firstYearInRange") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.yearAttrs.value,
-        class: cx([
-          attrs.yearAttrs.value.class,
-          config.value.edgeDateInRange,
-          config.value.firstDateInRange,
-          config.value.firstYearInRange,
-        ]),
-      }));
-    }
-
-    if (key === "selectedYear") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.yearAttrs.value,
-        class: cx([
-          attrs.yearAttrs.value.class,
-          config.value.selectedDate,
-          config.value.selectedYear,
-        ]),
-      }));
-    }
-
-    if (key === "activeYear") {
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...attrs.yearAttrs.value,
-        class: cx([attrs.yearAttrs.value.class, config.value.activeDate, config.value.activeYear]),
-      }));
-    }
-  }
+  const extendingKeysClasses = getExtendingKeysClasses([...extendingKeys, "day", "month", "year"]);
+
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    timepickerInputHours: {
+      base: computed(() => [extendingKeysClasses.timepickerInput.value]),
+    },
+    timepickerInputMinutes: {
+      base: computed(() => [extendingKeysClasses.timepickerInput.value]),
+    },
+    timepickerInputSeconds: {
+      base: computed(() => [extendingKeysClasses.timepickerInput.value]),
+    },
+    dayInRange: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.dateInRange.value,
+      ]),
+    },
+    selectedDay: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.selectedDate.value,
+      ]),
+    },
+    activeDay: {
+      base: computed(() => [extendingKeysClasses.day.value, extendingKeysClasses.activeDate.value]),
+    },
+    anotherMonthDay: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.anotherMonthDate.value,
+      ]),
+    },
+    currentDay: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
+    currentDayInRange: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.dateInRange.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
+    firstDayInRange: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.firstDateInRange.value,
+      ]),
+    },
+    lastDayInRange: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.lastDateInRange.value,
+      ]),
+    },
+    anotherMonthLastDayInRange: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.anotherMonthDay.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.lastDateInRange.value,
+      ]),
+    },
+    anotherMonthFirstDayInRange: {
+      base: computed(() => [
+        extendingKeysClasses.day.value,
+        extendingKeysClasses.anotherMonthDay.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.firstDateInRange.value,
+      ]),
+    },
+    currentMonth: {
+      base: computed(() => [
+        extendingKeysClasses.month.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
+    monthInRange: {
+      base: computed(() => [
+        extendingKeysClasses.month.value,
+        extendingKeysClasses.dateInRange.value,
+      ]),
+    },
+    singleMonthInRange: {
+      base: computed(() => [
+        extendingKeysClasses.month.value,
+        extendingKeysClasses.dateInRange.value,
+      ]),
+    },
+    currentMonthInRange: {
+      base: computed(() => [
+        extendingKeysClasses.month.value,
+        extendingKeysClasses.currentDate.value,
+        extendingKeysClasses.dateInRange.value,
+      ]),
+    },
+    lastMonthInRange: {
+      base: computed(() => [
+        extendingKeysClasses.month.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.lastDateInRange.value,
+      ]),
+    },
+    firstMonthInRange: {
+      base: computed(() => [
+        extendingKeysClasses.month.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.firstDateInRange.value,
+      ]),
+    },
+    selectedMonth: {
+      base: computed(() => [
+        extendingKeysClasses.month.value,
+        extendingKeysClasses.selectedDate.value,
+      ]),
+    },
+    activeMonth: {
+      base: computed(() => [
+        extendingKeysClasses.month.value,
+        extendingKeysClasses.activeDate.value,
+      ]),
+    },
+    currentYear: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.currentDate.value,
+      ]),
+    },
+    yearInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.dateInRange.value,
+      ]),
+    },
+    singleYearInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.dateInRange.value,
+      ]),
+    },
+    currentYearInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.currentDate.value,
+        extendingKeysClasses.dateInRange.value,
+      ]),
+    },
+    lastYearInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.lastDateInRange.value,
+      ]),
+    },
+    firstYearInRange: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.edgeDateInRange.value,
+        extendingKeysClasses.firstDateInRange.value,
+      ]),
+    },
+    selectedYear: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.selectedDate.value,
+      ]),
+    },
+    activeYear: {
+      base: computed(() => [
+        extendingKeysClasses.year.value,
+        extendingKeysClasses.activeDate.value,
+      ]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.form-checkbox/useAttrs.js

@@ -1,41 +1,23 @@
 import { computed } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva } from "../utils/utilUI.js";
 
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props, { checkboxColor, checkboxSize }) {
-  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
-  const attrs = {};
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
+  const mutatedProps = computed(() => ({
+    color: checkboxColor.value,
+    size: checkboxSize.value,
+    label: Boolean(props.label),
+    error: Boolean(props.error),
+  }));
 
-    const classes = computed(() => {
-      let value = config.value[key];
-
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-          size: checkboxSize.value,
-          label: Boolean(props.label),
-          error: Boolean(props.error),
-          color: getColor(checkboxColor.value),
-        });
-      }
-
-      return setColor(value, checkboxColor.value);
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.form-checkbox-group/useAttrs.js

@@ -1,36 +1,15 @@
 import useUI from "../composables/useUI.js";
-import { computed } from "vue";
-import { cva } from "../utils/utilUI.js";
+
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = 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,
-        });
-      }
-
-      return value;
-    });
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs();
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

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

@@ -1,38 +1,15 @@
-import { computed } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva } from "../utils/utilUI.js";
 
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, setColor, getColor, isSystemKey, hasSlotContent, isCVA } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
-  const attrs = {};
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
-
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-          color: getColor(props.color),
-        });
-      }
-
-      return setColor(value, props.color);
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs();
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

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

@@ -1,6 +1,7 @@
 import useUI from "../composables/useUI.js";
 import { cva } from "../utils/utilUI.js";
 import { computed, watchEffect } from "vue";
+import { merge } from "lodash-es";
 
 import defaultConfig from "./config.js";
 import { POSITION } from "../composables/useAutoPosition.js";
@@ -46,39 +47,12 @@ export default function useAttrs(props, { isShownCalendar, isTop, isRight }) {
     }
 
     if (key === "calendar") {
-      // This watcher rewrites default calendar locales with datepicker range locales
-      // Watcher will not rewrite custom calendar locales
+      /* Merging DatePicker's i18n translations into Calendar's i18n translations. */
       watchEffect(() => {
-        if (!attrs[`${key}Attrs`].value.config) {
-          attrs[`${key}Attrs`].value.config = {};
-        }
-
-        if (attrs[`${key}Attrs`].value.config.i18n || !props.config.i18n) {
-          return;
-        }
-
-        attrs[`${key}Attrs`].value.config.i18n = {
-          ...config.value.i18n,
-          weekdays: {
-            shorthand: { ...config.value.i18n.weekdays.shorthand },
-            longhand: { ...config.value.i18n.weekdays.longhand },
-          },
-          months: {
-            shorthand: { ...config.value.i18n.months.shorthand },
-            longhand: { ...config.value.i18n.months.longhand },
-          },
-        };
-
-        if (props.config.i18n.weekdays.userFormat) {
-          attrs[`${key}Attrs`].value.config.i18n.userFormat = {
-            ...config.value.i18n.weekdays.userFormat,
-          };
-        }
+        const calendarConfig = attrs[`${key}Attrs`].value.config || {};
 
-        if (props.config.i18n.months.userFormat) {
-          attrs[`${key}Attrs`].value.config.i18n.userFormat = {
-            ...config.value.i18n.months.userFormat,
-          };
+        if (!calendarConfig.i18n || props.config.i18n) {
+          attrs[`${key}Attrs`].value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
         }
       });
     }

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

@@ -2,6 +2,7 @@ import useUI from "../composables/useUI.js";
 import { cx, cva } from "../utils/utilUI.js";
 
 import { computed, watchEffect } from "vue";
+import { merge } from "lodash-es";
 
 import defaultConfig from "./config.js";
 import { POSITION } from "../composables/useAutoPosition.js";
@@ -85,39 +86,12 @@ export default function useAttrs(props, { isShownMenu, isTop, isRight, isPeriod
     }
 
     if (key === "calendar") {
-      // This watcher rewrites default calendar locales with datepicker range locales
-      // Watcher will not rewrite custom calendar locales
+      /* Merging DatePickerRange's i18n translations into Calendar's i18n translations. */
       watchEffect(() => {
-        if (!attrs[`${key}Attrs`].value.config) {
-          attrs[`${key}Attrs`].value.config = {};
-        }
-
-        if (attrs[`${key}Attrs`].value.config.i18n || !props.config.i18n) {
-          return;
-        }
-
-        attrs[`${key}Attrs`].value.config.i18n = {
-          ...config.value.i18n,
-          weekdays: {
-            shorthand: { ...config.value.i18n.weekdays.shorthand },
-            longhand: { ...config.value.i18n.weekdays.longhand },
-          },
-          months: {
-            shorthand: { ...config.value.i18n.months.shorthand },
-            longhand: { ...config.value.i18n.months.longhand },
-          },
-        };
-
-        if (props.config.i18n.weekdays.userFormat) {
-          attrs[`${key}Attrs`].value.config.i18n.userFormat = {
-            ...config.value.i18n.weekdays.userFormat,
-          };
-        }
+        const calendarConfig = attrs[`${key}Attrs`].value.config || {};
 
-        if (props.config.i18n.months.userFormat) {
-          attrs[`${key}Attrs`].value.config.i18n.userFormat = {
-            ...config.value.i18n.months.userFormat,
-          };
+        if (!calendarConfig.i18n || props.config.i18n) {
+          attrs[`${key}Attrs`].value.config.i18n = merge(calendarConfig.i18n, config.value.i18n);
         }
       });
     }

package/ui.form-select/useAttrs.js

@@ -1,104 +1,55 @@
 import { computed } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva, cx } from "../utils/utilUI.js";
+
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props, { isTop, isOpen, selectedLabel: selectedLabelValue }) {
-  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
   );
-  const attrs = {};
-
-  const caretClasses = computed(() =>
-    cva(config.value.caret)({
-      ...props,
-      error: Boolean(props.error),
-      label: Boolean(props.label),
-    }),
-  );
-
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
-
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-          error: Boolean(props.error),
-          label: Boolean(props.label),
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (key === "wrapper") {
-      const wrapperAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...wrapperAttrs.value,
-        class: cx([wrapperAttrs.value.class, isOpen.value && config.value.wrapperActive]),
-      }));
-    }
-
-    if (key === "label") {
-      const labelAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...labelAttrs.value,
-        class: cx([
-          labelAttrs.value.class,
-          isOpen.value && config.value.labelWrapperActive,
-          isTop.value && config.value.labelWrapperTop,
-        ]),
-      }));
-    }
-
-    if (key === "toggle") {
-      const toggleAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...toggleAttrs.value,
-        class: cx([toggleAttrs.value.class, caretClasses.value]),
-      }));
-    }
-
-    if (
-      key === "toggle" ||
-      key === "clear" ||
-      key === "beforeCaret" ||
-      key === "afterCaret" ||
-      key === "rightIconWrapper"
-    ) {
-      const keyAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...keyAttrs.value,
-        class: cx([keyAttrs.value.class, caretClasses.value]),
-      }));
-    }
-
-    if (key === "search") {
-      const searchAttrs = attrs[`${key}Attrs`];
 
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...searchAttrs.value,
-        class: cx([
-          searchAttrs.value.class,
-          Boolean(selectedLabelValue.value) && !isOpen.value && "w-0", // this is not configurable
-        ]),
-      }));
-    }
-  }
+  const mutatedProps = computed(() => ({
+    error: Boolean(props.error),
+    label: Boolean(props.label),
+  }));
+
+  const extendingKeys = ["caret", "wrapperActive", "labelWrapperActive", "labelWrapperTop"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+
+  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
+    wrapper: {
+      extend: computed(() => [isOpen.value && extendingKeysClasses.wrapperActive.value]),
+    },
+    label: {
+      extend: computed(() => [
+        isOpen.value && extendingKeysClasses.labelWrapperActive.value,
+        isTop.value && extendingKeysClasses.labelWrapperTop.value,
+      ]),
+    },
+    toggle: {
+      base: computed(() => [extendingKeysClasses.caret.value]),
+    },
+    clear: {
+      base: computed(() => [extendingKeysClasses.caret.value]),
+    },
+    beforeCaret: {
+      base: computed(() => [extendingKeysClasses.caret.value]),
+    },
+    afterCaret: {
+      base: computed(() => [extendingKeysClasses.caret.value]),
+    },
+    rightIconWrapper: {
+      base: computed(() => [extendingKeysClasses.caret.value]),
+    },
+    search: {
+      extend: computed(() => [Boolean(selectedLabelValue.value) && !isOpen.value && "w-0"]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.form-switch/useAttrs.js

@@ -1,39 +1,20 @@
+import { computed } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva } from "../utils/utilUI.js";
 
 import defaultConfig from "./config.js";
-import { computed } from "vue";
 
 export default function useAttrs(props, { checked }) {
-  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = 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,
-          color: getColor(props.color),
-          checked: Boolean(checked.value),
-        });
-      }
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-      return setColor(value, props.color);
-    });
+  const mutatedProps = computed(() => ({
+    checked: Boolean(checked.value),
+  }));
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.form-textarea/useAttrs.js

@@ -1,39 +1,21 @@
+import { computed } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva } from "../utils/utilUI.js";
 
 import defaultConfig from "./config.js";
-import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = 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,
-          error: Boolean(props.error),
-          label: Boolean(props.label),
-        });
-      }
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-      return value;
-    });
+  const mutatedProps = computed(() => ({
+    error: Boolean(props.error),
+    label: Boolean(props.label),
+  }));
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.377",
+  "version": "0.0.379",
   "contributions": {
     "html": {
       "description-markup": "markdown",