@charpente-ui/vue 1.6.0 → 2.0.0

package/README.md

@@ -75,7 +75,13 @@ npm run dev
 1. **Form Inputs** **(CInput, CTextarea, CSelect)**
 
 These components are thin wrappers around native elements. They use `v-model` and automatically link with labels via
-`useId()`. Full attribute inheritance.
+`useId()`. Full attribute inheritance. `CInput` and `CTextarea` support the native `v-model` modifiers:
+
+```vue
+<CInput v-model.trim="name"/>
+<CInput v-model.number="age"/>
+<CInput v-model.lazy="query"/>
+```
 
 2. **Selection Logic** _(CCheckbox, CRadio, CSelect)_
 
@@ -133,6 +139,12 @@ individual inputs:
 <CRadioGroup v-model="selected" name="my-group">...</CRadioGroup>
 ```
 
+> [!NOTE]
+> Standalone `CRadio` and `CCheckbox` accept any `value` (strings, numbers, booleans, objects — `v-model` compares by
+> reference, as in native Vue). Inside a group, the group `v-model` is typed `string | number`
+> (`(string | number)[]` for checkboxes): stick to those value types in grouped mode, as TypeScript cannot enforce it
+> on the `value` prop without dropping standalone object support.
+
 4. **Polymorphic Elements** _(CButton)_
 
 The button can change its HTML tag while keeping its behavior.
@@ -142,6 +154,39 @@ The button can change its HTML tag while keeping its behavior.
 <CButton as="RouterLink" to="/dashboard">Dashboard</CButton>
 ```
 
+When rendering a native `<button>`, `CButton` defaults to `type="button"` (instead of the native `type="submit"`) to
+avoid accidental form submissions. Pass `type="submit"` explicitly for submit buttons.
+
+5. **Field Wrapper** _(CField)_
+
+`CField` links a label and an input automatically: it provides a shared auto-generated id that `CLabel` picks up as
+`for` and the wrapped input picks up as `id` — no manual wiring.
+
+```vue
+<CField>
+    <CLabel>Email</CLabel>
+    <CInput v-model="email" type="email"/>
+</CField>
+```
+
+An explicit `id` on the input or `for` on the label always wins over the field id. A `CField` wrapping a whole
+group is ignored by the items (a single id must not land on every input); wrap each item in its own `CField`
+instead:
+
+```vue
+<CRadioGroup v-model="selected">
+    <CField>
+        <CLabel>Option A</CLabel>
+        <CRadio value="a"/>
+    </CField>
+
+    <CField>
+        <CLabel>Option B</CLabel>
+        <CRadio value="b"/>
+    </CField>
+</CRadioGroup>
+```
+
 ## Components
 
 | Name          | Core Logic                                                                       | Tag              | Status |
@@ -149,6 +194,7 @@ The button can change its HTML tag while keeping its behavior.
 | Button        | **Polymorphic:** Switches tags _(a, button, etc...)_ while keeping logic.        | `CButton`        | Ready  |
 | Checkbox      | **Smart Toggle:** Handles array state, booleans, and indeterminate natively.     | `CCheckbox`      | Ready  |
 | CheckboxGroup | **Group:** Shared v-model and name across checkboxes inside a fieldset.          | `CCheckboxGroup` | Ready  |
+| Field         | **Wrapper:** Auto-links a label and an input via a shared generated id.          | `CField`         | Ready  |
 | File          | **File Input:** Reactive file selection with `v-model` support.                  | `CFile`          | Ready  |
 | Form          | **Auto-Submit:** Integrated `preventDefault` and event handling.                 | `CForm`          | Ready  |
 | Input         | **Auto-ID:** Auto-links to labels via `useId()` and full attributes inheritance. | `CInput`         | Ready  |
@@ -157,3 +203,43 @@ The button can change its HTML tag while keeping its behavior.
 | RadioGroup    | **Group:** Shared v-model and name across radios inside a fieldset.              | `CRadioGroup`    | Ready  |
 | Select        | **Native Wrapper:** Single and multiple selection support.                       | `CSelect`        | Ready  |
 | Textarea      | **Flexible Binding:** Auto-ID and reactive model management.                     | `CTextarea`      | Ready  |
+
+## Wrapping Components
+
+When wrapping a Charpente UI component inside your own, you must forward `$attrs` so that native HTML attributes
+(`id`, `class`, `disabled`, etc.) reach the underlying element instead of landing on your wrapper's root node.
+
+```vue
+<script setup>
+import { CSelect } from '@charpente-ui/vue';
+
+defineOptions({
+    inheritAttrs: false
+});
+
+defineProps({
+    label: String,
+    error: String
+});
+
+const model = defineModel();
+</script>
+
+<template>
+    <div>
+        <label>{{ label }}</label>
+
+        <CSelect v-bind="$attrs" v-model="model">
+            <slot/>
+        </CSelect>
+
+        <span v-if="error">{{ error }}</span>
+    </div>
+</template>
+```
+
+**Why this matters:** Without `inheritAttrs: false`, Vue applies fallthrough attributes to the wrapper's root element
+(`<div>`) instead of the inner component. Adding `v-bind="$attrs"` on the Charpente component ensures attributes like
+`id`, `class`, `required`, or `disabled` pass all the way through to the native HTML element.
+
+This pattern works the same way for all Charpente components (`CInput`, `CCheckbox`, `CRadio`, etc.).

package/dist/components/BaseButton.js

@@ -0,0 +1,5 @@
+import e from "./BaseButton.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseButton.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseButton.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,16 @@
+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({
+	inheritAttrs: !1,
+	__name: "BaseButton",
+	props: { as: { default: "button" } },
+	setup(n) {
+		let l = n, u = s(), d = e(() => typeof u.type == "string" ? u.type : l.as === "button" ? "button" : void 0);
+		return (e, s) => (i(), t(o(n.as), r(e.$attrs, { type: d.value }), {
+			default: c(() => [a(e.$slots, "default")]),
+			_: 3
+		}, 16, ["type"]));
+	}
+});
+//#endregion
+export { l as default };

package/dist/components/BaseCheckbox.js

@@ -0,0 +1,5 @@
+import e from "./BaseCheckbox.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseCheckbox.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseCheckbox.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,35 @@
+import { checkboxGroupKey as e, fieldKey as t } from "./internal/keys.js";
+import { computed as n, createElementBlock as r, defineComponent as i, inject as a, isRef as o, mergeModels as s, mergeProps as c, openBlock as l, unref as u, useAttrs as d, useId as f, useModel as p, useTemplateRef as m, vModelCheckbox as h, watchPostEffect as g, withDirectives as _ } from "vue";
+//#region src/components/BaseCheckbox.vue?vue&type=script&setup=true&lang.ts
+var v = [
+	"id",
+	"name",
+	"value"
+], y = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "BaseCheckbox",
+	props: /* @__PURE__ */ s({
+		value: {},
+		indeterminate: { type: Boolean }
+	}, {
+		modelValue: { type: [Boolean, Array] },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(i) {
+		let s = i, y = p(i, "modelValue"), b = a(e, null), x = b ? b.model : y, S = d(), C = f(), w = m("input"), T = a(t, null), E = n(() => typeof S.id == "string" ? S.id : T?.id.value ?? C), D = n(() => typeof S.name == "string" ? S.name : b?.name.value);
+		return g(() => {
+			/* v8 ignore next 2 */
+			w.value && (w.value.indeterminate = !!s.indeterminate);
+		}), (e, t) => _((l(), r("input", c(e.$attrs, {
+			id: E.value,
+			ref: "input",
+			"onUpdate:modelValue": t[0] ||= (e) => o(x) ? x.value = e : null,
+			name: D.value,
+			type: "checkbox",
+			value: i.value
+		}), null, 16, v)), [[h, u(x)]]);
+	}
+});
+//#endregion
+export { y as default };

package/dist/components/BaseCheckboxGroup.js

@@ -0,0 +1,5 @@
+import e from "./BaseCheckboxGroup.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseCheckboxGroup.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseCheckboxGroup.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,21 @@
+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({
+	inheritAttrs: !1,
+	__name: "BaseCheckboxGroup",
+	props: {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(i) {
+		let p = f(i, "modelValue"), m = u(), h = d();
+		return c(e, {
+			model: p,
+			name: n(() => typeof m.name == "string" ? m.name : h)
+		}), c(t, null), (e, t) => (s(), r("fieldset", o(a(e.$attrs)), [l(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/BaseField.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    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 _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BaseField.js

@@ -0,0 +1,5 @@
+import e from "./BaseField.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseField.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseField.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,13 @@
+import { fieldKey as e } from "./internal/keys.js";
+import { computed as t, createElementBlock as n, defineComponent as r, guardReactiveProps as i, normalizeProps as a, openBlock as o, provide as s, renderSlot as c, useId as l } from "vue";
+//#region src/components/BaseField.vue?vue&type=script&setup=true&lang.ts
+var u = /* @__PURE__ */ r({
+	inheritAttrs: !1,
+	__name: "BaseField",
+	setup(r) {
+		let u = l();
+		return s(e, { id: t(() => u) }), (e, t) => (o(), n("div", a(i(e.$attrs)), [c(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { u as default };

package/dist/components/BaseFile.js

@@ -0,0 +1,5 @@
+import e from "./BaseFile.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseFile.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseFile.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,28 @@
+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, useAttrs as s, useId as c, useModel as l, useTemplateRef as u, watch as d } from "vue";
+//#region src/components/BaseFile.vue?vue&type=script&setup=true&lang.ts
+var f = ["id"], p = /* @__PURE__ */ r({
+	inheritAttrs: !1,
+	__name: "BaseFile",
+	props: {
+		modelValue: {},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(r) {
+		let p = l(r, "modelValue"), m = s(), h = c(), g = u("input"), _ = i(e, null), v = t(() => typeof m.id == "string" ? m.id : _?.id.value ?? h);
+		function y(e) {
+			p.value = e.target.files;
+		}
+		return d(p, (e) => {
+			!e && g.value && (g.value.value = "");
+		}), (e, t) => (o(), n("input", a(e.$attrs, {
+			id: v.value,
+			ref: "input",
+			type: "file",
+			onChange: y
+		}), null, 16, f));
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/BaseForm.js

@@ -0,0 +1,5 @@
+import e from "./BaseForm.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseForm.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseForm.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,16 @@
+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"], u = /* @__PURE__ */ n({
+	inheritAttrs: !1,
+	__name: "BaseForm",
+	emits: ["submit"],
+	setup(n, { emit: u }) {
+		let d = o(), f = s(), p = u, m = e(() => typeof d.id == "string" ? d.id : f);
+		return (e, n) => (i(), t("form", r(e.$attrs, {
+			id: m.value,
+			onSubmit: n[0] ||= c((e) => p("submit", e), ["prevent"])
+		}), [a(e.$slots, "default")], 16, l));
+	}
+});
+//#endregion
+export { u as default };

package/dist/components/BaseInput.d.ts

@@ -1,5 +1,6 @@
 type __VLS_PublicProps = {
     modelValue?: string | number;
+    'modelModifiers'?: Partial<Record<'trim' | 'number' | 'lazy', true>>;
 };
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => any;

package/dist/components/BaseInput.js

@@ -0,0 +1,5 @@
+import e from "./BaseInput.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseInput.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseInput.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,30 @@
+import { fieldKey as e } from "./internal/keys.js";
+import { applyModelModifiers as t } from "./internal/modifiers.js";
+import { computed as n, createElementBlock as r, defineComponent as i, inject as a, isRef as o, mergeProps as s, openBlock as c, unref as l, useAttrs as u, useId as d, useModel as f, vModelDynamic as p, withDirectives as m } from "vue";
+//#region src/components/BaseInput.vue?vue&type=script&setup=true&lang.ts
+var h = ["id"], g = ["id"], _ = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "BaseInput",
+	props: {
+		modelValue: {},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(i) {
+		let [_, v] = f(i, "modelValue", { set: (e) => t(e, v) }), y = u(), b = d(), x = a(e, null), S = n(() => typeof y.id == "string" ? y.id : x?.id.value ?? b);
+		return (e, t) => l(v).lazy ? m((c(), r("input", s({ key: 0 }, e.$attrs, {
+			id: S.value,
+			"onUpdate:modelValue": t[0] ||= (e) => o(_) ? _.value = e : null
+		}), null, 16, h)), [[
+			p,
+			l(_),
+			void 0,
+			{ lazy: !0 }
+		]]) : m((c(), r("input", s({ key: 1 }, e.$attrs, {
+			id: S.value,
+			"onUpdate:modelValue": t[1] ||= (e) => o(_) ? _.value = e : null
+		}), null, 16, g)), [[p, l(_)]]);
+	}
+});
+//#endregion
+export { _ as default };

package/dist/components/BaseLabel.js

@@ -0,0 +1,5 @@
+import e from "./BaseLabel.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseLabel.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseLabel.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,14 @@
+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({
+	inheritAttrs: !1,
+	__name: "BaseLabel",
+	props: { for: {} },
+	setup(r) {
+		let l = r, u = i(e, null), d = t(() => l.for ?? u?.id.value);
+		return (e, t) => (o(), n("label", a(e.$attrs, { for: d.value }), [s(e.$slots, "default")], 16, c));
+	}
+});
+//#endregion
+export { l as default };

package/dist/components/BaseRadio.js

@@ -0,0 +1,5 @@
+import e from "./BaseRadio.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseRadio.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseRadio.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,28 @@
+import { fieldKey as e, radioGroupKey as t } from "./internal/keys.js";
+import { computed as n, createElementBlock as r, defineComponent as i, inject as a, isRef as o, mergeModels as s, mergeProps as c, openBlock as l, unref as u, useAttrs as d, useId as f, useModel as p, vModelRadio as m, withDirectives as h } from "vue";
+//#region src/components/BaseRadio.vue?vue&type=script&setup=true&lang.ts
+var g = [
+	"id",
+	"name",
+	"value"
+], _ = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "BaseRadio",
+	props: /* @__PURE__ */ s({ value: {} }, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(i) {
+		let s = p(i, "modelValue"), _ = a(t, null), v = _ ? _.model : s, y = d(), b = f(), x = a(e, null), S = n(() => typeof y.id == "string" ? y.id : x?.id.value ?? b), C = n(() => typeof y.name == "string" ? y.name : _?.name.value);
+		return (e, t) => h((l(), r("input", c(e.$attrs, {
+			id: S.value,
+			"onUpdate:modelValue": t[0] ||= (e) => o(v) ? v.value = e : null,
+			name: C.value,
+			value: i.value,
+			type: "radio"
+		}), null, 16, g)), [[m, u(v)]]);
+	}
+});
+//#endregion
+export { _ as default };

package/dist/components/BaseRadioGroup.js

@@ -0,0 +1,5 @@
+import e from "./BaseRadioGroup.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseRadioGroup.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseRadioGroup.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,21 @@
+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({
+	inheritAttrs: !1,
+	__name: "BaseRadioGroup",
+	props: {
+		modelValue: {},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(i) {
+		let p = f(i, "modelValue"), m = u(), h = d();
+		return c(t, {
+			model: p,
+			name: n(() => typeof m.name == "string" ? m.name : h)
+		}), c(e, null), (e, t) => (s(), r("fieldset", o(a(e.$attrs)), [l(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/BaseSelect.js

@@ -0,0 +1,5 @@
+import e from "./BaseSelect.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseSelect.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseSelect.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,21 @@
+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, useAttrs as c, useId as l, useModel as u, vModelSelect as d, withDirectives as f } from "vue";
+//#region src/components/BaseSelect.vue?vue&type=script&setup=true&lang.ts
+var p = ["id"], m = /* @__PURE__ */ r({
+	inheritAttrs: !1,
+	__name: "BaseSelect",
+	props: {
+		modelValue: {},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(r) {
+		let m = u(r, "modelValue"), h = c(), g = l(), _ = i(e, null), v = t(() => typeof h.id == "string" ? h.id : _?.id.value ?? g);
+		return (e, t) => f((o(), n("select", a(e.$attrs, {
+			id: v.value,
+			"onUpdate:modelValue": t[0] ||= (e) => m.value = e
+		}), [s(e.$slots, "default")], 16, p)), [[d, m.value]]);
+	}
+});
+//#endregion
+export { m as default };

package/dist/components/BaseTextarea.d.ts

@@ -1,5 +1,6 @@
 type __VLS_PublicProps = {
     modelValue?: string | number;
+    'modelModifiers'?: Partial<Record<'trim' | 'number' | 'lazy', true>>;
 };
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => any;

package/dist/components/BaseTextarea.js

@@ -0,0 +1,5 @@
+import e from "./BaseTextarea.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseTextarea.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseTextarea.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,30 @@
+import { fieldKey as e } from "./internal/keys.js";
+import { applyModelModifiers as t } from "./internal/modifiers.js";
+import { computed as n, createElementBlock as r, defineComponent as i, inject as a, isRef as o, mergeProps as s, openBlock as c, unref as l, useAttrs as u, useId as d, useModel as f, vModelText as p, withDirectives as m } from "vue";
+//#region src/components/BaseTextarea.vue?vue&type=script&setup=true&lang.ts
+var h = ["id"], g = ["id"], _ = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "BaseTextarea",
+	props: {
+		modelValue: {},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(i) {
+		let [_, v] = f(i, "modelValue", { set: (e) => t(e, v) }), y = u(), b = d(), x = a(e, null), S = n(() => typeof y.id == "string" ? y.id : x?.id.value ?? b);
+		return (e, t) => l(v).lazy ? m((c(), r("textarea", s({ key: 0 }, e.$attrs, {
+			id: S.value,
+			"onUpdate:modelValue": t[0] ||= (e) => o(_) ? _.value = e : null
+		}), null, 16, h)), [[
+			p,
+			l(_),
+			void 0,
+			{ lazy: !0 }
+		]]) : m((c(), r("textarea", s({ key: 1 }, e.$attrs, {
+			id: S.value,
+			"onUpdate:modelValue": t[1] ||= (e) => o(_) ? _.value = e : null
+		}), null, 16, g)), [[p, l(_)]]);
+	}
+});
+//#endregion
+export { _ as default };

package/dist/components/internal/keys.d.ts

@@ -1,11 +1,15 @@
 import { InjectionKey, ModelRef, ComputedRef } from 'vue';
 export interface RadioGroupContext {
-    model: ModelRef<unknown>;
+    model: ModelRef<string | number | undefined>;
     name: ComputedRef<string>;
 }
 export declare const radioGroupKey: InjectionKey<RadioGroupContext>;
 export interface CheckboxGroupContext {
-    model: ModelRef<unknown[]>;
+    model: ModelRef<(string | number)[]>;
     name: ComputedRef<string>;
 }
 export declare const checkboxGroupKey: InjectionKey<CheckboxGroupContext>;
+export interface FieldContext {
+    id: ComputedRef<string>;
+}
+export declare const fieldKey: InjectionKey<FieldContext | null>;

package/dist/components/internal/keys.js

@@ -0,0 +1,4 @@
+//#region src/components/internal/keys.ts
+var e = Symbol("CRadioGroup"), t = Symbol("CCheckboxGroup"), n = Symbol("CField");
+//#endregion
+export { t as checkboxGroupKey, n as fieldKey, e as radioGroupKey };

package/dist/components/internal/modifiers.d.ts

@@ -0,0 +1,6 @@
+export interface ModelModifiers {
+    trim?: boolean;
+    number?: boolean;
+    lazy?: boolean;
+}
+export declare function applyModelModifiers(value: string | number, modifiers: ModelModifiers): string | number;

package/dist/components/internal/modifiers.js

@@ -0,0 +1,10 @@
+//#region src/components/internal/modifiers.ts
+function e(e, t) {
+	if (t.trim && typeof e == "string" && (e = e.trim()), t.number && typeof e == "string") {
+		let t = parseFloat(e);
+		e = isNaN(t) ? e : t;
+	}
+	return e;
+}
+//#endregion
+export { e as applyModelModifiers };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 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';

package/dist/index.js

@@ -0,0 +1,13 @@
+import e from "./components/BaseButton.js";
+import t from "./components/BaseCheckbox.js";
+import n from "./components/BaseCheckboxGroup.js";
+import r from "./components/BaseField.js";
+import i from "./components/BaseFile.js";
+import a from "./components/BaseForm.js";
+import o from "./components/BaseInput.js";
+import s from "./components/BaseLabel.js";
+import c from "./components/BaseRadio.js";
+import l from "./components/BaseRadioGroup.js";
+import u from "./components/BaseSelect.js";
+import d from "./components/BaseTextarea.js";
+export { e as CButton, t as CCheckbox, n as CCheckboxGroup, r as CField, i as CFile, a as CForm, o as CInput, s as CLabel, c as CRadio, l as CRadioGroup, u as CSelect, d as CTextarea };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@charpente-ui/vue",
-    "version": "1.6.0",
+    "version": "2.0.0",
     "description": "Charpente UI is a headless Vue component library.",
     "type": "module",
     "scripts": {
@@ -10,21 +10,23 @@
         "build": "vite build",
         "test": "vitest",
         "test:coverage": "vitest run --coverage",
-        "prepare": "husky && npm run build",
+        "prepare": "husky",
+        "prepack": "npm run build",
         "release": "semantic-release"
     },
     "engines": {
         "node": ">=20"
     },
-    "main": "./dist/charpente.umd.cjs",
-    "module": "./dist/charpente.js",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "import": "./dist/charpente.js",
-            "require": "./dist/charpente.umd.cjs"
-        }
+            "import": "./dist/index.js",
+            "default": "./dist/index.js"
+        },
+        "./package.json": "./package.json"
     },
     "devDependencies": {
         "@commitlint/cli": "^20.4.2",

package/dist/charpente.js

@@ -1,182 +0,0 @@
-import { computed as e, createBlock as t, createElementBlock as n, defineComponent as r, guardReactiveProps as i, inject as a, isRef as o, mergeModels as s, mergeProps as c, normalizeProps as l, openBlock as u, provide as d, renderSlot as f, resolveDynamicComponent as p, unref as m, useAttrs as h, useId as g, useModel as _, useTemplateRef as v, vModelCheckbox as y, vModelDynamic as b, vModelRadio as x, vModelSelect as S, vModelText as C, watch as w, watchPostEffect as T, withCtx as E, withDirectives as D, withModifiers as O } from "vue";
-//#endregion
-//#region src/components/BaseButton.vue
-var k = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseButton",
-	props: { as: { default: "button" } },
-	setup(e) {
-		return (n, r) => (u(), t(p(e.as), l(i(n.$attrs)), {
-			default: E(() => [f(n.$slots, "default")]),
-			_: 3
-		}, 16));
-	}
-}), A = Symbol("CRadioGroup"), j = Symbol("CCheckboxGroup"), M = [
-	"id",
-	"name",
-	"value"
-], N = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseCheckbox",
-	props: /* @__PURE__ */ s({
-		value: {},
-		indeterminate: { type: Boolean }
-	}, {
-		modelValue: { type: [Boolean, Array] },
-		modelModifiers: {}
-	}),
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = t, i = _(t, "modelValue"), s = a(j, null), l = s ? s.model : i, d = h(), f = g(), p = v("input"), b = e(() => typeof d.id == "string" ? d.id : f), x = e(() => typeof d.name == "string" ? d.name : s?.name.value);
-		return T(() => {
-			p.value && (p.value.indeterminate = !!r.indeterminate);
-		}), (e, r) => D((u(), n("input", c(e.$attrs, {
-			id: b.value,
-			ref: "input",
-			"onUpdate:modelValue": r[0] ||= (e) => o(l) ? l.value = e : null,
-			name: x.value,
-			type: "checkbox",
-			value: t.value
-		}), null, 16, M)), [[y, m(l)]]);
-	}
-}), P = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseCheckboxGroup",
-	props: {
-		modelValue: { default: () => [] },
-		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), a = h(), o = g();
-		return d(j, {
-			model: r,
-			name: e(() => typeof a.name == "string" ? a.name : o)
-		}), (e, t) => (u(), n("fieldset", l(i(e.$attrs)), [f(e.$slots, "default")], 16));
-	}
-}), F = ["id"], I = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseFile",
-	props: {
-		modelValue: {},
-		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), i = h(), a = g(), o = v("input"), s = e(() => typeof i.id == "string" ? i.id : a);
-		function l(e) {
-			r.value = e.target.files;
-		}
-		return w(r, (e) => {
-			!e && o.value && (o.value.value = "");
-		}), (e, t) => (u(), n("input", c(e.$attrs, {
-			id: s.value,
-			ref: "input",
-			type: "file",
-			onChange: l
-		}), null, 16, F));
-	}
-}), L = ["id"], R = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseForm",
-	emits: ["submit"],
-	setup(t, { emit: r }) {
-		let i = h(), a = g(), o = r, s = e(() => typeof i.id == "string" ? i.id : a);
-		return (e, t) => (u(), n("form", c(e.$attrs, {
-			id: s.value,
-			onSubmit: t[0] ||= O((e) => o("submit", e), ["prevent"])
-		}), [f(e.$slots, "default")], 16, L));
-	}
-}), z = ["id"], B = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseInput",
-	props: {
-		modelValue: {},
-		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), i = h(), a = g(), o = e(() => typeof i.id == "string" ? i.id : a);
-		return (e, t) => D((u(), n("input", c(e.$attrs, {
-			id: o.value,
-			"onUpdate:modelValue": t[0] ||= (e) => r.value = e
-		}), null, 16, z)), [[b, r.value]]);
-	}
-}), V = ["for"], H = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseLabel",
-	props: { for: {} },
-	setup(e) {
-		let t = e;
-		return (e, r) => (u(), n("label", c(e.$attrs, { for: t.for }), [f(e.$slots, "default")], 16, V));
-	}
-}), U = [
-	"id",
-	"name",
-	"value"
-], W = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseRadio",
-	props: /* @__PURE__ */ s({ value: {} }, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), i = a(A, null), s = i ? i.model : r, l = h(), d = g(), f = e(() => typeof l.id == "string" ? l.id : d), p = e(() => typeof l.name == "string" ? l.name : i?.name.value);
-		return (e, r) => D((u(), n("input", c(e.$attrs, {
-			id: f.value,
-			"onUpdate:modelValue": r[0] ||= (e) => o(s) ? s.value = e : null,
-			name: p.value,
-			value: t.value,
-			type: "radio"
-		}), null, 16, U)), [[x, m(s)]]);
-	}
-}), G = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseRadioGroup",
-	props: {
-		modelValue: {},
-		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), a = h(), o = g();
-		return d(A, {
-			model: r,
-			name: e(() => typeof a.name == "string" ? a.name : o)
-		}), (e, t) => (u(), n("fieldset", l(i(e.$attrs)), [f(e.$slots, "default")], 16));
-	}
-}), K = ["id"], q = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseSelect",
-	props: {
-		modelValue: {},
-		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), i = h(), a = g(), o = e(() => typeof i.id == "string" ? i.id : a);
-		return (e, t) => D((u(), n("select", c(e.$attrs, {
-			id: o.value,
-			"onUpdate:modelValue": t[0] ||= (e) => r.value = e
-		}), [f(e.$slots, "default")], 16, K)), [[S, r.value]]);
-	}
-}), J = ["id"], Y = /* @__PURE__ */ r({
-	inheritAttrs: !1,
-	__name: "BaseTextarea",
-	props: {
-		modelValue: {},
-		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t) {
-		let r = _(t, "modelValue"), i = h(), a = g(), o = e(() => typeof i.id == "string" ? i.id : a);
-		return (e, t) => D((u(), n("textarea", c(e.$attrs, {
-			id: o.value,
-			"onUpdate:modelValue": t[0] ||= (e) => r.value = e
-		}), null, 16, J)), [[C, r.value]]);
-	}
-});
-//#endregion
-export { k as CButton, N as CCheckbox, P as CCheckboxGroup, I as CFile, R as CForm, B as CInput, H as CLabel, W as CRadio, G as CRadioGroup, q as CSelect, Y as CTextarea };

package/dist/charpente.umd.cjs

@@ -1 +0,0 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Charpente={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseButton`,props:{as:{default:`button`}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.as),(0,t.normalizeProps)((0,t.guardReactiveProps)(n.$attrs)),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(n.$slots,`default`)]),_:3},16))}}),r=Symbol(`CRadioGroup`),i=Symbol(`CCheckboxGroup`),a=[`id`,`name`,`value`],o=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseCheckbox`,props:(0,t.mergeModels)({value:{},indeterminate:{type:Boolean}},{modelValue:{type:[Boolean,Array]},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=e,r=(0,t.useModel)(e,`modelValue`),o=(0,t.inject)(i,null),s=o?o.model:r,c=(0,t.useAttrs)(),l=(0,t.useId)(),u=(0,t.useTemplateRef)(`input`),d=(0,t.computed)(()=>typeof c.id==`string`?c.id:l),f=(0,t.computed)(()=>typeof c.name==`string`?c.name:o?.name.value);return(0,t.watchPostEffect)(()=>{u.value&&(u.value.indeterminate=!!n.indeterminate)}),(n,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`input`,(0,t.mergeProps)(n.$attrs,{id:d.value,ref:`input`,"onUpdate:modelValue":r[0]||=e=>(0,t.isRef)(s)?s.value=e:null,name:f.value,type:`checkbox`,value:e.value}),null,16,a)),[[t.vModelCheckbox,(0,t.unref)(s)]])}}),s=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseCheckboxGroup`,props:{modelValue:{default:()=>[]},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.useAttrs)(),a=(0,t.useId)();return(0,t.provide)(i,{model:n,name:(0,t.computed)(()=>typeof r.name==`string`?r.name:a)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`fieldset`,(0,t.normalizeProps)((0,t.guardReactiveProps)(e.$attrs)),[(0,t.renderSlot)(e.$slots,`default`)],16))}}),c=[`id`],l=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseFile`,props:{modelValue:{},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.useAttrs)(),i=(0,t.useId)(),a=(0,t.useTemplateRef)(`input`),o=(0,t.computed)(()=>typeof r.id==`string`?r.id:i);function s(e){n.value=e.target.files}return(0,t.watch)(n,e=>{!e&&a.value&&(a.value.value=``)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`input`,(0,t.mergeProps)(e.$attrs,{id:o.value,ref:`input`,type:`file`,onChange:s}),null,16,c))}}),u=[`id`],d=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseForm`,emits:[`submit`],setup(e,{emit:n}){let r=(0,t.useAttrs)(),i=(0,t.useId)(),a=n,o=(0,t.computed)(()=>typeof r.id==`string`?r.id:i);return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`form`,(0,t.mergeProps)(e.$attrs,{id:o.value,onSubmit:n[0]||=(0,t.withModifiers)(e=>a(`submit`,e),[`prevent`])}),[(0,t.renderSlot)(e.$slots,`default`)],16,u))}}),f=[`id`],p=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseInput`,props:{modelValue:{},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.useAttrs)(),i=(0,t.useId)(),a=(0,t.computed)(()=>typeof r.id==`string`?r.id:i);return(e,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`input`,(0,t.mergeProps)(e.$attrs,{id:a.value,"onUpdate:modelValue":r[0]||=e=>n.value=e}),null,16,f)),[[t.vModelDynamic,n.value]])}}),m=[`for`],h=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseLabel`,props:{for:{}},setup(e){let n=e;return(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`label`,(0,t.mergeProps)(e.$attrs,{for:n.for}),[(0,t.renderSlot)(e.$slots,`default`)],16,m))}}),g=[`id`,`name`,`value`],_=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseRadio`,props:(0,t.mergeModels)({value:{}},{modelValue:{},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),i=(0,t.inject)(r,null),a=i?i.model:n,o=(0,t.useAttrs)(),s=(0,t.useId)(),c=(0,t.computed)(()=>typeof o.id==`string`?o.id:s),l=(0,t.computed)(()=>typeof o.name==`string`?o.name:i?.name.value);return(n,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`input`,(0,t.mergeProps)(n.$attrs,{id:c.value,"onUpdate:modelValue":r[0]||=e=>(0,t.isRef)(a)?a.value=e:null,name:l.value,value:e.value,type:`radio`}),null,16,g)),[[t.vModelRadio,(0,t.unref)(a)]])}}),v=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseRadioGroup`,props:{modelValue:{},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),i=(0,t.useAttrs)(),a=(0,t.useId)();return(0,t.provide)(r,{model:n,name:(0,t.computed)(()=>typeof i.name==`string`?i.name:a)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`fieldset`,(0,t.normalizeProps)((0,t.guardReactiveProps)(e.$attrs)),[(0,t.renderSlot)(e.$slots,`default`)],16))}}),y=[`id`],b=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseSelect`,props:{modelValue:{},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.useAttrs)(),i=(0,t.useId)(),a=(0,t.computed)(()=>typeof r.id==`string`?r.id:i);return(e,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`select`,(0,t.mergeProps)(e.$attrs,{id:a.value,"onUpdate:modelValue":r[0]||=e=>n.value=e}),[(0,t.renderSlot)(e.$slots,`default`)],16,y)),[[t.vModelSelect,n.value]])}}),x=[`id`],S=(0,t.defineComponent)({inheritAttrs:!1,__name:`BaseTextarea`,props:{modelValue:{},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.useAttrs)(),i=(0,t.useId)(),a=(0,t.computed)(()=>typeof r.id==`string`?r.id:i);return(e,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`textarea`,(0,t.mergeProps)(e.$attrs,{id:a.value,"onUpdate:modelValue":r[0]||=e=>n.value=e}),null,16,x)),[[t.vModelText,n.value]])}});e.CButton=n,e.CCheckbox=o,e.CCheckboxGroup=s,e.CFile=l,e.CForm=d,e.CInput=p,e.CLabel=h,e.CRadio=_,e.CRadioGroup=v,e.CSelect=b,e.CTextarea=S});