vueless 0.0.375 → 0.0.377

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.375",
+  "version": "0.0.377",
   "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.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/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.375",
+  "version": "0.0.377",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2252,6 +2252,9 @@
               "bindings": [
                 {
                   "name": "item"
+                },
+                {
+                  "name": "active"
                 }
               ]
             },
@@ -8006,7 +8009,7 @@
               "description": "Tab value.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "string|number"
               },
               "default": "\"\""
             },