@aerogel/core 0.0.0-next.926bde19326fe7b6b24b277666936862b64d8295 → 0.0.0-next.b85327579d32f21c6a9fa21142f0165cdd320d7e
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/aerogel-core.cjs.js +1 -1
- package/dist/aerogel-core.d.ts +213 -53
- package/dist/aerogel-core.esm.js +1 -1
- package/package.json +2 -1
- package/src/bootstrap/index.ts +4 -1
- package/src/components/basic/AGMarkdown.vue +3 -3
- package/src/components/forms/AGButton.vue +21 -8
- package/src/components/forms/AGCheckbox.vue +35 -0
- package/src/components/forms/AGInput.vue +8 -4
- package/src/components/forms/index.ts +2 -1
- package/src/components/headless/forms/AGHeadlessButton.vue +3 -4
- package/src/components/headless/forms/AGHeadlessInput.ts +2 -2
- package/src/components/headless/forms/AGHeadlessInput.vue +3 -3
- package/src/components/headless/forms/AGHeadlessInputError.vue +1 -1
- package/src/components/headless/forms/AGHeadlessInputInput.vue +15 -3
- package/src/components/headless/modals/AGHeadlessModalPanel.vue +5 -1
- package/src/components/modals/AGLoadingModal.vue +19 -0
- package/src/components/modals/AGModal.vue +20 -2
- package/src/components/modals/index.ts +2 -1
- package/src/errors/Errors.state.ts +31 -0
- package/src/errors/Errors.ts +132 -0
- package/src/errors/index.ts +21 -0
- package/src/forms/Form.ts +12 -9
- package/src/forms/utils.ts +17 -0
- package/src/lang/Lang.ts +11 -3
- package/src/lang/index.ts +3 -5
- package/src/lang/utils.ts +4 -0
- package/src/main.ts +1 -0
- package/src/services/App.state.ts +3 -0
- package/src/services/App.ts +11 -1
- package/src/services/Service.ts +126 -44
- package/src/services/index.ts +18 -4
- package/src/services/store.ts +27 -0
- package/src/ui/UI.state.ts +1 -0
- package/src/ui/UI.ts +15 -0
- package/src/ui/index.ts +3 -1
- package/src/utils/composition/forms.ts +11 -0
- package/src/utils/index.ts +1 -0
package/dist/aerogel-core.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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};
|
|
1
|
+
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 r,nextTick as o,onUnmounted as a,useAttrs as n,computed as l,onMounted as i,defineComponent as u,toRef as d,openBlock as c,createBlock as m,unref as p,withCtx as f,renderSlot as h,provide as v,resolveDynamicComponent as _,normalizeProps as g,guardReactiveProps as b,createElementBlock as y,Fragment as x,createVNode as A,createCommentVNode as j,createElementVNode as w,h as G,normalizeClass as S,createTextVNode as k,toDisplayString as M,createApp as E,readonly as $,mergeProps as C,withModifiers as I}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 P,PromisedValue as q,objectOnly as L,isEmpty as B,Storage as D,objectDeepClone as R,facade as F,arr as N,tap as V,uuid as z,toString as T,isObject as K,objectWithout as U,noop as Q,objectWithoutEmpty as W}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 Y,setActivePinia as Z}from"pinia";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"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{Dialog as ee,DialogPanel as te,DialogTitle as se}from"@headlessui/vue";import re from"dompurify";import{marked as oe}from"marked";function ae(e){return e}function ne(e){return{type:Array,default:e??(()=>[])}}function le(){return{type:Boolean,default:arguments.length>0&&void 0!==arguments[0]&&arguments[0]}}function ie(){return e()}function ue(e){return e}function de(e,t){const s=Object.values(e);return{type:String,default:t??s[0]??null,validator:e=>s.includes(e)}}function ce(e){const r=t(e);return r?s(r):void 0}function me(e,t){return ce(e)??H(t??`Could not resolve '${e}' injection key`)}function pe(e,s){return t(e)??H(s??`Could not resolve '${e}' injection key`)}function fe(e){return{type:e,default:null}}function he(){return{type:Number,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}function ve(){return{type:Object,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}function _e(){return{type:Array,required:!0}}function ge(e){const t=Object.values(e);return{type:String,required:!0,validator:e=>t.includes(e)}}function be(e){return{type:e,required:!0}}function ye(){return{type:Number,required:!0}}function xe(){return{type:Object,required:!0}}function Ae(){return{type:String,required:!0}}function je(){return{type:String,default:arguments.length>0&&void 0!==arguments[0]?arguments[0]:null}}const we={"initial-focus":{mounted(e,t){let{value:s}=t;!1!==s&&e.focus()}}};var Ge={install(e){Object.entries(we).forEach((t=>{let[s,r]=t;return e.directive(s,r)}))}};class ServiceBootError extends O{constructor(e,t){super(`Service '${e}' failed booting`,{cause:t})}}let Se=null;function ke(){return Se||(Se=Y(),Z(Se)),Se}function Me(e){var t;return J(t=class extends Ee{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 Ee 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,s;this._name=this.getName()??new.target.name,this._booted=new q,this._computedStateKeys=new Set(Object.keys(e)),this._store=this.usesStore()&&(t=this._name,s={state:()=>this.getInitialState(),getters:e},ke(),X(t,s)())}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 s="string"==typeof e?{[e]:t}:e;Object.assign(this._store.$state,s),this.onStateUpdated(s)}__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,s=L(e,t);if(B(s))return;const r=D.require(this._name);D.set(this._name,{...r,...this.serializePersistedState(R(s))})}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()&&!B(e))if(D.has(this._name)){const e=D.require(this._name);this.setState(e)}else D.set(this._name,L(this.getState(),e))}}J(Ee,"persist",[]);class $e extends Ee{constructor(){super(...arguments),J(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]??=N([])).push(t),()=>this.off(e,t)}once(e,t){let s=null;return V((()=>s&&this.off(e,s)),(r=>{(this.listeners[e]??=N([])).push(s=function(){return r(),t(...arguments)})}))}off(e,t){const s=this.listeners[e];s&&(s.remove(t),s.isEmpty()&&delete this.listeners[e])}}var Ce=F(new $e),Ie=Me({name:"app",initialState:{environment:__AG_ENV,isMounted:!1},computed:{isDevelopment:e=>"development"===e.environment,isTesting:e=>"testing"===e.environment}});class He extends Ie{async boot(){await super.boot(),Ce.once("application-mounted",(()=>this.setState({isMounted:!0})))}}var Oe=F(new He);const Pe={$app:Oe,$events:Ce};async function qe(e,t){await Promise.all(Object.entries(t).map((async e=>{let[t,s]=e;await s.launch().catch((e=>console.error(e)))}))),Object.assign(e.config.globalProperties,t)}var Le={async install(e,t){const s={...Pe,...t.services};e.use(Se??ke()),await qe(e,s)}},Be=Me({name:"ui",initialState:{modals:[]}});const De={AlertModal:"alert-modal",ConfirmModal:"confirm-modal",LoadingModal:"loading-modal"};var Re=F(new class extends Be{constructor(){super(...arguments),J(this,"modalCallbacks",{}),J(this,"components",{})}alert(e,t){const s="string"==typeof t?{title:e,message:t}:{message:e};this.openModal(this.requireComponent(De.AlertModal),s)}async confirm(e,t){const s="string"==typeof t?{title:e,message:t}:{message:e},r=await this.openModal(this.requireComponent(De.ConfirmModal),s);return await r.beforeClose??!1}async loading(e,t){t="string"==typeof e?t:e;const s="string"==typeof e?e:void 0,r=await this.openModal(this.requireComponent(De.LoadingModal),{message:s}),o=await t;return await this.closeModal(r.id),o}registerComponent(e,t){this.components[e]=t}async openModal(e,t){const s=z(),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&&Ce.emit("hide-modal",{id:l.id})),await Promise.all([l||Ce.emit("show-overlays-backdrop"),Ce.emit("show-modal",{id:n.id})]),n}async closeModal(e,t){await Ce.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(){Ce.on("modal-will-close",(e=>{let{modal:t,result:s}=e;this.modalCallbacks[t.id]?.willClose?.(s),1===this.modals.length&&Ce.emit("hide-overlays-backdrop")})),Ce.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 r=this.modals.at(-1);await(r&&Ce.emit("show-modal",{id:r.id}))}))}});var Fe=F(new class extends Ee{constructor(){super(),J(this,"provider",void 0),this.provider={translate:e=>(Oe.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 r="string"==typeof t?{}:t??{},o=this.provider.translate(e,r)??e;return o===e?Object.entries(r).reduce(((e,t)=>{let[s,r]=t;return e.replace(new RegExp(`\\{\\s*${s}\\s*\\}`,"g"),T(r))}),s):o}});const Ne=Fe.translate.bind(Fe),Ve=Fe.translateWithDefault.bind(Fe);var ze=Me({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}}});var Te=F(new class extends ze{constructor(){super(...arguments),J(this,"forceReporting",!1),J(this,"enabled",!0)}enable(){this.enabled=!0}disable(){this.enabled=!1}async inspect(e){Array.isArray(e)||await this.createErrorReport(e)}async report(e,t){if((Oe.isDevelopment||Oe.isTesting)&&this.logError(e),!this.enabled)throw e;if(!Oe.isMounted){const t=await this.createStartupErrorReport(e);return void(t&&this.setState({startupErrors:this.startupErrors.concat(t)}))}const s={report:await this.createErrorReport(e),seen:!1,date:new Date};Re.alert(t??"Something went wrong, but it's not your fault! (look at the console for details)"),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 O?this.createErrorReportFromError(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 Ke={$errors:Te};var Ue={async install(e){await qe(e,Ke)}};const Qe={$lang:Fe};var We={async install(e){e.config.globalProperties.$t??=Ne,e.config.globalProperties.$td=Ve,await qe(e,Qe)}};function Je(e,t){const s=Ce.on(e,t);a((()=>s()))}function Xe(){const e=n(),t=l((()=>e.class));return[l((()=>U(e,"class"))),t]}function Ye(e){let t=Q;i((()=>t=e())),a((()=>t()))}var Ze=u({__name:"AGHeadlessModal",props:{cancellable:le(!0)},setup(t,{expose:s}){const r=t,o=e(null),a=e(!0),n=e(!1),{modal:l}=me("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&&(a.value=!0)}async function u(e){n.value||(Ce.emit("modal-will-close",{modal:l,result:e}),await i(),n.value=!0,Ce.emit("modal-closed",{modal:l,result:e}))}return Je("close-modal",(async({id:e,result:t})=>{e===l.id&&await u(t)})),Je("hide-modal",(async({id:e})=>{e===l.id&&await i()})),Je("show-modal",(async({id:e})=>{e===l.id&&await async function(){o.value?.$el&&(a.value=!1)}()})),s({close:u,cancellable:d(r,"cancellable")}),(e,s)=>(c(),m(p(ee),{ref_key:"$root",ref:o,open:!0,onClose:s[0]||(s[0]=e=>t.cancellable&&u())},{default:f((()=>[h(e.$slots,"default",{close:u})])),_:3},512))}});Ze.__file="src/components/headless/modals/AGHeadlessModal.vue";var et=u({__name:"AGModalContext",props:{modal:xe(),childIndex:ye()},setup(e){const t=e;return v("modal",{modal:d(t,"modal"),childIndex:d(t,"childIndex")}),(t,s)=>(c(),m(_(e.modal.component),g(b(e.modal.properties)),null,16))}});et.__file="src/components/modals/AGModalContext.vue";const tt=w("div",{class:"pointer-events-none fixed inset-0 z-50 bg-black/30"},null,-1);var st=u({__name:"AGHeadlessModalPanel",setup(e){const t=me("modal","could not obtain modal reference from <AGHeadlessModalPanel>, did you render this component manually? Show it using $ui.openModal() instead"),s=l((()=>Re.modals[t.childIndex]??null));return(e,r)=>(c(),m(p(te),null,{default:f((()=>[h(e.$slots,"default"),s.value?(c(),y(x,{key:0},[tt,A(et,{"child-index":p(t).childIndex+1,modal:s.value},null,8,["child-index","modal"])],64)):j("v-if",!0)])),_:3}))}});st.__file="src/components/headless/modals/AGHeadlessModalPanel.vue";const rt={class:"fixed inset-0 flex items-center justify-center"},ot={class:"flex max-h-full flex-col overflow-auto p-4"};var at=u({__name:"AGModal",props:{cancellable:le(!0)},setup(t,{expose:s}){const r=e();return s({close:async()=>r.value?.close(),cancellable:l((()=>!!r.value?.cancellable))}),(e,s)=>(c(),m(Ze,{ref_key:"$headlessModal",ref:r,cancellable:t.cancellable,class:"relative z-50"},{default:f((({close:t})=>[w("div",rt,[A(st,{class:"flex max-h-full max-w-full flex-col overflow-hidden bg-white"},{default:f((()=>[w("div",ot,[h(e.$slots,"default",{close:t})])])),_:2},1024)])])),_:3},8,["cancellable"]))}});function nt(e){return t=oe(e,{mangle:!1,headerIds:!1}),re.sanitize(t,{ADD_ATTR:["target"]});var t}at.__file="src/components/modals/AGModal.vue";var lt=u({__name:"AGMarkdown",props:{as:je("div"),langKey:je(),text:je(),inline:le(),raw:le()},setup(e){const t=e,s=l((()=>t.text??(t.langKey&&Ne(t.langKey)))),r=l((()=>{if(!s.value)return null;let e=nt(s.value);return t.inline&&(e=e.replace("<p>","<span>").replace("</p>","</span>")),e})),o=()=>G(t.as,{class:t.raw?"":"prose",innerHTML:r.value});return(e,t)=>(c(),m(o))}});lt.__file="src/components/basic/AGMarkdown.vue";var it=u({__name:"AGAlertModal",props:{title:je(),message:Ae()},setup:e=>(t,s)=>(c(),m(at,null,{default:f((()=>[e.title?(c(),m(lt,{key:0,text:e.title,as:"h2",class:"font-semibold",raw:"",inline:""},null,8,["text"])):j("v-if",!0),A(lt,{text:e.message},null,8,["text"])])),_:1}))});it.__file="src/components/modals/AGAlertModal.vue";var ut=u({__name:"AGHeadlessButton",props:{url:je(),route:je(),routeParams:ve((()=>({}))),routeQuery:ve((()=>({}))),submit:le()},setup(e){const{url:t,route:s,routeParams:r,routeQuery:o,submit:a}=e,n=l((()=>s?{tag:"router-link",props:{to:W({name:s,params:r,query:o})}}:t?{tag:"a",props:{target:"_blank",href:t}}:{tag:"button",props:{type:a?"submit":"button"}}));return(e,t)=>(c(),m(_(n.value.tag),g(b(n.value.props)),{default:f((()=>[h(e.$slots,"default")])),_:3},16))}});ut.__file="src/components/headless/forms/AGHeadlessButton.vue";var dt=u({__name:"AGButton",props:{clear:le(),secondary:le()},setup(e){const t=e,s=l((()=>t.secondary?"text-white bg-gray-600 hover:bg-gray-500 focus-visible:outline-offset-2 focus-visible:outline-gray-600":t.clear?"hover:bg-gray-500/20 focus-visible:outline-gray-500/60":["text-white bg-indigo-600","hover:bg-indigo-500","focus-visible:outline-offset-2 focus-visible:outline-indigo-600"].join(" ")));return(e,t)=>(c(),m(ut,{class:S(["px-2.5 py-1.5 focus-visible:outline focus-visible:outline-2",s.value])},{default:f((()=>[h(e.$slots,"default")])),_:3},8,["class"]))}});dt.__file="src/components/forms/AGButton.vue";const ct={class:"mt-2 flex flex-row-reverse gap-2"};var mt=u({__name:"AGConfirmModal",props:{title:je(),message:Ae()},setup:e=>(t,s)=>(c(),m(at,{cancellable:!1},{default:f((({close:s})=>[e.title?(c(),m(lt,{key:0,text:e.title,as:"h1"},null,8,["text"])):j("v-if",!0),A(lt,{text:e.message},null,8,["text"]),w("div",ct,[A(dt,{onClick:e=>s(!0)},{default:f((()=>[k(M(t.$td("ui.ok","OK")),1)])),_:2},1032,["onClick"]),A(dt,{secondary:"",onClick:e=>s()},{default:f((()=>[k(M(t.$td("ui.cancel","Cancel")),1)])),_:2},1032,["onClick"])])])),_:1}))});mt.__file="src/components/modals/AGConfirmModal.vue";var pt=u({__name:"AGLoadingModal",props:{message:je()},setup(e){const t=e,s=l((()=>t.message??Ve("ui.loading","Loading...")));return(e,t)=>(c(),m(at,{cancellable:!1},{default:f((()=>[A(lt,{text:s.value},null,8,["text"])])),_:1}))}});pt.__file="src/components/modals/AGLoadingModal.vue";const ft={$ui:Re};var ht={async install(e,t){const s={[De.AlertModal]:it,[De.ConfirmModal]:mt,[De.LoadingModal]:pt};Object.entries({...s,...t.components}).forEach((e=>{let[t,s]=e;return Re.registerComponent(t,s)})),await qe(e,ft)}};async function vt(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const s=[Ge,Ue,We,Le,ht,...t.plugins??[]],r=E(e);await Promise.all(s.map((e=>e.install(r,t)))??[]),r.mount("#app"),Ce.emit("application-mounted")}const _t={key:0};var gt=u({__name:"AGAppOverlays",setup(t){const s=e(null),r=e(!0),o=l((()=>Re.modals[0]??null));return Je("show-overlays-backdrop",(async()=>{s.value&&r.value&&(r.value=!1,s.value.classList.remove("opacity-0"))})),Je("hide-overlays-backdrop",(async()=>{s.value&&!r.value&&(r.value=!0,s.value.classList.add("opacity-0"))})),(e,t)=>(c(),y(x,null,[w("div",{ref_key:"$backdrop",ref:s,class:"pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0"},null,512),o.value?(c(),y("aside",_t,[A(et,{"child-index":1,modal:o.value},null,8,["modal"])])):j("v-if",!0)],64))}});gt.__file="src/components/AGAppOverlays.vue";const bt={class:"flex h-full flex-col text-base font-normal leading-tight text-gray-900 antialiased"};var yt=u({__name:"AGAppLayout",setup:e=>(e,t)=>(c(),y("div",bt,[h(e.$slots,"default"),A(gt)]))});yt.__file="src/components/AGAppLayout.vue";var xt=u({__name:"AGHeadlessInput",props:{as:je("div"),name:je(),modelValue:fe([String,Number,Boolean])},emits:["update:modelValue"],setup(e,{expose:s,emit:r}){const o=e,a=l((()=>n&&o.name?n.errors[o.name]??null:null)),n=t("form",null),i={id:`input-${z()}`,value:l((()=>n&&o.name?n.getFieldValue(o.name):o.modelValue)),errors:$(a),update(e){n&&o.name?n.setFieldValue(o.name,e):r("update:modelValue",e)}};return v("input",i),s(i),(t,s)=>e.as?(c(),m(_(e.as),{key:0},{default:f((()=>[h(t.$slots,"default")])),_:3})):h(t.$slots,"default",{key:1})}});xt.__file="src/components/headless/forms/AGHeadlessInput.vue";const At=["id"];var jt=u({__name:"AGHeadlessInputError",setup(e){const t=me("input","<AGHeadlessInputError> must be a child of a <AGHeadlessInput>"),s=l((()=>t.errors?Ve(`errors.${t.errors[0]}`,`Error: ${t.errors[0]}`):null));return(e,r)=>s.value?(c(),y("p",{key:0,id:`${p(t).id}-error`},M(s.value),9,At)):j("v-if",!0)}});jt.__file="src/components/headless/forms/AGHeadlessInputError.vue";const wt=["id","type","value","aria-invalid","aria-describedby","checked"];var Gt=u({__name:"AGHeadlessInputInput",props:{type:je("text")},setup(t){const s=t,r=e(),o=me("input","<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>"),a=l((()=>o.value)),n=l((()=>{if("checkbox"===s.type)return!!a.value}));function i(){r.value&&o.update("checkbox"===s.type?r.value.checked:r.value.value)}return(e,s)=>(c(),y("input",{id:p(o).id,ref_key:"$input",ref:r,type:t.type,value:a.value,"aria-invalid":p(o).errors?"true":"false","aria-describedby":p(o).errors?`${p(o).id}-error`:void 0,checked:n.value,onInput:i},null,40,wt))}});Gt.__file="src/components/headless/forms/AGHeadlessInputInput.vue";const St=["for"];var kt=u({__name:"AGHeadlessInputLabel",setup(e){const t=me("input","<AGHeadlessInputLabel> must be a child of a <AGHeadlessInput>");return(e,s)=>(c(),y("label",{for:p(t).id},[h(e.$slots,"default")],8,St))}});kt.__file="src/components/headless/forms/AGHeadlessInputLabel.vue";const Mt={class:"ml-2"};var Et=u({inheritAttrs:!1,__name:"AGCheckbox",props:{name:je()},setup(e){const t=ie();return(s,r)=>(c(),m(xt,{ref_key:"$input",ref:t,name:e.name,class:"flex"},{default:f((()=>[A(Gt,C(s.$attrs,{type:"checkbox",class:{"text-indigo-600 focus:ring-indigo-600":!p(t)?.errors,"border-red-200 text-red-600 focus:ring-red-600":p(t)?.errors}}),null,16,["class"]),w("div",Mt,[s.$slots.default?(c(),m(kt,{key:0},{default:f((()=>[h(s.$slots,"default")])),_:3})):j("v-if",!0),A(jt,{class:"text-sm text-red-600"})])])),_:3},8,["name"]))}});Et.__file="src/components/forms/AGCheckbox.vue";const $t=["onSubmit"];var Ct=u({__name:"AGForm",props:{form:ve()},emits:["submit"],setup(e,{emit:t}){const s=e;function r(){s.form&&!s.form.submit()||t("submit")}return v("form",s.form),(e,t)=>(c(),y("form",{onSubmit:I(r,["prevent"])},[h(e.$slots,"default")],40,$t))}});Ct.__file="src/components/forms/AGForm.vue";const It={class:"absolute bottom-0 left-0 translate-y-full"};var Ht=u({inheritAttrs:!1,__name:"AGInput",props:{name:je()},setup(e){const t=ie(),[s,r]=Xe();return(o,a)=>(c(),m(xt,{ref_key:"$input",ref:t,class:S(["relative flex flex-col items-center",p(r)]),name:e.name},{default:f((()=>[A(Gt,C(p(s),{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":p(t)?.errors}]}),null,16,["class"]),w("div",It,[A(jt,{class:"mt-1 text-sm text-red-500"})])])),_:1},8,["class","name"]))}});Ht.__file="src/components/forms/AGInput.vue";var Ot=u({__name:"AGHeadlessModalTitle",props:{as:je("h2")},setup:e=>(t,s)=>(c(),m(p(se),{as:e.as},{default:f((()=>[h(t.$slots,"default")])),_:3},8,["as"]))});Ot.__file="src/components/headless/modals/AGHeadlessModalTitle.vue";const Pt={String:"string",Number:"number",Boolean:"boolean"};class qt 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=$(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,r]=t;return e[s]=this.getFieldErrors(s,r),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,r]=t;return e[s]=r.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 Lt(e){return new qt(e)}function Bt(e){return{default:e,type:Pt.Boolean}}function Dt(e){return{default:e,type:Pt.Boolean,rules:"required"}}function Rt(e){return{default:e,type:Pt.Number,rules:"required"}}function Ft(e){return{default:e,type:Pt.String,rules:"required"}}function Nt(e){return{default:e,type:Pt.Number}}function Vt(e){return{default:e,type:Pt.String}}export{it as AGAlertModal,yt as AGAppLayout,gt as AGAppOverlays,dt as AGButton,Et as AGCheckbox,mt as AGConfirmModal,Ct as AGForm,ut as AGHeadlessButton,xt as AGHeadlessInput,jt as AGHeadlessInputError,Gt as AGHeadlessInputInput,kt as AGHeadlessInputLabel,Ze as AGHeadlessModal,st as AGHeadlessModalPanel,Ot as AGHeadlessModalTitle,Ht as AGInput,pt as AGLoadingModal,lt as AGMarkdown,at as AGModal,et as AGModalContext,Oe as App,He as AppService,Te as Errors,Ce as Events,$e as EventsService,Pt as FormFieldTypes,Fe as Lang,Ee as Service,Re as UI,De as UIComponents,ne as arrayProp,Bt as booleanInput,le as booleanProp,qe as bootServices,vt as bootstrapApplication,ie as componentRef,ue as defineDirective,ae as definePlugin,Me as defineServiceState,de as enumProp,pe as injectOrFail,ce as injectReactive,me as injectReactiveOrFail,fe as mixedProp,Nt as numberInput,he as numberProp,ve as objectProp,Ye as onCleanMounted,_e as requiredArrayProp,Dt as requiredBooleanInput,ge as requiredEnumProp,be as requiredMixedProp,Rt as requiredNumberInput,ye as requiredNumberProp,xe as requiredObjectProp,Ft as requiredStringInput,Ae as requiredStringProp,Vt as stringInput,je as stringProp,Ne as translate,Ve as translateWithDefault,Je as useEvent,Lt as useForm,Xe as useInputAttrs};
|
|
2
2
|
//# sourceMappingURL=aerogel-core.esm.js.map
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aerogel/core",
|
|
3
3
|
"description": "The Lightest Solid",
|
|
4
|
-
"version": "0.0.0-next.
|
|
4
|
+
"version": "0.0.0-next.b85327579d32f21c6a9fa21142f0165cdd320d7e",
|
|
5
5
|
"main": "dist/aerogel-core.cjs.js",
|
|
6
6
|
"module": "dist/aerogel-core.esm.js",
|
|
7
7
|
"types": "dist/aerogel-core.d.ts",
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
"@noeldemartin/utils": "0.4.0-next.ac00beaecf32bb02ed8e335225d7948d946d73bd",
|
|
37
37
|
"dompurify": "^3.0.3",
|
|
38
38
|
"marked": "^5.0.4",
|
|
39
|
+
"pinia": "^2.1.6",
|
|
39
40
|
"vue": "^3.3.0"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
package/src/bootstrap/index.ts
CHANGED
|
@@ -2,16 +2,19 @@ import { createApp } from 'vue';
|
|
|
2
2
|
import type { Component } from 'vue';
|
|
3
3
|
|
|
4
4
|
import directives from '@/directives';
|
|
5
|
+
import errors from '@/errors';
|
|
6
|
+
import Events from '@/services/Events';
|
|
5
7
|
import lang from '@/lang';
|
|
6
8
|
import services from '@/services';
|
|
7
9
|
import ui from '@/ui';
|
|
8
10
|
import type { AerogelOptions } from '@/bootstrap/options';
|
|
9
11
|
|
|
10
12
|
export async function bootstrapApplication(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
|
|
11
|
-
const plugins = [directives, lang, services, ui, ...(options.plugins ?? [])];
|
|
13
|
+
const plugins = [directives, errors, lang, services, ui, ...(options.plugins ?? [])];
|
|
12
14
|
const app = createApp(rootComponent);
|
|
13
15
|
|
|
14
16
|
await Promise.all(plugins.map((plugin) => plugin.install(app, options)) ?? []);
|
|
15
17
|
|
|
16
18
|
app.mount('#app');
|
|
19
|
+
Events.emit('application-mounted');
|
|
17
20
|
}
|
|
@@ -23,13 +23,13 @@ const html = computed(() => {
|
|
|
23
23
|
return null;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
let
|
|
26
|
+
let renderedHtml = renderMarkdown(markdown.value);
|
|
27
27
|
|
|
28
28
|
if (props.inline) {
|
|
29
|
-
|
|
29
|
+
renderedHtml = renderedHtml.replace('<p>', '<span>').replace('</p>', '</span>');
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
return
|
|
32
|
+
return renderedHtml;
|
|
33
33
|
});
|
|
34
34
|
const root = () => h(props.as, { class: props.raw ? '' : 'prose', innerHTML: html.value });
|
|
35
35
|
</script>
|
|
@@ -1,21 +1,34 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<AGHeadlessButton
|
|
3
|
-
class="px-2.5 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
|
|
4
|
-
:class="{
|
|
5
|
-
'bg-indigo-600 hover:bg-indigo-500 focus-visible:outline-indigo-600': !secondary,
|
|
6
|
-
'bg-gray-600 hover:bg-gray-500 focus-visible:outline-gray-600': secondary,
|
|
7
|
-
}"
|
|
8
|
-
>
|
|
2
|
+
<AGHeadlessButton class="px-2.5 py-1.5 focus-visible:outline focus-visible:outline-2" :class="colorClasses">
|
|
9
3
|
<slot />
|
|
10
4
|
</AGHeadlessButton>
|
|
11
5
|
</template>
|
|
12
6
|
|
|
13
7
|
<script setup lang="ts">
|
|
8
|
+
import { computed } from 'vue';
|
|
9
|
+
|
|
14
10
|
import { booleanProp } from '@/utils';
|
|
15
11
|
|
|
16
12
|
import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
|
|
17
13
|
|
|
18
|
-
defineProps({
|
|
14
|
+
const props = defineProps({
|
|
15
|
+
clear: booleanProp(),
|
|
19
16
|
secondary: booleanProp(),
|
|
20
17
|
});
|
|
18
|
+
|
|
19
|
+
const colorClasses = computed(() => {
|
|
20
|
+
if (props.secondary) {
|
|
21
|
+
return 'text-white bg-gray-600 hover:bg-gray-500 focus-visible:outline-offset-2 focus-visible:outline-gray-600';
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
if (props.clear) {
|
|
25
|
+
return 'hover:bg-gray-500/20 focus-visible:outline-gray-500/60';
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return [
|
|
29
|
+
'text-white bg-indigo-600',
|
|
30
|
+
'hover:bg-indigo-500',
|
|
31
|
+
'focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
|
|
32
|
+
].join(' ');
|
|
33
|
+
});
|
|
21
34
|
</script>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<AGHeadlessInput ref="$input" :name="name" class="flex">
|
|
3
|
+
<AGHeadlessInputInput
|
|
4
|
+
v-bind="$attrs"
|
|
5
|
+
type="checkbox"
|
|
6
|
+
:class="{
|
|
7
|
+
'text-indigo-600 focus:ring-indigo-600': !$input?.errors,
|
|
8
|
+
'border-red-200 text-red-600 focus:ring-red-600': $input?.errors,
|
|
9
|
+
}"
|
|
10
|
+
/>
|
|
11
|
+
|
|
12
|
+
<div class="ml-2">
|
|
13
|
+
<AGHeadlessInputLabel v-if="$slots.default">
|
|
14
|
+
<slot />
|
|
15
|
+
</AGHeadlessInputLabel>
|
|
16
|
+
<AGHeadlessInputError class="text-sm text-red-600" />
|
|
17
|
+
</div>
|
|
18
|
+
</AGHeadlessInput>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script setup lang="ts">
|
|
22
|
+
import { componentRef, stringProp } from '@/utils/vue';
|
|
23
|
+
|
|
24
|
+
import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
|
|
25
|
+
|
|
26
|
+
import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
|
|
27
|
+
import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
|
|
28
|
+
import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
|
|
29
|
+
import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
|
|
30
|
+
|
|
31
|
+
defineProps({ name: stringProp() });
|
|
32
|
+
defineOptions({ inheritAttrs: false });
|
|
33
|
+
|
|
34
|
+
const $input = componentRef<IAGHeadlessInput>();
|
|
35
|
+
</script>
|
|
@@ -1,24 +1,27 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<AGHeadlessInput
|
|
3
3
|
ref="$input"
|
|
4
|
-
|
|
5
|
-
class="
|
|
4
|
+
class="relative flex flex-col items-center"
|
|
5
|
+
:class="className"
|
|
6
6
|
:name="name"
|
|
7
7
|
>
|
|
8
8
|
<AGHeadlessInputInput
|
|
9
|
-
v-bind="
|
|
9
|
+
v-bind="attrs"
|
|
10
10
|
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"
|
|
11
11
|
:class="{
|
|
12
12
|
'ring-1 ring-red-500': $input?.errors,
|
|
13
13
|
}"
|
|
14
14
|
/>
|
|
15
|
-
<
|
|
15
|
+
<div class="absolute bottom-0 left-0 translate-y-full">
|
|
16
|
+
<AGHeadlessInputError class="mt-1 text-sm text-red-500" />
|
|
17
|
+
</div>
|
|
16
18
|
</AGHeadlessInput>
|
|
17
19
|
</template>
|
|
18
20
|
|
|
19
21
|
<script setup lang="ts">
|
|
20
22
|
import { componentRef, stringProp } from '@/utils/vue';
|
|
21
23
|
|
|
24
|
+
import { useInputAttrs } from '@/utils';
|
|
22
25
|
import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
|
|
23
26
|
|
|
24
27
|
import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
|
|
@@ -29,4 +32,5 @@ defineProps({ name: stringProp() });
|
|
|
29
32
|
defineOptions({ inheritAttrs: false });
|
|
30
33
|
|
|
31
34
|
const $input = componentRef<IAGHeadlessInput>();
|
|
35
|
+
const [attrs, className] = useInputAttrs();
|
|
32
36
|
</script>
|
|
@@ -7,15 +7,14 @@
|
|
|
7
7
|
<script setup lang="ts">
|
|
8
8
|
import { computed } from 'vue';
|
|
9
9
|
import { objectWithoutEmpty } from '@noeldemartin/utils';
|
|
10
|
-
import type { LocationQuery, RouteLocation, RouteParams } from 'vue-router';
|
|
11
10
|
|
|
12
11
|
import { booleanProp, objectProp, stringProp } from '@/utils/vue';
|
|
13
12
|
|
|
14
13
|
const { url, route, routeParams, routeQuery, submit } = defineProps({
|
|
15
14
|
url: stringProp(),
|
|
16
15
|
route: stringProp(),
|
|
17
|
-
routeParams: objectProp
|
|
18
|
-
routeQuery: objectProp
|
|
16
|
+
routeParams: objectProp(() => ({})),
|
|
17
|
+
routeQuery: objectProp(() => ({})),
|
|
19
18
|
submit: booleanProp(),
|
|
20
19
|
});
|
|
21
20
|
|
|
@@ -24,7 +23,7 @@ const component = computed(() => {
|
|
|
24
23
|
return {
|
|
25
24
|
tag: 'router-link',
|
|
26
25
|
props: {
|
|
27
|
-
to: objectWithoutEmpty
|
|
26
|
+
to: objectWithoutEmpty({
|
|
28
27
|
name: route,
|
|
29
28
|
params: routeParams,
|
|
30
29
|
query: routeQuery,
|
|
@@ -2,7 +2,7 @@ import type { ComputedRef, DeepReadonly, Ref } from 'vue';
|
|
|
2
2
|
|
|
3
3
|
export interface IAGHeadlessInput {
|
|
4
4
|
id: string;
|
|
5
|
-
value: ComputedRef<string | number | null>;
|
|
5
|
+
value: ComputedRef<string | number | boolean | null>;
|
|
6
6
|
errors: DeepReadonly<Ref<string[] | null>>;
|
|
7
|
-
update(value: string | number | null): void;
|
|
7
|
+
update(value: string | number | boolean | null): void;
|
|
8
8
|
}
|
|
@@ -9,16 +9,16 @@
|
|
|
9
9
|
import { computed, inject, provide, readonly } from 'vue';
|
|
10
10
|
import { uuid } from '@noeldemartin/utils';
|
|
11
11
|
|
|
12
|
-
import { stringProp } from '@/utils/vue';
|
|
12
|
+
import { mixedProp, stringProp } from '@/utils/vue';
|
|
13
13
|
import type Form from '@/forms/Form';
|
|
14
14
|
|
|
15
15
|
import type { IAGHeadlessInput } from './AGHeadlessInput';
|
|
16
16
|
|
|
17
17
|
const emit = defineEmits(['update:modelValue']);
|
|
18
18
|
const props = defineProps({
|
|
19
|
-
as: stringProp(),
|
|
19
|
+
as: stringProp('div'),
|
|
20
20
|
name: stringProp(),
|
|
21
|
-
modelValue:
|
|
21
|
+
modelValue: mixedProp<string | number | boolean>([String, Number, Boolean]),
|
|
22
22
|
});
|
|
23
23
|
const errors = computed(() => {
|
|
24
24
|
if (!form || !props.name) {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
import { computed } from 'vue';
|
|
9
9
|
|
|
10
10
|
import { injectReactiveOrFail } from '@/utils/vue';
|
|
11
|
-
import { translateWithDefault } from '@/lang';
|
|
11
|
+
import { translateWithDefault } from '@/lang/utils';
|
|
12
12
|
|
|
13
13
|
import type { IAGHeadlessInput } from './AGHeadlessInput';
|
|
14
14
|
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
<input
|
|
3
3
|
:id="input.id"
|
|
4
4
|
ref="$input"
|
|
5
|
-
type="
|
|
5
|
+
:type="type"
|
|
6
6
|
:value="value"
|
|
7
7
|
:aria-invalid="input.errors ? 'true' : 'false'"
|
|
8
8
|
:aria-describedby="input.errors ? `${input.id}-error` : undefined"
|
|
9
|
+
:checked="checked"
|
|
9
10
|
@input="update"
|
|
10
11
|
>
|
|
11
12
|
</template>
|
|
@@ -13,21 +14,32 @@
|
|
|
13
14
|
<script setup lang="ts">
|
|
14
15
|
import { computed, ref } from 'vue';
|
|
15
16
|
|
|
16
|
-
import { injectReactiveOrFail } from '@/utils';
|
|
17
|
+
import { injectReactiveOrFail, stringProp } from '@/utils';
|
|
17
18
|
import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
|
|
18
19
|
|
|
20
|
+
const props = defineProps({
|
|
21
|
+
type: stringProp('text'),
|
|
22
|
+
});
|
|
23
|
+
|
|
19
24
|
const $input = ref<HTMLInputElement>();
|
|
20
25
|
const input = injectReactiveOrFail<IAGHeadlessInput>(
|
|
21
26
|
'input',
|
|
22
27
|
'<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>',
|
|
23
28
|
);
|
|
24
29
|
const value = computed(() => input.value);
|
|
30
|
+
const checked = computed(() => {
|
|
31
|
+
if (props.type !== 'checkbox') {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return !!value.value;
|
|
36
|
+
});
|
|
25
37
|
|
|
26
38
|
function update() {
|
|
27
39
|
if (!$input.value) {
|
|
28
40
|
return;
|
|
29
41
|
}
|
|
30
42
|
|
|
31
|
-
input.update($input.value.value);
|
|
43
|
+
input.update(props.type === 'checkbox' ? $input.value.checked : $input.value.value);
|
|
32
44
|
}
|
|
33
45
|
</script>
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<DialogPanel>
|
|
3
3
|
<slot />
|
|
4
|
-
|
|
4
|
+
|
|
5
|
+
<template v-if="childModal">
|
|
6
|
+
<div class="pointer-events-none fixed inset-0 z-50 bg-black/30" />
|
|
7
|
+
<AGModalContext :child-index="modal.childIndex + 1" :modal="childModal" />
|
|
8
|
+
</template>
|
|
5
9
|
</DialogPanel>
|
|
6
10
|
</template>
|
|
7
11
|
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<AGModal :cancellable="false">
|
|
3
|
+
<AGMarkdown :text="renderedMessage" />
|
|
4
|
+
</AGModal>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script setup lang="ts">
|
|
8
|
+
import { computed } from 'vue';
|
|
9
|
+
|
|
10
|
+
import { stringProp } from '@/utils/vue';
|
|
11
|
+
import { translateWithDefault } from '@/lang/utils';
|
|
12
|
+
|
|
13
|
+
import AGModal from './AGModal.vue';
|
|
14
|
+
|
|
15
|
+
import AGMarkdown from '../basic/AGMarkdown.vue';
|
|
16
|
+
|
|
17
|
+
const props = defineProps({ message: stringProp() });
|
|
18
|
+
const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
|
|
19
|
+
</script>
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<AGHeadlessModal
|
|
2
|
+
<AGHeadlessModal
|
|
3
|
+
ref="$headlessModal"
|
|
4
|
+
v-slot="{ close }: IAGHeadlessModalDefaultSlotProps"
|
|
5
|
+
:cancellable="cancellable"
|
|
6
|
+
class="relative z-50"
|
|
7
|
+
>
|
|
3
8
|
<div class="fixed inset-0 flex items-center justify-center">
|
|
4
9
|
<AGHeadlessModalPanel class="flex max-h-full max-w-full flex-col overflow-hidden bg-white">
|
|
5
10
|
<div class="flex max-h-full flex-col overflow-auto p-4">
|
|
@@ -11,8 +16,21 @@
|
|
|
11
16
|
</template>
|
|
12
17
|
|
|
13
18
|
<script setup lang="ts">
|
|
14
|
-
import
|
|
19
|
+
import { computed, ref } from 'vue';
|
|
20
|
+
|
|
21
|
+
import { booleanProp } from '@/utils';
|
|
22
|
+
import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from '@/components/headless/modals/AGHeadlessModal';
|
|
23
|
+
|
|
24
|
+
import type { IAGModal } from './AGModal';
|
|
15
25
|
|
|
16
26
|
import AGHeadlessModal from '../headless/modals/AGHeadlessModal.vue';
|
|
17
27
|
import AGHeadlessModalPanel from '../headless/modals/AGHeadlessModalPanel.vue';
|
|
28
|
+
|
|
29
|
+
const $headlessModal = ref<IAGHeadlessModal>();
|
|
30
|
+
|
|
31
|
+
defineProps({ cancellable: booleanProp(true) });
|
|
32
|
+
defineExpose<IAGModal>({
|
|
33
|
+
close: async () => $headlessModal.value?.close(),
|
|
34
|
+
cancellable: computed(() => !!$headlessModal.value?.cancellable),
|
|
35
|
+
});
|
|
18
36
|
</script>
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import AGAlertModal from './AGAlertModal.vue';
|
|
2
2
|
import AGConfirmModal from './AGConfirmModal.vue';
|
|
3
|
+
import AGLoadingModal from './AGLoadingModal.vue';
|
|
3
4
|
import AGModal from './AGModal.vue';
|
|
4
5
|
import AGModalContext from './AGModalContext.vue';
|
|
5
6
|
import { IAGModal } from './AGModal';
|
|
6
7
|
|
|
7
|
-
export { AGAlertModal, AGConfirmModal, AGModal, AGModalContext, IAGModal };
|
|
8
|
+
export { AGAlertModal, AGConfirmModal, AGModal, AGModalContext, AGLoadingModal, IAGModal };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { JSError } from '@noeldemartin/utils';
|
|
2
|
+
|
|
3
|
+
import { defineServiceState } from '@/services';
|
|
4
|
+
|
|
5
|
+
export type ErrorSource = string | Error | JSError | unknown;
|
|
6
|
+
|
|
7
|
+
export interface ErrorReport {
|
|
8
|
+
title: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
details?: string;
|
|
11
|
+
error?: Error | JSError | unknown;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export interface ErrorReportLog {
|
|
15
|
+
report: ErrorReport;
|
|
16
|
+
seen: boolean;
|
|
17
|
+
date: Date;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export default defineServiceState({
|
|
21
|
+
name: 'errors',
|
|
22
|
+
initialState: {
|
|
23
|
+
logs: [] as ErrorReportLog[],
|
|
24
|
+
startupErrors: [] as ErrorReport[],
|
|
25
|
+
},
|
|
26
|
+
computed: {
|
|
27
|
+
hasErrors: ({ logs }) => logs.length > 0,
|
|
28
|
+
hasNewErrors: ({ logs }) => logs.some((error) => !error.seen),
|
|
29
|
+
hasStartupErrors: ({ startupErrors }) => startupErrors.length > 0,
|
|
30
|
+
},
|
|
31
|
+
});
|