@vielzeug/refine 1.3.1 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/checkbox-group.cjs +7 -7
- package/dist/checkbox-group.cjs.map +1 -1
- package/dist/checkbox-group.js +35 -26
- package/dist/checkbox-group.js.map +1 -1
- package/dist/checkbox.cjs +3 -3
- package/dist/checkbox.cjs.map +1 -1
- package/dist/checkbox.js +24 -19
- package/dist/checkbox.js.map +1 -1
- package/dist/combobox.cjs +24 -24
- package/dist/combobox.cjs.map +1 -1
- package/dist/combobox.js +133 -129
- package/dist/combobox.js.map +1 -1
- package/dist/custom-elements.json +4227 -3725
- package/dist/headless/auto-resize.cjs +2 -0
- package/dist/headless/auto-resize.cjs.map +1 -0
- package/dist/headless/auto-resize.d.ts +29 -0
- package/dist/headless/auto-resize.d.ts.map +1 -0
- package/dist/headless/auto-resize.js +16 -0
- package/dist/headless/auto-resize.js.map +1 -0
- package/dist/headless/checkable.cjs +1 -1
- package/dist/headless/checkable.cjs.map +1 -1
- package/dist/headless/checkable.d.ts +25 -7
- package/dist/headless/checkable.d.ts.map +1 -1
- package/dist/headless/checkable.js +19 -14
- package/dist/headless/checkable.js.map +1 -1
- package/dist/headless/choice-field.cjs +1 -1
- package/dist/headless/choice-field.cjs.map +1 -1
- package/dist/headless/choice-field.d.ts +21 -0
- package/dist/headless/choice-field.d.ts.map +1 -1
- package/dist/headless/choice-field.js +27 -19
- package/dist/headless/choice-field.js.map +1 -1
- package/dist/headless/composer.cjs +2 -0
- package/dist/headless/composer.cjs.map +1 -0
- package/dist/headless/composer.d.ts +44 -0
- package/dist/headless/composer.d.ts.map +1 -0
- package/dist/headless/composer.js +21 -0
- package/dist/headless/composer.js.map +1 -0
- package/dist/headless/field-base.cjs +1 -1
- package/dist/headless/field-base.cjs.map +1 -1
- package/dist/headless/field-base.d.ts +97 -84
- package/dist/headless/field-base.d.ts.map +1 -1
- package/dist/headless/field-base.js +43 -32
- package/dist/headless/field-base.js.map +1 -1
- package/dist/headless/index.d.ts +3 -1
- package/dist/headless/index.d.ts.map +1 -1
- package/dist/headless/text-field.cjs +1 -1
- package/dist/headless/text-field.cjs.map +1 -1
- package/dist/headless/text-field.d.ts +40 -0
- package/dist/headless/text-field.d.ts.map +1 -1
- package/dist/headless/text-field.js +30 -25
- package/dist/headless/text-field.js.map +1 -1
- package/dist/headless.cjs +1 -1
- package/dist/headless.js +27 -25
- package/dist/index.cjs +1 -1
- package/dist/index.js +61 -60
- package/dist/input.cjs +9 -9
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +49 -44
- package/dist/input.js.map +1 -1
- package/dist/inputs/checkbox/checkbox.d.ts +3 -0
- package/dist/inputs/checkbox/checkbox.d.ts.map +1 -1
- package/dist/inputs/combobox/combobox.d.ts +1 -0
- package/dist/inputs/combobox/combobox.d.ts.map +1 -1
- package/dist/inputs/combobox/combobox.types.d.ts +2 -0
- package/dist/inputs/combobox/combobox.types.d.ts.map +1 -1
- package/dist/inputs/index.d.ts +2 -0
- package/dist/inputs/index.d.ts.map +1 -1
- package/dist/inputs/input/input.d.ts.map +1 -1
- package/dist/inputs/message-composer/message-composer.css.cjs +2 -0
- package/dist/inputs/message-composer/message-composer.css.cjs.map +1 -0
- package/dist/inputs/message-composer/message-composer.css.js +6 -0
- package/dist/inputs/message-composer/message-composer.css.js.map +1 -0
- package/dist/inputs/message-composer/message-composer.d.ts +139 -0
- package/dist/inputs/message-composer/message-composer.d.ts.map +1 -0
- package/dist/inputs/shared/field-binding.cjs +1 -1
- package/dist/inputs/shared/field-binding.cjs.map +1 -1
- package/dist/inputs/shared/field-binding.d.ts +15 -0
- package/dist/inputs/shared/field-binding.d.ts.map +1 -1
- package/dist/inputs/shared/field-binding.js +4 -3
- package/dist/inputs/shared/field-binding.js.map +1 -1
- package/dist/inputs/shared/form-context.cjs.map +1 -1
- package/dist/inputs/shared/form-context.d.ts +6 -0
- package/dist/inputs/shared/form-context.d.ts.map +1 -1
- package/dist/inputs/shared/form-context.js.map +1 -1
- package/dist/inputs/textarea/textarea.d.ts.map +1 -1
- package/dist/message-composer.cjs +52 -0
- package/dist/message-composer.cjs.map +1 -0
- package/dist/message-composer.js +168 -0
- package/dist/message-composer.js.map +1 -0
- package/dist/ore/dist/base-element.cjs +1 -1
- package/dist/ore/dist/base-element.cjs.map +1 -1
- package/dist/ore/dist/base-element.js +13 -3
- package/dist/ore/dist/base-element.js.map +1 -1
- package/dist/ore/dist/forms/field.cjs +1 -1
- package/dist/ore/dist/forms/field.cjs.map +1 -1
- package/dist/ore/dist/forms/field.js +29 -22
- package/dist/ore/dist/forms/field.js.map +1 -1
- package/dist/ore/dist/runtime.cjs +1 -1
- package/dist/ore/dist/runtime.cjs.map +1 -1
- package/dist/ore/dist/runtime.js +3 -1
- package/dist/ore/dist/runtime.js.map +1 -1
- package/dist/radio-group.cjs +9 -9
- package/dist/radio-group.cjs.map +1 -1
- package/dist/radio-group.js +44 -38
- package/dist/radio-group.js.map +1 -1
- package/dist/radio.cjs +3 -3
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.js +23 -24
- package/dist/radio.js.map +1 -1
- package/dist/refine.cjs +228 -178
- package/dist/refine.cjs.map +1 -1
- package/dist/refine.iife.js +228 -178
- package/dist/refine.iife.js.map +1 -1
- package/dist/refine.js +251 -201
- package/dist/refine.js.map +1 -1
- package/dist/select.cjs +31 -31
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +125 -122
- package/dist/select.js.map +1 -1
- package/dist/shared/size-presets.cjs +1 -1
- package/dist/shared/size-presets.cjs.map +1 -1
- package/dist/shared/size-presets.d.ts +23 -0
- package/dist/shared/size-presets.d.ts.map +1 -1
- package/dist/shared/size-presets.js +17 -1
- package/dist/shared/size-presets.js.map +1 -1
- package/dist/switch.cjs +3 -3
- package/dist/switch.cjs.map +1 -1
- package/dist/switch.js +17 -18
- package/dist/switch.js.map +1 -1
- package/dist/textarea.cjs +15 -15
- package/dist/textarea.cjs.map +1 -1
- package/dist/textarea.js +64 -60
- package/dist/textarea.js.map +1 -1
- package/package.json +11 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-element.js","names":["s","u","c","o","d","i","a","t","e","r","l"],"sources":["../../../../ore/dist/base-element.js"],"sourcesContent":["import{warn as e}from\"./_dev.js\";import{OreLifecycleError as t,reportRuntimeError as n}from\"./errors.js\";import\"./types/bindings.js\";import{onCleanup as r,runWithContext as i}from\"./runtime.js\";import{createProps as a,getPropMeta as o}from\"./props.js\";import{ComponentPhase as s,LIFECYCLE_EVENTS as c}from\"./types.js\";import{loadStylesheet as l}from\"./utils/css.js\";import{scope as u,untrack as d}from\"@vielzeug/ripple\";var f=()=>({generation:0,mountCallbacks:[],phase:s.UNINITIALIZED,scope:u(),templateResult:null}),p=class extends HTMLElement{static _definition;static _normalizedPropDefs;static formAssociated=!1;static observedAttributes=[];_component;constructor(){super();let e=this.constructor._definition;e?.shadow!==!1&&this.attachShadow({mode:`open`,...e?.shadow}),this._component=f()}connectedCallback(){d(()=>{this._component.phase===s.UNINITIALIZED&&this._runSetup(),this._init()}),this.dispatchEvent(new CustomEvent(c.CONNECT,{bubbles:!1,composed:!1}))}attributeChangedCallback(e,t,n){if(t===n)return;let r=o(this,e);if(!r)return;let i=r.parse(n);Object.is(d(()=>r.signal.value),i)||(r.signal.value=i)}disconnectedCallback(){this._component.generation++,this._component.phase=s.UNMOUNTED,this.dispatchEvent(new CustomEvent(c.DISCONNECT,{bubbles:!1,composed:!1})),this._component.scope.dispose(),this._component.mountCallbacks=[],this._component.phase=s.UNINITIALIZED,this._component.scope=u(),this._component.templateResult=null}_handleSetupError(e,r=`setup`){let i=e instanceof Error?e:Error(String(e)),a=new t(`<${this.localName}> failed during ${this._component.phase} (${r})`,{cause:i,component:this.localName,phase:r}),o=this.constructor._definition;if(o?.onError)try{return o.onError(a,this)}catch{}n(a,this)}_runSetup(){this._component.phase=s.SETUP_RUNNING;let e=this.constructor._definition,t=this.constructor._normalizedPropDefs,n={element:this,mountCallbacks:[]};try{let r;if(this._component.scope.run(()=>{r=i(n,()=>{let n=t?a(this,t):{};return e.setup(n)})}),this._component.mountCallbacks.push(...n.mountCallbacks),r!=null&&typeof r.then==`function`){let t=this._component.mountCallbacks.splice(0);this._component.phase=s.LOADING,e.loading&&(this._component.templateResult=e.loading()),this._runSetupAsync(r,t,this._component.generation)}else this._component.templateResult=r??null,this._component.phase=s.SETUP_DONE}catch(e){let t=this._handleSetupError(e);if(t)this._component.templateResult=t,this._component.phase=s.SETUP_DONE;else throw this._component.phase=s.UNINITIALIZED,e}}_isStale(e){return this._component.generation!==e||!this.isConnected}async _runSetupAsync(t,n,r){try{let i=await t;if(this._isStale(r)){e(`<${this.localName}> async setup result discarded — element disconnected before setup resolved.`);return}this._component.templateResult=i??null,this._component.phase=s.SETUP_DONE,this._component.mountCallbacks.push(...n),i&&this._applyResult(i),this._scheduleMountCallbacks()}catch(t){if(this._isStale(r)){e(`<${this.localName}> async setup error discarded — element disconnected before setup resolved.`);return}let n=this._handleSetupError(t,`async-setup`);n?(this._component.templateResult=n,this._component.phase=s.SETUP_DONE,this._applyResult(n)):this._component.phase=s.UNINITIALIZED}}_applyResult(e){e&&((this.shadowRoot??this).replaceChildren(e.fragment),this._component.scope.run(()=>{e.apply(r)}))}_init(){this._applyStyles(),this._mountTemplate(),this._component.phase===s.SETUP_DONE&&this._scheduleMountCallbacks()}_applyStyles(){let e=this.constructor._definition;this.shadowRoot&&e?.styles?.length&&(this.shadowRoot.adoptedStyleSheets=e.styles.map(l))}_mountTemplate(){let e=this._component.templateResult;e&&this._applyResult(e)}_scheduleMountCallbacks(){if(this._component.mountCallbacks.length===0)return;let e=this._component.generation;queueMicrotask(()=>{if(this._isStale(e))return;let t=this._component.mountCallbacks.splice(0);for(let e of t)try{let t={element:this,mountCallbacks:[]};this._component.scope.run(()=>{i(t,()=>{let t=e();typeof t==`function`&&r(t)})}),t.mountCallbacks.length>0&&this._component.mountCallbacks.push(...t.mountCallbacks)}catch(e){this._handleSetupError(e,`mounted`)}this._component.mountCallbacks.length>0&&this._scheduleMountCallbacks()})}};export{p as BaseElement};\n//# sourceMappingURL=base-element.js.map"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"base-element.js","names":["s","u","c","o","d","i","a","t","e","r","l"],"sources":["../../../../ore/dist/base-element.js"],"sourcesContent":["import{warn as e}from\"./_dev.js\";import{OreLifecycleError as t,reportRuntimeError as n}from\"./errors.js\";import\"./types/bindings.js\";import{onCleanup as r,runWithContext as i}from\"./runtime.js\";import{createProps as a,getPropMeta as o}from\"./props.js\";import{ComponentPhase as s,LIFECYCLE_EVENTS as c}from\"./types.js\";import{loadStylesheet as l}from\"./utils/css.js\";import{scope as u,untrack as d}from\"@vielzeug/ripple\";var f=()=>({formResetCallbacks:[],generation:0,mountCallbacks:[],phase:s.UNINITIALIZED,scope:u(),templateResult:null}),p=class extends HTMLElement{static _definition;static _normalizedPropDefs;static formAssociated=!1;static observedAttributes=[];_component;constructor(){super();let e=this.constructor._definition;e?.shadow!==!1&&this.attachShadow({mode:`open`,...e?.shadow}),this._component=f()}connectedCallback(){d(()=>{this._component.phase===s.UNINITIALIZED&&this._runSetup(),this._init()}),this.dispatchEvent(new CustomEvent(c.CONNECT,{bubbles:!1,composed:!1}))}attributeChangedCallback(e,t,n){if(t===n)return;let r=o(this,e);if(!r)return;let i=r.parse(n);Object.is(d(()=>r.signal.value),i)||(r.signal.value=i)}disconnectedCallback(){this._component.generation++,this._component.phase=s.UNMOUNTED,this.dispatchEvent(new CustomEvent(c.DISCONNECT,{bubbles:!1,composed:!1})),this._component.scope.dispose(),this._component.formResetCallbacks=[],this._component.mountCallbacks=[],this._component.phase=s.UNINITIALIZED,this._component.scope=u(),this._component.templateResult=null}formResetCallback(){for(let e of this._component.formResetCallbacks)try{e()}catch(e){this._handleSetupError(e,`form-reset`)}}_handleSetupError(e,r=`setup`){let i=e instanceof Error?e:Error(String(e)),a=new t(`<${this.localName}> failed during ${this._component.phase} (${r})`,{cause:i,component:this.localName,phase:r}),o=this.constructor._definition;if(o?.onError)try{return o.onError(a,this)}catch{}n(a,this)}_runSetup(){this._component.phase=s.SETUP_RUNNING;let e=this.constructor._definition,t=this.constructor._normalizedPropDefs,n={element:this,formResetCallbacks:[],mountCallbacks:[]};try{let r;if(this._component.scope.run(()=>{r=i(n,()=>{let n=t?a(this,t):{};return e.setup(n)})}),this._component.mountCallbacks.push(...n.mountCallbacks),this._component.formResetCallbacks.push(...n.formResetCallbacks),r!=null&&typeof r.then==`function`){let t=this._component.mountCallbacks.splice(0);this._component.phase=s.LOADING,e.loading&&(this._component.templateResult=e.loading()),this._runSetupAsync(r,t,this._component.generation)}else this._component.templateResult=r??null,this._component.phase=s.SETUP_DONE}catch(e){let t=this._handleSetupError(e);if(t)this._component.templateResult=t,this._component.phase=s.SETUP_DONE;else throw this._component.phase=s.UNINITIALIZED,e}}_isStale(e){return this._component.generation!==e||!this.isConnected}async _runSetupAsync(t,n,r){try{let i=await t;if(this._isStale(r)){e(`<${this.localName}> async setup result discarded — element disconnected before setup resolved.`);return}this._component.templateResult=i??null,this._component.phase=s.SETUP_DONE,this._component.mountCallbacks.push(...n),i&&this._applyResult(i),this._scheduleMountCallbacks()}catch(t){if(this._isStale(r)){e(`<${this.localName}> async setup error discarded — element disconnected before setup resolved.`);return}let n=this._handleSetupError(t,`async-setup`);n?(this._component.templateResult=n,this._component.phase=s.SETUP_DONE,this._applyResult(n)):this._component.phase=s.UNINITIALIZED}}_applyResult(e){e&&((this.shadowRoot??this).replaceChildren(e.fragment),this._component.scope.run(()=>{e.apply(r)}))}_init(){this._applyStyles(),this._mountTemplate(),this._component.phase===s.SETUP_DONE&&this._scheduleMountCallbacks()}_applyStyles(){let e=this.constructor._definition;this.shadowRoot&&e?.styles?.length&&(this.shadowRoot.adoptedStyleSheets=e.styles.map(l))}_mountTemplate(){let e=this._component.templateResult;e&&this._applyResult(e)}_scheduleMountCallbacks(){if(this._component.mountCallbacks.length===0)return;let e=this._component.generation;queueMicrotask(()=>{if(this._isStale(e))return;let t=this._component.mountCallbacks.splice(0);for(let e of t)try{let t={element:this,formResetCallbacks:[],mountCallbacks:[]};this._component.scope.run(()=>{i(t,()=>{let t=e();typeof t==`function`&&r(t)})}),t.mountCallbacks.length>0&&this._component.mountCallbacks.push(...t.mountCallbacks),t.formResetCallbacks.length>0&&this._component.formResetCallbacks.push(...t.formResetCallbacks)}catch(e){this._handleSetupError(e,`mounted`)}this._component.mountCallbacks.length>0&&this._scheduleMountCallbacks()})}};export{p as BaseElement};\n//# sourceMappingURL=base-element.js.map"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("../_dev.cjs"),t=require("../errors.cjs"),n=require("../runtime.cjs");require("@vielzeug/ripple");var r=new WeakMap,i=i=>{let a=i.el??n.getHost();if(!a.constructor.formAssociated)throw new t.OreApiError(t.ORE_ERRORS.defineFieldRequiresFormAssociated(a.localName));if(r.has(a))throw new t.OreApiError(`useField() was already called on <${a.localName}>. Call it only once per component.`);let o=a.attachInternals();r.set(a,o),n.onCleanup(()=>r.delete(a));let s=i.toFormValue??(e=>e==null?i.emptyStringForNull?``:null:e instanceof File||e instanceof FormData?e:String(e));n.watchEffect(()=>{o.setFormValue(s(i.value.value))});let c=i.disabled;if(c)if(!(`states`in o))e.warn(`useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.`);else{let e=o.states;n.watchEffect(()=>{c.value?e.add(`disabled`):e.delete(`disabled`)})}return{checkValidity:()=>o.checkValidity(),internals:o,reportValidity:()=>o.reportValidity(),setCustomValidity:e=>e?o.setValidity({customError:!0},e):o.setValidity({}),setValidity:o.setValidity.bind(o)}};exports.useField=i;
|
|
1
|
+
const e=require("../_dev.cjs"),t=require("../errors.cjs"),n=require("../runtime.cjs");require("@vielzeug/ripple");var r=new WeakMap,i=i=>{let a=i.el??n.getHost();if(!a.constructor.formAssociated)throw new t.OreApiError(t.ORE_ERRORS.defineFieldRequiresFormAssociated(a.localName));if(r.has(a))throw new t.OreApiError(`useField() was already called on <${a.localName}>. Call it only once per component.`);let o=a.attachInternals();r.set(a,o),n.onCleanup(()=>r.delete(a));let s=i.toFormValue??(e=>e==null?i.emptyStringForNull?``:null:e instanceof File||e instanceof FormData?e:String(e));n.watchEffect(()=>{o.setFormValue(s(i.value.value))});let c=i.disabled;if(c)if(!(`states`in o))e.warn(`useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.`);else{let e=o.states;n.watchEffect(()=>{c.value?e.add(`disabled`):e.delete(`disabled`)})}return i.validity&&n.watchEffect(()=>{let t=i.validity?.value??{},n=Object.values(t).some(Boolean),r=i.validationMessage?.value??``;if(n&&!r){e.warn("useField(): `validity` has a truthy flag but `validationMessage` is empty — internals.setValidity() requires a non-empty message whenever any flag is true. Falling back to a generic message; pass `validationMessage` to customize it."),o.setValidity(t,`Invalid value.`);return}o.setValidity(t,r)}),i.onReset&&n.onFormReset(i.onReset),{checkValidity:()=>o.checkValidity(),internals:o,reportValidity:()=>o.reportValidity(),setCustomValidity:e=>e?o.setValidity({customError:!0},e):o.setValidity({}),setValidity:o.setValidity.bind(o)}};exports.useField=i;
|
|
2
2
|
//# sourceMappingURL=field.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.cjs","names":["
|
|
1
|
+
{"version":3,"file":"field.cjs","names":["r","n","t","u","i","f","o","a"],"sources":["../../../../../ore/dist/forms/field.js"],"sourcesContent":["import{warn as e}from\"../_dev.js\";import{ORE_ERRORS as t,OreApiError as n}from\"../errors.js\";import{getHost as r,onCleanup as i,onFormReset as a,watchEffect as o}from\"../runtime.js\";import\"@vielzeug/ripple\";var s=new WeakMap,c=c=>{let l=c.el??r();if(!l.constructor.formAssociated)throw new n(t.defineFieldRequiresFormAssociated(l.localName));if(s.has(l))throw new n(`useField() was already called on <${l.localName}>. Call it only once per component.`);let u=l.attachInternals();s.set(l,u),i(()=>s.delete(l));let d=c.toFormValue??(e=>e==null?c.emptyStringForNull?``:null:e instanceof File||e instanceof FormData?e:String(e));o(()=>{u.setFormValue(d(c.value.value))});let f=c.disabled;if(f)if(!(`states`in u))e(`useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.`);else{let e=u.states;o(()=>{f.value?e.add(`disabled`):e.delete(`disabled`)})}return c.validity&&o(()=>{let t=c.validity?.value??{},n=Object.values(t).some(Boolean),r=c.validationMessage?.value??``;if(n&&!r){e(\"useField(): `validity` has a truthy flag but `validationMessage` is empty — internals.setValidity() requires a non-empty message whenever any flag is true. Falling back to a generic message; pass `validationMessage` to customize it.\"),u.setValidity(t,`Invalid value.`);return}u.setValidity(t,r)}),c.onReset&&a(c.onReset),{checkValidity:()=>u.checkValidity(),internals:u,reportValidity:()=>u.reportValidity(),setCustomValidity:e=>e?u.setValidity({customError:!0},e):u.setValidity({}),setValidity:u.setValidity.bind(u)}};export{c as useField};\n//# sourceMappingURL=field.js.map"],"mappings":"kHAA+M,IAAI,EAAE,IAAI,QAAQ,EAAE,GAAG,CAAC,IAAI,EAAE,EAAE,IAAIA,EAAAA,QAAE,EAAE,GAAG,CAAC,EAAE,YAAY,eAAe,MAAM,IAAIC,EAAAA,YAAEC,EAAAA,WAAE,kCAAkC,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,IAAID,EAAAA,YAAE,qCAAqC,EAAE,UAAU,oCAAoC,EAAE,IAAIE,EAAE,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAEA,CAAC,EAAEC,EAAAA,cAAM,EAAE,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,cAAc,GAAG,GAAG,KAAK,EAAE,mBAAmB,GAAG,KAAK,aAAa,MAAM,aAAa,SAAS,EAAE,OAAO,CAAC,GAAG,EAAA,gBAAM,CAAC,EAAE,aAAa,EAAE,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,EAAE,IAAIC,EAAE,EAAE,SAAS,GAAGA,EAAE,GAAG,EAAE,WAAWF,GAAG,EAAA,KAAE,8HAA8H,MAAM,CAAC,IAAI,EAAEA,EAAE,OAAO,EAAA,gBAAM,CAAC,EAAE,MAAM,EAAE,IAAI,UAAU,EAAE,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,UAAUG,EAAAA,gBAAM,CAAC,IAAIJ,EAAE,EAAE,UAAU,OAAO,CAAC,EAAE,EAAE,OAAO,OAAOA,CAAC,CAAC,CAAC,KAAK,OAAO,EAAE,EAAE,EAAE,mBAAmB,OAAO,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,EAAA,KAAE,0OAA0O,EAAEC,EAAE,YAAYD,EAAE,gBAAgB,EAAE,MAAM,CAAC,EAAE,YAAYA,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,SAASK,EAAAA,YAAE,EAAE,OAAO,EAAE,CAAC,kBAAkBJ,EAAE,cAAc,EAAE,UAAUA,EAAE,mBAAmBA,EAAE,eAAe,EAAE,kBAAkB,GAAG,EAAEA,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAEA,EAAE,YAAY,CAAC,CAAC,EAAE,YAAYA,EAAE,YAAY,KAAKA,CAAC,CAAC,CAAC"}
|
|
@@ -1,35 +1,42 @@
|
|
|
1
1
|
import { warn as e } from "../_dev.js";
|
|
2
2
|
import { ORE_ERRORS as t, OreApiError as n } from "../errors.js";
|
|
3
|
-
import { getHost as r, onCleanup as i,
|
|
3
|
+
import { getHost as r, onCleanup as i, onFormReset as a, watchEffect as o } from "../runtime.js";
|
|
4
4
|
import "@vielzeug/ripple";
|
|
5
5
|
//#region ../ore/dist/forms/field.js
|
|
6
|
-
var
|
|
7
|
-
let
|
|
8
|
-
if (!
|
|
9
|
-
if (
|
|
10
|
-
let
|
|
11
|
-
|
|
12
|
-
let
|
|
13
|
-
|
|
14
|
-
|
|
6
|
+
var s = /* @__PURE__ */ new WeakMap(), c = (c) => {
|
|
7
|
+
let l = c.el ?? r();
|
|
8
|
+
if (!l.constructor.formAssociated) throw new n(t.defineFieldRequiresFormAssociated(l.localName));
|
|
9
|
+
if (s.has(l)) throw new n(`useField() was already called on <${l.localName}>. Call it only once per component.`);
|
|
10
|
+
let u = l.attachInternals();
|
|
11
|
+
s.set(l, u), i(() => s.delete(l));
|
|
12
|
+
let d = c.toFormValue ?? ((e) => e == null ? c.emptyStringForNull ? "" : null : e instanceof File || e instanceof FormData ? e : String(e));
|
|
13
|
+
o(() => {
|
|
14
|
+
u.setFormValue(d(c.value.value));
|
|
15
15
|
});
|
|
16
|
-
let
|
|
17
|
-
if (
|
|
16
|
+
let f = c.disabled;
|
|
17
|
+
if (f) if (!("states" in u)) e("useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.");
|
|
18
18
|
else {
|
|
19
|
-
let e =
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
let e = u.states;
|
|
20
|
+
o(() => {
|
|
21
|
+
f.value ? e.add("disabled") : e.delete("disabled");
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
|
-
return {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
return c.validity && o(() => {
|
|
25
|
+
let t = c.validity?.value ?? {}, n = Object.values(t).some(Boolean), r = c.validationMessage?.value ?? "";
|
|
26
|
+
if (n && !r) {
|
|
27
|
+
e("useField(): `validity` has a truthy flag but `validationMessage` is empty — internals.setValidity() requires a non-empty message whenever any flag is true. Falling back to a generic message; pass `validationMessage` to customize it."), u.setValidity(t, "Invalid value.");
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
u.setValidity(t, r);
|
|
31
|
+
}), c.onReset && a(c.onReset), {
|
|
32
|
+
checkValidity: () => u.checkValidity(),
|
|
33
|
+
internals: u,
|
|
34
|
+
reportValidity: () => u.reportValidity(),
|
|
35
|
+
setCustomValidity: (e) => e ? u.setValidity({ customError: !0 }, e) : u.setValidity({}),
|
|
36
|
+
setValidity: u.setValidity.bind(u)
|
|
30
37
|
};
|
|
31
38
|
};
|
|
32
39
|
//#endregion
|
|
33
|
-
export {
|
|
40
|
+
export { c as useField };
|
|
34
41
|
|
|
35
42
|
//# sourceMappingURL=field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.js","names":["
|
|
1
|
+
{"version":3,"file":"field.js","names":["r","t","u","i","f","o","a"],"sources":["../../../../../ore/dist/forms/field.js"],"sourcesContent":["import{warn as e}from\"../_dev.js\";import{ORE_ERRORS as t,OreApiError as n}from\"../errors.js\";import{getHost as r,onCleanup as i,onFormReset as a,watchEffect as o}from\"../runtime.js\";import\"@vielzeug/ripple\";var s=new WeakMap,c=c=>{let l=c.el??r();if(!l.constructor.formAssociated)throw new n(t.defineFieldRequiresFormAssociated(l.localName));if(s.has(l))throw new n(`useField() was already called on <${l.localName}>. Call it only once per component.`);let u=l.attachInternals();s.set(l,u),i(()=>s.delete(l));let d=c.toFormValue??(e=>e==null?c.emptyStringForNull?``:null:e instanceof File||e instanceof FormData?e:String(e));o(()=>{u.setFormValue(d(c.value.value))});let f=c.disabled;if(f)if(!(`states`in u))e(`useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.`);else{let e=u.states;o(()=>{f.value?e.add(`disabled`):e.delete(`disabled`)})}return c.validity&&o(()=>{let t=c.validity?.value??{},n=Object.values(t).some(Boolean),r=c.validationMessage?.value??``;if(n&&!r){e(\"useField(): `validity` has a truthy flag but `validationMessage` is empty — internals.setValidity() requires a non-empty message whenever any flag is true. Falling back to a generic message; pass `validationMessage` to customize it.\"),u.setValidity(t,`Invalid value.`);return}u.setValidity(t,r)}),c.onReset&&a(c.onReset),{checkValidity:()=>u.checkValidity(),internals:u,reportValidity:()=>u.reportValidity(),setCustomValidity:e=>e?u.setValidity({customError:!0},e):u.setValidity({}),setValidity:u.setValidity.bind(u)}};export{c as useField};\n//# sourceMappingURL=field.js.map"],"mappings":";;;;;AAA+M,IAAI,oBAAE,IAAI,QAAM,GAAE,KAAE,MAAG;CAAC,IAAI,IAAE,EAAE,MAAIA,EAAE;CAAE,IAAG,CAAC,EAAE,YAAY,gBAAe,MAAM,IAAI,EAAEC,EAAE,kCAAkC,EAAE,SAAS,CAAC;CAAE,IAAG,EAAE,IAAI,CAAC,GAAE,MAAM,IAAI,EAAE,qCAAqC,EAAE,UAAU,oCAAoC;CAAE,IAAIC,IAAE,EAAE,gBAAgB;CAAE,EAAE,IAAI,GAAEA,CAAC,GAAEC,QAAM,EAAE,OAAO,CAAC,CAAC;CAAE,IAAI,IAAE,EAAE,iBAAc,MAAG,KAAG,OAAK,EAAE,qBAAmB,KAAG,OAAK,aAAa,QAAM,aAAa,WAAS,IAAE,OAAO,CAAC;CAAG,QAAM;EAAC,EAAE,aAAa,EAAE,EAAE,MAAM,KAAK,CAAC;CAAC,CAAC;CAAE,IAAIC,IAAE,EAAE;CAAS,IAAGA,GAAE,IAAG,EAAE,YAAWF,IAAG,EAAE,8HAA8H;MAAM;EAAC,IAAI,IAAEA,EAAE;EAAO,QAAM;GAAC,EAAE,QAAM,EAAE,IAAI,UAAU,IAAE,EAAE,OAAO,UAAU;EAAC,CAAC;CAAC;CAAC,OAAO,EAAE,YAAUG,QAAM;EAAC,IAAIJ,IAAE,EAAE,UAAU,SAAO,CAAC,GAAE,IAAE,OAAO,OAAOA,CAAC,CAAC,CAAC,KAAK,OAAO,GAAE,IAAE,EAAE,mBAAmB,SAAO;EAAG,IAAG,KAAG,CAAC,GAAE;GAAC,EAAE,0OAA0O,GAAEC,EAAE,YAAYD,GAAE,gBAAgB;GAAE;EAAM;EAAC,EAAE,YAAYA,GAAE,CAAC;CAAC,CAAC,GAAE,EAAE,WAASK,EAAE,EAAE,OAAO,GAAE;EAAC,qBAAkBJ,EAAE,cAAc;EAAE,WAAUA;EAAE,sBAAmBA,EAAE,eAAe;EAAE,oBAAkB,MAAG,IAAEA,EAAE,YAAY,EAAC,aAAY,CAAC,EAAC,GAAE,CAAC,IAAEA,EAAE,YAAY,CAAC,CAAC;EAAE,aAAYA,EAAE,YAAY,KAAKA,CAAC;CAAC;AAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./errors.cjs");require("./utils/dom.cjs");let t=require("@vielzeug/ripple");var n=null,r=(e,t)=>{let r=n;n=e;try{return t()}finally{n=r}},i=t=>{if(n)return n;throw new e.OreApiError(`${t}: ${e.ORE_ERRORS.lifecycleOutsideSetup}`)},a=()=>i(`getHost`).element,o=e=>n?((0,t.onCleanup)(e),!0):!1,s=t.onCleanup,c=e=>{let n=(0,t.effect)(e),r=()=>n.dispose();return o(r),r};exports.getHost=a,exports.onCleanup=s,exports.requireSetupContext=i,exports.runWithContext=r,exports.tryRegisterCleanup=o,exports.watchEffect=
|
|
1
|
+
const e=require("./errors.cjs");require("./utils/dom.cjs");let t=require("@vielzeug/ripple");var n=null,r=(e,t)=>{let r=n;n=e;try{return t()}finally{n=r}},i=t=>{if(n)return n;throw new e.OreApiError(`${t}: ${e.ORE_ERRORS.lifecycleOutsideSetup}`)},a=()=>i(`getHost`).element,o=e=>n?((0,t.onCleanup)(e),!0):!1,s=t.onCleanup,c=e=>{i(`onFormReset`).formResetCallbacks.push(e)},l=e=>{let n=(0,t.effect)(e),r=()=>n.dispose();return o(r),r};exports.getHost=a,exports.onCleanup=s,exports.onFormReset=c,exports.requireSetupContext=i,exports.runWithContext=r,exports.tryRegisterCleanup=o,exports.watchEffect=l;
|
|
2
2
|
//# sourceMappingURL=runtime.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"runtime.cjs","names":["t","n","e","i"],"sources":["../../../../ore/dist/runtime.js"],"sourcesContent":["import{ORE_ERRORS as e,OreApiError as t}from\"./errors.js\";import{listen as n}from\"./utils/dom.js\";import{effect as r,onCleanup as i}from\"@vielzeug/ripple\";var a=null,o=(e,t)=>{let n=a;a=e;try{return t()}finally{a=n}},s=n=>{if(a)return a;throw new t(`${n}: ${e.lifecycleOutsideSetup}`)},c=()=>s(`getHost`).element,l=e=>a?(i(e),!0):!1,u=i,d=e=>{s(`onMounted`).mountCallbacks.push(e)},f=e=>{let t=r(e),n=()=>t.dispose();return l(n),n};function
|
|
1
|
+
{"version":3,"file":"runtime.cjs","names":["t","n","e","i"],"sources":["../../../../ore/dist/runtime.js"],"sourcesContent":["import{ORE_ERRORS as e,OreApiError as t}from\"./errors.js\";import{listen as n}from\"./utils/dom.js\";import{effect as r,onCleanup as i}from\"@vielzeug/ripple\";var a=null,o=(e,t)=>{let n=a;a=e;try{return t()}finally{a=n}},s=n=>{if(a)return a;throw new t(`${n}: ${e.lifecycleOutsideSetup}`)},c=()=>s(`getHost`).element,l=e=>a?(i(e),!0):!1,u=i,d=e=>{s(`onMounted`).mountCallbacks.push(e)},f=e=>{s(`onFormReset`).formResetCallbacks.push(e)},p=e=>{let t=r(e),n=()=>t.dispose();return l(n),n};function m(e,t,r,i){if(s(`onEvent`),!e)return;let a=n(e,t,r,i);l(a)||a()}var h=(e,t)=>p(()=>{let n=e.value;if(n)return t(n)});export{c as getHost,u as onCleanup,h as onElement,m as onEvent,f as onFormReset,d as onMounted,s as requireSetupContext,o as runWithContext,l as tryRegisterCleanup,p as watchEffect};\n//# sourceMappingURL=runtime.js.map"],"mappings":"6FAA2J,IAAI,EAAE,KAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,IAAIA,EAAAA,YAAE,GAAGC,EAAE,IAAIC,EAAAA,WAAE,uBAAuB,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,IAAA,EAAA,EAAA,UAAA,CAAK,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAEC,EAAAA,UAA+C,EAAE,GAAG,CAAC,EAAE,aAAa,CAAC,CAAC,mBAAmB,KAAK,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,IAAI,GAAA,EAAA,EAAA,OAAA,CAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC"}
|
package/dist/ore/dist/runtime.js
CHANGED
|
@@ -14,10 +14,12 @@ var i = null, a = (e, t) => {
|
|
|
14
14
|
if (i) return i;
|
|
15
15
|
throw new t(`${n}: ${e.lifecycleOutsideSetup}`);
|
|
16
16
|
}, s = () => o("getHost").element, c = (e) => i ? (r(e), !0) : !1, l = r, u = (e) => {
|
|
17
|
+
o("onFormReset").formResetCallbacks.push(e);
|
|
18
|
+
}, d = (e) => {
|
|
17
19
|
let t = n(e), r = () => t.dispose();
|
|
18
20
|
return c(r), r;
|
|
19
21
|
};
|
|
20
22
|
//#endregion
|
|
21
|
-
export { s as getHost, l as onCleanup, o as requireSetupContext, a as runWithContext, c as tryRegisterCleanup,
|
|
23
|
+
export { s as getHost, l as onCleanup, u as onFormReset, o as requireSetupContext, a as runWithContext, c as tryRegisterCleanup, d as watchEffect };
|
|
22
24
|
|
|
23
25
|
//# sourceMappingURL=runtime.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"runtime.js","names":["t","n","e","i","r"],"sources":["../../../../ore/dist/runtime.js"],"sourcesContent":["import{ORE_ERRORS as e,OreApiError as t}from\"./errors.js\";import{listen as n}from\"./utils/dom.js\";import{effect as r,onCleanup as i}from\"@vielzeug/ripple\";var a=null,o=(e,t)=>{let n=a;a=e;try{return t()}finally{a=n}},s=n=>{if(a)return a;throw new t(`${n}: ${e.lifecycleOutsideSetup}`)},c=()=>s(`getHost`).element,l=e=>a?(i(e),!0):!1,u=i,d=e=>{s(`onMounted`).mountCallbacks.push(e)},f=e=>{let t=r(e),n=()=>t.dispose();return l(n),n};function
|
|
1
|
+
{"version":3,"file":"runtime.js","names":["t","n","e","i","r"],"sources":["../../../../ore/dist/runtime.js"],"sourcesContent":["import{ORE_ERRORS as e,OreApiError as t}from\"./errors.js\";import{listen as n}from\"./utils/dom.js\";import{effect as r,onCleanup as i}from\"@vielzeug/ripple\";var a=null,o=(e,t)=>{let n=a;a=e;try{return t()}finally{a=n}},s=n=>{if(a)return a;throw new t(`${n}: ${e.lifecycleOutsideSetup}`)},c=()=>s(`getHost`).element,l=e=>a?(i(e),!0):!1,u=i,d=e=>{s(`onMounted`).mountCallbacks.push(e)},f=e=>{s(`onFormReset`).formResetCallbacks.push(e)},p=e=>{let t=r(e),n=()=>t.dispose();return l(n),n};function m(e,t,r,i){if(s(`onEvent`),!e)return;let a=n(e,t,r,i);l(a)||a()}var h=(e,t)=>p(()=>{let n=e.value;if(n)return t(n)});export{c as getHost,u as onCleanup,h as onElement,m as onEvent,f as onFormReset,d as onMounted,s as requireSetupContext,o as runWithContext,l as tryRegisterCleanup,p as watchEffect};\n//# sourceMappingURL=runtime.js.map"],"mappings":";;;;AAA2J,IAAI,IAAE,MAAK,KAAG,GAAE,MAAI;CAAC,IAAI,IAAE;CAAE,IAAE;CAAE,IAAG;EAAC,OAAO,EAAE;CAAC,UAAQ;EAAC,IAAE;CAAC;AAAC,GAAE,KAAE,MAAG;CAAC,IAAG,GAAE,OAAO;CAAE,MAAM,IAAIA,EAAE,GAAGC,EAAE,IAAIC,EAAE,uBAAuB;AAAC,GAAE,UAAM,EAAE,SAAS,CAAC,CAAC,SAAQ,KAAE,MAAG,KAAGC,EAAE,CAAC,GAAE,CAAC,KAAG,CAAC,GAAE,IAAEA,GAA+C,KAAE,MAAG;CAAC,EAAE,aAAa,CAAC,CAAC,mBAAmB,KAAK,CAAC;AAAC,GAAE,KAAE,MAAG;CAAC,IAAI,IAAEC,EAAE,CAAC,GAAE,UAAM,EAAE,QAAQ;CAAE,OAAO,EAAE,CAAC,GAAE;AAAC"}
|
package/dist/radio-group.cjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/choice-field.cjs"),s=require("./headless/nav.cjs"),c=require("./headless/light-dom.cjs"),l=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const u=require("./inputs/shared/form-context.cjs"),d=require("./inputs/radio-group/radio-group.css.cjs");let f=require("@vielzeug/ore");require("@vielzeug/ripple");var p=(0,f.createContext)(`OreRadioGroup`),m=`ore-radio-group`;(0,f.define)(m,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:f.prop.string(),helper:f.prop.string(),label:f.prop.string(),name:f.prop.string(),orientation:f.prop.oneOf([`horizontal`,`vertical`],`vertical`),required:f.prop.bool(!1),value:f.prop.string()},setup(t){let n=(0,f.getHost)(),r=(0,f.useEmit)(),i=(0,f.useSlots)(),d=f.watchEffect,m=(0,f.inject)(u.FORM_CTX),h=u.useFormContext(t,m),g=
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/choice-field.cjs"),s=require("./headless/nav.cjs"),c=require("./headless/light-dom.cjs"),l=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const u=require("./inputs/shared/form-context.cjs"),d=require("./inputs/radio-group/radio-group.css.cjs");let f=require("@vielzeug/ore");require("@vielzeug/ripple");var p=(0,f.createContext)(`OreRadioGroup`),m=`ore-radio-group`;(0,f.define)(m,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:f.prop.string(),helper:f.prop.string(),label:f.prop.string(),name:f.prop.string(),orientation:f.prop.oneOf([`horizontal`,`vertical`],`vertical`),required:f.prop.bool(!1),value:{...f.prop.string(),reflect:!1}},setup(t){let n=(0,f.getHost)(),r=(0,f.useEmit)(),i=(0,f.useSlots)(),d=f.watchEffect,m=(0,f.inject)(u.FORM_CTX),h=u.useFormContext(t,m),g=o.createChoiceField({disabled:h.disabled,error:t.error,helper:t.helper,label:t.label,prefix:`radio-group`,required:t.required,signal:a.lifecycleSignal(f.onCleanup),validateOn:m?.validateOn,value:t.value});g.attachFormField(l.useField({disabled:g.disabled,onReset:g.reset,toFormValue:e=>e,validationMessage:g.validationMessage,validity:g.validity,value:g.formValue}));let _=g.selectedValue,v=h.disabled;(0,f.bind)({attr:{size:h.size,value:()=>_.value||null}});let y=()=>c.getLightChildrenByTag(n,`ore-radio`),b=()=>v.value?[]:y().filter(e=>!e.hasAttribute(`disabled`)),x=e=>c.getChoiceLabel(y(),e),S=(e,t)=>{g.setValues(e?[e]:[]);let n=e?[x(e)]:[];r(`change`,{labels:n,originalEvent:t,values:e?[e]:[]}),g.triggerValidation(`blur`)};(0,f.provide)(p,{color:t.color,disabled:v,name:t.name,select:S,size:t.size,value:_}),d(()=>{i.elements().value,_.value;let e=y();for(let n of e){let e=n.getAttribute(`value`)??``;n.toggleAttribute(`checked`,e===_.value),t.name.value?n.setAttribute(`name`,t.name.value):n.removeAttribute(`name`),t.color.value?n.setAttribute(`color`,t.color.value):n.removeAttribute(`color`),t.size.value?n.setAttribute(`size`,t.size.value):n.removeAttribute(`size`),n.toggleAttribute(`disabled`,v.value)}}),d(()=>{i.elements().value;let e=y(),t=!1;for(let n of e){let e=n.getAttribute(`value`)===_.value;n.setAttribute(`tabindex`,e&&!v.value?`0`:`-1`),e&&!v.value&&(t=!0)}if(!t&&e.length>0){let t=e.find(e=>!e.hasAttribute(`disabled`));t&&t.setAttribute(`tabindex`,`0`)}});let C=s.createListControl({getItems:b,keys:{next:[`ArrowDown`,`ArrowRight`],prev:[`ArrowUp`,`ArrowLeft`]},loop:!0,onNavigate:(e,t,n)=>{let r=b()[t];r&&(r.focus(),r.tagName===`ORE-RADIO`&&S(r.getAttribute(`value`)??``,n))}});(0,f.bind)({on:{change:e=>{e.target!==n&&(e.stopPropagation(),S(e.target.getAttribute(`value`)??``,e))},keydown:e=>{let t=b();if(!t.length)return;let n=t.indexOf(document.activeElement);n!==-1&&(C.set(n),C.handleKeydown(e))}}});let w=(0,f.createStableId)(`radio-group-legend`);return f.html`
|
|
2
2
|
<fieldset
|
|
3
3
|
role="radiogroup"
|
|
4
4
|
aria-required="${()=>String(!!t.required.value)}"
|
|
5
|
-
:aria-invalid="${
|
|
6
|
-
:aria-errormessage="${
|
|
7
|
-
:aria-describedby="${
|
|
8
|
-
<legend id="${
|
|
5
|
+
:aria-invalid="${g.ariaInvalid}"
|
|
6
|
+
:aria-errormessage="${g.ariaErrorMessage}"
|
|
7
|
+
:aria-describedby="${g.ariaDescribedBy}">
|
|
8
|
+
<legend id="${w}" ?hidden=${()=>!t.label.value}>
|
|
9
9
|
${t.label}${e.when(()=>!!t.required.value,()=>f.html`<span aria-hidden="true"> *</span>`)}
|
|
10
10
|
</legend>
|
|
11
11
|
<div class="radio-group-items" part="items">
|
|
@@ -14,11 +14,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
|
|
|
14
14
|
<div
|
|
15
15
|
class="helper-text"
|
|
16
16
|
part="helper"
|
|
17
|
-
id="${
|
|
18
|
-
:role="${()=>
|
|
17
|
+
id="${g.assistiveId}"
|
|
18
|
+
:role="${()=>g.errorText.value?`alert`:null}"
|
|
19
19
|
aria-live="polite"
|
|
20
|
-
?hidden="${()=>!
|
|
21
|
-
${()=>
|
|
20
|
+
?hidden="${()=>!g.errorText.value&&!g.helperText.value}">
|
|
21
|
+
${()=>g.errorText.value||g.helperText.value}
|
|
22
22
|
</div>
|
|
23
23
|
</fieldset>
|
|
24
24
|
`},styles:[r.colorThemeMixin,t.sizeVariantMixin(),n.disabledStateMixin,d.default]}),exports.RADIO_GROUP_CTX=p,exports.RADIO_GROUP_TAG=m;
|
package/dist/radio-group.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.cjs","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n createContext,\n createStableId,\n define,\n html,\n inject,\n prop,\n bind,\n getHost,\n onCleanup,\n provide,\n useEmit,\n useSlots,\n watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n type ChoiceChangeDetail,\n lifecycleSignal,\n createChoiceField,\n createListControl,\n getChoiceLabel,\n getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n /** Theme color tint */\n color?: ThemeColor;\n /** Disabled state */\n disabled?: boolean;\n /** Error message text */\n error?: string;\n /** Helper text displayed below the items */\n helper?: string;\n /** Group label text */\n label?: string;\n /** Form field name */\n name?: string;\n /** Layout orientation */\n orientation?: 'horizontal' | 'vertical';\n /** Required field */\n required?: boolean;\n /** Items size preset */\n size?: ComponentSize;\n /** Initial selected value */\n value?: string;\n};\n\nexport type RadioGroupContext = {\n color: Readable<ThemeColor | undefined>;\n disabled: Readable<boolean>;\n name: Readable<string | undefined>;\n select: (value: string, originalEvent?: Event) => void;\n size: Readable<ComponentSize | undefined>;\n value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n /** Emitted when the selection changes */\n change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n * <ore-radio value=\"free\">Free</ore-radio>\n * <ore-radio value=\"pro\">Pro</ore-radio>\n * <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n * <ore-radio value=\"left\">Left</ore-radio>\n * <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n error: prop.string(),\n helper: prop.string(),\n label: prop.string(),\n name: prop.string(),\n orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n required: prop.bool(false),\n value: prop.string(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreRadioGroupEvents>();\n const slots = useSlots();\n const watch = watchEffect;\n\n const formCtx = inject(FORM_CTX);\n const fCtxProps = useFormContext(props, formCtx);\n\n let _formField: { reportValidity(): void } | null = null;\n const choice = createChoiceField({\n disabled: fCtxProps.disabled,\n error: props.error,\n getFormField: () => _formField,\n helper: props.helper,\n label: props.label,\n prefix: 'radio-group',\n signal: lifecycleSignal(onCleanup),\n validateOn: formCtx?.validateOn,\n value: props.value,\n });\n\n _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\n\n const selectedValue = choice.selectedValue;\n const isDisabled = fCtxProps.disabled;\n\n bind({\n attr: {\n size: fCtxProps.size,\n value: () => selectedValue.value || null,\n },\n });\n\n const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n const getEnabledRadios = (): HTMLElement[] =>\n isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n const selectRadio = (val: string, originalEvent?: Event): void => {\n choice.setValues(val ? [val] : []);\n\n const labels = val ? [getLabelForValue(val)] : [];\n const values = val ? [val] : [];\n\n emit('change', { labels, originalEvent, values });\n choice.triggerValidation('blur');\n };\n\n provide(RADIO_GROUP_CTX, {\n color: props.color as Readable<ThemeColor | undefined>,\n disabled: isDisabled,\n name: props.name,\n select: selectRadio,\n size: props.size as Readable<ComponentSize | undefined>,\n value: selectedValue,\n });\n\n // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n watch(() => {\n void slots.elements().value;\n void selectedValue.value;\n\n const radios = getSlottedRadios();\n\n for (const radio of radios) {\n const val = radio.getAttribute('value') ?? '';\n\n radio.toggleAttribute('checked', val === selectedValue.value);\n\n if (props.name.value) radio.setAttribute('name', props.name.value);\n else radio.removeAttribute('name');\n\n if (props.color.value) radio.setAttribute('color', props.color.value);\n else radio.removeAttribute('color');\n\n if (props.size.value) radio.setAttribute('size', props.size.value);\n else radio.removeAttribute('size');\n\n radio.toggleAttribute('disabled', isDisabled.value);\n }\n });\n\n // Roving tabindex: only the selected (or first) radio is tabbable.\n watch(() => {\n void slots.elements().value;\n\n const radios = getSlottedRadios();\n let hasFocusable = false;\n\n for (const radio of radios) {\n const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n if (isSelected && !isDisabled.value) hasFocusable = true;\n }\n\n if (!hasFocusable && radios.length > 0) {\n const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n if (first) first.setAttribute('tabindex', '0');\n }\n });\n\n const listControl = createListControl<HTMLElement>({\n getItems: getEnabledRadios,\n keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n loop: true,\n onNavigate: (_action, index, event) => {\n const radio = getEnabledRadios()[index];\n\n if (!radio) return;\n\n radio.focus();\n\n if (radio.tagName === 'ORE-RADIO') {\n selectRadio(radio.getAttribute('value') ?? '', event);\n }\n },\n });\n\n bind({\n on: {\n change: (e: Event) => {\n if (e.target === el) return;\n\n e.stopPropagation();\n selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n },\n keydown: (e: KeyboardEvent) => {\n const radios = getEnabledRadios();\n\n if (!radios.length) return;\n\n const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n if (focused === -1) return;\n\n listControl.set(focused);\n listControl.handleKeydown(e);\n },\n },\n });\n\n const legendId = createStableId('radio-group-legend');\n\n return html`\n <fieldset\n role=\"radiogroup\"\n aria-required=\"${() => String(Boolean(props.required.value))}\"\n :aria-invalid=\"${choice.ariaInvalid}\"\n :aria-errormessage=\"${choice.ariaErrorMessage}\"\n :aria-describedby=\"${choice.ariaDescribedBy}\">\n <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n ${props.label}${when(\n () => Boolean(props.required.value),\n () => html`<span aria-hidden=\"true\"> *</span>`,\n )}\n </legend>\n <div class=\"radio-group-items\" part=\"items\">\n <slot></slot>\n </div>\n <div\n class=\"helper-text\"\n part=\"helper\"\n id=\"${choice.assistiveId}\"\n :role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n aria-live=\"polite\"\n ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n ${() => choice.errorText.value || choice.helperText.value}\n </div>\n </fieldset>\n `;\n },\n styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"radio-group.cjs","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n createContext,\n createStableId,\n define,\n html,\n inject,\n prop,\n bind,\n getHost,\n onCleanup,\n provide,\n useEmit,\n useSlots,\n watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n type ChoiceChangeDetail,\n lifecycleSignal,\n createChoiceField,\n createListControl,\n getChoiceLabel,\n getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n /** Theme color tint */\n color?: ThemeColor;\n /** Disabled state */\n disabled?: boolean;\n /** Error message text */\n error?: string;\n /** Helper text displayed below the items */\n helper?: string;\n /** Group label text */\n label?: string;\n /** Form field name */\n name?: string;\n /** Layout orientation */\n orientation?: 'horizontal' | 'vertical';\n /** Required field */\n required?: boolean;\n /** Items size preset */\n size?: ComponentSize;\n /** Initial selected value */\n value?: string;\n};\n\nexport type RadioGroupContext = {\n color: Readable<ThemeColor | undefined>;\n disabled: Readable<boolean>;\n name: Readable<string | undefined>;\n select: (value: string, originalEvent?: Event) => void;\n size: Readable<ComponentSize | undefined>;\n value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n /** Emitted when the selection changes */\n change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n * <ore-radio value=\"free\">Free</ore-radio>\n * <ore-radio value=\"pro\">Pro</ore-radio>\n * <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n * <ore-radio value=\"left\">Left</ore-radio>\n * <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n error: prop.string(),\n helper: prop.string(),\n label: prop.string(),\n name: prop.string(),\n orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n required: prop.bool(false),\n // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n // (`selectedValue`) is the single writer for this attribute, via `bind()` below; letting\n // `prop.string()`'s own default reflection also write the raw incoming value would leave\n // two effects racing to set the same attribute from different sources.\n value: { ...prop.string(), reflect: false },\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreRadioGroupEvents>();\n const slots = useSlots();\n const watch = watchEffect;\n\n const formCtx = inject(FORM_CTX);\n const fCtxProps = useFormContext(props, formCtx);\n\n const choice = createChoiceField({\n disabled: fCtxProps.disabled,\n error: props.error,\n helper: props.helper,\n label: props.label,\n prefix: 'radio-group',\n required: props.required,\n signal: lifecycleSignal(onCleanup),\n validateOn: formCtx?.validateOn,\n value: props.value,\n });\n\n choice.attachFormField(\n useField<string>({\n disabled: choice.disabled,\n onReset: choice.reset,\n toFormValue: (v) => v,\n validationMessage: choice.validationMessage,\n validity: choice.validity,\n value: choice.formValue,\n }),\n );\n\n const selectedValue = choice.selectedValue;\n const isDisabled = fCtxProps.disabled;\n\n bind({\n attr: {\n size: fCtxProps.size,\n value: () => selectedValue.value || null,\n },\n });\n\n const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n const getEnabledRadios = (): HTMLElement[] =>\n isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n const selectRadio = (val: string, originalEvent?: Event): void => {\n choice.setValues(val ? [val] : []);\n\n const labels = val ? [getLabelForValue(val)] : [];\n const values = val ? [val] : [];\n\n emit('change', { labels, originalEvent, values });\n choice.triggerValidation('blur');\n };\n\n provide(RADIO_GROUP_CTX, {\n color: props.color as Readable<ThemeColor | undefined>,\n disabled: isDisabled,\n name: props.name,\n select: selectRadio,\n size: props.size as Readable<ComponentSize | undefined>,\n value: selectedValue,\n });\n\n // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n watch(() => {\n void slots.elements().value;\n void selectedValue.value;\n\n const radios = getSlottedRadios();\n\n for (const radio of radios) {\n const val = radio.getAttribute('value') ?? '';\n\n radio.toggleAttribute('checked', val === selectedValue.value);\n\n if (props.name.value) radio.setAttribute('name', props.name.value);\n else radio.removeAttribute('name');\n\n if (props.color.value) radio.setAttribute('color', props.color.value);\n else radio.removeAttribute('color');\n\n if (props.size.value) radio.setAttribute('size', props.size.value);\n else radio.removeAttribute('size');\n\n radio.toggleAttribute('disabled', isDisabled.value);\n }\n });\n\n // Roving tabindex: only the selected (or first) radio is tabbable.\n watch(() => {\n void slots.elements().value;\n\n const radios = getSlottedRadios();\n let hasFocusable = false;\n\n for (const radio of radios) {\n const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n if (isSelected && !isDisabled.value) hasFocusable = true;\n }\n\n if (!hasFocusable && radios.length > 0) {\n const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n if (first) first.setAttribute('tabindex', '0');\n }\n });\n\n const listControl = createListControl<HTMLElement>({\n getItems: getEnabledRadios,\n keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n loop: true,\n onNavigate: (_action, index, event) => {\n const radio = getEnabledRadios()[index];\n\n if (!radio) return;\n\n radio.focus();\n\n if (radio.tagName === 'ORE-RADIO') {\n selectRadio(radio.getAttribute('value') ?? '', event);\n }\n },\n });\n\n bind({\n on: {\n change: (e: Event) => {\n if (e.target === el) return;\n\n e.stopPropagation();\n selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n },\n keydown: (e: KeyboardEvent) => {\n const radios = getEnabledRadios();\n\n if (!radios.length) return;\n\n const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n if (focused === -1) return;\n\n listControl.set(focused);\n listControl.handleKeydown(e);\n },\n },\n });\n\n const legendId = createStableId('radio-group-legend');\n\n return html`\n <fieldset\n role=\"radiogroup\"\n aria-required=\"${() => String(Boolean(props.required.value))}\"\n :aria-invalid=\"${choice.ariaInvalid}\"\n :aria-errormessage=\"${choice.ariaErrorMessage}\"\n :aria-describedby=\"${choice.ariaDescribedBy}\">\n <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n ${props.label}${when(\n () => Boolean(props.required.value),\n () => html`<span aria-hidden=\"true\"> *</span>`,\n )}\n </legend>\n <div class=\"radio-group-items\" part=\"items\">\n <slot></slot>\n </div>\n <div\n class=\"helper-text\"\n part=\"helper\"\n id=\"${choice.assistiveId}\"\n :role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n aria-live=\"polite\"\n ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n ${() => choice.errorText.value || choice.helperText.value}\n </div>\n </fieldset>\n `;\n },\n styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
|
package/dist/radio-group.js
CHANGED
|
@@ -28,97 +28,103 @@ y(A, {
|
|
|
28
28
|
name: w.string(),
|
|
29
29
|
orientation: w.oneOf(["horizontal", "vertical"], "vertical"),
|
|
30
30
|
required: w.bool(!1),
|
|
31
|
-
value:
|
|
31
|
+
value: {
|
|
32
|
+
...w.string(),
|
|
33
|
+
reflect: !1
|
|
34
|
+
}
|
|
32
35
|
},
|
|
33
36
|
setup(t) {
|
|
34
|
-
let n = b(), r = E(), i = D(), a = O, o = S(p), h = m(t, o), _ =
|
|
37
|
+
let n = b(), r = E(), i = D(), a = O, o = S(p), h = m(t, o), _ = c({
|
|
35
38
|
disabled: h.disabled,
|
|
36
39
|
error: t.error,
|
|
37
|
-
getFormField: () => _,
|
|
38
40
|
helper: t.helper,
|
|
39
41
|
label: t.label,
|
|
40
42
|
prefix: "radio-group",
|
|
43
|
+
required: t.required,
|
|
41
44
|
signal: s(C),
|
|
42
45
|
validateOn: o?.validateOn,
|
|
43
46
|
value: t.value
|
|
44
47
|
});
|
|
45
|
-
_
|
|
46
|
-
disabled:
|
|
48
|
+
_.attachFormField(f({
|
|
49
|
+
disabled: _.disabled,
|
|
50
|
+
onReset: _.reset,
|
|
47
51
|
toFormValue: (e) => e,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
52
|
+
validationMessage: _.validationMessage,
|
|
53
|
+
validity: _.validity,
|
|
54
|
+
value: _.formValue
|
|
55
|
+
}));
|
|
56
|
+
let y = _.selectedValue, w = h.disabled;
|
|
51
57
|
g({ attr: {
|
|
52
58
|
size: h.size,
|
|
53
|
-
value: () =>
|
|
59
|
+
value: () => y.value || null
|
|
54
60
|
} });
|
|
55
|
-
let
|
|
56
|
-
|
|
57
|
-
let n = e ? [
|
|
61
|
+
let A = () => d(n, "ore-radio"), j = () => w.value ? [] : A().filter((e) => !e.hasAttribute("disabled")), M = (e) => u(A(), e), N = (e, t) => {
|
|
62
|
+
_.setValues(e ? [e] : []);
|
|
63
|
+
let n = e ? [M(e)] : [];
|
|
58
64
|
r("change", {
|
|
59
65
|
labels: n,
|
|
60
66
|
originalEvent: t,
|
|
61
67
|
values: e ? [e] : []
|
|
62
|
-
}),
|
|
68
|
+
}), _.triggerValidation("blur");
|
|
63
69
|
};
|
|
64
70
|
T(k, {
|
|
65
71
|
color: t.color,
|
|
66
|
-
disabled:
|
|
72
|
+
disabled: w,
|
|
67
73
|
name: t.name,
|
|
68
|
-
select:
|
|
74
|
+
select: N,
|
|
69
75
|
size: t.size,
|
|
70
|
-
value:
|
|
76
|
+
value: y
|
|
71
77
|
}), a(() => {
|
|
72
|
-
i.elements().value,
|
|
73
|
-
let e =
|
|
78
|
+
i.elements().value, y.value;
|
|
79
|
+
let e = A();
|
|
74
80
|
for (let n of e) {
|
|
75
81
|
let e = n.getAttribute("value") ?? "";
|
|
76
|
-
n.toggleAttribute("checked", e ===
|
|
82
|
+
n.toggleAttribute("checked", e === y.value), t.name.value ? n.setAttribute("name", t.name.value) : n.removeAttribute("name"), t.color.value ? n.setAttribute("color", t.color.value) : n.removeAttribute("color"), t.size.value ? n.setAttribute("size", t.size.value) : n.removeAttribute("size"), n.toggleAttribute("disabled", w.value);
|
|
77
83
|
}
|
|
78
84
|
}), a(() => {
|
|
79
85
|
i.elements().value;
|
|
80
|
-
let e =
|
|
86
|
+
let e = A(), t = !1;
|
|
81
87
|
for (let n of e) {
|
|
82
|
-
let e = n.getAttribute("value") ===
|
|
83
|
-
n.setAttribute("tabindex", e && !
|
|
88
|
+
let e = n.getAttribute("value") === y.value;
|
|
89
|
+
n.setAttribute("tabindex", e && !w.value ? "0" : "-1"), e && !w.value && (t = !0);
|
|
84
90
|
}
|
|
85
91
|
if (!t && e.length > 0) {
|
|
86
92
|
let t = e.find((e) => !e.hasAttribute("disabled"));
|
|
87
93
|
t && t.setAttribute("tabindex", "0");
|
|
88
94
|
}
|
|
89
95
|
});
|
|
90
|
-
let
|
|
91
|
-
getItems:
|
|
96
|
+
let P = l({
|
|
97
|
+
getItems: j,
|
|
92
98
|
keys: {
|
|
93
99
|
next: ["ArrowDown", "ArrowRight"],
|
|
94
100
|
prev: ["ArrowUp", "ArrowLeft"]
|
|
95
101
|
},
|
|
96
102
|
loop: !0,
|
|
97
103
|
onNavigate: (e, t, n) => {
|
|
98
|
-
let r =
|
|
99
|
-
r && (r.focus(), r.tagName === "ORE-RADIO" &&
|
|
104
|
+
let r = j()[t];
|
|
105
|
+
r && (r.focus(), r.tagName === "ORE-RADIO" && N(r.getAttribute("value") ?? "", n));
|
|
100
106
|
}
|
|
101
107
|
});
|
|
102
108
|
g({ on: {
|
|
103
109
|
change: (e) => {
|
|
104
|
-
e.target !== n && (e.stopPropagation(),
|
|
110
|
+
e.target !== n && (e.stopPropagation(), N(e.target.getAttribute("value") ?? "", e));
|
|
105
111
|
},
|
|
106
112
|
keydown: (e) => {
|
|
107
|
-
let t =
|
|
113
|
+
let t = j();
|
|
108
114
|
if (!t.length) return;
|
|
109
115
|
let n = t.indexOf(document.activeElement);
|
|
110
|
-
n !== -1 && (
|
|
116
|
+
n !== -1 && (P.set(n), P.handleKeydown(e));
|
|
111
117
|
}
|
|
112
118
|
} });
|
|
113
|
-
let
|
|
119
|
+
let F = v("radio-group-legend");
|
|
114
120
|
return x`
|
|
115
121
|
<fieldset
|
|
116
122
|
role="radiogroup"
|
|
117
123
|
aria-required="${() => String(!!t.required.value)}"
|
|
118
|
-
:aria-invalid="${
|
|
119
|
-
:aria-errormessage="${
|
|
120
|
-
:aria-describedby="${
|
|
121
|
-
<legend id="${
|
|
124
|
+
:aria-invalid="${_.ariaInvalid}"
|
|
125
|
+
:aria-errormessage="${_.ariaErrorMessage}"
|
|
126
|
+
:aria-describedby="${_.ariaDescribedBy}">
|
|
127
|
+
<legend id="${F}" ?hidden=${() => !t.label.value}>
|
|
122
128
|
${t.label}${e(() => !!t.required.value, () => x`<span aria-hidden="true"> *</span>`)}
|
|
123
129
|
</legend>
|
|
124
130
|
<div class="radio-group-items" part="items">
|
|
@@ -127,11 +133,11 @@ y(A, {
|
|
|
127
133
|
<div
|
|
128
134
|
class="helper-text"
|
|
129
135
|
part="helper"
|
|
130
|
-
id="${
|
|
131
|
-
:role="${() =>
|
|
136
|
+
id="${_.assistiveId}"
|
|
137
|
+
:role="${() => _.errorText.value ? "alert" : null}"
|
|
132
138
|
aria-live="polite"
|
|
133
|
-
?hidden="${() => !
|
|
134
|
-
${() =>
|
|
139
|
+
?hidden="${() => !_.errorText.value && !_.helperText.value}">
|
|
140
|
+
${() => _.errorText.value || _.helperText.value}
|
|
135
141
|
</div>
|
|
136
142
|
</fieldset>
|
|
137
143
|
`;
|
package/dist/radio-group.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.js","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n createContext,\n createStableId,\n define,\n html,\n inject,\n prop,\n bind,\n getHost,\n onCleanup,\n provide,\n useEmit,\n useSlots,\n watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n type ChoiceChangeDetail,\n lifecycleSignal,\n createChoiceField,\n createListControl,\n getChoiceLabel,\n getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n /** Theme color tint */\n color?: ThemeColor;\n /** Disabled state */\n disabled?: boolean;\n /** Error message text */\n error?: string;\n /** Helper text displayed below the items */\n helper?: string;\n /** Group label text */\n label?: string;\n /** Form field name */\n name?: string;\n /** Layout orientation */\n orientation?: 'horizontal' | 'vertical';\n /** Required field */\n required?: boolean;\n /** Items size preset */\n size?: ComponentSize;\n /** Initial selected value */\n value?: string;\n};\n\nexport type RadioGroupContext = {\n color: Readable<ThemeColor | undefined>;\n disabled: Readable<boolean>;\n name: Readable<string | undefined>;\n select: (value: string, originalEvent?: Event) => void;\n size: Readable<ComponentSize | undefined>;\n value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n /** Emitted when the selection changes */\n change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n * <ore-radio value=\"free\">Free</ore-radio>\n * <ore-radio value=\"pro\">Pro</ore-radio>\n * <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n * <ore-radio value=\"left\">Left</ore-radio>\n * <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n error: prop.string(),\n helper: prop.string(),\n label: prop.string(),\n name: prop.string(),\n orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n required: prop.bool(false),\n value: prop.string(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreRadioGroupEvents>();\n const slots = useSlots();\n const watch = watchEffect;\n\n const formCtx = inject(FORM_CTX);\n const fCtxProps = useFormContext(props, formCtx);\n\n let _formField: { reportValidity(): void } | null = null;\n const choice = createChoiceField({\n disabled: fCtxProps.disabled,\n error: props.error,\n getFormField: () => _formField,\n helper: props.helper,\n label: props.label,\n prefix: 'radio-group',\n signal: lifecycleSignal(onCleanup),\n validateOn: formCtx?.validateOn,\n value: props.value,\n });\n\n _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\n\n const selectedValue = choice.selectedValue;\n const isDisabled = fCtxProps.disabled;\n\n bind({\n attr: {\n size: fCtxProps.size,\n value: () => selectedValue.value || null,\n },\n });\n\n const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n const getEnabledRadios = (): HTMLElement[] =>\n isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n const selectRadio = (val: string, originalEvent?: Event): void => {\n choice.setValues(val ? [val] : []);\n\n const labels = val ? [getLabelForValue(val)] : [];\n const values = val ? [val] : [];\n\n emit('change', { labels, originalEvent, values });\n choice.triggerValidation('blur');\n };\n\n provide(RADIO_GROUP_CTX, {\n color: props.color as Readable<ThemeColor | undefined>,\n disabled: isDisabled,\n name: props.name,\n select: selectRadio,\n size: props.size as Readable<ComponentSize | undefined>,\n value: selectedValue,\n });\n\n // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n watch(() => {\n void slots.elements().value;\n void selectedValue.value;\n\n const radios = getSlottedRadios();\n\n for (const radio of radios) {\n const val = radio.getAttribute('value') ?? '';\n\n radio.toggleAttribute('checked', val === selectedValue.value);\n\n if (props.name.value) radio.setAttribute('name', props.name.value);\n else radio.removeAttribute('name');\n\n if (props.color.value) radio.setAttribute('color', props.color.value);\n else radio.removeAttribute('color');\n\n if (props.size.value) radio.setAttribute('size', props.size.value);\n else radio.removeAttribute('size');\n\n radio.toggleAttribute('disabled', isDisabled.value);\n }\n });\n\n // Roving tabindex: only the selected (or first) radio is tabbable.\n watch(() => {\n void slots.elements().value;\n\n const radios = getSlottedRadios();\n let hasFocusable = false;\n\n for (const radio of radios) {\n const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n if (isSelected && !isDisabled.value) hasFocusable = true;\n }\n\n if (!hasFocusable && radios.length > 0) {\n const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n if (first) first.setAttribute('tabindex', '0');\n }\n });\n\n const listControl = createListControl<HTMLElement>({\n getItems: getEnabledRadios,\n keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n loop: true,\n onNavigate: (_action, index, event) => {\n const radio = getEnabledRadios()[index];\n\n if (!radio) return;\n\n radio.focus();\n\n if (radio.tagName === 'ORE-RADIO') {\n selectRadio(radio.getAttribute('value') ?? '', event);\n }\n },\n });\n\n bind({\n on: {\n change: (e: Event) => {\n if (e.target === el) return;\n\n e.stopPropagation();\n selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n },\n keydown: (e: KeyboardEvent) => {\n const radios = getEnabledRadios();\n\n if (!radios.length) return;\n\n const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n if (focused === -1) return;\n\n listControl.set(focused);\n listControl.handleKeydown(e);\n },\n },\n });\n\n const legendId = createStableId('radio-group-legend');\n\n return html`\n <fieldset\n role=\"radiogroup\"\n aria-required=\"${() => String(Boolean(props.required.value))}\"\n :aria-invalid=\"${choice.ariaInvalid}\"\n :aria-errormessage=\"${choice.ariaErrorMessage}\"\n :aria-describedby=\"${choice.ariaDescribedBy}\">\n <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n ${props.label}${when(\n () => Boolean(props.required.value),\n () => html`<span aria-hidden=\"true\"> *</span>`,\n )}\n </legend>\n <div class=\"radio-group-items\" part=\"items\">\n <slot></slot>\n </div>\n <div\n class=\"helper-text\"\n part=\"helper\"\n id=\"${choice.assistiveId}\"\n :role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n aria-live=\"polite\"\n ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n ${() => choice.errorText.value || choice.helperText.value}\n </div>\n </fieldset>\n `;\n },\n styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"radio-group.js","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n createContext,\n createStableId,\n define,\n html,\n inject,\n prop,\n bind,\n getHost,\n onCleanup,\n provide,\n useEmit,\n useSlots,\n watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n type ChoiceChangeDetail,\n lifecycleSignal,\n createChoiceField,\n createListControl,\n getChoiceLabel,\n getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n /** Theme color tint */\n color?: ThemeColor;\n /** Disabled state */\n disabled?: boolean;\n /** Error message text */\n error?: string;\n /** Helper text displayed below the items */\n helper?: string;\n /** Group label text */\n label?: string;\n /** Form field name */\n name?: string;\n /** Layout orientation */\n orientation?: 'horizontal' | 'vertical';\n /** Required field */\n required?: boolean;\n /** Items size preset */\n size?: ComponentSize;\n /** Initial selected value */\n value?: string;\n};\n\nexport type RadioGroupContext = {\n color: Readable<ThemeColor | undefined>;\n disabled: Readable<boolean>;\n name: Readable<string | undefined>;\n select: (value: string, originalEvent?: Event) => void;\n size: Readable<ComponentSize | undefined>;\n value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n /** Emitted when the selection changes */\n change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n * <ore-radio value=\"free\">Free</ore-radio>\n * <ore-radio value=\"pro\">Pro</ore-radio>\n * <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n * <ore-radio value=\"left\">Left</ore-radio>\n * <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n error: prop.string(),\n helper: prop.string(),\n label: prop.string(),\n name: prop.string(),\n orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n required: prop.bool(false),\n // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n // (`selectedValue`) is the single writer for this attribute, via `bind()` below; letting\n // `prop.string()`'s own default reflection also write the raw incoming value would leave\n // two effects racing to set the same attribute from different sources.\n value: { ...prop.string(), reflect: false },\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreRadioGroupEvents>();\n const slots = useSlots();\n const watch = watchEffect;\n\n const formCtx = inject(FORM_CTX);\n const fCtxProps = useFormContext(props, formCtx);\n\n const choice = createChoiceField({\n disabled: fCtxProps.disabled,\n error: props.error,\n helper: props.helper,\n label: props.label,\n prefix: 'radio-group',\n required: props.required,\n signal: lifecycleSignal(onCleanup),\n validateOn: formCtx?.validateOn,\n value: props.value,\n });\n\n choice.attachFormField(\n useField<string>({\n disabled: choice.disabled,\n onReset: choice.reset,\n toFormValue: (v) => v,\n validationMessage: choice.validationMessage,\n validity: choice.validity,\n value: choice.formValue,\n }),\n );\n\n const selectedValue = choice.selectedValue;\n const isDisabled = fCtxProps.disabled;\n\n bind({\n attr: {\n size: fCtxProps.size,\n value: () => selectedValue.value || null,\n },\n });\n\n const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n const getEnabledRadios = (): HTMLElement[] =>\n isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n const selectRadio = (val: string, originalEvent?: Event): void => {\n choice.setValues(val ? [val] : []);\n\n const labels = val ? [getLabelForValue(val)] : [];\n const values = val ? [val] : [];\n\n emit('change', { labels, originalEvent, values });\n choice.triggerValidation('blur');\n };\n\n provide(RADIO_GROUP_CTX, {\n color: props.color as Readable<ThemeColor | undefined>,\n disabled: isDisabled,\n name: props.name,\n select: selectRadio,\n size: props.size as Readable<ComponentSize | undefined>,\n value: selectedValue,\n });\n\n // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n watch(() => {\n void slots.elements().value;\n void selectedValue.value;\n\n const radios = getSlottedRadios();\n\n for (const radio of radios) {\n const val = radio.getAttribute('value') ?? '';\n\n radio.toggleAttribute('checked', val === selectedValue.value);\n\n if (props.name.value) radio.setAttribute('name', props.name.value);\n else radio.removeAttribute('name');\n\n if (props.color.value) radio.setAttribute('color', props.color.value);\n else radio.removeAttribute('color');\n\n if (props.size.value) radio.setAttribute('size', props.size.value);\n else radio.removeAttribute('size');\n\n radio.toggleAttribute('disabled', isDisabled.value);\n }\n });\n\n // Roving tabindex: only the selected (or first) radio is tabbable.\n watch(() => {\n void slots.elements().value;\n\n const radios = getSlottedRadios();\n let hasFocusable = false;\n\n for (const radio of radios) {\n const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n if (isSelected && !isDisabled.value) hasFocusable = true;\n }\n\n if (!hasFocusable && radios.length > 0) {\n const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n if (first) first.setAttribute('tabindex', '0');\n }\n });\n\n const listControl = createListControl<HTMLElement>({\n getItems: getEnabledRadios,\n keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n loop: true,\n onNavigate: (_action, index, event) => {\n const radio = getEnabledRadios()[index];\n\n if (!radio) return;\n\n radio.focus();\n\n if (radio.tagName === 'ORE-RADIO') {\n selectRadio(radio.getAttribute('value') ?? '', event);\n }\n },\n });\n\n bind({\n on: {\n change: (e: Event) => {\n if (e.target === el) return;\n\n e.stopPropagation();\n selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n },\n keydown: (e: KeyboardEvent) => {\n const radios = getEnabledRadios();\n\n if (!radios.length) return;\n\n const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n if (focused === -1) return;\n\n listControl.set(focused);\n listControl.handleKeydown(e);\n },\n },\n });\n\n const legendId = createStableId('radio-group-legend');\n\n return html`\n <fieldset\n role=\"radiogroup\"\n aria-required=\"${() => String(Boolean(props.required.value))}\"\n :aria-invalid=\"${choice.ariaInvalid}\"\n :aria-errormessage=\"${choice.ariaErrorMessage}\"\n :aria-describedby=\"${choice.ariaDescribedBy}\">\n <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n ${props.label}${when(\n () => Boolean(props.required.value),\n () => html`<span aria-hidden=\"true\"> *</span>`,\n )}\n </legend>\n <div class=\"radio-group-items\" part=\"items\">\n <slot></slot>\n </div>\n <div\n class=\"helper-text\"\n part=\"helper\"\n id=\"${choice.assistiveId}\"\n :role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n aria-live=\"polite\"\n ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n ${() => choice.errorText.value || choice.helperText.value}\n </div>\n </fieldset>\n `;\n },\n styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAmEA,IAAa,IAAkB,EAA6C,eAAe,GAwC9E,IAAkB;AAC/B,EAA2B,GAAiB;CAC1C,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO;EACpB,OAAO,EAAK,OAAO;EACnB,MAAM,EAAK,OAAO;EAClB,aAAa,EAAK,MAAM,CAAC,cAAc,UAAU,GAAY,UAAU;EACvE,UAAU,EAAK,KAAK,EAAK;EAKzB,OAAO;GAAE,GAAG,EAAK,OAAO;GAAG,SAAS;EAAM;CAC5C;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAA6B,GACpC,IAAQ,EAAS,GACjB,IAAQ,GAER,IAAU,EAAO,CAAQ,GACzB,IAAY,EAAe,GAAO,CAAO,GAEzC,IAAS,EAAkB;GAC/B,UAAU,EAAU;GACpB,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,OAAO,EAAM;GACb,QAAQ;GACR,UAAU,EAAM;GAChB,QAAQ,EAAgB,CAAS;GACjC,YAAY,GAAS;GACrB,OAAO,EAAM;EACf,CAAC;EAED,EAAO,gBACL,EAAiB;GACf,UAAU,EAAO;GACjB,SAAS,EAAO;GAChB,cAAc,MAAM;GACpB,mBAAmB,EAAO;GAC1B,UAAU,EAAO;GACjB,OAAO,EAAO;EAChB,CAAC,CACH;EAEA,IAAM,IAAgB,EAAO,eACvB,IAAa,EAAU;EAE7B,EAAK,EACH,MAAM;GACJ,MAAM,EAAU;GAChB,aAAa,EAAc,SAAS;EACtC,EACF,CAAC;EAED,IAAM,UAAwC,EAAsB,GAAI,WAAW,GAE7E,UACJ,EAAW,QAAQ,CAAC,IAAI,EAAiB,CAAC,CAAC,QAAQ,MAAU,CAAC,EAAM,aAAa,UAAU,CAAC,GAExF,KAAoB,MAA0B,EAAe,EAAiB,GAAG,CAAK,GAEtF,KAAe,GAAa,MAAgC;GAChE,EAAO,UAAU,IAAM,CAAC,CAAG,IAAI,CAAC,CAAC;GAEjC,IAAM,IAAS,IAAM,CAAC,EAAiB,CAAG,CAAC,IAAI,CAAC;GAIhD,AADA,EAAK,UAAU;IAAE;IAAQ;IAAe,QAFzB,IAAM,CAAC,CAAG,IAAI,CAAC;GAEiB,CAAC,GAChD,EAAO,kBAAkB,MAAM;EACjC;EAqCA,AAnCA,EAAQ,GAAiB;GACvB,OAAO,EAAM;GACb,UAAU;GACV,MAAM,EAAM;GACZ,QAAQ;GACR,MAAM,EAAM;GACZ,OAAO;EACT,CAAC,GAGD,QAAY;GAEV,AADA,EAAW,SAAS,CAAC,CAAC,OACtB,EAAmB;GAEnB,IAAM,IAAS,EAAiB;GAEhC,KAAK,IAAM,KAAS,GAAQ;IAC1B,IAAM,IAAM,EAAM,aAAa,OAAO,KAAK;IAa3C,AAXA,EAAM,gBAAgB,WAAW,MAAQ,EAAc,KAAK,GAExD,EAAM,KAAK,QAAO,EAAM,aAAa,QAAQ,EAAM,KAAK,KAAK,IAC5D,EAAM,gBAAgB,MAAM,GAE7B,EAAM,MAAM,QAAO,EAAM,aAAa,SAAS,EAAM,MAAM,KAAK,IAC/D,EAAM,gBAAgB,OAAO,GAE9B,EAAM,KAAK,QAAO,EAAM,aAAa,QAAQ,EAAM,KAAK,KAAK,IAC5D,EAAM,gBAAgB,MAAM,GAEjC,EAAM,gBAAgB,YAAY,EAAW,KAAK;GACpD;EACF,CAAC,GAGD,QAAY;GACV,EAAW,SAAS,CAAC,CAAC;GAEtB,IAAM,IAAS,EAAiB,GAC5B,IAAe;GAEnB,KAAK,IAAM,KAAS,GAAQ;IAC1B,IAAM,IAAa,EAAM,aAAa,OAAO,MAAM,EAAc;IAIjE,AAFA,EAAM,aAAa,YAAY,KAAc,CAAC,EAAW,QAAQ,MAAM,IAAI,GAEvE,KAAc,CAAC,EAAW,UAAO,IAAe;GACtD;GAEA,IAAI,CAAC,KAAgB,EAAO,SAAS,GAAG;IACtC,IAAM,IAAQ,EAAO,MAAM,MAAM,CAAC,EAAE,aAAa,UAAU,CAAC;IAE5D,AAAI,KAAO,EAAM,aAAa,YAAY,GAAG;GAC/C;EACF,CAAC;EAED,IAAM,IAAc,EAA+B;GACjD,UAAU;GACV,MAAM;IAAE,MAAM,CAAC,aAAa,YAAY;IAAG,MAAM,CAAC,WAAW,WAAW;GAAE;GAC1E,MAAM;GACN,aAAa,GAAS,GAAO,MAAU;IACrC,IAAM,IAAQ,EAAiB,CAAC,CAAC;IAE5B,MAEL,EAAM,MAAM,GAER,EAAM,YAAY,eACpB,EAAY,EAAM,aAAa,OAAO,KAAK,IAAI,CAAK;GAExD;EACF,CAAC;EAED,EAAK,EACH,IAAI;GACF,SAAS,MAAa;IAChB,EAAE,WAAW,MAEjB,EAAE,gBAAgB,GAClB,EAAa,EAAE,OAAuB,aAAa,OAAO,KAAK,IAAI,CAAC;GACtE;GACA,UAAU,MAAqB;IAC7B,IAAM,IAAS,EAAiB;IAEhC,IAAI,CAAC,EAAO,QAAQ;IAEpB,IAAM,IAAU,EAAO,QAAQ,SAAS,aAA4B;IAEhE,MAAY,OAEhB,EAAY,IAAI,CAAO,GACvB,EAAY,cAAc,CAAC;GAC7B;EACF,EACF,CAAC;EAED,IAAM,IAAW,EAAe,oBAAoB;EAEpD,OAAO,CAAI;;;+BAGgB,OAAO,EAAQ,EAAM,SAAS,KAAM,EAAE;yBAC5C,EAAO,YAAY;8BACd,EAAO,iBAAiB;6BACzB,EAAO,gBAAgB;sBAC9B,EAAS,kBAAkB,CAAC,EAAM,MAAM,MAAM;YACxD,EAAM,QAAQ,QACR,EAAQ,EAAM,SAAS,aACvB,CAAI,oCACZ,EAAE;;;;;;;;gBAQI,EAAO,YAAY;yBACT,EAAO,UAAU,QAAQ,UAAU,KAAM;;2BAExC,CAAC,EAAO,UAAU,SAAS,CAAC,EAAO,WAAW,MAAM;kBAC7D,EAAO,UAAU,SAAS,EAAO,WAAW,MAAM;;;;CAIlE;CACA,QAAQ;EAAC;EAAiB,EAAiB;EAAG;EAAoB;CAAe;AACnF,CAAC"}
|
package/dist/radio.cjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/checkable.cjs"),c=require("./headless/nav.cjs"),l=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const u=require("./inputs/shared/form-context.cjs"),d=require("./inputs/shared/templates.cjs"),f=require("./radio-group.cjs"),p=require("./inputs/radio/radio.css.cjs");let m=require("@vielzeug/ore"),h=require("@vielzeug/ripple");var g=`ore-radio`;(0,m.define)(g,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,checked:m.prop.bool(!1),error:m.prop.string(),helper:m.prop.string(),name:m.prop.string(),value:m.prop.string()},setup(e){let t=(0,m.getHost)(),n=(0,m.useEmit)(),r=(0,m.inject)(f.RADIO_GROUP_CTX),i=(0,m.inject)(u.FORM_CTX),a=u.useFormContext(e,i),p=(0,h.computed)(()=>r?.name.value||e.name.value||``),g=(0,h.computed)(()=>r?.size.value??a.size.value),_=(0,h.computed)(()=>r?.color.value??e.color.value),v=(0,h.computed)(()=>r?r.value.value===e.value.value:!!e.checked.value),y=()=>{let e=p.value;return e?Array.from(document.querySelectorAll(`ore-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},b=(e,t)=>{if(r){r.select(e.getAttribute(`value`)??``,t);return}e.click()},x=c.createListControl({getItems:()=>y(),keys:{next:[`ArrowDown`,`ArrowRight`],prev:[`ArrowUp`,`ArrowLeft`]},loop:!0,onNavigate:(e,t,n)=>{let r=y()[t];r&&(r.focus(),b(r,n))}}),S=t=>{if(!
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/checkable.cjs"),c=require("./headless/nav.cjs"),l=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const u=require("./inputs/shared/form-context.cjs"),d=require("./inputs/shared/templates.cjs"),f=require("./radio-group.cjs"),p=require("./inputs/radio/radio.css.cjs");let m=require("@vielzeug/ore"),h=require("@vielzeug/ripple");var g=`ore-radio`;(0,m.define)(g,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,checked:m.prop.bool(!1),error:m.prop.string(),helper:m.prop.string(),name:m.prop.string(),value:m.prop.string()},setup(e){let t=(0,m.getHost)(),n=(0,m.useEmit)(),r=(0,m.inject)(f.RADIO_GROUP_CTX),i=(0,m.inject)(u.FORM_CTX),a=u.useFormContext(e,i),p=(0,h.computed)(()=>r?.name.value||e.name.value||``),g=(0,h.computed)(()=>r?.size.value??a.size.value),_=(0,h.computed)(()=>r?.color.value??e.color.value),v=(0,h.computed)(()=>r?r.value.value===e.value.value:!!e.checked.value),y=()=>{let e=p.value;return e?Array.from(document.querySelectorAll(`ore-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},b=(e,t)=>{if(r){r.select(e.getAttribute(`value`)??``,t);return}e.click()},x=c.createListControl({getItems:()=>y(),keys:{next:[`ArrowDown`,`ArrowRight`],prev:[`ArrowUp`,`ArrowLeft`]},loop:!0,onNavigate:(e,t,n)=>{let r=y()[t];r&&(r.focus(),b(r,n))}}),S=t=>{if(!C.checked.value){if(r){r.select(e.value.value??``,t);return}C.toggle(t??new Event(`change`))}},C=s.createCheckable({checked:v,disabled:(0,h.computed)(()=>a.disabled.value||!!r?.disabled.value),error:e.error,helper:e.helper,onToggle:e=>{n(`change`,e)},prefix:`radio`,signal:o.lifecycleSignal(m.onCleanup),validateOn:i?.validateOn,value:e.value});C.attachFormField(l.useField({disabled:C.disabled,toFormValue:e=>e,value:C.checkableFormValue}));let{assistiveId:w,checked:T,disabled:E,errorText:D,helperText:O,labelId:k,toggle:A}=C;return(0,m.bind)({attr:{ariaChecked:()=>T.value?`true`:`false`,ariaDescribedby:()=>D.value||O.value?w:null,ariaDisabled:()=>E.value?`true`:null,ariaInvalid:()=>D.value?`true`:null,ariaLabelledby:k,checked:T,color:_,disabled:()=>E.value?!0:void 0,name:()=>p.value||void 0,role:`radio`,size:g,tabindex:()=>{if(!E.value)return T.value?0:-1}},class:()=>({"is-checked":T.value,"is-disabled":E.value}),on:{click:n=>{if(!E.value)if(r)r.select(e.value.value??``,n);else{if(!p.value)return;if(!T.value){let r=e.name.value;document.querySelectorAll(`ore-radio[name="${r}"]`).forEach(e=>{e!==t&&e.removeAttribute(`checked`)}),A(n)}}},keydown:e=>{if(e.key===` `||e.key===`Enter`){e.preventDefault(),S(e);return}let n=y();if(n.length===0)return;let r=n.indexOf(t);r!==-1&&(x.set(r),x.handleKeydown(e))}}}),m.html`
|
|
2
2
|
<div class="radio-wrapper" part="radio">
|
|
3
3
|
<div class="circle" part="circle">
|
|
4
4
|
<div class="dot" part="dot"></div>
|
|
5
5
|
</div>
|
|
6
6
|
</div>
|
|
7
|
-
<span class="label" part="label" id="${
|
|
8
|
-
${d.renderHelperRegion(
|
|
7
|
+
<span class="label" part="label" id="${k}"><slot></slot></span>
|
|
8
|
+
${d.renderHelperRegion(w,D,O)}
|
|
9
9
|
`},styles:[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin,e.coarsePointerMixin,t.sizeVariantMixin(a.CONTROL_SIZE_PRESET),p.default]}),exports.RADIO_TAG=g;
|
|
10
10
|
//# sourceMappingURL=radio.cjs.map
|