vueless 0.0.376 → 0.0.377

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.376",
+  "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/web-types.json

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