vue-treeselectjs
Version:
Treeselect Vue Component
2 lines (1 loc) • 3.58 kB
JavaScript
(function(e,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue"),require("treeselectjs")):typeof define=="function"&&define.amd?define(["vue","treeselectjs"],c):(e=typeof globalThis<"u"?globalThis:e||self,e.VueTreeselect=c(e.Vue,e.Treeselect))})(this,(function(e,c){"use strict";const p=()=>({modelValue:{type:[Array,Number,String],default:()=>[]},options:{type:Array,default:()=>[]},openLevel:{type:Number,default:0},appendToBody:{type:Boolean,default:!1},alwaysOpen:{type:Boolean,default:!1},showTags:{type:Boolean,default:!0},tagsCountText:{type:String,default:"elements selected"},tagsSortFn:{type:Function,default:null},clearable:{type:Boolean,default:!0},searchable:{type:Boolean,default:!0},placeholder:{type:String,default:"Select..."},grouped:{type:Boolean,default:!0},isGroupedValue:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},emptyText:{type:String,default:"No results found..."},staticList:{type:Boolean,default:!1},id:{type:String,default:""},ariaLabel:{type:String,default:""},isSingleSelect:{type:Boolean,default:!1},showCount:{type:Boolean,default:!1},disabledBranchNode:{type:Boolean,default:!1},direction:{type:String,default:"auto"},expandSelected:{type:Boolean,default:!1},saveScrollPosition:{type:Boolean,default:!0},isIndependentNodes:{type:Boolean,default:!1},rtl:{type:Boolean,default:!1},listClassName:{type:String,default:""},isBoostedRendering:{type:Boolean,default:!1},iconElements:{type:Object,default:()=>({})}}),y=["modelValue","options","id","iconElements"],m=e.defineComponent({name:"VueTreeselect",props:p(),emits:{"update:modelValue":l=>!0,input:l=>!0,open:l=>!0,close:l=>!0,"name-change":l=>!0,search:l=>!0,"open-close-group":l=>!0},setup(l,{emit:a}){const s=e.ref(null),u=e.ref(null),o=e.ref(null),d=t=>{a("update:modelValue",t),a("input",t)},_=t=>a("open",t),B=t=>a("close",t),C=t=>a("name-change",t),V=t=>a("search",t),b=(t,n)=>a("open-close-group",{groupId:t,isClosed:n}),R=e.computed(()=>JSON.stringify(l.modelValue)),E=e.computed(()=>JSON.stringify(l.options)),N=e.computed(()=>JSON.stringify(l.iconElements));return e.watch(()=>l,t=>{if(o.value){const n=e.toRaw(o.value),r=e.toRaw(t);let f=!1;Object.keys(r).forEach(i=>{const v=r[i]===n[i];!y.includes(i)&&!v&&(n[i]=r[i],f=!0)}),f&&n.mount()}},{deep:!0}),e.watch(()=>R.value,()=>{o.value&&e.toRaw(o.value).updateValue(l.modelValue)}),e.watch(()=>l.id,t=>{if(o.value){const n=e.toRaw(o.value);(n.id||t)&&(n.id=t??"",n.mount())}}),e.watch(()=>E.value,()=>{if(o.value){const t=e.toRaw(o.value);t.options=l.options??[],t.mount(),t.updateValue(l.modelValue)}}),e.watch(()=>N.value,()=>{if(o.value){const t=e.toRaw(o.value);t.iconElements={...t.iconElements,...l.iconElements},t.mount()}}),e.onMounted(()=>{if(!s.value)throw new Error("Treeselect container ref is not defined");const{modelValue:t,...n}=l,r={...n,value:t,parentHtmlContainer:s.value,listSlotHtmlComponent:u.value??null,inputCallback:d,openCallback:_,closeCallback:B,nameChangeCallback:C,searchCallback:V,openCloseGroupCallback:b};o.value=new c(r)}),e.onUnmounted(()=>{o.value&&e.toRaw(o.value).destroy()}),{treeselectContainerRef:s,treeselectAfterListSlotRef:u}}}),h=(l,a)=>{const s=l.__vccOpts||l;for(const[u,o]of a)s[u]=o;return s},g={class:"vue-treeselect"},w={ref:"treeselectContainerRef"},S={ref:"treeselectAfterListSlotRef",class:"treeselect__after-list-slot"};function T(l,a,s,u,o,d){return e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("div",w,null,512),e.createElementVNode("div",S,[e.renderSlot(l.$slots,"default")],512)])}return h(m,[["render",T]])}));