vueless 0.0.479 → 0.0.481

package/utils/{utilTheme.js → theme.ts}

@@ -1,24 +1,41 @@
-import colors from "tailwindcss/colors.js";
+import { merge } from "lodash-es";
+import tailwindColors from "tailwindcss/colors.js";
 
-import { vuelessConfig } from "./utilUI.js";
-import { isSSR, isCSR } from "./utilHelper.js";
+import { tailwindConfig } from "./tailwindConfig.ts";
+import { vuelessConfig } from "./ui.ts";
+import { isSSR, isCSR } from "./helper.ts";
 import {
-  GRAY_COLOR,
-  COOL_COLOR,
   BRAND_COLORS,
   GRAYSCALE_COLOR,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
-  DEFAULT_RING_OFFSET_COLOR_LIGHT,
-  DEFAULT_RING_OFFSET_COLOR_DARK,
   DEFAULT_ROUNDING,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
+  DEFAULT_RING_OFFSET_COLOR_LIGHT,
+  DEFAULT_RING_OFFSET_COLOR_DARK,
   DARK_MODE_SELECTOR,
   GRAY_COLORS,
   PX_IN_REM,
+  COOL_COLOR,
+  GRAY_COLOR,
+  LIGHT_MODE_SELECTOR,
 } from "../constants.js";
 
+import type {
+  ThemeConfig,
+  GrayColors,
+  BrandColors,
+  VuelessCssVariables,
+  TailwindColorShades,
+} from "../types.ts";
+
+type DefaultColors = typeof tailwindColors;
+
+interface InternalThemeConfig extends ThemeConfig {
+  systemDarkMode?: boolean;
+}
+
 export function themeInit() {
   if (isSSR) return;
 
@@ -31,26 +48,30 @@ export function themeInit() {
   );
 }
 
-export function setTheme(config = {}) {
+export function setTheme(config: InternalThemeConfig = {}) {
   const isDarkMode = setDarkMode(config);
+  const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
+
+  let brand: BrandColors | GrayColors | typeof GRAY_COLOR =
+    config?.brand ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;
+
+  let gray: GrayColors | typeof GRAY_COLOR =
+    config?.gray ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
+
   const ring = config?.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
   const ringOffset = config?.ringOffset ?? vuelessConfig.ringOffset ?? DEFAULT_RING_OFFSET;
 
-  const defaultRingOffsetColorDark =
+  const ringOffsetColorDark =
     config?.ringOffsetColorDark ??
     vuelessConfig.ringOffsetColorDark ??
     DEFAULT_RING_OFFSET_COLOR_DARK;
 
-  const defaultRingOffsetColorLight =
+  const ringOffsetColorLight =
     config?.ringOffsetColorLight ??
     vuelessConfig.ringOffsetColorLight ??
     DEFAULT_RING_OFFSET_COLOR_LIGHT;
 
-  const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
-  let brand = config?.brand ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;
-  let gray = config?.gray ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
-
-  const isBrandColor = BRAND_COLORS.some((color) => color === brand);
+  const isBrandColor = [...BRAND_COLORS, GRAYSCALE_COLOR].some((color) => color === brand);
   const isGrayColor = GRAY_COLORS.some((color) => color === gray);
 
   if (!isBrandColor) {
@@ -65,9 +86,7 @@ export function setTheme(config = {}) {
 
   const defaultBrandShade = isDarkMode ? 400 : 600;
   const defaultGrayShade = isDarkMode ? 400 : 600;
-  const defaultRingOffsetColor = isDarkMode
-    ? defaultRingOffsetColorDark
-    : defaultRingOffsetColorLight;
+  const defaultRingOffsetColor = isDarkMode ? ringOffsetColorDark : ringOffsetColorLight;
 
   if (gray === COOL_COLOR) {
     gray = GRAY_COLOR;
@@ -77,21 +96,31 @@ export function setTheme(config = {}) {
     brand = gray;
   }
 
-  const variables = {
+  const colors: DefaultColors = merge(tailwindColors, tailwindConfig?.theme?.extend?.colors || {});
+
+  const variables: Partial<VuelessCssVariables> = {
+    "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
     "--vl-ring": `${ring}px`,
     "--vl-ring-offset": `${ringOffset}px`,
-    "--vl-ring-offset-color": `rgb(${convertHexInRgb(defaultRingOffsetColor)})`,
-    "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
+    "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
     "--vl-color-gray-default": convertHexInRgb(colors[gray][defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand][defaultGrayShade]),
   };
 
   for (const key in colors[gray]) {
-    variables[`--vl-color-gray-${key}`] = convertHexInRgb(colors[gray][key]);
+    const shade = key as unknown as keyof TailwindColorShades;
+
+    variables[`--vl-color-gray-${key}` as keyof VuelessCssVariables] = convertHexInRgb(
+      colors[gray][shade],
+    );
   }
 
   for (const key in colors[brand]) {
-    variables[`--vl-color-brand-${key}`] = convertHexInRgb(colors[brand][key]);
+    const shade = key as unknown as keyof TailwindColorShades;
+
+    variables[`--vl-color-brand-${key}` as keyof VuelessCssVariables] = convertHexInRgb(
+      colors[brand][shade],
+    );
   }
 
   const stringVariables = Object.entries(variables)
@@ -110,26 +139,32 @@ export function setTheme(config = {}) {
   return rootVariables;
 }
 
-function setDarkMode(config) {
+function setDarkMode(config: InternalThemeConfig) {
   config?.darkMode === undefined
     ? isCSR && localStorage.removeItem(DARK_MODE_SELECTOR)
-    : isCSR && localStorage.setItem(DARK_MODE_SELECTOR, Number(!!config?.darkMode));
+    : isCSR && localStorage.setItem(DARK_MODE_SELECTOR, Number(config?.darkMode).toString());
 
   const storedDarkMode = isCSR ? localStorage.getItem(DARK_MODE_SELECTOR) : null;
 
-  let isDarkMode =
+  const isDarkMode =
     storedDarkMode !== null
       ? !!Number(storedDarkMode)
       : !!(config?.darkMode ?? vuelessConfig.darkMode ?? config?.systemDarkMode);
 
-  isDarkMode
-    ? isCSR && document.documentElement.classList.add(DARK_MODE_SELECTOR)
-    : isCSR && document.documentElement.classList.remove(DARK_MODE_SELECTOR);
+  if (isCSR) {
+    if (isDarkMode) {
+      document.documentElement.classList.remove(LIGHT_MODE_SELECTOR);
+      document.documentElement.classList.add(DARK_MODE_SELECTOR);
+    } else {
+      document.documentElement.classList.remove(DARK_MODE_SELECTOR);
+      document.documentElement.classList.add(LIGHT_MODE_SELECTOR);
+    }
+  }
 
   return isDarkMode;
 }
 
-export function convertHexInRgb(hex) {
+export function convertHexInRgb(hex: string) {
   const color = hex.replace(/#/g, "");
 
   let r, g, b;

package/utils/ui.ts

@@ -0,0 +1,129 @@
+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 {
+  BRAND_COLOR,
+  GRAYSCALE_COLOR,
+  DEFAULT_BRAND_COLOR,
+  NESTED_COMPONENT_REG_EXP,
+  TAILWIND_MERGE_EXTENSION,
+} from "../constants.js";
+
+import type { BrandColors, Config, ComponentNames, Component, Defaults } from "../types.ts";
+
+/**
+ * Load Vueless config from the project root.
+ * Both for server and client side renderings.
+ * IIFE for SSR is used to prevent top level await issue.
+ */
+export let vuelessConfig: Config = {};
+
+if (isSSR) {
+  /* Load Vueless config from the project root in IIFE (no top-level await). */
+  (async () => {
+    try {
+      const filePath = `${process.cwd()}/vueless.config`;
+
+      vuelessConfig = (await import(/* @vite-ignore */ `${filePath}.js`)).default;
+
+      if (!vuelessConfig) {
+        vuelessConfig = (await import(/* @vite-ignore */ `${filePath}.ts`)).default;
+      }
+    } catch {
+      vuelessConfig = {};
+    }
+  })();
+}
+
+if (isCSR) {
+  vuelessConfig =
+    Object.values(
+      import.meta.glob("/vueless.config.{js,ts}", { eager: true, import: "default" }),
+    )[0] || {};
+}
+
+/**
+ * Extend twMerge (tailwind merge) by vueless and user config:
+ * All list of rules available here:
+ * https://github.com/dcastil/tailwind-merge/blob/v2.3.0/src/lib/default-config.ts
+ */
+const twMerge = extendTailwindMerge(merge(TAILWIND_MERGE_EXTENSION, vuelessConfig.tailwindMerge));
+
+/**
+ * Export cva (class variance authority) methods:
+ * – extended with tailwind-merge
+ * – remove all Vueless nested component names ({U...} strings) from class list string.
+ * Learn more here: https://beta.cva.style
+ */
+export const {
+  cx,
+  compose,
+  cva: classVarianceAuthority,
+} = defineConfig({
+  hooks: {
+    onComplete: (classNames) => twMerge(classNames).replace(NESTED_COMPONENT_REG_EXP, ""),
+  },
+});
+
+export const mergeConfigs = createMergeConfigsFunction(cx);
+
+/* This allows skipping some CVA config keys in vueless config. */
+export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVariants = {} }) =>
+  classVarianceAuthority({
+    base,
+    variants,
+    compoundVariants,
+    defaultVariants,
+  });
+
+/**
+ * Return default values for component props, icons, etc..
+ */
+export function getDefault<T>(defaultConfig: Component, name: ComponentNames): T {
+  const componentDefaults = cloneDeep(defaultConfig.defaults) || {};
+  const globalDefaults = cloneDeep(vuelessConfig.component?.[name]?.defaults) || {};
+
+  const defaults = merge(componentDefaults, globalDefaults) as T & Defaults;
+
+  if (defaults.color) {
+    defaults.color = getColor(defaults.color as BrandColors);
+  }
+
+  return defaults;
+}
+
+/**
+ * Return `grayscale` color if in component config it `brand` but in vueless config it `grayscale`
+ * Otherwise return given color.
+ */
+export function getColor(color: string) {
+  const isBrandColorGrayscale = (vuelessConfig.brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR;
+  const isComponentColorBrand = color === BRAND_COLOR;
+
+  return isBrandColorGrayscale && isComponentColorBrand ? GRAYSCALE_COLOR : color;
+}
+
+/**
+ * Replace in tailwind classes `{color}` variable into given color.
+ */
+export function setColor(classes: string, color: string) {
+  return classes?.replace(/{color}/g, color);
+}
+
+/**
+ * Generates simple unique identifier.
+ */
+export function getRandomId(length = 15) {
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+  const charactersLength = characters.length;
+
+  let id = "";
+
+  while (id.length < length) {
+    id += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+
+  return id;
+}