vue3-tree-vue
Version:
A Simple vue3 project for rendering items in a tree.
702 lines (700 loc) • 26.4 kB
JavaScript
;var vue=require('vue');function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}var _TREE_STATE_PROVIDER_INJECT_KEY = "VUE3_TREE_VUE_TREE_STATE";var _updateChildrenCheckState = function updateChildrenCheckState(parent, state) {
if (!parent.children) return;
parent.children.forEach(function (child) {
child.checked = parent.checked;
state.getNode(child.id).indeterminate = false;
_updateChildrenCheckState(child, state);
});
};
var _updateParentCheckState = function updateParentCheckState(child, state) {
if (!child) return;
var parent = state.getParent(child.id);
if (!parent) return;
var parentNode = state.getNode(parent.id);
if (parent.children) {
var isEveryChildChecked = parent.children.every(function (child) {
return child.checked;
});
var someUnChecked = parent.children.some(function (child) {
return !child.checked;
});
var someChecked = parent.children.some(function (child) {
return child.checked || state.getNode(child.id).indeterminate;
});
var intermediate = someChecked && someUnChecked;
if (isEveryChildChecked) {
parentNode.checked = true;
parentNode.indeterminate = false;
} else if (intermediate) {
parentNode.checked = false;
parentNode.indeterminate = true;
} else {
parentNode.checked = false;
parentNode.indeterminate = false;
}
}
_updateParentCheckState(parent, state);
};var script$1 = vue.defineComponent({
inheritAttrs: true,
props: {
item: {
type: Object,
required: true
},
isCheckable: {
type: Boolean
},
canRename: {
type: Boolean
},
checkboxStyle: {
type: String
},
lazyLoad: {
type: Boolean
},
hideGuideLines: {
type: Boolean
}
},
emits: ["on-rename", "onContextMenu"],
setup: function setup(props, _ref) {
var emit = _ref.emit,
attrs = _ref.attrs;
var checkbox = vue.ref();
var parent = vue.computed(function () {
return attrs.parent;
});
var treeState = vue.inject(_TREE_STATE_PROVIDER_INJECT_KEY);
var setCheckboxState = function setCheckboxState() {
if (checkbox.value && props.item.checked !== undefined) {
checkbox.value.checked = props.item.checked;
}
};
vue.onMounted(function () {
var _parent$value;
treeState.trackNode(props.item, parent.value);
if (props.item.checked) {
vue.nextTick(function () {
setCheckboxState();
_updateParentCheckState(props.item, treeState);
});
} else if (((_parent$value = parent.value) === null || _parent$value === void 0 ? void 0 : _parent$value.checked) !== undefined) {
props.item.checked = parent.value.checked;
}
});
var styles = vue.computed(function () {
var style = {
'selected-tree-item': !props.isCheckable && props.item.selected
};
if (props.item.styles) {
props.item.styles.forEach(function (s) {
return style[s] = true;
});
}
return style;
});
var updateCheckState = function updateCheckState() {
if (checkbox.value) {
props.item.checked = checkbox.value.checked;
props.item.indeterminate = false;
_updateParentCheckState(props.item, treeState);
_updateChildrenCheckState(props.item, treeState);
treeState.emitItemCheckedChange();
}
};
vue.watch(function () {
return props.item.indeterminate;
}, function () {
if (checkbox.value && props.item.indeterminate !== undefined) {
checkbox.value.indeterminate = props.item.indeterminate;
}
});
vue.watch(function () {
return props.item.checked;
}, function () {
return vue.nextTick(setCheckboxState);
});
vue.watch(function () {
return props.item.expanded;
}, function () {
return toggleExpand(false);
});
vue.watch(function () {
var _props$item$children;
return (_props$item$children = props.item.children) === null || _props$item$children === void 0 ? void 0 : _props$item$children.length;
}, function () {
var _props$item$children2;
return (_props$item$children2 = props.item.children) === null || _props$item$children2 === void 0 ? void 0 : _props$item$children2.forEach(function (child) {
return treeState === null || treeState === void 0 ? void 0 : treeState.trackNode(child, props.item);
});
});
var isRenaming = vue.ref(false);
var renameBox = vue.ref();
var beginRenaming = function beginRenaming() {
if (!props.canRename) return;
isRenaming.value = true;
vue.nextTick().then(function () {
var _renameBox$value;
return (_renameBox$value = renameBox.value) === null || _renameBox$value === void 0 ? void 0 : _renameBox$value.focus();
});
};
var finishRenaming = function finishRenaming() {
// v-on:blur and key(enter) can cause this to fire twice.
// this check protects against that.
if (!isRenaming) return;
emit("on-rename", props.item);
};
var toggleExpand = function toggleExpand() {
var shouldSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
/// `expanded` can be set programmatically. When this is the case `shouldSet` is false
/// see watch(props.item.expanded)
/// the component should not bother flipping the expanded or firing the
/// expanded/collapsed events.
if (shouldSet) {
props.item.expanded = !props.item.expanded;
}
if (props.item.expanded) {
treeState === null || treeState === void 0 || treeState.emitItemExpanded(props.item);
} else {
treeState === null || treeState === void 0 || treeState.emitItemCollapsed(props.item);
}
};
return {
styles: styles,
checkbox: checkbox,
parent: parent,
treeState: treeState,
isRenaming: isRenaming,
renameBox: renameBox,
updateCheckState: updateCheckState,
beginRenaming: beginRenaming,
finishRenaming: finishRenaming,
toggleExpand: toggleExpand
};
}
});var _hoisted_1$1 = {
key: 0,
class: "guide-line"
};
var _hoisted_2$1 = {
key: 0,
class: "tree-item__checkbox-area"
};
var _hoisted_3$1 = ["disabled"];
var _hoisted_4$1 = {
class: "d-flex"
};
var _hoisted_5 = {
class: "tiny_horizontal_margin"
};
var _hoisted_6 = {
class: "tiny_horizontal_margin"
};
var _hoisted_7 = {
key: 0,
for: "checkbox",
class: "pointer"
};
var _hoisted_8 = {
class: "tiny_horizontal_margin"
};
var _hoisted_9 = {
class: "tiny_horizontal_margin"
};
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", {
class: "d-flex align-items-center",
onContextmenu: _cache[8] || (_cache[8] = vue.withModifiers(function ($event) {
return _ctx.$emit('onContextMenu', {
item: _ctx.item,
event: $event
});
}, ["prevent"]))
}, [_ctx.parent != null && !_ctx.hideGuideLines ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)) : vue.createCommentVNode("", true), (_ctx.lazyLoad || _ctx.item.children && _ctx.item.children.length > 0) && (_ctx.item.collapsible == undefined || _ctx.item.collapsible == true) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
onClick: _cache[0] || (_cache[0] = function ($event) {
return _ctx.toggleExpand();
})
}, [vue.renderSlot(_ctx.$slots, "expander", vue.normalizeProps(vue.guardReactiveProps(_ctx.item)), function () {
return [vue.createElementVNode("span", {
class: vue.normalizeClass(["chevron-right", {
'rotate-90': _ctx.item.expanded
}])
}, null, 2)];
})])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
class: vue.normalizeClass(["pointer tree-item", _ctx.styles]),
style: {
"width": "100%"
}
}, [!_ctx.isRenaming ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
onDblclick: _cache[4] || (_cache[4] = function () {
return _ctx.beginRenaming && _ctx.beginRenaming.apply(_ctx, arguments);
})
}, [_ctx.isCheckable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [vue.createElementVNode("input", {
onContextmenu: _cache[1] || (_cache[1] = vue.withModifiers(function () {}, ["prevent"])),
onChange: _cache[2] || (_cache[2] = function () {
return _ctx.updateCheckState && _ctx.updateCheckState.apply(_ctx, arguments);
}),
type: "checkbox",
ref: "checkbox",
disabled: _ctx.item.disabled,
class: vue.normalizeClass(_ctx.checkboxStyle)
}, null, 42, _hoisted_3$1), vue.createElementVNode("div", _hoisted_4$1, [vue.createElementVNode("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "icon")]), vue.createElementVNode("div", _hoisted_6, [vue.renderSlot(_ctx.$slots, "prepend")])]), vue.renderSlot(_ctx.$slots, "name", {}, function () {
return [!_ctx.isRenaming ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_7, vue.toDisplayString(_ctx.item.name), 1)) : vue.createCommentVNode("", true)];
}), _cache[9] || (_cache[9] = vue.createTextVNode(" ")), vue.renderSlot(_ctx.$slots, "append")])) : (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: "d-flex",
onClick: _cache[3] || (_cache[3] = function ($event) {
var _ctx$treeState;
return (_ctx$treeState = _ctx.treeState) === null || _ctx$treeState === void 0 ? void 0 : _ctx$treeState.emitItemSelected(_ctx.item);
})
}, [vue.createElementVNode("div", _hoisted_8, [vue.renderSlot(_ctx.$slots, "icon")]), vue.createElementVNode("div", _hoisted_9, [vue.renderSlot(_ctx.$slots, "prepend")]), vue.renderSlot(_ctx.$slots, "name", {}, function () {
return [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.name), 1)];
}), _cache[10] || (_cache[10] = vue.createTextVNode(" ")), vue.renderSlot(_ctx.$slots, "append")]))], 32)) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
key: 1,
ref: "rename-box",
"onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
return _ctx.item.name = $event;
}),
onKeyup: _cache[6] || (_cache[6] = vue.withKeys(function () {
return _ctx.finishRenaming && _ctx.finishRenaming.apply(_ctx, arguments);
}, ["enter"])),
onBlur: _cache[7] || (_cache[7] = function () {
return _ctx.finishRenaming && _ctx.finishRenaming.apply(_ctx, arguments);
})
}, null, 544)), [[vue.vModelText, _ctx.item.name]])], 2)], 32);
}script$1.render = render$1;function useTreeViewItemMouseActions() {
var addHoverClass = function addHoverClass(event) {
var target = event.currentTarget;
if (target) {
target.classList.add('tree-item__drag-over');
}
};
var addRootHoverClass = function addRootHoverClass(event, isRootNode) {
if (!isRootNode) return;
var target = event.currentTarget;
if (target) {
target.classList.add('root__drag-over');
}
};
var removeRootHoverClass = function removeRootHoverClass(event, isRootNode) {
if (!isRootNode) return;
var target = event.currentTarget;
if (target) {
target.classList.remove('root__drag-over');
}
};
var removeHoverClass = function removeHoverClass(event) {
var target = event.currentTarget;
if (target) {
target.classList.remove('tree-item__drag-over');
}
};
var onDragNode = function onDragNode(item, event) {
if (item.disableDragAndDrop) return;
if (event.dataTransfer) {
event.dataTransfer.setData('text/plain', JSON.stringify(item));
}
};
var onDropNode = function onDropNode(dropHost, event, isDropValid, state) {
if (event.dataTransfer) {
removeHoverClass(event);
var droppedNode = JSON.parse(event.dataTransfer.getData('text/plain'));
if (!isDropValid) return;
if (dropHost && droppedNode.id === dropHost.id || droppedNode.disableDragAndDrop) {
return;
}
isDropValid(droppedNode, dropHost).then(function (canDrop) {
if (canDrop) {
state.detach(droppedNode.id);
if (dropHost && !dropHost.children) dropHost.children = [];
if (dropHost) dropHost.children.push(droppedNode);else state.attach(droppedNode); // Dropping into root
}
});
}
};
return {
addHoverClass: addHoverClass,
removeHoverClass: removeHoverClass,
onDragNode: onDragNode,
onDropNode: onDropNode,
addRootHoverClass: addRootHoverClass,
removeRootHoverClass: removeRootHoverClass
};
}function uuidv4() {
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, function (c) {
return (Number.parseFloat(c) ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> Number.parseFloat(c) / 4).toString(16);
});
}
// TODO: Watch children length: When node is deleted: Remove from graph.
/**
* Initialises the root state of a tree.
* @param itemSelectedEventHandler A callback when an item is selected.
* @param itemSelectedEventHandler A callback when an item is checked.
* @returns
*/
function useGraph(items, itemSelectedEventHandler, itemCheckedEventHandler, itemExpandedEventHandler, itemCollapsedEventHandler) {
var childParentLookUp = {};
var nodeLookUp = {};
var getParent = function getParent(childId) {
return childParentLookUp[childId];
};
var trackNode = function trackNode(node, parentNode) {
if (!node.id) {
node.id = uuidv4();
}
nodeLookUp[node.id] = node;
childParentLookUp[node.id] = parentNode;
};
var detach = function detach(id) {
var parent = childParentLookUp[id];
if (parent == null) {
items.value = items.value.filter(function (item) {
return item.id != id;
});
} else {
var _parent$children;
parent.children = (_parent$children = parent.children) === null || _parent$children === void 0 ? void 0 : _parent$children.filter(function (child) {
return child.id != id;
});
}
delete childParentLookUp[id];
};
var attach = function attach(item) {
items.value.push(item);
trackNode(item, undefined);
};
var emitItemSelected = function emitItemSelected(node) {
if (node.disabled === true) {
return;
}
itemSelectedEventHandler(node);
Object.values(nodeLookUp).forEach(function (node) {
return node.selected = false;
});
node.selected = true;
};
var emitItemCheckedChange = function emitItemCheckedChange() {
return itemCheckedEventHandler(Object.values(nodeLookUp).filter(function (node) {
return node.checked && !node.disabled;
}));
};
var getNode = function getNode(id) {
return nodeLookUp[id];
};
return {
getNode: getNode,
getParent: getParent,
trackNode: trackNode,
detach: detach,
emitItemCheckedChange: emitItemCheckedChange,
emitItemSelected: emitItemSelected,
emitItemExpanded: itemExpandedEventHandler,
emitItemCollapsed: itemCollapsedEventHandler,
attach: attach
};
}var script = vue.defineComponent({
name: 'tree-view',
props: {
items: {
type: Array,
required: true,
default: function _default() {
return [];
}
},
isCheckable: {
type: Boolean
},
hideGuideLines: {
type: Boolean,
default: false
},
onDropValidator: {
type: Function
},
treeState: {
type: Object
},
checkboxStyle: {
type: String
},
lazyLoad: {
type: Boolean
}
},
components: {
'treeview-item': script$1
},
emits: ['onContextMenu', 'onSelect', 'onCheck', 'onExpand', 'onCollapse'],
setup: function setup(props, _ref) {
var emit = _ref.emit,
attrs = _ref.attrs;
var reactiveItems = vue.ref([]);
vue.watch(function () {
return props.items;
}, function () {
return reactiveItems.value = props.items;
}, {
immediate: true
});
var parent = vue.computed(function () {
return attrs.parent;
});
var internalItems = vue.computed(function () {
return reactiveItems.value.map(function (item) {
return item;
});
});
var treeState = vue.ref();
// Create a tree state object for only root nodes.
treeState.value = vue.inject(_TREE_STATE_PROVIDER_INJECT_KEY, undefined);
if (!treeState.value) {
treeState.value = useGraph(reactiveItems, function (selectedItem) {
return emit('onSelect', selectedItem);
}, function (checkedItems) {
return emit('onCheck', checkedItems);
}, function (expandedItem) {
return emit('onExpand', expandedItem);
}, function (collapsedItem) {
return emit('onCollapse', collapsedItem);
});
vue.provide(_TREE_STATE_PROVIDER_INJECT_KEY, treeState.value);
}
return _objectSpread2(_objectSpread2({}, useTreeViewItemMouseActions()), {}, {
parent: parent,
internalItems: internalItems,
treeState: treeState
});
}
});var _hoisted_1 = {
class: "vue3-tree-vue"
};
var _hoisted_2 = ["draggable"];
var _hoisted_3 = ["id"];
var _hoisted_4 = {
style: {
"list-style": "none"
}
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
var _component_treeview_item = vue.resolveComponent("treeview-item");
var _component_tree_view = vue.resolveComponent("tree-view");
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [vue.createElementVNode("ul", {
id: "explorer",
class: vue.normalizeClass(["explorer tree-item-node-parent", {
'no-guide': _ctx.hideGuideLines
}]),
draggable: _ctx.onDropValidator != undefined,
onDragover: [_cache[3] || (_cache[3] = vue.withModifiers(function () {}, ["stop", "prevent"])), _cache[5] || (_cache[5] = vue.withModifiers(function ($event) {
return _ctx.addRootHoverClass($event, _ctx.parent == null);
}, ["stop"]))],
onDragenter: _cache[4] || (_cache[4] = vue.withModifiers(function () {}, ["stop", "prevent"])),
onDragleave: _cache[6] || (_cache[6] = vue.withModifiers(function ($event) {
return _ctx.removeRootHoverClass($event, _ctx.parent == null);
}, ["stop"])),
onDrop: _cache[7] || (_cache[7] = vue.withModifiers(function ($event) {
_ctx.onDropNode(undefined, $event, _ctx.onDropValidator, _ctx.treeState);
_ctx.removeRootHoverClass($event, _ctx.parent == null);
}, ["prevent", "stop"]))
}, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.internalItems, function (treeViewItem) {
return vue.openBlock(), vue.createElementBlock("li", {
key: treeViewItem.id,
id: treeViewItem.id,
class: vue.normalizeClass(["tree-item-node", {
'tree-item-node-checkable': _ctx.isCheckable
}])
}, [vue.createVNode(_component_treeview_item, {
class: "pointer tree-view-item",
item: treeViewItem,
parent: _ctx.parent,
hideGuideLines: _ctx.hideGuideLines,
onDragover: [_cache[0] || (_cache[0] = vue.withModifiers(function () {}, ["stop", "prevent"])), vue.withModifiers(_ctx.addHoverClass, ["stop"])],
onDragenter: _cache[1] || (_cache[1] = vue.withModifiers(function () {}, ["stop", "prevent"])),
draggable: _ctx.onDropValidator != undefined,
onDragstart: vue.withModifiers(function ($event) {
return _ctx.onDragNode(treeViewItem, $event);
}, ["stop"]),
onDragleave: vue.withModifiers(_ctx.removeHoverClass, ["stop"]),
onDrop: vue.withModifiers(function ($event) {
return _ctx.onDropNode(treeViewItem, $event, _ctx.onDropValidator, _ctx.treeState);
}, ["prevent", "stop"]),
checkboxStyle: _ctx.checkboxStyle,
isCheckable: _ctx.isCheckable,
treeState: _ctx.treeState,
lazyLoad: _ctx.lazyLoad,
onContextmenu: vue.withModifiers(function ($event) {
return _ctx.$emit('onContextMenu', {
item: treeViewItem,
event: $event
});
}, ["prevent"])
}, {
icon: vue.withCtx(function () {
return [vue.renderSlot(_ctx.$slots, "item-prepend-icon", vue.mergeProps({
ref_for: true
}, treeViewItem))];
}),
prepend: vue.withCtx(function () {
return [vue.renderSlot(_ctx.$slots, "item-prepend", vue.mergeProps({
ref_for: true
}, treeViewItem))];
}),
expander: vue.withCtx(function () {
return [vue.renderSlot(_ctx.$slots, "item-expander", vue.mergeProps({
ref_for: true
}, treeViewItem))];
}),
name: vue.withCtx(function () {
return [vue.renderSlot(_ctx.$slots, "item-name", vue.mergeProps({
ref_for: true
}, treeViewItem))];
}),
append: vue.withCtx(function () {
return [vue.renderSlot(_ctx.$slots, "item-append", vue.mergeProps({
ref_for: true
}, treeViewItem))];
}),
_: 2
}, 1032, ["item", "parent", "hideGuideLines", "draggable", "onDragstart", "onDragleave", "onDrop", "onDragover", "checkboxStyle", "isCheckable", "treeState", "lazyLoad", "onContextmenu"]), treeViewItem.children && treeViewItem.children.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(["node-child", {
'nested': _ctx.parent != null,
'root': _ctx.parent == undefined,
'hide': !treeViewItem.expanded,
'hide-guidelines': _ctx.hideGuideLines
}])
}, [vue.createVNode(_component_tree_view, {
items: treeViewItem.children,
hideGuideLines: _ctx.hideGuideLines,
isNested: true,
onDropValidator: _ctx.onDropValidator,
lazyLoad: _ctx.lazyLoad,
checkboxStyle: _ctx.checkboxStyle,
parent: treeViewItem,
isCheckable: _ctx.isCheckable,
onOnContextMenu: _cache[2] || (_cache[2] = function ($event) {
return _ctx.$emit('onContextMenu', $event);
})
}, vue.createSlots({
_: 2
}, [vue.renderList(_ctx.$slots, function (_, slot) {
return {
name: slot,
fn: vue.withCtx(function (props) {
return [vue.renderSlot(_ctx.$slots, slot, vue.mergeProps({
ref_for: true
}, props))];
})
};
})]), 1032, ["items", "hideGuideLines", "onDropValidator", "lazyLoad", "checkboxStyle", "parent", "isCheckable"])], 2)) : vue.createCommentVNode("", true)], 10, _hoisted_3);
}), 128))], 42, _hoisted_2), vue.createElementVNode("li", _hoisted_4, [_ctx.parent ? vue.renderSlot(_ctx.$slots, "child-append", vue.normalizeProps(vue.mergeProps({
key: 0
}, _ctx.parent))) : vue.createCommentVNode("", true)])]);
}script.render = render;var component = (function () {
var installable = script;
installable.install = function (app) {
app.component('vue3-tree-vue', installable);
};
return installable;
})();var namedExports=/*#__PURE__*/Object.freeze({__proto__:null,'default':component});// Attach named exports directly to component. IIFE/CJS will
// only expose one global var, with named exports exposed as properties of
// that global var (eg. plugin.namedExport)
Object.entries(namedExports).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
exportName = _ref2[0],
exported = _ref2[1];
if (exportName !== 'default') component[exportName] = exported;
});module.exports=component;