ablok-components 0.0.45 → 0.0.46
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as g, openBlock as r, createElementBlock as c, normalizeClass as b, createElementVNode as i, renderSlot as m, computed as v, createBlock as C, resolveDynamicComponent as A, unref as p, withCtx as F, createTextVNode as k, toDisplayString as $, resolveComponent as x, createCommentVNode as w, withDirectives as q, isRef as O, vModelDynamic as
|
|
1
|
+
import { defineComponent as g, openBlock as r, createElementBlock as c, normalizeClass as b, createElementVNode as i, renderSlot as m, computed as v, createBlock as C, resolveDynamicComponent as A, unref as p, withCtx as F, createTextVNode as k, toDisplayString as $, resolveComponent as x, createCommentVNode as w, withDirectives as q, isRef as O, vModelDynamic as H, vModelText as L, ref as V, watch as S, onBeforeMount as T, Fragment as M, renderList as N, withModifiers as I, reactive as P, createVNode as U } from "vue";
|
|
2
2
|
const R = {
|
|
3
3
|
class: "icon",
|
|
4
4
|
preserveAspectRatio: "xMaxYMin"
|
|
@@ -104,7 +104,7 @@ const Ne = /* @__PURE__ */ g({
|
|
|
104
104
|
_: 3
|
|
105
105
|
}, 8, ["class"]));
|
|
106
106
|
}
|
|
107
|
-
}),
|
|
107
|
+
}), ze = /* @__PURE__ */ g({
|
|
108
108
|
__name: "base-paragraph",
|
|
109
109
|
props: {
|
|
110
110
|
size: null,
|
|
@@ -121,7 +121,7 @@ const Ne = /* @__PURE__ */ g({
|
|
|
121
121
|
])
|
|
122
122
|
], 2));
|
|
123
123
|
}
|
|
124
|
-
}), Q = ["type", "disabled", "href", "to"],
|
|
124
|
+
}), Q = ["type", "disabled", "href", "to"], Le = /* @__PURE__ */ g({
|
|
125
125
|
__name: "base-button",
|
|
126
126
|
props: {
|
|
127
127
|
type: null,
|
|
@@ -179,7 +179,7 @@ function y() {
|
|
|
179
179
|
const W = { class: "input-group form-input__input-group" }, Z = ["type", "id", "name", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"], _ = {
|
|
180
180
|
key: 0,
|
|
181
181
|
class: "form-input__color-swatch"
|
|
182
|
-
}, ee = ["name", "id", "disabled", "read-only", "required", "aria-label"], te = ["for", "innerHTML"],
|
|
182
|
+
}, ee = ["name", "id", "disabled", "read-only", "required", "aria-label"], te = ["for", "innerHTML"], Ue = /* @__PURE__ */ g({
|
|
183
183
|
__name: "form-input",
|
|
184
184
|
props: {
|
|
185
185
|
modelValue: {
|
|
@@ -266,7 +266,7 @@ const W = { class: "input-group form-input__input-group" }, Z = ["type", "id", "
|
|
|
266
266
|
}]),
|
|
267
267
|
"aria-label": e.label
|
|
268
268
|
}, null, 10, Z), [
|
|
269
|
-
[
|
|
269
|
+
[H, p(d)]
|
|
270
270
|
]),
|
|
271
271
|
m(t.$slots, "input-append", {}, () => [
|
|
272
272
|
e.type === "color" ? (r(), c("span", _, [
|
|
@@ -281,7 +281,7 @@ const W = { class: "input-group form-input__input-group" }, Z = ["type", "id", "
|
|
|
281
281
|
class: "form-control",
|
|
282
282
|
"aria-label": e.label
|
|
283
283
|
}, null, 8, ee), [
|
|
284
|
-
[
|
|
284
|
+
[L, p(d)]
|
|
285
285
|
])
|
|
286
286
|
])) : w("", !0)
|
|
287
287
|
])
|
|
@@ -301,7 +301,7 @@ const W = { class: "input-group form-input__input-group" }, Z = ["type", "id", "
|
|
|
301
301
|
const le = { class: "form-input form-input--textarea" }, ae = ["type", "id", "name", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "aria-label"], ne = {
|
|
302
302
|
key: 0,
|
|
303
303
|
class: "form-input__color-swatch"
|
|
304
|
-
}, de = ["name", "id", "disabled", "read-only", "required", "aria-label"], oe = ["for", "innerHTML"],
|
|
304
|
+
}, de = ["name", "id", "disabled", "read-only", "required", "aria-label"], oe = ["for", "innerHTML"], Te = /* @__PURE__ */ g({
|
|
305
305
|
__name: "input-textarea",
|
|
306
306
|
props: {
|
|
307
307
|
modelValue: {
|
|
@@ -382,7 +382,7 @@ const le = { class: "form-input form-input--textarea" }, ae = ["type", "id", "na
|
|
|
382
382
|
class: b(["form-control", {}]),
|
|
383
383
|
"aria-label": e.label
|
|
384
384
|
}, null, 8, ae), [
|
|
385
|
-
[
|
|
385
|
+
[L, p(d)]
|
|
386
386
|
]),
|
|
387
387
|
m(t.$slots, "input-append", {}, () => [
|
|
388
388
|
e.type === "color" ? (r(), c("span", ne, [
|
|
@@ -397,7 +397,7 @@ const le = { class: "form-input form-input--textarea" }, ae = ["type", "id", "na
|
|
|
397
397
|
class: "form-control",
|
|
398
398
|
"aria-label": e.label
|
|
399
399
|
}, null, 8, de), [
|
|
400
|
-
[
|
|
400
|
+
[L, p(d)]
|
|
401
401
|
])
|
|
402
402
|
])) : w("", !0)
|
|
403
403
|
]),
|
|
@@ -464,7 +464,7 @@ const le = { class: "form-input form-input--textarea" }, ae = ["type", "id", "na
|
|
|
464
464
|
return [...n, ...h];
|
|
465
465
|
}, []);
|
|
466
466
|
s("update:modelValue", a);
|
|
467
|
-
}, { deep: !0 }),
|
|
467
|
+
}, { deep: !0 }), T(() => {
|
|
468
468
|
}), (t, o) => {
|
|
469
469
|
const a = x("form-input");
|
|
470
470
|
return r(), c("div", ie, [
|
|
@@ -534,7 +534,7 @@ const le = { class: "form-input form-input--textarea" }, ae = ["type", "id", "na
|
|
|
534
534
|
function d(t) {
|
|
535
535
|
s("update:modelValue", t);
|
|
536
536
|
}
|
|
537
|
-
return
|
|
537
|
+
return T(() => {
|
|
538
538
|
}), (t, o) => {
|
|
539
539
|
const a = x("form-input");
|
|
540
540
|
return r(), c("div", re, [
|
|
@@ -738,7 +738,7 @@ const le = { class: "form-input form-input--textarea" }, ae = ["type", "id", "na
|
|
|
738
738
|
o.push(f);
|
|
739
739
|
}));
|
|
740
740
|
}
|
|
741
|
-
const t = V(), o =
|
|
741
|
+
const t = V(), o = P([]), a = v(() => o && o.map((n) => n.name));
|
|
742
742
|
return v(() => o.map((n) => URL.createObjectURL(n))), S(() => l.modelValue, (n, u) => {
|
|
743
743
|
n.length === 0 && (t.value.value = null);
|
|
744
744
|
}, { deep: !0 }), S(() => o, (n, u) => {
|
|
@@ -782,7 +782,7 @@ const le = { class: "form-input form-input--textarea" }, ae = ["type", "id", "na
|
|
|
782
782
|
])
|
|
783
783
|
]));
|
|
784
784
|
}
|
|
785
|
-
}), Ve = { class: "file-upload" }, ke = ["src"], Be = ["onClick"], we = ["for"],
|
|
785
|
+
}), Ve = { class: "file-upload" }, ke = ["src"], Be = ["onClick"], we = ["for"], He = /* @__PURE__ */ g({
|
|
786
786
|
__name: "file-upload",
|
|
787
787
|
props: {
|
|
788
788
|
modelValue: {
|
|
@@ -860,19 +860,18 @@ const le = { class: "form-input form-input--textarea" }, ae = ["type", "id", "na
|
|
|
860
860
|
}
|
|
861
861
|
async function n(u) {
|
|
862
862
|
const f = new FormData();
|
|
863
|
-
return f.append("
|
|
863
|
+
return f.append("file", u), await fetch(l.endpoint, {
|
|
864
864
|
method: "POST",
|
|
865
865
|
headers: {
|
|
866
|
-
Accept: "application/json"
|
|
867
|
-
"Content-Type": "multipart/form-data"
|
|
866
|
+
Accept: "application/json"
|
|
868
867
|
},
|
|
869
868
|
body: f
|
|
870
|
-
}).catch((
|
|
871
|
-
console.error("Error",
|
|
869
|
+
}).catch((z) => {
|
|
870
|
+
console.error("Error", z);
|
|
872
871
|
});
|
|
873
872
|
}
|
|
874
873
|
return (u, f) => {
|
|
875
|
-
const h = x("svg-icon"),
|
|
874
|
+
const h = x("svg-icon"), z = x("file-input");
|
|
876
875
|
return r(), c("div", Ve, [
|
|
877
876
|
(r(!0), c(M, null, N(p(o), (B, D) => (r(), c("div", {
|
|
878
877
|
key: B.src,
|
|
@@ -886,10 +885,10 @@ const le = { class: "form-input form-input--textarea" }, ae = ["type", "id", "na
|
|
|
886
885
|
onClick: I((qe) => a(D), ["prevent"]),
|
|
887
886
|
class: "btn btn--close"
|
|
888
887
|
}, [
|
|
889
|
-
|
|
888
|
+
U(h, { symbol: "x" })
|
|
890
889
|
], 8, Be)
|
|
891
890
|
]))), 128)),
|
|
892
|
-
|
|
891
|
+
U(z, {
|
|
893
892
|
modelValue: d.value,
|
|
894
893
|
"onUpdate:modelValue": f[0] || (f[0] = (B) => d.value = B),
|
|
895
894
|
id: e.id,
|
|
@@ -906,15 +905,15 @@ const le = { class: "form-input form-input--textarea" }, ae = ["type", "id", "na
|
|
|
906
905
|
}
|
|
907
906
|
});
|
|
908
907
|
export {
|
|
909
|
-
|
|
908
|
+
Le as BaseButton,
|
|
910
909
|
Ne as BaseHeadline,
|
|
911
|
-
|
|
910
|
+
ze as BaseParagraph,
|
|
912
911
|
Ie as CheckGroup,
|
|
913
912
|
Fe as FileInput,
|
|
914
|
-
|
|
915
|
-
|
|
913
|
+
He as FileUpload,
|
|
914
|
+
Ue as FormInput,
|
|
916
915
|
Ae as InputDropdown,
|
|
917
|
-
|
|
916
|
+
Te as InputTextarea,
|
|
918
917
|
Me as LoadingSpinner,
|
|
919
918
|
De as RadioGroup,
|
|
920
919
|
Ce as SvgIcon
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.AblokComponents={},m.Vue))})(this,function(m,e){"use strict";const b={class:"icon",preserveAspectRatio:"xMaxYMin"},g=["xlink:href"],h=e.defineComponent({__name:"svg-icon",props:{basePath:{type:String,default:"/symbol-defs.svg"},prefix:{type:String,default:"icon-"},symbol:{type:String,default:""},size:{type:String,default:"default"}},setup(t){return(c,n)=>(e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(["svg-icon",{[`svg-icon--${t.size}`]:t.size}])},[(e.openBlock(),e.createElementBlock("svg",b,[e.createElementVNode("use",{"xlink:href":`${t.basePath}#${t.prefix}${t.symbol}`,"xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0",y:"0"},null,8,g)]))],2))}}),fe="",$={class:"loading-spinner d-block"},k={class:"loading-spinner__animation"},B={class:"d-block",version:"1.1",id:"L9",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100","enable-background":"new 0 0 0 0","xml:space":"preserve"},S=["fill"],V=[e.createElementVNode("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"1s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"},null,-1)],x=e.defineComponent({__name:"loading-spinner",props:{color:{type:String,default:"#fff"}},setup(t){return(c,n)=>(e.openBlock(),e.createElementBlock("span",$,[e.createElementVNode("span",k,[(e.openBlock(),e.createElementBlock("svg",B,[e.createElementVNode("path",{fill:t.color,d:"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"},V,8,S)]))]),e.renderSlot(c.$slots,"default")]))}}),ye="",E=e.defineComponent({__name:"base-headline",props:{tag:null,size:null,variant:null,text:null,className:null},setup(t){const c=t,n=e.computed(()=>c.tag||"p");return(d,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(n)),{class:e.normalizeClass(["headline",`headline--${t.size}${t.className||""}`])},{default:e.withCtx(()=>[e.renderSlot(d.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},8,["class"]))}}),N=e.defineComponent({__name:"base-paragraph",props:{size:null,variant:null,text:null,className:null},setup(t){return(c,n)=>(e.openBlock(),e.createElementBlock("p",{class:e.normalizeClass(["base-paragraph",`base-paragraph--${t.size}${t.className||""}`])},[e.renderSlot(c.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])],2))}}),C=["type","disabled","href","to"],w=e.defineComponent({__name:"base-button",props:{type:null,caption:null,variant:null,size:null,icon:null,href:null,to:null,disabled:{type:Boolean},pending:{type:Boolean},outlined:{type:Boolean},rounded:{type:Boolean},fab:{type:Boolean}},setup(t){const c=t,n=e.computed(()=>c.caption&&!c.fab);return(d,l)=>{const r=e.resolveComponent("svg-icon");return e.openBlock(),e.createElementBlock("button",{type:t.type,disabled:t.disabled,href:t.href,to:t.to,class:e.normalizeClass(["base-button btn btn-primary",{disabled:t.disabled,pending:t.pending,rounded:t.rounded,outlined:t.outlined,fab:t.fab,"x-large":t.size==="x-large",large:t.size==="large",small:t.size==="small","x-small":t.size==="x-small"}])},[e.renderSlot(d.$slots,"default",{},()=>[t.icon?(e.openBlock(),e.createBlock(r,{key:0,id:t.icon,class:"base-button__caption"},null,8,["id"])):e.createCommentVNode("",!0),e.unref(n)?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(["base-button__caption",{"icon-padding":t.icon}])},e.toDisplayString(t.caption),3)):e.createCommentVNode("",!0)])],10,C)}}}),be="";function u(){return(new Date().valueOf()+Math.random()).toString(36)}const q={class:"input-group form-input__input-group"},z=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],O={key:0,class:"form-input__color-swatch"},T=["name","id","disabled","read-only","required","aria-label"],M=["for","innerHTML"],D=e.defineComponent({__name:"form-input",props:{modelValue:{type:[String,Number,Boolean],default:""},type:{type:String,default:"text"},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxlength:{type:Number},pattern:{type:String,default:null},checked:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:c}){const n=t,d=e.computed({get(){return n.modelValue},set(l){c("update:modelValue",l)}});return(l,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input",`form-input--${t.type}`])},[e.createElementVNode("div",q,[e.renderSlot(l.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[0]||(r[0]=a=>e.isRef(d)?d.value=a:null),type:t.type==="color"?"text":t.type,id:t.id,name:t.name,placeholder:t.placeholder,pattern:t.pattern,disabled:t.disabled,"read-only":t.readOnly,required:t.required,maxlength:t.maxlength,checked:t.checked,class:e.normalizeClass(["form-control",{"form-check-input":t.type==="checkbox"}]),"aria-label":t.label},null,10,z),[[e.vModelDynamic,e.unref(d)]]),e.renderSlot(l.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",O,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[1]||(r[1]=a=>e.isRef(d)?d.value=a:null),type:"color",name:`${t.name}-color`,id:`${t.id}-color`,disabled:t.disabled,"read-only":t.readOnly,required:t.required,class:"form-control","aria-label":t.label},null,8,T),[[e.vModelText,e.unref(d)]])])):e.createCommentVNode("",!0)])]),e.renderSlot(l.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:e.normalizeClass(["form-input__label",{"form-check-label":t.type==="checkbox"}]),innerHTML:`${t.label}${t.required?" *":""}`},null,10,M)])],2))}}),ge="",L={class:"form-input form-input--textarea"},U=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","aria-label"],F={key:0,class:"form-input__color-swatch"},I=["name","id","disabled","read-only","required","aria-label"],A=["for","innerHTML"],P=e.defineComponent({__name:"input-textarea",props:{modelValue:{type:String,default:""},type:{type:String,default:"text"},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxlength:{type:Number},pattern:{type:String,default:null},checked:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:c}){const n=t,d=e.computed({get(){return n.modelValue},set(l){c("update:modelValue",l)}});return(l,r)=>(e.openBlock(),e.createElementBlock("div",L,[e.renderSlot(l.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":r[0]||(r[0]=a=>e.isRef(d)?d.value=a:null),type:t.type==="color"?"text":t.type,id:t.id,name:t.name,placeholder:t.placeholder,pattern:t.pattern,disabled:t.disabled,"read-only":t.readOnly,required:t.required,maxlength:t.maxlength,class:e.normalizeClass(["form-control",{}]),"aria-label":t.label},null,8,U),[[e.vModelText,e.unref(d)]]),e.renderSlot(l.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",F,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[1]||(r[1]=a=>e.isRef(d)?d.value=a:null),type:"color",name:`${t.name}-color`,id:`${t.id}-color`,disabled:t.disabled,"read-only":t.readOnly,required:t.required,class:"form-control","aria-label":t.label},null,8,I),[[e.vModelText,e.unref(d)]])])):e.createCommentVNode("",!0)]),e.renderSlot(l.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:e.normalizeClass(["form-input__label",{"form-check-label":t.type==="checkbox"}]),innerHTML:`${t.label}${t.required?" *":""}`},null,10,A)])]))}}),R={class:"radio-group"},H=["for"],j=e.defineComponent({__name:"check-group",props:{modelValue:{default:[]},options:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:c}){const n=t,d=e.ref([]);return e.watch(()=>n.modelValue,(l,r)=>{d.value=n.options.map(a=>a.value?n.modelValue.some(o=>o["value "]===a.value):n.modelValue.some(o=>o===a))},{immediate:!0}),e.watch(d,(l,r)=>{const a=l.reduce((o,i,s)=>{const f=i&&n.options[s]?[n.options[s]||n.options[s]]:[];return[...o,...f]},[]);c("update:modelValue",a)},{deep:!0}),e.onBeforeMount(()=>{}),(l,r)=>{const a=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(o,i)=>(e.openBlock(),e.createBlock(a,{key:i,modelValue:e.unref(d)[i],"onUpdate:modelValue":s=>e.unref(d)[i]=s,type:"checkbox",name:t.name,id:`${t.id}-${i}`,label:`${o.text||o}${t.required?" *":""}`,disabled:t.disabled,"read-only":t.readOnly,required:t.required},null,8,["modelValue","onUpdate:modelValue","name","id","label","disabled","read-only","required"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(l.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,H)])}}}),G={class:"radio-group"},J=["for"],X=e.defineComponent({__name:"radio-group",props:{modelValue:{default:!1},options:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:c}){const n=t;e.ref(n.options.map(l=>l.value===n.modelValue));function d(l){c("update:modelValue",l)}return e.onBeforeMount(()=>{}),(l,r)=>{const a=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",G,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(o,i)=>(e.openBlock(),e.createBlock(a,{key:i,type:"radio",name:t.name,id:`${t.id}-${i}`,value:o.value||o,label:`${o.text||o}${t.required?" *":""}`,checked:o.value?o.value===t.modelValue:o===t.modelValue,disabled:t.disabled,"read-only":t.readOnly,required:t.required,onChange:s=>d(o)},null,8,["name","id","value","label","checked","disabled","read-only","required","onChange"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(l.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,J)])}}}),Y={class:"input input-dropdown"},K={class:"dropdown"},Q={class:"btn-group",role:"group"},W=["id","disabled"],Z=["aria-labelledby"],_=["onClick"],v=["for"],ee=e.defineComponent({__name:"input-dropdown",props:{modelValue:{type:[String,Number,Boolean,Object],default:""},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:"Please select"},options:{type:Array,default:[]},variant:{type:String,default:""},color:{type:String,default:""},disabled:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},required:{type:Boolean,default:!1},outline:{type:Boolean,default:!0},resetOption:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(t,{emit:c}){const n=t;e.computed({get(){return n.modelValue},set(a){c("update:modelValue",a)}});function d(a){c("update:modelValue",a)}const l=e.computed(()=>[{text:"Please select"},...n.options.map(a=>typeof a=="string"?{value:a,text:a}:a)]),r=e.computed(()=>[...n.options].find(a=>JSON.stringify(a.value)===JSON.stringify(n.modelValue)));return(a,o)=>(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("div",K,[e.createElementVNode("div",Q,[e.createElementVNode("button",{class:e.normalizeClass(["btn dropdown-toggle",{[`btn-${t.variant}`]:t.variant,[`btn-${t.color}`]:t.color,[`btn-${t.disabled}`]:t.disabled,[`btn-outline-${t.color||"dark"}`]:t.outline}]),type:"button",id:t.id,"data-bs-toggle":"dropdown","aria-expanded":"false",disabled:t.disabled},e.toDisplayString(e.unref(r)?e.unref(r).text:t.placeholder),11,W),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(l),(i,s)=>(e.openBlock(),e.createElementBlock("li",{key:s},[e.renderSlot(a.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>d(i.value),["prevent"])},e.toDisplayString(i.text),9,_)])]))),128))],8,Z)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(a.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,v)]))}}),te=["id","name","multiple","accept"],le={class:"form-input__input-group input-group"},ne=["value","id","name"],ae=["for"],oe=["for","innerHTML"],de=e.defineComponent({__name:"file-input",props:{modelValue:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},pattern:{type:String,default:null},multiple:{type:Boolean,default:!1},accept:{type:String}},emits:["update:modelValue"],setup(t,{emit:c}){const n=t;function d(o){const i=o.target&&o.target.files;i&&(r.splice(0,r.length),Array.from(i).forEach(s=>{r.push(s)}))}const l=e.ref(),r=e.reactive([]),a=e.computed(()=>r&&r.map(o=>o.name));return e.computed(()=>r.map(o=>URL.createObjectURL(o))),e.watch(()=>n.modelValue,(o,i)=>{o.length===0&&(l.value.value=null)},{deep:!0}),e.watch(()=>r,(o,i)=>{c("update:modelValue",o)},{deep:!0}),(o,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input file-input","file-input--primary"])},[e.createElementVNode("input",{ref_key:"input",ref:l,type:"file",id:t.id,name:t.name,class:"d-none",onChange:d,multiple:t.multiple,accept:t.accept},null,40,te),e.createElementVNode("div",le,[e.renderSlot(o.$slots,"input-prepend"),e.createElementVNode("input",{type:"text",value:e.unref(a),id:t.id,name:t.name,class:"form-control"},null,8,ne),e.renderSlot(o.$slots,"input-append",{},()=>[e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,ae)])]),e.renderSlot(o.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,oe)])]))}}),re={class:"file-upload"},ie=["src"],ce=["onClick"],se=["for"],me=e.defineComponent({__name:"file-upload",props:{modelValue:{type:Array,default:[]},src:{type:String},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},pattern:{type:String,default:null},multiple:{type:Boolean,default:!1},accept:{type:String,default:"image/*"},endpoint:{type:URL,default:""}},emits:["update:modelValue","update:src"],setup(t,{emit:c}){const n=t,d=e.ref([]),l=e.ref([]),r=e.computed(()=>n.modelValue.length?n.modelValue:n.src?[{type:"",src:n.src}]:l.value);e.watch(()=>d,async(i,s)=>{l.value=await Promise.all(i.value.map(async f=>({src:await o(f),type:f.type})))},{deep:!0}),e.watch(()=>l,async(i,s)=>{const f=n.multiple?l.value:l.value[0];c("update:modelValue",f),n.multiple||c("update:src",l.value[0]&&l.value[0].src)},{deep:!0});function a(i){d.value.splice(i,1)}async function o(i){const s=new FormData;return s.append("method","POST"),s.append("file",i),await fetch(n.endpoint,{method:"POST",headers:{Accept:"application/json","Content-Type":"multipart/form-data"},body:s}).catch(y=>{console.error("Error",y)})}return(i,s)=>{const f=e.resolveComponent("svg-icon"),y=e.resolveComponent("file-input");return e.openBlock(),e.createElementBlock("div",re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r),(p,ue)=>(e.openBlock(),e.createElementBlock("div",{key:p.src,class:"file-upload__thumbnail"},[e.createElementVNode("img",{src:p.src,class:"img-thumbnail rounded"},null,8,ie),e.createElementVNode("button",{onClick:e.withModifiers($e=>a(ue),["prevent"]),class:"btn btn--close"},[e.createVNode(f,{symbol:"x"})],8,ce)]))),128)),e.createVNode(y,{modelValue:d.value,"onUpdate:modelValue":s[0]||(s[0]=p=>d.value=p),id:t.id,name:t.name,accept:t.accept,class:"d-none"},null,8,["modelValue","id","name","accept"]),e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,se)])}}}),he="";m.BaseButton=w,m.BaseHeadline=E,m.BaseParagraph=N,m.CheckGroup=j,m.FileInput=de,m.FileUpload=me,m.FormInput=D,m.InputDropdown=ee,m.InputTextarea=P,m.LoadingSpinner=x,m.RadioGroup=X,m.SvgIcon=h,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
1
|
+
(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.AblokComponents={},s.Vue))})(this,function(s,e){"use strict";const b={class:"icon",preserveAspectRatio:"xMaxYMin"},g=["xlink:href"],h=e.defineComponent({__name:"svg-icon",props:{basePath:{type:String,default:"/symbol-defs.svg"},prefix:{type:String,default:"icon-"},symbol:{type:String,default:""},size:{type:String,default:"default"}},setup(t){return(c,n)=>(e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(["svg-icon",{[`svg-icon--${t.size}`]:t.size}])},[(e.openBlock(),e.createElementBlock("svg",b,[e.createElementVNode("use",{"xlink:href":`${t.basePath}#${t.prefix}${t.symbol}`,"xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0",y:"0"},null,8,g)]))],2))}}),fe="",$={class:"loading-spinner d-block"},k={class:"loading-spinner__animation"},B={class:"d-block",version:"1.1",id:"L9",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100","enable-background":"new 0 0 0 0","xml:space":"preserve"},S=["fill"],V=[e.createElementVNode("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"1s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"},null,-1)],x=e.defineComponent({__name:"loading-spinner",props:{color:{type:String,default:"#fff"}},setup(t){return(c,n)=>(e.openBlock(),e.createElementBlock("span",$,[e.createElementVNode("span",k,[(e.openBlock(),e.createElementBlock("svg",B,[e.createElementVNode("path",{fill:t.color,d:"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"},V,8,S)]))]),e.renderSlot(c.$slots,"default")]))}}),ye="",E=e.defineComponent({__name:"base-headline",props:{tag:null,size:null,variant:null,text:null,className:null},setup(t){const c=t,n=e.computed(()=>c.tag||"p");return(d,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(n)),{class:e.normalizeClass(["headline",`headline--${t.size}${t.className||""}`])},{default:e.withCtx(()=>[e.renderSlot(d.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},8,["class"]))}}),N=e.defineComponent({__name:"base-paragraph",props:{size:null,variant:null,text:null,className:null},setup(t){return(c,n)=>(e.openBlock(),e.createElementBlock("p",{class:e.normalizeClass(["base-paragraph",`base-paragraph--${t.size}${t.className||""}`])},[e.renderSlot(c.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])],2))}}),C=["type","disabled","href","to"],w=e.defineComponent({__name:"base-button",props:{type:null,caption:null,variant:null,size:null,icon:null,href:null,to:null,disabled:{type:Boolean},pending:{type:Boolean},outlined:{type:Boolean},rounded:{type:Boolean},fab:{type:Boolean}},setup(t){const c=t,n=e.computed(()=>c.caption&&!c.fab);return(d,l)=>{const r=e.resolveComponent("svg-icon");return e.openBlock(),e.createElementBlock("button",{type:t.type,disabled:t.disabled,href:t.href,to:t.to,class:e.normalizeClass(["base-button btn btn-primary",{disabled:t.disabled,pending:t.pending,rounded:t.rounded,outlined:t.outlined,fab:t.fab,"x-large":t.size==="x-large",large:t.size==="large",small:t.size==="small","x-small":t.size==="x-small"}])},[e.renderSlot(d.$slots,"default",{},()=>[t.icon?(e.openBlock(),e.createBlock(r,{key:0,id:t.icon,class:"base-button__caption"},null,8,["id"])):e.createCommentVNode("",!0),e.unref(n)?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(["base-button__caption",{"icon-padding":t.icon}])},e.toDisplayString(t.caption),3)):e.createCommentVNode("",!0)])],10,C)}}}),be="";function u(){return(new Date().valueOf()+Math.random()).toString(36)}const q={class:"input-group form-input__input-group"},z=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],M={key:0,class:"form-input__color-swatch"},O=["name","id","disabled","read-only","required","aria-label"],T=["for","innerHTML"],D=e.defineComponent({__name:"form-input",props:{modelValue:{type:[String,Number,Boolean],default:""},type:{type:String,default:"text"},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxlength:{type:Number},pattern:{type:String,default:null},checked:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:c}){const n=t,d=e.computed({get(){return n.modelValue},set(l){c("update:modelValue",l)}});return(l,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input",`form-input--${t.type}`])},[e.createElementVNode("div",q,[e.renderSlot(l.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[0]||(r[0]=a=>e.isRef(d)?d.value=a:null),type:t.type==="color"?"text":t.type,id:t.id,name:t.name,placeholder:t.placeholder,pattern:t.pattern,disabled:t.disabled,"read-only":t.readOnly,required:t.required,maxlength:t.maxlength,checked:t.checked,class:e.normalizeClass(["form-control",{"form-check-input":t.type==="checkbox"}]),"aria-label":t.label},null,10,z),[[e.vModelDynamic,e.unref(d)]]),e.renderSlot(l.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",M,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[1]||(r[1]=a=>e.isRef(d)?d.value=a:null),type:"color",name:`${t.name}-color`,id:`${t.id}-color`,disabled:t.disabled,"read-only":t.readOnly,required:t.required,class:"form-control","aria-label":t.label},null,8,O),[[e.vModelText,e.unref(d)]])])):e.createCommentVNode("",!0)])]),e.renderSlot(l.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:e.normalizeClass(["form-input__label",{"form-check-label":t.type==="checkbox"}]),innerHTML:`${t.label}${t.required?" *":""}`},null,10,T)])],2))}}),ge="",L={class:"form-input form-input--textarea"},U=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","aria-label"],F={key:0,class:"form-input__color-swatch"},I=["name","id","disabled","read-only","required","aria-label"],A=["for","innerHTML"],R=e.defineComponent({__name:"input-textarea",props:{modelValue:{type:String,default:""},type:{type:String,default:"text"},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxlength:{type:Number},pattern:{type:String,default:null},checked:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:c}){const n=t,d=e.computed({get(){return n.modelValue},set(l){c("update:modelValue",l)}});return(l,r)=>(e.openBlock(),e.createElementBlock("div",L,[e.renderSlot(l.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":r[0]||(r[0]=a=>e.isRef(d)?d.value=a:null),type:t.type==="color"?"text":t.type,id:t.id,name:t.name,placeholder:t.placeholder,pattern:t.pattern,disabled:t.disabled,"read-only":t.readOnly,required:t.required,maxlength:t.maxlength,class:e.normalizeClass(["form-control",{}]),"aria-label":t.label},null,8,U),[[e.vModelText,e.unref(d)]]),e.renderSlot(l.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",F,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[1]||(r[1]=a=>e.isRef(d)?d.value=a:null),type:"color",name:`${t.name}-color`,id:`${t.id}-color`,disabled:t.disabled,"read-only":t.readOnly,required:t.required,class:"form-control","aria-label":t.label},null,8,I),[[e.vModelText,e.unref(d)]])])):e.createCommentVNode("",!0)]),e.renderSlot(l.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:e.normalizeClass(["form-input__label",{"form-check-label":t.type==="checkbox"}]),innerHTML:`${t.label}${t.required?" *":""}`},null,10,A)])]))}}),P={class:"radio-group"},H=["for"],j=e.defineComponent({__name:"check-group",props:{modelValue:{default:[]},options:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:c}){const n=t,d=e.ref([]);return e.watch(()=>n.modelValue,(l,r)=>{d.value=n.options.map(a=>a.value?n.modelValue.some(o=>o["value "]===a.value):n.modelValue.some(o=>o===a))},{immediate:!0}),e.watch(d,(l,r)=>{const a=l.reduce((o,i,m)=>{const f=i&&n.options[m]?[n.options[m]||n.options[m]]:[];return[...o,...f]},[]);c("update:modelValue",a)},{deep:!0}),e.onBeforeMount(()=>{}),(l,r)=>{const a=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",P,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(o,i)=>(e.openBlock(),e.createBlock(a,{key:i,modelValue:e.unref(d)[i],"onUpdate:modelValue":m=>e.unref(d)[i]=m,type:"checkbox",name:t.name,id:`${t.id}-${i}`,label:`${o.text||o}${t.required?" *":""}`,disabled:t.disabled,"read-only":t.readOnly,required:t.required},null,8,["modelValue","onUpdate:modelValue","name","id","label","disabled","read-only","required"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(l.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,H)])}}}),G={class:"radio-group"},J=["for"],X=e.defineComponent({__name:"radio-group",props:{modelValue:{default:!1},options:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:c}){const n=t;e.ref(n.options.map(l=>l.value===n.modelValue));function d(l){c("update:modelValue",l)}return e.onBeforeMount(()=>{}),(l,r)=>{const a=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",G,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(o,i)=>(e.openBlock(),e.createBlock(a,{key:i,type:"radio",name:t.name,id:`${t.id}-${i}`,value:o.value||o,label:`${o.text||o}${t.required?" *":""}`,checked:o.value?o.value===t.modelValue:o===t.modelValue,disabled:t.disabled,"read-only":t.readOnly,required:t.required,onChange:m=>d(o)},null,8,["name","id","value","label","checked","disabled","read-only","required","onChange"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(l.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,J)])}}}),Y={class:"input input-dropdown"},K={class:"dropdown"},Q={class:"btn-group",role:"group"},W=["id","disabled"],Z=["aria-labelledby"],_=["onClick"],v=["for"],ee=e.defineComponent({__name:"input-dropdown",props:{modelValue:{type:[String,Number,Boolean,Object],default:""},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:"Please select"},options:{type:Array,default:[]},variant:{type:String,default:""},color:{type:String,default:""},disabled:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},required:{type:Boolean,default:!1},outline:{type:Boolean,default:!0},resetOption:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(t,{emit:c}){const n=t;e.computed({get(){return n.modelValue},set(a){c("update:modelValue",a)}});function d(a){c("update:modelValue",a)}const l=e.computed(()=>[{text:"Please select"},...n.options.map(a=>typeof a=="string"?{value:a,text:a}:a)]),r=e.computed(()=>[...n.options].find(a=>JSON.stringify(a.value)===JSON.stringify(n.modelValue)));return(a,o)=>(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("div",K,[e.createElementVNode("div",Q,[e.createElementVNode("button",{class:e.normalizeClass(["btn dropdown-toggle",{[`btn-${t.variant}`]:t.variant,[`btn-${t.color}`]:t.color,[`btn-${t.disabled}`]:t.disabled,[`btn-outline-${t.color||"dark"}`]:t.outline}]),type:"button",id:t.id,"data-bs-toggle":"dropdown","aria-expanded":"false",disabled:t.disabled},e.toDisplayString(e.unref(r)?e.unref(r).text:t.placeholder),11,W),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(l),(i,m)=>(e.openBlock(),e.createElementBlock("li",{key:m},[e.renderSlot(a.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>d(i.value),["prevent"])},e.toDisplayString(i.text),9,_)])]))),128))],8,Z)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(a.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,v)]))}}),te=["id","name","multiple","accept"],le={class:"form-input__input-group input-group"},ne=["value","id","name"],ae=["for"],oe=["for","innerHTML"],de=e.defineComponent({__name:"file-input",props:{modelValue:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},pattern:{type:String,default:null},multiple:{type:Boolean,default:!1},accept:{type:String}},emits:["update:modelValue"],setup(t,{emit:c}){const n=t;function d(o){const i=o.target&&o.target.files;i&&(r.splice(0,r.length),Array.from(i).forEach(m=>{r.push(m)}))}const l=e.ref(),r=e.reactive([]),a=e.computed(()=>r&&r.map(o=>o.name));return e.computed(()=>r.map(o=>URL.createObjectURL(o))),e.watch(()=>n.modelValue,(o,i)=>{o.length===0&&(l.value.value=null)},{deep:!0}),e.watch(()=>r,(o,i)=>{c("update:modelValue",o)},{deep:!0}),(o,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input file-input","file-input--primary"])},[e.createElementVNode("input",{ref_key:"input",ref:l,type:"file",id:t.id,name:t.name,class:"d-none",onChange:d,multiple:t.multiple,accept:t.accept},null,40,te),e.createElementVNode("div",le,[e.renderSlot(o.$slots,"input-prepend"),e.createElementVNode("input",{type:"text",value:e.unref(a),id:t.id,name:t.name,class:"form-control"},null,8,ne),e.renderSlot(o.$slots,"input-append",{},()=>[e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,ae)])]),e.renderSlot(o.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,oe)])]))}}),re={class:"file-upload"},ie=["src"],ce=["onClick"],se=["for"],me=e.defineComponent({__name:"file-upload",props:{modelValue:{type:Array,default:[]},src:{type:String},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},pattern:{type:String,default:null},multiple:{type:Boolean,default:!1},accept:{type:String,default:"image/*"},endpoint:{type:URL,default:""}},emits:["update:modelValue","update:src"],setup(t,{emit:c}){const n=t,d=e.ref([]),l=e.ref([]),r=e.computed(()=>n.modelValue.length?n.modelValue:n.src?[{type:"",src:n.src}]:l.value);e.watch(()=>d,async(i,m)=>{l.value=await Promise.all(i.value.map(async f=>({src:await o(f),type:f.type})))},{deep:!0}),e.watch(()=>l,async(i,m)=>{const f=n.multiple?l.value:l.value[0];c("update:modelValue",f),n.multiple||c("update:src",l.value[0]&&l.value[0].src)},{deep:!0});function a(i){d.value.splice(i,1)}async function o(i){const m=new FormData;return m.append("file",i),await fetch(n.endpoint,{method:"POST",headers:{Accept:"application/json"},body:m}).catch(y=>{console.error("Error",y)})}return(i,m)=>{const f=e.resolveComponent("svg-icon"),y=e.resolveComponent("file-input");return e.openBlock(),e.createElementBlock("div",re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r),(p,ue)=>(e.openBlock(),e.createElementBlock("div",{key:p.src,class:"file-upload__thumbnail"},[e.createElementVNode("img",{src:p.src,class:"img-thumbnail rounded"},null,8,ie),e.createElementVNode("button",{onClick:e.withModifiers($e=>a(ue),["prevent"]),class:"btn btn--close"},[e.createVNode(f,{symbol:"x"})],8,ce)]))),128)),e.createVNode(y,{modelValue:d.value,"onUpdate:modelValue":m[0]||(m[0]=p=>d.value=p),id:t.id,name:t.name,accept:t.accept,class:"d-none"},null,8,["modelValue","id","name","accept"]),e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,se)])}}}),he="";s.BaseButton=w,s.BaseHeadline=E,s.BaseParagraph=N,s.CheckGroup=j,s.FileInput=de,s.FileUpload=me,s.FormInput=D,s.InputDropdown=ee,s.InputTextarea=R,s.LoadingSpinner=x,s.RadioGroup=X,s.SvgIcon=h,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|