vueless 0.0.636 → 0.0.638

package/package.json

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

package/preset-tailwind.js

@@ -22,9 +22,8 @@ import {
   GRAYSCALE_COLOR,
 } from "./constants.js";
 
-const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
-const brandColor = process.env.VUELESS_BRAND || DEFAULT_BRAND_COLOR;
-const grayColor = process.env.VUELESS_GRAY || DEFAULT_GRAY_COLOR;
+const globalSettings = process.env.VUELESS_GLOBAL_SETTINGS || {};
+const isStrategyOverride = globalSettings.strategy === "override";
 
 /**
  * Vueless Tailwind CSS `content` config.
@@ -106,15 +105,16 @@ export const vuelessTailwindConfig = {
     },
     configViewer: {
       themeReplacements: {
-        // TODO: Set colors from vueless.config.{js|ts} if it present.
-        "var(--vl-ring)": DEFAULT_RING,
-        "var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
-        "var(--vl-ring-offset-color)": DEFAULT_RING_OFFSET_COLOR_LIGHT,
-        "var(--vl-rounding-sm)": DEFAULT_ROUNDING_SM,
-        "var(--vl-rounding)": DEFAULT_ROUNDING,
-        "var(--vl-rounding-lg)": DEFAULT_ROUNDING_LG,
-        ...getReplacementColors(GRAY_COLOR, grayColor),
-        ...getReplacementColors(BRAND_COLOR, brandColor),
+        /* eslint-disable prettier/prettier */
+        "var(--vl-ring)": globalSettings.ring || DEFAULT_RING,
+        "var(--vl-ring-offset)": globalSettings.ringOffset || DEFAULT_RING_OFFSET,
+        "var(--vl-ring-offset-color)": globalSettings.ringOffsetColorLight || DEFAULT_RING_OFFSET_COLOR_LIGHT,
+        "var(--vl-rounding-sm)": globalSettings.roundingSm || DEFAULT_ROUNDING_SM,
+        "var(--vl-rounding)": globalSettings.ring || DEFAULT_ROUNDING,
+        "var(--vl-rounding-lg)": globalSettings.roundingLg || DEFAULT_ROUNDING_LG,
+        ...getReplacementColors(GRAY_COLOR, globalSettings.gray || DEFAULT_GRAY_COLOR),
+        ...getReplacementColors(BRAND_COLOR, globalSettings.brand || DEFAULT_BRAND_COLOR),
+        /* eslint-enable prettier/prettier */
       },
     },
   },

package/ui.form-date-picker/types.ts

@@ -43,11 +43,13 @@ export interface UDatePickerProps<TModelValue> {
 
   /**
    * Datepicker open direction on x-axis.
+   * @extendOnly
    */
   openDirectionX?: "auto" | "left" | "right";
 
   /**
    * Datepicker open direction on y-axis.
+   * @extendOnly
    */
   openDirectionY?: "auto" | "top" | "bottom";
 

package/ui.form-date-picker-range/types.ts

@@ -96,11 +96,13 @@ export interface UDatePickerRangeProps<TModelValue> {
 
   /**
    * Datepicker open direction on x-axis.
+   * @extendOnly
    */
   openDirectionX?: "auto" | "left" | "right";
 
   /**
    * Datepicker open direction on y-axis.
+   * @extendOnly
    */
   openDirectionY?: "auto" | "top" | "bottom";
 

package/ui.form-select/types.ts

@@ -58,6 +58,7 @@ export interface Props {
 
   /**
    * Select open direction.
+   * @extendOnly
    */
   openDirection?: "auto" | "top" | "bottom";
 

package/utils/node/tailwindSafelist.js

@@ -1,5 +1,5 @@
 import path from "node:path";
-import { merge } from "lodash-es";
+import { merge, cloneDeep } from "lodash-es";
 import { existsSync } from "node:fs";
 import { readFile } from "node:fs/promises";
 import { extendTailwindMerge } from "tailwind-merge";
@@ -11,19 +11,20 @@ import { createGetMergedConfig } from "./mergeConfigs.js";
 import { getComponentDefaultConfig, getDirFiles } from "./helper.js";
 import {
   COMPONENTS,
-  BRAND_COLORS,
-  BRAND_COLOR,
   GRAY_COLOR,
+  BRAND_COLOR,
+  BRAND_COLORS,
+  STRATEGY_TYPE,
+  SYSTEM_CONFIG_KEY,
   DYNAMIC_COLOR_PATTERN,
-  TAILWIND_VARIANT_DELIMITER,
   TAILWIND_MERGE_EXTENSION,
-  NESTED_COMPONENT_PATTERN_REG_EXP,
+  TAILWIND_VARIANT_DELIMITER,
   TAILWIND_COLOR_OPACITY_DELIMITER,
+  NESTED_COMPONENT_PATTERN_REG_EXP,
   TAILWIND_VARIANT_DELIMITER_REG_EXP,
-  STRATEGY_TYPE,
-  SYSTEM_CONFIG_KEY,
 } from "../../constants.js";
 
+const cwd = process.cwd();
 const twMerge = extendTailwindMerge(merge(TAILWIND_MERGE_EXTENSION, vuelessConfig.tailwindMerge));
 
 export const { cx } = defineConfig({
@@ -60,46 +61,38 @@ export async function createTailwindSafelist({ mode, env, debug, targetFiles = [
 
   const vuelessFiles = [...srcVueFiles, ...vuelessVueFiles, ...vuelessConfigFiles];
 
+  const safelist = [];
+
   const storybookColors = {
     colors: [...BRAND_COLORS, BRAND_COLOR, GRAY_COLOR],
     isComponentExists: true,
   };
-  const safelist = [];
 
   const componentNames = Object.keys(COMPONENTS);
 
-  for await (const component of componentNames) {
-    const defaultConfigPath = vuelessConfigFiles.find((file) =>
-      isDefaultComponentConfig(file, component),
-    );
-    const defaultConfig = await readFile(path.join(process.cwd(), defaultConfigPath), {
-      encoding: "utf-8",
-    });
-    const nestedComponents = (defaultConfig.match(/\{U\w+\}/g) || []).map(
-      (nestedComponentPattern) => nestedComponentPattern.replaceAll(/[{}]/g, ""),
-    );
-
+  for await (const componentName of componentNames) {
     const { colors, isComponentExists } = isStorybookMode
       ? storybookColors
-      : await findComponentColors(vuelessFiles, component);
+      : await findComponentColors(componentName, vuelessFiles, vuelessConfigFiles);
+
+    const defaultConfig = await retrieveComponentDefaultConfig(componentName, vuelessConfigFiles);
+    const match = JSON.stringify(defaultConfig).match(/\{U\w+\}/g) || [];
+
+    const nestedComponents = match.map((nestedComponentPattern) =>
+      nestedComponentPattern.replaceAll(/[{}]/g, ""),
+    );
 
     if (isComponentExists && colors.length) {
-      const componentSafelist = await getComponentSafelist(component, {
-        colors,
-        vuelessConfigFiles,
-        isVuelessEnv,
-      });
+      const mergedConfig = await getMergedComponentConfig(componentName, vuelessConfigFiles);
+      const componentSafelist = await getComponentSafelist(mergedConfig, colors);
 
       safelist.push(...componentSafelist);
     }
 
     if (isComponentExists && colors.length && nestedComponents.length) {
       for await (const nestedComponent of nestedComponents) {
-        const nestedComponentSafelist = await getComponentSafelist(nestedComponent, {
-          colors,
-          vuelessConfigFiles,
-          isVuelessEnv,
-        });
+        const mergedConfig = await getMergedComponentConfig(nestedComponent, vuelessConfigFiles);
+        const nestedComponentSafelist = await getComponentSafelist(mergedConfig, colors);
 
         safelist.push(...nestedComponentSafelist);
       }
@@ -113,19 +106,25 @@ export async function createTailwindSafelist({ mode, env, debug, targetFiles = [
     console.log("VUELESS_SAFELIST", mergedSafelist);
   }
 
+  const globalSettings = cloneDeep(vuelessConfig);
+
+  delete globalSettings.component;
+  delete globalSettings.directive;
+  delete globalSettings.tailwindMerge;
+
+  process.env.VUELESS_GLOBAL_SETTINGS = globalSettings;
   process.env.VUELESS_SAFELIST = JSON.stringify(mergedSafelist);
-  process.env.VUELESS_STRATEGY = vuelessConfig.strategy || "";
 }
 
 function getSafelistClasses(config) {
   const safelistItems = [];
 
   for (const key in config) {
+    if (key === SYSTEM_CONFIG_KEY.defaults) continue;
+
     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));
       }
@@ -164,47 +163,46 @@ function getSafelistItem(safelistClass, colorString) {
   }
 }
 
-async function getComponentSafelist(componentName, { colors, vuelessConfigFiles }) {
-  let defaultConfigPath = vuelessConfigFiles.find((file) =>
-    isDefaultComponentConfig(file, componentName),
-  );
-  const customConfig = vuelessConfig.component?.[componentName] || {};
-  let defaultConfig = {};
-
-  if (defaultConfigPath) {
-    const configPath = path.join(process.cwd(), defaultConfigPath);
+async function getComponentSafelist(mergedConfig, colors) {
+  const colorString = `(${colors.join("|")})`;
 
-    defaultConfig = await getComponentDefaultConfig(componentName, configPath);
-  }
+  return getSafelistClasses(mergedConfig).map((safelistClass) =>
+    getSafelistItem(safelistClass, colorString),
+  );
+}
 
+async function getMergedComponentConfig(componentName, vuelessConfigFiles) {
   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,
+  return getMergedConfig({
+    defaultConfig: await retrieveComponentDefaultConfig(componentName, vuelessConfigFiles),
+    globalConfig: vuelessConfig.component?.[componentName] || {},
+    vuelessStrategy: isStrategyValid ? vuelessConfig.strategy : STRATEGY_TYPE.merge,
   });
+}
 
-  const colorString = `(${colors.join("|")})`;
-
-  return getSafelistClasses(mergedConfig).map((safelistClass) =>
-    getSafelistItem(safelistClass, colorString),
+async function retrieveComponentDefaultConfig(componentName, vuelessConfigFiles) {
+  const componentDefaultConfigPath = vuelessConfigFiles.find((file) =>
+    isDefaultComponentConfig(file, componentName),
   );
+
+  return componentDefaultConfigPath
+    ? await getComponentDefaultConfig(componentName, path.join(cwd, componentDefaultConfigPath))
+    : {};
 }
 
-async function findComponentColors(files, componentName) {
+async function findComponentColors(componentName, files, vuelessConfigFiles) {
   const objectColorRegExp = new RegExp(/\bcolor\s*:\s*["']([^"'\s]+)["']/, "g");
   const singleColorRegExp = new RegExp(/\bcolor\s*=\s*["']([^"'\s]+)["']/);
   const ternaryColorRegExp = new RegExp(/\bcolor="[^']*'([^']*)'\s*:\s*'([^']*)'/);
 
-  const brandColor = getComponentBrandColor(componentName);
+  const mergedComponentConfig = await getMergedComponentConfig(componentName, vuelessConfigFiles);
+  const defaultColor = mergedComponentConfig.defaults?.color || vuelessConfig.brand || "";
   const colors = new Set();
 
-  if (brandColor && brandColor !== "grayscale") {
-    colors.add(brandColor);
+  if (defaultColor && defaultColor !== "grayscale") {
+    colors.add(defaultColor);
   }
 
   getSafelistColorsFromConfig().forEach((color) => colors.add(color));
@@ -253,13 +251,6 @@ async function findComponentColors(files, componentName) {
   };
 }
 
-function getComponentBrandColor(componentName) {
-  const globalBrandColor = vuelessConfig.brand || "";
-  const globalComponentConfig = vuelessConfig.component?.[componentName] || {};
-
-  return vuelessConfig.component ? globalComponentConfig.defaults?.color : globalBrandColor;
-}
-
 function isDefaultComponentConfig(filePath, componentName) {
   const componentDirName = filePath.split(path.sep).at(-2);