@aerogel/core 0.0.0-next.c8f032a868370824898e171969aec1bb6827688e → 0.0.0-next.f16bd1d894543c5303039c49f6f33488a1ffe931

package/dist/aerogel-core.esm.js

@@ -1,2 +1,2 @@
-import"core-js/modules/esnext.async-iterator.map.js";import"core-js/modules/esnext.iterator.map.js";import{ref as e,inject as t,reactive as s,computed as a,markRaw as r,nextTick as o,onUnmounted as n,defineComponent as l,toRef as i,openBlock as u,createBlock as d,unref as c,withCtx as m,renderSlot as p,provide as f,resolveDynamicComponent as h,normalizeProps as v,guardReactiveProps as _,createCommentVNode as g,createElementVNode as b,createVNode as y,h as A,onMounted as x,normalizeClass as G,createTextVNode as w,toDisplayString as j,createApp as C,createElementBlock as M,Fragment as I,withModifiers as S,readonly as k,mergeProps as $}from"vue";import"core-js/modules/esnext.async-iterator.for-each.js";import"core-js/modules/esnext.iterator.constructor.js";import"core-js/modules/esnext.iterator.for-each.js";import{fail as H,JSError as E,MagicObject as O,PromisedValue as P,facade as q,arr as D,tap as L,uuid as B,noop as F,objectWithoutEmpty as V}from"@noeldemartin/utils";import N from"@babel/runtime/helpers/esm/defineProperty";import"core-js/modules/esnext.async-iterator.reduce.js";import"core-js/modules/esnext.iterator.reduce.js";import"core-js/modules/esnext.string.at.js";import"core-js/modules/esnext.async-iterator.filter.js";import"core-js/modules/esnext.iterator.filter.js";import{Dialog as T,DialogPanel as K,DialogTitle as z}from"@headlessui/vue";import Q from"dompurify";import{marked as W}from"marked";import"core-js/modules/esnext.async-iterator.some.js";import"core-js/modules/esnext.iterator.some.js";function R(e){return e}function U(e){return{type:Array,default:e??(()=>[])}}function J(){return{type:Boolean,default:arguments.length>0&&void 0!==arguments[0]&&arguments[0]}}function X(){return e()}function Y(e){return e}function Z(e,t){const s=Object.values(e);return{type:String,default:t??s[0]??null,validator:e=>s.includes(e)}}function ee(e){const a=t(e);return a?s(a):void 0}function te(e,t){return ee(e)??H(t??`Could not resolve '${e}' injection key`)}function se(e,s){return t(e)??H(s??`Could not resolve '${e}' injection key`)}function ae(e){return{type:e,default:null}}function re(){return{type:Number,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}function oe(){return{type:Object,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}function ne(){return{type:Array,required:!0}}function le(e){const t=Object.values(e);return{type:String,required:!0,validator:e=>t.includes(e)}}function ie(e){return{type:e,required:!0}}function ue(){return{type:Number,required:!0}}function de(){return{type:Object,required:!0}}function ce(){return{type:String,required:!0}}function me(){return{type:String,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}const pe={"initial-focus":{mounted(e,t){let{value:s}=t;!1!==s&&e.focus()}}};var fe={install(e){Object.entries(pe).forEach((t=>{let[s,a]=t;return e.directive(s,a)}))}};class ServiceBootError extends E{constructor(e,t){super(`Service '${e}' failed booting`,{cause:t})}}function he(e){return class extends ve{getInitialState(){return e.initialState}getComputedStateDefinition(){return e.computed??{}}}}class ve extends O{constructor(){super(),N(this,"_namespace",void 0),N(this,"_booted",void 0),N(this,"_state",void 0),N(this,"_computedState",void 0),this._namespace=new.target.name,this._booted=new P,this._state=s(this.getInitialState()),this._computedState=Object.entries(this.getComputedStateDefinition()).reduce(((e,t)=>{let[s,r]=t;return e[s]=a((()=>r(this._state))),e}),{})}get booted(){return this._booted}launch(e){const handleError=e=>this._booted.reject(new ServiceBootError(this._namespace,e));this._namespace=e??this._namespace;try{this.boot().then((()=>this._booted.resolve())).catch(handleError)}catch(e){handleError(e)}return this._booted}__get(e){return this.hasState(e)?this.getState(e):this.hasComputedState(e)?this.getComputedState(e):super.__get(e)}__set(e,t){this.setState({[e]:t})}hasState(e){return e in this._state}hasComputedState(e){return e in this._computedState}getState(e){return e?this._state[e]:this._state}getComputedState(e){return this._computedState[e]?.value}setState(e){Object.assign(this._state,e)}getInitialState(){return{}}getComputedStateDefinition(){return{}}async boot(){}}var _e=he({initialState:{environment:__AG_ENV},computed:{isDevelopment:e=>"development"===e.environment}});class ge extends _e{}var be=q(new ge);class ye extends ve{constructor(){super(...arguments),N(this,"listeners",{})}async emit(e,t){const s=[...this.listeners[e]??[]];await Promise.all(s.map((e=>e(t)))??[])}on(e,t){return(this.listeners[e]??=D([])).push(t),()=>this.off(e,t)}once(e,t){let s=null;return L((()=>s&&this.off(e,s)),(a=>{(this.listeners[e]??=D([])).push(s=function(){return a(),t(...arguments)})}))}off(e,t){const s=this.listeners[e];s&&(s.remove(t),s.isEmpty()&&delete this.listeners[e])}}var Ae=q(new ye);const xe={$app:be,$events:Ae};async function Ge(e,t){await Promise.all(Object.entries(t).map((async e=>{let[t,s]=e;await s.launch(t.slice(1)).catch((e=>console.error(e)))}))),Object.assign(e.config.globalProperties,t)}var we={async install(e){await Ge(e,xe)}};var je=q(new class extends ve{constructor(){super(),N(this,"provider",void 0),this.provider={translate:e=>(be.isDevelopment&&console.warn("Lang provider is missing"),e)}}setProvider(e){this.provider=e}translate(e,t){return this.provider.translate(e,t)??e}translateWithDefault(e,t,s){s??=t;const a="string"==typeof t?{}:t,r=this.provider.translate(e,a)??e;return r===e?s:r}});const Ce={$lang:je},Me=je.translate.bind(je),Ie=je.translateWithDefault.bind(je);var Se={async install(e){e.config.globalProperties.$t??=Me,e.config.globalProperties.$td=Ie,await Ge(e,Ce)}},ke=he({initialState:{modals:[]}});const $e={AlertModal:"alert-modal",ConfirmModal:"confirm-modal"};var He=q(new class extends ke{constructor(){super(...arguments),N(this,"modalCallbacks",{}),N(this,"components",{})}alert(e,t){const s="string"==typeof t?{title:e,message:t}:{message:e};this.openModal(this.requireComponent($e.AlertModal),s)}async confirm(e,t){const s="string"==typeof t?{title:e,message:t}:{message:e},a=await this.openModal(this.requireComponent($e.ConfirmModal),s);return await a.beforeClose??!1}registerComponent(e,t){this.components[e]=t}async openModal(e,t){const s=B(),a={},n={id:s,properties:t??{},component:r(e),beforeClose:new Promise((e=>a.willClose=e)),afterClose:new Promise((e=>a.closed=e))},l=this.modals.at(-1),i=this.modals.concat(n);return this.modalCallbacks[n.id]=a,this.setState({modals:i}),await o(),await(l&&Ae.emit("hide-modal",{id:l.id})),await Promise.all([l||Ae.emit("show-overlays-backdrop"),Ae.emit("show-modal",{id:n.id})]),n}async closeModal(e,t){await Ae.emit("close-modal",{id:e,result:t})}async boot(){await super.boot(),this.watchModalEvents()}requireComponent(e){return this.components[e]??H(`UI Component '${e}' is not defined!`)}watchModalEvents(){Ae.on("modal-will-close",(e=>{let{modal:t,result:s}=e;this.modalCallbacks[t.id]?.willClose?.(s),1===this.modals.length&&Ae.emit("hide-overlays-backdrop")})),Ae.on("modal-closed",(async e=>{let{modal:t,result:s}=e;this.setState({modals:this.modals.filter((e=>e.id!==t.id))}),this.modalCallbacks[t.id]?.closed?.(s),delete this.modalCallbacks[t.id];const a=this.modals.at(-1);await(a&&Ae.emit("show-modal",{id:a.id}))}))}});function Ee(e,t){const s=Ae.on(e,t);n((()=>s()))}var Oe=l({__name:"AGHeadlessModal",props:{cancellable:J(!0)},setup(t,{expose:s}){const a=t,r=e(null),o=e(!0),n=e(!1),{modal:l}=te("modal","could not obtain modal reference from <AGHeadlessModal>, did you render this component manually? Show it using $ui.openModal() instead");async function f(){r.value?.$el&&(o.value=!0)}async function h(e){n.value||(Ae.emit("modal-will-close",{modal:l,result:e}),await f(),n.value=!0,Ae.emit("modal-closed",{modal:l,result:e}))}return Ee("close-modal",(async({id:e,result:t})=>{e===l.id&&await h(t)})),Ee("hide-modal",(async({id:e})=>{e===l.id&&await f()})),Ee("show-modal",(async({id:e})=>{e===l.id&&await async function(){r.value?.$el&&(o.value=!1)}()})),s({close:h,cancellable:i(a,"cancellable")}),(e,s)=>(u(),d(c(T),{ref_key:"$root",ref:r,open:!0,onClose:s[0]||(s[0]=e=>t.cancellable&&h())},{default:m((()=>[p(e.$slots,"default",{close:h})])),_:3},512))}});Oe.__file="src/components/headless/modals/AGHeadlessModal.vue";var Pe=l({__name:"AGModalContext",props:{modal:de(),childIndex:ue()},setup(e){const t=e;return f("modal",{modal:i(t,"modal"),childIndex:i(t,"childIndex")}),(t,s)=>(u(),d(h(e.modal.component),v(_(e.modal.properties)),null,16))}});Pe.__file="src/components/modals/AGModalContext.vue";var qe=l({__name:"AGHeadlessModalPanel",setup(e){const t=te("modal","could not obtain modal reference from <AGHeadlessModalPanel>, did you render this component manually? Show it using $ui.openModal() instead"),s=a((()=>He.modals[t.childIndex]??null));return(e,a)=>(u(),d(c(K),null,{default:m((()=>[p(e.$slots,"default"),s.value?(u(),d(Pe,{key:0,"child-index":c(t).childIndex+1,modal:s.value},null,8,["child-index","modal"])):g("v-if",!0)])),_:3}))}});qe.__file="src/components/headless/modals/AGHeadlessModalPanel.vue";const De={class:"fixed inset-0 flex items-center justify-center"},Le={class:"flex max-h-full flex-col overflow-auto p-4"};var Be=l({__name:"AGModal",setup:e=>(e,t)=>(u(),d(Oe,{class:"relative z-50"},{default:m((({close:t})=>[b("div",De,[y(qe,{class:"flex max-h-full max-w-full flex-col overflow-hidden bg-white"},{default:m((()=>[b("div",Le,[p(e.$slots,"default",{close:t})])])),_:2},1024)])])),_:3}))});function Fe(e){return t=W(e,{mangle:!1,headerIds:!1}),Q.sanitize(t,{ADD_ATTR:["target"]});var t}Be.__file="src/components/modals/AGModal.vue";var Ve=l({__name:"AGMarkdown",props:{as:me("div"),langKey:me(),text:me(),inline:J(),raw:J()},setup(e){const t=e,s=a((()=>t.text??(t.langKey&&Me(t.langKey)))),r=a((()=>{if(!s.value)return null;let e=Fe(s.value);return t.inline&&(e=e.replace("<p>","<span>").replace("</p>","</span>")),e})),o=()=>A(t.as,{class:t.raw?"":"prose",innerHTML:r.value});return(e,t)=>(u(),d(o))}});Ve.__file="src/components/basic/AGMarkdown.vue";var Ne=l({__name:"AGAlertModal",props:{title:me(),message:ce()},setup:e=>(t,s)=>(u(),d(Be,null,{default:m((()=>[e.title?(u(),d(Ve,{key:0,text:e.title,as:"h2",class:"font-semibold",raw:"",inline:""},null,8,["text"])):g("v-if",!0),y(Ve,{text:e.message},null,8,["text"])])),_:1}))});function Te(e){let t=F;x((()=>t=e())),n((()=>t()))}Ne.__file="src/components/modals/AGAlertModal.vue";var Ke=l({__name:"AGHeadlessButton",props:{url:me(),route:me(),routeParams:oe((()=>({}))),routeQuery:oe((()=>({}))),submit:J()},setup(e){const{url:t,route:s,routeParams:r,routeQuery:o,submit:n}=e,l=a((()=>s?{tag:"router-link",props:{to:V({name:s,params:r,query:o})}}:t?{tag:"a",props:{target:"_blank",href:t}}:{tag:"button",props:{type:n?"submit":"button"}}));return(e,t)=>(u(),d(h(l.value.tag),v(_(l.value.props)),{default:m((()=>[p(e.$slots,"default")])),_:3},16))}});Ke.__file="src/components/headless/forms/AGHeadlessButton.vue";var ze=l({__name:"AGButton",props:{secondary:J()},setup:e=>(t,s)=>(u(),d(Ke,{class:G(["px-2.5 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",{"bg-indigo-600 hover:bg-indigo-500 focus-visible:outline-indigo-600":!e.secondary,"bg-gray-600 hover:bg-gray-500 focus-visible:outline-gray-600":e.secondary}])},{default:m((()=>[p(t.$slots,"default")])),_:3},8,["class"]))});ze.__file="src/components/forms/AGButton.vue";const Qe={class:"mt-2 flex flex-row-reverse gap-2"};var We=l({__name:"AGConfirmModal",props:{title:me(),message:ce()},setup:e=>(t,s)=>(u(),d(Be,{cancellable:!1},{default:m((({close:s})=>[e.title?(u(),d(Ve,{key:0,text:e.title,as:"h1"},null,8,["text"])):g("v-if",!0),y(Ve,{text:e.message},null,8,["text"]),b("div",Qe,[y(ze,{onClick:e=>s(!0)},{default:m((()=>[w(j(t.$td("ui.ok","OK")),1)])),_:2},1032,["onClick"]),y(ze,{secondary:"",onClick:e=>s()},{default:m((()=>[w(j(t.$td("ui.cancel","Cancel")),1)])),_:2},1032,["onClick"])])])),_:1}))});We.__file="src/components/modals/AGConfirmModal.vue";const Re={$ui:He};var Ue={async install(e,t){const s={[$e.AlertModal]:Ne,[$e.ConfirmModal]:We};Object.entries({...s,...t.components}).forEach((e=>{let[t,s]=e;return He.registerComponent(t,s)})),await Ge(e,Re)}};async function Je(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const s=[fe,Se,we,Ue,...t.plugins??[]],a=C(e);await Promise.all(s.map((e=>e.install(a,t)))??[]),a.mount("#app")}const Xe={key:0};var Ye=l({__name:"AGAppOverlays",setup(t){const s=e(null),r=e(!0),o=a((()=>He.modals[0]??null));return Ee("show-overlays-backdrop",(async()=>{s.value&&r.value&&(r.value=!1,s.value.classList.remove("opacity-0"))})),Ee("hide-overlays-backdrop",(async()=>{s.value&&!r.value&&(r.value=!0,s.value.classList.add("opacity-0"))})),(e,t)=>(u(),M(I,null,[b("div",{ref_key:"$backdrop",ref:s,class:"pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0"},null,512),o.value?(u(),M("aside",Xe,[y(Pe,{"child-index":1,modal:o.value},null,8,["modal"])])):g("v-if",!0)],64))}});Ye.__file="src/components/AGAppOverlays.vue";const Ze={class:"flex h-full flex-col text-base font-normal leading-tight text-gray-900 antialiased"};var et=l({__name:"AGAppLayout",setup:e=>(e,t)=>(u(),M("div",Ze,[p(e.$slots,"default"),y(Ye)]))});et.__file="src/components/AGAppLayout.vue";const tt=["onSubmit"];var st=l({__name:"AGForm",props:{form:oe()},emits:["submit"],setup(e,{emit:t}){const s=e;function a(){s.form&&!s.form.submit()||t("submit")}return f("form",s.form),(e,t)=>(u(),M("form",{onSubmit:S(a,["prevent"])},[p(e.$slots,"default")],40,tt))}});st.__file="src/components/forms/AGForm.vue";var at=l({__name:"AGHeadlessInput",props:{as:me(),name:me(),modelValue:me()},emits:["update:modelValue"],setup(e,{expose:s,emit:r}){const o=e,n=a((()=>l&&o.name?l.errors[o.name]??null:null)),l=t("form",null),i={id:`input-${B()}`,value:a((()=>l&&o.name?l.getFieldValue(o.name):o.modelValue)),errors:k(n),update(e){l&&o.name?l.setFieldValue(o.name,e):r("update:modelValue",e)}};return f("input",i),s(i),(t,s)=>e.as?(u(),d(h(e.as),{key:0},{default:m((()=>[p(t.$slots,"default")])),_:3})):p(t.$slots,"default",{key:1})}});at.__file="src/components/headless/forms/AGHeadlessInput.vue";const rt=["id","value","aria-invalid","aria-describedby"];var ot=l({__name:"AGHeadlessInputInput",setup(t){const s=e(),r=te("input","<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>"),o=a((()=>r.value));function n(){s.value&&r.update(s.value.value)}return(e,t)=>(u(),M("input",{id:c(r).id,ref_key:"$input",ref:s,type:"text",value:o.value,"aria-invalid":c(r).errors?"true":"false","aria-describedby":c(r).errors?`${c(r).id}-error`:void 0,onInput:n},null,40,rt))}});ot.__file="src/components/headless/forms/AGHeadlessInputInput.vue";const nt=["id"];var lt=l({__name:"AGHeadlessInputError",setup(e){const t=te("input","<AGHeadlessInputError> must be a child of a <AGHeadlessInput>"),s=a((()=>t.errors?Ie(`errors.${t.errors[0]}`,`Error: ${t.errors[0]}`):null));return(e,a)=>s.value?(u(),M("p",{key:0,id:`${c(t).id}-error`},j(s.value),9,nt)):g("v-if",!0)}});lt.__file="src/components/headless/forms/AGHeadlessInputError.vue";var it=l({inheritAttrs:!1,__name:"AGInput",props:{name:me()},setup(e){const t=X();return(s,a)=>(u(),d(at,{ref_key:"$input",ref:t,as:"div",class:"flex flex-col items-center",name:e.name},{default:m((()=>[y(ot,$(s.$attrs,{class:["block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600",{"ring-1 ring-red-500":c(t)?.errors}]}),null,16,["class"]),y(lt,{class:"mt-1 text-sm text-red-500"})])),_:1},8,["name"]))}});it.__file="src/components/forms/AGInput.vue";const ut=["for"];var dt=l({__name:"AGHeadlessInputLabel",setup(e){const t=te("input","<AGHeadlessInputLabel> must be a child of a <AGHeadlessInput>");return(e,s)=>(u(),M("label",{for:c(t).id},[p(e.$slots,"default")],8,ut))}});dt.__file="src/components/headless/forms/AGHeadlessInputLabel.vue";var ct=l({__name:"AGHeadlessModalTitle",props:{as:me("h2")},setup:e=>(t,s)=>(u(),d(c(z),{as:e.as},{default:m((()=>[p(t.$slots,"default")])),_:3},8,["as"]))});ct.__file="src/components/headless/modals/AGHeadlessModalTitle.vue";const mt={String:"string",Number:"number"};class pt extends O{constructor(t){super(),N(this,"errors",void 0),N(this,"_fields",void 0),N(this,"_data",void 0),N(this,"_valid",void 0),N(this,"_submitted",void 0),N(this,"_errors",void 0),this._fields=t,this._submitted=e(!1),this._data=this.getInitialData(t),this._errors=this.getInitialErrors(t),this._valid=a((()=>!Object.values(this._errors).some((e=>null!==e)))),this.errors=k(this._errors)}get valid(){return this._valid.value}get submitted(){return this._submitted.value}setFieldValue(e,t){this._data[e]=t,this._submitted.value&&this.validate()}getFieldValue(e){return this._data[e]}validate(){const e=Object.entries(this._fields).reduce(((e,t)=>{let[s,a]=t;return e[s]=this.getFieldErrors(s,a),e}),{});return this.resetErrors(e),this.valid}reset(){this._submitted.value=!1,this.resetErrors()}submit(){return this._submitted.value=!0,this.validate()}__get(e){return e in this._fields?this._data[e]:super.__get(e)}__set(e,t){e in this._fields?Object.assign(this._data,{[e]:t}):super.__set(e,t)}getFieldErrors(e,t){const s=[];return t.rules?.includes("required")&&!this._data[e]&&s.push("required"),s.length>0?s:null}getInitialData(e){if(this.static().isConjuring())return{};const t=Object.entries(e).reduce(((e,t)=>{let[s,a]=t;return e[s]=a.default??null,e}),{});return s(t)}getInitialErrors(e){if(this.static().isConjuring())return{};const t=Object.keys(e).reduce(((e,t)=>(e[t]=null,e)),{});return s(t)}resetErrors(e){Object.keys(this._errors).forEach((e=>delete this._errors[e])),e&&Object.assign(this._errors,e)}}function ft(e){return new pt(e)}function ht(e){return{default:e,type:mt.Number,rules:"required"}}function vt(e){return{default:e,type:mt.String,rules:"required"}}function _t(e){return{default:e,type:mt.Number}}function gt(e){return{default:e,type:mt.String}}export{Ne as AGAlertModal,et as AGAppLayout,Ye as AGAppOverlays,ze as AGButton,We as AGConfirmModal,st as AGForm,Ke as AGHeadlessButton,at as AGHeadlessInput,lt as AGHeadlessInputError,ot as AGHeadlessInputInput,dt as AGHeadlessInputLabel,Oe as AGHeadlessModal,qe as AGHeadlessModalPanel,ct as AGHeadlessModalTitle,it as AGInput,Ve as AGMarkdown,Be as AGModal,Pe as AGModalContext,be as App,ge as AppService,Ae as Events,ye as EventsService,mt as FormFieldTypes,je as Lang,ve as Service,He as UI,$e as UIComponents,U as arrayProp,J as booleanProp,Ge as bootServices,Je as bootstrapApplication,X as componentRef,Y as defineDirective,R as definePlugin,he as defineServiceState,Z as enumProp,se as injectOrFail,ee as injectReactive,te as injectReactiveOrFail,ae as mixedProp,_t as numberInput,re as numberProp,oe as objectProp,Te as onCleanMounted,ne as requiredArrayProp,le as requiredEnumProp,ie as requiredMixedProp,ht as requiredNumberInput,ue as requiredNumberProp,de as requiredObjectProp,vt as requiredStringInput,ce as requiredStringProp,gt as stringInput,me as stringProp,Me as translate,Ie as translateWithDefault,Ee as useEvent,ft as useForm};
+import"core-js/modules/esnext.async-iterator.map.js";import"core-js/modules/esnext.iterator.map.js";import{ref as e,inject as t,reactive as r,markRaw as s,nextTick as o,onUnmounted as n,useAttrs as a,computed as l,onMounted as i,defineComponent as u,toRef as c,openBlock as d,createBlock as p,unref as m,withCtx as f,renderSlot as h,provide as v,resolveDynamicComponent as g,normalizeProps as _,guardReactiveProps as b,createElementBlock as y,Fragment as x,createVNode as w,createCommentVNode as A,createElementVNode as k,h as j,normalizeClass as S,createTextVNode as G,toDisplayString as M,renderList as C,mergeProps as $,readonly as E,createApp as H,withModifiers as I}from"vue";import{fail as R,JSError as L,MagicObject as P,PromisedValue as B,objectOnly as O,isEmpty as D,Storage as q,objectDeepClone as T,facade as z,arr as V,tap as F,uuid as N,toString as U,isObject as K,objectWithoutEmpty as Q,objectWithout as W,noop as Z,stringExcerpt as Y}from"@noeldemartin/utils";import J from"@babel/runtime/helpers/esm/defineProperty";import"core-js/modules/esnext.set.add-all.js";import"core-js/modules/esnext.set.delete-all.js";import"core-js/modules/esnext.set.difference.js";import"core-js/modules/esnext.set.every.js";import"core-js/modules/esnext.set.filter.js";import"core-js/modules/esnext.set.find.js";import"core-js/modules/esnext.set.intersection.js";import"core-js/modules/esnext.set.is-disjoint-from.js";import"core-js/modules/esnext.set.is-subset-of.js";import"core-js/modules/esnext.set.is-superset-of.js";import"core-js/modules/esnext.set.join.js";import"core-js/modules/esnext.set.map.js";import"core-js/modules/esnext.set.reduce.js";import"core-js/modules/esnext.set.some.js";import"core-js/modules/esnext.set.symmetric-difference.js";import"core-js/modules/esnext.set.union.js";import{defineStore as X,createPinia as ee,setActivePinia as te}from"pinia";import re from"virtual:aerogel";import"core-js/modules/esnext.async-iterator.filter.js";import"core-js/modules/esnext.iterator.constructor.js";import"core-js/modules/esnext.iterator.filter.js";import"core-js/modules/esnext.string.at.js";import"core-js/modules/esnext.async-iterator.reduce.js";import"core-js/modules/esnext.iterator.reduce.js";import"core-js/modules/esnext.async-iterator.some.js";import"core-js/modules/esnext.iterator.some.js";import"core-js/modules/esnext.async-iterator.for-each.js";import"core-js/modules/esnext.iterator.for-each.js";import{Dialog as se,DialogPanel as oe,DialogTitle as ne}from"@headlessui/vue";import ae from"dompurify";import{marked as le}from"marked";function ie(e){return e}function ue(e){return{type:Array,default:e??(()=>[])}}function ce(){return{type:Boolean,default:arguments.length>0&&void 0!==arguments[0]&&arguments[0]}}function de(){return e()}function pe(e){return e}function me(e,t){const r=Object.values(e);return{type:String,default:t??r[0]??null,validator:e=>r.includes(e)}}function fe(e){const s=t(e);return s?r(s):void 0}function he(e,t){return fe(e)??R(t??`Could not resolve '${e}' injection key`)}function ve(e,r){return t(e)??R(r??`Could not resolve '${e}' injection key`)}function ge(e){return{type:e,default:null}}function _e(){return{type:Number,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}function be(){return{type:Object,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}function ye(){return{type:Array,required:!0}}function xe(e){const t=Object.values(e);return{type:String,required:!0,validator:e=>t.includes(e)}}function we(e){return{type:e,required:!0}}function Ae(){return{type:Number,required:!0}}function ke(){return{type:Object,required:!0}}function je(){return{type:String,required:!0}}function Se(){return{type:String,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}const Ge={"initial-focus":{mounted(e,t){let{value:r}=t;!1!==r&&e.focus()}}};var Me={install(e,t){const r={...Ge,...t.directives};for(const[t,s]of Object.entries(r))e.directive(t,s)}};class ServiceBootError extends L{constructor(e,t){super(`Service '${e}' failed booting`,{cause:t})}}let Ce=null;function $e(){return Ce||(Ce=ee(),te(Ce)),Ce}function Ee(e){var t;return J(t=class extends He{usesStore(){return!0}getName(){return e.name??null}getInitialState(){return e.initialState}getComputedStateDefinition(){return e.computed??{}}serializePersistedState(t){return e.serialize?.(t)??t}},"persist",e.persist??[]),t}class He extends P{constructor(){super(),J(this,"_name",void 0),J(this,"_booted",void 0),J(this,"_computedStateKeys",void 0),J(this,"_store",void 0);const e=this.getComputedStateDefinition();var t,r;this._name=this.getName()??new.target.name,this._booted=new B,this._computedStateKeys=new Set(Object.keys(e)),this._store=this.usesStore()&&(t=this._name,r={state:()=>this.getInitialState(),getters:e},$e(),X(t,r)())}get booted(){return this._booted}launch(){const handleError=e=>this._booted.reject(new ServiceBootError(this._name,e));try{this.boot().then((()=>this._booted.resolve())).catch(handleError)}catch(e){handleError(e)}return this._booted}hasState(e){return!!this._store&&(e in this._store.$state||this._computedStateKeys.has(e))}getState(e){const t=this._store;return e?t?t[e]:void 0:t||{}}setState(e,t){if(!this._store)return;const r="string"==typeof e?{[e]:t}:e;Object.assign(this._store.$state,r),this.onStateUpdated(r)}__get(e){return this.hasState(e)?this.getState(e):super.__get(e)}__set(e,t){this.setState({[e]:t})}onStateUpdated(e){const t=this.constructor.persist,r=O(e,t);if(D(r))return;const s=q.require(this._name);q.set(this._name,{...s,...this.serializePersistedState(T(r))})}usesStore(){return!1}getName(){return null}getInitialState(){return{}}getComputedStateDefinition(){return{}}serializePersistedState(e){return e}async boot(){this.restorePersistedState()}restorePersistedState(){const e=this.constructor.persist;if(this.usesStore()&&!D(e))if(q.has(this._name)){const e=q.require(this._name);this.setState(e)}else q.set(this._name,O(this.getState(),e))}}J(He,"persist",[]);class Ie extends He{constructor(){super(...arguments),J(this,"listeners",{})}async emit(e,t){const r=[...this.listeners[e]??[]];await Promise.all(r.map((e=>e(t)))??[])}on(e,t){return(this.listeners[e]??=V([])).push(t),()=>this.off(e,t)}once(e,t){let r=null;return F((()=>r&&this.off(e,r)),(s=>{(this.listeners[e]??=V([])).push(r=function(){return s(),t(...arguments)})}))}off(e,t){const r=this.listeners[e];r&&(r.remove(t),r.isEmpty()&&delete this.listeners[e])}}var Re=z(new Ie),Le=Ee({name:"app",initialState:{environment:re.environment,sourceUrl:re.sourceUrl,isMounted:!1},computed:{isDevelopment:e=>"development"===e.environment,isTesting:e=>"testing"===e.environment}});class Pe extends Le{async boot(){await super.boot(),Re.once("application-mounted",(()=>this.setState({isMounted:!0})))}}var Be=z(new Pe);const Oe={$app:Be,$events:Re};async function De(e,t){await Promise.all(Object.entries(t).map((async e=>{let[t,r]=e;await r.launch().catch((e=>console.error(e)))}))),Object.assign(e.config.globalProperties,t)}var qe={async install(e,t){const r={...Oe,...t.services};e.use(Ce??$e()),await De(e,r)}},Te=Ee({name:"ui",initialState:{modals:[],snackbars:[]}});const ze={AlertModal:"alert-modal",ConfirmModal:"confirm-modal",ErrorReportModal:"error-report-modal",LoadingModal:"loading-modal",Snackbar:"snackbar"};var Ve=z(new class extends Te{constructor(){super(...arguments),J(this,"modalCallbacks",{}),J(this,"components",{})}requireComponent(e){return this.components[e]??R(`UI Component '${e}' is not defined!`)}alert(e,t){const r="string"==typeof t?{title:e,message:t}:{message:e};this.openModal(this.requireComponent(ze.AlertModal),r)}async confirm(e,t){const r="string"==typeof t?{title:e,message:t}:{message:e},s=await this.openModal(this.requireComponent(ze.ConfirmModal),r);return await s.beforeClose??!1}async loading(e,t){t="string"==typeof e?t:e;const r="string"==typeof e?e:void 0,s=await this.openModal(this.requireComponent(ze.LoadingModal),{message:r}),o=await t;return await this.closeModal(s.id),o}showSnackbar(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const r={id:N(),properties:{message:e,...t},component:t.component??s(this.requireComponent(ze.Snackbar))};this.setState("snackbars",this.snackbars.concat(r)),setTimeout((()=>this.hideSnackbar(r.id)),5e3)}hideSnackbar(e){this.setState("snackbars",this.snackbars.filter((t=>t.id!==e)))}registerComponent(e,t){this.components[e]=t}async openModal(e,t){const r=N(),n={},a={id:r,properties:t??{},component:s(e),beforeClose:new Promise((e=>n.willClose=e)),afterClose:new Promise((e=>n.closed=e))},l=this.modals.at(-1),i=this.modals.concat(a);return this.modalCallbacks[a.id]=n,this.setState({modals:i}),await o(),await(l&&Re.emit("hide-modal",{id:l.id})),await Promise.all([l||Re.emit("show-overlays-backdrop"),Re.emit("show-modal",{id:a.id})]),a}async closeModal(e,t){await Re.emit("close-modal",{id:e,result:t})}async boot(){await super.boot(),this.watchModalEvents()}watchModalEvents(){Re.on("modal-will-close",(e=>{let{modal:t,result:r}=e;this.modalCallbacks[t.id]?.willClose?.(r),1===this.modals.length&&Re.emit("hide-overlays-backdrop")})),Re.on("modal-closed",(async e=>{let{modal:t,result:r}=e;this.setState("modals",this.modals.filter((e=>e.id!==t.id))),this.modalCallbacks[t.id]?.closed?.(r),delete this.modalCallbacks[t.id];const s=this.modals.at(-1);await(s&&Re.emit("show-modal",{id:s.id}))}))}});var Fe=z(new class extends He{constructor(){super(),J(this,"provider",void 0),this.provider={translate:e=>(Be.isDevelopment&&console.warn("Lang provider is missing"),e)}}setProvider(e){this.provider=e}translate(e,t){return this.provider.translate(e,t)??e}translateWithDefault(e,t,r){r??=t;const s="string"==typeof t?{}:t??{},o=this.provider.translate(e,s)??e;return o===e?Object.entries(s).reduce(((e,t)=>{let[r,s]=t;return e.replace(new RegExp(`\\{\\s*${r}\\s*\\}`,"g"),U(s))}),r):o}});const Ne=Fe.translate.bind(Fe),Ue=Fe.translateWithDefault.bind(Fe);var Ke=Ee({name:"errors",initialState:{logs:[],startupErrors:[]},computed:{hasErrors:e=>{let{logs:t}=e;return t.length>0},hasNewErrors:e=>{let{logs:t}=e;return t.some((e=>!e.seen))},hasStartupErrors:e=>{let{startupErrors:t}=e;return t.length>0}}});const Qe={Primary:"primary",Secondary:"secondary",Danger:"danger",Clear:"clear"};var We=z(new class extends Ke{constructor(){super(...arguments),J(this,"forceReporting",!1),J(this,"enabled",!0)}enable(){this.enabled=!0}disable(){this.enabled=!1}async inspect(e){const t=Array.isArray(e)?e:[await this.createErrorReport(e)];0!==t.length?Ve.openModal(Ve.requireComponent(ze.ErrorReportModal),{reports:t}):Ve.alert(Ue("errors.inspectEmpty","Nothing to inspect!"))}async report(e,t){if((Be.isDevelopment||Be.isTesting)&&this.logError(e),!this.enabled)throw e;if(!Be.isMounted){const t=await this.createStartupErrorReport(e);return void(t&&this.setState({startupErrors:this.startupErrors.concat(t)}))}const r=await this.createErrorReport(e),s={report:r,seen:!1,date:new Date};Ve.showSnackbar(t??Ue("errors.notice","Something went wrong, but it's not your fault. Try again!"),{color:Qe.Danger,actions:[{text:Ue("errors.viewDetails","View details"),dismiss:!0,handler:()=>Ve.openModal(Ve.requireComponent(ze.ErrorReportModal),{reports:[r]})}]}),this.setState({logs:[s].concat(this.logs)})}see(e){this.setState({logs:this.logs.map((t=>t.report!==e?t:{...t,seen:!0}))})}seeAll(){this.setState({logs:this.logs.map((e=>({...e,seen:!0})))})}logError(e){console.error(e),K(e)&&e.cause&&this.logError(e.cause)}async createErrorReport(e){return"string"==typeof e?{title:e}:e instanceof Error||e instanceof L?this.createErrorReportFromError(e):K(e)?Q({title:U(e.name??e.title??Ne("errors.unknown")),description:U(e.message??e.description??""),error:e}):{title:Ne("errors.unknown"),error:e}}async createStartupErrorReport(e){return e instanceof ServiceBootError?e.cause instanceof ServiceBootError?null:this.createErrorReport(e.cause):this.createErrorReport(e)}createErrorReportFromError(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return{title:e.name,description:e.message,details:e.stack,error:e,...t}}});const Ze={$errors:We};function Ye(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:()=>!1;return F((t=>e(t)||(e=>We.instance?(We.report(e),!0):(console.warn("Errors service hasn't been initialized properly!"),console.error(e),!0))(t)),(e=>{globalThis.onerror=(t,r,s,o,n)=>e(n??t),globalThis.onunhandledrejection=t=>e(t.reason)}))}var Je={async install(e,t){const r=Ye(t.handleError);e.config.errorHandler=r,await De(e,Ze)}};const Xe={$lang:Fe};var et={async install(e){e.config.globalProperties.$t??=Ne,e.config.globalProperties.$td=Ue,await De(e,Xe)}};function tt(e,t){const r=Re.on(e,t);n((()=>r()))}function rt(){const e=a(),t=l((()=>e.class));return[l((()=>W(e,"class"))),t]}function st(e){let t=Z;i((()=>t=e())),n((()=>t()))}var ot=u({__name:"AGHeadlessModal",props:{cancellable:ce(!0)},setup(t,{expose:r}){const s=t,o=e(null),n=e(!0),a=e(!1),{modal:l}=he("modal","could not obtain modal reference from <AGHeadlessModal>, did you render this component manually? Show it using $ui.openModal() instead");async function i(){o.value?.$el&&(n.value=!0)}async function u(e){a.value||(Re.emit("modal-will-close",{modal:l,result:e}),await i(),a.value=!0,Re.emit("modal-closed",{modal:l,result:e}))}return tt("close-modal",(async({id:e,result:t})=>{e===l.id&&await u(t)})),tt("hide-modal",(async({id:e})=>{e===l.id&&await i()})),tt("show-modal",(async({id:e})=>{e===l.id&&await async function(){o.value?.$el&&(n.value=!1)}()})),r({close:u,cancellable:c(s,"cancellable")}),(e,r)=>(d(),p(m(se),{ref_key:"$root",ref:o,open:!0,onClose:r[0]||(r[0]=e=>t.cancellable&&u())},{default:f((()=>[h(e.$slots,"default",{close:u})])),_:3},512))}});ot.__file="src/components/headless/modals/AGHeadlessModal.vue";var nt=u({__name:"AGModalContext",props:{modal:ke(),childIndex:Ae()},setup(e){const t=e;return v("modal",{modal:c(t,"modal"),childIndex:c(t,"childIndex")}),(t,r)=>(d(),p(g(e.modal.component),_(b(e.modal.properties)),null,16))}});nt.__file="src/components/modals/AGModalContext.vue";const at=k("div",{class:"pointer-events-none fixed inset-0 z-50 bg-black/30"},null,-1);var lt=u({__name:"AGHeadlessModalPanel",setup(e){const t=he("modal","could not obtain modal reference from <AGHeadlessModalPanel>, did you render this component manually? Show it using $ui.openModal() instead"),r=l((()=>Ve.modals[t.childIndex]??null));return(e,s)=>(d(),p(m(oe),null,{default:f((()=>[h(e.$slots,"default"),r.value?(d(),y(x,{key:0},[at,w(nt,{"child-index":m(t).childIndex+1,modal:r.value},null,8,["child-index","modal"])],64)):A("v-if",!0)])),_:3}))}});lt.__file="src/components/headless/modals/AGHeadlessModalPanel.vue";const it={class:"fixed inset-0 flex items-center justify-center p-8"},ut={class:"flex max-h-full flex-col overflow-auto p-4"};var ct=u({__name:"AGModal",props:{cancellable:ce(!0)},setup(t,{expose:r}){const s=e();return r({close:async()=>s.value?.close(),cancellable:l((()=>!!s.value?.cancellable))}),(e,r)=>(d(),p(ot,{ref_key:"$headlessModal",ref:s,cancellable:t.cancellable,class:"relative z-50"},{default:f((({close:t})=>[k("div",it,[w(lt,{class:"flex max-h-full max-w-full flex-col overflow-hidden bg-white"},{default:f((()=>[k("div",ut,[h(e.$slots,"default",{close:t})])])),_:2},1024)])])),_:3},8,["cancellable"]))}});function dt(e){return t=le(e,{mangle:!1,headerIds:!1}),ae.sanitize(t,{ADD_ATTR:["target"]});var t}ct.__file="src/components/modals/AGModal.vue";var pt=u({__name:"AGMarkdown",props:{as:Se("div"),heading:ce(),inline:ce(),langKey:Se(),raw:ce(),text:Se()},setup(e){const t=e,r=l((()=>t.text??(t.langKey&&Ne(t.langKey)))),s=l((()=>{if(!r.value)return null;let e=dt(r.value);return t.heading&&(e=e.replace("<p>","<span>").replace("</p>","</span>")),t.inline&&(e=e.replace("<p>","<span>").replace("</p>","</span>")),e})),o=()=>j(t.as,{class:t.raw?"":"prose",innerHTML:s.value});return(e,t)=>(d(),p(o))}});pt.__file="src/components/basic/AGMarkdown.vue";var mt=u({__name:"AGAlertModal",props:{title:Se(),message:je()},setup:e=>(t,r)=>(d(),p(ct,null,{default:f((()=>[e.title?(d(),p(pt,{key:0,text:e.title,as:"h2",class:"font-semibold",raw:"",inline:""},null,8,["text"])):A("v-if",!0),w(pt,{text:e.message},null,8,["text"])])),_:1}))});mt.__file="src/components/modals/AGAlertModal.vue";var ft=u({__name:"AGHeadlessButton",props:{url:Se(),route:Se(),routeParams:be((()=>({}))),routeQuery:be((()=>({}))),submit:ce()},setup(e){const{url:t,route:r,routeParams:s,routeQuery:o,submit:n}=e,a=l((()=>r?{tag:"router-link",props:{to:Q({name:r,params:s,query:o})}}:t?{tag:"a",props:{target:"_blank",href:t}}:{tag:"button",props:{type:n?"submit":"button"}}));return(e,t)=>(d(),p(g(a.value.tag),_(b(a.value.props)),{default:f((()=>[h(e.$slots,"default")])),_:3},16))}});ft.__file="src/components/headless/forms/AGHeadlessButton.vue";var ht=u({__name:"AGButton",props:{color:me(Qe,Qe.Primary)},setup(e){const t=e,r=l((()=>{switch(t.color){case Qe.Secondary:return["text-white bg-gray-600","hover:bg-gray-500","focus-visible:outline-offset-2 focus-visible:outline-gray-600"].join(" ");case Qe.Clear:return"hover:bg-gray-500/20 focus-visible:outline-gray-500/60";case Qe.Danger:return["text-white bg-red-600","hover:bg-red-500","focus-visible:outline-offset-2 focus-visible:outline-red-600"].join(" ");default:return["text-white bg-indigo-600","hover:bg-indigo-500","focus-visible:outline-offset-2 focus-visible:outline-indigo-600"].join(" ")}}));return(e,t)=>(d(),p(ft,{class:S(["px-2.5 py-1.5 focus-visible:outline focus-visible:outline-2",r.value])},{default:f((()=>[h(e.$slots,"default")])),_:3},8,["class"]))}});ht.__file="src/components/forms/AGButton.vue";const vt={class:"mt-2 flex flex-row-reverse gap-2"};var gt=u({__name:"AGConfirmModal",props:{title:Se(),message:je()},setup:e=>(t,r)=>(d(),p(ct,{cancellable:!1},{default:f((({close:r})=>[e.title?(d(),p(pt,{key:0,text:e.title,as:"h1"},null,8,["text"])):A("v-if",!0),w(pt,{text:e.message},null,8,["text"]),k("div",vt,[w(ht,{onClick:e=>r(!0)},{default:f((()=>[G(M(t.$td("ui.ok","OK")),1)])),_:2},1032,["onClick"]),w(ht,{color:"secondary",onClick:e=>r()},{default:f((()=>[G(M(t.$td("ui.cancel","Cancel")),1)])),_:2},1032,["onClick"])])])),_:1}))});gt.__file="src/components/modals/AGConfirmModal.vue";const _t={viewBox:"0 0 20 20",width:"1.2em",height:"1.2em"},bt=[k("path",{fill:"currentColor",d:"m12.95 10.707l.707-.707L8 4.343L6.586 5.757L10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"},null,-1)];var yt={name:"zondicons-cheveron-right",render:function(e,t){return d(),y("svg",_t,bt)}};const xt={viewBox:"0 0 20 20",width:"1.2em",height:"1.2em"},wt=[k("path",{fill:"currentColor",d:"M7.05 9.293L6.343 10L12 15.657l1.414-1.414L9.172 10l4.242-4.243L12 4.343z"},null,-1)];var At={name:"zondicons-cheveron-left",render:function(e,t){return d(),y("svg",xt,wt)}};const kt={reports:ye()};function jt(){return kt}const St={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},Gt=[k("path",{fill:"currentColor",d:"M20 19V7H4v12h16m0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16m-7 14v-2h5v2h-5m-3.42-4L5.57 9H8.4l3.3 3.3c.39.39.39 1.03 0 1.42L8.42 17H5.59l3.99-4Z"},null,-1)];var Mt={name:"mdi-console",render:function(e,t){return d(),y("svg",St,Gt)}};const Ct={viewBox:"0 0 20 20",width:"1.2em",height:"1.2em"},$t=[k("path",{fill:"currentColor",d:"M6 6V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-4v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h4zm2 0h4a2 2 0 0 1 2 2v4h4V2H8v4zM2 8v10h10V8H2z"},null,-1)];var Et={name:"zondicons-copy",render:function(e,t){return d(),y("svg",Ct,$t)}};const Ht={viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},It=[k("path",{fill:"currentColor",d:"M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"},null,-1)];var Rt={name:"mdi-github",render:function(e,t){return d(),y("svg",Ht,It)}};const Lt={class:"flex"};var Pt=u({__name:"AGErrorReportModalButtons",props:{report:ke()},setup(e){const t=e,r=l((()=>t.report.description?`${t.report.title}: ${t.report.description}`:t.report.title)),s=l((()=>{if(!Be.sourceUrl)return!1;const e=encodeURIComponent(r.value),s=encodeURIComponent(["[Please, explain here what you were trying to do when this error appeared]","","Error details:","```",Y(t.report.details??"Details missing from report",1800-e.length-Be.sourceUrl.length).trim(),"```"].join("\n"));return`${Be.sourceUrl}/issues/new?title=${e}&body=${s}`})),o=l((()=>F([{id:"clipboard",description:"Copy to clipboard",iconComponent:Et,async handler(){await navigator.clipboard.writeText(`${r.value}\n\n${t.report.details}`),Ve.showSnackbar(Ue("errors.copiedToClipboard","Debug information copied to clipboard"))}},{id:"console",description:"Log to console",iconComponent:Mt,handler(){window.error=t.report.error,Ve.showSnackbar(Ue("errors.addedToConsole","You can now use the **error** variable in the console"))}}],(e=>{s.value&&e.push({id:"github",description:"Report in GitHub",iconComponent:Rt,url:s.value})}))));return(e,t)=>(d(),y("div",Lt,[(d(!0),y(x,null,C(o.value,((t,r)=>h(e.$slots,"default",$(t,{key:r}),(()=>[w(ht,{color:"clear",url:t.url,title:e.$td(`errors.report_${t.id}`,t.description),"aria-label":e.$td(`errors.report_${t.id}`,t.description),onClick:t.handler},{default:f((()=>[(d(),p(g(t.iconComponent),{class:"h-4 w-4","aria-hidden":"true"}))])),_:2},1032,["url","title","aria-label","onClick"])])))),128))]))}});Pt.__file="src/components/modals/AGErrorReportModalButtons.vue";var Bt=u({__name:"AGErrorReportModalTitle",props:{report:ke(),currentReport:_e(),totalReports:_e()},setup(e){const t=e,r=l((()=>!t.totalReports||t.totalReports<=1?t.report.title:`${t.report.title} (${t.currentReport}/${t.totalReports})`));return(e,t)=>(d(),p(pt,{text:r.value,heading:""},null,8,["text"]))}});Bt.__file="src/components/modals/AGErrorReportModalTitle.vue";const Ot={class:"flex items-center justify-between text-lg font-medium"},Dt={class:"flex items-center"},qt=["textContent"];var Tt=u({__name:"AGErrorReportModal",props:jt(),setup(t){const r=t,s=e(0),o=l((()=>r.reports[s.value]));return(e,t)=>(d(),p(ct,null,{default:f((()=>[k("div",null,[k("h2",Ot,[k("div",Dt,[w(Bt,{report:o.value,"current-report":s.value+1,"total-reports":e.reports.length},null,8,["report","current-report","total-reports"]),e.reports.length>1?(d(),y(x,{key:0},[w(ht,{color:"clear",disabled:0===s.value,title:e.$td("errors.previousReport","Show previous report"),"aria-label":e.$td("errors.previousReport","Show previous report"),onClick:t[0]||(t[0]=e=>s.value--)},{default:f((()=>[w(m(At),{"aria-hidden":"true",class:"h-4 w-4"})])),_:1},8,["disabled","title","aria-label"]),w(ht,{color:"clear",disabled:s.value===e.reports.length-1,title:e.$td("errors.nextReport","Show next report"),"aria-label":e.$td("errors.nextReport","Show next report"),onClick:t[1]||(t[1]=e=>s.value++)},{default:f((()=>[w(m(yt),{"aria-hidden":"true",class:"h-4 w-4"})])),_:1},8,["disabled","title","aria-label"])],64)):A("v-if",!0)]),w(Pt,{report:o.value},null,8,["report"])]),o.value.description?(d(),p(pt,{key:0,text:o.value.description,class:"mt-2"},null,8,["text"])):A("v-if",!0)]),k("pre",{class:"h-full overflow-auto bg-gray-200 p-4 text-xs text-red-900",textContent:M(o.value.details??e.$td("errors.detailsEmpty","This error is missing a stacktrace."))},null,8,qt)])),_:1}))}});Tt.__file="src/components/modals/AGErrorReportModal.vue";var zt=u({__name:"AGLoadingModal",props:{message:Se()},setup(e){const t=e,r=l((()=>t.message??Ue("ui.loading","Loading...")));return(e,t)=>(d(),p(ct,{cancellable:!1},{default:f((()=>[w(pt,{text:r.value},null,8,["text"])])),_:1}))}});zt.__file="src/components/modals/AGLoadingModal.vue";var Vt=u({__name:"AGHeadlessInput",props:{as:Se("div"),name:Se(),modelValue:ge([String,Number,Boolean])},emits:["update:modelValue"],setup(e,{expose:r,emit:s}){const o=e,n=l((()=>a&&o.name?a.errors[o.name]??null:null)),a=t("form",null),i={id:`input-${N()}`,value:l((()=>a&&o.name?a.getFieldValue(o.name):o.modelValue)),errors:E(n),update(e){a&&o.name?a.setFieldValue(o.name,e):s("update:modelValue",e)}};return v("input",i),r(i),(t,r)=>e.as?(d(),p(g(e.as),{key:0},{default:f((()=>[h(t.$slots,"default")])),_:3})):h(t.$slots,"default",{key:1})}});Vt.__file="src/components/headless/forms/AGHeadlessInput.vue";const Ft=["id"];var Nt=u({__name:"AGHeadlessInputError",setup(e){const t=he("input","<AGHeadlessInputError> must be a child of a <AGHeadlessInput>"),r=l((()=>t.errors?Ue(`errors.${t.errors[0]}`,`Error: ${t.errors[0]}`):null));return(e,s)=>r.value?(d(),y("p",{key:0,id:`${m(t).id}-error`},M(r.value),9,Ft)):A("v-if",!0)}});Nt.__file="src/components/headless/forms/AGHeadlessInputError.vue";const Ut=["id","type","value","aria-invalid","aria-describedby","checked"];var Kt=u({__name:"AGHeadlessInputInput",props:{type:Se("text")},setup(t){const r=t,s=e(),o=he("input","<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>"),n=l((()=>o.value)),a=l((()=>{if("checkbox"===r.type)return!!n.value}));function i(){s.value&&o.update("checkbox"===r.type?s.value.checked:s.value.value)}return(e,r)=>(d(),y("input",{id:m(o).id,ref_key:"$input",ref:s,type:t.type,value:n.value,"aria-invalid":m(o).errors?"true":"false","aria-describedby":m(o).errors?`${m(o).id}-error`:void 0,checked:a.value,onInput:i},null,40,Ut))}});Kt.__file="src/components/headless/forms/AGHeadlessInputInput.vue";const Qt=["for"];var Wt=u({__name:"AGHeadlessInputLabel",setup(e){const t=he("input","<AGHeadlessInputLabel> must be a child of a <AGHeadlessInput>");return(e,r)=>(d(),y("label",{for:m(t).id},[h(e.$slots,"default")],8,Qt))}});Wt.__file="src/components/headless/forms/AGHeadlessInputLabel.vue";var Zt=u({__name:"AGHeadlessModalTitle",props:{as:Se("h2")},setup:e=>(t,r)=>(d(),p(m(ne),{as:e.as},{default:f((()=>[h(t.$slots,"default")])),_:3},8,["as"]))});Zt.__file="src/components/headless/modals/AGHeadlessModalTitle.vue";const Yt={class:"pointer-events-auto"};var Jt=u({__name:"AGHeadlessSnackbar",setup:e=>(e,t)=>(d(),y("div",Yt,[h(e.$slots,"default")]))});Jt.__file="src/components/headless/snackbars/AGHeadlessSnackbar.vue";const Xt=W(Qe,["Primary","Clear"]),er={id:je(),message:je(),actions:ue((()=>[])),color:me(Xt,Qe.Secondary)};function tr(){return er}var rr=u({__name:"AGSnackbar",props:tr(),setup(e){const t=e,r=l((()=>t.color===Qe.Danger?"bg-red-200 text-red-900":"bg-gray-900 text-white"));return(e,s)=>(d(),p(Jt,{class:S(["flex flex-row items-center justify-center gap-3 p-4",r.value])},{default:f((()=>[w(pt,{text:e.message,raw:""},null,8,["text"]),(d(!0),y(x,null,C(e.actions,((r,s)=>(d(),p(ht,{key:s,color:e.color,onClick:e=>function(e){e.handler?.(),e.dismiss&&Ve.hideSnackbar(t.id)}(r)},{default:f((()=>[G(M(r.text),1)])),_:2},1032,["color","onClick"])))),128))])),_:1},8,["class"]))}});rr.__file="src/components/snackbars/AGSnackbar.vue";const sr={$ui:Ve};var or={async install(e,t){const r={[ze.AlertModal]:mt,[ze.ConfirmModal]:gt,[ze.ErrorReportModal]:Tt,[ze.LoadingModal]:zt,[ze.Snackbar]:rr};Object.entries({...r,...t.components}).forEach((e=>{let[t,r]=e;return Ve.registerComponent(t,r)})),await De(e,sr)}};async function nr(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const r=[Me,Je,et,qe,or,...t.plugins??[]],s=H(e);await Promise.all(r.map((e=>e.install(s,t)))??[]),s.mount("#app"),Re.emit("application-mounted")}const ar={key:0};var lr=u({__name:"AGAppModals",setup(e){const t=l((()=>Ve.modals[0]??null));return(e,r)=>t.value?(d(),y("aside",ar,[w(nt,{"child-index":1,modal:t.value},null,8,["modal"])])):A("v-if",!0)}});lr.__file="src/components/AGAppModals.vue";const ir={"aria-live":"assertive",class:"z-60 pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:p-6"},ur={class:"flex w-full flex-col items-center space-y-4 sm:items-end"};const cr={render:function(e,t){return d(),y("div",ir,[k("div",ur,[(d(!0),y(x,null,C(e.$ui.snackbars,(e=>(d(),p(g(e.component),$({id:e.id,key:e.id},e.properties),null,16,["id"])))),128))])])},__file:"src/components/AGAppSnackbars.vue"};var dr=cr,pr=u({__name:"AGAppOverlays",setup(t){const r=e(null),s=e(!0);return tt("show-overlays-backdrop",(async()=>{r.value&&s.value&&(s.value=!1,r.value.classList.remove("opacity-0"))})),tt("hide-overlays-backdrop",(async()=>{r.value&&!s.value&&(s.value=!0,r.value.classList.add("opacity-0"))})),(e,t)=>(d(),y(x,null,[k("div",{ref_key:"$backdrop",ref:r,class:"pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0"},null,512),w(lr),w(dr)],64))}});pr.__file="src/components/AGAppOverlays.vue";const mr={class:"flex h-full flex-col text-base font-normal leading-tight text-gray-900 antialiased"};var fr=u({__name:"AGAppLayout",setup:e=>(e,t)=>(d(),y("div",mr,[h(e.$slots,"default"),w(pr)]))});fr.__file="src/components/AGAppLayout.vue";const hr={class:"ml-2"};var vr=u({inheritAttrs:!1,__name:"AGCheckbox",props:{name:Se()},setup(e){const t=de();return(r,s)=>(d(),p(Vt,{ref_key:"$input",ref:t,name:e.name,class:"flex"},{default:f((()=>[w(Kt,$(r.$attrs,{type:"checkbox",class:{"text-indigo-600 focus:ring-indigo-600":!m(t)?.errors,"border-red-200 text-red-600 focus:ring-red-600":m(t)?.errors}}),null,16,["class"]),k("div",hr,[r.$slots.default?(d(),p(Wt,{key:0},{default:f((()=>[h(r.$slots,"default")])),_:3})):A("v-if",!0),w(Nt,{class:"text-sm text-red-600"})])])),_:3},8,["name"]))}});vr.__file="src/components/forms/AGCheckbox.vue";const gr=["onSubmit"];var _r=u({__name:"AGForm",props:{form:be()},emits:["submit"],setup(e,{emit:t}){const r=e;function s(){r.form&&!r.form.submit()||t("submit")}return v("form",r.form),(e,t)=>(d(),y("form",{onSubmit:I(s,["prevent"])},[h(e.$slots,"default")],40,gr))}});_r.__file="src/components/forms/AGForm.vue";const br={class:"absolute bottom-0 left-0 translate-y-full"};var yr=u({inheritAttrs:!1,__name:"AGInput",props:{name:Se()},setup(e){const t=de(),[r,s]=rt();return(o,n)=>(d(),p(Vt,{ref_key:"$input",ref:t,class:S(["relative flex flex-col items-center",m(s)]),name:e.name},{default:f((()=>[w(Kt,$(m(r),{class:["block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600",{"ring-1 ring-red-500":m(t)?.errors}]}),null,16,["class"]),k("div",br,[w(Nt,{class:"mt-1 text-sm text-red-500"})])])),_:1},8,["class","name"]))}});yr.__file="src/components/forms/AGInput.vue";const xr={String:"string",Number:"number",Boolean:"boolean"};class wr extends P{constructor(t){super(),J(this,"errors",void 0),J(this,"_fields",void 0),J(this,"_data",void 0),J(this,"_valid",void 0),J(this,"_submitted",void 0),J(this,"_errors",void 0),this._fields=t,this._submitted=e(!1),this._data=this.getInitialData(t),this._errors=this.getInitialErrors(t),this._valid=l((()=>!Object.values(this._errors).some((e=>null!==e)))),this.errors=E(this._errors)}get valid(){return this._valid.value}get submitted(){return this._submitted.value}setFieldValue(e,t){this._data[e]=t,this._submitted.value&&this.validate()}getFieldValue(e){return this._data[e]}validate(){const e=Object.entries(this._fields).reduce(((e,t)=>{let[r,s]=t;return e[r]=this.getFieldErrors(r,s),e}),{});return this.resetErrors(e),this.valid}reset(){this._submitted.value=!1,this.resetData(),this.resetErrors()}submit(){return this._submitted.value=!0,this.validate()}__get(e){return e in this._fields?this._data[e]:super.__get(e)}__set(e,t){e in this._fields?Object.assign(this._data,{[e]:t}):super.__set(e,t)}getFieldErrors(e,t){const r=[];return t.rules?.includes("required")&&!this._data[e]&&r.push("required"),r.length>0?r:null}getInitialData(e){if(this.static().isConjuring())return{};const t=Object.entries(e).reduce(((e,t)=>{let[r,s]=t;return e[r]=s.default??null,e}),{});return r(t)}getInitialErrors(e){if(this.static().isConjuring())return{};const t=Object.keys(e).reduce(((e,t)=>(e[t]=null,e)),{});return r(t)}resetData(){for(const[e,t]of Object.entries(this._fields))this._data[e]=t.default??null}resetErrors(e){Object.keys(this._errors).forEach((e=>delete this._errors[e])),e&&Object.assign(this._errors,e)}}function Ar(e){return new wr(e)}function kr(e){return{default:e,type:xr.Boolean}}function jr(e){return{default:e,type:xr.Boolean,rules:"required"}}function Sr(e){return{default:e,type:xr.Number,rules:"required"}}function Gr(e){return{default:e,type:xr.String,rules:"required"}}function Mr(e){return{default:e,type:xr.Number}}function Cr(e){return{default:e,type:xr.String}}export{mt as AGAlertModal,fr as AGAppLayout,pr as AGAppOverlays,ht as AGButton,vr as AGCheckbox,gt as AGConfirmModal,Pt as AGErrorReportModalButtons,Bt as AGErrorReportModalTitle,_r as AGForm,ft as AGHeadlessButton,Vt as AGHeadlessInput,Nt as AGHeadlessInputError,Kt as AGHeadlessInputInput,Wt as AGHeadlessInputLabel,ot as AGHeadlessModal,lt as AGHeadlessModalPanel,Zt as AGHeadlessModalTitle,Jt as AGHeadlessSnackbar,yr as AGInput,zt as AGLoadingModal,pt as AGMarkdown,ct as AGModal,nt as AGModalContext,rr as AGSnackbar,Be as App,Pe as AppService,Qe as Colors,We as Errors,Re as Events,Ie as EventsService,xr as FormFieldTypes,Fe as Lang,He as Service,Xt as SnackbarColors,Ve as UI,ze as UIComponents,ue as arrayProp,kr as booleanInput,ce as booleanProp,De as bootServices,nr as bootstrapApplication,de as componentRef,pe as defineDirective,ie as definePlugin,Ee as defineServiceState,me as enumProp,kt as errorReportModalProps,ve as injectOrFail,fe as injectReactive,he as injectReactiveOrFail,ge as mixedProp,Mr as numberInput,_e as numberProp,be as objectProp,st as onCleanMounted,ye as requiredArrayProp,jr as requiredBooleanInput,xe as requiredEnumProp,we as requiredMixedProp,Sr as requiredNumberInput,Ae as requiredNumberProp,ke as requiredObjectProp,Gr as requiredStringInput,je as requiredStringProp,er as snackbarProps,Cr as stringInput,Se as stringProp,Ne as translate,Ue as translateWithDefault,jt as useErrorReportModalProps,tt as useEvent,Ar as useForm,rt as useInputAttrs,tr as useSnackbarProps};
 //# sourceMappingURL=aerogel-core.esm.js.map

package/dist/aerogel-core.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"aerogel-core.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"aerogel-core.esm.js","sources":["../src/components/AGAppSnackbars.vue?vue&type=template&id=7942f27a&lang.js"],"sourcesContent":["<template>\n    <div aria-live=\"assertive\" class=\"z-60 pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:p-6\">\n        <div class=\"flex w-full flex-col items-center space-y-4 sm:items-end\">\n            <component\n                :is=\"snackbar.component\"\n                v-for=\"snackbar of $ui.snackbars\"\n                :id=\"snackbar.id\"\n                :key=\"snackbar.id\"\n                v-bind=\"snackbar.properties\"\n            />\n        </div>\n    </div>\n</template>\n"],"names":["class","_hoisted_2","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_Fragment","_renderList","_ctx","$ui","snackbars","snackbar","_createBlock","_resolveDynamicComponent","component","_mergeProps","id","key","properties"],"mappings":"i52BACS,YAAU,YAAYA,MAAM,0EACxBC,GAAA,CAAAD,MAAM,2FADf,OAAAE,IAAAC,EAUK,MAVLC,GAUK,CATDC,EAQK,MARLJ,GAQK,EAPDC,GAAA,GAAAC,EAMCG,EAJsB,KAAAC,EAAAC,EAAAC,IAAIC,WAAhBC,IAFXT,IAAAU,EAMCC,EALQF,EAASG,WADlBC,EAMC,CAHIC,GAAIL,EAASK,GACbC,IAAKN,EAASK,IACPL,EAASO,YAAU,KAAA,GAAA,CAAA"}

package/dist/virtual.d.ts

@@ -0,0 +1,11 @@
+declare module 'virtual:aerogel' {
+    interface AerogelBuild {
+        environment: 'production' | 'development' | 'testing';
+        basePath?: string;
+        sourceUrl?: string;
+    }
+
+    const build: AerogelBuild;
+
+    export default build;
+}

package/noeldemartin.config.js

@@ -1,2 +1,5 @@
 /** @type {import('@noeldemartin/scripts').Config} */
-module.exports = { vue: true };
+module.exports = {
+    vue: true,
+    icons: true,
+};

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/core",
     "description": "The Lightest Solid",
-    "version": "0.0.0-next.c8f032a868370824898e171969aec1bb6827688e",
+    "version": "0.0.0-next.f16bd1d894543c5303039c49f6f33488a1ffe931",
     "main": "dist/aerogel-core.cjs.js",
     "module": "dist/aerogel-core.esm.js",
     "types": "dist/aerogel-core.d.ts",
@@ -9,7 +9,7 @@
     "scripts": {
         "build": "rm dist -rf && npm run build:js && npm run build:types",
         "build:js": "noeldemartin-build-javascript",
-        "build:types": "noeldemartin-build-types",
+        "build:types": "noeldemartin-build-types && cp src/types/virtual.d.ts dist",
         "lint": "noeldemartin-lint src",
         "publish-next": "noeldemartin-publish-next",
         "test": "vitest --run"
@@ -36,6 +36,7 @@
         "@noeldemartin/utils": "0.4.0-next.ac00beaecf32bb02ed8e335225d7948d946d73bd",
         "dompurify": "^3.0.3",
         "marked": "^5.0.4",
+        "pinia": "^2.1.6",
         "vue": "^3.3.0"
     },
     "devDependencies": {

package/src/bootstrap/index.ts

@@ -2,16 +2,19 @@ import { createApp } from 'vue';
 import type { Component } from 'vue';
 
 import directives from '@/directives';
+import errors from '@/errors';
+import Events from '@/services/Events';
 import lang from '@/lang';
 import services from '@/services';
 import ui from '@/ui';
 import type { AerogelOptions } from '@/bootstrap/options';
 
 export async function bootstrapApplication(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
-    const plugins = [directives, lang, services, ui, ...(options.plugins ?? [])];
+    const plugins = [directives, errors, lang, services, ui, ...(options.plugins ?? [])];
     const app = createApp(rootComponent);
 
     await Promise.all(plugins.map((plugin) => plugin.install(app, options)) ?? []);
 
     app.mount('#app');
+    Events.emit('application-mounted');
 }

package/src/components/AGAppModals.vue

@@ -0,0 +1,15 @@
+<template>
+    <aside v-if="modal">
+        <AGModalContext :child-index="1" :modal="modal" />
+    </aside>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import UI from '@/ui/UI';
+
+import AGModalContext from './modals/AGModalContext.vue';
+
+const modal = computed(() => UI.modals[0] ?? null);
+</script>

package/src/components/AGAppOverlays.vue

@@ -1,21 +1,19 @@
 <template>
     <div ref="$backdrop" class="pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0" />
-    <aside v-if="modal">
-        <AGModalContext :child-index="1" :modal="modal" />
-    </aside>
+    <AGAppModals />
+    <AGAppSnackbars />
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
-import UI from '@/ui/UI';
 import { useEvent } from '@/utils/composition/events';
 
-import AGModalContext from './modals/AGModalContext.vue';
+import AGAppModals from './AGAppModals.vue';
+import AGAppSnackbars from './AGAppSnackbars.vue';
 
 const $backdrop = ref<HTMLElement | null>(null);
 const backdropHidden = ref(true);
-const modal = computed(() => UI.modals[0] ?? null);
 
 useEvent('show-overlays-backdrop', async () => {
     if (!$backdrop.value || !backdropHidden.value) {

package/src/components/AGAppSnackbars.vue

@@ -0,0 +1,13 @@
+<template>
+    <div aria-live="assertive" class="z-60 pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:p-6">
+        <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
+            <component
+                :is="snackbar.component"
+                v-for="snackbar of $ui.snackbars"
+                :id="snackbar.id"
+                :key="snackbar.id"
+                v-bind="snackbar.properties"
+            />
+        </div>
+    </div>
+</template>

package/src/components/basic/AGMarkdown.vue

@@ -11,10 +11,11 @@ import { translate } from '@/lang';
 
 const props = defineProps({
     as: stringProp('div'),
-    langKey: stringProp(),
-    text: stringProp(),
+    heading: booleanProp(),
     inline: booleanProp(),
+    langKey: stringProp(),
     raw: booleanProp(),
+    text: stringProp(),
 });
 
 const markdown = computed(() => props.text ?? (props.langKey && translate(props.langKey)));
@@ -23,13 +24,17 @@ const html = computed(() => {
         return null;
     }
 
-    let html = renderMarkdown(markdown.value);
+    let renderedHtml = renderMarkdown(markdown.value);
+
+    if (props.heading) {
+        renderedHtml = renderedHtml.replace('<p>', '<span>').replace('</p>', '</span>');
+    }
 
     if (props.inline) {
-        html = html.replace('<p>', '<span>').replace('</p>', '</span>');
+        renderedHtml = renderedHtml.replace('<p>', '<span>').replace('</p>', '</span>');
     }
 
-    return html;
+    return renderedHtml;
 });
 const root = () => h(props.as, { class: props.raw ? '' : 'prose', innerHTML: html.value });
 </script>

package/src/components/constants.ts

@@ -0,0 +1,8 @@
+export const Colors = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Danger: 'danger',
+    Clear: 'clear',
+} as const;
+
+export type Color = (typeof Colors)[keyof typeof Colors];

package/src/components/forms/AGButton.vue

@@ -1,21 +1,44 @@
 <template>
-    <AGHeadlessButton
-        class="px-2.5 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-        :class="{
-            'bg-indigo-600 hover:bg-indigo-500 focus-visible:outline-indigo-600': !secondary,
-            'bg-gray-600 hover:bg-gray-500 focus-visible:outline-gray-600': secondary,
-        }"
-    >
+    <AGHeadlessButton class="px-2.5 py-1.5 focus-visible:outline focus-visible:outline-2" :class="colorClasses">
         <slot />
     </AGHeadlessButton>
 </template>
 
 <script setup lang="ts">
-import { booleanProp } from '@/utils';
+import { computed } from 'vue';
+
+import { enumProp } from '@/utils/vue';
+import { Colors } from '@/components/constants';
 
 import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
 
-defineProps({
-    secondary: booleanProp(),
+const props = defineProps({
+    color: enumProp(Colors, Colors.Primary),
+});
+
+const colorClasses = computed(() => {
+    switch (props.color) {
+        case Colors.Secondary:
+            return [
+                'text-white bg-gray-600',
+                'hover:bg-gray-500',
+                'focus-visible:outline-offset-2 focus-visible:outline-gray-600',
+            ].join(' ');
+        case Colors.Clear:
+            return 'hover:bg-gray-500/20 focus-visible:outline-gray-500/60';
+        case Colors.Danger:
+            return [
+                'text-white bg-red-600',
+                'hover:bg-red-500',
+                'focus-visible:outline-offset-2 focus-visible:outline-red-600',
+            ].join(' ');
+        case Colors.Primary:
+        default:
+            return [
+                'text-white bg-indigo-600',
+                'hover:bg-indigo-500',
+                'focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
+            ].join(' ');
+    }
 });
 </script>

package/src/components/forms/AGCheckbox.vue

@@ -0,0 +1,35 @@
+<template>
+    <AGHeadlessInput ref="$input" :name="name" class="flex">
+        <AGHeadlessInputInput
+            v-bind="$attrs"
+            type="checkbox"
+            :class="{
+                'text-indigo-600 focus:ring-indigo-600': !$input?.errors,
+                'border-red-200 text-red-600 focus:ring-red-600': $input?.errors,
+            }"
+        />
+
+        <div class="ml-2">
+            <AGHeadlessInputLabel v-if="$slots.default">
+                <slot />
+            </AGHeadlessInputLabel>
+            <AGHeadlessInputError class="text-sm text-red-600" />
+        </div>
+    </AGHeadlessInput>
+</template>
+
+<script setup lang="ts">
+import { componentRef, stringProp } from '@/utils/vue';
+
+import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
+
+import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
+import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
+import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
+import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
+
+defineProps({ name: stringProp() });
+defineOptions({ inheritAttrs: false });
+
+const $input = componentRef<IAGHeadlessInput>();
+</script>

package/src/components/forms/AGInput.vue

@@ -1,24 +1,27 @@
 <template>
     <AGHeadlessInput
         ref="$input"
-        as="div"
-        class="flex flex-col items-center"
+        class="relative flex flex-col items-center"
+        :class="className"
         :name="name"
     >
         <AGHeadlessInputInput
-            v-bind="$attrs"
+            v-bind="attrs"
             class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600"
             :class="{
                 'ring-1 ring-red-500': $input?.errors,
             }"
         />
-        <AGHeadlessInputError class="mt-1 text-sm text-red-500" />
+        <div class="absolute bottom-0 left-0 translate-y-full">
+            <AGHeadlessInputError class="mt-1 text-sm text-red-500" />
+        </div>
     </AGHeadlessInput>
 </template>
 
 <script setup lang="ts">
 import { componentRef, stringProp } from '@/utils/vue';
 
+import { useInputAttrs } from '@/utils';
 import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
 
 import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
@@ -29,4 +32,5 @@ defineProps({ name: stringProp() });
 defineOptions({ inheritAttrs: false });
 
 const $input = componentRef<IAGHeadlessInput>();
+const [attrs, className] = useInputAttrs();
 </script>

package/src/components/forms/index.ts

@@ -1,5 +1,6 @@
 import AGButton from './AGButton.vue';
+import AGCheckbox from './AGCheckbox.vue';
 import AGForm from './AGForm.vue';
 import AGInput from './AGInput.vue';
 
-export { AGButton, AGForm, AGInput };
+export { AGButton, AGCheckbox, AGForm, AGInput };

package/src/components/headless/forms/AGHeadlessButton.vue

@@ -7,15 +7,14 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { objectWithoutEmpty } from '@noeldemartin/utils';
-import type { LocationQuery, RouteLocation, RouteParams } from 'vue-router';
 
 import { booleanProp, objectProp, stringProp } from '@/utils/vue';
 
 const { url, route, routeParams, routeQuery, submit } = defineProps({
     url: stringProp(),
     route: stringProp(),
-    routeParams: objectProp<RouteParams>(() => ({})),
-    routeQuery: objectProp<LocationQuery>(() => ({})),
+    routeParams: objectProp(() => ({})),
+    routeQuery: objectProp(() => ({})),
     submit: booleanProp(),
 });
 
@@ -24,7 +23,7 @@ const component = computed(() => {
         return {
             tag: 'router-link',
             props: {
-                to: objectWithoutEmpty<Partial<RouteLocation>>({
+                to: objectWithoutEmpty({
                     name: route,
                     params: routeParams,
                     query: routeQuery,

package/src/components/headless/forms/AGHeadlessInput.ts

@@ -2,7 +2,7 @@ import type { ComputedRef, DeepReadonly, Ref } from 'vue';
 
 export interface IAGHeadlessInput {
     id: string;
-    value: ComputedRef<string | number | null>;
+    value: ComputedRef<string | number | boolean | null>;
     errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: string | number | null): void;
+    update(value: string | number | boolean | null): void;
 }

package/src/components/headless/forms/AGHeadlessInput.vue

@@ -9,16 +9,16 @@
 import { computed, inject, provide, readonly } from 'vue';
 import { uuid } from '@noeldemartin/utils';
 
-import { stringProp } from '@/utils/vue';
+import { mixedProp, stringProp } from '@/utils/vue';
 import type Form from '@/forms/Form';
 
 import type { IAGHeadlessInput } from './AGHeadlessInput';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
-    as: stringProp(),
+    as: stringProp('div'),
     name: stringProp(),
-    modelValue: stringProp(),
+    modelValue: mixedProp<string | number | boolean>([String, Number, Boolean]),
 });
 const errors = computed(() => {
     if (!form || !props.name) {

package/src/components/headless/forms/AGHeadlessInputError.vue

@@ -8,7 +8,7 @@
 import { computed } from 'vue';
 
 import { injectReactiveOrFail } from '@/utils/vue';
-import { translateWithDefault } from '@/lang';
+import { translateWithDefault } from '@/lang/utils';
 
 import type { IAGHeadlessInput } from './AGHeadlessInput';
 

package/src/components/headless/forms/AGHeadlessInputInput.vue

@@ -2,10 +2,11 @@
     <input
         :id="input.id"
         ref="$input"
-        type="text"
+        :type="type"
         :value="value"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="input.errors ? `${input.id}-error` : undefined"
+        :checked="checked"
         @input="update"
     >
 </template>
@@ -13,21 +14,32 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils';
+import { injectReactiveOrFail, stringProp } from '@/utils';
 import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
 
+const props = defineProps({
+    type: stringProp('text'),
+});
+
 const $input = ref<HTMLInputElement>();
 const input = injectReactiveOrFail<IAGHeadlessInput>(
     'input',
     '<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>',
 );
 const value = computed(() => input.value);
+const checked = computed(() => {
+    if (props.type !== 'checkbox') {
+        return;
+    }
+
+    return !!value.value;
+});
 
 function update() {
     if (!$input.value) {
         return;
     }
 
-    input.update($input.value.value);
+    input.update(props.type === 'checkbox' ? $input.value.checked : $input.value.value);
 }
 </script>

package/src/components/headless/index.ts

@@ -1,2 +1,3 @@
 export * from './forms';
 export * from './modals';
+export * from './snackbars';

package/src/components/headless/modals/AGHeadlessModalPanel.vue

@@ -1,7 +1,11 @@
 <template>
     <DialogPanel>
         <slot />
-        <AGModalContext v-if="childModal" :child-index="modal.childIndex + 1" :modal="childModal" />
+
+        <template v-if="childModal">
+            <div class="pointer-events-none fixed inset-0 z-50 bg-black/30" />
+            <AGModalContext :child-index="modal.childIndex + 1" :modal="childModal" />
+        </template>
     </DialogPanel>
 </template>
 

package/src/components/headless/snackbars/AGHeadlessSnackbar.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="pointer-events-auto">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Stub import to fix build (otherwise, this file doesn't seem to be treated as a module).
+import 'virtual:aerogel';
+</script>