@aerogel/core 0.0.0-next.7f6ed5a1f91688a86bf5ede2adc465e4fd6cfdea → 0.0.0-next.926bde19326fe7b6b24b277666936862b64d8295

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,markRaw as a,nextTick as r,onUnmounted as o,defineComponent as n,toRef as l,openBlock as i,createBlock as u,unref as d,withCtx as c,renderSlot as m,provide as p,resolveDynamicComponent as f,normalizeProps as h,guardReactiveProps as v,computed as _,createCommentVNode as g,createElementVNode as y,createVNode as b,h as A,createApp as x,createElementBlock as w,Fragment as j,withModifiers as G,readonly as k,toDisplayString as M,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 I,JSError as S,MagicObject as C,PromisedValue as H,facade as O,arr as P,tap as E,stringMatch as q,uuid as B,objectWithoutEmpty as F}from"@noeldemartin/utils";import"core-js/modules/esnext.async-iterator.reduce.js";import"core-js/modules/esnext.iterator.reduce.js";import{useI18n as L,createI18n as V}from"vue-i18n";import T from"@babel/runtime/helpers/esm/defineProperty";import{setEngine as N,IndexedDBEngine as D,bootModelsFromViteGlob as z}from"soukai";import{createRouter as K,createWebHistory as Q}from"vue-router";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 R,DialogPanel as U,DialogTitle as J}from"@headlessui/vue";import W from"dompurify";import{marked as X}from"marked";import"core-js/modules/esnext.async-iterator.some.js";import"core-js/modules/esnext.iterator.some.js";const Y=[];function Z(e){return{type:Array,default:e??(()=>[])}}function ee(){return{type:Boolean,default:arguments.length>0&&void 0!==arguments[0]&&arguments[0]}}function te(){return e()}function se(e){return e}function ae(e,t){const s=Object.values(e);return{type:String,default:t??s[0]??null,validator:e=>s.includes(e)}}function re(e){const a=t(e);return a?s(a):void 0}function oe(e,t){return re(e)??I(t??`Could not resolve '${e}' injection key`)}function ne(e,s){return t(e)??I(s??`Could not resolve '${e}' injection key`)}function le(e){return{type:e,default:null}}function ie(){return{type:Number,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}function ue(){return{type:Object,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}function de(){return{type:Array,required:!0}}function ce(e){const t=Object.values(e);return{type:String,required:!0,validator:e=>t.includes(e)}}function me(e){return{type:e,required:!0}}function pe(){return{type:Number,required:!0}}function fe(){return{type:Object,required:!0}}function he(){return{type:String,required:!0}}function ve(){return{type:String,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}const _e={"initial-focus":{mounted(e,t){let{value:s}=t;!1!==s&&e.focus()}}};var ge=async e=>{Object.entries(_e).forEach((t=>{let[s,a]=t;return e.directive(s,a)}))};class ServiceBootError extends S{constructor(e,t){super(`Service '${e}' failed booting`,{cause:t})}}function ye(e){return class extends be{getInitialState(){return e.initialState}}}class be extends C{constructor(){super(),T(this,"_namespace",void 0),T(this,"_booted",void 0),T(this,"_state",void 0),this._namespace=new.target.name,this._booted=new H,this._state=s(this.getInitialState())}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):super.__get(e)}__set(e,t){this.setState({[e]:t})}hasState(e){return e in this._state}getState(e){return e?this._state[e]:this._state}setState(e){Object.assign(this._state,e)}getInitialState(){return{}}async boot(){}}class Ae extends be{constructor(){super(...arguments),T(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]??=P([])).push(t),()=>this.off(e,t)}once(e,t){let s=null;return E((()=>s&&this.off(e,s)),(a=>{(this.listeners[e]??=P([])).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 xe=O(new Ae);const we={$events:xe};async function je(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 Ge=e=>je(e,we);var ke=O(new class extends be{constructor(){super(...arguments),T(this,"i18n",void 0)}setup(){this.i18n=L()}translate(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.i18n?.t(e,t)??e}});function Me(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return ke.translate(e,t)}const $e={$lang:ke};async function Ie(e){const t=e.defaultLocale??"en",s=e.fallbackLocale??"en",a=function(e){return Object.entries(e).reduce(((e,t)=>{let[s,a]=t;const r=q(s,/.*\/lang\/(.+)\.yaml/)?.[1];return r&&(e[r]=()=>a().then((e=>{let{default:t}=e;return t}))),e}),{})}(e.messages),r=a[t]??I(`Missing messages for '${t}' locale`),o={[t]:await r()};return V({locale:t,fallbackLocale:s,messages:o})}var Se=async(e,t)=>{const s=function(e){return e.lang?e.lang:e.langMessages?{messages:e.langMessages}:null}(t);if(!s)return;var a;a=()=>ke.setup(),Y.push(a);const r=await Ie(s);e.use(r),await je(e,$e)},Ce=async(e,t)=>{t.models&&(N(new D),z(t.models))};var He=async(e,t)=>{if(!t.routes)return;const s=function(e){return K({history:Q(e.basePath),routes:e.routes})}({routes:t.routes,basePath:t.basePath??__AG_BASE_PATH});e.use(s)},Oe=ye({initialState:{modals:[]}});const Pe={AlertModal:"alert-modal"};var Ee=O(new class extends Oe{constructor(){super(...arguments),T(this,"modalCallbacks",{}),T(this,"components",{})}alert(e){this.openModal(this.requireComponent(Pe.AlertModal),{message:e})}registerComponent(e,t){this.components[e]=t}async openModal(e,t){const s=B(),o={},n={id:s,properties:t??{},component:a(e),beforeClose:new Promise((e=>o.willClose=e)),afterClose:new Promise((e=>o.closed=e))},l=this.modals.at(-1),i=this.modals.concat(n);return this.modalCallbacks[n.id]=o,this.setState({modals:i}),await r(),await(l&&xe.emit("hide-modal",{id:l.id})),await Promise.all([l||xe.emit("show-overlays-backdrop"),xe.emit("show-modal",{id:n.id})]),n}async closeModal(e,t){await xe.emit("close-modal",{id:e,result:t})}async boot(){await super.boot(),this.watchModalEvents()}requireComponent(e){return this.components[e]??I(`UI Component '${e}' is not defined!`)}watchModalEvents(){xe.on("modal-will-close",(e=>{let{modal:t,result:s}=e;this.modalCallbacks[t.id]?.willClose?.(s),1===this.modals.length&&xe.emit("hide-overlays-backdrop")})),xe.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&&xe.emit("show-modal",{id:a.id}))}))}});function qe(e,t){const s=xe.on(e,t);o((()=>s()))}var Be=n({__name:"AGHeadlessModal",props:{cancellable:ee(!0)},setup(t,{expose:s}){const a=t,r=e(null),o=e(!0),n=e(!1),{modal:p}=oe("modal");async function f(){r.value?.$el&&(o.value=!0)}async function h(e){n.value||(xe.emit("modal-will-close",{modal:p,result:e}),await f(),n.value=!0,xe.emit("modal-closed",{modal:p,result:e}))}return qe("close-modal",(async({id:e,result:t})=>{e===p.id&&await h(t)})),qe("hide-modal",(async({id:e})=>{e===p.id&&await f()})),qe("show-modal",(async({id:e})=>{e===p.id&&await async function(){r.value?.$el&&(o.value=!1)}()})),s({close:h,cancellable:l(a,"cancellable")}),(e,s)=>(i(),u(d(R),{ref_key:"$root",ref:r,open:!0,onClose:s[0]||(s[0]=e=>t.cancellable&&h())},{default:c((()=>[m(e.$slots,"default",{close:h})])),_:3},512))}});Be.__file="src/components/headless/modals/AGHeadlessModal.vue";var Fe=n({__name:"AGModalContext",props:{modal:fe(),childIndex:pe()},setup(e){const t=e;return p("modal",{modal:l(t,"modal"),childIndex:l(t,"childIndex")}),(t,s)=>(i(),u(f(e.modal.component),h(v(e.modal.properties)),null,16))}});Fe.__file="src/components/modals/AGModalContext.vue";var Le=n({__name:"AGHeadlessModalPanel",setup(e){const t=oe("modal"),s=_((()=>Ee.modals[t.childIndex]??null));return(e,a)=>(i(),u(d(U),null,{default:c((()=>[m(e.$slots,"default"),s.value?(i(),u(Fe,{key:0,"child-index":d(t).childIndex+1,modal:s.value},null,8,["child-index","modal"])):g("v-if",!0)])),_:3}))}});Le.__file="src/components/headless/modals/AGHeadlessModalPanel.vue";const Ve={class:"fixed inset-0 flex items-center justify-center"},Te={class:"flex max-h-full flex-col overflow-auto p-4"};var Ne=n({__name:"AGModal",setup:e=>(e,t)=>(i(),u(Be,{class:"relative z-50"},{default:c((({close:t})=>[y("div",Ve,[b(Le,{class:"flex max-h-full max-w-full flex-col overflow-hidden bg-white"},{default:c((()=>[y("div",Te,[m(e.$slots,"default",{close:t})])])),_:2},1024)])])),_:3}))});function De(e){return t=X(e,{mangle:!1,headerIds:!1}),W.sanitize(t,{ADD_ATTR:["target"]});var t}Ne.__file="src/components/modals/AGModal.vue";var ze=n({__name:"AGMarkdown",props:{langKey:ve(),text:ve()},setup(e){const t=e,s=_((()=>t.text??(t.langKey&&Me(t.langKey)))),a=_((()=>s.value&&De(s.value))),r=()=>A("div",{class:"prose",innerHTML:a.value});return(e,t)=>(i(),u(r))}});ze.__file="src/components/basic/AGMarkdown.vue";var Ke=n({__name:"AGAlertModal",props:{message:he()},setup:e=>(t,s)=>(i(),u(Ne,null,{default:c((()=>[b(ze,{text:e.message},null,8,["text"])])),_:1}))});Ke.__file="src/components/modals/AGAlertModal.vue";const Qe={$ui:Ee};var Re=async(e,t)=>{const s={[Pe.AlertModal]:Ke};Object.entries({...s,...t.components}).forEach((e=>{let[t,s]=e;return Ee.registerComponent(t,s)})),await je(e,Qe)};async function Ue(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const s=[ge,Se,Ce,He,Ge,Re],a=x({data:()=>({ready:!1}),mounted(){Y.forEach((e=>e())),this.ready=!0},render(){return this.ready?A(e):null}});await Promise.all(s.map((e=>e(a,t)))),a.mount("#app")}const Je={key:0};var We=n({__name:"AGAppOverlays",setup(t){const s=e(null),a=e(!0),r=_((()=>Ee.modals[0]??null));return qe("show-overlays-backdrop",(async()=>{s.value&&a.value&&(a.value=!1,s.value.classList.remove("opacity-0"))})),qe("hide-overlays-backdrop",(async()=>{s.value&&!a.value&&(a.value=!0,s.value.classList.add("opacity-0"))})),(e,t)=>(i(),w(j,null,[y("div",{ref_key:"$backdrop",ref:s,class:"pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0"},null,512),r.value?(i(),w("aside",Je,[b(Fe,{"child-index":1,modal:r.value},null,8,["modal"])])):g("v-if",!0)],64))}});We.__file="src/components/AGAppOverlays.vue";const Xe={class:"flex h-full flex-col text-base font-normal leading-tight text-gray-900 antialiased"};var Ye=n({__name:"AGAppLayout",setup:e=>(e,t)=>(i(),w("div",Xe,[m(e.$slots,"default"),b(We)]))});Ye.__file="src/components/AGAppLayout.vue";var Ze=n({__name:"AGHeadlessButton",props:{url:ve(),route:ve(),routeParams:ue((()=>({}))),routeQuery:ue((()=>({}))),submit:ee()},setup(e){const{url:t,route:s,routeParams:a,routeQuery:r,submit:o}=e,n=_((()=>s?{tag:"router-link",props:{to:F({name:s,params:a,query:r})}}:t?{tag:"a",props:{target:"_blank",href:t}}:{tag:"button",props:{type:o?"submit":"button"}}));return(e,t)=>(i(),u(f(n.value.tag),h(v(n.value.props)),{default:c((()=>[m(e.$slots,"default")])),_:3},16))}});Ze.__file="src/components/headless/forms/AGHeadlessButton.vue";var et=n({__name:"AGButton",setup:e=>(e,t)=>(i(),u(Ze,{class:"bg-indigo-600 px-2.5 py-1.5 text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"},{default:c((()=>[m(e.$slots,"default")])),_:3}))});et.__file="src/components/forms/AGButton.vue";const tt=["onSubmit"];var st=n({__name:"AGForm",props:{form:ue()},emits:["submit"],setup(e,{emit:t}){const s=e;function a(){s.form&&!s.form.submit()||t("submit")}return p("form",s.form),(e,t)=>(i(),w("form",{onSubmit:G(a,["prevent"])},[m(e.$slots,"default")],40,tt))}});st.__file="src/components/forms/AGForm.vue";var at=n({__name:"AGHeadlessInput",props:{as:ve(),name:ve(),modelValue:ve()},emits:["update:modelValue"],setup(e,{expose:s,emit:a}){const r=e,o=_((()=>n&&r.name?n.errors[r.name]??null:null)),n=t("form"),l={id:B(),value:_((()=>n&&r.name?n.getFieldValue(r.name):r.modelValue)),errors:k(o),update(e){n&&r.name?n.setFieldValue(r.name,e):a("update:modelValue",e)}};return p("input",l),s(l),(t,s)=>e.as?(i(),u(f(e.as),{key:0},{default:c((()=>[m(t.$slots,"default")])),_:3})):m(t.$slots,"default",{key:1})}});at.__file="src/components/headless/forms/AGHeadlessInput.vue";const rt=["value","aria-invalid","aria-describedby"];var ot=n({__name:"AGHeadlessInputInput",setup(t){const s=e(),a=oe("input"),r=_((()=>a.value));function o(){s.value&&a.update(s.value.value)}return(e,t)=>(i(),w("input",{ref_key:"$input",ref:s,type:"text",value:r.value,"aria-invalid":d(a).errors?"true":"false","aria-describedby":d(a).errors?`${d(a).id}-error`:void 0,onInput:o},null,40,rt))}});ot.__file="src/components/headless/forms/AGHeadlessInputInput.vue";const nt=["id"];var lt=n({__name:"AGHeadlessInputError",setup(e){const t=oe("input"),s=_((()=>t.errors?Me(`errors.${t.errors[0]}`):null));return(e,a)=>s.value?(i(),w("p",{key:0,id:`${d(t).id}-error`},M(s.value),9,nt)):g("v-if",!0)}});lt.__file="src/components/headless/forms/AGHeadlessInputError.vue";var it=n({inheritAttrs:!1,__name:"AGInput",props:{name:ve()},setup(e){const t=te();return(s,a)=>(i(),u(at,{ref_key:"$input",ref:t,as:"div",class:"flex flex-col items-center",name:e.name},{default:c((()=>[b(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":d(t)?.errors}]}),null,16,["class"]),b(lt,{class:"mt-1 text-sm text-red-500"})])),_:1},8,["name"]))}});it.__file="src/components/forms/AGInput.vue";var ut=n({__name:"AGHeadlessModalTitle",props:{as:ve("h2")},setup:e=>(t,s)=>(i(),u(d(J),{as:e.as},{default:c((()=>[m(t.$slots,"default")])),_:3},8,["as"]))});ut.__file="src/components/headless/modals/AGHeadlessModalTitle.vue";const dt={String:"string",Number:"number"};class ct extends C{constructor(t){super(),T(this,"errors",void 0),T(this,"_fields",void 0),T(this,"_data",void 0),T(this,"_valid",void 0),T(this,"_submitted",void 0),T(this,"_errors",void 0),this._fields=t,this._submitted=e(!1),this._valid=e(!0),this._data=this.getInitialData(t),this._errors=this.getInitialErrors(t),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 Object.assign(this._errors,e),this._valid.value=!Object.values(e).some((e=>null!==e))}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)}}function mt(e){return new ct(e)}function pt(e){return{default:e,type:dt.Number,rules:"required"}}function ft(e){return{default:e,type:dt.String,rules:"required"}}function ht(e){return{default:e,type:dt.Number}}function vt(e){return{default:e,type:dt.String}}export{Ye as AGAppLayout,et as AGButton,st as AGForm,Ze as AGHeadlessButton,at as AGHeadlessInput,Be as AGHeadlessModal,Le as AGHeadlessModalPanel,ut as AGHeadlessModalTitle,it as AGInput,ze as AGMarkdown,Ne as AGModal,Fe as AGModalContext,xe as Events,Ae as EventsService,dt as FormFieldTypes,ke as Lang,be as Service,Ee as UI,Pe as UIComponents,Z as arrayProp,ee as booleanProp,je as bootServices,Ue as bootstrapApplication,te as componentRef,se as defineDirective,ye as defineServiceState,ae as enumProp,ne as injectOrFail,re as injectReactive,oe as injectReactiveOrFail,Me as lang,le as mixedProp,ht as numberInput,ie as numberProp,ue as objectProp,de as requiredArrayProp,ce as requiredEnumProp,me as requiredMixedProp,pt as requiredNumberInput,pe as requiredNumberProp,fe as requiredObjectProp,ft as requiredStringInput,he as requiredStringProp,vt as stringInput,ve as stringProp,mt 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 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 O,MagicObject as E,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 O{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 E{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 Oe(e,t){const s=Ae.on(e,t);n((()=>s()))}var Ee=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 Oe("close-modal",(async({id:e,result:t})=>{e===l.id&&await h(t)})),Oe("hide-modal",(async({id:e})=>{e===l.id&&await f()})),Oe("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))}});Ee.__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(Ee,{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 Oe("show-overlays-backdrop",(async()=>{s.value&&r.value&&(r.value=!1,s.value.classList.remove("opacity-0"))})),Oe("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 E{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.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 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)}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 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,Ee 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,Oe as useEvent,ft as useForm};
 //# sourceMappingURL=aerogel-core.esm.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/core",
     "description": "The Lightest Solid",
-    "version": "0.0.0-next.7f6ed5a1f91688a86bf5ede2adc465e4fd6cfdea",
+    "version": "0.0.0-next.926bde19326fe7b6b24b277666936862b64d8295",
     "main": "dist/aerogel-core.cjs.js",
     "module": "dist/aerogel-core.esm.js",
     "types": "dist/aerogel-core.d.ts",
@@ -33,17 +33,14 @@
     },
     "dependencies": {
         "@headlessui/vue": "^1.7.14",
-        "@noeldemartin/utils": "0.4.0-next.65c07a35cd02a0aa1ed9e742f72036354eba5fa8",
+        "@noeldemartin/utils": "0.4.0-next.ac00beaecf32bb02ed8e335225d7948d946d73bd",
         "dompurify": "^3.0.3",
         "marked": "^5.0.4",
-        "soukai": "^0.5.1",
-        "vue": "^3.3.0",
-        "vue-i18n": "9.3.0-beta.19",
-        "vue-router": "^4.2.1"
+        "vue": "^3.3.0"
     },
     "devDependencies": {
+        "@aerogel/vite": "*",
         "@types/dompurify": "^3.0.2",
-        "@types/marked": "^5.0.0",
-        "@vitejs/plugin-vue": "^4.2.3"
+        "@types/marked": "^5.0.0"
     }
 }

package/src/bootstrap/bootstrap.test.ts

@@ -1,13 +1,10 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { createApp } from 'vue';
-import { createI18n } from 'vue-i18n';
-import { IndexedDBEngine, requireBootedModel, requireEngine } from 'soukai';
 import { mock } from '@noeldemartin/utils';
 import type { Component } from 'vue';
 
 import Events from '@/services/Events';
 import initialFocus from '@/directives/initial-focus';
-import User from '@/testing/stubs/models/User';
 
 import { bootstrapApplication } from './index';
 
@@ -29,59 +26,6 @@ describe('Aerogel', () => {
         });
     });
 
-    it('Initializes Soukai', async () => {
-        // Arrange
-        const rootComponent = mock<Component>();
-
-        // Act
-        await bootstrapApplication(rootComponent, {
-            models: import.meta.glob('@/testing/stubs/models/*', { eager: true }),
-        });
-
-        // Assert
-        expect(requireBootedModel('User')).toEqual(User);
-        expect(requireEngine()).toBeInstanceOf(IndexedDBEngine);
-    });
-
-    it('Initializes routes', async () => {
-        // Arrange
-        vi.mock('vue-router', () => ({
-            createRouter: vi.fn(() => ({ routerMock: true })),
-            createWebHistory: vi.fn(),
-        }));
-
-        const rootComponent = mock<Component>();
-
-        // Act
-        await bootstrapApplication(rootComponent, {
-            routes: [],
-        });
-
-        // Assert
-        expect(vi.mocked(createApp).mock.results[0]?.value.use).toHaveBeenCalledWith({ routerMock: true });
-    });
-
-    it('Initializes lang', async () => {
-        // Arrange
-        vi.mock('vue-i18n', () => ({ createI18n: vi.fn(() => ({ i18nMock: true })) }));
-
-        const rootComponent = mock<Component>();
-
-        // Act
-        await bootstrapApplication(rootComponent, {
-            langMessages: import.meta.glob('@/testing/stubs/lang/*'),
-        });
-
-        // Assert
-        const mockedCreateI18n = vi.mocked(createI18n);
-        const mockedCreateApp = vi.mocked(createApp);
-
-        expect(mockedCreateI18n).toHaveBeenCalled();
-        expect(mockedCreateI18n.mock.calls[0]?.[0].messages).key('en').to.exist;
-        expect(mockedCreateI18n.mock.calls[0]?.[0].messages?.['en']).key('foo').to.exist;
-        expect(mockedCreateApp.mock.results[0]?.value.use).toHaveBeenCalledWith({ i18nMock: true });
-    });
-
     it('Boots services', async () => {
         // Arrange
         const rootComponent = mock<Component>();

package/src/bootstrap/index.ts

@@ -1,36 +1,17 @@
-import { createApp, h } from 'vue';
+import { createApp } from 'vue';
 import type { Component } from 'vue';
 
 import directives from '@/directives';
 import lang from '@/lang';
-import models from '@/models';
-import routing from '@/routing';
 import services from '@/services';
 import ui from '@/ui';
-import { runAppMountedHooks } from '@/bootstrap/hooks';
-import type { BootstrapOptions } from '@/bootstrap/options';
+import type { AerogelOptions } from '@/bootstrap/options';
 
-export async function bootstrapApplication(rootComponent: Component, options: BootstrapOptions = {}): Promise<void> {
-    const hooks = [directives, lang, models, routing, services, ui];
-    const app = createApp({
-        data: () => ({
-            ready: false,
-        }),
-        mounted() {
-            runAppMountedHooks();
+export async function bootstrapApplication(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
+    const plugins = [directives, lang, services, ui, ...(options.plugins ?? [])];
+    const app = createApp(rootComponent);
 
-            this.ready = true;
-        },
-        render() {
-            if (!this.ready) {
-                return null;
-            }
-
-            return h(rootComponent);
-        },
-    });
-
-    await Promise.all(hooks.map((hook) => hook(app, options)));
+    await Promise.all(plugins.map((plugin) => plugin.install(app, options)) ?? []);
 
     app.mount('#app');
 }

package/src/bootstrap/options.ts

@@ -1 +1,5 @@
-export interface BootstrapOptions {}
+import type { Plugin } from '@/plugins';
+
+export interface AerogelOptions {
+    plugins?: Plugin[];
+}

package/src/components/basic/AGMarkdown.vue

@@ -6,15 +6,30 @@
 import { computed, h } from 'vue';
 
 import { renderMarkdown } from '@/utils/markdown';
-import { stringProp } from '@/utils/vue';
-import { lang } from '@/lang/helpers';
+import { booleanProp, stringProp } from '@/utils/vue';
+import { translate } from '@/lang';
 
 const props = defineProps({
+    as: stringProp('div'),
     langKey: stringProp(),
     text: stringProp(),
+    inline: booleanProp(),
+    raw: booleanProp(),
 });
 
-const markdown = computed(() => props.text ?? (props.langKey && lang(props.langKey)));
-const html = computed(() => markdown.value && renderMarkdown(markdown.value));
-const root = () => h('div', { class: 'prose', innerHTML: html.value });
+const markdown = computed(() => props.text ?? (props.langKey && translate(props.langKey)));
+const html = computed(() => {
+    if (!markdown.value) {
+        return null;
+    }
+
+    let html = renderMarkdown(markdown.value);
+
+    if (props.inline) {
+        html = html.replace('<p>', '<span>').replace('</p>', '</span>');
+    }
+
+    return html;
+});
+const root = () => h(props.as, { class: props.raw ? '' : 'prose', innerHTML: html.value });
 </script>

package/src/components/forms/AGButton.vue

@@ -1,11 +1,21 @@
 <template>
     <AGHeadlessButton
-        class="bg-indigo-600 px-2.5 py-1.5 text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+        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,
+        }"
     >
         <slot />
     </AGHeadlessButton>
 </template>
 
 <script setup lang="ts">
+import { booleanProp } from '@/utils';
+
 import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
+
+defineProps({
+    secondary: booleanProp(),
+});
 </script>

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

@@ -27,9 +27,9 @@ const errors = computed(() => {
 
     return form.errors[props.name] ?? null;
 });
-const form = inject<Form>('form');
+const form = inject<Form | null>('form', null);
 const publicApi: IAGHeadlessInput = {
-    id: uuid(),
+    id: `input-${uuid()}`,
     value: computed(() => {
         if (form && props.name) {
             return form.getFieldValue(props.name);

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

@@ -5,18 +5,22 @@
 </template>
 
 <script setup lang="ts">
-import { injectReactiveOrFail } from '@/utils';
+import { computed } from 'vue';
+
+import { injectReactiveOrFail } from '@/utils/vue';
+import { translateWithDefault } from '@/lang';
 
 import type { IAGHeadlessInput } from './AGHeadlessInput';
-import { computed } from 'vue';
-import { lang } from '@/lang';
 
-const input = injectReactiveOrFail<IAGHeadlessInput>('input');
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputError> must be a child of a <AGHeadlessInput>',
+);
 const errorMessage = computed(() => {
     if (!input.errors) {
         return null;
     }
 
-    return lang(`errors.${input.errors[0]}`);
+    return translateWithDefault(`errors.${input.errors[0]}`, `Error: ${input.errors[0]}`);
 });
 </script>

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

@@ -1,5 +1,6 @@
 <template>
     <input
+        :id="input.id"
         ref="$input"
         type="text"
         :value="value"
@@ -16,7 +17,10 @@ import { injectReactiveOrFail } from '@/utils';
 import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
 
 const $input = ref<HTMLInputElement>();
-const input = injectReactiveOrFail<IAGHeadlessInput>('input');
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>',
+);
 const value = computed(() => input.value);
 
 function update() {

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

@@ -0,0 +1,16 @@
+<template>
+    <label :for="input.id">
+        <slot />
+    </label>
+</template>
+
+<script setup lang="ts">
+import { injectReactiveOrFail } from '@/utils/vue';
+
+import type { IAGHeadlessInput } from './AGHeadlessInput';
+
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputLabel> must be a child of a <AGHeadlessInput>',
+);
+</script>

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

@@ -1,4 +1,6 @@
-import AGHeadlessButton from './AGHeadlessButton.vue';
-import AGHeadlessInput from './AGHeadlessInput.vue';
-
-export { AGHeadlessButton, AGHeadlessInput };
+export { IAGHeadlessInput } from './AGHeadlessInput';
+export { default as AGHeadlessButton } from './AGHeadlessButton.vue';
+export { default as AGHeadlessInput } from './AGHeadlessInput.vue';
+export { default as AGHeadlessInputError } from './AGHeadlessInputError.vue';
+export { default as AGHeadlessInputInput } from './AGHeadlessInputInput.vue';
+export { default as AGHeadlessInputLabel } from './AGHeadlessInputLabel.vue';

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

@@ -23,7 +23,11 @@ const props = defineProps({
 const $root = ref<{ $el?: HTMLElement } | null>(null);
 const hidden = ref(true);
 const closed = ref(false);
-const { modal } = injectReactiveOrFail<IAGModalContext>('modal');
+const { modal } = injectReactiveOrFail<IAGModalContext>(
+    'modal',
+    'could not obtain modal reference from <AGHeadlessModal>, ' +
+        'did you render this component manually? Show it using $ui.openModal() instead',
+);
 
 async function hide(): Promise<void> {
     if (!$root.value?.$el) {

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

@@ -15,6 +15,10 @@ import type { IAGModalContext } from '@/components/modals/AGModalContext';
 
 import AGModalContext from '../../modals/AGModalContext.vue';
 
-const modal = injectReactiveOrFail<IAGModalContext>('modal');
+const modal = injectReactiveOrFail<IAGModalContext>(
+    'modal',
+    'could not obtain modal reference from <AGHeadlessModalPanel>, ' +
+        'did you render this component manually? Show it using $ui.openModal() instead',
+);
 const childModal = computed(() => UI.modals[modal.childIndex] ?? null);
 </script>

package/src/components/index.ts

@@ -1,6 +1,7 @@
 import AGAppLayout from './AGAppLayout.vue';
+import AGAppOverlays from './AGAppOverlays.vue';
 
-export { AGAppLayout };
+export { AGAppLayout, AGAppOverlays };
 
 export * from './basic';
 export * from './forms';

package/src/components/modals/AGAlertModal.vue

@@ -1,15 +1,26 @@
 <template>
     <AGModal>
+        <AGMarkdown
+            v-if="title"
+            :text="title"
+            as="h2"
+            class="font-semibold"
+            raw
+            inline
+        />
         <AGMarkdown :text="message" />
     </AGModal>
 </template>
 
 <script setup lang="ts">
-import { requiredStringProp } from '@/utils/vue';
+import { requiredStringProp, stringProp } from '@/utils/vue';
 
 import AGModal from './AGModal.vue';
 
 import AGMarkdown from '../basic/AGMarkdown.vue';
 
-defineProps({ message: requiredStringProp() });
+defineProps({
+    title: stringProp(),
+    message: requiredStringProp(),
+});
 </script>

package/src/components/modals/AGConfirmModal.vue

@@ -0,0 +1,30 @@
+<template>
+    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false">
+        <AGMarkdown v-if="title" :text="title" as="h1" />
+        <AGMarkdown :text="message" />
+
+        <div class="mt-2 flex flex-row-reverse gap-2">
+            <AGButton @click="close(true)">
+                {{ $td('ui.ok', 'OK') }}
+            </AGButton>
+            <AGButton secondary @click="close()">
+                {{ $td('ui.cancel', 'Cancel') }}
+            </AGButton>
+        </div>
+    </AGModal>
+</template>
+
+<script setup lang="ts">
+import { requiredStringProp, stringProp } from '@/utils/vue';
+
+import AGModal from './AGModal.vue';
+import type { IAGModalDefaultSlotProps } from './AGModal';
+
+import AGButton from '../forms/AGButton.vue';
+import AGMarkdown from '../basic/AGMarkdown.vue';
+
+defineProps({
+    title: stringProp(),
+    message: requiredStringProp(),
+});
+</script>

package/src/components/modals/AGModal.ts

@@ -4,3 +4,7 @@ export interface IAGModal {
     cancellable: Ref<boolean>;
     close(): Promise<void>;
 }
+
+export interface IAGModalDefaultSlotProps {
+    close(result?: unknown): Promise<void>;
+}

package/src/components/modals/index.ts

@@ -1,5 +1,7 @@
+import AGAlertModal from './AGAlertModal.vue';
+import AGConfirmModal from './AGConfirmModal.vue';
 import AGModal from './AGModal.vue';
 import AGModalContext from './AGModalContext.vue';
 import { IAGModal } from './AGModal';
 
-export { AGModal, AGModalContext, IAGModal };
+export { AGAlertModal, AGConfirmModal, AGModal, AGModalContext, IAGModal };

package/src/directives/index.ts

@@ -1,6 +1,6 @@
 import type { Directive } from 'vue';
 
-import { defineBootstrapHook } from '@/bootstrap/hooks';
+import { definePlugin } from '@/plugins';
 
 import initialFocus from './initial-focus';
 
@@ -8,6 +8,8 @@ const directives: Record<string, Directive> = {
     'initial-focus': initialFocus,
 };
 
-export default defineBootstrapHook(async (app) => {
-    Object.entries(directives).forEach(([name, directive]) => app.directive(name, directive));
+export default definePlugin({
+    install(app) {
+        Object.entries(directives).forEach(([name, directive]) => app.directive(name, directive));
+    },
 });

package/src/forms/Form.test.ts

@@ -34,4 +34,25 @@ describe('Form', () => {
         expect(form.errors.name).toEqual(['required']);
     });
 
+    it('resets form', () => {
+        // Arrange
+        const form = useForm({
+            name: {
+                type: FormFieldTypes.String,
+                rules: 'required',
+            },
+        });
+
+        form.name = 'Foo bar';
+        form.submit();
+
+        // Act
+        form.reset();
+
+        // Assert
+        expect(form.valid).toBe(true);
+        expect(form.submitted).toBe(false);
+        expect(form.name).toBeNull();
+    });
+
 });

package/src/forms/Form.ts

@@ -1,7 +1,7 @@
 import { MagicObject } from '@noeldemartin/utils';
-import { reactive, readonly, ref } from 'vue';
+import { computed, reactive, readonly, ref } from 'vue';
 import type { ObjectValues } from '@noeldemartin/utils';
-import type { DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
+import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
 
 export const FormFieldTypes = {
     String: 'string',
@@ -18,7 +18,7 @@ export type FormFieldDefinitions = Record<string, FormFieldDefinition>;
 export type FormFieldType = ObjectValues<typeof FormFieldTypes>;
 
 export type FormData<T> = {
-    [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules>
+    -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules>
         ? TRules extends 'required'
             ? GetFormFieldValue<TType>
             : GetFormFieldValue<TType> | null
@@ -41,7 +41,7 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
 
     private _fields: Fields;
     private _data: FormData<Fields>;
-    private _valid: Ref<boolean>;
+    private _valid: ComputedRef<boolean>;
     private _submitted: Ref<boolean>;
     private _errors: FormErrors<Fields>;
 
@@ -50,9 +50,9 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
 
         this._fields = fields;
         this._submitted = ref(false);
-        this._valid = ref(true);
         this._data = this.getInitialData(fields);
         this._errors = this.getInitialErrors(fields);
+        this._valid = computed(() => !Object.values(this._errors).some((error) => error !== null));
 
         this.errors = readonly(this._errors);
     }
@@ -84,9 +84,16 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
             return errors;
         }, {} as Record<string, string[] | null>);
 
-        Object.assign(this._errors, errors);
+        this.resetErrors(errors);
 
-        return (this._valid.value = !Object.values(errors).some((error) => error !== null));
+        return this.valid;
+    }
+
+    public reset(): void {
+        this._submitted.value = false;
+
+        this.resetData();
+        this.resetErrors();
     }
 
     public submit(): boolean {
@@ -151,4 +158,16 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
         return reactive(errors) as FormErrors<Fields>;
     }
 
+    private resetData(): void {
+        for (const [name, field] of Object.entries(this._fields)) {
+            this._data[name as keyof Fields] = (field.default ?? null) as FormData<Fields>[keyof Fields];
+        }
+    }
+
+    private resetErrors(errors?: Record<string, string[] | null>): void {
+        Object.keys(this._errors).forEach((key) => delete this._errors[key as keyof Fields]);
+
+        errors && Object.assign(this._errors, errors);
+    }
+
 }