vueless 0.0.190 → 0.0.192

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.190",
+  "version": "0.0.192",
   "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,12 +1,13 @@
 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, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
   for (const key in defaultConfig) {
@@ -26,7 +27,7 @@ export function useAttrs(props, { isOpened }) {
       );
     }
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes, isComponent: componentKeys.includes(key) });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
   }
 
   return {

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,12 +1,13 @@
 import { computed } from "vue";
 import useUI from "../../composable.ui";
-import { cva, cx, isSystemKey } from "../../service.ui";
+import { cva, cx } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
-const componentKeys = ["dropdownList", "toggleIcon", "clearIcon", "removeItemIcon", "label"];
-
 export default function useAttrs(props, { isTop, isOpen, selectedLabel: selectedLabelValue }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
   const caretClasses = computed(() =>
@@ -35,7 +36,7 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
       );
     }
 
-    attrs[`${key}Attrs`] = getAttrs(key, { classes, isComponent: componentKeys.includes(key) });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
     if (key === "wrapper") {
       const wrapperAttrs = attrs[`${key}Attrs`];

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,11 +55,11 @@ 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: "",
@@ -112,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/ui.loader/composables/attrs.composable.js

@@ -47,5 +47,6 @@ export function useAttrs(props) {
   return {
     loaderAttrs,
     ellipseAttrs,
+    config,
   };
 }

package/ui.loader/configs/default.config.js

@@ -41,9 +41,17 @@ export default /*tw*/ {
       },
     },
   },
+  loaderTransition: {
+    moveClass: "transition duration-500",
+    enterActiveClass: "transition duration-500",
+    leaveActiveClass: "transition duration-500 absolute",
+    enterFromClass: "opacity-0",
+    leaveToClass: "opacity-0",
+  },
   defaultVariants: {
     color: "brand",
     size: "md",
+    loading: true,
   },
   safelist: (colors) => [{ pattern: `bg-(${colors})-600` }],
 };

package/ui.loader/index.vue

@@ -1,7 +1,13 @@
 <template>
-  <div v-bind="loaderAttrs">
-    <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs(ellipseClasses)" />
-  </div>
+  <Transition v-bind="config.loaderTransition">
+    <div v-if="!loading" v-bind="loaderAttrs">
+      <div
+        v-for="ellipse in ELLIPSES_AMOUNT"
+        :key="ellipse"
+        v-bind="ellipseAttrs(ellipseClasses)"
+      />
+    </div>
+  </Transition>
 </template>
 
 <script setup>
@@ -33,11 +39,19 @@ const props = defineProps({
     type: String,
     default: UIService.get(defaultConfig, ULoader).default.color,
   },
+
+  /**
+   * Turn off/on loader.
+   */
+  loading: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULoader).default.loading,
+  },
 });
 
 const ELLIPSES_AMOUNT = 4;
 
-const { loaderAttrs, ellipseAttrs } = useAttrs(props);
+const { loaderAttrs, ellipseAttrs, config } = useAttrs(props);
 
 const ellipseClasses = computed(() => [
   "vueless-internal-loader-ellipse",

package/ui.loader-rendering/composables/attrs.composable.js

@@ -23,7 +23,7 @@ export function useAttrs(props) {
     ),
   );
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses, isComponent: true });
 
   return {
     wrapperAttrs,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.190",
+  "version": "0.0.192",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4746,6 +4746,15 @@
                 "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
               },
               "default": "brand"
+            },
+            {
+              "name": "loading",
+              "description": "Turn off/on loader.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
             }
           ],
           "source": {