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

A Component Library for Vue 3

{"version":3,"file":"tree-node.vue.mjs","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 getNodeKeyUtil(tree.props.nodeKey, node.data)\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"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle","_openBlock","_createBlock","_withModifiers","_resolveDynamicComponent","_createCommentVNode","_createVNode","_withCtx","_Fragment","_renderList","_vShow"],"mappings":"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"}