vue-smart-ui
Version:
A collection of Vue 3 smart and highly customizable UI components for modern web applications
1 lines • 75 kB
JavaScript
(function(R,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(R=typeof globalThis<"u"?globalThis:R||self,e(R.VueSmartUI={},R.Vue))})(this,function(R,e){"use strict";let te=0;function P(t="base",B){const l=()=>(te++,`${t}-${te}`);return{autoId:e.computed(()=>B.id||l())}}const ge=["id"],le={__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:l}=P("accordion",B),a=e.ref([]),r=o=>{if(B.multiple){const f=a.value.indexOf(o);f===-1?a.value.push(o):a.value.splice(f,1)}else a.value=a.value.includes(o)?[]:[o]};return e.provide("accordion",{activeItems:a,toggleItem:r,variant:B.variant}),(o,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vsui base-accordion",`base-accordion--${t.variant}`]),id:e.unref(l)},[e.renderSlot(o.$slots,"default")],10,ge))}},ye=["disabled","aria-expanded"],he={class:"base-accordion-item__body"},ae={__name:"BaseAccordionItem",props:{title:{type:String,required:!0},disabled:{type:Boolean,default:!1}},setup(t){const B=t,l=e.inject("accordion"),a=e.ref(Symbol()),r=e.ref("0px"),o=e.ref(null),f=e.computed(()=>l.activeItems.value.includes(a.value)),i=e.computed(()=>l.variant),s=()=>{B.disabled||l.toggleItem(a.value)},b=()=>{o.value&&(r.value=f.value?`${o.value.scrollHeight}px`:"0px")},S=new ResizeObserver(b);return e.onMounted(()=>{o.value&&(S.observe(o.value),b())}),e.onUnmounted(()=>{S.disconnect()}),e.watch(f,b),(k,_)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vsui base-accordion-item",[`base-accordion-item--${i.value}`,{"base-accordion-item--active":f.value,"base-accordion-item--disabled":t.disabled}]])},[e.createElementVNode("button",{class:"base-accordion-item__header",onClick:s,disabled:t.disabled,"aria-expanded":f.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,ye),e.createElementVNode("div",{class:"base-accordion-item__content",ref_key:"contentRef",ref:o,style:e.normalizeStyle({height:r.value})},[e.createElementVNode("div",he,[e.renderSlot(k.$slots,"default")])],4)],2))}},ke=["id","disabled"],Be={key:0,class:"spinner"},U=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:l}=P("button",B);return(a,r)=>(e.openBlock(),e.createElementBlock("button",{id:e.unref(l),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},a.$attrs.class]]),disabled:t.disabled||t.loading,onClick:r[0]||(r[0]=o=>a.$emit("click",o))},[e.createElementVNode("div",{class:e.normalizeClass(["button-content",[{hidden:t.loading},a.$attrs.class]])},[a.$slots.prefix?e.renderSlot(a.$slots,"prefix",{key:0}):e.createCommentVNode("",!0),e.renderSlot(a.$slots,"default"),a.$slots.suffix?e.renderSlot(a.$slots,"suffix",{key:1}):e.createCommentVNode("",!0)],2),t.loading?(e.openBlock(),e.createElementBlock("div",Be)):e.createCommentVNode("",!0)],10,ke))}}),Ve=["id","checked","disabled","indeterminate"],we={class:"base-checkbox__checkmark"},Se={key:0,viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Ee={key:1,viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},$e={key:0,class:"base-checkbox__label"},H={__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 l=t,{autoId:a}=P("checkbox",l),r=B,o=e.computed(()=>Array.isArray(l.modelValue)?l.modelValue.includes(l.value):l.modelValue),f=i=>{if(Array.isArray(l.modelValue)){const s=[...l.modelValue];if(i.target.checked)s.push(l.value);else{const b=s.indexOf(l.value);b>-1&&s.splice(b,1)}r("update:modelValue",s)}else r("update:modelValue",i.target.checked)};return(i,s)=>(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(a),type:"checkbox",checked:o.value,disabled:t.disabled,indeterminate:t.indeterminate,class:"base-checkbox__input",onChange:f},null,40,Ve),e.createElementVNode("span",we,[e.renderSlot(i.$slots,"checkmark",{},()=>[o.value&&!t.indeterminate?(e.openBlock(),e.createElementBlock("svg",Se,s[0]||(s[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",Ee,s[1]||(s[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)])]),i.$slots.default||t.label?(e.openBlock(),e.createElementBlock("span",$e,[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])])):e.createCommentVNode("",!0)],2))}},Ce=["id"],oe={__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 l=t,{autoId:a}=P("dropdown",l),r=B,o=e.ref(null),f=e.ref(null),i=e.ref(l.modelValue),s=()=>{if(!f.value||!o.value)return;const k=f.value.getBoundingClientRect(),_=o.value.getBoundingClientRect(),v={width:window.innerWidth,height:window.innerHeight};f.value.style.top="100%",f.value.style.bottom="auto",f.value.style.left="auto",f.value.style.right="0",_.right+k.width>v.width&&(f.value.style.right="0",f.value.style.left="auto"),_.right-k.width<0&&(f.value.style.left="0",f.value.style.right="auto"),_.bottom+k.height>v.height&&(f.value.style.bottom="100%",f.value.style.top="auto",f.value.style.marginTop="0",f.value.style.marginBottom="0.5rem")};e.watch(()=>l.modelValue,k=>{i.value=k,k?(document.addEventListener("click",b),e.nextTick(()=>{s()})):document.removeEventListener("click",b)});const b=k=>{l.closeOnClickOutside&&o.value&&!o.value.contains(k.target)&&r("update:modelValue",!1)},S=k=>{l.closeOnClick&&!k.target.closest("[data-prevent-close]")&&r("update:modelValue",!1)};return e.onMounted(()=>{l.modelValue&&document.addEventListener("click",b),window.addEventListener("scroll",s,!0),window.addEventListener("resize",s)}),e.onUnmounted(()=>{document.removeEventListener("click",b),window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s)}),(k,_)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dropdownRef",ref:o,class:"vsui base-dropdown",id:e.unref(a)},[e.createElementVNode("div",{class:"base-dropdown__trigger",onClick:_[0]||(_[0]=v=>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:f,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,i.value]])]),_:3})],8,Ce))}},ve={class:"vsui infinite-scroll"},xe={class:"infinite-scroll__loader"},_e={key:0},Ne={key:0,class:"infinite-scroll__end"},ne={__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 l=t,a=B,r=e.ref(null),o=e.ref(null),f=()=>{r.value&&r.value.disconnect(),r.value=new IntersectionObserver(i=>{i[0].isIntersecting&&!l.loading&&!l.disabled&&a("load-more")},{threshold:0,root:l.container?document.querySelector(l.container):null,rootMargin:`0px 0px ${l.threshold}px 0px`}),o.value&&r.value.observe(o.value)};return e.watch(()=>l.loading,(i,s)=>{s===!0&&i===!1&&setTimeout(()=>{f()},100)}),e.onMounted(()=>{f()}),e.onUnmounted(()=>{r.value&&r.value.disconnect()}),(i,s)=>(e.openBlock(),e.createElementBlock("div",ve,[e.renderSlot(i.$slots,"default"),e.createElementVNode("div",{ref_key:"bottomElement",ref:o,class:"infinite-scroll__trigger"},[t.loading?e.renderSlot(i.$slots,"loading",{key:0},()=>[e.createElementVNode("div",xe,[s[0]||(s[0]=e.createElementVNode("div",{class:"spinner"},null,-1)),t.loadingText?(e.openBlock(),e.createElementBlock("span",_e,e.toDisplayString(t.loadingText),1)):e.createCommentVNode("",!0)])]):t.disabled?e.renderSlot(i.$slots,"disabled",{key:1},()=>[t.endText?(e.openBlock(),e.createElementBlock("div",Ne,e.toDisplayString(t.endText),1)):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0)],512)]))}},Ie={key:0,class:"base-input__label"},Te={key:0,class:"base-input__required","aria-hidden":"true"},Me={class:"base-input__wrapper"},ze={key:0,class:"base-input__prefix"},Ae=["id","type","value","placeholder","disabled","readonly","required","aria-required","maxlength","min","max"],De={key:1,class:"base-input__suffix"},W={__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 l=e.useSlots(),a=t,{autoId:r}=P("input",a),o=B,f=e.ref(null),i=e.ref(!1),s=e.ref(""),b=e.computed(()=>({"vsui base-input":!0,[`base-input--${a.variant}`]:!0,[`base-input--${y.value}`]:y.value,"base-input--disabled":a.disabled,"base-input--focused":i.value,"base-input--with-prefix":a.prefixIcon||l.prefix,"base-input--with-suffix":a.suffixIcon||l.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,g)=>({valid:!n||n.length>=g,message:`Must be at least ${g} characters`}),max:(n,g)=>({valid:!n||n.length<=g,message:`Must be no more than ${g} characters`}),pattern:(n,g)=>({valid:!n||new RegExp(g).test(n),message:"Invalid format"}),minValue:(n,g)=>({valid:!n||Number(n)>=g,message:`Value must be at least ${g}`}),maxValue:(n,g)=>({valid:!n||Number(n)<=g,message:`Value must be no more than ${g}`}),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(!a.rules.length)return!0;for(const g of a.rules){if(typeof g=="string"){const C=S[g];if(C){const I=C(n);if(!I.valid)return s.value=I.message,!1}continue}if(typeof g=="object"){const[C,I]=Object.entries(g)[0];console.log(C,I);const q=S[C];if(q){const p=q(n,I);if(!p.valid)return s.value=g.message||p.message,!1}if(typeof g.validator=="function"&&!g.validator(n))return s.value=g.message||"Invalid value",!1}}return s.value="",!0},_=e.computed({get:()=>a.mask==="currency"&&a.modelValue?v.currency.format(a.modelValue):a.modelValue,set:n=>o("update:modelValue",n)}),v={phone:{patterns:["(##) ####-####","(##) #####-####"],match:n=>n.replace(/\D/g,"").length<=10?0:1},currency:{pattern:"currency",format:n=>{if(!n)return"";const g=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(g)},parse:n=>{const g=n.replace(/[^\d]/g,"");return parseFloat(g)/100}},date:"##/##/####",cpf:"###.###.###-##",cnpj:"##.###.###/####-##",cep:"#####-###"},D=(n,g)=>{if(!n)return n;if(g==="currency"||g.pattern==="currency"){const C=v.currency.parse(n);return v.currency.format(C)}if(typeof g=="string")return M(n,g);if(g.patterns){const C=g.match(n);return M(n,g.patterns[C])}return n},M=(n,g)=>{if(!g)return n;const I=n.replace(/\D/g,"").split("");let q="",p=0;for(let h=0;h<g.length&&I[h];h++)g[p]==="#"?(q+=I[h],p++):(q+=g[p],p++,h--);return q},O=n=>{let g=n.target.value;if(a.mask){const C=typeof a.mask=="string"?v[a.mask]||a.mask:a.mask.pattern;g=D(g,C),f.value&&(f.value.value=g)}if(a.mask==="currency"){const C=v.currency.parse(g);_.value=C,o("update:modelValue",C)}else _.value=g,o("update:modelValue",g);if(o("input",{...n,target:{...n.target,value:g}}),a.validateOnInput){const C=k(_.value);o("validation",{valid:C,error:s.value})}},N=n=>{i.value=!0,o("enter",n)},u=n=>{i.value=!0,o("focus",n)},c=n=>{if(i.value=!1,o("blur",n),a.validateOnBlur){const g=k(_.value);o("validation",{valid:g,error:s.value})}},d=()=>{var n;(n=f.value)==null||n.focus()},y=e.computed(()=>s.value?"error":a.state),E=e.computed(()=>s.value?s.value:a.errorMessage||a.helperText),x=()=>{const n=k(_.value);return o("validation",{valid:n,error:s.value,name:a.name}),n},z=e.computed(()=>a.required?!0:a.rules.some(n=>n==="required"?!0:typeof n=="object"?n.required||Object.keys(n)[0]==="required":!1)),V=e.computed(()=>{if(!a.mask)return;const n=typeof a.mask=="string"?v[a.mask]||a.mask:a.mask.pattern;if(typeof n=="string")return n.length;if(n.patterns)return Math.max(...n.patterns.map(g=>g.length))});return e.onMounted(()=>{o("mounted",{validate:x,focus:d})}),(n,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(b.value)},[t.label?(e.openBlock(),e.createElementBlock("label",Ie,[e.createTextVNode(e.toDisplayString(t.label)+" ",1),z.value?(e.openBlock(),e.createElementBlock("span",Te,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",Me,[n.$slots.prefix||t.prefixIcon?(e.openBlock(),e.createElementBlock("div",ze,[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:f,type:t.type,value:_.value,placeholder:t.placeholder,disabled:t.disabled,readonly:t.readonly,required:z.value,"aria-required":z.value,maxlength:V.value,min:t.min,max:t.max,class:"base-input__field",onInput:O,onFocus:u,onBlur:c,onKeydown:e.withKeys(N,["enter"])},null,40,Ae),n.$slots.suffix||t.suffixIcon?(e.openBlock(),e.createElementBlock("div",De,[e.renderSlot(n.$slots,"suffix",{},()=>[e.createElementVNode("i",{class:e.normalizeClass(t.suffixIcon)},null,2)])])):e.createCommentVNode("",!0)]),E.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["base-input__helper",{"base-input__helper--error":s.value}])},e.toDisplayString(E.value),3)):e.createCommentVNode("",!0)],2))}},Oe={key:0,class:"base-popup__header"},Le={class:"base-popup__content"},Re={key:1,class:"base-popup__footer"},se={__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 l=t,a=B,r=e.ref(null),o=i=>{!l.disableClickOutside&&r.value&&!r.value.contains(i.target)&&(i.target.closest(".base-popup")||(a("update:modelValue",!1),a("close")))},f=i=>{l.closeOnEsc&&i.key==="Escape"&&(a("update:modelValue",!1),a("close"))};return e.onMounted(()=>{document.addEventListener("mousedown",o),document.addEventListener("keydown",f)}),e.onUnmounted(()=>{document.removeEventListener("mousedown",o),document.removeEventListener("keydown",f)}),(i,s)=>(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}`]])},[i.$slots.header?(e.openBlock(),e.createElementBlock("div",Oe,[e.renderSlot(i.$slots,"header")])):e.createCommentVNode("",!0),e.createElementVNode("div",Le,[e.renderSlot(i.$slots,"default")]),i.$slots.footer?(e.openBlock(),e.createElementBlock("div",Re,[e.renderSlot(i.$slots,"footer")])):e.createCommentVNode("",!0),i.$slots.close?(e.openBlock(),e.createElementBlock("button",{key:2,class:"base-popup__close",onClick:s[0]||(s[0]=b=>i.$emit("update:modelValue",!1))},[e.renderSlot(i.$slots,"close")])):e.createCommentVNode("",!0)],2)],2)):e.createCommentVNode("",!0)]))}},G={__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,l)=>(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))}},qe=["for"],je={key:0,class:"base-slider__required"},Fe={class:"base-slider__container"},Pe={class:"base-slider__extremity-value base-slider__extremity-value--min"},Ke={key:0,class:"base-slider__mark-label"},Ue=["onMousedown","onTouchstart","onKeydown","aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","aria-disabled"],He={key:0,class:"base-slider__thumb-value"},We={class:"base-slider__extremity-value base-slider__extremity-value--max"},Ge={key:1,class:"base-slider__helper"},re={__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 l=t,a=B,{autoId:r}=P("slider",l),o=e.ref(l.modelValue),f=e.ref(!1),i=e.ref(null),s=e.ref([]),b=e.computed(()=>l.range&&Array.isArray(l.modelValue)),S=e.computed(()=>l.formatValue?b.value?o.value.map(N=>l.formatValue(N)):l.formatValue(o.value):o.value),k=e.computed(()=>{if(b.value){const[N,u]=o.value,c=(N-l.min)/(l.max-l.min)*100,d=(u-l.min)/(l.max-l.min)*100;return{left:`${c}%`,width:`${d-c}%`}}else return{width:`${(o.value-l.min)/(l.max-l.min)*100}%`}}),_=e.computed(()=>b.value?o.value.map(N=>`${(N-l.min)/(l.max-l.min)*100}%`):[`${(o.value-l.min)/(l.max-l.min)*100}%`]),v=e.computed(()=>({"base-slider--disabled":l.disabled,"base-slider--success":l.state==="success","base-slider--error":l.state==="error","base-slider--warning":l.state==="warning","base-slider--filled":l.variant==="filled"}));e.watch(()=>l.modelValue,N=>{o.value=N}),e.watch(o,N=>{a("update:modelValue",N)});const D=(N,u=0)=>{if(l.disabled)return;const c=i.value.getBoundingClientRect(),d=N.clientX-c.left,y=Math.min(Math.max(d/c.width,0),1),E=l.min+y*(l.max-l.min),x=Math.round(E/l.step)*l.step,z=Math.min(Math.max(x,l.min),l.max);if(b.value){const V=[...o.value];V[u]=z,u===0&&V[0]>V[1]?V[0]=V[1]:u===1&&V[1]<V[0]&&(V[1]=V[0]),o.value=V}else o.value=z;a("change",o.value)},M=(N,u=0)=>{if(l.disabled)return;f.value=!0,D(N,u);const c=y=>D(y,u),d=()=>{f.value=!1,document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",d),document.removeEventListener("touchmove",c),document.removeEventListener("touchend",d)};document.addEventListener("mousemove",c),document.addEventListener("mouseup",d),document.addEventListener("touchmove",c),document.addEventListener("touchend",d)},O=(N,u=0)=>{if(l.disabled)return;const c=b.value?o.value[u]:o.value;let d=c;switch(N.key){case"ArrowRight":case"ArrowUp":d=Math.min(c+l.step,l.max);break;case"ArrowLeft":case"ArrowDown":d=Math.max(c-l.step,l.min);break;case"Home":d=l.min;break;case"End":d=l.max;break;default:return}if(b.value){const y=[...o.value];y[u]=d,u===0&&y[0]>y[1]?y[0]=y[1]:u===1&&y[1]<y[0]&&(y[1]=y[0]),o.value=y}else o.value=d;a("change",o.value),N.preventDefault()};return e.onMounted(()=>{b.value&&(!Array.isArray(o.value)||o.value.length!==2)?o.value=[l.min,l.max]:!b.value&&Array.isArray(o.value)&&(o.value=l.min),a("mounted",{id:r.value,getValue:()=>o.value,setValue:N=>{o.value=N}})}),(N,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vsui base-slider",v.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",je,"*")):e.createCommentVNode("",!0)],8,qe)):e.createCommentVNode("",!0),e.createElementVNode("div",Fe,[e.createElementVNode("div",Pe,e.toDisplayString(t.formatValue?t.formatValue(t.min):t.min),1),e.createElementVNode("div",{ref_key:"sliderTrack",ref:i,class:"base-slider__track",onMousedown:u[0]||(u[0]=c=>D(c)),onTouchstart:u[1]||(u[1]=e.withModifiers(c=>D(c.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,c=>(e.openBlock(),e.createElementBlock("div",{key:c.value,class:e.normalizeClass(["base-slider__mark",{"base-slider__mark--active":b.value?c.value>=o.value[0]&&c.value<=o.value[1]:c.value<=o.value}]),style:e.normalizeStyle({left:`calc(${(c.value-t.min)/(t.max-t.min)*100}%)`})},[u[2]||(u[2]=e.createElementVNode("div",{class:"base-slider__mark-dot"},null,-1)),c.label?(e.openBlock(),e.createElementBlock("div",Ke,e.toDisplayString(c.label),1)):e.createCommentVNode("",!0)],6))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(_.value,(c,d)=>(e.openBlock(),e.createElementBlock("div",{key:d,ref_for:!0,ref_key:"thumbRefs",ref:s,class:"base-slider__thumb",style:e.normalizeStyle({left:c}),onMousedown:e.withModifiers(y=>M(y,d),["stop"]),onTouchstart:e.withModifiers(y=>M(y.touches[0],d),["stop","prevent"]),onKeydown:y=>O(y,d),tabindex:"0",role:"slider","aria-valuemin":t.min,"aria-valuemax":t.max,"aria-valuenow":b.value?o.value[d]:o.value,"aria-valuetext":b.value?S.value[d]:S.value,"aria-disabled":t.disabled},[t.showValue?(e.openBlock(),e.createElementBlock("div",He,e.toDisplayString(b.value?S.value[d]:S.value),1)):e.createCommentVNode("",!0)],44,Ue))),128))],544),e.createElementVNode("div",We,e.toDisplayString(t.formatValue?t.formatValue(t.max):t.max),1)]),t.helperText||t.errorMessage?(e.openBlock(),e.createElementBlock("div",Ge,e.toDisplayString(t.errorMessage||t.helperText),1)):e.createCommentVNode("",!0)],2))}},Xe={key:0,class:"base-textarea__label"},Qe={key:0,class:"base-textarea__required","aria-hidden":"true"},Je={class:"base-textarea__wrapper"},Ye=["id","value","rows","placeholder","disabled","readonly","required","aria-required"],ie={__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 l=t,{autoId:a}=P("textarea",l),r=B,o=e.ref(null),f=e.ref(!1),i=e.ref(""),s=e.computed(()=>({"vsui base-textarea":!0,[`base-textarea--${l.variant}`]:!0,[`base-textarea--${N.value}`]:N.value,"base-textarea--disabled":l.disabled,"base-textarea--focused":f.value,"base-textarea--block":l.block,[`base-textarea--resize-${l.resize}`]:!0})),b={required:d=>({valid:!!(d!=null&&d.toString().trim()),message:"This field is required"}),min:(d,y)=>({valid:!d||d.toString().length>=y,message:`Must be at least ${y} characters`}),max:(d,y)=>({valid:!d||d.toString().length<=y,message:`Must be no more than ${y} characters`})},S=()=>{const d=k(l.modelValue);return r("validation",{valid:d,error:i.value,name:l.name}),d},k=d=>{if(!l.rules.length)return!0;for(const y of l.rules){if(typeof y=="string"){const E=b[y];if(E){const x=E(d);if(!x.valid)return i.value=x.message,!1}continue}if(typeof y=="object"){const[E,x]=Object.entries(y)[0],z=b[E];if(z){const V=z(d,x);if(!V.valid)return i.value=y.message||V.message,!1}if(typeof y.validator=="function"&&!y.validator(d))return i.value=y.message||"Invalid value",!1}}return i.value="",!0},_=d=>{if(r("update:modelValue",d.target.value),r("input",d),l.validateOnInput){const y=k(d.target.value);r("validation",{valid:y,error:i.value})}l.autoResize&&M()},v=d=>{f.value=!0,r("focus",d)},D=d=>{if(f.value=!1,r("blur",d),l.validateOnBlur){const y=k(d.target.value);r("validation",{valid:y,error:i.value})}},M=()=>{if(!o.value)return;o.value.style.height="auto";let d=o.value.scrollHeight+2;if(l.maxRows){const E=parseInt(getComputedStyle(o.value).lineHeight)*l.maxRows;d=Math.min(d,E)}o.value.style.height=`${d}px`},O=()=>{var d;(d=o.value)==null||d.focus()},N=e.computed(()=>i.value?"error":l.state),u=e.computed(()=>i.value?i.value:l.errorMessage||l.helperText),c=e.computed(()=>l.required?!0:l.rules.some(d=>d==="required"||typeof d=="object"&&d.required));return e.onMounted(()=>{l.autoResize&&M(),r("mounted",{validate:S,focus:O})}),(d,y)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(s.value)},[t.label?(e.openBlock(),e.createElementBlock("label",Xe,[e.createTextVNode(e.toDisplayString(t.label)+" ",1),c.value?(e.openBlock(),e.createElementBlock("span",Qe,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",Je,[e.createElementVNode("textarea",{id:e.unref(a),ref_key:"textareaRef",ref:o,value:t.modelValue,rows:t.rows,placeholder:t.placeholder,disabled:t.disabled,readonly:t.readonly,required:c.value,"aria-required":c.value,class:"base-textarea__field",onInput:_,onFocus:v,onBlur:D},null,40,Ye)]),u.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["base-textarea__helper",{"base-textarea__helper--error":i.value}])},e.toDisplayString(u.value),3)):e.createCommentVNode("",!0)],2))}},X=(t,B)=>{const l=t.__vccOpts||t;for(const[a,r]of B)l[a]=r;return l},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:"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 lt=X(Ze,[["render",tt]]),at={},ot={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 nt(t,B){return e.openBlock(),e.createElementBlock("svg",ot,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 st=X(at,[["render",nt]]),rt={},it={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 ct(t,B){return e.openBlock(),e.createElementBlock("svg",it,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 dt=X(rt,[["render",ct]]),ut={},mt={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 ft(t,B){return e.openBlock(),e.createElementBlock("svg",mt,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 ce=X(ut,[["render",ft]]),pt=["data-toast-id"],bt={key:0,class:"base-toast__icon"},gt={class:"base-toast__content"},yt={key:0,class:"base-toast__title"},ht={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 l=t,a=B,r=e.ref(!1),o=e.ref(null),f=e.ref("100%"),i=()=>{l.duration>0&&(f.value="100%",requestAnimationFrame(()=>{requestAnimationFrame(()=>{f.value="0%"})}))},s=()=>{r.value=!1,setTimeout(()=>{a("close")},100)},b=()=>{o.value&&(o.value.style.animationPlayState="paused")},S=()=>{o.value&&(o.value.style.animationPlayState="running")},k={success:lt,error:st,warning:dt,info:ce,default:ce},_=e.computed(()=>k[l.variant]||k.default);return e.onMounted(()=>{var v;setTimeout(()=>{r.value=!0},100),l.duration>0&&(l.simple?setTimeout(s,l.duration):(v=o.value)==null||v.addEventListener("animationend",s,{once:!0})),i()}),e.onUnmounted(()=>{o.value&&o.value.removeEventListener("animationend",s)}),(v,D)=>(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:b,onMouseleave:S},[t.simple?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",bt,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(_.value),{class:"icon"}))])),e.createElementVNode("div",gt,[!t.simple&&t.title?(e.openBlock(),e.createElementBlock("div",yt,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",ht,e.toDisplayString(t.message),1)]),t.closable?(e.openBlock(),e.createElementBlock("button",{key:1,class:"base-toast__close",onClick:s},D[0]||(D[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:o,class:e.normalizeClass(["progress-bar",`progress-bar--${t.variant}`]),style:e.normalizeStyle({animationDuration:`${t.duration}ms`})},null,6)):e.createCommentVNode("",!0)],42,pt))}},Q=e.ref([]);let kt=0,de=null;function ue(){const t=()=>{if(de)return;const a=document.createElement("div");a.id="toast-container",document.body.appendChild(a),de=e.createApp({render:()=>e.h(Z)}).mount(a)},B=({message:a,title:r="",variant:o="default",position:f="top-right",duration:i=3e3,closable:s=!0,simple:b=!1})=>{t();const S=++kt;return Q.value.push({id:S,message:a,title:r,variant:o,position:f,duration:i,closable:s,simple:b}),S};return{toasts:Q,addToast:B,removeToast:a=>{const r=Q.value.findIndex(o=>o.id===a);r>-1&&Q.value.splice(r,1)},default:(a,r={})=>B({...r,message:a,variant:"default"}),success:(a,r={})=>B({...r,message:a,variant:"success"}),error:(a,r={})=>B({...r,message:a,variant:"error"}),info:(a,r={})=>B({...r,message:a,variant:"info"}),warning:(a,r={})=>B({...r,message:a,variant:"warning"})}}const Bt={class:"vsui base-segmented-buttons-wrapper"},Vt={key:0,class:"base-segmented-buttons__label"},wt={key:0,class:"base-segmented-buttons__required"},St=["id"],Et=["disabled","onClick"],me={__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 l=t,{autoId:a}=P("segmented-buttons",l),r=B,o=e.ref(""),f=e.ref(!1),i={required:u=>({valid:Array.isArray(u)?u.length>0:!!u,message:"This field is required"}),min:(u,c)=>({valid:!Array.isArray(u)||u.length>=c,message:`Select at least ${c} option${c>1?"s":""}`}),max:(u,c)=>({valid:!Array.isArray(u)||u.length<=c,message:`Select no more than ${c} option${c>1?"s":""}`})},s=u=>{if(!l.rules.length)return!0;for(const c of l.rules){if(typeof c=="string"){if(c.includes(":")){const[d,y]=c.split(":"),E=i[d];if(E){const x=E(u,parseInt(y,10));if(!x.valid)return o.value=x.message,!1}}else if(i[c]){const d=i[c](u);if(!d.valid)return o.value=d.message,!1}continue}if(typeof c=="object"){if(c.message){let d,y;for(const x in c)if(x!=="message"){d=x,y=c[x];break}const E=i[d];if(E){const x=E(u,y);if(!x.valid)return o.value=c.message||x.message,!1}}else if(typeof c.validator=="function"&&!c.validator(u))return o.value=c.message||"Invalid selection",!1}}return o.value="",!0},b=e.computed({get:()=>l.modelValue,set:u=>{if(r("update:modelValue",u),r("change",u),l.validateOnChange){f.value=!0;const c=s(u);r("validation",{valid:c,error:o.value})}}}),S=e.computed(()=>({"vsui base-segmented-buttons":!0,[`base-segmented-buttons--${l.size}`]:!0,"base-segmented-buttons--block":l.block,"base-segmented-buttons--disabled":l.disabled,"base-segmented-buttons--error":o.value&&f.value})),k=u=>typeof u=="object"&&u!==null?u[l.valueKey]:u,_=u=>typeof u=="object"&&u!==null?u[l.labelKey]||u[l.valueKey]||String(u):u,v=u=>{const c=k(u);return l.multiple?Array.isArray(l.modelValue)?typeof l.modelValue[0]=="object"&&l.modelValue[0]!==null?l.modelValue.some(d=>k(d)===c):l.modelValue.includes(c):!1:l.modelValue===null?!1:typeof l.modelValue=="object"&&l.modelValue!==null?k(l.modelValue)===c:l.modelValue===c},D=u=>{if(l.disabled)return;const c=k(u),d=typeof l.options[0]=="object"&&l.options[0]!==null;if(!l.multiple){b.value=v(u)?null:d?u:c;return}const y=Array.isArray(l.modelValue)?[...l.modelValue]:[];v(u)?typeof y[0]=="object"&&y[0]!==null?y.splice(y.findIndex(x=>k(x)===c),1):y.splice(y.indexOf(c),1):y.push(d?u:c),b.value=y},M=e.computed(()=>l.rules.some(u=>u==="required"?!0:typeof u=="object"?u.required||Object.keys(u)[0]==="required":!1)),O=e.computed(()=>o.value&&f.value?o.value:l.errorMessage||l.helperText),N=()=>{f.value=!0;const u=s(b.value);return r("validation",{valid:u,error:o.value}),u};return e.onMounted(()=>{r("mounted",{validate:N})}),(u,c)=>(e.openBlock(),e.createElementBlock("div",Bt,[t.label?(e.openBlock(),e.createElementBlock("label",Vt,[e.createTextVNode(e.toDisplayString(t.label)+" ",1),M.value?(e.openBlock(),e.createElementBlock("span",wt,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",{id:e.unref(a),class:e.normalizeClass(S.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(d,y)=>(e.openBlock(),e.createElementBlock("button",{key:y,type:"button",class:e.normalizeClass(["base-segmented-buttons__button",[`base-segmented-buttons__button--${t.variant}`,{"base-segmented-buttons__button--selected":v(d),"base-segmented-buttons__button--first":y===0,"base-segmented-buttons__button--last":y===t.options.length-1,"base-segmented-buttons__button--middle":y>0&&y<t.options.length-1}]]),disabled:t.disabled,onClick:E=>D(d)},e.toDisplayString(_(d)),11,Et))),128))],10,St),O.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["base-segmented-buttons__helper",{"base-segmented-buttons__helper--error":o.value&&f.value}])},e.toDisplayString(O.value),3)):e.createCommentVNode("",!0)]))}},$t={class:"base-color-picker__container"},Ct=["value"],vt={key:0,class:"base-color-picker__presets"},xt=["onClick"],fe={__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 l=t,{autoId:a}=P("color-picker",l),r=B,o=e.ref(null),f=e.ref(null),i=e.ref(!1),s=e.computed({get:()=>l.modelValue,set:E=>r("update:modelValue",E)}),b=e.computed(()=>({"vsui base-color-picker":!0,"base-color-picker--disabled":l.disabled,"base-color-picker--open":i.value})),S=E=>{s.value=E,r("input",{target:{value:E}})},k=E=>{const x=E.target.value;s.value=x,r("input",{target:{value:x}}),e.nextTick(()=>{var z;(z=f.value)!=null&&z.validate&&f.value.validate()})},_=E=>{r("focus",E)},v=E=>{setTimeout(()=>{var x;i.value&&!((x=o.value)!=null&&x.contains(document.activeElement))&&(i.value=!1),r("blur",E)},100)},D=()=>{!l.disabled&&!l.readonly&&(i.value=!i.value,i.value&&e.nextTick(()=>{var E;(E=o.value)==null||E.focus()}))},M=E=>{let x=E;if(l.format!=="hex"&&E.startsWith("#")){const z=E.replace("#",""),V=parseInt(z.substring(0,2),16),n=parseInt(z.substring(2,4),16),g=parseInt(z.substring(4,6),16);if(l.format==="rgb")x=`rgb(${V}, ${n}, ${g})`;else if(l.format==="rgba")x=`rgba(${V}, ${n}, ${g}, 1)`;else if(l.format==="hsl"){const C=V/255,I=n/255,q=g/255,p=Math.max(C,I,q),h=Math.min(C,I,q);let w,A,L=(p+h)/2;if(p===h)w=A=0;else{const K=p-h;switch(A=L>.5?K/(2-p-h):K/(p+h),p){case C:w=(I-q)/K+(I<q?6:0);break;case I:w=(q-C)/K+2;break;case q:w=(C-I)/K+4;break}w=Math.round(w*60),A=Math.round(A*100),L=Math.round(L*100)}x=`hsl(${w}, ${A}%, ${L}%)`}}s.value=x,r("input",{target:{value:x}}),e.nextTick(()=>{var z;(z=f.value)!=null&&z.validate&&f.value.validate()})},O=()=>{var E;(E=f.value)==null||E.focus()},N=E=>{r("validation",E)},u=E=>{f.value=E,r("mounted",{validate:E.validate,focus:O})},c=["#3b82f6","#9333ea","#22c55e","#f59e0b","#ef4444","#111827","#374151","#6b7280","#f3f4f6","#ffffff"],d=e.computed(()=>l.presets.length>0?l.presets:c),y=e.computed(()=>{const x={hex:"hexColor",rgb:"rgbColor",rgba:"rgbaColor",hsl:"hslColor"}[l.format];return l.rules.some(V=>typeof V=="string"&&V===x?!0:typeof V=="object"&&V!==null?Object.keys(V).some(n=>n===x):!1)?l.rules:[...l.rules,x]});return(E,x)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(b.value)},[e.createElementVNode("div",$t,[e.createVNode(W,{id:e.unref(a),modelValue:s.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:y.value,name:t.name,"onUpdate:modelValue":S,onFocus:_,onBlur:v,onValidation:N,onMounted:u},e.createSlots({suffix:e.withCtx(()=>[e.createElementVNode("div",{class:"base-color-picker__icon",onClick:D},x[0]||(x[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:s.value}),onClick:D},null,4)]),key:"0"}:void 0]),1032,["id","modelValue","variant","state","label","disabled","readonly","required","helperText","errorMessage","rules","name"]),i.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"colorPickerRef",ref:o,class:"base-color-picker__popup",tabindex:"-1",onBlur:v},[e.createElementVNode("input",{type:"color",value:s.value,class:"base-color-picker__color-input",onInput:k},null,40,Ct),d.value.length>0?(e.openBlock(),e.createElementBlock("div",vt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,(z,V)=>(e.openBlock(),e.createElementBlock("div",{key:V,class:e.normalizeClass(["base-color-picker__preset",{"base-color-picker__preset--active":s.value===z}]),style:e.normalizeStyle({backgroundColor:z}),onClick:n=>M(z)},null,14,xt))),128))])):e.createCommentVNode("",!0)],544)):e.createCommentVNode("",!0)])],2))}},_t={key:0,class:"base-combobox__label"},Nt={key:0,class:"base-combobox__required","aria-hidden":"true"},It=["tabindex"],Tt={key:0,class:"base-combobox__prefix"},Mt={key:1,class:"base-combobox__tags"},zt=["onClick"],At=["id","value","placeholder","disabled","readonly"],Dt=["id"],Ot={class:"base-combobox__suffix"},Lt={key:0,class:"base-combobox__clear-container"},Rt={key:1,class:"base-combobox__spinner"},qt={key:2,class:"base-combobox__suffix-content"},jt={key:0,class:"base-combobox__loading"},Ft={key:1,class:"base-combobox__no-data"},Pt={key:2,class:"base-combobox__options"},Kt=["onClick","onMouseenter"],Ut={key:0,class:"base-combobox__option-check",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Y={__name:"BaseCombobox",props:{id:{type:String,default:""},modelValue:{type:[String,Number,Object,Array],default:null},options:{type:Array,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:"Select an option..."},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:""},multiple:{type:Boolean,default:!1},searchable:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},valueKey:{type:String,default:"value"},labelKey:{type:String,default:"label"},noDataText:{type:String,default:"No options found"},maxHeight:{type:String,default:"200px"},minDropdownWidth:{type:[String,Number],default:200},wrapOptionText:{type:Boolean,default:!0},closeOnSelect:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},showTags:{type:Boolean,default:!1}},emits:["update:modelValue","focus","blur","input","validation","mounted","search","clear","select"],setup(t,{emit:B}){const l=e.useSlots(),a=t,{autoId:r}=P("combobox",a),o=B,f=e.ref(null),i=e.ref(null),s=e.ref(null),b=e.ref(!1),S=e.ref(!1),k=e.ref(""),_=e.ref(""),v=e.ref(-1),D={required:m=>({valid:!!m||Array.isArray(m)&&m.length>0,message:"This field is required"}),minLength:(m,$)=>({valid:!m||m.length>=$,message:`Must be at least ${$} characters`}),maxLength:(m,$)=>({valid:!m||m.length<=$,message:`Must be no more than ${$} characters`})},M=m=>{if(!a.rules.length)return!0;for(const $ of a.rules){if(typeof $=="string"){const T=D[$];if(T){const j=T(m);if(!j.valid)return k.value=j.message,!1}continue}if(typeof $=="object"){const[T,j]=Object.entries($)[0],F=D[T];if(F){const ee=F(m,j);if(!ee.valid)return k.value=$.message||ee.message,!1}if(typeof $.validator=="function"&&!$.validator(m))return k.value=$.message||"Invalid value",!1}}return k.value="",!0},O=m=>typeof m=="object"&&m!==null?m[a.valueKey]:m,N=m=>typeof m=="object"&&m!==null&&(m[a.labelKey]||m[a.valueKey])||String(m),u=e.computed(()=>!a.searchable||!_.value?a.options:a.options.filter(m=>N(m).toLowerCase().includes(_.value.toLowerCase()))),c=e.computed(()=>{if(!a.modelValue)return[];if(a.multiple)return Array.isArray(a.modelValue)?a.modelValue.map(m=>typeof m=="object"?m:a.options.find($=>O($)===m)||m):[];{if(typeof a.modelValue=="object")return[a.modelValue];const m=a.options.find($=>O($)===a.modelValue);return m?[m]:[]}}),d=e.computed(()=>a.searchable&&b.value&&S.value?_.value:c.value.length?a.multiple?!a.showTags&&c.value.length>0?c.value.length===1?"1 item selected":`${c.value.length} items selected`:"":N(c.value[0]):""),y=e.computed(()=>({"vsui base-combobox":!0,[`base-combobox--${a.variant}`]:!0,[`base-combobox--${E.value}`]:E.value,"base-combobox--disabled":a.disabled,"base-combobox--focused":b.value,"base-combobox--open":S.value,"base-combobox--multiple":a.multiple,"base-combobox--with-prefix":a.prefixIcon||l.prefix,"base-combobox--with-suffix":a.suffixIcon||l.suffix||a.clearable})),E=e.computed(()=>k.value?"error":a.state),x=e.computed(()=>k.value?k.value:a.errorMessage||a.helperText),z=e.computed(()=>a.required?!0:a.rules.some(m=>m==="required"?!0:typeof m=="object"?m.required||Object.keys(m)[0]==="required":!1)),V=e.computed(()=>a.clearable&&!a.disabled&&!a.readonly&&(a.multiple&&c.value.length>0||!a.multiple&&a.modelValue)),n=()=>{if(!s.value||!f.value)return;const m=s.value.getBoundingClientRect(),$=f.value.getBoundingClientRect(),T={width:window.innerWidth,height:window.innerHeight},j=typeof a.minDropdownWidth=="string"?parseInt(a.minDropdownWidth):a.minDropdownWidth,F=Math.max($.width,j);s.value.style.width=`${F}px`,s.value.style.top="100%",s.value.style.bottom="auto",s.value.style.left="0",s.value.style.right="auto",$.left+F>T.width&&(s.value.style.right="0",s.value.style.left="auto"),$.bottom+m.height>T.height&&(s.value.style.bottom="100%",s.value.style.top="auto",s.value.style.marginTop="0",s.value.style.marginBottom="0.5rem")},g=()=>{a.disabled||a.readonly||(S.value=!0,v.value=-1,a.searchable&&(_.value="",e.nextTick(()=>{var m;(m=i.value)==null||m.focus()})),e.nextTick(()=>{n(),document.addEventListener("click",I)}))},C=()=>{S.value=!1,v.value=-1,_.value="",document.remo