hongluan-ui/es/components/tree/src/tree-node.mjs.map

Hongluan Component Library for Vue 3

{"version":3,"file":"tree-node.mjs","sources":["../../../../../../packages/components/tree/src/tree-node.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"node.visible\"\n    ref=\"node$\"\n    class=\"tree-node\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': node.isCurrent,\n      'is-hidden': !node.visible,\n      'is-focusable': !node.disabled && !checkboxDisabled,\n      'is-checked': !node.disabled && !checkboxDisabled && node.checked,\n      ...getNodeClass(node),\n    }\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"node.disabled || checkboxDisabled\"\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=\"tree-node-content\"\n      :style=\"{ paddingLeft: (node.level - 1) * tree.props.indent + 'em' }\"\n    >\n      <span\n        :class=\"[\n          {\n            'custom-icon': !!$slots.icon,\n            'is-leaf': node.isLeaf,\n            expanded: !node.isLeaf && expanded\n          },\n          'tree-node-arrow',\n          tree.props.iconClass ? tree.props.iconClass : '',\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <slot name=\"icon\" :expanded=\"expanded\" :isLeaf=\"node.isLeaf\">\n          <hl-icon>\n            <system-caret />\n          </hl-icon>\n        </slot>\n      </span>\n      <!--修复tree嵌入form-item组件，导致label渲染成span，点击checkbox不能选中问题-->\n      <hl-checkbox\n        v-if=\"showCheckbox\"\n        :style=\"`visibility: ${node[props.hideCheckbox] ? 'hidden' : 'visible'}`\"\n        :model-value=\"node.checked\"\n        :indeterminate=\"node.indeterminate\"\n        :disabled=\"!!node.disabled || checkboxDisabled\"\n        :show-label=\"false\"\n        @click.stop\n        @change=\"handleCheckChange\"\n      >\n        {{ '' }}\n      </hl-checkbox>\n      <hl-spinner v-if=\"node.loading\" class=\"tree-node-loading-icon\" />\n      <node-content :node=\"node\" :render-content=\"renderContent\" />\n    </div>\n    <collapse-transition>\n      <div\n        v-if=\"!renderAfterExpand || childNodeRendered\"\n        v-show=\"expanded\"\n        class=\"tree-node-children\"\n        role=\"group\"\n        :aria-expanded=\"expanded\"\n      >\n        <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          :checkbox-disabled=\"checkboxDisabled\"\n          :node=\"child\"\n          :accordion=\"accordion\"\n          :props=\"props\"\n          @node-expand=\"handleChildNodeExpand\"\n        >\n          <template v-if=\"$slots.icon\" #icon=\"params\">\n            <slot name=\"icon\" v-bind=\"params\"></slot>\n          </template>\n        </tree-node>\n      </div>\n    </collapse-transition>\n  </div>\n</template>\n<script lang='ts'>\nimport { defineComponent, getCurrentInstance, ref, watch, nextTick, inject, provide } from 'vue'\nimport { isString, isFunction } from '@vue/shared'\nimport HlCheckbox from '@hongluan-ui/components/checkbox'\nimport HlSpinner from '@hongluan-ui/components/spinner'\nimport HlIcon from '@hongluan-ui/components/icon'\nimport { SystemCaret } from '@hongluan-ui/components/system-icon'\nimport CollapseTransition from '@hongluan-ui/components/collapse-transition'\nimport { debugWarn } from '@hongluan-ui/utils'\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'\n\nimport type { PropType, ComponentInternalInstance } from 'vue'\nimport type { TreeOptionProps, TreeNodeData, RootTreeType } from './tree.type'\nimport type { Nullable } from '@hongluan-ui/utils'\n\nexport default defineComponent({\n  name: 'TreeNode',\n  components: {\n    CollapseTransition,\n    HlSpinner,\n    HlCheckbox,\n    NodeContent,\n    HlIcon,\n    SystemCaret,\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: {\n      type: Boolean,\n      default: false,\n    },\n    checkboxDisabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['node-expand'],\n  setup(props, ctx) {\n    const { broadcastExpanded } = useNodeExpandEventBroadcast(props)\n    const tree = inject<RootTreeType>('RootTree')\n    const expanded = ref(false)\n    const childNodeRendered = ref(false)\n    const oldChecked = ref<boolean>(null)\n    const oldIndeterminate = ref<boolean>(null)\n    const node$ = ref<Nullable<HTMLElement>>(null)\n    const dragEvents = inject(dragEventsKey)\n    const instance = getCurrentInstance()\n\n    provide('NodeInstance', 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      const children = props.node.data[childrenKey]\n      return children && [...children]\n    }, () => {\n      props.node.updateChildren()\n    })\n\n    watch(() => props.node.indeterminate, val => {\n      handleSelectChange(props.node.checked, val)\n    })\n\n    watch(() => props.node.checked, val => {\n      handleSelectChange(val, props.node.indeterminate)\n    })\n\n    watch(\n      () => props.node.childNodes.length,\n      () => props.node.reInitChecked(),\n    )\n\n    watch(() => props.node.expanded, val => {\n      nextTick(() => expanded.value = val)\n      if(val) {\n        childNodeRendered.value = true\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 as TreeOptionProps).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 (oldChecked.value !== checked || oldIndeterminate.value !== indeterminate) {\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        tree.store.value.setCurrentNode(props.node),\n      )\n      tree.currentNode.value = props.node\n\n      if(tree.props.expandOnClickNode) {\n        handleExpandIconClick()\n      }\n\n      if(tree.props.checkOnClickNode && !props.node.disabled && !props.checkboxDisabled) {\n        handleCheckChange(null, {\n          target: { checked: !props.node.checked },\n        })\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('node-contextmenu', event, props.node.data, props.node, instance)\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    const handleCheckChange = (value, ev) => {\n      props.node.setChecked(ev.target.checked, !tree.props.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 = (nodeData: TreeNodeData, node: Node, instance: ComponentInternalInstance) => {\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      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    }\n\n  },\n})\n</script>\n"],"names":["CollapseTransition","NodeContent","getNodeKey","getNodeKeyUtil","_createElementBlock","_normalizeClass","_withModifiers","_createElementVNode","_normalizeStyle","_renderSlot","_createVNode","_createCommentVNode","_createBlock","_Fragment"],"mappings":"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"}