@charpente-ui/vue 2.2.1 → 2.3.0

package/README.md

@@ -249,7 +249,9 @@ messages for free. Charpente UI exposes that instead of reinventing it — opt i
   Native escapes still work: `formnovalidate` on a submit button skips validation for that button.
 
 `CField` stays zero-CSS: it never applies a class itself. If you need custom styling beyond `[aria-invalid]` or
-`:invalid` selectors, its default slot exposes `invalid` and `message` so you can drive your own classes:
+`:invalid` selectors, it gives you two ways to read its `invalid`/`message` state:
+
+- **Default slot** — reaches elements placed directly inside `CField`:
 
 ```vue
 <CField v-slot="{ invalid, message }">
@@ -259,8 +261,17 @@ messages for free. Charpente UI exposes that instead of reinventing it — opt i
 </CField>
 ```
 
-This only reaches elements placed directly inside `CField`'s default slot — a custom component nested deeper won't
-receive `invalid`/`message` automatically; pass them down as props if you need that.
+- **Template ref** — to style `CField`'s own wrapper element instead of a child:
+
+```vue
+<CField ref="fieldRef" :class="{ 'is-invalid': fieldRef?.invalid }">
+    <CLabel>Email</CLabel>
+    <CInput v-model="email" type="email" required/>
+</CField>
+```
+
+Both only reach elements placed directly inside `CField`'s default slot, or the `CField` element itself — a custom
+component nested deeper won't receive `invalid`/`message` automatically; pass them down as props if you need that.
 
 ## Components
 

package/dist/components/BaseField.d.ts

@@ -10,7 +10,10 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    invalid: import('vue').Ref<boolean, boolean>;
+    message: import('vue').Ref<string, string>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/BaseField.js

@@ -4,42 +4,45 @@ import { computed as t, createElementBlock as n, defineComponent as r, mergeProp
 var d = /*@__PURE__*/ r({
 	inheritAttrs: !1,
 	__name: "BaseField",
-	setup(r) {
-		let d = l(), f = u(), p = s([]), m = s(""), h = s(!1), g = t(() => typeof d.id == "string" ? d.id : f), _ = t(() => p.value.at(-1));
-		function v(e) {
-			p.value.push(e);
-		}
+	setup(r, { expose: d }) {
+		let f = l(), p = u(), m = s([]), h = s(""), g = s(!1), _ = t(() => typeof f.id == "string" ? f.id : p), v = t(() => m.value.at(-1));
 		function y(e) {
-			let t = p.value.indexOf(e);
-			t !== -1 && p.value.splice(t, 1);
+			m.value.push(e);
+		}
+		function b(e) {
+			let t = m.value.indexOf(e);
+			t !== -1 && m.value.splice(t, 1);
 		}
-		let b = t(() => {
-			let e = { ...d };
+		let x = t(() => {
+			let e = { ...f };
 			return delete e.id, e;
 		});
 		o(e, {
-			id: g,
-			supportingTextId: _,
-			validationMessage: m,
-			registerSupportingText: v,
-			unregisterSupportingText: y
+			id: _,
+			supportingTextId: v,
+			validationMessage: h,
+			registerSupportingText: y,
+			unregisterSupportingText: b
 		});
-		function x(e) {
-			h.value = !0, m.value = e.target.validationMessage;
-		}
 		function S(e) {
-			if (h.value) {
+			g.value = !0, h.value = e.target.validationMessage;
+		}
+		function C(e) {
+			if (g.value) {
 				let t = e.target;
-				h.value = !t.validity.valid, m.value = t.validationMessage;
+				g.value = !t.validity.valid, h.value = t.validationMessage;
 			}
 		}
-		return (e, t) => (a(), n("div", i(b.value, {
-			onInvalidCapture: x,
-			onInputCapture: S,
-			onChangeCapture: S
+		return d({
+			invalid: g,
+			message: h
+		}), (e, t) => (a(), n("div", i(x.value, {
+			onInvalidCapture: S,
+			onInputCapture: C,
+			onChangeCapture: C
 		}), [c(e.$slots, "default", {
-			invalid: h.value,
-			message: m.value
+			invalid: g.value,
+			message: h.value
 		})], 16));
 	}
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@charpente-ui/vue",
-    "version": "2.2.1",
+    "version": "2.3.0",
     "description": "Charpente UI is a headless Vue component library.",
     "type": "module",
     "scripts": {