vueless 0.0.374 → 0.0.376

package/composables/useUI.js

@@ -62,17 +62,19 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
    */
   function getClasses(key, mutatedProps = {}) {
     return computed(() => {
+      const color = toValue(mutatedProps)?.color || props.color;
+
       let value = config.value[key];
 
       if (isCVA(value)) {
         value = cva(value)({
           ...props,
           ...toValue(mutatedProps),
-          color: props.color ? getColor(props.color) : null,
+          color: color ? getColor(color) : null,
         });
       }
 
-      return props.color ? setColor(value, props.color) : value;
+      return color ? setColor(value, color) : value;
     });
   }
 

package/package.json

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

package/ui.form-input/useAttrs.js

@@ -1,38 +1,21 @@
 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, 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.form-input-file/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";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, 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(() => ({
+    error: Boolean(props.error),
+    label: Boolean(props.label),
+  }));
 
-    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 });
-  }
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.form-input-money/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-input-number/useAttrs.js

@@ -1,37 +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, 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,
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs();
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.form-input-rating/useAttrs.js

@@ -1,36 +1,14 @@
-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, hasSlotContent, isSystemKey, 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,
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs();
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.form-input-search/useAttrs.js

@@ -1,36 +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, 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;
-    });
+  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-label/useAttrs.js

@@ -1,38 +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) {
-  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),
-        });
-      }
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-      return value;
-    });
+  const mutatedProps = computed(() => ({
+    error: Boolean(props.error),
+  }));
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.form-radio/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, { radioColor, radioSize }) {
-  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: radioColor.value,
+    size: radioSize.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: radioSize.value,
-          label: Boolean(props.label),
-          error: Boolean(props.error),
-          color: getColor(radioColor.value),
-        });
-      }
-
-      return setColor(value, radioColor.value);
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

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

@@ -1,38 +1,15 @@
-import { computed } from "vue";
-
-import { cva } from "../utils/utilUI.js";
 import useUI from "../composables/useUI.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.loader/ULoader.vue

@@ -3,18 +3,13 @@
     <div v-if="loading" v-bind="loaderAttrs">
       <!-- @slot Use it to add something instead of the default loader. -->
       <slot>
-        <div
-          v-for="ellipse in ELLIPSES_AMOUNT"
-          :key="ellipse"
-          v-bind="ellipseAttrs(ellipseClasses)"
-        />
+        <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs" />
       </slot>
     </div>
   </Transition>
 </template>
 
 <script setup>
-import { computed } from "vue";
 import { getDefault } from "../utils/utilUI.js";
 
 import { ULoader, ELLIPSES_AMOUNT } from "./constants.js";
@@ -52,55 +47,50 @@ const props = defineProps({
 });
 
 const { loaderAttrs, ellipseAttrs, config } = useAttrs(props);
-
-const ellipseClasses = computed(() => [
-  "vueless-loader-ellipse",
-  `vueless-loader-ellipse-${props.size}`,
-]);
 </script>
 
 <style scoped lang="postcss">
 .vueless-loader-ellipse {
   &:nth-child(1) {
-    animation: lds-ellipsis1 0.6s infinite;
+    animation: ellipse-1 0.6s infinite;
   }
 
   &:nth-child(4) {
-    animation: lds-ellipsis3 0.6s infinite;
+    animation: ellipse-3 0.6s infinite;
   }
 
   &-sm {
     &:nth-child(2) {
-      animation: lds-ellipsis2-sm 0.6s infinite;
+      animation: ellipse-2-sm 0.6s infinite;
     }
 
     &:nth-child(3) {
-      animation: lds-ellipsis2-sm 0.6s infinite;
+      animation: ellipse-2-sm 0.6s infinite;
     }
   }
 
   &-md {
     &:nth-child(2) {
-      animation: lds-ellipsis2-md 0.6s infinite;
+      animation: ellipse-2-md 0.6s infinite;
     }
 
     &:nth-child(3) {
-      animation: lds-ellipsis2-md 0.6s infinite;
+      animation: ellipse-2-md 0.6s infinite;
     }
   }
 
   &-lg {
     &:nth-child(2) {
-      animation: lds-ellipsis2-lg 0.6s infinite;
+      animation: ellipse-2-lg 0.6s infinite;
     }
 
     &:nth-child(3) {
-      animation: lds-ellipsis2-lg 0.6s infinite;
+      animation: ellipse-2-lg 0.6s infinite;
     }
   }
 }
 
-@keyframes lds-ellipsis1 {
+@keyframes ellipse-1 {
   0% {
     transform: scale(0);
   }
@@ -109,7 +99,7 @@ const ellipseClasses = computed(() => [
   }
 }
 
-@keyframes lds-ellipsis3 {
+@keyframes ellipse-3 {
   0% {
     transform: scale(1);
   }
@@ -118,7 +108,7 @@ const ellipseClasses = computed(() => [
   }
 }
 
-@keyframes lds-ellipsis2-sm {
+@keyframes ellipse-2-sm {
   0% {
     transform: translate(0, 0);
   }
@@ -128,7 +118,7 @@ const ellipseClasses = computed(() => [
   }
 }
 
-@keyframes lds-ellipsis2-md {
+@keyframes ellipse-2-md {
   0% {
     transform: translate(0, 0);
   }
@@ -138,7 +128,7 @@ const ellipseClasses = computed(() => [
   }
 }
 
-@keyframes lds-ellipsis2-lg {
+@keyframes ellipse-2-lg {
   0% {
     transform: translate(0, 0);
   }

package/ui.loader/useAttrs.js

@@ -1,47 +1,20 @@
+import { computed } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva, cx } 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 = {};
-
-  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 });
-
-    if (key === "ellipse") {
-      const ellipseAttrs = attrs[`${key}Attrs`];
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-      attrs[`${key}Attrs`] = computed(() => (classes) => ({
-        ...ellipseAttrs,
-        class: cx([ellipseAttrs.value.class, classes]),
-      }));
-    }
-  }
+  const keysAttrs = getKeysAttrs({}, [], {
+    ellipse: {
+      extend: computed(() => ["vueless-loader-ellipse", `vueless-loader-ellipse-${props.size}`]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.loader-rendering/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, 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.loader-top/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.navigation-pagination/useAttrs.js

@@ -1,60 +1,41 @@
+import { computed } from "vue";
 import useUI from "../composables/useUI.js";
 
 import defaultConfig from "./config.js";
-import { cva, cx } from "../utils/utilUI.js";
-import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
   );
 
-  const paginationButtonClasses = computed(() =>
-    cva(config.value.paginationButton)({
-      ...props,
-    }),
-  );
-
-  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 === "firstButton" ||
-      key === "lastButton" ||
-      key === "prevButton" ||
-      key === "nextButton" ||
-      key === "activeButton" ||
-      key === "inactiveButton"
-    ) {
-      const keyAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...keyAttrs.value,
-        class: cx([paginationButtonClasses.value, keyAttrs.value.class]),
-      }));
-    }
-  }
+  const extendingKeys = ["paginationButton"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    firstButton: {
+      base: computed(() => [extendingKeysClasses.paginationButton.value]),
+    },
+    lastButton: {
+      base: computed(() => [extendingKeysClasses.paginationButton.value]),
+    },
+    prevButton: {
+      base: computed(() => [extendingKeysClasses.paginationButton.value]),
+    },
+    nextButton: {
+      base: computed(() => [extendingKeysClasses.paginationButton.value]),
+    },
+    activeButton: {
+      base: computed(() => [extendingKeysClasses.paginationButton.value]),
+    },
+    inactiveButton: {
+      base: computed(() => [extendingKeysClasses.paginationButton.value]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.navigation-progress/UProgress.vue

@@ -16,7 +16,7 @@
       <progress v-bind="progressAttrs" :max="realMax" :value="value" />
     </template>
 
-    <div v-if="isSteps" v-bind="stepAttrs(!value && config.stepFirst)">
+    <div v-if="isSteps" v-bind="stepAttrs">
       <template v-for="(step, index) in max" :key="index">
         <!--
           @slot Use it to add something instead of the progress step label.
@@ -133,8 +133,7 @@ const props = defineProps({
   },
 });
 
-const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, stepperAttrs, config } =
-  useAttrs(props);
+const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, stepperAttrs } = useAttrs(props);
 
 const isSteps = computed(() => Array.isArray(props.max));
 

package/ui.navigation-progress/useAttrs.js

@@ -1,48 +1,26 @@
+import { computed } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva, cx } 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(
+  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,
-          color: getColor(props.color),
-        });
-      }
-
-      return setColor(value, props.color);
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (key === "step") {
-      const stepAttrs = attrs[`${key}Attrs`];
+  const extendingKeys = ["stepFirst"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
-      attrs[`${key}Attrs`] = computed(() => (classes) => ({
-        ...stepAttrs,
-        class: cx([stepAttrs.value.class, classes]),
-      }));
-    }
-  }
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    step: {
+      base: computed(() => [!props.value && extendingKeysClasses.stepFirst.value]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.navigation-tab/UTab.vue

@@ -36,7 +36,7 @@ const props = defineProps({
    * Tab value.
    */
   value: {
-    type: String,
+    type: [String, Number],
     default: "",
   },
 

package/ui.navigation-tab/config.js

@@ -10,11 +10,9 @@ export default /*tw*/ {
       disabled: {
         true: "text-gray-400 cursor-not-allowed",
       },
-      selected: {
-        true: "border-b-2 text-brand-700 border-brand-700",
-      },
     },
   },
+  tabActive: "border-b-2 text-brand-700 border-brand-700",
   defaults: {
     size: "md",
     disabled: false,

package/ui.navigation-tab/useAttrs.js

@@ -1,39 +1,30 @@
 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, { selected, size }) {
-  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 mutatedProps = computed(() => ({
+    size: size.value,
+  }));
 
-    const classes = computed(() => {
-      let value = config.value[key];
+  const extendingKeys = ["tabActive"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-          size: size.value,
-          selected: selected.value,
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs(mutatedProps, extendingKeys, {
+    tab: {
+      extend: computed(() => [selected.value && extendingKeysClasses.tabActive.value]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.navigation-tabs/useAttrs.js

@@ -1,37 +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, 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,
-        });
-      }
-
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs();
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.other-dot/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.374",
+  "version": "0.0.376",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -8006,7 +8006,7 @@
               "description": "Tab value.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "string|number"
               },
               "default": "\"\""
             },