vue-treeselectjs - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

dist/vue-treeselectjs.d.ts

 export * from './Treeselect.vue'
 import vueTreeselectjs from './Treeselect.vue'
 export default vueTreeselectjs

dist/vue-treeselectjs.umd.js

@@ -1,1 +0,1 @@
-(function(t,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue"),require("treeselectjs")):typeof define=="function"&&define.amd?define(["vue","treeselectjs"],c):(t=typeof globalThis<"u"?globalThis:t||self,t.Treeselect=c(t.Vue,t.TreeselectJS))})(this,function(t,c){"use strict";const m=["modelValue","options","id","iconElements"],y=t.defineComponent({name:"Treeselect",props:{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"},clearable:{type:Boolean,default:!0},searchable:{type:Boolean,default:!0},placeholder:{type:String,default:"Select..."},grouped:{type:Boolean,default:!0},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},isGroupedValue:{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},iconElements:{type:Object,default:()=>({})}},emits:["input","open","close","name-change","search","update:modelValue"],setup(e,{emit:a}){const o=t.ref(null),i=t.ref(null),n=t.ref(null),u=l=>{a("update:modelValue",l),a("input",l)},T=l=>a("open",l),g=l=>a("close",l),b=l=>a("name-change",l),B=l=>a("search",l),C=t.computed(()=>JSON.stringify(e.modelValue)),E=t.computed(()=>JSON.stringify(e.options)),N=t.computed(()=>JSON.stringify(e.iconElements));return t.watch(()=>e,l=>{if(n.value){const s=t.toRaw(n.value),r=t.toRaw(l);let f=!1;Object.keys(r).forEach(d=>{const _=r[d]===s[d];!m.includes(d)&&!_&&(s[d]=r[d],f=!0)}),f&&s.mount()}},{deep:!0}),t.watch(()=>C.value,()=>{n.value&&t.toRaw(n.value).updateValue(e.modelValue)}),t.watch(()=>e.id,l=>{if(n.value){const s=t.toRaw(n.value);(s.id||l)&&(s.id=l??"",s.mount())}}),t.watch(()=>E.value,()=>{if(n.value){const l=t.toRaw(n.value);l.options=e.options,l.mount()}}),t.watch(()=>N.value,()=>{if(n.value){const l=t.toRaw(n.value);l.iconElements={...l.iconElements,...e.iconElements},l.mount()}}),t.onMounted(()=>{if(!o.value)throw new Error("Treeselect container ref is not defined");n.value=new c({parentHtmlContainer:o.value,value:e.modelValue,options:e.options,openLevel:e.openLevel,appendToBody:e.appendToBody,alwaysOpen:e.alwaysOpen,showTags:e.showTags,tagsCountText:e.tagsCountText,clearable:e.clearable,searchable:e.searchable,placeholder:e.placeholder,grouped:e.grouped,disabled:e.disabled,emptyText:e.emptyText,staticList:e.staticList,id:e.id,ariaLabel:e.ariaLabel,isSingleSelect:e.isSingleSelect,showCount:e.showCount,isGroupedValue:e.isGroupedValue,disabledBranchNode:e.disabledBranchNode,direction:e.direction,expandSelected:e.expandSelected,saveScrollPosition:e.saveScrollPosition,isIndependentNodes:e.isIndependentNodes,inputCallback:u,openCallback:T,closeCallback:g,nameChangeCallback:b,searchCallback:B,listSlotHtmlComponent:i.value??null,iconElements:e.iconElements})}),t.onUnmounted(()=>{n.value&&t.toRaw(n.value).destroy()}),{treeselectContainerRef:o,treeselectAfterListSlotRef:i}}}),h=(e,a)=>{const o=e.__vccOpts||e;for(const[i,n]of a)o[i]=n;return o},p={ref:"treeselectContainerRef"},S={ref:"treeselectAfterListSlotRef",class:"treeselect__after-list-slot"};function w(e,a,o,i,n,u){return t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createElementVNode("div",p,null,512),t.createElementVNode("div",S,[t.renderSlot(e.$slots,"default")],512)],64)}return h(y,[["render",w]])});
+(function(t,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue"),require("treeselectjs")):typeof define=="function"&&define.amd?define(["vue","treeselectjs"],c):(t=typeof globalThis<"u"?globalThis:t||self,t.Treeselect=c(t.Vue,t.TreeselectJS))})(this,function(t,c){"use strict";const m=["modelValue","options","id","iconElements"],y=t.defineComponent({name:"Treeselect",props:{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"},clearable:{type:Boolean,default:!0},searchable:{type:Boolean,default:!0},placeholder:{type:String,default:"Select..."},grouped:{type:Boolean,default:!0},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},isGroupedValue:{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},iconElements:{type:Object,default:()=>({})}},emits:["input","open","close","name-change","search","update:modelValue"],setup(e,{emit:n}){const o=t.ref(null),i=t.ref(null),a=t.ref(null),u=l=>{n("update:modelValue",l),n("input",l)},w=l=>n("open",l),T=l=>n("close",l),g=l=>n("name-change",l),b=l=>n("search",l),B=t.computed(()=>JSON.stringify(e.modelValue)),C=t.computed(()=>JSON.stringify(e.options)),E=t.computed(()=>JSON.stringify(e.iconElements));return t.watch(()=>e,l=>{if(a.value){const s=t.toRaw(a.value),r=t.toRaw(l);let f=!1;Object.keys(r).forEach(d=>{const N=r[d]===s[d];!m.includes(d)&&!N&&(s[d]=r[d],f=!0)}),f&&s.mount()}},{deep:!0}),t.watch(()=>B.value,()=>{a.value&&t.toRaw(a.value).updateValue(e.modelValue)}),t.watch(()=>e.id,l=>{if(a.value){const s=t.toRaw(a.value);(s.id||l)&&(s.id=l??"",s.mount())}}),t.watch(()=>C.value,()=>{if(a.value){const l=t.toRaw(a.value);l.options=e.options,l.mount()}}),t.watch(()=>E.value,()=>{if(a.value){const l=t.toRaw(a.value);l.iconElements={...l.iconElements,...e.iconElements},l.mount()}}),t.onMounted(()=>{if(!o.value)throw new Error("Treeselect container ref is not defined");a.value=new c({parentHtmlContainer:o.value,value:e.modelValue,options:e.options,openLevel:e.openLevel,appendToBody:e.appendToBody,alwaysOpen:e.alwaysOpen,showTags:e.showTags,tagsCountText:e.tagsCountText,clearable:e.clearable,searchable:e.searchable,placeholder:e.placeholder,grouped:e.grouped,disabled:e.disabled,emptyText:e.emptyText,staticList:e.staticList,id:e.id,ariaLabel:e.ariaLabel,isSingleSelect:e.isSingleSelect,showCount:e.showCount,isGroupedValue:e.isGroupedValue,disabledBranchNode:e.disabledBranchNode,direction:e.direction,expandSelected:e.expandSelected,saveScrollPosition:e.saveScrollPosition,isIndependentNodes:e.isIndependentNodes,inputCallback:u,openCallback:w,closeCallback:T,nameChangeCallback:g,searchCallback:b,listSlotHtmlComponent:i.value??null,iconElements:e.iconElements})}),t.onUnmounted(()=>{a.value&&t.toRaw(a.value).destroy()}),{treeselectContainerRef:o,treeselectAfterListSlotRef:i}}}),h=(e,n)=>{const o=e.__vccOpts||e;for(const[i,a]of n)o[i]=a;return o},p={ref:"treeselectAfterListSlotRef",class:"treeselect__after-list-slot"};function S(e,n,o,i,a,u){return t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createElementVNode("div",{class:t.normalizeClass(e.$attrs.class),ref:"treeselectContainerRef"},null,2),t.createElementVNode("div",p,[t.renderSlot(e.$slots,"default")],512)],64)}return h(y,[["render",S]])});

package.json

 {
   "name": "vue-treeselectjs",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Treeselect Vue Component",
@@ -5,0 +5,0 @@ "main": "./dist/vue-treeselectjs.umd.js",

README.md

@@ -31,3 +31,3 @@ # Treeselect JS Vue component
 ```
-<script src="https://cdn.jsdelivr.net/npm/vue-treeselectjs@0.3.1/dist/vue-treeselectjs.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-treeselectjs@0.4.0/dist/vue-treeselectjs.umd.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.9.2/dist/treeselectjs.css" />
@@ -153,3 +153,3 @@ ```
 ------------- | ------------- | -------------
-**value**  | Array[String \| Number] ([]) | An array of `value` from `options` prop. This value will be selected on load of the treeselect. The `value` changes if you check/uncheck checkboxes or remove tags from the input.
+**model-value**  | Array[String \| Number] ([]) | An array of `value` from `options` prop. This value will be selected on load of the treeselect. The `value` changes if you check/uncheck checkboxes or remove tags from the input.
 **options**  | Array[Object] ([]) | It is an array of objects ```{name: String, value: String, disabled?: Boolean, htmlAttr?: object, children: [] }```, where children are the same array of objects. Do not use duplicated `value` field. But you can use duplicated names. [Read more](#option-description).
@@ -203,2 +203,9 @@ **disabled** | Boolean (false) | List will be disabled.
 
+#### Slots
+Name  | Type (default) | Description
+------------- | ------------- | -------------
+**default** | undefined | The slot's content will be mounted at the end of the list.
+
+---
+
 ### Option description
@@ -205,0 +212,0 @@ Is is description of the one option of the [`options`](#core-props) prop:

No alert changes

Improved metrics

Total package byte prevSize

27809

increased by1.04%

Lines of code

489

increased by0.62%

Number of lines in readme file

226

increased by3.2%

No dependency changes