vueless 1.5.1-beta.6 → 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.6",
+  "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, ""),
   },
 });