vueless 0.0.495 → 0.0.497

package/composables/useUI.ts

@@ -11,8 +11,8 @@ import {
   computed,
 } from "vue";
 
-import { cx, cva, setColor, getColor, vuelessConfig, mergeConfigs } from "../utils/ui.ts";
-import { cloneDeep, isCSR } from "../utils/helper.ts";
+import { cx, cva, setColor, getColor, vuelessConfig, getMergedConfig } from "../utils/ui.ts";
+import { isCSR } from "../utils/helper.ts";
 import {
   STRATEGY_TYPE,
   CVA_CONFIG_KEY,
@@ -34,13 +34,6 @@ import type {
   ExtendedKeyClasses,
 } from "../types.ts";
 
-interface MergedConfigOptions {
-  defaultConfig: Component;
-  globalConfig: Component;
-  propsConfig?: Component;
-  vuelessStrategy?: Strategies;
-}
-
 /**
  * Merging component configs in a given sequence (bigger number = bigger priority):
  * 1. Default component config
@@ -213,41 +206,6 @@ export default function useUI<T>(
   };
 }
 
-/**
- * Get merged config based on config merging strategy.
- */
-function getMergedConfig({
-  defaultConfig,
-  globalConfig,
-  propsConfig,
-  vuelessStrategy,
-}: MergedConfigOptions) {
-  defaultConfig = cloneDeep(defaultConfig) as Component;
-
-  let mergedConfig: Component = {};
-  const strategy =
-    !globalConfig && !propsConfig
-      ? STRATEGY_TYPE.merge
-      : propsConfig?.strategy || globalConfig?.strategy || vuelessStrategy;
-
-  if (strategy === STRATEGY_TYPE.merge) {
-    mergedConfig = mergeConfigs({ defaultConfig, globalConfig, propsConfig });
-  }
-
-  if (strategy === STRATEGY_TYPE.replace) {
-    mergedConfig = mergeConfigs({ defaultConfig, globalConfig, propsConfig, isReplace: true });
-  }
-
-  if (strategy === STRATEGY_TYPE.overwrite) {
-    const isGlobalConfig = globalConfig && Object.keys(globalConfig).length;
-    const isPropsConfig = propsConfig && Object.keys(propsConfig).length;
-
-    mergedConfig = isPropsConfig ? propsConfig : isGlobalConfig ? globalConfig : defaultConfig;
-  }
-
-  return mergedConfig;
-}
-
 /**
  * Return base classes.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.495",
+  "version": "0.0.497",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -558,7 +558,7 @@ function onInputCalendar(value: RangeDate) {
     <UInput
       v-if="isVariant.input"
       :id="elementId"
-      ref="inputRef"
+      ref="input"
       v-model="userFormatDate"
       :size="size"
       :label="label"

package/utils/node/mergeConfigs.js

@@ -1,8 +1,8 @@
 import { cloneDeep } from "lodash-es";
 
-import { SYSTEM_CONFIG_KEY } from "../../constants.js";
+import { SYSTEM_CONFIG_KEY, STRATEGY_TYPE } from "../../constants.js";
 
-export function createMergeConfigsFunction(cx) {
+export function createMergeConfigs(cx) {
   /**
    * Recursively merge config objects with removing tailwind classes duplicates.
    * config - final merged config.
@@ -187,6 +187,42 @@ export function createMergeConfigsFunction(cx) {
   return mergeConfigs;
 }
 
+export function createGetMergedConfig(cx) {
+  const mergeConfigs = createMergeConfigs(cx);
+
+  /**
+   * Get merged config based on config merging strategy.
+   */
+  function getMergedConfig({ defaultConfig, globalConfig, propsConfig, vuelessStrategy }) {
+    defaultConfig = cloneDeep(defaultConfig);
+
+    let mergedConfig = {};
+    const strategy =
+      !globalConfig && !propsConfig
+        ? STRATEGY_TYPE.merge
+        : propsConfig?.strategy || globalConfig?.strategy || vuelessStrategy;
+
+    if (strategy === STRATEGY_TYPE.merge) {
+      mergedConfig = mergeConfigs({ defaultConfig, globalConfig, propsConfig });
+    }
+
+    if (strategy === STRATEGY_TYPE.replace) {
+      mergedConfig = mergeConfigs({ defaultConfig, globalConfig, propsConfig, isReplace: true });
+    }
+
+    if (strategy === STRATEGY_TYPE.overwrite) {
+      const isGlobalConfig = globalConfig && Object.keys(globalConfig).length;
+      const isPropsConfig = propsConfig && Object.keys(propsConfig).length;
+
+      mergedConfig = isPropsConfig ? propsConfig : isGlobalConfig ? globalConfig : defaultConfig;
+    }
+
+    return mergedConfig;
+  }
+
+  return getMergedConfig;
+}
+
 /**
  Turn simplified nested component config to regular config.
  */

package/utils/node/tailwindSafelist.js

@@ -3,11 +3,11 @@ import { merge } from "lodash-es";
 import { existsSync } from "node:fs";
 import { readFile } from "node:fs/promises";
 import { extendTailwindMerge } from "tailwind-merge";
-import { isEqual, omit } from "lodash-es";
+import { isEqual } from "lodash-es";
 import { defineConfig } from "cva";
 
 import { vuelessConfig } from "./vuelessConfig.js";
-import { createMergeConfigsFunction } from "./mergeConfigs.js";
+import { createGetMergedConfig } from "./mergeConfigs.js";
 import { getDefaultConfigJson, getDirFiles } from "./helper.js";
 import {
   COMPONENTS,
@@ -20,6 +20,8 @@ import {
   NESTED_COMPONENT_REG_EXP,
   TAILWIND_COLOR_OPACITY_DELIMITER,
   TAILWIND_VARIANT_DELIMITER_REG_EXP,
+  STRATEGY_TYPE,
+  SYSTEM_CONFIG_KEY,
 } from "../../constants.js";
 
 const twMerge = extendTailwindMerge(merge(TAILWIND_MERGE_EXTENSION, vuelessConfig.tailwindMerge));
@@ -30,7 +32,7 @@ export const { cx } = defineConfig({
   },
 });
 
-const mergeConfigs = createMergeConfigsFunction(cx);
+const getMergedConfig = createGetMergedConfig(cx);
 
 export function clearTailwindSafelist() {
   process.env.VUELESS_SAFELIST = "";
@@ -122,6 +124,8 @@ function getSafelistClasses(config) {
     if (Object.prototype.hasOwnProperty.call(config, key)) {
       const classes = config[key];
 
+      if (key === SYSTEM_CONFIG_KEY.defaults) continue;
+
       if (typeof classes === "object" && Array.isArray(classes)) {
         safelistItems.push(...classes.map(getSafelistClasses));
       }
@@ -174,9 +178,16 @@ async function getComponentSafelist(componentName, { colors, vuelessConfigFiles
     defaultConfig = getDefaultConfigJson(defaultConfigContent);
   }
 
-  const mergedConfig = omit(mergeConfigs({ defaultConfig, globalConfig: customConfig }), [
-    "defaults",
-  ]);
+  const isStrategyValid =
+    vuelessConfig.strategy && Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy);
+
+  const vuelessStrategy = isStrategyValid ? vuelessConfig.strategy : STRATEGY_TYPE.merge;
+
+  const mergedConfig = getMergedConfig({
+    defaultConfig,
+    globalConfig: customConfig,
+    vuelessStrategy,
+  });
 
   const colorString = `(${colors.join("|")})`;
 

package/utils/ui.ts

@@ -2,7 +2,7 @@ import { merge } from "lodash-es";
 import { defineConfig } from "cva";
 import { extendTailwindMerge } from "tailwind-merge";
 import { cloneDeep, isCSR, isSSR } from "./helper.ts";
-import { createMergeConfigsFunction } from "./node/mergeConfigs.js";
+import { createGetMergedConfig } from "./node/mergeConfigs.js";
 import {
   BRAND_COLOR,
   GRAYSCALE_COLOR,
@@ -11,7 +11,23 @@ import {
   TAILWIND_MERGE_EXTENSION,
 } from "../constants.js";
 
-import type { BrandColors, Config, ComponentNames, Component, Defaults } from "../types.ts";
+import type {
+  BrandColors,
+  Config,
+  ComponentNames,
+  Component,
+  Defaults,
+  Strategies,
+} from "../types.ts";
+
+interface MergedConfigOptions {
+  defaultConfig: Component;
+  globalConfig: Component;
+  propsConfig?: Component;
+  vuelessStrategy?: Strategies;
+}
+
+type getMergedConfig = (options: MergedConfigOptions) => Component;
 
 /**
  * Load Vueless config from the project root.
@@ -67,7 +83,7 @@ export const {
   },
 });
 
-export const mergeConfigs = createMergeConfigsFunction(cx);
+export const getMergedConfig = createGetMergedConfig(cx) as getMergedConfig;
 
 /* This allows skipping some CVA config keys in vueless config. */
 export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVariants = {} }) =>

package/web-types.json

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