vueless 0.0.189 → 0.0.191

package/composable.ui/index.js

@@ -8,15 +8,35 @@ import {
   Text,
   Fragment,
 } from "vue";
-import { cx, globalComponentConfig, strategy, getColor, setColor } from "../service.ui";
+
+import {
+  cx,
+  setColor,
+  getColor,
+  strategy,
+  nestedComponentRegEx,
+  globalComponentConfig,
+} from "../service.ui";
+
 import { cloneDeep } from "../service.helper";
 
-const strategyType = {
+const STRATEGY_TYPE = {
   merge: "merge",
   replace: "replace",
   overwrite: "overwrite",
 };
 
+const SYSTEM_CONFIG_KEY = {
+  i18n: "i18n",
+  strategy: "strategy",
+  safelist: "safelist",
+  safelistColors: "safelistColors",
+  defaultVariants: "defaultVariants",
+  compoundVariants: "compoundVariants",
+  iconNameCapitalize: "IconName",
+  iconName: "iconName",
+};
+
 /**
   Merging component configs in a given sequence (bigger number = bigger priority):
   1. Default component config
@@ -28,8 +48,8 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
   const { name: componentName } = getCurrentInstance().type;
   const globalConfig = globalComponentConfig[componentName];
 
-  const isStrategyValid = strategy && Object.values(strategyType).includes(strategy);
-  const vuelessStrategy = isStrategyValid ? strategy : strategyType.merge;
+  const isStrategyValid = strategy && Object.values(STRATEGY_TYPE).includes(strategy);
+  const vuelessStrategy = isStrategyValid ? strategy : STRATEGY_TYPE.merge;
 
   const [firstClassKey] = Object.keys(defaultConfig);
   const config = ref({});
@@ -50,7 +70,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
   function getAttrs(configKey, options) {
     const cvaClasses = options?.classes || "";
-    const isComponent = options?.isComponent;
+    const nestedComponent = options?.isComponent || getNestedComponent(defaultConfig[configKey]); // TODO: Remove `options?.isComponent` when all `attrs.composable.js` will be migranted
 
     const attrs = useAttrs();
     const isDev = import.meta.env.DEV;
@@ -60,7 +80,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
       ...attrs,
       component: isDev ? attrs.component || componentName || null : null,
       "config-key": isDev ? attrs["config-key"] || configKey || null : null,
-      "child-component": isDev && attrs.component ? componentName : null,
+      "child-component": isDev && attrs.component ? nestedComponent || componentName : null,
       "child-config-key": isDev && attrs.component ? configKey : null,
     };
 
@@ -78,7 +98,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
       const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
 
-      const attrClass = isTopLevelClassKey && !isComponent ? attrs.class : "";
+      const attrClass = isTopLevelClassKey && !nestedComponent ? attrs.class : "";
       const configKeyClass = isObject ? configKeyValue.base : configKeyValue;
 
       vuelessAttrs.value = {
@@ -96,6 +116,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
     getAttrs,
     getColor,
     setColor,
+    isSystemKey,
     hasSlotContent,
   };
 }
@@ -114,18 +135,18 @@ function getMergedConfig({ defaultConfig, globalConfig, propsConfig, vuelessStra
 
   const strategy =
     !globalConfig && !propsConfig
-      ? strategyType.merge
+      ? STRATEGY_TYPE.merge
       : propsConfig?.strategy || globalConfig?.strategy || vuelessStrategy;
 
-  if (strategy === strategyType.merge) {
+  if (strategy === STRATEGY_TYPE.merge) {
     return mergeConfigs({ defaultConfig, globalConfig, propsConfig });
   }
 
-  if (strategy === strategyType.replace) {
+  if (strategy === STRATEGY_TYPE.replace) {
     return mergeConfigs({ defaultConfig, globalConfig, propsConfig, isReplace: true });
   }
 
-  if (strategy === strategyType.overwrite) {
+  if (strategy === STRATEGY_TYPE.overwrite) {
     const isGlobalConfig = globalConfig && Object.keys(globalConfig).length;
     const isPropsConfig = propsConfig && Object.keys(propsConfig).length;
 
@@ -173,18 +194,29 @@ function mergeConfigs({
     }
   }
 
+  const {
+    i18n,
+    strategy,
+    safelist,
+    safelistColors,
+    defaultVariants,
+    compoundVariants,
+    iconNameCapitalize,
+    iconName,
+  } = SYSTEM_CONFIG_KEY;
+
   for (let key in composedConfig) {
     if (isGlobalConfig || isPropsConfig) {
-      if (key === "strategy") {
+      if (key === strategy) {
         config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
-      } else if (key === "safelist" || key === "safelistColors") {
+      } else if (key === safelist || key === safelistColors) {
         if (propsConfig[key]) {
           // eslint-disable-next-line no-console
           console.warn(`Passing '${key}' key by 'config' prop is not allowed.`);
         }
-      } else if (key === "defaultVariants") {
+      } else if (key === defaultVariants) {
         config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };
-      } else if (key === "compoundVariants") {
+      } else if (key === compoundVariants) {
         config[key] = mergeCompoundVariants({
           defaultConfig: composedConfig,
           globalConfig,
@@ -199,8 +231,8 @@ function mergeConfigs({
 
         const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
         const isEmpty = composedConfig[key] === null;
-        const isIconName = /^.*(iconName|IconName)$/.test(key);
-        const isI18n = key === "i18n";
+        const isIconName = key.includes(iconName) || key.includes(iconNameCapitalize);
+        const isI18n = key === i18n;
 
         config[key] =
           isObject && !isEmpty && !isI18n
@@ -327,6 +359,27 @@ function mergeClassesIntoConfig(config, topLevelClassKey, attrs) {
   return config;
 }
 
+/**
+ Check is config key contains component name and if contains return it.
+ @param { String | Object } value
+ @returns { String }
+ */
+function getNestedComponent(value) {
+  const classes = typeof value === "object" ? value.base || "" : value || "";
+  const match = classes.match(nestedComponentRegEx);
+
+  return match ? match[1] : "";
+}
+
+/**
+ Check is config key not contains classes or CVA config object.
+ @param { String } key
+ @returns { Boolean }
+ */
+function isSystemKey(key) {
+  return Object.values(SYSTEM_CONFIG_KEY).some((value) => value.includes(key));
+}
+
 /**
   Check if slot defined, and have a content.
   @param slot

package/package.json

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

package/service.ui/index.js

@@ -16,8 +16,12 @@ const [vuelessConfig] = Object.values(
   import.meta.glob("/vueless.config.js", { eager: true, import: "default" }),
 );
 
+export const nestedComponentRegEx = /\{U[^}]*}/g;
+
 /*
-  Export cva (class variance authority) methods extended with tailwind-merge.
+  Export cva (class variance authority) methods:
+   * extended with tailwind-merge
+   * remove all Vueless nested component names ({U...} strings) from class list string.
   It helps to make class variation switchers and removes class duplications.
   https://beta.cva.style
 */
@@ -26,7 +30,7 @@ export const {
   cx,
   compose,
 } = defineConfig({
-  hooks: { onComplete: (className) => twMerge(className) },
+  hooks: { onComplete: (className) => twMerge(className).replace(nestedComponentRegEx, "") },
 });
 
 export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVariants = {} }) =>
@@ -212,23 +216,6 @@ export default class UIService {
   setColor(classes, color) {
     return classes?.replaceAll("{color}", color);
   }
-
-  /**
-   Check is config key not contains classes or CVA config object.
-   @param { String } key
-   @returns { Boolean }
-   */
-  isSystemKey(key) {
-    return (
-      key === "i18n" ||
-      key === "strategy" ||
-      key === "safelist" ||
-      key === "safelistColors" ||
-      key === "defaultVariants" ||
-      key.includes("iconName") ||
-      key.includes("IconName")
-    );
-  }
 }
 
 export const {

package/ui.container-accordion/composables/attrs.composable.js

@@ -1,15 +1,15 @@
 import { computed } from "vue";
 import useUI from "../../composable.ui";
-import { cva, isSystemKey } from "../../service.ui";
+import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
-const componentKeys = ["icon", "divider"];
-
 export function useAttrs(props, { isOpened }) {
-  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
-  // New approach of defining attrs dynamically (need to test).
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
@@ -27,11 +27,12 @@ export function useAttrs(props, { isOpened }) {
       );
     }
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes, isComponent: componentKeys.includes(key) });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
   }
 
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.container-accordion/configs/default.config.js

@@ -24,10 +24,10 @@ export default /*tw*/ {
       },
     },
   },
-  icon: "",
+  icon: "{UIcon}",
   expandIconName: "add",
   collapseIconName: "remove",
-  divider: "group-last:hidden",
+  divider: "{UDivider} group-last:hidden",
   defaultVariants: {
     size: "md",
   },

package/ui.form-select/composables/attrs.composable.js

@@ -1,184 +1,117 @@
+import { computed } from "vue";
 import useUI from "../../composable.ui";
 import { cva, cx } from "../../service.ui";
-
 import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
 
 export default function useAttrs(props, { isTop, isOpen, selectedLabel: selectedLabelValue }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { wrapper, innerWrapper, searchInput, selectedLabel, caret, caretClearText } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
-
-  const cvaInnerWrapper = cva({
-    base: innerWrapper.base,
-    variants: innerWrapper.variants,
-    compoundVariants: innerWrapper.compoundVariants,
-  });
-
-  const cvaSearchInput = cva({
-    base: searchInput.base,
-    variants: searchInput.variants,
-    compoundVariants: searchInput.compoundVariants,
-  });
-
-  const cvaSelectedLabel = cva({
-    base: selectedLabel.base,
-    variants: selectedLabel.variants,
-    compoundVariants: selectedLabel.compoundVariants,
-  });
-
-  const cvaCaret = cva({
-    base: caret.base,
-    variants: caret.variants,
-    compoundVariants: caret.compoundVariants,
-  });
-
-  const cvaCaretClearText = cva({
-    base: caretClearText.base,
-    variants: caretClearText.variants,
-    compoundVariants: caretClearText.compoundVariants,
-  });
-
-  const wrapperClasses = computed(() =>
-    cvaWrapper({
-      size: props.size,
-      error: Boolean(props.error),
-      disabled: props.disabled,
-      labelAlign: props.labelAlign,
-      label: Boolean(props.label),
-    }),
-  );
-
-  const innerWrapperClasses = computed(() =>
-    cvaInnerWrapper({
-      multiple: props.multiple,
-      size: props.size,
-    }),
-  );
-
-  const searchInputClasses = computed(() =>
-    cvaSearchInput({
-      size: props.size,
-    }),
-  );
-
-  const selectedLabelClasses = computed(() =>
-    cvaSelectedLabel({
-      size: props.size,
-      disabled: props.disabled,
-      multiple: props.multiple,
-    }),
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
   const caretClasses = computed(() =>
-    cvaCaret({
-      size: props.size,
-      labelAlign: props.labelAlign,
+    cva(config.value.caret)({
+      ...props,
+      error: Boolean(props.error),
       label: Boolean(props.label),
     }),
   );
 
-  const caretClearTextClasses = computed(() =>
-    cvaCaretClearText({
-      size: props.size,
-    }),
-  );
-
-  const innerWrapperAttrs = getAttrs("innerWrapper", { classes: innerWrapperClasses });
-  const wrapperTopAttrs = getAttrs("wrapperTop");
-  const leftSlotAttrs = getAttrs("leftSlot");
-  const searchInputAttrs = getAttrs("searchInput", { classes: searchInputClasses });
-  const selectedLabelsAttrs = getAttrs("selectedLabels");
-  const selectedLabelAttrs = getAttrs("selectedLabel", { classes: selectedLabelClasses });
-  const dropdownListAttrs = getAttrs("dropdownList", { isComponent: true });
-  const caretClearTextAttrs = getAttrs("caretClearText", { classes: caretClearTextClasses });
-  const caretRemoveItemAttrs = getAttrs("caretRemoveItem");
-  const toggleIconAttrs = getAttrs("toggleIcon", { isComponent: true });
-  const clearIconAttrs = getAttrs("clearIcon", { isComponent: true });
-  const removeItemIconAttrs = getAttrs("removeItemIcon", { isComponent: true });
-
-  const wrapperAttrsRaw = getAttrs("wrapper", { classes: wrapperClasses });
-
-  const wrapperAttrs = computed(() => ({
-    ...wrapperAttrsRaw.value,
-    class: cx([wrapperAttrsRaw.value.class, isOpen.value && config.value.wrapperActive]),
-  }));
-
-  const labelAttrsRaw = getAttrs("label", { isComponent: true });
-
-  const labelAttrs = computed(() => ({
-    ...labelAttrsRaw.value,
-    class: cx([
-      labelAttrsRaw.value.class,
-      isOpen.value && config.value.labelWrapperActive,
-      isTop.value && config.value.labelWrapperTop,
-    ]),
-  }));
-
-  const caretToggleAttrsRaw = getAttrs("caretToggle");
-
-  const caretToggleAttrs = computed(() => ({
-    ...caretToggleAttrsRaw.value,
-    class: cx([caretToggleAttrsRaw.value.class, caretClasses.value]),
-  }));
-
-  const caretClearAttrsRaw = getAttrs("caretClear");
-
-  const caretClearAttrs = computed(() => ({
-    ...caretClearAttrsRaw.value,
-    class: cx([caretClearAttrsRaw.value.class, caretClasses.value]),
-  }));
-
-  const beforeCaretSlotAttrsRaw = getAttrs("beforeCaretSlot");
-
-  const beforeCaretSlotAttrs = computed(() => ({
-    ...beforeCaretSlotAttrsRaw.value,
-    class: cx([beforeCaretSlotAttrsRaw.value.class, caretClasses.value]),
-  }));
-
-  const afterCaretSlotAttrsRaw = getAttrs("afterCaretSlot");
-
-  const afterCaretSlotAttrs = computed(() => ({
-    ...afterCaretSlotAttrsRaw.value,
-    class: cx([afterCaretSlotAttrsRaw.value.class, caretClasses.value]),
-  }));
-
-  const searchAttrsRaw = getAttrs("search");
-
-  const searchAttrs = computed(() => ({
-    ...searchAttrsRaw.value,
-    class: cx([
-      searchAttrsRaw.value.class,
-      Boolean(selectedLabelValue.value) && !isOpen.value && "w-0", // this is not configurable
-    ]),
-  }));
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    let classes = "";
+    let value = config.value[key];
+
+    if (value.variants || value.compoundVariants) {
+      const getCVA = cva(value);
+
+      classes = computed(() =>
+        getCVA({
+          ...props,
+          error: Boolean(props.error),
+          label: Boolean(props.label),
+        }),
+      );
+    }
+
+    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, isOpen.value && config.value.wrapperActive]),
+      }));
+    }
+
+    if (key === "label") {
+      const labelAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...labelAttrs.value,
+        class: cx([
+          labelAttrs.value.class,
+          isOpen.value && config.value.labelWrapperActive,
+          isTop.value && config.value.labelWrapperTop,
+        ]),
+      }));
+    }
+
+    if (key === "caretToggle") {
+      const caretToggleAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...caretToggleAttrs.value,
+        class: cx([caretToggleAttrs.value.class, caretClasses.value]),
+      }));
+    }
+
+    if (key === "caretClear") {
+      const caretClearAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...caretClearAttrs.value,
+        class: cx([caretClearAttrs.value.class, caretClasses.value]),
+      }));
+    }
+
+    if (key === "beforeCaretSlot") {
+      const beforeCaretSlotAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...beforeCaretSlotAttrs.value,
+        class: cx([beforeCaretSlotAttrs.value.class, caretClasses.value]),
+      }));
+    }
+
+    if (key === "afterCaretSlot") {
+      const afterCaretSlotAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...afterCaretSlotAttrs.value,
+        class: cx([afterCaretSlotAttrs.value.class, caretClasses.value]),
+      }));
+    }
+
+    if (key === "search") {
+      const searchAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...searchAttrs.value,
+        class: cx([
+          searchAttrs.value.class,
+          Boolean(selectedLabelValue.value) && !isOpen.value && "w-0", // this is not configurable
+        ]),
+      }));
+    }
+  }
 
   return {
+    ...attrs,
     config,
     hasSlotContent,
-    labelAttrs,
-    wrapperAttrs,
-    innerWrapperAttrs,
-    wrapperTopAttrs,
-    leftSlotAttrs,
-    beforeCaretSlotAttrs,
-    afterCaretSlotAttrs,
-    caretToggleAttrs,
-    caretClearAttrs,
-    caretClearTextAttrs,
-    caretRemoveItemAttrs,
-    searchAttrs,
-    searchInputAttrs,
-    selectedLabelsAttrs,
-    selectedLabelAttrs,
-    dropdownListAttrs,
-    toggleIconAttrs,
-    clearIconAttrs,
-    removeItemIconAttrs,
   };
 }

package/ui.form-select/configs/default.config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  label: "w-full relative",
+  label: "{ULabel} w-full relative",
   wrapper: {
     base: `
       pb-2 pt-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
@@ -55,14 +55,16 @@ export default /*tw*/ {
   beforeCaretSlot: "",
   afterCaretSlot: "mr-3",
   caretToggle: "mr-3",
-  toggleIcon: "transform transition duration-300 group-[]/active:rotate-180",
+  toggleIcon: "{UIcon} transform transition duration-300 group-[]/active:rotate-180",
   toggleIconName: "expand_more",
-  clearIcon: "",
+  clearIcon: "{UIcon}",
   clearIconName: "close_small",
-  removeItemIcon: "",
+  removeItemIcon: "{UIcon}",
   removeItemIconName: "close_small",
   caretRemoveItem: "flex items-center",
+  caretClear: "",
   caretClearText: {
+    // TODO: caretClearMultiple is better
     base: "cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:text-gray-500 transition",
     compoundVariants: [
       { size: "sm", class: "text-sm" },
@@ -110,7 +112,7 @@ export default /*tw*/ {
       { size: "lg", multiple: true, class: "text-lg" },
     ],
   },
-  dropdownList: "group-[]/top:bottom-full group-[]/top:top-auto top-full",
+  dropdownList: "{UDropdownList} group-[]/top:bottom-full group-[]/top:top-auto top-full",
   i18n: {
     listIsEmpty: "List is empty.",
     noDataToShow: "No data to show.",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.189",
+  "version": "0.0.191",
   "contributions": {
     "html": {
       "description-markup": "markdown",