vueless 0.0.372 → 0.0.374

package/ui.container-page/useAttrs.js

@@ -1,62 +1,36 @@
+import { computed } from "vue";
 import useUI from "../composables/useUI.js";
-import { cva, cx } from "../utils/utilUI.js";
 import { isMobileApp } from "../utils/utilPlatform.js";
 
 import defaultConfig from "./config.js";
-import { computed } from "vue";
 
 export default function useAttrs(props, { isMobileBreakpoint }) {
-  const { config, getAttrs, hasSlotContent, isSystemKey, 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,
-        });
-      }
-
-      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,
-          isMobileBreakpoint.value && !isMobileApp && config.value.wrapperMobile,
-        ]),
-      }));
-    }
-
-    if (key === "footer") {
-      const footerAttrs = attrs[`${key}Attrs`];
 
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...footerAttrs.value,
-        class: cx([
-          footerAttrs.value.class,
-          props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
-        ]),
-      }));
-    }
-  }
+  const extendingKeys = ["wrapperMobile", "footerMobileReverse"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    wrapper: {
+      extend: computed(() => [
+        isMobileBreakpoint.value && !isMobileApp && extendingKeysClasses.wrapperMobile.value,
+      ]),
+    },
+    footer: {
+      extend: computed(() => [
+        props.mobileFooterReverse &&
+          isMobileBreakpoint.value &&
+          extendingKeysClasses.footerMobileReverse.value,
+      ]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.container-row/useAttrs.js

@@ -1,36 +1,15 @@
 import useUI from "../composables/useUI.js";
+
 import defaultConfig from "./config.js";
-import { cva } from "../utils/utilUI.js";
-import { computed } from "vue";
 
 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.dropdown-badge/useAttrs.js

@@ -1,50 +1,28 @@
+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, { isShownOptions }) {
-  const { config, getColor, setColor, getAttrs, hasSlotContent, isSystemKey, 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 === "dropdownBadge") {
-      const badgeAttrs = attrs[`${key}Attrs`];
+  const extendingKeys = ["dropdownBadgeActive"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...badgeAttrs.value,
-        class: cx([
-          badgeAttrs.value.class,
-          isShownOptions.value && setColor(config.value.dropdownBadgeActive, props.color),
-        ]),
-      }));
-    }
-  }
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    dropdownBadge: {
+      extend: computed(() => [
+        isShownOptions.value && extendingKeysClasses.dropdownBadgeActive.value,
+      ]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.dropdown-link/useAttrs.js

@@ -1,50 +1,28 @@
+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, { isShownOptions }) {
-  const { config, getColor, setColor, getAttrs, hasSlotContent, isSystemKey, 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 === "dropdownLink") {
-      const linkAttrs = attrs[`${key}Attrs`];
+  const extendingKeys = ["dropdownLinkActive"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...linkAttrs.value,
-        class: cx([
-          linkAttrs.value.class,
-          isShownOptions.value && setColor(config.value.dropdownLinkActive, props.color),
-        ]),
-      }));
-    }
-  }
+  const keysAttrs = getKeysAttrs({}, extendingKeys, {
+    dropdownLink: {
+      extend: computed(() => [
+        isShownOptions.value && extendingKeysClasses.dropdownLinkActive.value,
+      ]),
+    },
+  });
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.dropdown-list/UDropdownList.vue

@@ -34,10 +34,10 @@
           <slot name="before-option" :option="option" :index="index" />
 
           <!--
-              @slot Use it to add something instead of the option.
-              @binding {object} option
-              @binding {number} index
-            -->
+            @slot Use it to add something instead of the option.
+            @binding {object} option
+            @binding {number} index
+          -->
           <slot name="option" :option="option" :index="index">
             <span
               :style="getMarginForSubCategory(option.level)"
@@ -47,10 +47,10 @@
           </slot>
 
           <!--
-              @slot Use it to add something after the option.
-              @binding {object} option
-              @binding {number} index
-            -->
+            @slot Use it to add something after the option.
+            @binding {object} option
+            @binding {number} index
+          -->
           <slot name="after-option" :option="option" :index="index" />
         </span>
 
@@ -67,15 +67,12 @@
         </template>
       </li>
 
-      <!--
-        @slot Use it to add something instead of empty state.
-        @binding {string} emptyStyles
-      -->
-      <slot name="empty" :empty-styles="optionClasses">
-        <span v-if="!options.length" v-bind="optionAttrs">
+      <div v-if="!options.length" v-bind="optionAttrs">
+        <!-- @slot Use it to add something instead of empty state. -->
+        <slot name="empty">
           <span v-bind="optionContentAttrs" v-text="currentLocale.noDataToShow" />
-        </span>
-      </slot>
+        </slot>
+      </div>
 
       <!-- Add button -->
       <template v-if="addOption">
@@ -229,7 +226,6 @@ const {
   optionAttrs,
   subGroupAttrs,
   groupAttrs,
-  optionClasses,
   optionContentAttrs,
 } = useAttrs(props);
 

package/ui.dropdown-list/useAttrs.js

@@ -1,53 +1,29 @@
+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, hasSlotContent, isSystemKey, isCVA } = useUI(
+  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
     defaultConfig,
     () => props.config,
   );
-  const attrs = {};
-
-  const optionClasses = computed(() =>
-    cva(config.value.option)({
-      ...props,
-    }),
-  );
-
-  for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
-
-    const classes = computed(() => {
-      let value = config.value[key];
 
-      if (isCVA(value)) {
-        value = cva(value)({
-          ...props,
-        });
-      }
+  const extendingKeys = ["option"];
+  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
-      return value;
-    });
-
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-
-    if (key === "group" || key === "subGroup") {
-      const keyAttrs = attrs[`${key}Attrs`];
-
-      attrs[`${key}Attrs`] = computed(() => ({
-        ...keyAttrs.value,
-        class: cx([optionClasses.value, keyAttrs.value.class]),
-      }));
-    }
-  }
+  const keysAttrs = getKeysAttrs({}, [], {
+    group: {
+      base: computed(() => [extendingKeysClasses.option.value]),
+    },
+    subGroup: {
+      base: computed(() => [extendingKeysClasses.option.value]),
+    },
+  });
 
   return {
-    ...attrs,
-    optionClasses,
-    hasSlotContent,
     config,
+    ...keysAttrs,
+    hasSlotContent,
   };
 }

package/ui.form-select/USelect.vue

@@ -294,13 +294,14 @@
           <slot name="after-option" :option="option" :index="index" />
         </template>
 
-        <template #empty="{ emptyStyles }">
-          <span v-show="isEmpty" :class="emptyStyles" v-text="currentLocale.listIsEmpty" />
-          <span
-            v-show="options.length === 0 && !search && !isEmpty"
-            :class="emptyStyles"
-            v-text="currentLocale.noDataToShow"
-          />
+        <template #empty>
+          <template v-if="isEmpty">
+            {{ currentLocale.listIsEmpty }}
+          </template>
+
+          <template v-else>
+            {{ currentLocale.noDataToShow }}
+          </template>
         </template>
       </UDropdownList>
     </div>

package/ui.image-avatar/UAvatar.vue

@@ -10,17 +10,23 @@
       <template v-if="labelFirstLetters">{{ labelFirstLetters }}</template>
       <!--
         @slot Use it to add something instead of the avatar image placeholder.
+        @binding {string} icon-name
         @binding {string} icon-color
         @binding {string} icon-size
       -->
       <slot
         v-else
         name="placeholder"
-        :icon-name="icon"
+        :icon-name="placeholderIcon"
         :icon-color="componentColor"
         :icon-size="size"
       >
-        <UIcon :name="icon" :color="componentColor" :size="size" v-bind="placeholderIconAttrs" />
+        <UIcon
+          :name="placeholderIcon"
+          :color="componentColor"
+          :size="size"
+          v-bind="placeholderIconAttrs"
+        />
       </slot>
     </template>
   </div>
@@ -58,7 +64,7 @@ const props = defineProps({
   /**
    * Avatar icon placeholder.
    */
-  icon: {
+  placeholderIcon: {
     type: String,
     default: getDefault(defaultConfig, UAvatar).placeholderIcon,
   },
@@ -122,6 +128,8 @@ const emit = defineEmits([
   "click",
 ]);
 
+const { avatarAttrs, placeholderIconAttrs } = useAttrs(props);
+
 const labelFirstLetters = computed(() => {
   const [firstWord, secondWord] = props.label.split(" ");
 
@@ -138,9 +146,9 @@ const backgroundImage = computed(() => {
   return props.src ? `background-image: url(${src});` : "";
 });
 
-const { avatarAttrs, placeholderIconAttrs } = useAttrs(props);
-
-const componentColor = computed(() => (props.color === "white" ? "grayscale" : props.color));
+const componentColor = computed(() => {
+  return props.color === "white" ? "grayscale" : props.color;
+});
 
 function onClick(event) {
   emit("click", event);

package/ui.text-alert/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, hasSlotContent, getColor, setColor, 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,
-          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.text-badge/useAttrs.js

@@ -1,43 +1,23 @@
 import { computed, useSlots } 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, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
   const slots = useSlots();
-  const { config, getAttrs, hasSlotContent, getColor, setColor, 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,
-          color: getColor(props.color),
-          tabindex: Boolean(~props.tabindex),
-          leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
-          rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
-        });
-      }
 
-      return setColor(value, props.color);
-    });
+  const mutatedProps = computed(() => ({
+    tabindex: Boolean(~props.tabindex),
+    leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
+    rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
+  }));
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes });
-  }
+  const keysAttrs = getKeysAttrs(mutatedProps);
 
   return {
-    ...attrs,
     config,
+    ...keysAttrs,
     hasSlotContent,
   };
 }

package/ui.text-block/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, 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.text-empty/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.text-file/UFile.vue

@@ -103,12 +103,8 @@ const focus = ref(false);
 
 const elementId = props.id || useId();
 
-const { config, fileAttrs, bodyAttrs, fileIconAttrs, fileLabelAttrs, fileImageAttrs } = useAttrs(
-  props,
-  {
-    focus,
-  },
-);
+const { config, fileAttrs, bodyAttrs, fileIconAttrs, fileLabelAttrs, fileImageAttrs } =
+  useAttrs(props);
 
 const iconSize = computed(() => {
   const sizes = {