element-plus/es/components/tree/src/tree-node.mjs.map

A Component Library for Vue 3

{"version":3,"file":"tree-node.mjs","names":[],"sources":["../../../../../../packages/components/tree/src/tree-node.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"node.visible\"\n    ref=\"node$\"\n    :class=\"[\n      ns.b('node'),\n      ns.is('expanded', expanded),\n      ns.is('current', node.isCurrent),\n      ns.is('hidden', !node.visible),\n      ns.is('focusable', !node.disabled),\n      ns.is('checked', !node.disabled && node.checked),\n      getNodeClass(node),\n    ]\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"node.disabled\"\n    :aria-checked=\"node.checked\"\n    :draggable=\"tree.props.draggable\"\n    :data-key=\"getNodeKey(node)\"\n    @click.stop=\"handleClick\"\n    @contextmenu=\"handleContextMenu\"\n    @dragstart.stop=\"handleDragStart\"\n    @dragover.stop=\"handleDragOver\"\n    @dragend.stop=\"handleDragEnd\"\n    @drop.stop=\"handleDrop\"\n  >\n    <div\n      :class=\"ns.be('node', 'content')\"\n      :style=\"{ paddingLeft: (node.level - 1) * tree.props.indent + 'px' }\"\n    >\n      <el-icon\n        v-if=\"tree.props.icon || CaretRight\"\n        :class=\"[\n          ns.be('node', 'expand-icon'),\n          ns.is('leaf', node.isLeaf),\n          {\n            expanded: !node.isLeaf && expanded,\n          },\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"tree.props.icon || CaretRight\" />\n      </el-icon>\n      <el-checkbox\n        v-if=\"showCheckbox\"\n        :model-value=\"node.checked\"\n        :indeterminate=\"node.indeterminate\"\n        :disabled=\"!!node.disabled\"\n        @click.stop\n        @change=\"handleCheckChange\"\n      />\n      <el-icon\n        v-if=\"node.loading\"\n        :class=\"[ns.be('node', 'loading-icon'), ns.is('loading')]\"\n      >\n        <loading />\n      </el-icon>\n      <node-content :node=\"node\" :render-content=\"renderContent\" />\n    </div>\n    <el-collapse-transition>\n      <div\n        v-if=\"!renderAfterExpand || childNodeRendered\"\n        v-show=\"expanded\"\n        :class=\"ns.be('node', 'children')\"\n        role=\"group\"\n        :aria-expanded=\"expanded\"\n        @click.stop\n      >\n        <el-tree-node\n          v-for=\"child in node.childNodes\"\n          :key=\"getNodeKey(child)\"\n          :render-content=\"renderContent\"\n          :render-after-expand=\"renderAfterExpand\"\n          :show-checkbox=\"showCheckbox\"\n          :node=\"child\"\n          :accordion=\"accordion\"\n          :props=\"props\"\n          @node-expand=\"handleChildNodeExpand\"\n        />\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  nextTick,\n  provide,\n  ref,\n  watch,\n} from 'vue'\nimport { debugWarn, isFunction, isString } from '@element-plus/utils'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { CaretRight, Loading } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport NodeContent from './tree-node-content.vue'\nimport { getNodeKey as getNodeKeyUtil, handleCurrentChange } from './model/util'\nimport { useNodeExpandEventBroadcast } from './model/useNodeExpandEventBroadcast'\nimport { dragEventsKey } from './model/useDragNode'\nimport Node from './model/node'\nimport { NODE_INSTANCE_INJECTION_KEY, ROOT_TREE_INJECTION_KEY } from './tokens'\n\nimport type { ComponentInternalInstance, PropType } from 'vue'\nimport type { RootTreeType, TreeNodeData, TreeOptionProps } from './tree.type'\nimport type { CheckboxValueType } from '@element-plus/components/checkbox'\n\nexport default defineComponent({\n  name: 'ElTreeNode',\n  components: {\n    ElCollapseTransition,\n    ElCheckbox,\n    NodeContent,\n    ElIcon,\n    Loading,\n  },\n  props: {\n    node: {\n      type: Node,\n      default: () => ({}),\n    },\n    props: {\n      type: Object as PropType<TreeOptionProps>,\n      default: () => ({}),\n    },\n    accordion: Boolean,\n    renderContent: Function,\n    renderAfterExpand: Boolean,\n    showCheckbox: Boolean,\n  },\n  emits: ['node-expand'],\n  setup(props, ctx) {\n    const ns = useNamespace('tree')\n    const { broadcastExpanded } = useNodeExpandEventBroadcast(props)\n    const tree = inject<RootTreeType>(ROOT_TREE_INJECTION_KEY)!\n    const expanded = ref(false)\n    const childNodeRendered = ref(false)\n    const oldChecked = ref<boolean>()\n    const oldIndeterminate = ref<boolean>()\n    const node$ = ref<HTMLElement>()\n    const dragEvents = inject(dragEventsKey)!\n    const instance = getCurrentInstance()\n\n    provide(NODE_INSTANCE_INJECTION_KEY, instance)\n    if (!tree) {\n      debugWarn('Tree', \"Can not find node's tree.\")\n    }\n\n    if (props.node.expanded) {\n      expanded.value = true\n      childNodeRendered.value = true\n    }\n\n    const childrenKey = tree.props.props['children'] || 'children'\n    watch(\n      () => {\n        const children = props.node.data?.[childrenKey]\n        return children && [...children]\n      },\n      () => {\n        props.node.updateChildren()\n      }\n    )\n\n    watch(\n      () => props.node.indeterminate,\n      (val) => {\n        handleSelectChange(props.node.checked, val)\n      }\n    )\n\n    watch(\n      () => props.node.checked,\n      (val) => {\n        handleSelectChange(val, props.node.indeterminate)\n      }\n    )\n\n    watch(\n      () => props.node.childNodes.length,\n      () => props.node.reInitChecked()\n    )\n\n    watch(\n      () => props.node.expanded,\n      (val) => {\n        nextTick(() => (expanded.value = val))\n        if (val) {\n          childNodeRendered.value = true\n        }\n      }\n    )\n\n    const getNodeKey = (node: Node): any => {\n      return tree.props.nodeKey\n        ? getNodeKeyUtil(tree.props.nodeKey, node.data)\n        : node.id\n    }\n\n    const getNodeClass = (node: Node) => {\n      const nodeClassFunc = props.props.class\n      if (!nodeClassFunc) {\n        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      if (isString(className)) {\n        return { [className]: true }\n      } else {\n        return className\n      }\n    }\n\n    const handleSelectChange = (checked: boolean, indeterminate: boolean) => {\n      if (\n        oldChecked.value !== checked ||\n        oldIndeterminate.value !== indeterminate\n      ) {\n        tree.ctx.emit('check-change', props.node.data, checked, indeterminate)\n      }\n      oldChecked.value = checked\n      oldIndeterminate.value = indeterminate\n    }\n\n    const handleClick = (e: MouseEvent) => {\n      handleCurrentChange(tree.store, tree.ctx.emit, () => {\n        const nodeKeyProp = tree?.props?.nodeKey\n        if (nodeKeyProp) {\n          const curNodeKey = getNodeKey(props.node)\n          tree.store.value.setCurrentNodeKey(curNodeKey)\n        } else {\n          tree.store.value.setCurrentNode(props.node)\n        }\n      })\n      tree.currentNode.value = props.node\n\n      if (tree.props.expandOnClickNode) {\n        handleExpandIconClick()\n      }\n\n      if (\n        (tree.props.checkOnClickNode ||\n          (props.node.isLeaf &&\n            tree.props.checkOnClickLeaf &&\n            props.showCheckbox)) &&\n        !props.node.disabled\n      ) {\n        handleCheckChange(!props.node.checked)\n      }\n      tree.ctx.emit('node-click', props.node.data, props.node, instance, e)\n    }\n\n    const handleContextMenu = (event: Event) => {\n      if (tree.instance.vnode.props?.['onNodeContextmenu']) {\n        event.stopPropagation()\n        event.preventDefault()\n      }\n      tree.ctx.emit(\n        'node-contextmenu',\n        event,\n        props.node.data,\n        props.node,\n        instance\n      )\n    }\n\n    const handleExpandIconClick = () => {\n      if (props.node.isLeaf) return\n      if (expanded.value) {\n        tree.ctx.emit('node-collapse', props.node.data, props.node, instance)\n        props.node.collapse()\n      } else {\n        props.node.expand(() => {\n          ctx.emit('node-expand', props.node.data, props.node, instance)\n        })\n      }\n    }\n\n    const handleCheckChange = (value: CheckboxValueType) => {\n      const checkStrictly = tree?.props.checkStrictly\n      const childNodes = props.node.childNodes\n      if (!checkStrictly && childNodes.length) {\n        value = childNodes.some((node) => !node.isEffectivelyChecked)\n      }\n      props.node.setChecked(value as boolean, !checkStrictly)\n      nextTick(() => {\n        const store = tree.store.value\n        tree.ctx.emit('check', props.node.data, {\n          checkedNodes: store.getCheckedNodes(),\n          checkedKeys: store.getCheckedKeys(),\n          halfCheckedNodes: store.getHalfCheckedNodes(),\n          halfCheckedKeys: store.getHalfCheckedKeys(),\n        })\n      })\n    }\n\n    const handleChildNodeExpand = (\n      nodeData: TreeNodeData,\n      node: Node,\n      instance: ComponentInternalInstance\n    ) => {\n      broadcastExpanded(node)\n      tree.ctx.emit('node-expand', nodeData, node, instance)\n    }\n\n    const handleDragStart = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragStart({ event, treeNode: props })\n    }\n\n    const handleDragOver = (event: DragEvent) => {\n      event.preventDefault()\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragOver({\n        event,\n        treeNode: { $el: node$.value, node: props.node },\n      })\n    }\n\n    const handleDrop = (event: DragEvent) => {\n      event.preventDefault()\n    }\n\n    const handleDragEnd = (event: DragEvent) => {\n      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragEnd(event)\n    }\n\n    return {\n      ns,\n      node$,\n      tree,\n      expanded,\n      childNodeRendered,\n      oldChecked,\n      oldIndeterminate,\n      getNodeKey,\n      getNodeClass,\n      handleSelectChange,\n      handleClick,\n      handleContextMenu,\n      handleExpandIconClick,\n      handleCheckChange,\n      handleChildNodeExpand,\n      handleDragStart,\n      handleDragOver,\n      handleDrop,\n      handleDragEnd,\n      CaretRight,\n    }\n  },\n})\n</script>\n"],"mappings":"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"}