vueless 0.0.373 → 0.0.375

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-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,
   };
 }