vueless 0.0.376 → 0.0.378

package/package.json

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

package/ui.data-list/UDataList.vue

@@ -39,12 +39,12 @@
               />
             </slot>
 
-            <div v-bind="labelAttrs(element.isActive)">
+            <div v-bind="isActive(element) ? labelAttrs : labelCrossedAttrs">
               <!--
                 @slot Use it to modify label.
                 @binding {object} item
               -->
-              <slot name="label" :item="element">
+              <slot name="label" :item="element" :active="isActive(element)">
                 {{ element[labelKey] }}
               </slot>
             </div>
@@ -113,9 +113,9 @@
             @click-edit="onClickEdit"
             @drag-sort="onDragEnd"
           >
-            <template #label="{ item }">
-              <slot name="label" :item="item">
-                <div v-bind="labelAttrs" v-text="item[labelKey]" />
+            <template #label="{ item, active }">
+              <slot name="label" :item="item" :active="active">
+                <div v-bind="active ? labelCrossedAttrs : labelAttrs" v-text="item[labelKey]" />
               </slot>
             </template>
 
@@ -290,6 +290,7 @@ const {
   itemWrapperAttrs,
   itemAttrs,
   labelAttrs,
+  labelCrossedAttrs,
   customActionsAttrs,
   deleteIconAttrs,
   editIconAttrs,
@@ -311,6 +312,10 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
+function isActive(element) {
+  return element.isActive === undefined || element.isActive;
+}
+
 function onDragMove(event) {
   const isDisabledNestingItem = event.draggedContext.element.isDisabledNesting;
   const isNestingAction = !event.relatedContext.element?.isDisabledNesting;

package/ui.data-list/useAttrs.js

@@ -1,48 +1,15 @@
 import useUI from "../composables/useUI.js";
+
 import defaultConfig from "./config.js";
-import { computed } from "vue";
-import { cva, cx } from "../utils/utilUI.js";
 
 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,
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (key === "label") {
-      const labelAttrs = attrs[`${key}Attrs`];
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-      attrs[`${key}Attrs`] = computed(() => (isActive) => ({
-        ...labelAttrs,
-        class: cx([
-          labelAttrs.value.class,
-          isActive !== undefined && !isActive ? config.value.labelCrossed : "",
-        ]),
-      }));
-    }
-  }
+  const keysAttrs = getKeysAttrs();
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

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-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/ui.image-avatar/useAttrs.js

@@ -1,38 +1,15 @@
 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, 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 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.image-icon/useAttrs.js

@@ -1,38 +1,15 @@
 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, 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 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/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.376",
+  "version": "0.0.378",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2252,6 +2252,9 @@
               "bindings": [
                 {
                   "name": "item"
+                },
+                {
+                  "name": "active"
                 }
               ]
             },