vueless 1.2.14 → 1.2.15-beta.2

package/composables/useUI.ts

@@ -15,9 +15,9 @@ import type {
   UseUI,
   KeyAttrs,
   KeysAttrs,
+  StateColors,
   MutatedProps,
   UnknownObject,
-  PrimaryColors,
   ComponentNames,
   NestedComponent,
   ComponentDefaults,
@@ -72,7 +72,7 @@ export default function useUI<T>(
     return computed(() => {
       const mutatedPropsValue = toValue(mutatedProps);
       const value = (config.value as ComponentConfigFull<T>)[key];
-      const color = (toValue(mutatedProps || {}).color || props.color) as PrimaryColors;
+      const color = (toValue(mutatedProps || {}).color || props.color) as StateColors;
 
       const isNestedComponent = Boolean(getNestedComponent(value));
 

package/index.d.ts

@@ -149,8 +149,11 @@ export type {
   CreateVuelessOptions,
   /* Color and theme types */
   StateColors,
+  ColorShades,
   PrimaryColors,
   NeutralColors,
+  PrimaryColorName,
+  NeutralColorName,
   VuelessCssVariables,
   /* Component and Directive types */
   Directives,

package/index.ts

@@ -155,8 +155,11 @@ export type {
   CreateVuelessOptions,
   /* Color and theme types */
   StateColors,
+  ColorShades,
   PrimaryColors,
   NeutralColors,
+  PrimaryColorName,
+  NeutralColorName,
   VuelessCssVariables,
   /* Component and Directive types */
   Directives,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.14",
+  "version": "1.2.15-beta.2",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/types.ts

@@ -220,8 +220,22 @@ export type StateColors =
   | "grayscale"
   | string;
 
-export type NeutralColors = "slate" | "gray" | "zinc" | "neutral" | "stone" | string;
-export type PrimaryColors =
+export interface ColorShades {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  950: string;
+}
+
+export type NeutralColorName = "slate" | "gray" | "zinc" | "neutral" | "stone" | string;
+export type PrimaryColorName =
   | "red"
   | "orange"
   | "amber"
@@ -241,6 +255,9 @@ export type PrimaryColors =
   | "rose"
   | string;
 
+export type NeutralColors = NeutralColorName | Partial<ColorShades>;
+export type PrimaryColors = PrimaryColorName | Partial<ColorShades>;
+
 export interface Directives {
   tooltip?: Partial<Props>;
   clickOutside?: Partial<Props>;

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

@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { PrimaryColors, NeutralColors, ComponentConfig } from "../types";
+import type { PrimaryColorName, NeutralColorName, ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 
@@ -18,12 +18,12 @@ export interface Props {
   /**
    * Color list.
    */
-  colors?: Record<PrimaryColors, string>;
+  colors?: Record<PrimaryColorName, string>;
 
   /**
    * Color labels.
    */
-  labels?: Record<NeutralColors, string>;
+  labels?: Record<NeutralColorName, string>;
 
   /**
    * Unique element id.

package/ui.other-theme-color-toggle/types.ts

@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { PrimaryColors, NeutralColors, ComponentConfig } from "../types";
+import type { PrimaryColorName, NeutralColorName, ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 
@@ -8,12 +8,12 @@ export interface Props {
   /**
    * Selected primary color (v-model).
    */
-  primary?: PrimaryColors;
+  primary?: PrimaryColorName;
 
   /**
    * Selected neutral color (v-model).
    */
-  neutral?: NeutralColors;
+  neutral?: NeutralColorName;
 
   /**
    * Component size.
@@ -23,22 +23,22 @@ export interface Props {
   /**
    * Primary color list.
    */
-  primaryColors?: Record<PrimaryColors, string>;
+  primaryColors?: Record<PrimaryColorName, string>;
 
   /**
    * Gray color list.
    */
-  neutralColors?: Record<NeutralColors, string>;
+  neutralColors?: Record<NeutralColorName, string>;
 
   /**
    * Primary color labels.
    */
-  primaryLabels?: Record<PrimaryColors, string>;
+  primaryLabels?: Record<PrimaryColorName, string>;
 
   /**
    * Gray color labels.
    */
-  neutralLabels?: Record<NeutralColors, string>;
+  neutralLabels?: Record<NeutralColorName, string>;
 
   /**
    * Unique element id.

package/utils/theme.ts

@@ -45,6 +45,7 @@ import type {
   NeutralColors,
   PrimaryColors,
   ThemeConfig,
+  ColorShades,
   ThemeConfigText,
   ThemeConfigOutline,
   ThemeConfigRounding,
@@ -359,6 +360,40 @@ export function normalizeThemeConfig(theme: any): MergedThemeConfig {
   };
 }
 
+function isColorShadesObject(color: unknown): color is Partial<ColorShades> {
+  return typeof color === "object" && color !== null && !Array.isArray(color);
+}
+
+function validateColorShades(color: Partial<ColorShades>, colorType: string) {
+  const validShades = COLOR_SHADES;
+  const providedShades = Object.keys(color);
+
+  const invalidShades = providedShades.filter((shade) => !validShades.includes(Number(shade)));
+  const missingShades = validShades.filter((shade) => !(String(shade) in color));
+
+  if (invalidShades.length > 0) {
+    const invalidShadesStr = invalidShades.join(", ");
+    const validShadesStr = validShades.join(", ");
+
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[vueless] Invalid shade keys found in ${colorType} color object: ${invalidShadesStr}. ` +
+        `Valid shades are: ${validShadesStr}.`,
+    );
+  }
+
+  if (missingShades.length > 0) {
+    const missingShadesStr = missingShades.join(", ");
+    const validShadesStr = validShades.join(", ");
+
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[vueless] Missing shade keys in ${colorType} color object: ${missingShadesStr}. ` +
+        `All shades (${validShadesStr}) should be defined.`,
+    );
+  }
+}
+
 /**
  * Determines if the provided color mode configuration has a primary color
  * that differs from the default color mode configuration.
@@ -377,13 +412,35 @@ function hasPrimaryColor(
 
 /**
  * Retrieve primary color value and save them to cookie and localStorage.
- * @return string - primary color.
+ * @return string | Partial<ColorShades> - primary color.
  */
 function getPrimaryColor(primary?: PrimaryColors) {
   const storageKey = `vl-${PRIMARY_COLOR}`;
 
+  const storedValue = getStored(storageKey);
+  let parsedStoredValue: PrimaryColors | undefined;
+
+  if (storedValue) {
+    try {
+      parsedStoredValue = JSON.parse(storedValue);
+    } catch {
+      parsedStoredValue = storedValue;
+    }
+  }
+
   let primaryColor: PrimaryColors =
-    primary ?? getStored(storageKey) ?? vuelessConfig.primary ?? DEFAULT_PRIMARY_COLOR;
+    primary ?? parsedStoredValue ?? vuelessConfig.primary ?? DEFAULT_PRIMARY_COLOR;
+
+  if (isColorShadesObject(primaryColor)) {
+    validateColorShades(primaryColor, PRIMARY_COLOR);
+
+    if (isCSR && primary) {
+      setCookie(storageKey, JSON.stringify(primaryColor));
+      localStorage.setItem(storageKey, JSON.stringify(primaryColor));
+    }
+
+    return primaryColor;
+  }
 
   const isPrimaryColor =
     PRIMARY_COLORS.some((color) => color === primaryColor) || primaryColor === GRAYSCALE_COLOR;
@@ -405,13 +462,35 @@ function getPrimaryColor(primary?: PrimaryColors) {
 
 /**
  * Retrieve neutral color value and save them to cookie and localStorage.
- * @return string - neutral color.
+ * @return string | Partial<ColorShades> - neutral color.
  */
 function getNeutralColor(neutral?: NeutralColors) {
   const storageKey = `vl-${NEUTRAL_COLOR}`;
 
+  const storedValue = getStored(storageKey);
+  let parsedStoredValue: NeutralColors | undefined;
+
+  if (storedValue) {
+    try {
+      parsedStoredValue = JSON.parse(storedValue);
+    } catch {
+      parsedStoredValue = storedValue;
+    }
+  }
+
   let neutralColor: NeutralColors =
-    neutral ?? getStored(storageKey) ?? vuelessConfig.neutral ?? DEFAULT_NEUTRAL_COLOR;
+    neutral ?? parsedStoredValue ?? vuelessConfig.neutral ?? DEFAULT_NEUTRAL_COLOR;
+
+  if (isColorShadesObject(neutralColor)) {
+    validateColorShades(neutralColor, NEUTRAL_COLOR);
+
+    if (isCSR && neutral) {
+      setCookie(storageKey, JSON.stringify(neutralColor));
+      localStorage.setItem(storageKey, JSON.stringify(neutralColor));
+    }
+
+    return neutralColor;
+  }
 
   const isNeutralColor = NEUTRAL_COLORS.some((color) => color === neutralColor);
 
@@ -733,14 +812,34 @@ export function setRootCSSVariables(vars: MergedThemeConfig) {
     "--vl-disabled-opacity": `${vars.disabledOpacity}%`,
   };
 
-  for (const shade of COLOR_SHADES) {
-    variables[`--vl-${PRIMARY_COLOR}-${shade}` as keyof VuelessCssVariables] =
-      `var(--color-${vars.primary}-${shade})`;
+  if (isColorShadesObject(vars.primary)) {
+    for (const shade of COLOR_SHADES) {
+      const shadeValue = vars.primary[shade as keyof ColorShades];
+
+      if (shadeValue) {
+        variables[`--vl-${PRIMARY_COLOR}-${shade}` as keyof VuelessCssVariables] = shadeValue;
+      }
+    }
+  } else {
+    for (const shade of COLOR_SHADES) {
+      variables[`--vl-${PRIMARY_COLOR}-${shade}` as keyof VuelessCssVariables] =
+        `var(--color-${vars.primary}-${shade})`;
+    }
   }
 
-  for (const shade of COLOR_SHADES) {
-    variables[`--vl-${NEUTRAL_COLOR}-${shade}` as keyof VuelessCssVariables] =
-      `var(--color-${vars.neutral}-${shade})`;
+  if (isColorShadesObject(vars.neutral)) {
+    for (const shade of COLOR_SHADES) {
+      const shadeValue = vars.neutral[shade as keyof ColorShades];
+
+      if (shadeValue) {
+        variables[`--vl-${NEUTRAL_COLOR}-${shade}` as keyof VuelessCssVariables] = shadeValue;
+      }
+    }
+  } else {
+    for (const shade of COLOR_SHADES) {
+      variables[`--vl-${NEUTRAL_COLOR}-${shade}` as keyof VuelessCssVariables] =
+        `var(--color-${vars.neutral}-${shade})`;
+    }
   }
 
   const [light, dark] = generateCSSColorVariables(vars.lightTheme ?? {}, vars.darkTheme ?? {});
@@ -799,10 +898,14 @@ function setCSSVariables(
   `;
 
   if (isCSR) {
+    const firstStyleOrLink = document.querySelector("link[rel='stylesheet'], style");
     const style = document.createElement("style");
 
     style.innerHTML = rootVariables;
-    document.head.appendChild(style);
+
+    firstStyleOrLink && firstStyleOrLink.parentNode
+      ? firstStyleOrLink.parentNode.insertBefore(style, firstStyleOrLink)
+      : document.head.appendChild(style);
   }
 
   return rootVariables;