@charpente-ui/vue 1.2.2 → 1.3.0

package/README.md

@@ -34,6 +34,18 @@ Styled Components)_.
 npm install @charpente-ui/vue
 ```
 
+## Playground
+
+Try it live on StackBlitz — no installation required:
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/charpente-ui/vue)
+
+Or run it locally:
+
+```shell
+npm run dev
+```
+
 ## Usage
 
 ```vue
@@ -89,7 +101,39 @@ Managing checkbox arrays in Vue can be repetitive. **Charpente UI** simplifies t
 </CSelect>
 ```
 
-3. **Polymorphic Elements** _(CButton)_
+3. **Group Components** _(CRadioGroup, CCheckboxGroup)_
+
+Groups wrap related inputs in a semantic `<fieldset>`, sharing a `v-model` and a `name` attribute across all children
+automatically.
+
+```vue
+<CRadioGroup v-model="selected">
+    <CLabel for="opt-a">Option A</CLabel>
+    <CRadio id="opt-a" value="a"/>
+
+    <CLabel for="opt-b">Option B</CLabel>
+    <CRadio id="opt-b" value="b"/>
+</CRadioGroup>
+```
+
+```vue
+<CCheckboxGroup v-model="selected">
+    <CLabel for="cb-a">Option A</CLabel>
+    <CCheckbox id="cb-a" value="a"/>
+
+    <CLabel for="cb-b">Option B</CLabel>
+    <CCheckbox id="cb-b" value="b"/>
+</CCheckboxGroup>
+```
+
+The `name` attribute is auto-generated via `useId()` and shared across all children. Override it on the group or on
+individual inputs:
+
+```vue
+<CRadioGroup v-model="selected" name="my-group">...</CRadioGroup>
+```
+
+4. **Polymorphic Elements** _(CButton)_
 
 The button can change its HTML tag while keeping its behavior.
 
@@ -100,14 +144,16 @@ The button can change its HTML tag while keeping its behavior.
 
 ## Components
 
-| Name     | Core Logic                                                                       | Tag         | Status |
-|----------|----------------------------------------------------------------------------------|-------------|--------|
-| Button   | **Polymorphic:** Switches tags _(a, button, etc...)_ while keeping logic.        | `CButton`   | Ready  |
-| Checkbox | **Smart Toggle:** Handles array state, booleans, and indeterminate natively.     | `CCheckbox` | 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  |
-| Label    | **Context-Aware:** Simple, accessible binding for any input.                     | `CLabel`    | Ready  |
-| Radio    | **Selection:** Minimalist wrapper for native radio input.                        | `CRadio`    | Ready  |
-| Select   | **Native Wrapper:** Single and multiple selection support.                       | `CSelect`   | Ready  |
-| Textarea | **Flexible Binding:** Auto-ID and reactive model management.                     | `CTextarea` | Ready  |
+| Name          | Core Logic                                                                       | Tag              | Status |
+|---------------|----------------------------------------------------------------------------------|------------------|--------|
+| 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  |
+| 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  |
+| Label         | **Context-Aware:** Simple, accessible binding for any input.                     | `CLabel`         | Ready  |
+| Radio         | **Selection:** Minimalist wrapper for native radio input.                        | `CRadio`         | Ready  |
+| 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  |

package/dist/charpente.js

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

package/dist/charpente.umd.cjs

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

package/dist/components/BaseCheckboxGroup.d.ts

@@ -0,0 +1,24 @@
+type __VLS_PublicProps = {
+    modelValue?: (string | number)[];
+};
+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<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: (string | number)[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: (string | number)[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, 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/BaseForm.d.ts

@@ -8,9 +8,9 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    submit: (event: Event) => any;
+    submit: (event: SubmitEvent) => any;
 }, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
-    onSubmit?: ((event: Event) => any) | undefined;
+    onSubmit?: ((event: SubmitEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/BaseRadioGroup.d.ts

@@ -0,0 +1,24 @@
+type __VLS_PublicProps = {
+    modelValue?: string | number;
+};
+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<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, 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/__tests__/BaseCheckboxGroup.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/BaseRadioGroup.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 export { default as CButton } from './components/BaseButton';
 export { default as CCheckbox } from './components/BaseCheckbox';
+export { default as CCheckboxGroup } from './components/BaseCheckboxGroup';
 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 CTextarea } from './components/BaseTextarea';

package/package.json

@@ -1,9 +1,10 @@
 {
     "name": "@charpente-ui/vue",
-    "version": "1.2.2",
+    "version": "1.3.0",
     "description": "Charpente UI is a headless CSS Vue component library.",
     "type": "module",
     "scripts": {
+        "dev": "vite --config playground/vite.config.ts",
         "lint:js": "eslint --fix .",
         "lint": "npm-run-all --parallel lint:*",
         "build": "vite build",