element-plus
Version:
A Component Library for Vue 3
1 lines • 3.99 kB
Source Map (JSON)
{"version":3,"file":"tree-node.mjs","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 ]\"\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 >\n <div\n :class=\"ns.be('node', 'content')\"\n :style=\"{ paddingLeft: `${(node.level - 1) * indent}px` }\"\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\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { CaretRight } from '@element-plus/icons-vue'\nimport ElIcon from '@element-plus/components/icon'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { useNamespace } from '@element-plus/hooks'\nimport ElNodeContent from './tree-node-content'\nimport {\n ROOT_TREE_INJECTION_KEY,\n NODE_CONTEXTMENU,\n treeNodeEmits,\n treeNodeProps,\n} from './virtual-tree'\n\nconst DEFAULT_ICON = 'caret-right'\n\nexport default defineComponent({\n name: 'ElTreeNode',\n components: {\n ElIcon,\n CaretRight,\n ElCheckbox,\n ElNodeContent,\n },\n props: treeNodeProps,\n emits: treeNodeEmits,\n setup(props, { emit }) {\n const tree = inject(ROOT_TREE_INJECTION_KEY)\n const ns = useNamespace('tree')\n\n const indent = computed(() => {\n return tree?.props.indent ?? 16\n })\n\n const icon = computed(() => {\n return tree?.props.icon ?? DEFAULT_ICON\n })\n\n const handleClick = (e: MouseEvent) => {\n emit('click', props.node, e)\n }\n const handleExpandIconClick = () => {\n emit('toggle', props.node)\n }\n const handleCheckChange = (value: boolean) => {\n emit('check', props.node, value)\n }\n const 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\n return {\n ns,\n indent,\n icon,\n handleClick,\n handleExpandIconClick,\n handleCheckChange,\n handleContextMenu,\n }\n },\n})\n</script>\n"],"names":["_normalizeClass"],"mappings":";;;;;;;;;;AAgEA,MAAM,eAAe;AAErB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,OAAO,OAAO;AACpB,UAAM,KAAK,aAAa;AAExB,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAO;AAAsB;AAG/B;AACE,yBAAmB;AAAQ;AAG7B,+BAAuC;AACrC;AAA0B;AAE5B,UAAM,wBAAwB;AAC5B;AAAqB;AAEvB,UAAM,qBAAqB;AACzB;AAA0B;AAE5B,UAAM,oBAAoB;AACxB;AACE;AACA,cAAM;AAAA;AAER;AAAgE;AAGlE;AAAO,MACL;AAAA,MACA;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;AA9GS;AACL;AAAc;AAAqB;AAA+C;AAAoC;AAAmC;;;AAQ/J;AACC;AACe;AACD,IACd,gBAAU;AAAI,IACd;AAAK,IACL;AAA8B;;AAE/B,+BACU;AAAA,aACF;AAAqB;;AAGnB;aACAA;AAAA,8BAA8B;AAAA;AAAyC;;;;;;;;;AAU7E;;;;AAGkB;;AACjB,QACA;AAAe;AACL;AACF,QACR;AAAK;;;AAEwB;;;;;;;;;;;;"}