vue3-tree-vue/dist/vue3-tree-vue.min.js

A Simple vue3 project for rendering items in a tree.

var Vue3TreeVue=function(e){"use strict";function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function n(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?r(Object(o),!0).forEach((function(t){n(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):r(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function i(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,a,l=[],c=!0,d=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){d=!0,o=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(d)throw o}}return l}}(e,n)||function(e,n){if(e){if("string"==typeof e)return t(e,n);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var a="VUE3_TREE_VUE_TREE_STATE",l=function(e,t){e.children&&e.children.forEach((function(n){n.checked=e.checked,t.getNode(n.id).indeterminate=!1,l(n,t)}))},c=function(e,t){if(e){var n=t.getParent(e.id);if(n){var r=t.getNode(n.id);if(n.children){var o=n.children.every((function(e){return e.checked})),i=n.children.some((function(e){return!e.checked})),a=n.children.some((function(e){return e.checked||t.getNode(e.id).indeterminate})),l=a&&i;o?(r.checked=!0,r.indeterminate=!1):l?(r.checked=!1,r.indeterminate=!0):(r.checked=!1,r.indeterminate=!1)}c(n,t)}}},d=e.defineComponent({inheritAttrs:!0,props:{item:{type:Object,required:!0},isCheckable:{type:Boolean},canRename:{type:Boolean},checkboxStyle:{type:String},lazyLoad:{type:Boolean},hideGuideLines:{type:Boolean}},emits:["on-rename","onContextMenu"],setup:function(t,n){var r=n.emit,o=n.attrs,i=e.ref(),d=e.computed((function(){return o.parent})),u=e.inject(a),s=function(){i.value&&void 0!==t.item.checked&&(i.value.checked=t.item.checked)};e.onMounted((function(){var n;u.trackNode(t.item,d.value),t.item.checked?e.nextTick((function(){s(),c(t.item,u)})):void 0!==(null===(n=d.value)||void 0===n?void 0:n.checked)&&(t.item.checked=d.value.checked)}));var m=e.computed((function(){var e={"selected-tree-item":!t.isCheckable&&t.item.selected};return t.item.styles&&t.item.styles.forEach((function(t){return e[t]=!0})),e}));e.watch((function(){return t.item.indeterminate}),(function(){i.value&&void 0!==t.item.indeterminate&&(i.value.indeterminate=t.item.indeterminate)})),e.watch((function(){return t.item.checked}),(function(){return e.nextTick(s)})),e.watch((function(){return t.item.expanded}),(function(){return h(!1)})),e.watch((function(){var e;return null===(e=t.item.children)||void 0===e?void 0:e.length}),(function(){var e;return null===(e=t.item.children)||void 0===e?void 0:e.forEach((function(e){return null==u?void 0:u.trackNode(e,t.item)}))}));var f=e.ref(!1),p=e.ref(),h=function(){(!(arguments.length>0&&void 0!==arguments[0])||arguments[0])&&(t.item.expanded=!t.item.expanded),t.item.expanded?null==u||u.emitItemExpanded(t.item):null==u||u.emitItemCollapsed(t.item)};return{styles:m,checkbox:i,parent:d,treeState:u,isRenaming:f,renameBox:p,updateCheckState:function(){i.value&&(t.item.checked=i.value.checked,t.item.indeterminate=!1,c(t.item,u),l(t.item,u),u.emitItemCheckedChange())},beginRenaming:function(){t.canRename&&(f.value=!0,e.nextTick().then((function(){var e;return null===(e=p.value)||void 0===e?void 0:e.focus()})))},finishRenaming:function(){f&&r("on-rename",t.item)},toggleExpand:h}}}),u={key:0,class:"guide-line"},s={key:0,class:"tree-item__checkbox-area"},m=["disabled"],f={class:"d-flex"},p={class:"tiny_horizontal_margin"},h={class:"tiny_horizontal_margin"},v={key:0,for:"checkbox",class:"pointer"},g={class:"tiny_horizontal_margin"},y={class:"tiny_horizontal_margin"};function k(e,t,n,r,o){var i={},a={},l=function(e,t){e.id||(e.id="10000000-1000-4000-8000-100000000000".replace(/[018]/g,(function(e){return(Number.parseFloat(e)^crypto.getRandomValues(new Uint8Array(1))[0]&15>>Number.parseFloat(e)/4).toString(16)}))),a[e.id]=e,i[e.id]=t};return{getNode:function(e){return a[e]},getParent:function(e){return i[e]},trackNode:l,detach:function(t){var n,r=i[t];null==r?e.value=e.value.filter((function(e){return e.id!=t})):r.children=null===(n=r.children)||void 0===n?void 0:n.filter((function(e){return e.id!=t}));delete i[t]},emitItemCheckedChange:function(){return n(Object.values(a).filter((function(e){return e.checked&&!e.disabled})))},emitItemSelected:function(e){!0!==e.disabled&&(t(e),Object.values(a).forEach((function(e){return e.selected=!1})),e.selected=!0)},emitItemExpanded:r,emitItemCollapsed:o,attach:function(t){e.value.push(t),l(t,void 0)}}}d.render=function(t,n,r,o,i,a){return e.openBlock(),e.createElementBlock("div",{class:"d-flex align-items-center",onContextmenu:n[8]||(n[8]=e.withModifiers((function(e){return t.$emit("onContextMenu",{item:t.item,event:e})}),["prevent"]))},[null==t.parent||t.hideGuideLines?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",u)),!(t.lazyLoad||t.item.children&&t.item.children.length>0)||null!=t.item.collapsible&&1!=t.item.collapsible?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:1,onClick:n[0]||(n[0]=function(e){return t.toggleExpand()})},[e.renderSlot(t.$slots,"expander",e.normalizeProps(e.guardReactiveProps(t.item)),(function(){return[e.createElementVNode("span",{class:e.normalizeClass(["chevron-right",{"rotate-90":t.item.expanded}])},null,2)]}))])),e.createElementVNode("div",{class:e.normalizeClass(["pointer tree-item",t.styles]),style:{width:"100%"}},[t.isRenaming?e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:1,ref:"rename-box","onUpdate:modelValue":n[5]||(n[5]=function(e){return t.item.name=e}),onKeyup:n[6]||(n[6]=e.withKeys((function(){return t.finishRenaming&&t.finishRenaming.apply(t,arguments)}),["enter"])),onBlur:n[7]||(n[7]=function(){return t.finishRenaming&&t.finishRenaming.apply(t,arguments)})},null,544)),[[e.vModelText,t.item.name]]):(e.openBlock(),e.createElementBlock("div",{key:0,onDblclick:n[4]||(n[4]=function(){return t.beginRenaming&&t.beginRenaming.apply(t,arguments)})},[t.isCheckable?(e.openBlock(),e.createElementBlock("div",s,[e.createElementVNode("input",{onContextmenu:n[1]||(n[1]=e.withModifiers((function(){}),["prevent"])),onChange:n[2]||(n[2]=function(){return t.updateCheckState&&t.updateCheckState.apply(t,arguments)}),type:"checkbox",ref:"checkbox",disabled:t.item.disabled,class:e.normalizeClass(t.checkboxStyle)},null,42,m),e.createElementVNode("div",f,[e.createElementVNode("div",p,[e.renderSlot(t.$slots,"icon")]),e.createElementVNode("div",h,[e.renderSlot(t.$slots,"prepend")])]),e.renderSlot(t.$slots,"name",{},(function(){return[t.isRenaming?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("label",v,e.toDisplayString(t.item.name),1))]})),n[9]||(n[9]=e.createTextVNode("   ")),e.renderSlot(t.$slots,"append")])):(e.openBlock(),e.createElementBlock("div",{key:1,class:"d-flex",onClick:n[3]||(n[3]=function(e){var n;return null===(n=t.treeState)||void 0===n?void 0:n.emitItemSelected(t.item)})},[e.createElementVNode("div",g,[e.renderSlot(t.$slots,"icon")]),e.createElementVNode("div",y,[e.renderSlot(t.$slots,"prepend")]),e.renderSlot(t.$slots,"name",{},(function(){return[e.createElementVNode("span",null,e.toDisplayString(t.item.name),1)]})),n[10]||(n[10]=e.createTextVNode("   ")),e.renderSlot(t.$slots,"append")]))],32))],2)],32)};var b=e.defineComponent({name:"tree-view",props:{items:{type:Array,required:!0,default:function(){return[]}},isCheckable:{type:Boolean},hideGuideLines:{type:Boolean,default:!1},onDropValidator:{type:Function},treeState:{type:Object},checkboxStyle:{type:String},lazyLoad:{type:Boolean}},components:{"treeview-item":d},emits:["onContextMenu","onSelect","onCheck","onExpand","onCollapse"],setup:function(t,n){var r=n.emit,i=n.attrs,l=e.ref([]);e.watch((function(){return t.items}),(function(){return l.value=t.items}),{immediate:!0});var c,d=e.computed((function(){return i.parent})),u=e.computed((function(){return l.value.map((function(e){return e}))})),s=e.ref();return s.value=e.inject(a,void 0),s.value||(s.value=k(l,(function(e){return r("onSelect",e)}),(function(e){return r("onCheck",e)}),(function(e){return r("onExpand",e)}),(function(e){return r("onCollapse",e)})),e.provide(a,s.value)),o(o({},{addHoverClass:function(e){var t=e.currentTarget;t&&t.classList.add("tree-item__drag-over")},removeHoverClass:c=function(e){var t=e.currentTarget;t&&t.classList.remove("tree-item__drag-over")},onDragNode:function(e,t){e.disableDragAndDrop||t.dataTransfer&&t.dataTransfer.setData("text/plain",JSON.stringify(e))},onDropNode:function(e,t,n,r){if(t.dataTransfer){c(t);var o=JSON.parse(t.dataTransfer.getData("text/plain"));if(!n)return;if(e&&o.id===e.id||o.disableDragAndDrop)return;n(o,e).then((function(t){t&&(r.detach(o.id),e&&!e.children&&(e.children=[]),e?e.children.push(o):r.attach(o))}))}},addRootHoverClass:function(e,t){if(t){var n=e.currentTarget;n&&n.classList.add("root__drag-over")}},removeRootHoverClass:function(e,t){if(t){var n=e.currentTarget;n&&n.classList.remove("root__drag-over")}}}),{},{parent:d,internalItems:u,treeState:s})}}),C={class:"vue3-tree-vue"},x=["draggable"],S=["id"],w={style:{"list-style":"none"}};b.render=function(t,n,r,o,i,a){var l=e.resolveComponent("treeview-item"),c=e.resolveComponent("tree-view");return e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("ul",{id:"explorer",class:e.normalizeClass(["explorer tree-item-node-parent",{"no-guide":t.hideGuideLines}]),draggable:null!=t.onDropValidator,onDragover:[n[3]||(n[3]=e.withModifiers((function(){}),["stop","prevent"])),n[5]||(n[5]=e.withModifiers((function(e){return t.addRootHoverClass(e,null==t.parent)}),["stop"]))],onDragenter:n[4]||(n[4]=e.withModifiers((function(){}),["stop","prevent"])),onDragleave:n[6]||(n[6]=e.withModifiers((function(e){return t.removeRootHoverClass(e,null==t.parent)}),["stop"])),onDrop:n[7]||(n[7]=e.withModifiers((function(e){t.onDropNode(void 0,e,t.onDropValidator,t.treeState),t.removeRootHoverClass(e,null==t.parent)}),["prevent","stop"]))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.internalItems,(function(r){return e.openBlock(),e.createElementBlock("li",{key:r.id,id:r.id,class:e.normalizeClass(["tree-item-node",{"tree-item-node-checkable":t.isCheckable}])},[e.createVNode(l,{class:"pointer tree-view-item",item:r,parent:t.parent,hideGuideLines:t.hideGuideLines,onDragover:[n[0]||(n[0]=e.withModifiers((function(){}),["stop","prevent"])),e.withModifiers(t.addHoverClass,["stop"])],onDragenter:n[1]||(n[1]=e.withModifiers((function(){}),["stop","prevent"])),draggable:null!=t.onDropValidator,onDragstart:e.withModifiers((function(e){return t.onDragNode(r,e)}),["stop"]),onDragleave:e.withModifiers(t.removeHoverClass,["stop"]),onDrop:e.withModifiers((function(e){return t.onDropNode(r,e,t.onDropValidator,t.treeState)}),["prevent","stop"]),checkboxStyle:t.checkboxStyle,isCheckable:t.isCheckable,treeState:t.treeState,lazyLoad:t.lazyLoad,onContextmenu:e.withModifiers((function(e){return t.$emit("onContextMenu",{item:r,event:e})}),["prevent"])},{icon:e.withCtx((function(){return[e.renderSlot(t.$slots,"item-prepend-icon",e.mergeProps({ref_for:!0},r))]})),prepend:e.withCtx((function(){return[e.renderSlot(t.$slots,"item-prepend",e.mergeProps({ref_for:!0},r))]})),expander:e.withCtx((function(){return[e.renderSlot(t.$slots,"item-expander",e.mergeProps({ref_for:!0},r))]})),name:e.withCtx((function(){return[e.renderSlot(t.$slots,"item-name",e.mergeProps({ref_for:!0},r))]})),append:e.withCtx((function(){return[e.renderSlot(t.$slots,"item-append",e.mergeProps({ref_for:!0},r))]})),_:2},1032,["item","parent","hideGuideLines","draggable","onDragstart","onDragleave","onDrop","onDragover","checkboxStyle","isCheckable","treeState","lazyLoad","onContextmenu"]),r.children&&r.children.length>0?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["node-child",{nested:null!=t.parent,root:null==t.parent,hide:!r.expanded,"hide-guidelines":t.hideGuideLines}])},[e.createVNode(c,{items:r.children,hideGuideLines:t.hideGuideLines,isNested:!0,onDropValidator:t.onDropValidator,lazyLoad:t.lazyLoad,checkboxStyle:t.checkboxStyle,parent:r,isCheckable:t.isCheckable,onOnContextMenu:n[2]||(n[2]=function(e){return t.$emit("onContextMenu",e)})},e.createSlots({_:2},[e.renderList(t.$slots,(function(n,r){return{name:r,fn:e.withCtx((function(n){return[e.renderSlot(t.$slots,r,e.mergeProps({ref_for:!0},n))]}))}}))]),1032,["items","hideGuideLines","onDropValidator","lazyLoad","checkboxStyle","parent","isCheckable"])],2)):e.createCommentVNode("",!0)],10,S)})),128))],42,x),e.createElementVNode("li",w,[t.parent?e.renderSlot(t.$slots,"child-append",e.normalizeProps(e.mergeProps({key:0},t.parent))):e.createCommentVNode("",!0)])])};var E,D=((E=b).install=function(e){e.component("vue3-tree-vue",E)},E),N=Object.freeze({__proto__:null,default:D});return Object.entries(N).forEach((function(e){var t=i(e,2),n=t[0],r=t[1];"default"!==n&&(D[n]=r)})),D}(Vue);