@7pmlabs/design-system 0.4.5 → 0.4.7

package/dist/design-system44.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system84.js");require("./design-system85.js");const r=require("./design-system52.js"),t=r(e,[["__scopeId","data-v-1f555f5e"]]);module.exports=t;
+"use strict";const e=require("./design-system84.js");require("./design-system85.js");const r=require("./design-system52.js"),t=r(e,[["__scopeId","data-v-fec0801f"]]);module.exports=t;
 //# sourceMappingURL=design-system44.js.map

package/dist/design-system44.mjs

@@ -1,7 +1,7 @@
 import o from "./design-system84.mjs";
 import "./design-system85.mjs";
 import r from "./design-system52.mjs";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1f555f5e"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-fec0801f"]]);
 export {
   m as default
 };

package/dist/design-system55.js

@@ -1,4 +1,4 @@
-"use strict";const e=require("vue"),a=require("./design-system5.js"),p=require("./design-system94.js"),m=["id","disabled","value"],b=["for"],f=["for"],k=`
+"use strict";const e=require("vue"),a=require("./design-system5.js"),p=require("./design-system93.js"),m=["id","disabled","value"],b=["for"],f=["for"],k=`
   peer-checked:ds-text-transparent peer-checked:ds-bg-gradient-to-r peer-checked:ds-from-primary-f-stop peer-checked:ds-from-primary-f peer-checked:ds-to-primary-t
   peer-checked:after:ds-opacity-100
 `,h=e.defineComponent({__name:"BCheckbox",props:{inputId:{default:""},inputCssClass:{default:""},modelValue:{type:[Boolean,Array],default:!1},label:{default:""},labelOrphan:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{default:a.BCheckboxSize.Medium}},emits:["update:modelValue"],setup(r,{emit:u}){const l=r,t=e.computed(()=>l.inputId||`id-${p()}`),o=e.computed({get(){return l.modelValue},set(s){u("update:modelValue",s)}}),n=e.computed(()=>{let s="";switch(l.size){case a.BCheckboxSize.Small:s+="size-sm ";break;case a.BCheckboxSize.Medium:default:s+=" ";break}return s}),i=e.computed(()=>[l.inputCssClass,{"ds-cursor-not-allowed":l.disabled}]);return(s,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([n.value,"b-checkbox ds-flex ds-items-center"])},[e.withDirectives(e.createElementVNode("input",{id:t.value,"onUpdate:modelValue":d[0]||(d[0]=c=>o.value=c),class:e.normalizeClass([i.value,"ds-peer ds-invisible"]),disabled:s.disabled,value:s.$attrs.value,type:"checkbox"},null,10,m),[[e.vModelCheckbox,o.value]]),e.createElementVNode("label",{class:e.normalizeClass([k,"input-label"]),for:t.value},null,8,b),s.label||s.$slots.default?(e.openBlock(),e.createElementBlock("label",{key:0,for:s.labelOrphan?void 0:t.value,class:"ds-ml-2 ds-text-sm ds-font-medium ds-text-gray-900"},[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(l.label),1)],!0)],8,f)):e.createCommentVNode("",!0)],2))}});module.exports=h;

package/dist/design-system55.mjs

@@ -1,6 +1,6 @@
 import { defineComponent as h, computed as s, openBlock as u, createElementBlock as i, normalizeClass as t, withDirectives as v, createElementVNode as n, vModelCheckbox as k, renderSlot as C, createTextVNode as y, toDisplayString as V, createCommentVNode as B } from "vue";
 import { BCheckboxSize as d } from "./design-system5.mjs";
-import g from "./design-system94.mjs";
+import g from "./design-system93.mjs";
 const x = ["id", "disabled", "value"], z = ["for"], S = ["for"], _ = `
   peer-checked:ds-text-transparent peer-checked:ds-bg-gradient-to-r peer-checked:ds-from-primary-f-stop peer-checked:ds-from-primary-f peer-checked:ds-to-primary-t
   peer-checked:after:ds-opacity-100

package/dist/design-system75.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),k=require("./design-system94.js"),C={class:"ds-flex ds-flex-wrap ds-overflow-hidden ds-rounded-lg ds-border ds-border-gray-100 ds-bg-gray-100"},_=["onClick"],g=["id"],y=e.defineComponent({__name:"BTabs",props:{headers:{},modelValue:{default:void 0},headerCssClass:{default:""}},emits:["update:modelValue"],setup(p,{emit:b}){const r=p,o=e.ref(null),l=e.ref(null),s=e.ref(null),t=e.ref(0),n=e.ref(0),u=e.computed({get(){return r.modelValue!==void 0?r.modelValue:n.value},set(a){r.modelValue!==void 0?b("update:modelValue",a):n.value=a}}),c=e.computed(()=>`id-${k()}`);e.watch(u,a=>{i(a)}),e.watch(()=>r.headers,()=>{e.nextTick(()=>{v()})});const h=a=>{u.value=a},i=a=>{if(s.value&&l.value)if(t.value=a,[...s.value,...l.value].forEach(d=>{d.classList.remove("active")}),s.value[t.value]&&l.value[t.value])s.value[t.value].classList.add("active"),l.value[t.value].classList.add("active");else{const d=t.value-1;d>=0&&(s.value[d].classList.add("active"),l.value[d].classList.add("active"))}},v=()=>{o.value&&(s.value=[...o.value.querySelectorAll(`#${c.value} > .tab`)],s.value.forEach(a=>{a.classList.contains("active")&&(t.value=s.value.indexOf(a))}),i(t.value))};return e.onMounted(()=>{v()}),(a,d)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"tabContainer",ref:o},[e.renderSlot(a.$slots,"headers-prepend",{},void 0,!0),e.createElementVNode("ul",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.headers,(f,m)=>(e.openBlock(),e.createElementBlock("li",{key:m,ref_for:!0,ref_key:"tabHeaders",ref:l,class:e.normalizeClass([[a.headerCssClass,f.disabled?"ds-pointer-events-none ds-text-black/40":""],"tab-header ds-min-w-[5rem] ds-flex-1 ds-cursor-pointer ds-rounded-lg ds-p-2 ds-text-center ds-text-sm ds-font-medium ds-capitalize hover:ds-bg-slate-50 hover:ds-text-primary-t"]),onClick:V=>h(m)},e.toDisplayString(f.text),11,_))),128))]),e.renderSlot(a.$slots,"headers-append",{},void 0,!0),e.createElementVNode("div",{id:c.value,class:"ds-w-full"},[e.renderSlot(a.$slots,"default",{},void 0,!0)],8,g)],512))}});module.exports=y;
+"use strict";const e=require("vue"),k=require("./design-system93.js"),C={class:"ds-flex ds-flex-wrap ds-overflow-hidden ds-rounded-lg ds-border ds-border-gray-100 ds-bg-gray-100"},_=["onClick"],g=["id"],y=e.defineComponent({__name:"BTabs",props:{headers:{},modelValue:{default:void 0},headerCssClass:{default:""}},emits:["update:modelValue"],setup(p,{emit:b}){const r=p,o=e.ref(null),l=e.ref(null),s=e.ref(null),t=e.ref(0),n=e.ref(0),u=e.computed({get(){return r.modelValue!==void 0?r.modelValue:n.value},set(a){r.modelValue!==void 0?b("update:modelValue",a):n.value=a}}),c=e.computed(()=>`id-${k()}`);e.watch(u,a=>{i(a)}),e.watch(()=>r.headers,()=>{e.nextTick(()=>{v()})});const h=a=>{u.value=a},i=a=>{if(s.value&&l.value)if(t.value=a,[...s.value,...l.value].forEach(d=>{d.classList.remove("active")}),s.value[t.value]&&l.value[t.value])s.value[t.value].classList.add("active"),l.value[t.value].classList.add("active");else{const d=t.value-1;d>=0&&(s.value[d].classList.add("active"),l.value[d].classList.add("active"))}},v=()=>{o.value&&(s.value=[...o.value.querySelectorAll(`#${c.value} > .tab`)],s.value.forEach(a=>{a.classList.contains("active")&&(t.value=s.value.indexOf(a))}),i(t.value))};return e.onMounted(()=>{v()}),(a,d)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"tabContainer",ref:o},[e.renderSlot(a.$slots,"headers-prepend",{},void 0,!0),e.createElementVNode("ul",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.headers,(f,m)=>(e.openBlock(),e.createElementBlock("li",{key:m,ref_for:!0,ref_key:"tabHeaders",ref:l,class:e.normalizeClass([[a.headerCssClass,f.disabled?"ds-pointer-events-none ds-text-black/40":""],"tab-header ds-min-w-[5rem] ds-flex-1 ds-cursor-pointer ds-rounded-lg ds-p-2 ds-text-center ds-text-sm ds-font-medium ds-capitalize hover:ds-bg-slate-50 hover:ds-text-primary-t"]),onClick:V=>h(m)},e.toDisplayString(f.text),11,_))),128))]),e.renderSlot(a.$slots,"headers-append",{},void 0,!0),e.createElementVNode("div",{id:c.value,class:"ds-w-full"},[e.renderSlot(a.$slots,"default",{},void 0,!0)],8,g)],512))}});module.exports=y;
 //# sourceMappingURL=design-system75.js.map

package/dist/design-system75.mjs

@@ -1,5 +1,5 @@
 import { defineComponent as V, ref as d, computed as C, watch as k, nextTick as L, onMounted as T, openBlock as n, createElementBlock as u, renderSlot as i, createElementVNode as _, Fragment as $, renderList as w, normalizeClass as B, toDisplayString as E } from "vue";
-import H from "./design-system94.mjs";
+import H from "./design-system93.mjs";
 const I = { class: "ds-flex ds-flex-wrap ds-overflow-hidden ds-rounded-lg ds-border ds-border-gray-100 ds-bg-gray-100" }, S = ["onClick"], z = ["id"], F = /* @__PURE__ */ V({
   __name: "BTabs",
   props: {

package/dist/design-system78.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("vue"),B=require("./design-system3.js"),k=require("./design-system48.js"),q=require("./design-system29.js"),V=require("./design-system30.js"),C=require("./design-system94.js"),x={class:"b-text-field"},E={class:"ds-relative"},I={key:0,class:"b-text-field__prepend-icon ds-absolute ds-left-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"},R=["id","autocomplete","disabled","inputmode","placeholder","readonly","type","onKeyup"],M={key:1,class:"b-text-field__append-icon ds-absolute ds-right-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"},N=t.defineComponent({__name:"BTextField",props:{inputId:{default:""},inputCssClass:{default:""},validationRules:{default:void 0},modelValue:{},label:{default:""},placeholder:{default:""},autocomplete:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},type:{default:"text"},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},hideDetails:{type:Boolean,default:!1},inputHandler:{default:void 0},inputmode:{default:"text"}},emits:["focus","blur","press:enter","update:modelValue"],setup(p,{expose:c,emit:o}){const s=p,{t:f}=k.useI18n(),d=t.ref(null),m={validateRule:e=>typeof e=="number"?!!e:!!(e&&(e!=null&&e.trim())),errorMessage:()=>s.requiredErrorMessage||f("ds.global.field_required")},r=t.computed(()=>s.inputId||`id-${C()}`),u=t.computed({get(){return s.modelValue},set(e){o("update:modelValue",e)}}),v=t.computed(()=>[{"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]":s.disabled,"ds-text-black/[0.85]":!s.disabled,"ds-border-error focus:ds-ring-1 focus:ds-ring-error":!n.value.valid,"ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus":n.value.valid},s.inputCssClass]),b=t.computed(()=>{let e=[];return s.required&&e.push(m),s.validationRules&&(e=e.concat(s.validationRules)),e.length?e:void 0}),{validate:i,validationResult:n}=B.useValidationField(r.value,u,b.value),y=()=>{o("press:enter")},_=()=>{o("focus")},g=()=>{o("blur")},h=()=>{i()};return c({validate:i,focus:()=>{var e;(e=d.value)==null||e.focus()},blur:()=>{var e;(e=d.value)==null||e.blur()}}),(e,l)=>(t.openBlock(),t.createElementBlock("div",x,[t.createVNode(V,{id:r.value,label:e.label,required:e.required},null,8,["id","label","required"]),t.createElementVNode("div",E,[e.$slots.prependIcon?(t.openBlock(),t.createElementBlock("div",I,[t.renderSlot(e.$slots,"prependIcon",{},void 0,!0)])):t.createCommentVNode("",!0),t.withDirectives(t.createElementVNode("input",{id:r.value,ref_key:"inputRef",ref:d,"onUpdate:modelValue":l[0]||(l[0]=a=>u.value=a),autocomplete:s.autocomplete?"on":"off",disabled:s.disabled,inputmode:s.inputmode,placeholder:s.placeholder,readonly:s.readonly,type:s.type,class:t.normalizeClass([[v.value],"ds-block ds-h-[40px] ds-w-full ds-rounded-lg ds-border ds-px-3 ds-text-sm ds-drop-shadow-light"]),onBlur:g,onFocus:_,onInput:l[1]||(l[1]=(...a)=>e.inputHandler&&e.inputHandler(...a)),onKeyup:[h,t.withKeys(y,["enter"])]},null,42,R),[[t.vModelDynamic,u.value]]),e.$slots.appendIcon?(t.openBlock(),t.createElementBlock("div",M,[t.renderSlot(e.$slots,"appendIcon",{},void 0,!0)])):t.createCommentVNode("",!0)]),e.hideDetails?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(q,{key:0,"error-message":t.unref(n).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))]))}});module.exports=N;
+"use strict";const t=require("vue"),B=require("./design-system3.js"),k=require("./design-system48.js"),q=require("./design-system29.js"),V=require("./design-system30.js"),C=require("./design-system93.js"),x={class:"b-text-field"},E={class:"ds-relative"},I={key:0,class:"b-text-field__prepend-icon ds-absolute ds-left-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"},R=["id","autocomplete","disabled","inputmode","placeholder","readonly","type","onKeyup"],M={key:1,class:"b-text-field__append-icon ds-absolute ds-right-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"},N=t.defineComponent({__name:"BTextField",props:{inputId:{default:""},inputCssClass:{default:""},validationRules:{default:void 0},modelValue:{},label:{default:""},placeholder:{default:""},autocomplete:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},type:{default:"text"},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},hideDetails:{type:Boolean,default:!1},inputHandler:{default:void 0},inputmode:{default:"text"}},emits:["focus","blur","press:enter","update:modelValue"],setup(p,{expose:c,emit:o}){const s=p,{t:f}=k.useI18n(),d=t.ref(null),m={validateRule:e=>typeof e=="number"?!!e:!!(e&&(e!=null&&e.trim())),errorMessage:()=>s.requiredErrorMessage||f("ds.global.field_required")},r=t.computed(()=>s.inputId||`id-${C()}`),u=t.computed({get(){return s.modelValue},set(e){o("update:modelValue",e)}}),v=t.computed(()=>[{"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]":s.disabled,"ds-text-black/[0.85]":!s.disabled,"ds-border-error focus:ds-ring-1 focus:ds-ring-error":!n.value.valid,"ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus":n.value.valid},s.inputCssClass]),b=t.computed(()=>{let e=[];return s.required&&e.push(m),s.validationRules&&(e=e.concat(s.validationRules)),e.length?e:void 0}),{validate:i,validationResult:n}=B.useValidationField(r.value,u,b.value),y=()=>{o("press:enter")},_=()=>{o("focus")},g=()=>{o("blur")},h=()=>{i()};return c({validate:i,focus:()=>{var e;(e=d.value)==null||e.focus()},blur:()=>{var e;(e=d.value)==null||e.blur()}}),(e,l)=>(t.openBlock(),t.createElementBlock("div",x,[t.createVNode(V,{id:r.value,label:e.label,required:e.required},null,8,["id","label","required"]),t.createElementVNode("div",E,[e.$slots.prependIcon?(t.openBlock(),t.createElementBlock("div",I,[t.renderSlot(e.$slots,"prependIcon",{},void 0,!0)])):t.createCommentVNode("",!0),t.withDirectives(t.createElementVNode("input",{id:r.value,ref_key:"inputRef",ref:d,"onUpdate:modelValue":l[0]||(l[0]=a=>u.value=a),autocomplete:s.autocomplete?"on":"off",disabled:s.disabled,inputmode:s.inputmode,placeholder:s.placeholder,readonly:s.readonly,type:s.type,class:t.normalizeClass([[v.value],"ds-block ds-h-[40px] ds-w-full ds-rounded-lg ds-border ds-px-3 ds-text-sm ds-drop-shadow-light"]),onBlur:g,onFocus:_,onInput:l[1]||(l[1]=(...a)=>e.inputHandler&&e.inputHandler(...a)),onKeyup:[h,t.withKeys(y,["enter"])]},null,42,R),[[t.vModelDynamic,u.value]]),e.$slots.appendIcon?(t.openBlock(),t.createElementBlock("div",M,[t.renderSlot(e.$slots,"appendIcon",{},void 0,!0)])):t.createCommentVNode("",!0)]),e.hideDetails?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(q,{key:0,"error-message":t.unref(n).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))]))}});module.exports=N;
 //# sourceMappingURL=design-system78.js.map

package/dist/design-system78.mjs

@@ -3,7 +3,7 @@ import { useValidationField as z } from "./design-system3.mjs";
 import { useI18n as F } from "./design-system48.mjs";
 import H from "./design-system29.mjs";
 import N from "./design-system30.mjs";
-import U from "./design-system94.mjs";
+import U from "./design-system93.mjs";
 const S = { class: "b-text-field" }, T = { class: "ds-relative" }, j = {
   key: 0,
   class: "b-text-field__prepend-icon ds-absolute ds-left-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"

package/dist/design-system84.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("vue"),h=require("./design-system4.js"),L=require("./design-system48.js"),P=require("./design-system101.js"),j=require("./design-system45.js"),A=require("./design-system3.js"),$=require("./design-system30.js"),U=require("./design-system11.js"),H=require("./design-system29.js"),O=require("./design-system94.js"),G=require("./design-system99.js"),J=d=>(t.pushScopeId("data-v-1f555f5e"),d=d(),t.popScopeId(),d),K={class:"b-image-picker ds-w-full"},Q={class:"ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow"},W={key:0,class:"ds-flex ds-flex-wrap ds-justify-center ds-gap-1"},X=["onClick","onDragenter","onDragstart","onDrop"],Y=["src"],Z={class:"ds-flex ds-flex-wrap ds-justify-center"},ee=J(()=>t.createElementVNode("svg",{class:"ds-absolute -ds-bottom-[3px] ds-left-0 ds-h-4 ds-w-4 ds-fill-primary-t",viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"},[t.createElementVNode("path",{d:"M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z"})],-1)),te=["accept","multiple"],ae=t.defineComponent({__name:"BImagePicker",props:{inputId:{default:""},modelValue:{},label:{default:""},multiple:{type:Boolean,default:!1},maxFileSize:{default:20},hideDetails:{type:Boolean,default:!1},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},validationRules:{default:void 0}},emits:["change","update:modelValue"],setup(d,{expose:y,emit:c}){const l=d,{t:g}=L.useI18n(),p=t.ref(null),f=t.ref(0),n=t.computed({get(){return l.modelValue},set(e){c("update:modelValue",e)}}),v=t.ref(!0),m=t.ref(!0),i=t.ref({visible:!1,url:""}),_=t.computed(()=>h.FileImageTypes.join(", ")),k=t.computed(()=>l.inputId||`id-${O()}`),V={validateRule:e=>!!e&&e.length>0,errorMessage:()=>l.requiredErrorMessage||g("ds.global.field_required")},B={validateRule:()=>v.value,errorMessage:()=>g("ds.components.base.image_picker.file_types_valid",{types:_.value})},D={validateRule:()=>m.value,errorMessage:()=>g("ds.components.base.image_picker.file_size_valid",{size:l.maxFileSize})},w=t.computed(()=>{let e=[];return l.required&&e.push(V),l.validationRules&&(e=e.concat(l.validationRules)),e.push(B),e.push(D),e.length?e:void 0}),{validate:u,validationResult:I}=A.useValidationField(k.value,n,w.value),b=(e,a)=>{f.value=e,a.target.classList.add("dragging"),a.dataTransfer.effectAllowed="move",a.dataTransfer.setData("index",e.toString())},C=e=>{e.target.classList.remove("dragging")},E=(e,a)=>{const s=a.target;f.value!==e&&s.classList.add("dropped-target")},q=e=>{e.preventDefault(),e.dataTransfer.dropEffect="move"},x=e=>{e.target.classList.remove("dropped-target")},F=(e,a)=>{a.preventDefault(),a.target.classList.remove("dropped-target");const r=parseInt(a.dataTransfer.getData("index")),o=n.value[r];n.value.splice(r,1),n.value.splice(e,0,o),c("change"),u()},N=()=>{var e;(e=p.value)==null||e.click()},R=e=>{let a=e.target.files||e.dataTransfer.files;a.length&&(S(a),p.value&&(p.value.value=null))},S=e=>{Array.from(e).forEach(a=>{if(v.value=h.FileImageTypes.includes(a.type),m.value=z(a.size)<=l.maxFileSize,v.value&&m.value){let s=new FileReader;s.onload=r=>{l.multiple?n.value.push({url:r.target.result,file:a,type:a.type}):n.value.splice(0,1,{url:r.target.result,file:a,type:a.type}),c("change"),u()},s.readAsDataURL(a)}else u()})},T=(e,a)=>{e.stopPropagation(),n.value.splice(a,1),c("change"),u()},z=e=>e/1024**2,M=e=>{i.value.url=e.url,i.value.visible=!0};return y({validate:u}),(e,a)=>(t.openBlock(),t.createElementBlock("div",K,[t.createVNode($,{label:l.label},null,8,["label"]),t.createElementVNode("div",Q,[t.unref(G)(n.value)?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",W,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(n.value,(s,r)=>(t.openBlock(),t.createElementBlock("div",{key:r,class:"b-image-picker__draggable ds-h-full ds-cursor-pointer ds-rounded-lg ds-transition-all hover:ds-ring-2 hover:ds-ring-primary-t",draggable:"true",onClick:o=>M(s),onDragend:C,onDragenter:o=>E(r,o),onDragleave:x,onDragover:q,onDragstart:o=>b(r,o),onDrop:o=>F(r,o)},[t.createElementVNode("img",{src:s.url,alt:"image",class:"ds-h-full ds-w-full ds-rounded-lg"},null,8,Y),t.createVNode(P,{class:"ds-right-1 ds-top-1 ds-h-8 ds-w-8",onClick:o=>T(o,r)},null,8,["onClick"])],40,X))),128))])),t.createElementVNode("div",Z,[t.createVNode(U,{onClick:N},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(e.$t("ds.components.base.image_picker.select_image")),1)]),appendIcon:t.withCtx(()=>[ee]),_:1}),t.createElementVNode("input",{ref_key:"inputRef",ref:p,accept:_.value,multiple:l.multiple,class:"ds-hidden",type:"file",onChange:R},null,40,te)])]),l.hideDetails?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(H,{key:0,"error-message":t.unref(I).errorMessage(),class:"mt-1"},null,8,["error-message"])),t.createVNode(j,{modelValue:i.value.visible,"onUpdate:modelValue":a[0]||(a[0]=s=>i.value.visible=s),url:i.value.url},null,8,["modelValue","url"])]))}});module.exports=ae;
+"use strict";const t=require("vue"),h=require("./design-system4.js"),L=require("./design-system48.js"),P=require("./design-system101.js"),j=require("./design-system45.js"),A=require("./design-system3.js"),$=require("./design-system30.js"),U=require("./design-system11.js"),H=require("./design-system29.js"),O=require("./design-system93.js"),G=require("./design-system100.js"),J=d=>(t.pushScopeId("data-v-fec0801f"),d=d(),t.popScopeId(),d),K={class:"b-image-picker ds-w-full"},Q={class:"ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow"},W={key:0,class:"ds-flex ds-flex-wrap ds-justify-center ds-gap-1"},X=["onClick","onDragenter","onDragstart","onDrop"],Y=["src"],Z={class:"ds-flex ds-flex-wrap ds-justify-center"},ee=J(()=>t.createElementVNode("svg",{class:"ds-absolute -ds-bottom-[3px] ds-left-0 ds-h-4 ds-w-4 ds-fill-primary-t",viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"},[t.createElementVNode("path",{d:"M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z"})],-1)),te=["accept","multiple"],ae=t.defineComponent({__name:"BImagePicker",props:{inputId:{default:""},modelValue:{},label:{default:""},multiple:{type:Boolean,default:!1},maxFileSize:{default:20},hideDetails:{type:Boolean,default:!1},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},validationRules:{default:void 0}},emits:["change","update:modelValue"],setup(d,{expose:y,emit:c}){const l=d,{t:g}=L.useI18n(),p=t.ref(null),f=t.ref(0),n=t.computed({get(){return l.modelValue},set(e){c("update:modelValue",e)}}),v=t.ref(!0),m=t.ref(!0),i=t.ref({visible:!1,url:""}),_=t.computed(()=>h.FileImageTypes.join(", ")),k=t.computed(()=>l.inputId||`id-${O()}`),V={validateRule:e=>!!e&&e.length>0,errorMessage:()=>l.requiredErrorMessage||g("ds.global.field_required")},B={validateRule:()=>v.value,errorMessage:()=>g("ds.components.base.image_picker.file_types_valid",{types:_.value})},D={validateRule:()=>m.value,errorMessage:()=>g("ds.components.base.image_picker.file_size_valid",{size:l.maxFileSize})},w=t.computed(()=>{let e=[];return l.required&&e.push(V),l.validationRules&&(e=e.concat(l.validationRules)),e.push(B),e.push(D),e.length?e:void 0}),{validate:u,validationResult:I}=A.useValidationField(k.value,n,w.value),b=(e,a)=>{f.value=e,a.target.classList.add("dragging"),a.dataTransfer.effectAllowed="move",a.dataTransfer.setData("index",e.toString())},C=e=>{e.target.classList.remove("dragging")},E=(e,a)=>{const s=a.target;f.value!==e&&s.classList.add("dropped-target")},q=e=>{e.preventDefault(),e.dataTransfer.dropEffect="move"},x=e=>{e.target.classList.remove("dropped-target")},F=(e,a)=>{a.preventDefault(),a.target.classList.remove("dropped-target");const r=parseInt(a.dataTransfer.getData("index")),o=n.value[r];n.value.splice(r,1),n.value.splice(e,0,o),c("change"),u()},N=()=>{var e;(e=p.value)==null||e.click()},R=e=>{let a=e.target.files||e.dataTransfer.files;a.length&&(S(a),p.value&&(p.value.value=null))},S=e=>{Array.from(e).forEach(a=>{if(v.value=h.FileImageTypes.includes(a.type),m.value=z(a.size)<=l.maxFileSize,v.value&&m.value){let s=new FileReader;s.onload=r=>{l.multiple?n.value.push({url:r.target.result,file:a,type:a.type}):n.value.splice(0,1,{url:r.target.result,file:a,type:a.type}),c("change"),u()},s.readAsDataURL(a)}else u()})},T=(e,a)=>{e.stopPropagation(),n.value.splice(a,1),c("change"),u()},z=e=>e/1024**2,M=e=>{i.value.url=e.url,i.value.visible=!0};return y({validate:u}),(e,a)=>(t.openBlock(),t.createElementBlock("div",K,[t.createVNode($,{label:l.label},null,8,["label"]),t.createElementVNode("div",Q,[t.unref(G)(n.value)?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("div",W,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(n.value,(s,r)=>(t.openBlock(),t.createElementBlock("div",{key:r,class:"b-image-picker__draggable ds-h-full ds-cursor-pointer ds-rounded-lg ds-transition-all hover:ds-ring-2 hover:ds-ring-primary-t",draggable:"true",onClick:o=>M(s),onDragend:C,onDragenter:o=>E(r,o),onDragleave:x,onDragover:q,onDragstart:o=>b(r,o),onDrop:o=>F(r,o)},[t.createElementVNode("img",{src:s.url,alt:"image",class:"ds-h-full ds-w-full ds-rounded-lg"},null,8,Y),t.createVNode(P,{class:"ds-right-1 ds-top-1 ds-h-8 ds-w-8",onClick:o=>T(o,r)},null,8,["onClick"])],40,X))),128))])),t.createElementVNode("div",Z,[t.createVNode(U,{onClick:N},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(e.$t("ds.components.base.image_picker.select_image")),1)]),appendIcon:t.withCtx(()=>[ee]),_:1}),t.createElementVNode("input",{ref_key:"inputRef",ref:p,accept:_.value,multiple:l.multiple,class:"ds-hidden",type:"file",onChange:R},null,40,te)])]),l.hideDetails?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(H,{key:0,"error-message":t.unref(I).errorMessage(),class:"mt-1"},null,8,["error-message"])),t.createVNode(j,{modelValue:i.value.visible,"onUpdate:modelValue":a[0]||(a[0]=s=>i.value.visible=s),url:i.value.url},null,8,["modelValue","url"])]))}});module.exports=ae;
 //# sourceMappingURL=design-system84.js.map

package/dist/design-system84.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system84.js","sources":["../src/components/BImagePicker/BImagePicker.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \"vue\"\n\nconst _withScopeId = n => (_pushScopeId(\"data-v-1f555f5e\"),n=n(),_popScopeId(),n)\nconst _hoisted_1 = { class: \"b-image-picker ds-w-full\" }\nconst _hoisted_2 = { class: \"ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow\" }\nconst _hoisted_3 = {\n  key: 0,\n  class: \"ds-flex ds-flex-wrap ds-justify-center ds-gap-1\"\n}\nconst _hoisted_4 = [\"onClick\", \"onDragenter\", \"onDragstart\", \"onDrop\"]\nconst _hoisted_5 = [\"src\"]\nconst _hoisted_6 = { class: \"ds-flex ds-flex-wrap ds-justify-center\" }\nconst _hoisted_7 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"svg\", {\n  class: \"ds-absolute -ds-bottom-[3px] ds-left-0 ds-h-4 ds-w-4 ds-fill-primary-t\",\n  viewBox: \"0 0 512 512\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n}, [\n  /*#__PURE__*/_createElementVNode(\"path\", { d: \"M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z\" })\n], -1))\nconst _hoisted_8 = [\"accept\", \"multiple\"]\n\nimport { FileImageTypes } from '@/constants/Common';\nimport type { FileItemRead } from '@/types';\nimport { isEmpty } from 'lodash-es';\nimport { v4 as uuid } from 'uuid';\nimport { computed, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BImagePickerCloseButton from './BImagePickerCloseButton.vue';\nimport ImagePreview from './BImagePreview.vue';\nimport type { ValidationRule } from '@/composables/Validation';\nimport { useValidationField } from '@/composables/Validation';\nimport BLabel from '../BLabel.vue';\nimport BButton from '../BButton.vue';\nimport BErrorMessage from '../BErrorMessage.vue';\n\n//#region Props\nexport interface Props {\n  inputId?: string;\n  modelValue: FileItemRead[];\n  label?: string;\n  multiple?: boolean;\n  maxFileSize?: number;\n  hideDetails?: boolean;\n  required?: boolean;\n  requiredErrorMessage?: string;\n  validationRules?: ValidationRule[];\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BImagePicker',\n  props: {\n    inputId: { default: '' },\n    modelValue: {},\n    label: { default: '' },\n    multiple: { type: Boolean, default: false },\n    maxFileSize: { default: 20 },\n    hideDetails: { type: Boolean, default: false },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    validationRules: { default: undefined }\n  },\n  emits: [\"change\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n// Drag & Drop: https://www.w3schools.com/jsref/event_ondragover.asp\n\n//#endregion\n\n//#region Events\n\n//#endregion\n\n//#region Data\nconst { t } = useI18n();\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst draggedIndex = ref(0);\nconst value = computed({\n  get() {\n    return props.modelValue;\n  },\n  set(val) {\n    emit('update:modelValue', val);\n  },\n});\nconst fileTypesValid = ref(true);\nconst fileSizeValid = ref(true);\nconst previewImage = ref({\n  visible: false,\n  url: '',\n});\nconst allowedTypes = computed(() => FileImageTypes.join(', '));\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst validateRequired: ValidationRule = {\n  validateRule: (val: FileItemRead[]) => !!val && val.length > 0,\n  errorMessage: () =>\n    props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst validateFileTypesValid: ValidationRule = {\n  validateRule: () => fileTypesValid.value,\n  errorMessage: () =>\n    t('ds.components.base.image_picker.file_types_valid', {\n      types: allowedTypes.value,\n    }),\n};\nconst validateFileSizeValid: ValidationRule = {\n  validateRule: () => fileSizeValid.value,\n  errorMessage: () =>\n    t('ds.components.base.image_picker.file_size_valid', {\n      size: props.maxFileSize,\n    }),\n};\nconst vRules = computed(() => {\n  let result: ValidationRule[] = [];\n\n  if (props.required) {\n    result.push(validateRequired);\n  }\n  if (props.validationRules) {\n    result = result.concat(props.validationRules);\n  }\n  result.push(validateFileTypesValid);\n  result.push(validateFileSizeValid);\n\n  return result.length ? result : undefined;\n});\nconst { validate, validationResult } = useValidationField(\n  id.value,\n  value,\n  vRules.value,\n);\n//#endregion\n\n//#region Methods\n/* Events fired on the drag target */\nconst handleDragStart = (index: number, e: DragEvent) => {\n  draggedIndex.value = index;\n  const target = e.target as HTMLDivElement;\n  target.classList.add('dragging');\n  e.dataTransfer!.effectAllowed = 'move';\n  e.dataTransfer!.setData('index', index.toString());\n};\nconst handleDragEnd = (e: DragEvent) => {\n  const target = e.target as HTMLDivElement;\n  target.classList.remove('dragging');\n};\n/* Events fired on the drop target */\nconst handleDragEnter = (index: number, e: DragEvent) => {\n  const target = e.target as HTMLDivElement;\n  if (draggedIndex.value !== index) {\n    target.classList.add('dropped-target');\n  }\n};\nconst handleDragOver = (e: DragEvent) => {\n  // By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element\n  e.preventDefault();\n  e.dataTransfer!.dropEffect = 'move';\n};\nconst handleDragLeave = (e: DragEvent) => {\n  // When the draggable p element leaves the droptarget, reset the style\n  const target = e.target as HTMLDivElement;\n  target.classList.remove('dropped-target');\n};\nconst handleDrop = (index: number, e: DragEvent) => {\n  e.preventDefault();\n  const target = e.target as HTMLDivElement;\n  target.classList.remove('dropped-target');\n  const draggedIndex = parseInt(e.dataTransfer!.getData('index'));\n  const draggedImg = value.value[draggedIndex];\n  value.value.splice(draggedIndex, 1);\n  value.value.splice(index, 0, draggedImg);\n\n  emit('change');\n  validate();\n};\nconst openFileDialog = () => {\n  inputRef.value?.click();\n};\nconst onChangeInput = (e: any) => {\n  let fileList: FileList = e.target.files || e.dataTransfer.files;\n  if (!fileList.length) {\n    return;\n  }\n  createFileImages(fileList);\n\n  // Clear input's value so onChange event can work for the same files next picks\n  if (inputRef.value) {\n    inputRef.value.value = null as any;\n  }\n};\nconst createFileImages = (fileList: FileList) => {\n  Array.from(fileList).forEach((file) => {\n    fileTypesValid.value = FileImageTypes.includes(file.type);\n    fileSizeValid.value = convertToMB(file.size) <= props.maxFileSize;\n\n    if (fileTypesValid.value && fileSizeValid.value) {\n      let reader: any = new FileReader();\n\n      reader.onload = (f: any) => {\n        if (props.multiple) {\n          value.value.push({\n            url: f.target.result,\n            file,\n            type: file.type,\n          });\n        } else {\n          value.value.splice(0, 1, {\n            url: f.target.result,\n            file,\n            type: file.type,\n          });\n        }\n\n        emit('change');\n        validate();\n      };\n\n      reader.readAsDataURL(file);\n    } else {\n      validate();\n    }\n  });\n};\nconst removeFileImage = (e: Event, index: number) => {\n  e.stopPropagation();\n  value.value.splice(index, 1);\n\n  emit('change');\n  validate();\n};\nconst convertToMB = (numberOfBytes: number) => numberOfBytes / 1024 ** 2;\nconst preview = (item: FileItemRead) => {\n  previewImage.value.url = item.url;\n  previewImage.value.visible = true;\n};\n//#endregion\n\n__expose({ validate });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n    _createVNode(BLabel, {\n      label: props.label\n    }, null, 8, [\"label\"]),\n    _createElementVNode(\"div\", _hoisted_2, [\n      (!_unref(isEmpty)(value.value))\n        ? (_openBlock(), _createElementBlock(\"div\", _hoisted_3, [\n            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(value.value, (item, index) => {\n              return (_openBlock(), _createElementBlock(\"div\", {\n                key: index,\n                class: \"b-image-picker__draggable ds-h-full ds-cursor-pointer ds-rounded-lg ds-transition-all hover:ds-ring-2 hover:ds-ring-primary-t\",\n                draggable: \"true\",\n                onClick: ($event: any) => (preview(item)),\n                onDragend: handleDragEnd,\n                onDragenter: ($event: any) => (handleDragEnter(index, $event)),\n                onDragleave: handleDragLeave,\n                onDragover: handleDragOver,\n                onDragstart: ($event: any) => (handleDragStart(index, $event)),\n                onDrop: ($event: any) => (handleDrop(index, $event))\n              }, [\n                _createElementVNode(\"img\", {\n                  src: item.url,\n                  alt: \"image\",\n                  class: \"ds-h-full ds-w-full ds-rounded-lg\"\n                }, null, 8, _hoisted_5),\n                _createVNode(BImagePickerCloseButton, {\n                  class: \"ds-right-1 ds-top-1 ds-h-8 ds-w-8\",\n                  onClick: (e) => removeFileImage(e, index)\n                }, null, 8, [\"onClick\"])\n              ], 40, _hoisted_4))\n            }), 128))\n          ]))\n        : _createCommentVNode(\"\", true),\n      _createElementVNode(\"div\", _hoisted_6, [\n        _createVNode(BButton, { onClick: openFileDialog }, {\n          default: _withCtx(() => [\n            _createTextVNode(_toDisplayString(_ctx.$t('ds.components.base.image_picker.select_image')), 1)\n          ]),\n          appendIcon: _withCtx(() => [\n            _hoisted_7\n          ]),\n          _: 1\n        }),\n        _createElementVNode(\"input\", {\n          ref_key: \"inputRef\",\n          ref: inputRef,\n          accept: allowedTypes.value,\n          multiple: props.multiple,\n          class: \"ds-hidden\",\n          type: \"file\",\n          onChange: onChangeInput\n        }, null, 40, _hoisted_8)\n      ])\n    ]),\n    (!props.hideDetails)\n      ? (_openBlock(), _createBlock(BErrorMessage, {\n          key: 0,\n          \"error-message\": _unref(validationResult).errorMessage(),\n          class: \"mt-1\"\n        }, null, 8, [\"error-message\"]))\n      : _createCommentVNode(\"\", true),\n    _createVNode(ImagePreview, {\n      modelValue: previewImage.value.visible,\n      \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((previewImage.value.visible) = $event)),\n      url: previewImage.value.url\n    }, null, 8, [\"modelValue\", \"url\"])\n  ]))\n}\n}\n\n})"],"names":["_withScopeId","_pushScopeId","n","_popScopeId","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_createElementVNode","_hoisted_8","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","inputRef","ref","draggedIndex","value","computed","val","fileTypesValid","fileSizeValid","previewImage","allowedTypes","FileImageTypes","id","uuid","validateRequired","validateFileTypesValid","validateFileSizeValid","vRules","result","validate","validationResult","useValidationField","handleDragStart","index","e","handleDragEnd","handleDragEnter","target","handleDragOver","handleDragLeave","handleDrop","draggedImg","openFileDialog","_a","onChangeInput","fileList","createFileImages","file","convertToMB","reader","f","removeFileImage","numberOfBytes","preview","item","_ctx","_cache","_openBlock","_createElementBlock","_createVNode","BLabel","_unref","isEmpty","_createCommentVNode","_Fragment","_renderList","$event","BImagePickerCloseButton","BButton","_withCtx","_createTextVNode","_toDisplayString","_createBlock","BErrorMessage","ImagePreview"],"mappings":"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"}
+{"version":3,"file":"design-system84.js","sources":["../src/components/BImagePicker/BImagePicker.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \"vue\"\n\nconst _withScopeId = n => (_pushScopeId(\"data-v-fec0801f\"),n=n(),_popScopeId(),n)\nconst _hoisted_1 = { class: \"b-image-picker ds-w-full\" }\nconst _hoisted_2 = { class: \"ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow\" }\nconst _hoisted_3 = {\n  key: 0,\n  class: \"ds-flex ds-flex-wrap ds-justify-center ds-gap-1\"\n}\nconst _hoisted_4 = [\"onClick\", \"onDragenter\", \"onDragstart\", \"onDrop\"]\nconst _hoisted_5 = [\"src\"]\nconst _hoisted_6 = { class: \"ds-flex ds-flex-wrap ds-justify-center\" }\nconst _hoisted_7 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"svg\", {\n  class: \"ds-absolute -ds-bottom-[3px] ds-left-0 ds-h-4 ds-w-4 ds-fill-primary-t\",\n  viewBox: \"0 0 512 512\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n}, [\n  /*#__PURE__*/_createElementVNode(\"path\", { d: \"M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z\" })\n], -1))\nconst _hoisted_8 = [\"accept\", \"multiple\"]\n\nimport { FileImageTypes } from '@/constants/Common';\r\nimport type { FileItemRead } from '@/types';\r\nimport { isEmpty } from 'lodash-es';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { computed, ref } from 'vue';\r\nimport { useI18n } from 'vue-i18n';\r\nimport BImagePickerCloseButton from './BImagePickerCloseButton.vue';\r\nimport ImagePreview from './BImagePreview.vue';\r\nimport type { ValidationRule } from '@/composables/Validation';\r\nimport { useValidationField } from '@/composables/Validation';\r\nimport BLabel from '../BLabel.vue';\r\nimport BButton from '../BButton.vue';\r\nimport BErrorMessage from '../BErrorMessage.vue';\r\n\r\n//#region Props\r\nexport interface Props {\r\n  inputId?: string;\r\n  modelValue: FileItemRead[];\r\n  label?: string;\r\n  multiple?: boolean;\r\n  maxFileSize?: number;\r\n  hideDetails?: boolean;\r\n  required?: boolean;\r\n  requiredErrorMessage?: string;\r\n  validationRules?: ValidationRule[];\r\n}\r\n\r\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BImagePicker',\n  props: {\n    inputId: { default: '' },\n    modelValue: {},\n    label: { default: '' },\n    multiple: { type: Boolean, default: false },\n    maxFileSize: { default: 20 },\n    hideDetails: { type: Boolean, default: false },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    validationRules: { default: undefined }\n  },\n  emits: [\"change\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\r\n// Drag & Drop: https://www.w3schools.com/jsref/event_ondragover.asp\r\n\r\n//#endregion\r\n\r\n//#region Events\r\n\r\n//#endregion\r\n\r\n//#region Data\r\nconst { t } = useI18n();\r\nconst inputRef = ref<HTMLInputElement | null>(null);\r\nconst draggedIndex = ref(0);\r\nconst value = computed({\r\n  get() {\r\n    return props.modelValue;\r\n  },\r\n  set(val) {\r\n    emit('update:modelValue', val);\r\n  },\r\n});\r\nconst fileTypesValid = ref(true);\r\nconst fileSizeValid = ref(true);\r\nconst previewImage = ref({\r\n  visible: false,\r\n  url: '',\r\n});\r\nconst allowedTypes = computed(() => FileImageTypes.join(', '));\r\nconst id = computed(() => props.inputId || `id-${uuid()}`);\r\nconst validateRequired: ValidationRule = {\r\n  validateRule: (val: FileItemRead[]) => !!val && val.length > 0,\r\n  errorMessage: () =>\r\n    props.requiredErrorMessage || t('ds.global.field_required'),\r\n};\r\nconst validateFileTypesValid: ValidationRule = {\r\n  validateRule: () => fileTypesValid.value,\r\n  errorMessage: () =>\r\n    t('ds.components.base.image_picker.file_types_valid', {\r\n      types: allowedTypes.value,\r\n    }),\r\n};\r\nconst validateFileSizeValid: ValidationRule = {\r\n  validateRule: () => fileSizeValid.value,\r\n  errorMessage: () =>\r\n    t('ds.components.base.image_picker.file_size_valid', {\r\n      size: props.maxFileSize,\r\n    }),\r\n};\r\nconst vRules = computed(() => {\r\n  let result: ValidationRule[] = [];\r\n\r\n  if (props.required) {\r\n    result.push(validateRequired);\r\n  }\r\n  if (props.validationRules) {\r\n    result = result.concat(props.validationRules);\r\n  }\r\n  result.push(validateFileTypesValid);\r\n  result.push(validateFileSizeValid);\r\n\r\n  return result.length ? result : undefined;\r\n});\r\nconst { validate, validationResult } = useValidationField(\r\n  id.value,\r\n  value,\r\n  vRules.value,\r\n);\r\n//#endregion\r\n\r\n//#region Methods\r\n/* Events fired on the drag target */\r\nconst handleDragStart = (index: number, e: DragEvent) => {\r\n  draggedIndex.value = index;\r\n  const target = e.target as HTMLDivElement;\r\n  target.classList.add('dragging');\r\n  e.dataTransfer!.effectAllowed = 'move';\r\n  e.dataTransfer!.setData('index', index.toString());\r\n};\r\nconst handleDragEnd = (e: DragEvent) => {\r\n  const target = e.target as HTMLDivElement;\r\n  target.classList.remove('dragging');\r\n};\r\n/* Events fired on the drop target */\r\nconst handleDragEnter = (index: number, e: DragEvent) => {\r\n  const target = e.target as HTMLDivElement;\r\n  if (draggedIndex.value !== index) {\r\n    target.classList.add('dropped-target');\r\n  }\r\n};\r\nconst handleDragOver = (e: DragEvent) => {\r\n  // By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element\r\n  e.preventDefault();\r\n  e.dataTransfer!.dropEffect = 'move';\r\n};\r\nconst handleDragLeave = (e: DragEvent) => {\r\n  // When the draggable p element leaves the droptarget, reset the style\r\n  const target = e.target as HTMLDivElement;\r\n  target.classList.remove('dropped-target');\r\n};\r\nconst handleDrop = (index: number, e: DragEvent) => {\r\n  e.preventDefault();\r\n  const target = e.target as HTMLDivElement;\r\n  target.classList.remove('dropped-target');\r\n  const draggedIndex = parseInt(e.dataTransfer!.getData('index'));\r\n  const draggedImg = value.value[draggedIndex];\r\n  value.value.splice(draggedIndex, 1);\r\n  value.value.splice(index, 0, draggedImg);\r\n\r\n  emit('change');\r\n  validate();\r\n};\r\nconst openFileDialog = () => {\r\n  inputRef.value?.click();\r\n};\r\nconst onChangeInput = (e: any) => {\r\n  let fileList: FileList = e.target.files || e.dataTransfer.files;\r\n  if (!fileList.length) {\r\n    return;\r\n  }\r\n  createFileImages(fileList);\r\n\r\n  // Clear input's value so onChange event can work for the same files next picks\r\n  if (inputRef.value) {\r\n    inputRef.value.value = null as any;\r\n  }\r\n};\r\nconst createFileImages = (fileList: FileList) => {\r\n  Array.from(fileList).forEach((file) => {\r\n    fileTypesValid.value = FileImageTypes.includes(file.type);\r\n    fileSizeValid.value = convertToMB(file.size) <= props.maxFileSize;\r\n\r\n    if (fileTypesValid.value && fileSizeValid.value) {\r\n      let reader: any = new FileReader();\r\n\r\n      reader.onload = (f: any) => {\r\n        if (props.multiple) {\r\n          value.value.push({\r\n            url: f.target.result,\r\n            file,\r\n            type: file.type,\r\n          });\r\n        } else {\r\n          value.value.splice(0, 1, {\r\n            url: f.target.result,\r\n            file,\r\n            type: file.type,\r\n          });\r\n        }\r\n\r\n        emit('change');\r\n        validate();\r\n      };\r\n\r\n      reader.readAsDataURL(file);\r\n    } else {\r\n      validate();\r\n    }\r\n  });\r\n};\r\nconst removeFileImage = (e: Event, index: number) => {\r\n  e.stopPropagation();\r\n  value.value.splice(index, 1);\r\n\r\n  emit('change');\r\n  validate();\r\n};\r\nconst convertToMB = (numberOfBytes: number) => numberOfBytes / 1024 ** 2;\r\nconst preview = (item: FileItemRead) => {\r\n  previewImage.value.url = item.url;\r\n  previewImage.value.visible = true;\r\n};\r\n//#endregion\r\n\r\n__expose({ validate });\r\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n    _createVNode(BLabel, {\n      label: props.label\n    }, null, 8, [\"label\"]),\n    _createElementVNode(\"div\", _hoisted_2, [\n      (!_unref(isEmpty)(value.value))\n        ? (_openBlock(), _createElementBlock(\"div\", _hoisted_3, [\n            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(value.value, (item, index) => {\n              return (_openBlock(), _createElementBlock(\"div\", {\n                key: index,\n                class: \"b-image-picker__draggable ds-h-full ds-cursor-pointer ds-rounded-lg ds-transition-all hover:ds-ring-2 hover:ds-ring-primary-t\",\n                draggable: \"true\",\n                onClick: ($event: any) => (preview(item)),\n                onDragend: handleDragEnd,\n                onDragenter: ($event: any) => (handleDragEnter(index, $event)),\n                onDragleave: handleDragLeave,\n                onDragover: handleDragOver,\n                onDragstart: ($event: any) => (handleDragStart(index, $event)),\n                onDrop: ($event: any) => (handleDrop(index, $event))\n              }, [\n                _createElementVNode(\"img\", {\n                  src: item.url,\n                  alt: \"image\",\n                  class: \"ds-h-full ds-w-full ds-rounded-lg\"\n                }, null, 8, _hoisted_5),\n                _createVNode(BImagePickerCloseButton, {\n                  class: \"ds-right-1 ds-top-1 ds-h-8 ds-w-8\",\n                  onClick: (e) => removeFileImage(e, index)\n                }, null, 8, [\"onClick\"])\n              ], 40, _hoisted_4))\n            }), 128))\n          ]))\n        : _createCommentVNode(\"\", true),\n      _createElementVNode(\"div\", _hoisted_6, [\n        _createVNode(BButton, { onClick: openFileDialog }, {\n          default: _withCtx(() => [\n            _createTextVNode(_toDisplayString(_ctx.$t('ds.components.base.image_picker.select_image')), 1)\n          ]),\n          appendIcon: _withCtx(() => [\n            _hoisted_7\n          ]),\n          _: 1\n        }),\n        _createElementVNode(\"input\", {\n          ref_key: \"inputRef\",\n          ref: inputRef,\n          accept: allowedTypes.value,\n          multiple: props.multiple,\n          class: \"ds-hidden\",\n          type: \"file\",\n          onChange: onChangeInput\n        }, null, 40, _hoisted_8)\n      ])\n    ]),\n    (!props.hideDetails)\n      ? (_openBlock(), _createBlock(BErrorMessage, {\n          key: 0,\n          \"error-message\": _unref(validationResult).errorMessage(),\n          class: \"mt-1\"\n        }, null, 8, [\"error-message\"]))\n      : _createCommentVNode(\"\", true),\n    _createVNode(ImagePreview, {\n      modelValue: previewImage.value.visible,\n      \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((previewImage.value.visible) = $event)),\n      url: previewImage.value.url\n    }, null, 8, [\"modelValue\", \"url\"])\n  ]))\n}\n}\n\n})"],"names":["_withScopeId","_pushScopeId","n","_popScopeId","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_createElementVNode","_hoisted_8","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","inputRef","ref","draggedIndex","value","computed","val","fileTypesValid","fileSizeValid","previewImage","allowedTypes","FileImageTypes","id","uuid","validateRequired","validateFileTypesValid","validateFileSizeValid","vRules","result","validate","validationResult","useValidationField","handleDragStart","index","e","handleDragEnd","handleDragEnter","target","handleDragOver","handleDragLeave","handleDrop","draggedImg","openFileDialog","_a","onChangeInput","fileList","createFileImages","file","convertToMB","reader","f","removeFileImage","numberOfBytes","preview","item","_ctx","_cache","_openBlock","_createElementBlock","_createVNode","BLabel","_unref","isEmpty","_createCommentVNode","_Fragment","_renderList","$event","BImagePickerCloseButton","BButton","_withCtx","_createTextVNode","_toDisplayString","_createBlock","BErrorMessage","ImagePreview"],"mappings":"wXAGMA,MAAqBC,EAAa,YAAA,iBAAiB,EAAEC,EAAEA,IAAIC,EAAAA,aAAcD,GACzEE,EAAa,CAAE,MAAO,4BACtBC,EAAa,CAAE,MAAO,yEACtBC,EAAa,CACjB,IAAK,EACL,MAAO,iDACT,EACMC,EAAa,CAAC,UAAW,cAAe,cAAe,QAAQ,EAC/DC,EAAa,CAAC,KAAK,EACnBC,EAAa,CAAE,MAAO,0CACtBC,GAA2BV,EAAa,IAAmBW,EAAA,mBAAoB,MAAO,CAC1F,MAAO,yEACP,QAAS,cACT,MAAO,4BACT,EAAG,CACgCA,EAAAA,mBAAA,OAAQ,CAAE,EAAG,wgBAAygB,CACzjB,EAAG,EAAE,CAAC,EACAC,GAAa,CAAC,SAAU,UAAU,EA8BZC,GAAiBC,kBAAA,CAC3C,OAAQ,eACR,MAAO,CACL,QAAS,CAAE,QAAS,EAAG,EACvB,WAAY,CAAC,EACb,MAAO,CAAE,QAAS,EAAG,EACrB,SAAU,CAAE,KAAM,QAAS,QAAS,EAAM,EAC1C,YAAa,CAAE,QAAS,EAAG,EAC3B,YAAa,CAAE,KAAM,QAAS,QAAS,EAAM,EAC7C,SAAU,CAAE,KAAM,QAAS,QAAS,EAAM,EAC1C,qBAAsB,CAAE,QAAS,EAAG,EACpC,gBAAiB,CAAE,QAAS,MAAU,CACxC,EACA,MAAO,CAAC,SAAU,mBAAmB,EACrC,MAAMC,EAAc,CAAE,OAAQC,EAAU,KAAAC,GAAQ,CAElD,MAAMC,EAAQH,EAWR,CAAE,EAAAI,GAAMC,EAAAA,UACRC,EAAWC,MAA6B,IAAI,EAC5CC,EAAeD,MAAI,CAAC,EACpBE,EAAQC,EAAAA,SAAS,CACrB,KAAM,CACJ,OAAOP,EAAM,UACf,EACA,IAAIQ,EAAK,CACPT,EAAK,oBAAqBS,CAAG,CAC/B,CAAA,CACD,EACKC,EAAiBL,MAAI,EAAI,EACzBM,EAAgBN,MAAI,EAAI,EACxBO,EAAeP,EAAAA,IAAI,CACvB,QAAS,GACT,IAAK,EAAA,CACN,EACKQ,EAAeL,EAAAA,SAAS,IAAMM,EAAe,eAAA,KAAK,IAAI,CAAC,EACvDC,EAAKP,WAAS,IAAMP,EAAM,SAAW,MAAMe,GAAM,EAAE,EACnDC,EAAmC,CACvC,aAAeR,GAAwB,CAAC,CAACA,GAAOA,EAAI,OAAS,EAC7D,aAAc,IACZR,EAAM,sBAAwBC,EAAE,0BAA0B,CAAA,EAExDgB,EAAyC,CAC7C,aAAc,IAAMR,EAAe,MACnC,aAAc,IACZR,EAAE,mDAAoD,CACpD,MAAOW,EAAa,KAAA,CACrB,CAAA,EAECM,EAAwC,CAC5C,aAAc,IAAMR,EAAc,MAClC,aAAc,IACZT,EAAE,kDAAmD,CACnD,KAAMD,EAAM,WAAA,CACb,CAAA,EAECmB,EAASZ,EAAAA,SAAS,IAAM,CAC5B,IAAIa,EAA2B,CAAA,EAE/B,OAAIpB,EAAM,UACRoB,EAAO,KAAKJ,CAAgB,EAE1BhB,EAAM,kBACCoB,EAAAA,EAAO,OAAOpB,EAAM,eAAe,GAE9CoB,EAAO,KAAKH,CAAsB,EAClCG,EAAO,KAAKF,CAAqB,EAE1BE,EAAO,OAASA,EAAS,MAAA,CACjC,EACK,CAAE,SAAAC,EAAU,iBAAAC,CAAA,EAAqBC,EAAA,mBACrCT,EAAG,MACHR,EACAa,EAAO,KAAA,EAMHK,EAAkB,CAACC,EAAeC,IAAiB,CACvDrB,EAAa,MAAQoB,EACNC,EAAE,OACV,UAAU,IAAI,UAAU,EAC/BA,EAAE,aAAc,cAAgB,OAChCA,EAAE,aAAc,QAAQ,QAASD,EAAM,UAAU,CAAA,EAE7CE,EAAiB,GAAiB,CACvB,EAAE,OACV,UAAU,OAAO,UAAU,CAAA,EAG9BC,EAAkB,CAACH,EAAeC,IAAiB,CACvD,MAAMG,EAASH,EAAE,OACbrB,EAAa,QAAUoB,GAClBI,EAAA,UAAU,IAAI,gBAAgB,CACvC,EAEIC,EAAkB,GAAiB,CAEvC,EAAE,eAAe,EACjB,EAAE,aAAc,WAAa,MAAA,EAEzBC,EAAmB,GAAiB,CAEzB,EAAE,OACV,UAAU,OAAO,gBAAgB,CAAA,EAEpCC,EAAa,CAACP,EAAeC,IAAiB,CAClDA,EAAE,eAAe,EACFA,EAAE,OACV,UAAU,OAAO,gBAAgB,EACxC,MAAMrB,EAAe,SAASqB,EAAE,aAAc,QAAQ,OAAO,CAAC,EACxDO,EAAa3B,EAAM,MAAMD,CAAY,EACrCC,EAAA,MAAM,OAAOD,EAAc,CAAC,EAClCC,EAAM,MAAM,OAAOmB,EAAO,EAAGQ,CAAU,EAEvClC,EAAK,QAAQ,EACJsB,GAAA,EAELa,EAAiB,IAAM,QAC3BC,EAAAhC,EAAS,QAAT,MAAAgC,EAAgB,OAAM,EAElBC,EAAiB,GAAW,CAChC,IAAIC,EAAqB,EAAE,OAAO,OAAS,EAAE,aAAa,MACrDA,EAAS,SAGdC,EAAiBD,CAAQ,EAGrBlC,EAAS,QACXA,EAAS,MAAM,MAAQ,MACzB,EAEImC,EAAoBD,GAAuB,CAC/C,MAAM,KAAKA,CAAQ,EAAE,QAASE,GAAS,CAIjC,GAHJ9B,EAAe,MAAQI,EAAA,eAAe,SAAS0B,EAAK,IAAI,EACxD7B,EAAc,MAAQ8B,EAAYD,EAAK,IAAI,GAAKvC,EAAM,YAElDS,EAAe,OAASC,EAAc,MAAO,CAC3C,IAAA+B,EAAc,IAAI,WAEfA,EAAA,OAAUC,GAAW,CACtB1C,EAAM,SACRM,EAAM,MAAM,KAAK,CACf,IAAKoC,EAAE,OAAO,OACd,KAAAH,EACA,KAAMA,EAAK,IAAA,CACZ,EAEKjC,EAAA,MAAM,OAAO,EAAG,EAAG,CACvB,IAAKoC,EAAE,OAAO,OACd,KAAAH,EACA,KAAMA,EAAK,IAAA,CACZ,EAGHxC,EAAK,QAAQ,EACJsB,GAAA,EAGXoB,EAAO,cAAcF,CAAI,CAAA,MAEhBlB,GACX,CACD,CAAA,EAEGsB,EAAkB,CAAC,EAAUlB,IAAkB,CACnD,EAAE,gBAAgB,EACZnB,EAAA,MAAM,OAAOmB,EAAO,CAAC,EAE3B1B,EAAK,QAAQ,EACJsB,GAAA,EAELmB,EAAeI,GAA0BA,EAAgB,MAAQ,EACjEC,EAAWC,GAAuB,CACzBnC,EAAA,MAAM,IAAMmC,EAAK,IAC9BnC,EAAa,MAAM,QAAU,EAAA,EAItB,OAAAb,EAAA,CAAE,SAAAuB,EAAU,EAEd,CAAC0B,EAAUC,KACRC,YAAW,EAAGC,qBAAoB,MAAOhE,EAAY,CAC3DiE,EAAAA,YAAaC,EAAQ,CACnB,MAAOpD,EAAM,KACZ,EAAA,KAAM,EAAG,CAAC,OAAO,CAAC,EACrBP,EAAA,mBAAoB,MAAON,EAAY,CACnCkE,EAAO,MAAAC,CAAO,EAAEhD,EAAM,KAAK,EA2BzBiD,EAAAA,mBAAoB,GAAI,EAAI,GA1B3BN,EAAAA,YAAcC,EAAAA,mBAAoB,MAAO9D,EAAY,EACnD6D,EAAAA,UAAW,EAAI,EAAGC,EAAoB,mBAAAM,WAAW,KAAMC,EAAA,WAAYnD,EAAM,MAAO,CAACwC,EAAMrB,KAC9EwB,EAAA,UAAA,EAAcC,EAAA,mBAAoB,MAAO,CAC/C,IAAKzB,EACL,MAAO,gIACP,UAAW,OACX,QAAUiC,GAAiBb,EAAQC,CAAI,EACvC,UAAWnB,EACX,YAAc+B,GAAiB9B,EAAgBH,EAAOiC,CAAM,EAC5D,YAAa3B,EACb,WAAYD,EACZ,YAAc4B,GAAiBlC,EAAgBC,EAAOiC,CAAM,EAC5D,OAASA,GAAiB1B,EAAWP,EAAOiC,CAAM,CAAA,EACjD,CACDjE,EAAAA,mBAAoB,MAAO,CACzB,IAAKqD,EAAK,IACV,IAAK,QACL,MAAO,mCAAA,EACN,KAAM,EAAGxD,CAAU,EACtB6D,EAAAA,YAAaQ,EAAyB,CACpC,MAAO,oCACP,QAAUjC,GAAMiB,EAAgBjB,EAAGD,CAAK,CACvC,EAAA,KAAM,EAAG,CAAC,SAAS,CAAC,CAAA,EACtB,GAAIpC,CAAU,EAClB,EAAG,GAAG,EAAA,CACR,GAELI,EAAA,mBAAoB,MAAOF,EAAY,CACrC4D,EAAAA,YAAaS,EAAS,CAAE,QAAS1B,GAAkB,CACjD,QAAS2B,UAAS,IAAM,CACtBC,kBAAiBC,EAAiB,gBAAAhB,EAAK,GAAG,8CAA8C,CAAC,EAAG,CAAC,CAAA,CAC9F,EACD,WAAYc,UAAS,IAAM,CACzBrE,EAAA,CACD,EACD,EAAG,CAAA,CACJ,EACDC,EAAAA,mBAAoB,QAAS,CAC3B,QAAS,WACT,IAAKU,EACL,OAAQS,EAAa,MACrB,SAAUZ,EAAM,SAChB,MAAO,YACP,KAAM,OACN,SAAUoC,CAAA,EACT,KAAM,GAAI1C,EAAU,CAAA,CACxB,CAAA,CACF,EACCM,EAAM,YAMJuD,EAAoB,mBAAA,GAAI,EAAI,GAL3BN,EAAW,UAAA,EAAGe,EAAAA,YAAaC,EAAe,CACzC,IAAK,EACL,gBAAiBZ,EAAA,MAAO/B,CAAgB,EAAE,aAAa,EACvD,MAAO,MAAA,EACN,KAAM,EAAG,CAAC,eAAe,CAAC,GAEjC6B,EAAAA,YAAae,EAAc,CACzB,WAAYvD,EAAa,MAAM,QAC/B,sBAAuBqC,EAAO,CAAC,IAAMA,EAAO,CAAC,EAAKU,GAAkB/C,EAAa,MAAM,QAAW+C,GAClG,IAAK/C,EAAa,MAAM,KACvB,KAAM,EAAG,CAAC,aAAc,KAAK,CAAC,CAAA,CAClC,EAEH,CAEA,CAAC"}

package/dist/design-system84.mjs

@@ -7,9 +7,9 @@ import { useValidationField as le } from "./design-system3.mjs";
 import se from "./design-system30.mjs";
 import re from "./design-system11.mjs";
 import oe from "./design-system29.mjs";
-import de from "./design-system94.mjs";
-import ie from "./design-system99.mjs";
-const ne = (i) => (Y("data-v-1f555f5e"), i = i(), Z(), i), ue = { class: "b-image-picker ds-w-full" }, ce = { class: "ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow" }, pe = {
+import de from "./design-system93.mjs";
+import ie from "./design-system100.mjs";
+const ne = (i) => (Y("data-v-fec0801f"), i = i(), Z(), i), ue = { class: "b-image-picker ds-w-full" }, ce = { class: "ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow" }, pe = {
   key: 0,
   class: "ds-flex ds-flex-wrap ds-justify-center ds-gap-1"
 }, ge = ["onClick", "onDragenter", "onDragstart", "onDrop"], me = ["src"], ve = { class: "ds-flex ds-flex-wrap ds-justify-center" }, fe = /* @__PURE__ */ ne(() => /* @__PURE__ */ d("svg", {

package/dist/design-system84.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-system84.mjs","sources":["../src/components/BImagePicker/BImagePicker.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \"vue\"\n\nconst _withScopeId = n => (_pushScopeId(\"data-v-1f555f5e\"),n=n(),_popScopeId(),n)\nconst _hoisted_1 = { class: \"b-image-picker ds-w-full\" }\nconst _hoisted_2 = { class: \"ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow\" }\nconst _hoisted_3 = {\n  key: 0,\n  class: \"ds-flex ds-flex-wrap ds-justify-center ds-gap-1\"\n}\nconst _hoisted_4 = [\"onClick\", \"onDragenter\", \"onDragstart\", \"onDrop\"]\nconst _hoisted_5 = [\"src\"]\nconst _hoisted_6 = { class: \"ds-flex ds-flex-wrap ds-justify-center\" }\nconst _hoisted_7 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"svg\", {\n  class: \"ds-absolute -ds-bottom-[3px] ds-left-0 ds-h-4 ds-w-4 ds-fill-primary-t\",\n  viewBox: \"0 0 512 512\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n}, [\n  /*#__PURE__*/_createElementVNode(\"path\", { d: \"M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z\" })\n], -1))\nconst _hoisted_8 = [\"accept\", \"multiple\"]\n\nimport { FileImageTypes } from '@/constants/Common';\nimport type { FileItemRead } from '@/types';\nimport { isEmpty } from 'lodash-es';\nimport { v4 as uuid } from 'uuid';\nimport { computed, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BImagePickerCloseButton from './BImagePickerCloseButton.vue';\nimport ImagePreview from './BImagePreview.vue';\nimport type { ValidationRule } from '@/composables/Validation';\nimport { useValidationField } from '@/composables/Validation';\nimport BLabel from '../BLabel.vue';\nimport BButton from '../BButton.vue';\nimport BErrorMessage from '../BErrorMessage.vue';\n\n//#region Props\nexport interface Props {\n  inputId?: string;\n  modelValue: FileItemRead[];\n  label?: string;\n  multiple?: boolean;\n  maxFileSize?: number;\n  hideDetails?: boolean;\n  required?: boolean;\n  requiredErrorMessage?: string;\n  validationRules?: ValidationRule[];\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BImagePicker',\n  props: {\n    inputId: { default: '' },\n    modelValue: {},\n    label: { default: '' },\n    multiple: { type: Boolean, default: false },\n    maxFileSize: { default: 20 },\n    hideDetails: { type: Boolean, default: false },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    validationRules: { default: undefined }\n  },\n  emits: [\"change\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n// Drag & Drop: https://www.w3schools.com/jsref/event_ondragover.asp\n\n//#endregion\n\n//#region Events\n\n//#endregion\n\n//#region Data\nconst { t } = useI18n();\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst draggedIndex = ref(0);\nconst value = computed({\n  get() {\n    return props.modelValue;\n  },\n  set(val) {\n    emit('update:modelValue', val);\n  },\n});\nconst fileTypesValid = ref(true);\nconst fileSizeValid = ref(true);\nconst previewImage = ref({\n  visible: false,\n  url: '',\n});\nconst allowedTypes = computed(() => FileImageTypes.join(', '));\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst validateRequired: ValidationRule = {\n  validateRule: (val: FileItemRead[]) => !!val && val.length > 0,\n  errorMessage: () =>\n    props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst validateFileTypesValid: ValidationRule = {\n  validateRule: () => fileTypesValid.value,\n  errorMessage: () =>\n    t('ds.components.base.image_picker.file_types_valid', {\n      types: allowedTypes.value,\n    }),\n};\nconst validateFileSizeValid: ValidationRule = {\n  validateRule: () => fileSizeValid.value,\n  errorMessage: () =>\n    t('ds.components.base.image_picker.file_size_valid', {\n      size: props.maxFileSize,\n    }),\n};\nconst vRules = computed(() => {\n  let result: ValidationRule[] = [];\n\n  if (props.required) {\n    result.push(validateRequired);\n  }\n  if (props.validationRules) {\n    result = result.concat(props.validationRules);\n  }\n  result.push(validateFileTypesValid);\n  result.push(validateFileSizeValid);\n\n  return result.length ? result : undefined;\n});\nconst { validate, validationResult } = useValidationField(\n  id.value,\n  value,\n  vRules.value,\n);\n//#endregion\n\n//#region Methods\n/* Events fired on the drag target */\nconst handleDragStart = (index: number, e: DragEvent) => {\n  draggedIndex.value = index;\n  const target = e.target as HTMLDivElement;\n  target.classList.add('dragging');\n  e.dataTransfer!.effectAllowed = 'move';\n  e.dataTransfer!.setData('index', index.toString());\n};\nconst handleDragEnd = (e: DragEvent) => {\n  const target = e.target as HTMLDivElement;\n  target.classList.remove('dragging');\n};\n/* Events fired on the drop target */\nconst handleDragEnter = (index: number, e: DragEvent) => {\n  const target = e.target as HTMLDivElement;\n  if (draggedIndex.value !== index) {\n    target.classList.add('dropped-target');\n  }\n};\nconst handleDragOver = (e: DragEvent) => {\n  // By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element\n  e.preventDefault();\n  e.dataTransfer!.dropEffect = 'move';\n};\nconst handleDragLeave = (e: DragEvent) => {\n  // When the draggable p element leaves the droptarget, reset the style\n  const target = e.target as HTMLDivElement;\n  target.classList.remove('dropped-target');\n};\nconst handleDrop = (index: number, e: DragEvent) => {\n  e.preventDefault();\n  const target = e.target as HTMLDivElement;\n  target.classList.remove('dropped-target');\n  const draggedIndex = parseInt(e.dataTransfer!.getData('index'));\n  const draggedImg = value.value[draggedIndex];\n  value.value.splice(draggedIndex, 1);\n  value.value.splice(index, 0, draggedImg);\n\n  emit('change');\n  validate();\n};\nconst openFileDialog = () => {\n  inputRef.value?.click();\n};\nconst onChangeInput = (e: any) => {\n  let fileList: FileList = e.target.files || e.dataTransfer.files;\n  if (!fileList.length) {\n    return;\n  }\n  createFileImages(fileList);\n\n  // Clear input's value so onChange event can work for the same files next picks\n  if (inputRef.value) {\n    inputRef.value.value = null as any;\n  }\n};\nconst createFileImages = (fileList: FileList) => {\n  Array.from(fileList).forEach((file) => {\n    fileTypesValid.value = FileImageTypes.includes(file.type);\n    fileSizeValid.value = convertToMB(file.size) <= props.maxFileSize;\n\n    if (fileTypesValid.value && fileSizeValid.value) {\n      let reader: any = new FileReader();\n\n      reader.onload = (f: any) => {\n        if (props.multiple) {\n          value.value.push({\n            url: f.target.result,\n            file,\n            type: file.type,\n          });\n        } else {\n          value.value.splice(0, 1, {\n            url: f.target.result,\n            file,\n            type: file.type,\n          });\n        }\n\n        emit('change');\n        validate();\n      };\n\n      reader.readAsDataURL(file);\n    } else {\n      validate();\n    }\n  });\n};\nconst removeFileImage = (e: Event, index: number) => {\n  e.stopPropagation();\n  value.value.splice(index, 1);\n\n  emit('change');\n  validate();\n};\nconst convertToMB = (numberOfBytes: number) => numberOfBytes / 1024 ** 2;\nconst preview = (item: FileItemRead) => {\n  previewImage.value.url = item.url;\n  previewImage.value.visible = true;\n};\n//#endregion\n\n__expose({ validate });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n    _createVNode(BLabel, {\n      label: props.label\n    }, null, 8, [\"label\"]),\n    _createElementVNode(\"div\", _hoisted_2, [\n      (!_unref(isEmpty)(value.value))\n        ? (_openBlock(), _createElementBlock(\"div\", _hoisted_3, [\n            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(value.value, (item, index) => {\n              return (_openBlock(), _createElementBlock(\"div\", {\n                key: index,\n                class: \"b-image-picker__draggable ds-h-full ds-cursor-pointer ds-rounded-lg ds-transition-all hover:ds-ring-2 hover:ds-ring-primary-t\",\n                draggable: \"true\",\n                onClick: ($event: any) => (preview(item)),\n                onDragend: handleDragEnd,\n                onDragenter: ($event: any) => (handleDragEnter(index, $event)),\n                onDragleave: handleDragLeave,\n                onDragover: handleDragOver,\n                onDragstart: ($event: any) => (handleDragStart(index, $event)),\n                onDrop: ($event: any) => (handleDrop(index, $event))\n              }, [\n                _createElementVNode(\"img\", {\n                  src: item.url,\n                  alt: \"image\",\n                  class: \"ds-h-full ds-w-full ds-rounded-lg\"\n                }, null, 8, _hoisted_5),\n                _createVNode(BImagePickerCloseButton, {\n                  class: \"ds-right-1 ds-top-1 ds-h-8 ds-w-8\",\n                  onClick: (e) => removeFileImage(e, index)\n                }, null, 8, [\"onClick\"])\n              ], 40, _hoisted_4))\n            }), 128))\n          ]))\n        : _createCommentVNode(\"\", true),\n      _createElementVNode(\"div\", _hoisted_6, [\n        _createVNode(BButton, { onClick: openFileDialog }, {\n          default: _withCtx(() => [\n            _createTextVNode(_toDisplayString(_ctx.$t('ds.components.base.image_picker.select_image')), 1)\n          ]),\n          appendIcon: _withCtx(() => [\n            _hoisted_7\n          ]),\n          _: 1\n        }),\n        _createElementVNode(\"input\", {\n          ref_key: \"inputRef\",\n          ref: inputRef,\n          accept: allowedTypes.value,\n          multiple: props.multiple,\n          class: \"ds-hidden\",\n          type: \"file\",\n          onChange: onChangeInput\n        }, null, 40, _hoisted_8)\n      ])\n    ]),\n    (!props.hideDetails)\n      ? (_openBlock(), _createBlock(BErrorMessage, {\n          key: 0,\n          \"error-message\": _unref(validationResult).errorMessage(),\n          class: \"mt-1\"\n        }, null, 8, [\"error-message\"]))\n      : _createCommentVNode(\"\", true),\n    _createVNode(ImagePreview, {\n      modelValue: previewImage.value.visible,\n      \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((previewImage.value.visible) = $event)),\n      url: previewImage.value.url\n    }, null, 8, [\"modelValue\", \"url\"])\n  ]))\n}\n}\n\n})"],"names":["_withScopeId","_pushScopeId","n","_popScopeId","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_createElementVNode","_hoisted_8","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","inputRef","ref","draggedIndex","value","computed","val","fileTypesValid","fileSizeValid","previewImage","allowedTypes","FileImageTypes","id","uuid","validateRequired","validateFileTypesValid","validateFileSizeValid","vRules","result","validate","validationResult","useValidationField","handleDragStart","index","e","handleDragEnd","handleDragEnter","target","handleDragOver","handleDragLeave","handleDrop","draggedImg","openFileDialog","_a","onChangeInput","fileList","createFileImages","file","convertToMB","reader","f","removeFileImage","numberOfBytes","preview","item","_ctx","_cache","_openBlock","_createElementBlock","_createVNode","BLabel","_unref","isEmpty","_createCommentVNode","_Fragment","_renderList","$event","BImagePickerCloseButton","BButton","_withCtx","_createTextVNode","_toDisplayString","_createBlock","BErrorMessage","ImagePreview"],"mappings":"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"}
+{"version":3,"file":"design-system84.mjs","sources":["../src/components/BImagePicker/BImagePicker.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \"vue\"\n\nconst _withScopeId = n => (_pushScopeId(\"data-v-fec0801f\"),n=n(),_popScopeId(),n)\nconst _hoisted_1 = { class: \"b-image-picker ds-w-full\" }\nconst _hoisted_2 = { class: \"ds-gap-2 ds-space-y-4 ds-rounded-lg ds-bg-white ds-p-4 ds-drop-shadow\" }\nconst _hoisted_3 = {\n  key: 0,\n  class: \"ds-flex ds-flex-wrap ds-justify-center ds-gap-1\"\n}\nconst _hoisted_4 = [\"onClick\", \"onDragenter\", \"onDragstart\", \"onDrop\"]\nconst _hoisted_5 = [\"src\"]\nconst _hoisted_6 = { class: \"ds-flex ds-flex-wrap ds-justify-center\" }\nconst _hoisted_7 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"svg\", {\n  class: \"ds-absolute -ds-bottom-[3px] ds-left-0 ds-h-4 ds-w-4 ds-fill-primary-t\",\n  viewBox: \"0 0 512 512\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n}, [\n  /*#__PURE__*/_createElementVNode(\"path\", { d: \"M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z\" })\n], -1))\nconst _hoisted_8 = [\"accept\", \"multiple\"]\n\nimport { FileImageTypes } from '@/constants/Common';\r\nimport type { FileItemRead } from '@/types';\r\nimport { isEmpty } from 'lodash-es';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { computed, ref } from 'vue';\r\nimport { useI18n } from 'vue-i18n';\r\nimport BImagePickerCloseButton from './BImagePickerCloseButton.vue';\r\nimport ImagePreview from './BImagePreview.vue';\r\nimport type { ValidationRule } from '@/composables/Validation';\r\nimport { useValidationField } from '@/composables/Validation';\r\nimport BLabel from '../BLabel.vue';\r\nimport BButton from '../BButton.vue';\r\nimport BErrorMessage from '../BErrorMessage.vue';\r\n\r\n//#region Props\r\nexport interface Props {\r\n  inputId?: string;\r\n  modelValue: FileItemRead[];\r\n  label?: string;\r\n  multiple?: boolean;\r\n  maxFileSize?: number;\r\n  hideDetails?: boolean;\r\n  required?: boolean;\r\n  requiredErrorMessage?: string;\r\n  validationRules?: ValidationRule[];\r\n}\r\n\r\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BImagePicker',\n  props: {\n    inputId: { default: '' },\n    modelValue: {},\n    label: { default: '' },\n    multiple: { type: Boolean, default: false },\n    maxFileSize: { default: 20 },\n    hideDetails: { type: Boolean, default: false },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    validationRules: { default: undefined }\n  },\n  emits: [\"change\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\r\n// Drag & Drop: https://www.w3schools.com/jsref/event_ondragover.asp\r\n\r\n//#endregion\r\n\r\n//#region Events\r\n\r\n//#endregion\r\n\r\n//#region Data\r\nconst { t } = useI18n();\r\nconst inputRef = ref<HTMLInputElement | null>(null);\r\nconst draggedIndex = ref(0);\r\nconst value = computed({\r\n  get() {\r\n    return props.modelValue;\r\n  },\r\n  set(val) {\r\n    emit('update:modelValue', val);\r\n  },\r\n});\r\nconst fileTypesValid = ref(true);\r\nconst fileSizeValid = ref(true);\r\nconst previewImage = ref({\r\n  visible: false,\r\n  url: '',\r\n});\r\nconst allowedTypes = computed(() => FileImageTypes.join(', '));\r\nconst id = computed(() => props.inputId || `id-${uuid()}`);\r\nconst validateRequired: ValidationRule = {\r\n  validateRule: (val: FileItemRead[]) => !!val && val.length > 0,\r\n  errorMessage: () =>\r\n    props.requiredErrorMessage || t('ds.global.field_required'),\r\n};\r\nconst validateFileTypesValid: ValidationRule = {\r\n  validateRule: () => fileTypesValid.value,\r\n  errorMessage: () =>\r\n    t('ds.components.base.image_picker.file_types_valid', {\r\n      types: allowedTypes.value,\r\n    }),\r\n};\r\nconst validateFileSizeValid: ValidationRule = {\r\n  validateRule: () => fileSizeValid.value,\r\n  errorMessage: () =>\r\n    t('ds.components.base.image_picker.file_size_valid', {\r\n      size: props.maxFileSize,\r\n    }),\r\n};\r\nconst vRules = computed(() => {\r\n  let result: ValidationRule[] = [];\r\n\r\n  if (props.required) {\r\n    result.push(validateRequired);\r\n  }\r\n  if (props.validationRules) {\r\n    result = result.concat(props.validationRules);\r\n  }\r\n  result.push(validateFileTypesValid);\r\n  result.push(validateFileSizeValid);\r\n\r\n  return result.length ? result : undefined;\r\n});\r\nconst { validate, validationResult } = useValidationField(\r\n  id.value,\r\n  value,\r\n  vRules.value,\r\n);\r\n//#endregion\r\n\r\n//#region Methods\r\n/* Events fired on the drag target */\r\nconst handleDragStart = (index: number, e: DragEvent) => {\r\n  draggedIndex.value = index;\r\n  const target = e.target as HTMLDivElement;\r\n  target.classList.add('dragging');\r\n  e.dataTransfer!.effectAllowed = 'move';\r\n  e.dataTransfer!.setData('index', index.toString());\r\n};\r\nconst handleDragEnd = (e: DragEvent) => {\r\n  const target = e.target as HTMLDivElement;\r\n  target.classList.remove('dragging');\r\n};\r\n/* Events fired on the drop target */\r\nconst handleDragEnter = (index: number, e: DragEvent) => {\r\n  const target = e.target as HTMLDivElement;\r\n  if (draggedIndex.value !== index) {\r\n    target.classList.add('dropped-target');\r\n  }\r\n};\r\nconst handleDragOver = (e: DragEvent) => {\r\n  // By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element\r\n  e.preventDefault();\r\n  e.dataTransfer!.dropEffect = 'move';\r\n};\r\nconst handleDragLeave = (e: DragEvent) => {\r\n  // When the draggable p element leaves the droptarget, reset the style\r\n  const target = e.target as HTMLDivElement;\r\n  target.classList.remove('dropped-target');\r\n};\r\nconst handleDrop = (index: number, e: DragEvent) => {\r\n  e.preventDefault();\r\n  const target = e.target as HTMLDivElement;\r\n  target.classList.remove('dropped-target');\r\n  const draggedIndex = parseInt(e.dataTransfer!.getData('index'));\r\n  const draggedImg = value.value[draggedIndex];\r\n  value.value.splice(draggedIndex, 1);\r\n  value.value.splice(index, 0, draggedImg);\r\n\r\n  emit('change');\r\n  validate();\r\n};\r\nconst openFileDialog = () => {\r\n  inputRef.value?.click();\r\n};\r\nconst onChangeInput = (e: any) => {\r\n  let fileList: FileList = e.target.files || e.dataTransfer.files;\r\n  if (!fileList.length) {\r\n    return;\r\n  }\r\n  createFileImages(fileList);\r\n\r\n  // Clear input's value so onChange event can work for the same files next picks\r\n  if (inputRef.value) {\r\n    inputRef.value.value = null as any;\r\n  }\r\n};\r\nconst createFileImages = (fileList: FileList) => {\r\n  Array.from(fileList).forEach((file) => {\r\n    fileTypesValid.value = FileImageTypes.includes(file.type);\r\n    fileSizeValid.value = convertToMB(file.size) <= props.maxFileSize;\r\n\r\n    if (fileTypesValid.value && fileSizeValid.value) {\r\n      let reader: any = new FileReader();\r\n\r\n      reader.onload = (f: any) => {\r\n        if (props.multiple) {\r\n          value.value.push({\r\n            url: f.target.result,\r\n            file,\r\n            type: file.type,\r\n          });\r\n        } else {\r\n          value.value.splice(0, 1, {\r\n            url: f.target.result,\r\n            file,\r\n            type: file.type,\r\n          });\r\n        }\r\n\r\n        emit('change');\r\n        validate();\r\n      };\r\n\r\n      reader.readAsDataURL(file);\r\n    } else {\r\n      validate();\r\n    }\r\n  });\r\n};\r\nconst removeFileImage = (e: Event, index: number) => {\r\n  e.stopPropagation();\r\n  value.value.splice(index, 1);\r\n\r\n  emit('change');\r\n  validate();\r\n};\r\nconst convertToMB = (numberOfBytes: number) => numberOfBytes / 1024 ** 2;\r\nconst preview = (item: FileItemRead) => {\r\n  previewImage.value.url = item.url;\r\n  previewImage.value.visible = true;\r\n};\r\n//#endregion\r\n\r\n__expose({ validate });\r\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n    _createVNode(BLabel, {\n      label: props.label\n    }, null, 8, [\"label\"]),\n    _createElementVNode(\"div\", _hoisted_2, [\n      (!_unref(isEmpty)(value.value))\n        ? (_openBlock(), _createElementBlock(\"div\", _hoisted_3, [\n            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(value.value, (item, index) => {\n              return (_openBlock(), _createElementBlock(\"div\", {\n                key: index,\n                class: \"b-image-picker__draggable ds-h-full ds-cursor-pointer ds-rounded-lg ds-transition-all hover:ds-ring-2 hover:ds-ring-primary-t\",\n                draggable: \"true\",\n                onClick: ($event: any) => (preview(item)),\n                onDragend: handleDragEnd,\n                onDragenter: ($event: any) => (handleDragEnter(index, $event)),\n                onDragleave: handleDragLeave,\n                onDragover: handleDragOver,\n                onDragstart: ($event: any) => (handleDragStart(index, $event)),\n                onDrop: ($event: any) => (handleDrop(index, $event))\n              }, [\n                _createElementVNode(\"img\", {\n                  src: item.url,\n                  alt: \"image\",\n                  class: \"ds-h-full ds-w-full ds-rounded-lg\"\n                }, null, 8, _hoisted_5),\n                _createVNode(BImagePickerCloseButton, {\n                  class: \"ds-right-1 ds-top-1 ds-h-8 ds-w-8\",\n                  onClick: (e) => removeFileImage(e, index)\n                }, null, 8, [\"onClick\"])\n              ], 40, _hoisted_4))\n            }), 128))\n          ]))\n        : _createCommentVNode(\"\", true),\n      _createElementVNode(\"div\", _hoisted_6, [\n        _createVNode(BButton, { onClick: openFileDialog }, {\n          default: _withCtx(() => [\n            _createTextVNode(_toDisplayString(_ctx.$t('ds.components.base.image_picker.select_image')), 1)\n          ]),\n          appendIcon: _withCtx(() => [\n            _hoisted_7\n          ]),\n          _: 1\n        }),\n        _createElementVNode(\"input\", {\n          ref_key: \"inputRef\",\n          ref: inputRef,\n          accept: allowedTypes.value,\n          multiple: props.multiple,\n          class: \"ds-hidden\",\n          type: \"file\",\n          onChange: onChangeInput\n        }, null, 40, _hoisted_8)\n      ])\n    ]),\n    (!props.hideDetails)\n      ? (_openBlock(), _createBlock(BErrorMessage, {\n          key: 0,\n          \"error-message\": _unref(validationResult).errorMessage(),\n          class: \"mt-1\"\n        }, null, 8, [\"error-message\"]))\n      : _createCommentVNode(\"\", true),\n    _createVNode(ImagePreview, {\n      modelValue: previewImage.value.visible,\n      \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((previewImage.value.visible) = $event)),\n      url: previewImage.value.url\n    }, null, 8, [\"modelValue\", \"url\"])\n  ]))\n}\n}\n\n})"],"names":["_withScopeId","_pushScopeId","n","_popScopeId","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_createElementVNode","_hoisted_8","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","inputRef","ref","draggedIndex","value","computed","val","fileTypesValid","fileSizeValid","previewImage","allowedTypes","FileImageTypes","id","uuid","validateRequired","validateFileTypesValid","validateFileSizeValid","vRules","result","validate","validationResult","useValidationField","handleDragStart","index","e","handleDragEnd","handleDragEnter","target","handleDragOver","handleDragLeave","handleDrop","draggedImg","openFileDialog","_a","onChangeInput","fileList","createFileImages","file","convertToMB","reader","f","removeFileImage","numberOfBytes","preview","item","_ctx","_cache","_openBlock","_createElementBlock","_createVNode","BLabel","_unref","isEmpty","_createCommentVNode","_Fragment","_renderList","$event","BImagePickerCloseButton","BButton","_withCtx","_createTextVNode","_toDisplayString","_createBlock","BErrorMessage","ImagePreview"],"mappings":"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"}

package/dist/design-system87.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),h=require("./design-system30.js"),g=require("./design-system3.js"),V=require("./design-system29.js"),q=require("./design-system48.js"),B=require("./design-system97.js"),C=require("./design-system5.js"),E=require("./design-system94.js"),N={class:"b-currency-field"},R={class:"ds-relative"},I={key:0,class:"b-currency-field__prepend-icon ds-absolute ds-left-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"},S=["id","autocomplete","disabled","placeholder","readonly","onKeyup"],M={key:1,class:"b-currency-field__append-icon ds-absolute ds-right-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"},w=e.defineComponent({__name:"BCurrencyField",props:{inputId:{default:""},inputCssClass:{default:""},modelValue:{},label:{default:""},validationRules:{default:void 0},placeholder:{default:""},autocomplete:{type:Boolean,default:!1},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},hideDetails:{type:Boolean,default:!1},locale:{default:C.SupportedLocale["vi-VN"]}},emits:["press:enter","update:modelValue"],setup(i,{emit:a}){const t=i;let o;const{t:c}=q.useI18n(),u=e.ref(null),p={validateRule:s=>!!(s&&(s!=null&&s.trim())),errorMessage:()=>t.requiredErrorMessage||c("ds.global.field_required")},r=e.computed(()=>t.inputId||`id-${E()}`),l=e.computed({get(){return t.modelValue},set(s){a("update:modelValue",s)}}),m=e.computed(()=>[{"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]":t.disabled,"ds-text-black/[0.85]":!t.disabled,"ds-border-error focus:ds-ring-1 focus:ds-ring-error":!d.value.valid,"ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus":d.value.valid},t.inputCssClass]),f=e.computed(()=>{let s=[];return t.required&&s.push(p),t.validationRules&&(s=s.concat(t.validationRules)),s.length?s:void 0}),v=e.computed(()=>t.locale==="en-US"?{mask:"$num",blocks:{num:{mask:Number,thousandsSeparator:" "}}}:[{mask:""},{mask:"num VND",lazy:!1,blocks:{num:{mask:Number,thousandsSeparator:" "}}}]),{validate:k,validationResult:d}=g.useValidationField(r.value,l,f.value);e.watch(()=>t.locale,()=>{n()}),e.watch(()=>t.modelValue,s=>{s!=o.unmaskedValue&&(o.unmaskedValue=s.toString())});const _=()=>{k()},b=()=>{a("press:enter")},y=()=>{l.value=typeof l.value=="number"?+o.unmaskedValue:o.unmaskedValue},n=()=>{o&&o.destroy(),o=B(u.value,v.value),o.on("accept",y)};return e.onMounted(()=>{n(),o.unmaskedValue=l.value.toString()}),(s,$)=>(e.openBlock(),e.createElementBlock("div",N,[e.createVNode(h,{id:r.value,label:s.label,required:s.required},null,8,["id","label","required"]),e.createElementVNode("div",R,[s.$slots.prependIcon?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(s.$slots,"prependIcon",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("input",{id:r.value,ref_key:"inputRef",ref:u,autocomplete:t.autocomplete?"on":"off",class:e.normalizeClass([m.value,"ds-block ds-h-[40px] ds-w-full ds-rounded-lg ds-border ds-px-3 ds-text-sm ds-drop-shadow-light"]),disabled:t.disabled,placeholder:t.placeholder,readonly:t.readonly,onKeyup:[_,e.withKeys(b,["enter"])]},null,42,S),s.$slots.appendIcon?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(s.$slots,"appendIcon",{},void 0,!0)])):e.createCommentVNode("",!0)]),s.hideDetails?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(V,{key:0,"error-message":e.unref(d).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))]))}});module.exports=w;
+"use strict";const e=require("vue"),h=require("./design-system30.js"),g=require("./design-system3.js"),V=require("./design-system29.js"),q=require("./design-system48.js"),B=require("./design-system95.js"),C=require("./design-system5.js"),E=require("./design-system93.js"),N={class:"b-currency-field"},R={class:"ds-relative"},I={key:0,class:"b-currency-field__prepend-icon ds-absolute ds-left-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"},S=["id","autocomplete","disabled","placeholder","readonly","onKeyup"],M={key:1,class:"b-currency-field__append-icon ds-absolute ds-right-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"},w=e.defineComponent({__name:"BCurrencyField",props:{inputId:{default:""},inputCssClass:{default:""},modelValue:{},label:{default:""},validationRules:{default:void 0},placeholder:{default:""},autocomplete:{type:Boolean,default:!1},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},hideDetails:{type:Boolean,default:!1},locale:{default:C.SupportedLocale["vi-VN"]}},emits:["press:enter","update:modelValue"],setup(i,{emit:a}){const t=i;let o;const{t:c}=q.useI18n(),u=e.ref(null),p={validateRule:s=>!!(s&&(s!=null&&s.trim())),errorMessage:()=>t.requiredErrorMessage||c("ds.global.field_required")},r=e.computed(()=>t.inputId||`id-${E()}`),l=e.computed({get(){return t.modelValue},set(s){a("update:modelValue",s)}}),m=e.computed(()=>[{"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]":t.disabled,"ds-text-black/[0.85]":!t.disabled,"ds-border-error focus:ds-ring-1 focus:ds-ring-error":!d.value.valid,"ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus":d.value.valid},t.inputCssClass]),f=e.computed(()=>{let s=[];return t.required&&s.push(p),t.validationRules&&(s=s.concat(t.validationRules)),s.length?s:void 0}),v=e.computed(()=>t.locale==="en-US"?{mask:"$num",blocks:{num:{mask:Number,thousandsSeparator:" "}}}:[{mask:""},{mask:"num VND",lazy:!1,blocks:{num:{mask:Number,thousandsSeparator:" "}}}]),{validate:k,validationResult:d}=g.useValidationField(r.value,l,f.value);e.watch(()=>t.locale,()=>{n()}),e.watch(()=>t.modelValue,s=>{s!=o.unmaskedValue&&(o.unmaskedValue=s.toString())});const _=()=>{k()},b=()=>{a("press:enter")},y=()=>{l.value=typeof l.value=="number"?+o.unmaskedValue:o.unmaskedValue},n=()=>{o&&o.destroy(),o=B(u.value,v.value),o.on("accept",y)};return e.onMounted(()=>{n(),o.unmaskedValue=l.value.toString()}),(s,$)=>(e.openBlock(),e.createElementBlock("div",N,[e.createVNode(h,{id:r.value,label:s.label,required:s.required},null,8,["id","label","required"]),e.createElementVNode("div",R,[s.$slots.prependIcon?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(s.$slots,"prependIcon",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("input",{id:r.value,ref_key:"inputRef",ref:u,autocomplete:t.autocomplete?"on":"off",class:e.normalizeClass([m.value,"ds-block ds-h-[40px] ds-w-full ds-rounded-lg ds-border ds-px-3 ds-text-sm ds-drop-shadow-light"]),disabled:t.disabled,placeholder:t.placeholder,readonly:t.readonly,onKeyup:[_,e.withKeys(b,["enter"])]},null,42,S),s.$slots.appendIcon?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(s.$slots,"appendIcon",{},void 0,!0)])):e.createCommentVNode("",!0)]),s.hideDetails?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(V,{key:0,"error-message":e.unref(d).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))]))}});module.exports=w;
 //# sourceMappingURL=design-system87.js.map

package/dist/design-system87.mjs

@@ -3,9 +3,9 @@ import K from "./design-system30.mjs";
 import { useValidationField as x } from "./design-system3.mjs";
 import z from "./design-system29.mjs";
 import { useI18n as D } from "./design-system48.mjs";
-import U from "./design-system97.mjs";
+import U from "./design-system95.mjs";
 import { SupportedLocale as F } from "./design-system5.mjs";
-import A from "./design-system94.mjs";
+import A from "./design-system93.mjs";
 const L = { class: "b-currency-field" }, O = { class: "ds-relative" }, j = {
   key: 0,
   class: "b-currency-field__prepend-icon ds-absolute ds-left-3 ds-top-0 ds-z-[1] ds-flex ds-h-full ds-cursor-pointer ds-items-center hover:ds-text-primary-t"

package/dist/design-system90.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./design-system89.js"),y=require("./design-system91.js"),Q=require("./design-system100.js");/*!
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./design-system89.js"),y=require("./design-system91.js"),Q=require("./design-system94.js");/*!
   * core-base v9.2.2
   * (c) 2022 kazuya kawaguchi
   * Released under the MIT License.