You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
10 KiB
1 lines
10 KiB
{"ast":null,"code":"import { defineComponent, inject, computed, openBlock, createElementBlock, normalizeClass, unref, withModifiers, createElementVNode, normalizeStyle, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, createVNode } from 'vue';\nimport { ElIcon } from '../../icon/index.mjs';\nimport { CaretRight } from '@element-plus/icons-vue';\nimport { ElCheckbox } from '../../checkbox/index.mjs';\nimport ElNodeContent from './tree-node-content.mjs';\nimport { treeNodeProps, treeNodeEmits, ROOT_TREE_INJECTION_KEY, NODE_CONTEXTMENU } from './virtual-tree.mjs';\nimport _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';\nimport { useNamespace } from '../../../hooks/use-namespace/index.mjs';\nimport { isFunction, isString } from '@vue/shared';\nconst __default__ = defineComponent({\n name: \"ElTreeNode\"\n});\nconst _sfc_main = /* @__PURE__ */defineComponent({\n ...__default__,\n props: treeNodeProps,\n emits: treeNodeEmits,\n setup(__props, {\n emit\n }) {\n const props = __props;\n const tree = inject(ROOT_TREE_INJECTION_KEY);\n const ns = useNamespace(\"tree\");\n const indent = computed(() => {\n var _a;\n return (_a = tree == null ? void 0 : tree.props.indent) != null ? _a : 16;\n });\n const icon = computed(() => {\n var _a;\n return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : CaretRight;\n });\n const getNodeClass = node => {\n const nodeClassFunc = tree == null ? void 0 : tree.props.props.class;\n if (!nodeClassFunc) return {};\n let className;\n if (isFunction(nodeClassFunc)) {\n const {\n data\n } = node;\n className = nodeClassFunc(data, node);\n } else {\n className = nodeClassFunc;\n }\n return isString(className) ? {\n [className]: true\n } : className;\n };\n const handleClick = e => {\n emit(\"click\", props.node, e);\n };\n const handleDrop = e => {\n emit(\"drop\", props.node, e);\n };\n const handleExpandIconClick = () => {\n emit(\"toggle\", props.node);\n };\n const handleCheckChange = value => {\n emit(\"check\", props.node, value);\n };\n const handleContextMenu = event => {\n var _a, _b, _c, _d;\n if ((_c = (_b = (_a = tree == null ? void 0 : tree.instance) == null ? void 0 : _a.vnode) == null ? void 0 : _b.props) == null ? void 0 : _c[\"onNodeContextmenu\"]) {\n event.stopPropagation();\n event.preventDefault();\n }\n tree == null ? void 0 : tree.ctx.emit(NODE_CONTEXTMENU, event, (_d = props.node) == null ? void 0 : _d.data, props.node);\n };\n return (_ctx, _cache) => {\n var _a, _b, _c;\n return openBlock(), createElementBlock(\"div\", {\n ref: \"node$\",\n class: normalizeClass([unref(ns).b(\"node\"), unref(ns).is(\"expanded\", _ctx.expanded), unref(ns).is(\"current\", _ctx.current), unref(ns).is(\"focusable\", !_ctx.disabled), unref(ns).is(\"checked\", !_ctx.disabled && _ctx.checked), getNodeClass(_ctx.node)]),\n role: \"treeitem\",\n tabindex: \"-1\",\n \"aria-expanded\": _ctx.expanded,\n \"aria-disabled\": _ctx.disabled,\n \"aria-checked\": _ctx.checked,\n \"data-key\": (_a = _ctx.node) == null ? void 0 : _a.key,\n onClick: withModifiers(handleClick, [\"stop\"]),\n onContextmenu: handleContextMenu,\n onDragover: withModifiers(() => {}, [\"prevent\"]),\n onDragenter: withModifiers(() => {}, [\"prevent\"]),\n onDrop: withModifiers(handleDrop, [\"stop\"])\n }, [createElementVNode(\"div\", {\n class: normalizeClass(unref(ns).be(\"node\", \"content\")),\n style: normalizeStyle({\n paddingLeft: `${(_ctx.node.level - 1) * unref(indent)}px`,\n height: _ctx.itemSize + \"px\"\n })\n }, [unref(icon) ? (openBlock(), createBlock(unref(ElIcon), {\n key: 0,\n class: normalizeClass([unref(ns).is(\"leaf\", !!((_b = _ctx.node) == null ? void 0 : _b.isLeaf)), unref(ns).is(\"hidden\", _ctx.hiddenExpandIcon), {\n expanded: !((_c = _ctx.node) == null ? void 0 : _c.isLeaf) && _ctx.expanded\n }, unref(ns).be(\"node\", \"expand-icon\")]),\n onClick: withModifiers(handleExpandIconClick, [\"stop\"])\n }, {\n default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(icon))))]),\n _: 1\n }, 8, [\"class\", \"onClick\"])) : createCommentVNode(\"v-if\", true), _ctx.showCheckbox ? (openBlock(), createBlock(unref(ElCheckbox), {\n key: 1,\n \"model-value\": _ctx.checked,\n indeterminate: _ctx.indeterminate,\n disabled: _ctx.disabled,\n onChange: handleCheckChange,\n onClick: withModifiers(() => {}, [\"stop\"])\n }, null, 8, [\"model-value\", \"indeterminate\", \"disabled\", \"onClick\"])) : createCommentVNode(\"v-if\", true), createVNode(unref(ElNodeContent), {\n node: _ctx.node\n }, null, 8, [\"node\"])], 6)], 42, [\"aria-expanded\", \"aria-disabled\", \"aria-checked\", \"data-key\", \"onClick\", \"onDragover\", \"onDragenter\", \"onDrop\"]);\n };\n }\n});\nvar ElTreeNode = /* @__PURE__ */_export_sfc(_sfc_main, [[\"__file\", \"tree-node.vue\"]]);\nexport { ElTreeNode as default };","map":{"version":3,"names":["name","tree","inject","ROOT_TREE_INJECTION_KEY","ns","useNamespace","indent","computed","_a","props","icon","CaretRight","getNodeClass","node","nodeClassFunc","class","className","isFunction","data","isString","handleClick","e","emit","handleDrop","handleExpandIconClick","handleCheckChange","value"],"sources":["../../../../../../packages/components/tree-v2/src/tree-node.vue"],"sourcesContent":["<template>\n <div\n ref=\"node$\"\n :class=\"[\n ns.b('node'),\n ns.is('expanded', expanded),\n ns.is('current', current),\n ns.is('focusable', !disabled),\n ns.is('checked', !disabled && checked),\n getNodeClass(node),\n ]\"\n role=\"treeitem\"\n tabindex=\"-1\"\n :aria-expanded=\"expanded\"\n :aria-disabled=\"disabled\"\n :aria-checked=\"checked\"\n :data-key=\"node?.key\"\n @click.stop=\"handleClick\"\n @contextmenu=\"handleContextMenu\"\n @dragover.prevent\n @dragenter.prevent\n @drop.stop=\"handleDrop\"\n >\n <div\n :class=\"ns.be('node', 'content')\"\n :style=\"{\n paddingLeft: `${(node.level - 1) * indent}px`,\n height: itemSize + 'px',\n }\"\n >\n <el-icon\n v-if=\"icon\"\n :class=\"[\n ns.is('leaf', !!node?.isLeaf),\n ns.is('hidden', hiddenExpandIcon),\n {\n expanded: !node?.isLeaf && expanded,\n },\n ns.be('node', 'expand-icon'),\n ]\"\n @click.stop=\"handleExpandIconClick\"\n >\n <component :is=\"icon\" />\n </el-icon>\n <el-checkbox\n v-if=\"showCheckbox\"\n :model-value=\"checked\"\n :indeterminate=\"indeterminate\"\n :disabled=\"disabled\"\n @change=\"handleCheckChange\"\n @click.stop\n />\n <el-node-content :node=\"node\" />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject } from 'vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { CaretRight } from '@element-plus/icons-vue'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isFunction, isString } from '@element-plus/utils'\nimport ElNodeContent from './tree-node-content'\nimport {\n NODE_CONTEXTMENU,\n ROOT_TREE_INJECTION_KEY,\n treeNodeEmits,\n treeNodeProps,\n} from './virtual-tree'\nimport type { CheckboxValueType } from '@element-plus/components/checkbox'\nimport type { TreeNode } from './types'\n\ndefineOptions({\n name: 'ElTreeNode',\n})\n\nconst props = defineProps(treeNodeProps)\nconst emit = defineEmits(treeNodeEmits)\n\nconst tree = inject(ROOT_TREE_INJECTION_KEY)\nconst ns = useNamespace('tree')\n\nconst indent = computed(() => tree?.props.indent ?? 16)\nconst icon = computed(() => tree?.props.icon ?? CaretRight)\n\nconst getNodeClass = (node: TreeNode) => {\n const nodeClassFunc = tree?.props.props.class\n if (!nodeClassFunc) return {}\n\n let className\n if (isFunction(nodeClassFunc)) {\n const { data } = node\n className = nodeClassFunc(data, node)\n } else {\n className = nodeClassFunc\n }\n\n return isString(className) ? { [className]: true } : className\n}\n\nconst handleClick = (e: MouseEvent) => {\n emit('click', props.node, e)\n}\nconst handleDrop = (e: DragEvent) => {\n emit('drop', props.node, e)\n}\nconst handleExpandIconClick = () => {\n emit('toggle', props.node)\n}\nconst handleCheckChange = (value: CheckboxValueType) => {\n emit('check', props.node, value)\n}\n\nconst handleContextMenu = (event: Event) => {\n if (tree?.instance?.vnode?.props?.['onNodeContextmenu']) {\n event.stopPropagation()\n event.preventDefault()\n }\n tree?.ctx.emit(NODE_CONTEXTMENU, event, props.node?.data, props.node)\n}\n</script>\n"],"mappings":";;;;;;;;;mCA0Ec;EACZA,IAAM;AACR;;;;;;;;;IAKM,MAAAC,IAAA,GAAOC,MAAA,CAAOC,uBAAuB;IACrC,MAAAC,EAAA,GAAKC,YAAA,CAAa,MAAM;IAE9B,MAAMC,MAAA,GAASC,QAAS,OAAM;MAC9B,IAAMC,EAAA;MAEA,QAAAA,EAAA,GAAAP,IAAA,IAAmC,gBAAAA,IAAA,CAAAQ,KAAA,CAAAH,MAAA,YAAAE,EAAA;IACvC,CAAM;IACF,MAAAE,IAAgB,GAAAH,QAAA;MAEhB,IAAAC,EAAA;MACA,QAAAA,EAAA,GAAAP,IAAA,WAAwB,KAAG,IAAAA,IAAA,CAAAQ,KAAA,CAAAC,IAAA,YAAAF,EAAA,GAAAG,UAAA;IAC7B,CAAM;IACM,MAAAC,YAAA,GAAAC,IAAA;MACd,MAAOC,aAAA,GAAAb,IAAA,oBAAAA,IAAA,CAAAQ,KAAA,CAAAA,KAAA,CAAAM,KAAA;MACO,KAAAD,aAAA,EACd;MAEO,IAAAE,SAAA;MACT,IAAAC,UAAA,CAAAH,aAAA;QAEM;UAAAI;QAAA,IAAeL,IAAkB;QAChCG,SAAA,GAASF,aAAa,CAAAI,IAAA,EAAAL,IAAA;MAAA,CAC7B;QACMG,SAAA,GAAAF,aAA+B;MACnC;MACF,OAAAK,QAAA,CAAAH,SAAA;QAAA,CAAAA,SAAA;MAAA,IAAAA,SAAA;IACA;IACO,MAAAI,WAAU,GAAAC,CAAA,IAAU;MAC3BC,IAAA,UAAAb,KAAA,CAAAI,IAAA,EAAAQ,CAAA;IACA,CAAM;IACC,MAAAE,UAAS,GAAMF,CAAA;MACtBC,IAAA,SAAAb,KAAA,CAAAI,IAAA,EAAAQ,CAAA;IAEA,CAAM;IACJ,MAAIG,qBAAuB,GAAAA,CAAA;MACzBF,IAAA,SAAsB,EAAAb,KAAA,CAAAI,IAAA;IACtB;IACF,MAAAY,iBAAA,GAAAC,KAAA;MACMJ,IAAA,UAAAb,KAA2B,CAAAI,IAAA,EAAAa,KAAA;IAAmC,CACtE","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|