vue-smart-ui
Version:
A collection of Vue 3 smart and highly customizable UI components for modern web applications
2 lines (1 loc) • 36.1 kB
JavaScript
(function(B,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(B=typeof globalThis<"u"?globalThis:B||self,e(B.VueSmartUI={},B.Vue))})(this,function(B,e){"use strict";let A=0;function v(t="base",u){const a=()=>(A++,`${t}-${A}`);return{autoId:e.computed(()=>u.id||a())}}const ee=["id"],D={__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 u=t,{autoId:a}=v("accordion",u),n=e.ref([]),r=l=>{if(u.multiple){const c=n.value.indexOf(l);c===-1?n.value.push(l):n.value.splice(c,1)}else n.value=n.value.includes(l)?[]:[l]};return e.provide("accordion",{activeItems:n,toggleItem:r,variant:u.variant}),(l,c)=>(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,ee))}},te=["disabled","aria-expanded"],ae={class:"base-accordion-item__body"},F={__name:"BaseAccordionItem",props:{title:{type:String,required:!0},disabled:{type:Boolean,default:!1}},setup(t){const u=t,a=e.inject("accordion"),n=e.ref(Symbol()),r=e.ref("0px"),l=e.ref(null),c=e.computed(()=>a.activeItems.value.includes(n.value)),i=e.computed(()=>a.variant),d=()=>{u.disabled||a.toggleItem(n.value)},p=()=>{l.value&&(r.value=c.value?`${l.value.scrollHeight}px`:"0px")},V=new ResizeObserver(p);return e.onMounted(()=>{l.value&&(V.observe(l.value),p())}),e.onUnmounted(()=>{V.disconnect()}),e.watch(c,p),(g,h)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vsui base-accordion-item",[`base-accordion-item--${i.value}`,{"base-accordion-item--active":c.value,"base-accordion-item--disabled":t.disabled}]])},[e.createElementVNode("button",{class:"base-accordion-item__header",onClick:d,disabled:t.disabled,"aria-expanded":c.value},[g.$slots.icon?e.renderSlot(g.$slots,"icon",{key:0}):e.createCommentVNode("",!0),e.renderSlot(g.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),e.renderSlot(g.$slots,"chevron",{},()=>[h[0]||(h[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,te),e.createElementVNode("div",{class:"base-accordion-item__content",ref_key:"contentRef",ref:l,style:e.normalizeStyle({height:r.value})},[e.createElementVNode("div",ae,[e.renderSlot(g.$slots,"default")])],4)],2))}},le=["id","disabled"],ne={key:0,class:"spinner"},oe={key:0,class:"spinner"},re={key:3,class:"spinner"},j={__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 u=t,{autoId:a}=v("button",u);return(n,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}]]),disabled:t.disabled||t.loading,onClick:r[0]||(r[0]=l=>n.$emit("click",l))},[n.$slots.prefix?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.loading?(e.openBlock(),e.createElementBlock("div",ne)):e.renderSlot(n.$slots,"prefix",{key:1})],64)):e.createCommentVNode("",!0),t.iconOnly?e.createCommentVNode("",!0):e.renderSlot(n.$slots,"default",{key:1}),n.$slots.suffix?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[t.loading?(e.openBlock(),e.createElementBlock("div",oe)):e.renderSlot(n.$slots,"suffix",{key:1})],64)):e.createCommentVNode("",!0),t.loading&&!n.$slots.prefix&&!n.$slots.suffix?(e.openBlock(),e.createElementBlock("div",re)):e.createCommentVNode("",!0)],10,le))}},se=["id","checked","disabled","indeterminate"],ie={class:"base-checkbox__checkmark"},de={key:0,viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},ce={key:1,viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},ue={key:0,class:"base-checkbox__label"},P={__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:u}){const a=t,{autoId:n}=v("checkbox",a),r=u,l=e.computed(()=>Array.isArray(a.modelValue)?a.modelValue.includes(a.value):a.modelValue),c=i=>{if(Array.isArray(a.modelValue)){const d=[...a.modelValue];if(i.target.checked)d.push(a.value);else{const p=d.indexOf(a.value);p>-1&&d.splice(p,1)}r("update:modelValue",d)}else r("update:modelValue",i.target.checked)};return(i,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(n),type:"checkbox",checked:l.value,disabled:t.disabled,indeterminate:t.indeterminate,class:"base-checkbox__input",onChange:c},null,40,se),e.createElementVNode("span",ie,[e.renderSlot(i.$slots,"checkmark",{},()=>[l.value&&!t.indeterminate?(e.openBlock(),e.createElementBlock("svg",de,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",ce,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)])]),i.$slots.default||t.label?(e.openBlock(),e.createElementBlock("span",ue,[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])])):e.createCommentVNode("",!0)],2))}},me=["id"],H={__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:u}){const a=t,{autoId:n}=v("dropdown",a),r=u,l=e.ref(null),c=e.ref(null),i=e.ref(a.modelValue),d=()=>{if(!c.value||!l.value)return;const g=c.value.getBoundingClientRect(),h=l.value.getBoundingClientRect(),w={width:window.innerWidth,height:window.innerHeight};c.value.style.top="100%",c.value.style.bottom="auto",c.value.style.left="auto",c.value.style.right="0",h.right+g.width>w.width&&(c.value.style.right="0",c.value.style.left="auto"),h.right-g.width<0&&(c.value.style.left="0",c.value.style.right="auto"),h.bottom+g.height>w.height&&(c.value.style.bottom="100%",c.value.style.top="auto",c.value.style.marginTop="0",c.value.style.marginBottom="0.5rem")};e.watch(()=>a.modelValue,g=>{i.value=g,g?(document.addEventListener("click",p),e.nextTick(()=>{d()})):document.removeEventListener("click",p)});const p=g=>{a.closeOnClickOutside&&l.value&&!l.value.contains(g.target)&&r("update:modelValue",!1)},V=g=>{a.closeOnClick&&!g.target.closest("[data-prevent-close]")&&r("update:modelValue",!1)};return e.onMounted(()=>{a.modelValue&&document.addEventListener("click",p),window.addEventListener("scroll",d,!0),window.addEventListener("resize",d)}),e.onUnmounted(()=>{document.removeEventListener("click",p),window.removeEventListener("scroll",d,!0),window.removeEventListener("resize",d)}),(g,h)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dropdownRef",ref:l,class:"vsui base-dropdown",id:e.unref(n)},[e.createElementVNode("div",{class:"base-dropdown__trigger",onClick:h[0]||(h[0]=w=>r("update:modelValue",!t.modelValue))},[e.renderSlot(g.$slots,"trigger")]),e.createVNode(e.Transition,{name:"dropdown"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"menuRef",ref:c,class:e.normalizeClass(["base-dropdown__menu",`base-dropdown__menu--${t.variant}`]),style:e.normalizeStyle({width:t.width}),onClick:V},[e.renderSlot(g.$slots,"default")],6),[[e.vShow,i.value]])]),_:3})],8,me))}},fe={class:"vsui infinite-scroll"},pe={class:"infinite-scroll__loader"},ye={key:0},ge={key:0,class:"infinite-scroll__end"},U={__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:u}){const a=t,n=u,r=e.ref(null),l=e.ref(null),c=()=>{r.value&&r.value.disconnect(),r.value=new IntersectionObserver(i=>{i[0].isIntersecting&&!a.loading&&!a.disabled&&n("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,(i,d)=>{d===!0&&i===!1&&setTimeout(()=>{c()},100)}),e.onMounted(()=>{c()}),e.onUnmounted(()=>{r.value&&r.value.disconnect()}),(i,d)=>(e.openBlock(),e.createElementBlock("div",fe,[e.renderSlot(i.$slots,"default"),e.createElementVNode("div",{ref_key:"bottomElement",ref:l,class:"infinite-scroll__trigger"},[t.loading?e.renderSlot(i.$slots,"loading",{key:0},()=>[e.createElementVNode("div",pe,[d[0]||(d[0]=e.createElementVNode("div",{class:"spinner"},null,-1)),t.loadingText?(e.openBlock(),e.createElementBlock("span",ye,e.toDisplayString(t.loadingText),1)):e.createCommentVNode("",!0)])]):t.disabled?e.renderSlot(i.$slots,"disabled",{key:1},()=>[t.endText?(e.openBlock(),e.createElementBlock("div",ge,e.toDisplayString(t.endText),1)):e.createCommentVNode("",!0)]):e.createCommentVNode("",!0)],512)]))}},be={key:0,class:"base-input__label"},ke={key:0,class:"base-input__required","aria-hidden":"true"},he={class:"base-input__wrapper"},Be={key:0,class:"base-input__prefix"},Ve=["id","type","value","placeholder","disabled","readonly","required","aria-required","maxlength"],we={key:1,class:"base-input__suffix"},K={__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:""},mask:{type:[String,Object],default:null}},emits:["update:modelValue","focus","blur","input","validation","mounted"],setup(t,{emit:u}){const a=e.useSlots(),n=t,{autoId:r}=v("input",n),l=u,c=e.ref(null),i=e.ref(!1),d=e.ref(""),p=e.computed(()=>({"vsui base-input":!0,[`base-input--${n.variant}`]:!0,[`base-input--${s.value}`]:s.value,"base-input--disabled":n.disabled,"base-input--focused":i.value,"base-input--with-prefix":n.prefixIcon||a.prefix,"base-input--with-suffix":n.suffixIcon||a.suffix})),V={required:o=>({valid:!!(o!=null&&o.toString().trim()),message:"This field is required"}),email:o=>({valid:!o||/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(o),message:"Please enter a valid email"}),min:(o,m)=>({valid:!o||o.length>=m,message:`Must be at least ${m} characters`}),max:(o,m)=>({valid:!o||o.length<=m,message:`Must be no more than ${m} characters`}),pattern:(o,m)=>({valid:!o||new RegExp(m).test(o),message:"Invalid format"})},g=o=>{if(!n.rules.length)return!0;for(const m of n.rules){if(typeof m=="string"){const $=V[m];if($){const I=$(o);if(!I.valid)return d.value=I.message,!1}continue}if(typeof m=="object"){const[$,I]=Object.entries(m)[0],T=V[$];if(T){const N=T(o,I);if(!N.valid)return d.value=m.message||N.message,!1}if(typeof m.validator=="function"&&!m.validator(o))return d.value=m.message||"Invalid value",!1}}return d.value="",!0},h=e.computed({get:()=>n.mask==="currency"&&n.modelValue?w.currency.format(n.modelValue):n.modelValue,set:o=>l("update:modelValue",o)}),w={phone:{patterns:["(##) ####-####","(##) #####-####"],match:o=>o.replace(/\D/g,"").length<=10?0:1},currency:{pattern:"currency",format:o=>{if(!o)return"";const m=typeof o=="string"?parseFloat(o.replace(/\D/g,""))/100:o;return new Intl.NumberFormat("pt-BR",{style:"currency",currency:"BRL",minimumFractionDigits:2,maximumFractionDigits:2}).format(m)},parse:o=>{const m=o.replace(/[^\d]/g,"");return parseFloat(m)/100}},date:"##/##/####",cpf:"###.###.###-##",cnpj:"##.###.###/####-##",cep:"#####-###"},S=(o,m)=>{if(!o)return o;if(m==="currency"||m.pattern==="currency"){const $=w.currency.parse(o);return w.currency.format($)}if(typeof m=="string")return C(o,m);if(m.patterns){const $=m.match(o);return C(o,m.patterns[$])}return o},C=(o,m)=>{if(!m)return o;const I=o.replace(/\D/g,"").split("");let T="",N=0;for(let z=0;z<m.length&&I[z];z++)m[N]==="#"?(T+=I[z],N++):(T+=m[N],N++,z--);return T},M=o=>{let m=o.target.value;if(n.mask){const $=typeof n.mask=="string"?w[n.mask]||n.mask:n.mask.pattern;m=S(m,$),c.value&&(c.value.value=m)}if(n.mask==="currency"){const $=w.currency.parse(m);h.value=$,l("update:modelValue",$)}else h.value=m,l("update:modelValue",m);if(l("input",{...o,target:{...o.target,value:m}}),n.validateOnInput){const $=g(h.value);l("validation",{valid:$,error:d.value})}},b=o=>{i.value=!0,l("focus",o)},k=o=>{if(i.value=!1,l("blur",o),n.validateOnBlur){const m=g(h.value);l("validation",{valid:m,error:d.value})}},y=()=>{var o;(o=c.value)==null||o.focus()},s=e.computed(()=>d.value?"error":n.state),f=e.computed(()=>d.value?d.value:n.errorMessage||n.helperText),E=()=>{const o=g(h.value);return l("validation",{valid:o,error:d.value,name:n.name}),o},x=e.computed(()=>n.required?!0:n.rules.some(o=>o==="required"?!0:typeof o=="object"?o.required||Object.keys(o)[0]==="required":!1)),_=e.computed(()=>{if(!n.mask)return;const o=typeof n.mask=="string"?w[n.mask]||n.mask:n.mask.pattern;if(typeof o=="string")return o.length;if(o.patterns)return Math.max(...o.patterns.map(m=>m.length))});return e.onMounted(()=>{l("mounted",{validate:E,focus:y})}),(o,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(p.value)},[t.label?(e.openBlock(),e.createElementBlock("label",be,[e.createTextVNode(e.toDisplayString(t.label)+" ",1),x.value?(e.openBlock(),e.createElementBlock("span",ke,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",he,[o.$slots.prefix||t.prefixIcon?(e.openBlock(),e.createElementBlock("div",Be,[e.renderSlot(o.$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:c,type:t.type,value:h.value,placeholder:t.placeholder,disabled:t.disabled,readonly:t.readonly,required:x.value,"aria-required":x.value,maxlength:_.value,class:"base-input__field",onInput:M,onFocus:b,onBlur:k},null,40,Ve),o.$slots.suffix||t.suffixIcon?(e.openBlock(),e.createElementBlock("div",we,[e.renderSlot(o.$slots,"suffix",{},()=>[e.createElementVNode("i",{class:e.normalizeClass(t.suffixIcon)},null,2)])])):e.createCommentVNode("",!0)]),f.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["base-input__helper",{"base-input__helper--error":d.value}])},e.toDisplayString(f.value),3)):e.createCommentVNode("",!0)],2))}},$e={key:0,class:"base-popup__header"},Se={class:"base-popup__content"},Ee={key:1,class:"base-popup__footer"},W={__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:u}){const a=t,n=u,r=e.ref(null),l=i=>{!a.disableClickOutside&&r.value&&!r.value.contains(i.target)&&(i.target.closest(".base-popup")||(n("update:modelValue",!1),n("close")))},c=i=>{a.closeOnEsc&&i.key==="Escape"&&(n("update:modelValue",!1),n("close"))};return e.onMounted(()=>{document.addEventListener("mousedown",l),document.addEventListener("keydown",c)}),e.onUnmounted(()=>{document.removeEventListener("mousedown",l),document.removeEventListener("keydown",c)}),(i,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}`]])},[i.$slots.header?(e.openBlock(),e.createElementBlock("div",$e,[e.renderSlot(i.$slots,"header")])):e.createCommentVNode("",!0),e.createElementVNode("div",Se,[e.renderSlot(i.$slots,"default")]),i.$slots.footer?(e.openBlock(),e.createElementBlock("div",Ee,[e.renderSlot(i.$slots,"footer")])):e.createCommentVNode("",!0),i.$slots.close?(e.openBlock(),e.createElementBlock("button",{key:2,class:"base-popup__close",onClick:d[0]||(d[0]=p=>i.$emit("update:modelValue",!1))},[e.renderSlot(i.$slots,"close")])):e.createCommentVNode("",!0)],2)],2)):e.createCommentVNode("",!0)]))}},X={__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(u,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(u.$slots,"default")],6))}},xe=["for"],Ce={key:0,class:"base-slider__required"},Ne={class:"base-slider__container"},ve={class:"base-slider__extremity-value base-slider__extremity-value--min"},_e={key:0,class:"base-slider__mark-label"},Ie=["onMousedown","onTouchstart","onKeydown","aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","aria-disabled"],Te={key:0,class:"base-slider__thumb-value"},Me={class:"base-slider__extremity-value base-slider__extremity-value--max"},ze={key:1,class:"base-slider__helper"},G={__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:u}){const a=t,n=u,{autoId:r}=v("slider",a),l=e.ref(a.modelValue),c=e.ref(!1),i=e.ref(null),d=e.ref([]),p=e.computed(()=>a.range&&Array.isArray(a.modelValue)),V=e.computed(()=>a.formatValue?p.value?l.value.map(b=>a.formatValue(b)):a.formatValue(l.value):l.value),g=e.computed(()=>{if(p.value){const[b,k]=l.value,y=(b-a.min)/(a.max-a.min)*100,s=(k-a.min)/(a.max-a.min)*100;return{left:`${y}%`,width:`${s-y}%`}}else return{width:`${(l.value-a.min)/(a.max-a.min)*100}%`}}),h=e.computed(()=>p.value?l.value.map(b=>`${(b-a.min)/(a.max-a.min)*100}%`):[`${(l.value-a.min)/(a.max-a.min)*100}%`]),w=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,b=>{l.value=b}),e.watch(l,b=>{n("update:modelValue",b)});const S=(b,k=0)=>{if(a.disabled)return;const y=i.value.getBoundingClientRect(),s=b.clientX-y.left,f=Math.min(Math.max(s/y.width,0),1),E=a.min+f*(a.max-a.min),x=Math.round(E/a.step)*a.step,_=Math.min(Math.max(x,a.min),a.max);if(p.value){const o=[...l.value];o[k]=_,k===0&&o[0]>o[1]?o[0]=o[1]:k===1&&o[1]<o[0]&&(o[1]=o[0]),l.value=o}else l.value=_;n("change",l.value)},C=(b,k=0)=>{if(a.disabled)return;c.value=!0,S(b,k);const y=f=>S(f,k),s=()=>{c.value=!1,document.removeEventListener("mousemove",y),document.removeEventListener("mouseup",s),document.removeEventListener("touchmove",y),document.removeEventListener("touchend",s)};document.addEventListener("mousemove",y),document.addEventListener("mouseup",s),document.addEventListener("touchmove",y),document.addEventListener("touchend",s)},M=(b,k=0)=>{if(a.disabled)return;const y=p.value?l.value[k]:l.value;let s=y;switch(b.key){case"ArrowRight":case"ArrowUp":s=Math.min(y+a.step,a.max);break;case"ArrowLeft":case"ArrowDown":s=Math.max(y-a.step,a.min);break;case"Home":s=a.min;break;case"End":s=a.max;break;default:return}if(p.value){const f=[...l.value];f[k]=s,k===0&&f[0]>f[1]?f[0]=f[1]:k===1&&f[1]<f[0]&&(f[1]=f[0]),l.value=f}else l.value=s;n("change",l.value),b.preventDefault()};return e.onMounted(()=>{p.value&&(!Array.isArray(l.value)||l.value.length!==2)?l.value=[a.min,a.max]:!p.value&&Array.isArray(l.value)&&(l.value=a.min),n("mounted",{id:r.value,getValue:()=>l.value,setValue:b=>{l.value=b}})}),(b,k)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vsui base-slider",w.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",Ce,"*")):e.createCommentVNode("",!0)],8,xe)):e.createCommentVNode("",!0),e.createElementVNode("div",Ne,[e.createElementVNode("div",ve,e.toDisplayString(t.formatValue?t.formatValue(t.min):t.min),1),e.createElementVNode("div",{ref_key:"sliderTrack",ref:i,class:"base-slider__track",onMousedown:k[0]||(k[0]=y=>S(y)),onTouchstart:k[1]||(k[1]=e.withModifiers(y=>S(y.touches[0]),["prevent"]))},[e.createElementVNode("div",{class:"base-slider__track-fill",style:e.normalizeStyle(g.value)},null,4),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.marks,y=>(e.openBlock(),e.createElementBlock("div",{key:y.value,class:e.normalizeClass(["base-slider__mark",{"base-slider__mark--active":p.value?y.value>=l.value[0]&&y.value<=l.value[1]:y.value<=l.value}]),style:e.normalizeStyle({left:`calc(${(y.value-t.min)/(t.max-t.min)*100}%)`})},[k[2]||(k[2]=e.createElementVNode("div",{class:"base-slider__mark-dot"},null,-1)),y.label?(e.openBlock(),e.createElementBlock("div",_e,e.toDisplayString(y.label),1)):e.createCommentVNode("",!0)],6))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(y,s)=>(e.openBlock(),e.createElementBlock("div",{key:s,ref_for:!0,ref_key:"thumbRefs",ref:d,class:"base-slider__thumb",style:e.normalizeStyle({left:y}),onMousedown:e.withModifiers(f=>C(f,s),["stop"]),onTouchstart:e.withModifiers(f=>C(f.touches[0],s),["stop","prevent"]),onKeydown:f=>M(f,s),tabindex:"0",role:"slider","aria-valuemin":t.min,"aria-valuemax":t.max,"aria-valuenow":p.value?l.value[s]:l.value,"aria-valuetext":p.value?V.value[s]:V.value,"aria-disabled":t.disabled},[t.showValue?(e.openBlock(),e.createElementBlock("div",Te,e.toDisplayString(p.value?V.value[s]:V.value),1)):e.createCommentVNode("",!0)],44,Ie))),128))],544),e.createElementVNode("div",Me,e.toDisplayString(t.formatValue?t.formatValue(t.max):t.max),1)]),t.helperText||t.errorMessage?(e.openBlock(),e.createElementBlock("div",ze,e.toDisplayString(t.errorMessage||t.helperText),1)):e.createCommentVNode("",!0)],2))}},Le={key:0,class:"base-textarea__label"},Re={key:0,class:"base-textarea__required","aria-hidden":"true"},qe={class:"base-textarea__wrapper"},Oe=["id","value","rows","placeholder","disabled","readonly","required","aria-required"],J={__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:u}){const a=t,{autoId:n}=v("textarea",a),r=u,l=e.ref(null),c=e.ref(!1),i=e.ref(""),d=e.computed(()=>({"vsui base-textarea":!0,[`base-textarea--${a.variant}`]:!0,[`base-textarea--${b.value}`]:b.value,"base-textarea--disabled":a.disabled,"base-textarea--focused":c.value,"base-textarea--block":a.block,[`base-textarea--resize-${a.resize}`]:!0})),p={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`})},V=()=>{const s=g(a.modelValue);return r("validation",{valid:s,error:i.value,name:a.name}),s},g=s=>{if(!a.rules.length)return!0;for(const f of a.rules){if(typeof f=="string"){const E=p[f];if(E){const x=E(s);if(!x.valid)return i.value=x.message,!1}continue}if(typeof f=="object"){const[E,x]=Object.entries(f)[0],_=p[E];if(_){const o=_(s,x);if(!o.valid)return i.value=f.message||o.message,!1}if(typeof f.validator=="function"&&!f.validator(s))return i.value=f.message||"Invalid value",!1}}return i.value="",!0},h=s=>{if(r("update:modelValue",s.target.value),r("input",s),a.validateOnInput){const f=g(s.target.value);r("validation",{valid:f,error:i.value})}a.autoResize&&C()},w=s=>{c.value=!0,r("focus",s)},S=s=>{if(c.value=!1,r("blur",s),a.validateOnBlur){const f=g(s.target.value);r("validation",{valid:f,error:i.value})}},C=()=>{if(!l.value)return;l.value.style.height="auto";let s=l.value.scrollHeight+2;if(a.maxRows){const E=parseInt(getComputedStyle(l.value).lineHeight)*a.maxRows;s=Math.min(s,E)}l.value.style.height=`${s}px`},M=()=>{var s;(s=l.value)==null||s.focus()},b=e.computed(()=>i.value?"error":a.state),k=e.computed(()=>i.value?i.value:a.errorMessage||a.helperText),y=e.computed(()=>a.required?!0:a.rules.some(s=>s==="required"||typeof s=="object"&&s.required));return e.onMounted(()=>{a.autoResize&&C(),r("mounted",{validate:V,focus:M})}),(s,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(d.value)},[t.label?(e.openBlock(),e.createElementBlock("label",Le,[e.createTextVNode(e.toDisplayString(t.label)+" ",1),y.value?(e.openBlock(),e.createElementBlock("span",Re,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",qe,[e.createElementVNode("textarea",{id:e.unref(n),ref_key:"textareaRef",ref:l,value:t.modelValue,rows:t.rows,placeholder:t.placeholder,disabled:t.disabled,readonly:t.readonly,required:y.value,"aria-required":y.value,class:"base-textarea__field",onInput:h,onFocus:w,onBlur:S},null,40,Oe)]),k.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["base-textarea__helper",{"base-textarea__helper--error":i.value}])},e.toDisplayString(k.value),3)):e.createCommentVNode("",!0)],2))}},L=(t,u)=>{const a=t.__vccOpts||t;for(const[n,r]of u)a[n]=r;return a},Ae={},De={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 Fe(t,u){return e.openBlock(),e.createElementBlock("svg",De,u[0]||(u[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 je=L(Ae,[["render",Fe]]),Pe={},He={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 Ue(t,u){return e.openBlock(),e.createElementBlock("svg",He,u[0]||(u[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 Ke=L(Pe,[["render",Ue]]),We={},Xe={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 Ge(t,u){return e.openBlock(),e.createElementBlock("svg",Xe,u[0]||(u[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 Je=L(We,[["render",Ge]]),Qe={},Ye={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 Ze(t,u){return e.openBlock(),e.createElementBlock("svg",Ye,u[0]||(u[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 Q=L(Qe,[["render",Ze]]),et=["data-toast-id"],tt={key:0,class:"base-toast__icon"},at={class:"base-toast__content"},lt={key:0,class:"base-toast__title"},nt={class:"base-toast__message"},q={__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:u}){const a=t,n=u,r=e.ref(!1),l=e.ref(null),c=e.ref("100%"),i=()=>{a.duration>0&&(c.value="100%",requestAnimationFrame(()=>{requestAnimationFrame(()=>{c.value="0%"})}))},d=()=>{r.value=!1,setTimeout(()=>{n("close")},100)},p=()=>{l.value&&(l.value.style.animationPlayState="paused")},V=()=>{l.value&&(l.value.style.animationPlayState="running")},g={success:je,error:Ke,warning:Je,info:Q,default:Q},h=e.computed(()=>g[a.variant]||g.default);return e.onMounted(()=>{var w;setTimeout(()=>{r.value=!0},100),a.duration>0&&(a.simple?setTimeout(d,a.duration):(w=l.value)==null||w.addEventListener("animationend",d,{once:!0})),i()}),e.onUnmounted(()=>{l.value&&l.value.removeEventListener("animationend",d)}),(w,S)=>(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:p,onMouseleave:V},[t.simple?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",tt,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(h.value),{class:"icon"}))])),e.createElementVNode("div",at,[!t.simple&&t.title?(e.openBlock(),e.createElementBlock("div",lt,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",nt,e.toDisplayString(t.message),1)]),t.closable?(e.openBlock(),e.createElementBlock("button",{key:1,class:"base-toast__close",onClick:d},S[0]||(S[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,et))}},R=e.ref([]);let ot=0,Y=null;function Z(){const t=()=>{if(Y)return;const n=document.createElement("div");n.id="toast-container",document.body.appendChild(n),Y=e.createApp({render:()=>e.h(O)}).mount(n)},u=({message:n,title:r="",variant:l="default",position:c="top-right",duration:i=3e3,closable:d=!0,simple:p=!1})=>{t();const V=++ot;return R.value.push({id:V,message:n,title:r,variant:l,position:c,duration:i,closable:d,simple:p}),V};return{toasts:R,addToast:u,removeToast:n=>{const r=R.value.findIndex(l=>l.id===n);r>-1&&R.value.splice(r,1)},default:(n,r={})=>u({...r,message:n,variant:"default"}),success:(n,r={})=>u({...r,message:n,variant:"success"}),error:(n,r={})=>u({...r,message:n,variant:"error"}),info:(n,r={})=>u({...r,message:n,variant:"info"}),warning:(n,r={})=>u({...r,message:n,variant:"warning"})}}const O={__name:"ToastsContainer",setup(t){const{toasts:u,removeToast:a}=Z(),n=e.computed(()=>{const r={"top-right":[],"top-left":[],"top-center":[],"bottom-right":[],"bottom-left":[],"bottom-center":[]};return u.value.forEach(l=>{r[l.position].push(l)}),r});return(r,l)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,(c,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:i},[c.length?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["vsui toasts-container",`toasts-container--${i}`])},[e.createVNode(e.TransitionGroup,{name:"toast"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c,d=>(e.openBlock(),e.createBlock(e.unref(q),e.mergeProps({key:d.id,ref_for:!0},d,{onClose:p=>e.unref(a)(d.id)}),null,16,["onClose"]))),128))]),_:2},1024)],2)):e.createCommentVNode("",!0)],64))),128))}},rt={install(t){t.component("BaseAccordion",D),t.component("BaseAccordionItem",F),t.component("BaseButton",j),t.component("BaseCheckbox",P),t.component("BaseDropdown",H),t.component("BaseInfiniteScroll",U),t.component("BaseInput",K),t.component("BasePopup",W),t.component("BaseSkeleton",X),t.component("BaseSlider",G),t.component("BaseTextarea",J),t.component("BaseToast",q),t.component("ToastsContainer",O)}};B.BaseAccordion=D,B.BaseAccordionItem=F,B.BaseButton=j,B.BaseCheckbox=P,B.BaseDropdown=H,B.BaseInfiniteScroll=U,B.BaseInput=K,B.BasePopup=W,B.BaseSkeleton=X,B.BaseSlider=G,B.BaseTextarea=J,B.BaseToast=q,B.ToastsContainer=O,B.default=rt,B.useToast=Z,Object.defineProperties(B,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});