@charpente-ui/vue 2.1.1 → 2.2.0

package/README.md

@@ -248,6 +248,20 @@ messages for free. Charpente UI exposes that instead of reinventing it — opt i
 - Without `validate`, nothing changes — bring your own validation library if you need cross-field or async rules.
   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:
+
+```vue
+<CField v-slot="{ invalid, message }">
+    <CLabel>Email</CLabel>
+    <CInput v-model="email" type="email" required :class="{ 'is-invalid': invalid }"/>
+    <span v-if="invalid" class="error">{{ message }}</span>
+</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.
+
 ## Components
 
 | Name          | Core Logic                                                                       | Tag              | Status |

package/dist/components/BaseButton.js

@@ -1,6 +1,6 @@
 import { computed as e, createBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, resolveDynamicComponent as o, useAttrs as s, withCtx as c } from "vue";
 //#region src/components/BaseButton.vue?vue&type=script&setup=true&lang.ts
-var l = /* @__PURE__ */ n({
+var l = /*@__PURE__*/ n({
 	inheritAttrs: !1,
 	__name: "BaseButton",
 	props: { as: { default: "button" } },

package/dist/components/BaseCheckbox.js

@@ -8,10 +8,10 @@ var _ = [
 	"aria-invalid",
 	"name",
 	"value"
-], v = /* @__PURE__ */ i({
+], v = /*@__PURE__*/ i({
 	inheritAttrs: !1,
 	__name: "BaseCheckbox",
-	props: /* @__PURE__ */ s({
+	props: /*@__PURE__*/ s({
 		value: {},
 		indeterminate: { type: Boolean }
 	}, {

package/dist/components/BaseCheckboxGroup.js

@@ -1,7 +1,7 @@
 import { checkboxGroupKey as e, fieldKey as t } from "./internal/keys.js";
 import { computed as n, createElementBlock as r, defineComponent as i, guardReactiveProps as a, normalizeProps as o, openBlock as s, provide as c, renderSlot as l, useAttrs as u, useId as d, useModel as f } from "vue";
 //#region src/components/BaseCheckboxGroup.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ i({
+var p = /*@__PURE__*/ i({
 	inheritAttrs: !1,
 	__name: "BaseCheckboxGroup",
 	props: {

package/dist/components/BaseField.js

@@ -1,30 +1,46 @@
 import { fieldKey as e } from "./internal/keys.js";
 import { computed as t, createElementBlock as n, defineComponent as r, mergeProps as i, openBlock as a, provide as o, ref as s, renderSlot as c, useAttrs as l, useId as u } from "vue";
 //#region src/components/BaseField.vue?vue&type=script&setup=true&lang.ts
-var d = /* @__PURE__ */ r({
+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(() => {
+		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);
+		}
+		function y(e) {
+			let t = p.value.indexOf(e);
+			t !== -1 && p.value.splice(t, 1);
+		}
+		let b = t(() => {
 			let e = { ...d };
 			return delete e.id, e;
 		});
 		o(e, {
 			id: g,
-			supportingTextId: p,
-			validationMessage: m
+			supportingTextId: _,
+			validationMessage: m,
+			registerSupportingText: v,
+			unregisterSupportingText: y
 		});
-		function v(e) {
+		function x(e) {
 			h.value = !0, m.value = e.target.validationMessage;
 		}
-		function y(e) {
-			h.value && (m.value = e.target.validationMessage);
+		function S(e) {
+			if (h.value) {
+				let t = e.target;
+				h.value = !t.validity.valid, m.value = t.validationMessage;
+			}
 		}
-		return (e, t) => (a(), n("div", i(_.value, {
-			onInvalidCapture: v,
-			onInputCapture: y,
-			onChangeCapture: y
-		}), [c(e.$slots, "default")], 16));
+		return (e, t) => (a(), n("div", i(b.value, {
+			onInvalidCapture: x,
+			onInputCapture: S,
+			onChangeCapture: S
+		}), [c(e.$slots, "default", {
+			invalid: h.value,
+			message: m.value
+		})], 16));
 	}
 });
 //#endregion

package/dist/components/BaseFile.js

@@ -5,7 +5,7 @@ var l = [
 	"id",
 	"aria-describedby",
 	"aria-invalid"
-], u = /* @__PURE__ */ n({
+], u = /*@__PURE__*/ n({
 	inheritAttrs: !1,
 	__name: "BaseFile",
 	props: {

package/dist/components/BaseForm.js

@@ -1,6 +1,6 @@
 import { computed as e, createElementBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, useAttrs as o, useId as s, withModifiers as c } from "vue";
 //#region src/components/BaseForm.vue?vue&type=script&setup=true&lang.ts
-var l = ["id", "novalidate"], u = /* @__PURE__ */ n({
+var l = ["id", "novalidate"], u = /*@__PURE__*/ n({
 	inheritAttrs: !1,
 	__name: "BaseForm",
 	props: { validate: { type: Boolean } },

package/dist/components/BaseInput.js

@@ -10,7 +10,7 @@ var d = [
 	"id",
 	"aria-describedby",
 	"aria-invalid"
-], p = /* @__PURE__ */ r({
+], p = /*@__PURE__*/ r({
 	inheritAttrs: !1,
 	__name: "BaseInput",
 	props: {

package/dist/components/BaseLabel.js

@@ -1,7 +1,7 @@
 import { fieldKey as e } from "./internal/keys.js";
 import { computed as t, createElementBlock as n, defineComponent as r, inject as i, mergeProps as a, openBlock as o, renderSlot as s } from "vue";
 //#region src/components/BaseLabel.vue?vue&type=script&setup=true&lang.ts
-var c = ["for"], l = /* @__PURE__ */ r({
+var c = ["for"], l = /*@__PURE__*/ r({
 	inheritAttrs: !1,
 	__name: "BaseLabel",
 	props: { for: {} },

package/dist/components/BaseRadio.js

@@ -8,10 +8,10 @@ var h = [
 	"aria-invalid",
 	"name",
 	"value"
-], g = /* @__PURE__ */ i({
+], g = /*@__PURE__*/ i({
 	inheritAttrs: !1,
 	__name: "BaseRadio",
-	props: /* @__PURE__ */ s({ value: {} }, {
+	props: /*@__PURE__*/ s({ value: {} }, {
 		modelValue: {},
 		modelModifiers: {}
 	}),

package/dist/components/BaseRadioGroup.js

@@ -1,7 +1,7 @@
 import { fieldKey as e, radioGroupKey as t } from "./internal/keys.js";
 import { computed as n, createElementBlock as r, defineComponent as i, guardReactiveProps as a, normalizeProps as o, openBlock as s, provide as c, renderSlot as l, useAttrs as u, useId as d, useModel as f } from "vue";
 //#region src/components/BaseRadioGroup.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ i({
+var p = /*@__PURE__*/ i({
 	inheritAttrs: !1,
 	__name: "BaseRadioGroup",
 	props: {

package/dist/components/BaseSelect.js

@@ -5,7 +5,7 @@ var u = [
 	"id",
 	"aria-describedby",
 	"aria-invalid"
-], d = /* @__PURE__ */ n({
+], d = /*@__PURE__*/ n({
 	inheritAttrs: !1,
 	__name: "BaseSelect",
 	props: {

package/dist/components/BaseSupportingText.js

@@ -1,17 +1,17 @@
 import { fieldKey as e } from "./internal/keys.js";
-import { Fragment as t, computed as n, createElementBlock as r, createTextVNode as i, defineComponent as a, inject as o, mergeProps as s, onBeforeUnmount as c, openBlock as l, renderSlot as u, toDisplayString as d, useAttrs as f, useId as p, watchEffect as m } from "vue";
+import { Fragment as t, computed as n, createElementBlock as r, createTextVNode as i, defineComponent as a, inject as o, mergeProps as s, onBeforeUnmount as c, openBlock as l, renderSlot as u, toDisplayString as d, useAttrs as f, useId as p, watch as m } from "vue";
 //#region src/components/BaseSupportingText.vue?vue&type=script&setup=true&lang.ts
-var h = ["id"], g = /* @__PURE__ */ a({
+var h = ["id"], g = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "BaseSupportingText",
 	props: { validation: { type: Boolean } },
 	setup(a) {
 		let g = a, _ = f(), v = p(), y = o(e, null), b = n(() => typeof _.id == "string" ? _.id : v), x = n(() => g.validation ? y?.validationMessage.value ?? "" : "");
-		return m(() => {
-			y && (y.supportingTextId.value = b.value);
-		}), c(() => {
-			y && (y.supportingTextId.value = void 0);
-		}), (e, n) => (l(), r("p", s(e.$attrs, { id: b.value }), [x.value ? (l(), r(t, { key: 0 }, [i(d(x.value), 1)], 64)) : u(e.$slots, "default", { key: 1 })], 16, h));
+		return m(b, (e, t) => {
+			y && (t && y.unregisterSupportingText(t), y.registerSupportingText(e));
+		}, { immediate: !0 }), c(() => {
+			y?.unregisterSupportingText(b.value);
+		}), (e, n) => (l(), r("p", s(e.$attrs, { id: b.value }), [x.value ? (l(), r(t, { key: 0 }, [i(d(x.value), 1)], 64)) : u(e.$slots, "default", {}, void 0, void 0, 1)], 16, h));
 	}
 });
 //#endregion

package/dist/components/BaseTextarea.js

@@ -10,7 +10,7 @@ var d = [
 	"id",
 	"aria-describedby",
 	"aria-invalid"
-], p = /* @__PURE__ */ r({
+], p = /*@__PURE__*/ r({
 	inheritAttrs: !1,
 	__name: "BaseTextarea",
 	props: {

package/dist/index.d.ts

@@ -1,13 +1 @@
-export { default as CButton } from './components/BaseButton';
-export { default as CCheckbox } from './components/BaseCheckbox';
-export { default as CCheckboxGroup } from './components/BaseCheckboxGroup';
-export { default as CField } from './components/BaseField';
-export { default as CFile } from './components/BaseFile';
-export { default as CForm } from './components/BaseForm';
-export { default as CInput } from './components/BaseInput';
-export { default as CLabel } from './components/BaseLabel';
-export { default as CRadio } from './components/BaseRadio';
-export { default as CRadioGroup } from './components/BaseRadioGroup';
-export { default as CSelect } from './components/BaseSelect';
-export { default as CSupportingText } from './components/BaseSupportingText';
-export { default as CTextarea } from './components/BaseTextarea';
+export {}

package/dist/{components → src/components}/BaseField.d.ts

@@ -1,7 +1,10 @@
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
-        default?(_: {}): any;
+        default?(_: {
+            invalid: boolean;
+            message: string;
+        }): any;
     };
     refs: {};
     rootEl: any;

package/dist/{components → src/components}/internal/keys.d.ts

@@ -11,7 +11,9 @@ export interface CheckboxGroupContext {
 export declare const checkboxGroupKey: InjectionKey<CheckboxGroupContext>;
 export interface FieldContext {
     id: ComputedRef<string>;
-    supportingTextId: Ref<string | undefined>;
+    supportingTextId: ComputedRef<string | undefined>;
     validationMessage: Ref<string>;
+    registerSupportingText: (id: string) => void;
+    unregisterSupportingText: (id: string) => void;
 }
 export declare const fieldKey: InjectionKey<FieldContext | null>;

package/dist/src/index.d.ts

@@ -0,0 +1,13 @@
+export { default as CButton } from './components/BaseButton';
+export { default as CCheckbox } from './components/BaseCheckbox';
+export { default as CCheckboxGroup } from './components/BaseCheckboxGroup';
+export { default as CField } from './components/BaseField';
+export { default as CFile } from './components/BaseFile';
+export { default as CForm } from './components/BaseForm';
+export { default as CInput } from './components/BaseInput';
+export { default as CLabel } from './components/BaseLabel';
+export { default as CRadio } from './components/BaseRadio';
+export { default as CRadioGroup } from './components/BaseRadioGroup';
+export { default as CSelect } from './components/BaseSelect';
+export { default as CSupportingText } from './components/BaseSupportingText';
+export { default as CTextarea } from './components/BaseTextarea';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@charpente-ui/vue",
-    "version": "2.1.1",
+    "version": "2.2.0",
     "description": "Charpente UI is a headless Vue component library.",
     "type": "module",
     "scripts": {
@@ -10,6 +10,8 @@
         "build": "vite build",
         "test": "vitest",
         "test:coverage": "vitest run --coverage",
+        "test:e2e": "playwright test",
+        "test:all": "run-s test:coverage test:e2e",
         "prepare": "husky",
         "prepack": "npm run build",
         "release": "semantic-release"
@@ -29,27 +31,28 @@
         "./package.json": "./package.json"
     },
     "devDependencies": {
-        "@commitlint/cli": "^20.4.2",
-        "@commitlint/config-conventional": "^20.4.2",
+        "@commitlint/cli": "^20.5.3",
+        "@commitlint/config-conventional": "^20.5.3",
         "@front-factory/eslint-config": "^1.3.1",
+        "@playwright/test": "^1.61.1",
         "@semantic-release/changelog": "^6.0.3",
         "@semantic-release/git": "^10.0.1",
-        "@semantic-release/github": "^12.0.6",
-        "@vitejs/plugin-vue": "^6.0.4",
-        "@vitest/coverage-v8": "^4.1.5",
-        "@vue/test-utils": "^2.4.9",
-        "conventional-changelog-conventionalcommits": "^9.1.0",
-        "eslint": "^10.0.2",
-        "eslint-plugin-vue": "^10.8.0",
+        "@semantic-release/github": "^12.0.9",
+        "@vitejs/plugin-vue": "^6.0.8",
+        "@vitest/coverage-v8": "^4.1.10",
+        "@vue/test-utils": "^2.4.11",
+        "conventional-changelog-conventionalcommits": "^9.3.1",
+        "eslint": "^10.7.0",
+        "eslint-plugin-vue": "^10.10.0",
         "husky": "^9.1.7",
-        "jsdom": "^29.1.0",
+        "jsdom": "^29.1.1",
         "npm-run-all2": "^8.0.4",
-        "semantic-release": "^25.0.3",
-        "typescript-eslint": "^8.56.1",
-        "vite": "^8.0.10",
+        "semantic-release": "^25.0.8",
+        "typescript-eslint": "^8.65.0",
+        "vite": "^8.1.5",
         "vite-plugin-dts": "^4.5.4",
-        "vitest": "^4.1.5",
-        "vue": "^3.5.29"
+        "vitest": "^4.1.10",
+        "vue": "^3.5.40"
     },
     "peerDependencies": {
         "vue": "^3.5.0"