vue-smart-ui
Version:
A collection of Vue 3 smart and highly customizable UI components for modern web applications
1 lines • 51.2 kB
JavaScript
(function(x,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(x=typeof globalThis<"u"?globalThis:x||self,e(x.VueSmartUI={},x.Vue))})(this,function(x,e){"use strict";let H=0;function z(t="base",b){const a=()=>(H++,`${t}-${H}`);return{autoId:e.computed(()=>b.id||a())}}const ie=["id"],U={__name:"BaseAccordion",props:{id:{type:String,default:""},multiple:{type:Boolean,default:!1},variant:{type:String,default:"default",validator:t=>["default","bordered","minimal"].includes(t)}},setup(t){const b=t,{autoId:a}=z("accordion",b),o=e.ref([]),r=l=>{if(b.multiple){const m=o.value.indexOf(l);m===-1?o.value.push(l):o.value.splice(m,1)}else o.value=o.value.includes(l)?[]:[l]};return e.provide("accordion",{activeItems:o,toggleItem:r,variant:b.variant}),(l,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vsui base-accordion",`base-accordion--${t.variant}`]),id:e.unref(a)},[e.renderSlot(l.$slots,"default")],10,ie))}},de=["disabled","aria-expanded"],ce={class:"base-accordion-item__body"},W={__name:"BaseAccordionItem",props:{title:{type:String,required:!0},disabled:{type:Boolean,default:!1}},setup(t){const b=t,a=e.inject("accordion"),o=e.ref(Symbol()),r=e.ref("0px"),l=e.ref(null),m=e.computed(()=>a.activeItems.value.includes(o.value)),c=e.computed(()=>a.variant),d=()=>{b.disabled||a.toggleItem(o.value)},g=()=>{l.value&&(r.value=m.value?`${l.value.scrollHeight}px`:"0px")},S=new ResizeObserver(g);return e.onMounted(()=>{l.value&&(S.observe(l.value),g())}),e.onUnmounted(()=>{S.disconnect()}),e.watch(m,g),(k,$)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vsui base-accordion-item",[`base-accordion-item--${c.value}`,{"base-accordion-item--active":m.value,"base-accordion-item--disabled":t.disabled}]])},[e.createElementVNode("button",{class:"base-accordion-item__header",onClick:d,disabled:t.disabled,"aria-expanded":m.value},[k.$slots.icon?e.renderSlot(k.$slots,"icon",{key:0}):e.createCommentVNode("",!0),e.renderSlot(k.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),e.renderSlot(k.$slots,"chevron",{},()=>[$[0]||($[0]=e.createElementVNode("svg",{class:"base-accordion-item__chevron",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},[e.createElementVNode("path",{fill:"currentColor",d:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"})],-1))])],8,de),e.createElementVNode("div",{class:"base-accordion-item__content",ref_key:"contentRef",ref:l,style:e.normalizeStyle({height:r.value})},[e.createElementVNode("div",ce,[e.renderSlot(k.$slots,"default")])],4)],2))}},ue=["id","disabled"],me={key:0,class:"spinner"},G=Object.assign({inheritAttrs:!1},{__name:"BaseButton",props:{id:{type:String,default:""},type:{type:String,default:"button",validator:t=>["button","submit","reset"].includes(t)},variant:{type:String,default:"primary",validator:t=>["primary","secondary","gray","outline","ghost"].includes(t)},size:{type:String,default:"medium",validator:t=>["small","medium","large","auto"].includes(t)},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},iconOnly:{type:Boolean,default:!1}},emits:["click"],setup(t){const b=t,{autoId:a}=z("button",b);return(o,r)=>(e.openBlock(),e.createElementBlock("button",{id:e.unref(a),class:e.normalizeClass(["vsui base-button",[`base-button--${t.variant}`,`base-button--${t.size}`,{"base-button--block":t.block,"base-button--disabled":t.disabled||t.loading,"base-button--icon-only":t.iconOnly,"base-button--loading":t.loading},o.$attrs.class]]),disabled:t.disabled||t.loading,onClick:r[0]||(r[0]=l=>o.$emit("click",l))},[e.createElementVNode("div",{class:e.normalizeClass(["button-content",[{hidden:t.loading},o.$attrs.class]])},[o.$slots.prefix?e.renderSlot(o.$slots,"prefix",{key:0}):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default"),o.$slots.suffix?e.renderSlot(o.$slots,"suffix",{key:1}):e.createCommentVNode("",!0)],2),t.loading?(e.openBlock(),e.createElementBlock("div",me)):e.createCommentVNode("",!0)],10,ue))}}),fe=["id","checked","disabled","indeterminate"],pe={class:"base-checkbox__checkmark"},ge={key:0,viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},ye={key:1,viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},be={key:0,class:"base-checkbox__label"},X={__name:"BaseCheckbox",props:{id:{type:String,default:""},modelValue:{type:[Boolean,Array],default:!1},value:{type:[String,Number,Boolean,Object],default:null},label:{type:String,default:""},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)},disabled:{type:Boolean,default:!1},error:{type:Boolean,default:!1},indeterminate:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:b}){const a=t,{autoId:o}=z("checkbox",a),r=b,l=e.computed(()=>Array.isArray(a.modelValue)?a.modelValue.includes(a.value):a.modelValue),m=c=>{if(Array.isArray(a.modelValue)){const d=[...a.modelValue];if(c.target.checked)d.push(a.value);else{const g=d.indexOf(a.value);g>-1&&d.splice(g,1)}r("update:modelValue",d)}else r("update:modelValue",c.target.checked)};return(c,d)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["vsui base-checkbox",`base-checkbox--${t.size}`,{"base-checkbox--disabled":t.disabled,"base-checkbox--error":t.error}])},[e.createElementVNode("input",{id:e.unref(o),type:"checkbox",checked:l.value,disabled:t.disabled,indeterminate:t.indeterminate,class:"base-checkbox__input",onChange:m},null,40,fe),e.createElementVNode("span",pe,[e.renderSlot(c.$slots,"checkmark",{},()=>[l.value&&!t.indeterminate?(e.openBlock(),e.createElementBlock("svg",ge,d[0]||(d[0]=[e.createElementVNode("path",{d:"M11.6666 3.5L5.24992 9.91667L2.33325 7",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)]))):e.createCommentVNode("",!0),t.indeterminate?(e.openBlock(),e.createElementBlock("svg",ye,d[1]||(d[1]=[e.createElementVNode("path",{d:"M2.91675 7H11.0834",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)]))):e.createCommentVNode("",!0)])]),c.$slots.default||t.label?(e.openBlock(),e.createElementBlock("span",be,[e.renderSlot(c.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])])):e.createCommentVNode("",!0)],2))}},he=["id"],J={__name:"BaseDropdown",props:{id:{type:String,default:""},modelValue:{type:Boolean,default:!1},variant:{type:String,default:"default",validator:t=>["default","white","dark"].includes(t)},width:{type:String,default:"auto"},closeOnClick:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(t,{emit:b}){const a=t,{autoId:o}=z("dropdown",a),r=b,l=e.ref(null),m=e.ref(null),c=e.ref(a.modelValue),d=()=>{if(!m.value||!l.value)return;const k=m.value.getBoundingClientRect(),$=l.value.getBoundingClientRect(),E={width:window.innerWidth,height:window.innerHeight};m.value.style.top="100%",m.value.style.bottom="auto",m.value.style.left="auto",m.value.style.right="0",$.right+k.width>E.width&&(m.value.style.right="0",m.value.style.left="auto"),$.right-k.width<0&&(m.value.style.left="0",m.value.style.right="auto"),$.bottom+k.height>E.height&&(m.value.style.bottom="100%",m.value.style.top="auto",m.value.style.marginTop="0",m.value.style.marginBottom="0.5rem")};e.watch(()=>a.modelValue,k=>{c.value=k,k?(document.addEventListener("click",g),e.nextTick(()=>{d()})):document.removeEventListener("click",g)});const g=k=>{a.closeOnClickOutside&&l.value&&!l.value.contains(k.target)&&r("update:modelValue",!1)},S=k=>{a.closeOnClick&&!k.target.closest("[data-prevent-close]")&&r("update:modelValue",!1)};return e.onMounted(()=>{a.modelValue&&document.addEventListener("click",g),window.addEventListener("scroll",d,!0),window.addEventListener("resize",d)}),e.onUnmounted(()=>{document.removeEventListener("click",g),window.removeEventListener("scroll",d,!0),window.removeEventListener("resize",d)}),(k,$)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dropdownRef",ref:l,class:"vsui base-dropdown",id:e.unref(o)},[e.createElementVNode("div",{class:"base-dropdown__trigger",onClick:$[0]||($[0]=E=>r("update:modelValue",!t.modelValue))},[e.renderSlot(k.$slots,"trigger")]),e.createVNode(e.Transition,{name:"dropdown"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"menuRef",ref:m,class:e.normalizeClass(["base-dropdown__menu",`base-dropdown__menu--${t.variant}`]),style:e.normalizeStyle({width:t.width}),onClick:S},[e.renderSlot(k.$slots,"default")],6),[[e.vShow,c.value]])]),_:3})],8,he))}},ke={class:"vsui infinite-scroll"},Be={class:"infinite-scroll__loader"},Ve={key:0},ve={key:0,class:"infinite-scroll__end"},Q={__name:"BaseInfiniteScroll",props:{loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},threshold:{type:Number,default:20},container:{type:String,default:null},loadingText:{type:String,default:"Loading more items..."},endText:{type:String,default:"There are no more items to load"}},emits:["load-more"],setup(t,{emit:b}){const a=t,o=b,r=e.ref(null),l=e.ref(null),m=()=>{r.value&&r.value.disconnect(),r.value=new IntersectionObserver(c=>{c[0].isIntersecting&&!a.loading&&!a.disabled&&o("load-more")},{threshold:0,root:a.container?document.querySelector(a.container):null,rootMargin:`0px 0px ${a.threshold}px 0px`}),l.value&&r.value.observe(l.value)};return e.watch(()=>a.loading,(c,d)=>{d===!0&&c===!1&&setTimeout(()=>{m()},100)}),e.onMounted(()=>{m()}),e.onUnmounted(()=>{r.value&&r.value.disconnect()}),(c,d)=>(e.openBlock(),e.createElementBlock("div",ke,[e.renderSlot(c.$slots,"default"),e.createElementVNode("div",{ref_key:"bottomElement",ref:l,class:"infinite-scroll__trigger"},[t.loading?e.renderSlot(c.$slots,"loading",{key:0},()=>[e.createElementVNode("div",Be,[d[0]||(d[0]=e.createElementVNode("div",{class:"spinner"},null,-1)),t.loadingText?(e.openBlock(),e.createElementBlock("span",Ve,e.toDisplayString(t.loadingText),1)):e.createCommentVNode("",!0)])]):t.disabled?e.renderSlot(c.$slots,"disabled",{key:1},()=>[t.endText?(e.openBlock(),e.createElementBlock("div",ve,e.toDisplayString(t.endText),1)):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0)],512)]))}},Se={key:0,class:"base-input__label"},we={key:0,class:"base-input__required","aria-hidden":"true"},$e={class:"base-input__wrapper"},Ee={key:0,class:"base-input__prefix"},Ce=["id","type","value","placeholder","disabled","readonly","required","aria-required","maxlength","min","max"],xe={key:1,class:"base-input__suffix"},P={__name:"BaseInput",props:{id:{type:String,default:""},modelValue:{type:[String,Number],default:""},variant:{type:String,default:"default",validator:t=>["default","filled","outlined"].includes(t)},state:{type:String,default:null,validator:t=>["success","error","warning"].includes(t)},type:{type:String,default:"text"},label:{type:String,default:null},placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},helperText:{type:String,default:null},errorMessage:{type:String,default:null},prefixIcon:{type:String,default:null},suffixIcon:{type:String,default:null},rules:{type:Array,default:()=>[]},validateOnBlur:{type:Boolean,default:!0},validateOnInput:{type:Boolean,default:!1},name:{type:String,default:""},min:{type:[Number,String],default:null},max:{type:[Number,String],default:null},mask:{type:[String,Object],default:null}},emits:["update:modelValue","focus","blur","input","validation","mounted"],setup(t,{emit:b}){const a=e.useSlots(),o=t,{autoId:r}=z("input",o),l=b,m=e.ref(null),c=e.ref(!1),d=e.ref(""),g=e.computed(()=>({"vsui base-input":!0,[`base-input--${o.variant}`]:!0,[`base-input--${f.value}`]:f.value,"base-input--disabled":o.disabled,"base-input--focused":c.value,"base-input--with-prefix":o.prefixIcon||a.prefix,"base-input--with-suffix":o.suffixIcon||a.suffix})),S={required:n=>({valid:!!(n!=null&&n.toString().trim()),message:"This field is required"}),email:n=>({valid:!n||/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n),message:"Please enter a valid email"}),min:(n,p)=>({valid:!n||n.length>=p,message:`Must be at least ${p} characters`}),max:(n,p)=>({valid:!n||n.length<=p,message:`Must be no more than ${p} characters`}),pattern:(n,p)=>({valid:!n||new RegExp(p).test(n),message:"Invalid format"}),minValue:(n,p)=>({valid:!n||Number(n)>=p,message:`Value must be at least ${p}`}),maxValue:(n,p)=>({valid:!n||Number(n)<=p,message:`Value must be no more than ${p}`}),hexColor:n=>({valid:!n||/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(n),message:"Invalid HEX color"}),rgbColor:n=>({valid:!n||/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/.test(n),message:"Invalid RGB color"}),rgbaColor:n=>({valid:!n||/^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|0?\.\d+|1(\.0)?)\s*\)$/.test(n),message:"Invalid RGBA color"}),hslColor:n=>({valid:!n||/^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/.test(n),message:"Invalid HSL color"})},k=n=>{if(!o.rules.length)return!0;for(const p of o.rules){if(typeof p=="string"){const B=S[p];if(B){const w=B(n);if(!w.valid)return d.value=w.message,!1}continue}if(typeof p=="object"){const[B,w]=Object.entries(p)[0];console.log(B,w);const M=S[B];if(M){const I=M(n,w);if(!I.valid)return d.value=p.message||I.message,!1}if(typeof p.validator=="function"&&!p.validator(n))return d.value=p.message||"Invalid value",!1}}return d.value="",!0},$=e.computed({get:()=>o.mask==="currency"&&o.modelValue?E.currency.format(o.modelValue):o.modelValue,set:n=>l("update:modelValue",n)}),E={phone:{patterns:["(##) ####-####","(##) #####-####"],match:n=>n.replace(/\D/g,"").length<=10?0:1},currency:{pattern:"currency",format:n=>{if(!n)return"";const p=typeof n=="string"?parseFloat(n.replace(/\D/g,""))/100:n;return new Intl.NumberFormat("pt-BR",{style:"currency",currency:"BRL",minimumFractionDigits:2,maximumFractionDigits:2}).format(p)},parse:n=>{const p=n.replace(/[^\d]/g,"");return parseFloat(p)/100}},date:"##/##/####",cpf:"###.###.###-##",cnpj:"##.###.###/####-##",cep:"#####-###"},_=(n,p)=>{if(!n)return n;if(p==="currency"||p.pattern==="currency"){const B=E.currency.parse(n);return E.currency.format(B)}if(typeof p=="string")return N(n,p);if(p.patterns){const B=p.match(n);return N(n,p.patterns[B])}return n},N=(n,p)=>{if(!p)return n;const w=n.replace(/\D/g,"").split("");let M="",I=0;for(let A=0;A<p.length&&w[A];A++)p[I]==="#"?(M+=w[A],I++):(M+=p[I],I++,A--);return M},T=n=>{let p=n.target.value;if(o.mask){const B=typeof o.mask=="string"?E[o.mask]||o.mask:o.mask.pattern;p=_(p,B),m.value&&(m.value.value=p)}if(o.mask==="currency"){const B=E.currency.parse(p);$.value=B,l("update:modelValue",B)}else $.value=p,l("update:modelValue",p);if(l("input",{...n,target:{...n.target,value:p}}),o.validateOnInput){const B=k($.value);l("validation",{valid:B,error:d.value})}},v=n=>{c.value=!0,l("enter",n)},i=n=>{c.value=!0,l("focus",n)},u=n=>{if(c.value=!1,l("blur",n),o.validateOnBlur){const p=k($.value);l("validation",{valid:p,error:d.value})}},s=()=>{var n;(n=m.value)==null||n.focus()},f=e.computed(()=>d.value?"error":o.state),h=e.computed(()=>d.value?d.value:o.errorMessage||o.helperText),V=()=>{const n=k($.value);return l("validation",{valid:n,error:d.value,name:o.name}),n},C=e.computed(()=>o.required?!0:o.rules.some(n=>n==="required"?!0:typeof n=="object"?n.required||Object.keys(n)[0]==="required":!1)),y=e.computed(()=>{if(!o.mask)return;const n=typeof o.mask=="string"?E[o.mask]||o.mask:o.mask.pattern;if(typeof n=="string")return n.length;if(n.patterns)return Math.max(...n.patterns.map(p=>p.length))});return e.onMounted(()=>{l("mounted",{validate:V,focus:s})}),(n,p)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(g.value)},[t.label?(e.openBlock(),e.createElementBlock("label",Se,[e.createTextVNode(e.toDisplayString(t.label)+" ",1),C.value?(e.openBlock(),e.createElementBlock("span",we,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",$e,[n.$slots.prefix||t.prefixIcon?(e.openBlock(),e.createElementBlock("div",Ee,[e.renderSlot(n.$slots,"prefix",{},()=>[e.createElementVNode("i",{class:e.normalizeClass(t.prefixIcon)},null,2)])])):e.createCommentVNode("",!0),e.createElementVNode("input",{id:e.unref(r),ref_key:"inputRef",ref:m,type:t.type,value:$.value,placeholder:t.placeholder,disabled:t.disabled,readonly:t.readonly,required:C.value,"aria-required":C.value,maxlength:y.value,min:t.min,max:t.max,class:"base-input__field",onInput:T,onFocus:i,onBlur:u,onKeydown:e.withKeys(v,["enter"])},null,40,Ce),n.$slots.suffix||t.suffixIcon?(e.openBlock(),e.createElementBlock("div",xe,[e.renderSlot(n.$slots,"suffix",{},()=>[e.createElementVNode("i",{class:e.normalizeClass(t.suffixIcon)},null,2)])])):e.createCommentVNode("",!0)]),h.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["base-input__helper",{"base-input__helper--error":d.value}])},e.toDisplayString(h.value),3)):e.createCommentVNode("",!0)],2))}},Ne={key:0,class:"base-popup__header"},_e={class:"base-popup__content"},Ie={key:1,class:"base-popup__footer"},Y={__name:"BasePopup",props:{modelValue:{type:Boolean,default:!1},variant:{type:String,default:"default",validator:t=>["default","info","success","warning","error"].includes(t)},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)},position:{type:String,default:"center",validator:t=>["center","top","bottom","left","right"].includes(t)},disableClickOutside:{type:Boolean,default:!1},closeOnEsc:{type:Boolean,default:!0}},emits:["update:modelValue","close"],setup(t,{emit:b}){const a=t,o=b,r=e.ref(null),l=c=>{!a.disableClickOutside&&r.value&&!r.value.contains(c.target)&&(c.target.closest(".base-popup")||(o("update:modelValue",!1),o("close")))},m=c=>{a.closeOnEsc&&c.key==="Escape"&&(o("update:modelValue",!1),o("close"))};return e.onMounted(()=>{document.addEventListener("mousedown",l),document.addEventListener("keydown",m)}),e.onUnmounted(()=>{document.removeEventListener("mousedown",l),document.removeEventListener("keydown",m)}),(c,d)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[t.modelValue?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["vsui base-popup-overlay",[`base-popup-overlay--${t.position}`]])},[e.createElementVNode("div",{ref_key:"popupRef",ref:r,class:e.normalizeClass(["base-popup",[`base-popup--${t.variant}`,`base-popup--${t.size}`,`base-popup--${t.position}`]])},[c.$slots.header?(e.openBlock(),e.createElementBlock("div",Ne,[e.renderSlot(c.$slots,"header")])):e.createCommentVNode("",!0),e.createElementVNode("div",_e,[e.renderSlot(c.$slots,"default")]),c.$slots.footer?(e.openBlock(),e.createElementBlock("div",Ie,[e.renderSlot(c.$slots,"footer")])):e.createCommentVNode("",!0),c.$slots.close?(e.openBlock(),e.createElementBlock("button",{key:2,class:"base-popup__close",onClick:d[0]||(d[0]=g=>c.$emit("update:modelValue",!1))},[e.renderSlot(c.$slots,"close")])):e.createCommentVNode("",!0)],2)],2)):e.createCommentVNode("",!0)]))}},Z={__name:"BaseSkeleton",props:{variant:{type:String,default:"rectangle",validator:t=>["rectangle","circle","text","heading","button"].includes(t)},width:{type:String,default:"100%"},height:{type:String,default:null},animated:{type:Boolean,default:!0},rounded:{type:Boolean,default:!1}},setup(t){return(b,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vsui base-skeleton",[`base-skeleton--${t.variant}`,{"base-skeleton--animated":t.animated,"base-skeleton--rounded":t.rounded}]]),style:e.normalizeStyle({width:t.width,height:t.height||null})},[e.renderSlot(b.$slots,"default")],6))}},Me=["for"],Te={key:0,class:"base-slider__required"},Ae={class:"base-slider__container"},ze={class:"base-slider__extremity-value base-slider__extremity-value--min"},qe={key:0,class:"base-slider__mark-label"},Re=["onMousedown","onTouchstart","onKeydown","aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","aria-disabled"],Oe={key:0,class:"base-slider__thumb-value"},De={class:"base-slider__extremity-value base-slider__extremity-value--max"},Le={key:1,class:"base-slider__helper"},ee={__name:"BaseSlider",props:{id:{type:String,default:""},modelValue:{type:[Number,Array],default:0},min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},label:{type:String,default:null},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},helperText:{type:String,default:null},errorMessage:{type:String,default:null},state:{type:String,default:null,validator:t=>["success","error","warning"].includes(t)},showValue:{type:Boolean,default:!0},range:{type:Boolean,default:!1},variant:{type:String,default:"default",validator:t=>["default","filled"].includes(t)},marks:{type:Array,default:()=>[]},formatValue:{type:Function,default:null}},emits:["update:modelValue","change","mounted"],setup(t,{emit:b}){const a=t,o=b,{autoId:r}=z("slider",a),l=e.ref(a.modelValue),m=e.ref(!1),c=e.ref(null),d=e.ref([]),g=e.computed(()=>a.range&&Array.isArray(a.modelValue)),S=e.computed(()=>a.formatValue?g.value?l.value.map(v=>a.formatValue(v)):a.formatValue(l.value):l.value),k=e.computed(()=>{if(g.value){const[v,i]=l.value,u=(v-a.min)/(a.max-a.min)*100,s=(i-a.min)/(a.max-a.min)*100;return{left:`${u}%`,width:`${s-u}%`}}else return{width:`${(l.value-a.min)/(a.max-a.min)*100}%`}}),$=e.computed(()=>g.value?l.value.map(v=>`${(v-a.min)/(a.max-a.min)*100}%`):[`${(l.value-a.min)/(a.max-a.min)*100}%`]),E=e.computed(()=>({"base-slider--disabled":a.disabled,"base-slider--success":a.state==="success","base-slider--error":a.state==="error","base-slider--warning":a.state==="warning","base-slider--filled":a.variant==="filled"}));e.watch(()=>a.modelValue,v=>{l.value=v}),e.watch(l,v=>{o("update:modelValue",v)});const _=(v,i=0)=>{if(a.disabled)return;const u=c.value.getBoundingClientRect(),s=v.clientX-u.left,f=Math.min(Math.max(s/u.width,0),1),h=a.min+f*(a.max-a.min),V=Math.round(h/a.step)*a.step,C=Math.min(Math.max(V,a.min),a.max);if(g.value){const y=[...l.value];y[i]=C,i===0&&y[0]>y[1]?y[0]=y[1]:i===1&&y[1]<y[0]&&(y[1]=y[0]),l.value=y}else l.value=C;o("change",l.value)},N=(v,i=0)=>{if(a.disabled)return;m.value=!0,_(v,i);const u=f=>_(f,i),s=()=>{m.value=!1,document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",s),document.removeEventListener("touchmove",u),document.removeEventListener("touchend",s)};document.addEventListener("mousemove",u),document.addEventListener("mouseup",s),document.addEventListener("touchmove",u),document.addEventListener("touchend",s)},T=(v,i=0)=>{if(a.disabled)return;const u=g.value?l.value[i]:l.value;let s=u;switch(v.key){case"ArrowRight":case"ArrowUp":s=Math.min(u+a.step,a.max);break;case"ArrowLeft":case"ArrowDown":s=Math.max(u-a.step,a.min);break;case"Home":s=a.min;break;case"End":s=a.max;break;default:return}if(g.value){const f=[...l.value];f[i]=s,i===0&&f[0]>f[1]?f[0]=f[1]:i===1&&f[1]<f[0]&&(f[1]=f[0]),l.value=f}else l.value=s;o("change",l.value),v.preventDefault()};return e.onMounted(()=>{g.value&&(!Array.isArray(l.value)||l.value.length!==2)?l.value=[a.min,a.max]:!g.value&&Array.isArray(l.value)&&(l.value=a.min),o("mounted",{id:r.value,getValue:()=>l.value,setValue:v=>{l.value=v}})}),(v,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vsui base-slider",E.value])},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:e.unref(r),class:"base-slider__label"},[e.createTextVNode(e.toDisplayString(t.label)+" ",1),t.required?(e.openBlock(),e.createElementBlock("span",Te,"*")):e.createCommentVNode("",!0)],8,Me)):e.createCommentVNode("",!0),e.createElementVNode("div",Ae,[e.createElementVNode("div",ze,e.toDisplayString(t.formatValue?t.formatValue(t.min):t.min),1),e.createElementVNode("div",{ref_key:"sliderTrack",ref:c,class:"base-slider__track",onMousedown:i[0]||(i[0]=u=>_(u)),onTouchstart:i[1]||(i[1]=e.withModifiers(u=>_(u.touches[0]),["prevent"]))},[e.createElementVNode("div",{class:"base-slider__track-fill",style:e.normalizeStyle(k.value)},null,4),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.marks,u=>(e.openBlock(),e.createElementBlock("div",{key:u.value,class:e.normalizeClass(["base-slider__mark",{"base-slider__mark--active":g.value?u.value>=l.value[0]&&u.value<=l.value[1]:u.value<=l.value}]),style:e.normalizeStyle({left:`calc(${(u.value-t.min)/(t.max-t.min)*100}%)`})},[i[2]||(i[2]=e.createElementVNode("div",{class:"base-slider__mark-dot"},null,-1)),u.label?(e.openBlock(),e.createElementBlock("div",qe,e.toDisplayString(u.label),1)):e.createCommentVNode("",!0)],6))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList($.value,(u,s)=>(e.openBlock(),e.createElementBlock("div",{key:s,ref_for:!0,ref_key:"thumbRefs",ref:d,class:"base-slider__thumb",style:e.normalizeStyle({left:u}),onMousedown:e.withModifiers(f=>N(f,s),["stop"]),onTouchstart:e.withModifiers(f=>N(f.touches[0],s),["stop","prevent"]),onKeydown:f=>T(f,s),tabindex:"0",role:"slider","aria-valuemin":t.min,"aria-valuemax":t.max,"aria-valuenow":g.value?l.value[s]:l.value,"aria-valuetext":g.value?S.value[s]:S.value,"aria-disabled":t.disabled},[t.showValue?(e.openBlock(),e.createElementBlock("div",Oe,e.toDisplayString(g.value?S.value[s]:S.value),1)):e.createCommentVNode("",!0)],44,Re))),128))],544),e.createElementVNode("div",De,e.toDisplayString(t.formatValue?t.formatValue(t.max):t.max),1)]),t.helperText||t.errorMessage?(e.openBlock(),e.createElementBlock("div",Le,e.toDisplayString(t.errorMessage||t.helperText),1)):e.createCommentVNode("",!0)],2))}},Fe={key:0,class:"base-textarea__label"},Pe={key:0,class:"base-textarea__required","aria-hidden":"true"},je={class:"base-textarea__wrapper"},Ke=["id","value","rows","placeholder","disabled","readonly","required","aria-required"],te={__name:"BaseTextarea",props:{id:{type:String,default:""},modelValue:{type:String,default:""},variant:{type:String,default:"default",validator:t=>["default","filled","outlined"].includes(t)},state:{type:String,default:null,validator:t=>["success","error","warning"].includes(t)},label:{type:String,default:null},placeholder:{type:String,default:""},rows:{type:[String,Number],default:3},maxRows:{type:[String,Number],default:null},disabled:{type:Boolean,default:!1},block:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},helperText:{type:String,default:null},errorMessage:{type:String,default:null},rules:{type:Array,default:()=>[]},validateOnBlur:{type:Boolean,default:!0},validateOnInput:{type:Boolean,default:!1},name:{type:String,default:""},resize:{type:String,default:"vertical",validator:t=>["none","both","horizontal","vertical"].includes(t)},autoResize:{type:Boolean,default:!1}},emits:["update:modelValue","focus","blur","input","validation","mounted"],setup(t,{emit:b}){const a=t,{autoId:o}=z("textarea",a),r=b,l=e.ref(null),m=e.ref(!1),c=e.ref(""),d=e.computed(()=>({"vsui base-textarea":!0,[`base-textarea--${a.variant}`]:!0,[`base-textarea--${v.value}`]:v.value,"base-textarea--disabled":a.disabled,"base-textarea--focused":m.value,"base-textarea--block":a.block,[`base-textarea--resize-${a.resize}`]:!0})),g={required:s=>({valid:!!(s!=null&&s.toString().trim()),message:"This field is required"}),min:(s,f)=>({valid:!s||s.toString().length>=f,message:`Must be at least ${f} characters`}),max:(s,f)=>({valid:!s||s.toString().length<=f,message:`Must be no more than ${f} characters`})},S=()=>{const s=k(a.modelValue);return r("validation",{valid:s,error:c.value,name:a.name}),s},k=s=>{if(!a.rules.length)return!0;for(const f of a.rules){if(typeof f=="string"){const h=g[f];if(h){const V=h(s);if(!V.valid)return c.value=V.message,!1}continue}if(typeof f=="object"){const[h,V]=Object.entries(f)[0],C=g[h];if(C){const y=C(s,V);if(!y.valid)return c.value=f.message||y.message,!1}if(typeof f.validator=="function"&&!f.validator(s))return c.value=f.message||"Invalid value",!1}}return c.value="",!0},$=s=>{if(r("update:modelValue",s.target.value),r("input",s),a.validateOnInput){const f=k(s.target.value);r("validation",{valid:f,error:c.value})}a.autoResize&&N()},E=s=>{m.value=!0,r("focus",s)},_=s=>{if(m.value=!1,r("blur",s),a.validateOnBlur){const f=k(s.target.value);r("validation",{valid:f,error:c.value})}},N=()=>{if(!l.value)return;l.value.style.height="auto";let s=l.value.scrollHeight+2;if(a.maxRows){const h=parseInt(getComputedStyle(l.value).lineHeight)*a.maxRows;s=Math.min(s,h)}l.value.style.height=`${s}px`},T=()=>{var s;(s=l.value)==null||s.focus()},v=e.computed(()=>c.value?"error":a.state),i=e.computed(()=>c.value?c.value:a.errorMessage||a.helperText),u=e.computed(()=>a.required?!0:a.rules.some(s=>s==="required"||typeof s=="object"&&s.required));return e.onMounted(()=>{a.autoResize&&N(),r("mounted",{validate:S,focus:T})}),(s,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(d.value)},[t.label?(e.openBlock(),e.createElementBlock("label",Fe,[e.createTextVNode(e.toDisplayString(t.label)+" ",1),u.value?(e.openBlock(),e.createElementBlock("span",Pe,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",je,[e.createElementVNode("textarea",{id:e.unref(o),ref_key:"textareaRef",ref:l,value:t.modelValue,rows:t.rows,placeholder:t.placeholder,disabled:t.disabled,readonly:t.readonly,required:u.value,"aria-required":u.value,class:"base-textarea__field",onInput:$,onFocus:E,onBlur:_},null,40,Ke)]),i.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["base-textarea__helper",{"base-textarea__helper--error":c.value}])},e.toDisplayString(i.value),3)):e.createCommentVNode("",!0)],2))}},D=(t,b)=>{const a=t.__vccOpts||t;for(const[o,r]of b)a[o]=r;return a},He={},Ue={xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"};function We(t,b){return e.openBlock(),e.createElementBlock("svg",Ue,b[0]||(b[0]=[e.createElementVNode("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"},null,-1),e.createElementVNode("polyline",{points:"22 4 12 14.01 9 11.01"},null,-1)]))}const Ge=D(He,[["render",We]]),Xe={},Je={xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"};function Qe(t,b){return e.openBlock(),e.createElementBlock("svg",Je,b[0]||(b[0]=[e.createElementVNode("circle",{cx:"12",cy:"12",r:"10"},null,-1),e.createElementVNode("line",{x1:"15",y1:"9",x2:"9",y2:"15"},null,-1),e.createElementVNode("line",{x1:"9",y1:"9",x2:"15",y2:"15"},null,-1)]))}const Ye=D(Xe,[["render",Qe]]),Ze={},et={xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"};function tt(t,b){return e.openBlock(),e.createElementBlock("svg",et,b[0]||(b[0]=[e.createElementVNode("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"},null,-1),e.createElementVNode("line",{x1:"12",y1:"9",x2:"12",y2:"13"},null,-1),e.createElementVNode("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"},null,-1)]))}const at=D(Ze,[["render",tt]]),lt={},nt={xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"};function ot(t,b){return e.openBlock(),e.createElementBlock("svg",nt,b[0]||(b[0]=[e.createElementVNode("circle",{cx:"12",cy:"12",r:"10"},null,-1),e.createElementVNode("line",{x1:"12",y1:"16",x2:"12",y2:"12"},null,-1),e.createElementVNode("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"},null,-1)]))}const ae=D(lt,[["render",ot]]),rt=["data-toast-id"],st={key:0,class:"base-toast__icon"},it={class:"base-toast__content"},dt={key:0,class:"base-toast__title"},ct={class:"base-toast__message"},j={__name:"BaseToast",props:{id:{type:[String,Number],required:!0},variant:{type:String,default:"default",validator:t=>["default","info","success","warning","error"].includes(t)},position:{type:String,default:"top-right",validator:t=>["top-right","top-left","top-center","bottom-right","bottom-left","bottom-center"].includes(t)},duration:{type:Number,default:3e3},closable:{type:Boolean,default:!0},message:{type:String,required:!0},title:{type:String,default:""},simple:{type:Boolean,default:!1}},emits:["close"],setup(t,{emit:b}){const a=t,o=b,r=e.ref(!1),l=e.ref(null),m=e.ref("100%"),c=()=>{a.duration>0&&(m.value="100%",requestAnimationFrame(()=>{requestAnimationFrame(()=>{m.value="0%"})}))},d=()=>{r.value=!1,setTimeout(()=>{o("close")},100)},g=()=>{l.value&&(l.value.style.animationPlayState="paused")},S=()=>{l.value&&(l.value.style.animationPlayState="running")},k={success:Ge,error:Ye,warning:at,info:ae,default:ae},$=e.computed(()=>k[a.variant]||k.default);return e.onMounted(()=>{var E;setTimeout(()=>{r.value=!0},100),a.duration>0&&(a.simple?setTimeout(d,a.duration):(E=l.value)==null||E.addEventListener("animationend",d,{once:!0})),c()}),e.onUnmounted(()=>{l.value&&l.value.removeEventListener("animationend",d)}),(E,_)=>(e.openBlock(),e.createElementBlock("div",{"data-toast-id":t.id,class:e.normalizeClass(["vsui base-toast",[`base-toast--${t.variant}`,`base-toast--${t.position}`,{"base-toast--visible":r.value},{"base-toast--simple":t.simple}]]),onMouseenter:g,onMouseleave:S},[t.simple?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",st,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent($.value),{class:"icon"}))])),e.createElementVNode("div",it,[!t.simple&&t.title?(e.openBlock(),e.createElementBlock("div",dt,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",ct,e.toDisplayString(t.message),1)]),t.closable?(e.openBlock(),e.createElementBlock("button",{key:1,class:"base-toast__close",onClick:d},_[0]||(_[0]=[e.createElementVNode("span",null,"×",-1)]))):e.createCommentVNode("",!0),!t.simple&&t.duration>0?(e.openBlock(),e.createElementBlock("div",{key:2,ref_key:"progressBarRef",ref:l,class:e.normalizeClass(["progress-bar",`progress-bar--${t.variant}`]),style:e.normalizeStyle({animationDuration:`${t.duration}ms`})},null,6)):e.createCommentVNode("",!0)],42,rt))}},L=e.ref([]);let ut=0,le=null;function ne(){const t=()=>{if(le)return;const o=document.createElement("div");o.id="toast-container",document.body.appendChild(o),le=e.createApp({render:()=>e.h(K)}).mount(o)},b=({message:o,title:r="",variant:l="default",position:m="top-right",duration:c=3e3,closable:d=!0,simple:g=!1})=>{t();const S=++ut;return L.value.push({id:S,message:o,title:r,variant:l,position:m,duration:c,closable:d,simple:g}),S};return{toasts:L,addToast:b,removeToast:o=>{const r=L.value.findIndex(l=>l.id===o);r>-1&&L.value.splice(r,1)},default:(o,r={})=>b({...r,message:o,variant:"default"}),success:(o,r={})=>b({...r,message:o,variant:"success"}),error:(o,r={})=>b({...r,message:o,variant:"error"}),info:(o,r={})=>b({...r,message:o,variant:"info"}),warning:(o,r={})=>b({...r,message:o,variant:"warning"})}}const mt={class:"vsui base-segmented-buttons-wrapper"},ft={key:0,class:"base-segmented-buttons__label"},pt={key:0,class:"base-segmented-buttons__required"},gt=["id"],yt=["disabled","onClick"],oe={__name:"BaseSegmentedButtons",props:{id:{type:String,default:""},modelValue:{type:[String,Number,Array],default:()=>[]},options:{type:Array,default:()=>[],required:!0},valueKey:{type:String,default:"value"},labelKey:{type:String,default:"label"},variant:{type:String,default:"primary",validator:t=>["primary","secondary","gray"].includes(t)},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)},disabled:{type:Boolean,default:!1},block:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},label:{type:String,default:null},helperText:{type:String,default:null},errorMessage:{type:String,default:null},rules:{type:Array,default:()=>[]},validateOnChange:{type:Boolean,default:!0}},emits:["update:modelValue","change","validation","mounted"],setup(t,{emit:b}){const a=t,{autoId:o}=z("segmented-buttons",a),r=b,l=e.ref(""),m=e.ref(!1),c={required:i=>({valid:Array.isArray(i)?i.length>0:!!i,message:"This field is required"}),min:(i,u)=>({valid:!Array.isArray(i)||i.length>=u,message:`Select at least ${u} option${u>1?"s":""}`}),max:(i,u)=>({valid:!Array.isArray(i)||i.length<=u,message:`Select no more than ${u} option${u>1?"s":""}`})},d=i=>{if(!a.rules.length)return!0;for(const u of a.rules){if(typeof u=="string"){if(u.includes(":")){const[s,f]=u.split(":"),h=c[s];if(h){const V=h(i,parseInt(f,10));if(!V.valid)return l.value=V.message,!1}}else if(c[u]){const s=c[u](i);if(!s.valid)return l.value=s.message,!1}continue}if(typeof u=="object"){if(u.message){let s,f;for(const V in u)if(V!=="message"){s=V,f=u[V];break}const h=c[s];if(h){const V=h(i,f);if(!V.valid)return l.value=u.message||V.message,!1}}else if(typeof u.validator=="function"&&!u.validator(i))return l.value=u.message||"Invalid selection",!1}}return l.value="",!0},g=e.computed({get:()=>a.modelValue,set:i=>{if(r("update:modelValue",i),r("change",i),a.validateOnChange){m.value=!0;const u=d(i);r("validation",{valid:u,error:l.value})}}}),S=e.computed(()=>({"vsui base-segmented-buttons":!0,[`base-segmented-buttons--${a.size}`]:!0,"base-segmented-buttons--block":a.block,"base-segmented-buttons--disabled":a.disabled,"base-segmented-buttons--error":l.value&&m.value})),k=i=>typeof i=="object"&&i!==null?i[a.valueKey]:i,$=i=>typeof i=="object"&&i!==null?i[a.labelKey]||i[a.valueKey]||String(i):i,E=i=>{const u=k(i);return a.multiple?Array.isArray(a.modelValue)?typeof a.modelValue[0]=="object"&&a.modelValue[0]!==null?a.modelValue.some(s=>k(s)===u):a.modelValue.includes(u):!1:a.modelValue===null?!1:typeof a.modelValue=="object"&&a.modelValue!==null?k(a.modelValue)===u:a.modelValue===u},_=i=>{if(a.disabled)return;const u=k(i),s=typeof a.options[0]=="object"&&a.options[0]!==null;if(!a.multiple){g.value=E(i)?null:s?i:u;return}const f=Array.isArray(a.modelValue)?[...a.modelValue]:[];E(i)?typeof f[0]=="object"&&f[0]!==null?f.splice(f.findIndex(V=>k(V)===u),1):f.splice(f.indexOf(u),1):f.push(s?i:u),g.value=f},N=e.computed(()=>a.rules.some(i=>i==="required"?!0:typeof i=="object"?i.required||Object.keys(i)[0]==="required":!1)),T=e.computed(()=>l.value&&m.value?l.value:a.errorMessage||a.helperText),v=()=>{m.value=!0;const i=d(g.value);return r("validation",{valid:i,error:l.value}),i};return e.onMounted(()=>{r("mounted",{validate:v})}),(i,u)=>(e.openBlock(),e.createElementBlock("div",mt,[t.label?(e.openBlock(),e.createElementBlock("label",ft,[e.createTextVNode(e.toDisplayString(t.label)+" ",1),N.value?(e.openBlock(),e.createElementBlock("span",pt,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",{id:e.unref(o),class:e.normalizeClass(S.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(s,f)=>(e.openBlock(),e.createElementBlock("button",{key:f,type:"button",class:e.normalizeClass(["base-segmented-buttons__button",[`base-segmented-buttons__button--${t.variant}`,{"base-segmented-buttons__button--selected":E(s),"base-segmented-buttons__button--first":f===0,"base-segmented-buttons__button--last":f===t.options.length-1,"base-segmented-buttons__button--middle":f>0&&f<t.options.length-1}]]),disabled:t.disabled,onClick:h=>_(s)},e.toDisplayString($(s)),11,yt))),128))],10,gt),T.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["base-segmented-buttons__helper",{"base-segmented-buttons__helper--error":l.value&&m.value}])},e.toDisplayString(T.value),3)):e.createCommentVNode("",!0)]))}},bt={class:"base-color-picker__container"},ht=["value"],kt={key:0,class:"base-color-picker__presets"},Bt=["onClick"],re={__name:"BaseColorPicker",props:{id:{type:String,default:""},modelValue:{type:String,default:"#000000"},variant:{type:String,default:"default",validator:t=>["default","filled","outlined"].includes(t)},state:{type:String,default:null,validator:t=>["success","error","warning"].includes(t)},label:{type:String,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},helperText:{type:String,default:null},errorMessage:{type:String,default:null},rules:{type:Array,default:()=>[]},name:{type:String,default:""},format:{type:String,default:"hex",validator:t=>["hex","rgb","rgba","hsl"].includes(t)},showPreview:{type:Boolean,default:!0},presets:{type:Array,default:()=>[]}},emits:["update:modelValue","focus","blur","input","validation","mounted"],setup(t,{emit:b}){const a=t,{autoId:o}=z("color-picker",a),r=b,l=e.ref(null),m=e.ref(null),c=e.ref(!1),d=e.computed({get:()=>a.modelValue,set:h=>r("update:modelValue",h)}),g=e.computed(()=>({"vsui base-color-picker":!0,"base-color-picker--disabled":a.disabled,"base-color-picker--open":c.value})),S=h=>{d.value=h,r("input",{target:{value:h}})},k=h=>{const V=h.target.value;d.value=V,r("input",{target:{value:V}}),e.nextTick(()=>{var C;(C=m.value)!=null&&C.validate&&m.value.validate()})},$=h=>{r("focus",h)},E=h=>{setTimeout(()=>{var V;c.value&&!((V=l.value)!=null&&V.contains(document.activeElement))&&(c.value=!1),r("blur",h)},100)},_=()=>{!a.disabled&&!a.readonly&&(c.value=!c.value,c.value&&e.nextTick(()=>{var h;(h=l.value)==null||h.focus()}))},N=h=>{let V=h;if(a.format!=="hex"&&h.startsWith("#")){const C=h.replace("#",""),y=parseInt(C.substring(0,2),16),n=parseInt(C.substring(2,4),16),p=parseInt(C.substring(4,6),16);if(a.format==="rgb")V=`rgb(${y}, ${n}, ${p})`;else if(a.format==="rgba")V=`rgba(${y}, ${n}, ${p}, 1)`;else if(a.format==="hsl"){const B=y/255,w=n/255,M=p/255,I=Math.max(B,w,M),A=Math.min(B,w,M);let q,R,F=(I+A)/2;if(I===A)q=R=0;else{const O=I-A;switch(R=F>.5?O/(2-I-A):O/(I+A),I){case B:q=(w-M)/O+(w<M?6:0);break;case w:q=(M-B)/O+2;break;case M:q=(B-w)/O+4;break}q=Math.round(q*60),R=Math.round(R*100),F=Math.round(F*100)}V=`hsl(${q}, ${R}%, ${F}%)`}}d.value=V,r("input",{target:{value:V}}),e.nextTick(()=>{var C;(C=m.value)!=null&&C.validate&&m.value.validate()})},T=()=>{var h;(h=m.value)==null||h.focus()},v=h=>{r("validation",h)},i=h=>{m.value=h,r("mounted",{validate:h.validate,focus:T})},u=["#3b82f6","#9333ea","#22c55e","#f59e0b","#ef4444","#111827","#374151","#6b7280","#f3f4f6","#ffffff"],s=e.computed(()=>a.presets.length>0?a.presets:u),f=e.computed(()=>{const V={hex:"hexColor",rgb:"rgbColor",rgba:"rgbaColor",hsl:"hslColor"}[a.format];return a.rules.some(y=>typeof y=="string"&&y===V?!0:typeof y=="object"&&y!==null?Object.keys(y).some(n=>n===V):!1)?a.rules:[...a.rules,V]});return(h,V)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(g.value)},[e.createElementVNode("div",bt,[e.createVNode(P,{id:e.unref(o),modelValue:d.value,variant:t.variant,state:t.state,label:t.label,disabled:t.disabled,readonly:t.readonly,required:t.required,helperText:t.helperText,errorMessage:t.errorMessage,rules:f.value,name:t.name,"onUpdate:modelValue":S,onFocus:$,onBlur:E,onValidation:v,onMounted:i},e.createSlots({suffix:e.withCtx(()=>[e.createElementVNode("div",{class:"base-color-picker__icon",onClick:_},V[0]||(V[0]=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("circle",{cx:"12",cy:"12",r:"10"}),e.createElementVNode("circle",{cx:"12",cy:"12",r:"3"})],-1)]))]),_:2},[t.showPreview?{name:"prefix",fn:e.withCtx(()=>[e.createElementVNode("div",{class:"base-color-picker__preview",style:e.normalizeStyle({backgroundColor:d.value}),onClick:_},null,4)]),key:"0"}:void 0]),1032,["id","modelValue","variant","state","label","disabled","readonly","required","helperText","errorMessage","rules","name"]),c.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"colorPickerRef",ref:l,class:"base-color-picker__popup",tabindex:"-1",onBlur:E},[e.createElementVNode("input",{type:"color",value:d.value,class:"base-color-picker__color-input",onInput:k},null,40,ht),s.value.length>0?(e.openBlock(),e.createElementBlock("div",kt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,(C,y)=>(e.openBlock(),e.createElementBlock("div",{key:y,class:e.normalizeClass(["base-color-picker__preset",{"base-color-picker__preset--active":d.value===C}]),style:e.normalizeStyle({backgroundColor:C}),onClick:n=>N(C)},null,14,Bt))),128))])):e.createCommentVNode("",!0)],544)):e.createCommentVNode("",!0)])],2))}},Vt={key:0,class:"base-otp__label"},vt={key:0,class:"base-otp__required","aria-hidden":"true"},St={class:"base-otp__wrapper"},wt=["id","type","onUpdate:modelValue","disabled","readonly","required","onInput","onKeydown","onFocus"],$t={key:2,class:"base-otp__instructions"},se={__name:"BaseOTP",props:{id:{type:String,default:""},modelValue:{type:String,default:""},length:{type:Number,default:6},variant:{type:String,default:"default",validator:t=>["default","filled"].includes(t)},state:{type:String,default:null,validator:t=>["success","error","warning"].includes(t)},label:{type:String,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},helperText:{type:String,default:null},errorMessage:{type:String,default:null},autoFocus:{type:Boolean,default:!1},type:{type:String,default:"text",validator:t=>["text","number","password"].includes(t)},instructions:{type:String,default:"Press Shift+Backspace to clear all fields"}},emits:["update:modelValue","complete","validation","mounted"],setup(t,{emit:b}){const a=t,{autoId:o}=z("otp",a),r=b,l=e.ref([]),m=e.ref(!1),c=e.computed(()=>m.value),d=e.ref(0),g=e.ref(""),S=e.computed({get:()=>a.modelValue||"",set:y=>r("update:modelValue",y)}),k=e.computed(()=>{const y=S.value.split("");return Array.from({length:a.length},(n,p)=>y[p]||"")}),$=e.computed(()=>({"vsui base-otp":!0,[`base-otp--${a.variant}`]:!0,[`base-otp--${T.value}`]:T.value,"base-otp--disabled":a.disabled,"base-otp--focused":c.value})),E=e.computed(()=>({"base-otp__field":!0,"base-otp__field--focused":m.value})),_={incomplete:"Please enter the complete code",partialIncomplete:"Please complete the code or leave it empty"},N=()=>{const y=S.value.length===a.length,p=!(S.value.length===0)&&!y;return a.required&&!y?(g.value=a.errorMessage||_.incomplete,!1):!a.required&&p?(g.value=a.errorMessage||_.partialIncomplete,!1):(g.value="",!0)},T=e.computed(()=>g.value?"error":a.state),v=e.computed(()=>g.value?g.value:a.errorMessage||a.helperText),i=(y,n)=>{const p=n.target.value.slice(-1),B=k.value.map((w,M)=>M===y?p:w).join("");S.value=B,p&&y<a.length-1&&(l.value[y+1].focus(),d.value=y+1),B.length===a.length&&r("complete",B),N(),r("validation",{valid:!g.value,error:g.value})},u=(y,n)=>{if(n.key==="Backspace"){if(n.shiftKey){S.value="",d.value=0,l.value[0]&&l.value[0].focus(),N(),r("validation",{valid:!g.value,error:g.value});return}!k.value[y]&&y>0&&(l.value[y-1].focus(),d.value=y-1)}else if(n.key==="Delete"&&n.shiftKey){S.value="",d.value=0,l.value[0]&&l.value[0].focus(),N(),r("validation",{valid:!g.value,error:g.value});return}else n.key==="ArrowLeft"&&y>0?(l.value[y-1].focus(),d.value=y-1):n.key==="ArrowRight"&&y<a.length-1&&(l.value[y+1].focus(),d.value=y+1)},s=y=>{y.preventDefault();const p=(y.clipboardData||window.clipboardData).getData("text").slice(0,a.length).split(""),B=Array.from({length:a.length},(M,I)=>p[I]||k.value[I]||"").join("");S.value=B;const w=B.length<a.length?B.length:a.length-1;l.value[w]&&(l.value[w].focus(),d.value=w),N(),r("validation",{valid:!g.value,error:g.value}),B.length===a.length&&r("complete",B)},f=y=>{m.value=!0,d.value=y},h=()=>{m.value=!1,N(),r("validation",{valid:!g.value,error:g.value})},V=()=>{S.value="",d.value=0,g.value="",l.value[0]&&l.value[0].focus()},C=()=>{l.value[0]&&(l.value[0].focus(),d.value=0)};return e.watch(()=>a.modelValue,y=>{N(),y===""&&(d.value=0,g.value="")}),e.onMounted(()=>{l.value=Array.from({length:a.length}),a.autoFocus&&setTimeout(()=>{C()},0),r("mounted",{validate:N,focus:C,reset:V})}),(y,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass($.value)},[t.label?(e.openBlock(),e.createElementBlock("label",Vt,[e.createTextVNode(e.toDisplayString(t.label)+" ",1),t.required?(e.openBlock(),e.createElementBlock("span",vt,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",St,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.length,(p,B)=>e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:B,ref_for:!0,ref:w=>l.value[B]=w,id:`${e.unref(o)}-${B}`,type:a.type,"onUpdate:modelValue":w=>k.value[B]=w,maxlength:"1",disabled:a.disabled,readonly:a.readonly,required:a.required,class:e.normalizeClass(E.value),onInput:w=>i(B,w),onKeydown:w=>u(B,w),onFocus:w=>f(B),onBlur:h,onPaste:s},null,42,wt)),[[e.vModelDynamic,k.value[B]]])),128))]),v.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["base-otp__helper",{"base-otp__helper--error":g.value}])},e.toDisplayString(v.value),3)):e.createCommentVNode("",!0),a.instructions&&!g.value?(e.openBlock(),e.createElementBlock("div",$t,e.toDisplayString(a.instructions),1)):e.createCommentVNode("",!0)],2))}},K={__name:"ToastsContainer",setup(t){const{toasts:b,removeToast:a}=ne(),o=e.computed(()=>{const r={"top-right":[],"top-left":[],"top-center":[],"bottom-right":[],"bottom-left":[],"bottom-center":[]};return b.value.forEach(l=>{r[l.position].push(l)}),r});return(r,l)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(m,c)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:c},[m.length?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["vsui toasts-container",`toasts-container--${c}`])},[e.createVNode(e.TransitionGroup,{name:"toast"},{default:e.withCtx(()=>[(e.openBloc