vueless 1.2.5-beta.3 → 1.2.5-beta.5

package/constants.d.ts

@@ -10,6 +10,7 @@ export const ROUNDING: "rounding";
 export const DISABLED_OPACITY: "disabled-opacity";
 export const LETTER_SPACING: "letter-spacing";
 export const COLOR_MODE_KEY: "vl-color-mode";
+export const AUTO_MODE_KEY: "vl-auto-mode";
 export const DARK_MODE_CLASS: "vl-dark";
 export const LIGHT_MODE_CLASS: "vl-light";
 export const DEFAULT_PRIMARY_COLOR: "grayscale";

package/constants.js

@@ -20,6 +20,7 @@ export const LETTER_SPACING = "letter-spacing";
 
 /* Vueless color mode keys */
 export const COLOR_MODE_KEY = "vl-color-mode";
+export const AUTO_MODE_KEY = "vl-auto-mode";
 export const DARK_MODE_CLASS = "vl-dark";
 export const LIGHT_MODE_CLASS = "vl-light";
 

package/index.d.ts

@@ -11,9 +11,9 @@ export {
   createDebounce,
   hasSlotContent
 } from "./utils/helper";
-export { getStored, getTheme, setTheme, resetTheme, cssVar } from "./utils/theme";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
+export { getTheme, setTheme, resetTheme, normalizeThemeConfig, getStored, cssVar } from "./utils/theme";
 export { getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";
@@ -130,6 +130,7 @@ export type {
   ThemeConfigText,
   ThemeConfigRounding,
   ThemeConfigOutline,
+  MergedThemeConfig,
   NestedComponent,
   ComponentConfig,
   ComponentDefaults,

package/index.ts

@@ -17,9 +17,9 @@ export {
   createDebounce,
   hasSlotContent
 } from "./utils/helper";
-export { getStored, getTheme, setTheme, resetTheme, cssVar } from "./utils/theme";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
+export { getTheme, setTheme, resetTheme, normalizeThemeConfig, getStored, cssVar } from "./utils/theme";
 export { getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";
@@ -136,6 +136,7 @@ export type {
   ThemeConfigText,
   ThemeConfigRounding,
   ThemeConfigOutline,
+  MergedThemeConfig,
   NestedComponent,
   ComponentConfig,
   ComponentDefaults,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.5-beta.3",
+  "version": "1.2.5-beta.5",
   "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

@@ -129,6 +129,11 @@ export interface ThemeConfig {
    */
   colorMode?: `${ColorMode}`;
 
+  /**
+   * Defines the color mode to auto.
+   */
+  isColorModeAuto?: boolean;
+
   /**
    * Light theme design system CSS variables.
    */
@@ -185,6 +190,12 @@ export interface Config extends ThemeConfig {
   tailwindMerge?: UnknownObject;
 }
 
+export type MergedThemeConfig = Omit<ThemeConfig, "text | outline | rounding"> & {
+  text: Partial<ThemeConfigText>;
+  outline: Partial<ThemeConfigOutline>;
+  rounding: Partial<ThemeConfigRounding>;
+};
+
 export type UnknownObject = Record<string, unknown>;
 export type UnknownArray = unknown[];
 export type UnknownType = string | number | boolean | UnknownObject | undefined | null;

package/ui.container-accordion/tests/UAccordion.test.ts

@@ -73,14 +73,14 @@ describe("UAccordion", () => {
 
       const firstItem = component.findAllComponents(UAccordionItem)[0];
 
-      await firstItem.trigger("click");
+      await firstItem.find("[vl-child-key='title']").trigger("click");
 
       const updates = component.emitted("update:modelValue");
 
       expect(updates).toBeTruthy();
       expect(updates?.[0]).toEqual(["a"]);
 
-      await firstItem.trigger("click");
+      await firstItem.find("[vl-child-key='title']").trigger("click");
       const updates2 = component.emitted("update:modelValue");
 
       expect(updates2?.[1]).toEqual([null]);
@@ -103,14 +103,14 @@ describe("UAccordion", () => {
 
       const [firstItem, secondItem] = component.findAllComponents(UAccordionItem);
 
-      await firstItem.trigger("click");
-      await secondItem.trigger("click");
+      await firstItem.find("[vl-child-key='title']").trigger("click");
+      await secondItem.find("[vl-child-key='title']").trigger("click");
       const updates = component.emitted("update:modelValue");
 
       expect(updates?.[0]).toEqual([["a"]]);
       expect(updates?.[1]).toEqual([["a", "b"]]);
 
-      await firstItem.trigger("click");
+      await firstItem.find("[vl-child-key='title']").trigger("click");
       const updates2 = component.emitted("update:modelValue");
 
       expect(updates2?.[2]).toEqual([["b"]]);

package/ui.container-accordion-item/UAccordionItem.vue

@@ -42,8 +42,7 @@ const emit = defineEmits([
 ]);
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
-const descriptionRef = useTemplateRef<HTMLDivElement>("description");
-const contentRef = useTemplateRef<HTMLDivElement>("content");
+const titleRef = useTemplateRef<HTMLDivElement>("title");
 
 const accordionSize = ref(toValue(getAccordionSize) || props.size);
 const accordionDisabled = ref(toValue(getAccordionDisabled) || props.disabled);
@@ -79,10 +78,9 @@ const toggleIconName = computed(() => {
 });
 
 function onClickItem(event: MouseEvent) {
-  const clickedInsideContent = contentRef.value?.contains(event.target as Node);
-  const clickedDescription = descriptionRef.value?.contains(event.target as Node);
+  const clickedOnTitle = titleRef.value?.contains(event.target as Node);
 
-  if (props.disabled || clickedDescription || clickedInsideContent) return;
+  if (!clickedOnTitle || props.disabled) return;
 
   emit("click", elementId, !isOpened.value);
 
@@ -123,7 +121,7 @@ const {
 <template>
   <div ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()" @click="onClickItem">
     <div v-bind="bodyAttrs">
-      <div v-bind="titleAttrs">
+      <div v-bind="titleAttrs" ref="title">
         {{ title }}
         <!--
           @slot Use it to add something instead of the toggle icon.
@@ -144,12 +142,11 @@ const {
       <div
         v-if="description"
         :id="`description-${elementId}`"
-        ref="description"
         v-bind="descriptionAttrs"
         v-text="description"
       />
 
-      <div v-if="isOpened && hasSlotContent(slots['default'])" ref="content" v-bind="contentAttrs">
+      <div v-if="isOpened && hasSlotContent(slots['default'])" v-bind="contentAttrs">
         <!-- @slot Use it to add accordion content. -->
         <slot />
       </div>

package/ui.container-accordion-item/tests/UAccordionItem.test.ts

@@ -171,7 +171,7 @@ describe("UAccordionItem", () => {
       expect(toggleElement.attributes("data-opened")).toBe("false");
 
       // Click to toggle
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       expect(toggleElement.attributes("data-opened")).toBe("true");
     });
@@ -190,12 +190,12 @@ describe("UAccordionItem", () => {
 
       expect(component.find(`.${slotClass}`).exists()).toBe(false);
 
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       expect(component.find(`.${slotClass}`).exists()).toBe(true);
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
 
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       expect(component.find(`.${slotClass}`).exists()).toBe(false);
     });
@@ -217,7 +217,7 @@ describe("UAccordionItem", () => {
     it("does not render content wrapper when default slot is empty", async () => {
       const component = mount(UAccordionItem, { props: { name: "test" } });
 
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       expect(component.find("[vl-key='content']").exists()).toBe(false);
     });
@@ -235,7 +235,7 @@ describe("UAccordionItem", () => {
         },
       });
 
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       const emitted = component.emitted("click");
 
@@ -243,7 +243,7 @@ describe("UAccordionItem", () => {
       expect(emitted?.[0]).toEqual([id, true]);
 
       // Click again to toggle back
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       const emittedAgain = component.emitted("click");
 
@@ -281,13 +281,13 @@ describe("UAccordionItem", () => {
       expect(descriptionElement.classes()).not.toContain(openedClass);
 
       // Click to open
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       // Should be opened
       expect(descriptionElement.classes()).toContain(openedClass);
 
       // Click to close
-      await component.trigger("click");
+      await component.find("[vl-key='title']").trigger("click");
 
       // Should be closed again
       expect(descriptionElement.classes()).not.toContain(openedClass);

package/utils/theme.ts

@@ -34,6 +34,7 @@ import {
   DEFAULT_DISABLED_OPACITY,
   LETTER_SPACING,
   DEFAULT_LETTER_SPACING,
+  AUTO_MODE_KEY,
 } from "../constants";
 
 import type {
@@ -43,6 +44,7 @@ import type {
   ThemeConfigText,
   ThemeConfigOutline,
   ThemeConfigRounding,
+  MergedThemeConfig,
   VuelessCssVariables,
 } from "../types";
 import { ColorMode } from "../types";
@@ -59,6 +61,11 @@ declare interface RootCSSVariableOptions {
   darkTheme: Partial<VuelessCssVariables>;
 }
 
+declare interface SetColorMode {
+  colorMode: `${ColorMode}`;
+  isColorModeAuto: boolean;
+}
+
 /* Creates a media query that checks if the user's system color scheme is set to the dark. */
 const prefersColorSchemeDark = isCSR && window.matchMedia("(prefers-color-scheme: dark)");
 
@@ -75,12 +82,18 @@ function toggleColorModeClass() {
 }
 
 /**
- * Sets color mode.
- * @param {string} mode (dark | light | auto)
- * @return {string} current color mode
+ * Sets the client-side rendering (CSR) color mode by applying the specified mode,
+ * configuring the appropriate event listeners, setting CSS classes, and saving the mode
+ * in cookies and local storage.
+ *
+ * @param {`${ColorMode}`} mode - The desired color mode (dark | light | auto).
+ * @return {Object} An object containing:
+ * - `colorMode` {string}: The applied color mode (e.g., "light", "dark").
+ * - `isColorModeAuto` {boolean}: Indicates whether the color mode is set to auto.
  */
-function setColorMode(mode: `${ColorMode}`): string {
+function setCSRColorMode(mode: `${ColorMode}`): SetColorMode {
   const colorMode = mode || getStored(COLOR_MODE_KEY) || vuelessConfig.colorMode || ColorMode.Light;
+  const isCachedAutoMode = !!Number(getStored(AUTO_MODE_KEY) ?? 0);
 
   const isAutoMode = colorMode === ColorMode.Auto;
   const isSystemDarkMode = isAutoMode && prefersColorSchemeDark && prefersColorSchemeDark?.matches;
@@ -92,7 +105,7 @@ function setColorMode(mode: `${ColorMode}`): string {
   }
 
   /* Adding system color mode change event listener. */
-  if (isAutoMode && prefersColorSchemeDark) {
+  if ((isAutoMode || isCachedAutoMode) && prefersColorSchemeDark) {
     prefersColorSchemeDark.addEventListener("change", toggleColorModeClass);
   }
 
@@ -112,10 +125,35 @@ function setColorMode(mode: `${ColorMode}`): string {
 
   if (mode) {
     setCookie(COLOR_MODE_KEY, currentColorMode);
+    setCookie(AUTO_MODE_KEY, String(Number(isAutoMode)));
+
     localStorage.setItem(COLOR_MODE_KEY, currentColorMode);
+    localStorage.setItem(AUTO_MODE_KEY, String(Number(isAutoMode)));
   }
 
-  return currentColorMode;
+  return {
+    colorMode: currentColorMode,
+    isColorModeAuto: isAutoMode || isCachedAutoMode,
+  };
+}
+
+/**
+ * Gets server-side rendering (SSR) color mode.
+ *
+ * @param {`${ColorMode}`} mode - The desired color mode (dark | light | auto).
+ * @param {boolean} isColorModeAuto - Indicates whether the color mode is set to auto.
+ * @return {Object} An object containing:
+ * - `colorMode` {string}: The applied color mode (e.g., "light", "dark").
+ * - `isColorModeAuto` {boolean}: Indicates whether the color mode is set to auto.
+ */
+function getSSRColorMode(mode: `${ColorMode}`, isColorModeAuto: boolean = false): SetColorMode {
+  const currentColorMode = mode || vuelessConfig.colorMode || ColorMode.Light;
+  const isAutoMode = currentColorMode === ColorMode.Auto;
+
+  return {
+    colorMode: currentColorMode,
+    isColorModeAuto: isAutoMode || isColorModeAuto,
+  };
 }
 
 /**
@@ -145,6 +183,7 @@ export function resetTheme() {
   if (!isCSR) return;
 
   const themeKeys = [
+    AUTO_MODE_KEY,
     COLOR_MODE_KEY,
     `vl-${PRIMARY_COLOR}`,
     `vl-${NEUTRAL_COLOR}`,
@@ -168,26 +207,64 @@ export function resetTheme() {
   });
 }
 
+/**
+ * Normalizes the provided theme configuration object into a structured format.
+ *
+ * @param {object} theme - The theme configuration object to normalize.
+ * @return {MergedThemeConfig}
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function normalizeThemeConfig(theme: any): MergedThemeConfig {
+  return {
+    colorMode: theme.colorMode,
+    isColorModeAuto: theme.isColorModeAuto,
+    primary: theme.primary,
+    neutral: theme.neutral,
+    text: {
+      xs: toNumber(theme.text?.xs),
+      sm: toNumber(theme.text?.sm),
+      md: toNumber(theme.text?.md),
+      lg: toNumber(theme.text?.lg),
+    },
+    outline: {
+      sm: toNumber(theme.outline?.sm),
+      md: toNumber(theme.outline?.md),
+      lg: toNumber(theme.outline?.lg),
+    },
+    rounding: {
+      sm: toNumber(theme.rounding?.sm),
+      md: toNumber(theme.rounding?.md),
+      lg: toNumber(theme.rounding?.lg),
+    },
+    letterSpacing: toNumber(theme.letterSpacing),
+    disabledOpacity: toNumber(theme.disabledOpacity),
+  };
+}
+
 /**
  * Retrieves the current theme configuration.
  * @return ThemeConfig - current theme configuration
  */
-export function getTheme(): ThemeConfig {
-  const colorMode = getStored(COLOR_MODE_KEY) || vuelessConfig.colorMode || ColorMode.Light;
-  const primary = getPrimaryColor();
-  const neutral = getNeutralColor();
+export function getTheme(config?: ThemeConfig): MergedThemeConfig {
+  const { colorMode, isColorModeAuto } = isCSR
+    ? setCSRColorMode(config?.colorMode as ColorMode)
+    : getSSRColorMode(config?.colorMode as ColorMode, config?.isColorModeAuto);
 
-  const text = getText();
-  const outline = getOutlines();
-  const rounding = getRoundings();
-  const letterSpacing = getLetterSpacing();
-  const disabledOpacity = getDisabledOpacity();
+  const primary = getPrimaryColor(config?.primary);
+  const neutral = getNeutralColor(config?.neutral);
+
+  const text = getText(config?.text);
+  const outline = getOutlines(config?.outline);
+  const rounding = getRoundings(config?.rounding);
+  const letterSpacing = getLetterSpacing(config?.letterSpacing);
+  const disabledOpacity = getDisabledOpacity(config?.disabledOpacity);
 
   const lightTheme = merge({}, DEFAULT_LIGHT_THEME, vuelessConfig.lightTheme);
   const darkTheme = merge({}, DEFAULT_DARK_THEME, vuelessConfig.darkTheme);
 
   return {
-    colorMode: colorMode as `${ColorMode}`,
+    colorMode,
+    isColorModeAuto,
     primary,
     neutral,
     text,
@@ -206,7 +283,9 @@ export function getTheme(): ThemeConfig {
  * @return string - CSS variables
  */
 export function setTheme(config: ThemeConfig = {}) {
-  if (isCSR) setColorMode(config.colorMode as ColorMode);
+  isCSR
+    ? setCSRColorMode(config.colorMode as ColorMode)
+    : getSSRColorMode(config.colorMode as ColorMode);
 
   const text = getText(config.text);
   const outline = getOutlines(config.outline);
@@ -664,3 +743,25 @@ function setCSSVariables(
 
   return rootVariables;
 }
+
+/**
+ * Converts the given value to a number if possible.
+ *
+ * @param {unknown} value - The value to be converted to a number. Can be of any data type.
+ * @return {number | undefined} The numeric representation of the value if conversion is successful; otherwise, undefined.
+ */
+function toNumber(value: unknown): number | undefined {
+  if (typeof value === "number") {
+    return value;
+  }
+
+  if (typeof value === "string" && value.trim() !== "") {
+    const number = Number(value);
+
+    if (!Number.isNaN(number)) {
+      return number;
+    }
+  }
+
+  return;
+}