vueless 1.5.1-beta.5 → 1.5.1-beta.7

package/composables/tests/useUI.test.ts

@@ -284,6 +284,17 @@ describe("useUI", () => {
       expect(result).toHaveProperty("iconAttrs");
       expect(result).toHaveProperty("buttonAttrs");
     });
+
+    it("should strip every nested component marker from classes", () => {
+      const defaultConfig = {
+        label: "{ULabel} {ULabel} label-class",
+      };
+
+      const result = useUI(defaultConfig);
+
+      expect(result.labelAttrs.value.class).not.toContain("{ULabel}");
+      expect(result.labelAttrs.value.class).toContain("label-class");
+    });
   });
 
   describe("Reactivity", () => {

package/composables/useUI.ts

@@ -170,7 +170,7 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
 
     classes = classes
       .replaceAll(EXTENDS_PATTERN_REG_EXP, "")
-      .replace(NESTED_COMPONENT_PATTERN_REG_EXP, "");
+      .replaceAll(NESTED_COMPONENT_PATTERN_REG_EXP, "");
 
     return color && !isNestedComponent ? setColor(classes, color) : classes;
   }
@@ -335,7 +335,7 @@ function getExtendsKeys(configItemValue?: string | CVA | NestedComponent): strin
  */
 function getNestedComponent(value?: string | CVA | NestedComponent) {
   const classes = getBaseClasses(value);
-  const match = classes.match(NESTED_COMPONENT_PATTERN_REG_EXP);
+  const [match] = classes.matchAll(NESTED_COMPONENT_PATTERN_REG_EXP);
 
   return match ? match[1] : "";
 }

package/constants.js

@@ -445,7 +445,7 @@ export const FAILURE_CODE = 1;
 
 /* Other */
 export const PX_IN_REM = 16;
-export const NESTED_COMPONENT_PATTERN_REG_EXP = /\{(U[^}]*)}/;
+export const NESTED_COMPONENT_PATTERN_REG_EXP = /\{(U[^}]*)}/g;
 export const EXTENDS_PATTERN_REG_EXP = /\{>[^}]*}/g;
 export const DYNAMIC_COLOR_PATTERN = "{color}";
 export const JAVASCRIPT_EXT = ".js";

package/package.json

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

package/ui.form-label/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex w-full group/label",
+    base: "flex w-full max-w-full group/label",
     variants: {
       align: {
         topInside: "flex-col gap-0 relative",
@@ -25,7 +25,7 @@ export default /*tw*/ {
   },
   content: "flex",
   label: {
-    base: "z-10 block leading-none! w-max transition",
+    base: "z-10 block leading-none! transition",
     variants: {
       size: {
         sm: "text-small",

package/ui.form-label/tests/ULabel.test.ts

@@ -151,6 +151,18 @@ describe("ULabel.vue", () => {
       });
     });
 
+    it("Align – side-aligned label can wrap within its container", () => {
+      const component = mount(ULabel, {
+        props: {
+          label: "Label",
+          align: "right",
+        },
+      });
+
+      expect(component.attributes("class")).toContain("max-w-full");
+      expect(component.find("[vl-key='label']").attributes("class")).not.toContain("w-max");
+    });
+
     it("Size – applies correct class for size prop", () => {
       const sizeCases = {
         sm: "text-small",

package/utils/node/vuelessConfig.js

@@ -60,7 +60,8 @@ const twMerge = extendTailwindMerge(
 export const { cx } = defineConfig({
   cx: cvaCx,
   hooks: {
-    onComplete: (classNames) => twMerge(classNames).replace(NESTED_COMPONENT_PATTERN_REG_EXP, ""),
+    onComplete: (classNames) =>
+      twMerge(classNames).replaceAll(NESTED_COMPONENT_PATTERN_REG_EXP, ""),
   },
 });
 

package/utils/tests/ui.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { COLOR_MODE_KEY } from "../../constants.js";
+import { loadSSRVuelessConfig, setVuelessConfig, vuelessConfig } from "../ui";
+
+import type { Config } from "../../types";
+
+/* jsdom doesn't implement matchMedia, which theme.ts evaluates on import. */
+const prefersDark = { matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() };
+
+window.matchMedia = vi.fn(() => prefersDark) as unknown as typeof window.matchMedia;
+
+const { getThemeCookieName } = await import("../theme");
+
+beforeEach(() => {
+  Object.keys(vuelessConfig).forEach((key) => delete vuelessConfig[key as keyof Config]);
+});
+
+describe("loadSSRVuelessConfig", () => {
+  it.each([
+    ["resolves", () => ({ cookiePrefix: "from-file" })],
+    [
+      "fails",
+      () => {
+        throw new Error("Cannot find module '/vueless.config'");
+      },
+    ],
+  ])("keeps the injected config when a deferred import %s", async (_, settle: () => Config) => {
+    let release!: () => void;
+    const released = new Promise<void>((resolve) => (release = resolve));
+
+    const loading = loadSSRVuelessConfig(() => released.then(() => ({ default: settle() })));
+
+    setVuelessConfig({ cookiePrefix: "app-a" });
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`app-a-${COLOR_MODE_KEY}`);
+
+    release();
+    await loading;
+
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`app-a-${COLOR_MODE_KEY}`);
+  });
+
+  it("uses the imported config when none was injected", async () => {
+    await loadSSRVuelessConfig(async () => ({ default: { cookiePrefix: "from-file" } }));
+
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`from-file-${COLOR_MODE_KEY}`);
+  });
+});

package/utils/ui.ts

@@ -48,17 +48,22 @@ if (isCSR) {
     )[0] || {};
 }
 
-if (isSSR) {
-  (async () => {
-    try {
-      // @ts-expect-error: vueless.config.{js,ts} is optional
-      vuelessConfig = (await import(/* @vite-ignore */ "/vueless.config")).default;
-    } catch {
-      vuelessConfig = {};
-    }
-  })();
+/** Load Vueless config on the server; a config injected via `createVueless` meanwhile wins. */
+export async function loadSSRVuelessConfig(
+  // @ts-expect-error: vueless.config.{js,ts} is optional
+  importConfig = () => import(/* @vite-ignore */ "/vueless.config"),
+) {
+  try {
+    const { default: config } = await importConfig();
+
+    if (!Object.keys(vuelessConfig).length) vuelessConfig = config;
+  } catch {
+    /* No config file: keep the current config. */
+  }
 }
 
+if (isSSR) loadSSRVuelessConfig();
+
 /**
  * Extend twMerge (tailwind merge) by vueless and user config:
  */