element-plus 1.2.0-beta.2 → 1.2.0-beta.6

package/es/components/transfer/src/transfer-panel.vue_vue_type_template_id_1a7d1f9c_lang.mjs

@@ -0,0 +1,94 @@
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, normalizeClass, createBlock, resolveDynamicComponent, createCommentVNode, withDirectives, Fragment, renderList, vShow, renderSlot } from 'vue';
+
+const _hoisted_1 = { class: "el-transfer-panel" };
+const _hoisted_2 = { class: "el-transfer-panel__header" };
+const _hoisted_3 = {
+  key: 0,
+  class: "el-transfer-panel__footer"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_checkbox = resolveComponent("el-checkbox");
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_el_input = resolveComponent("el-input");
+  const _component_option_content = resolveComponent("option-content");
+  const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("p", _hoisted_2, [
+      createVNode(_component_el_checkbox, {
+        modelValue: _ctx.allChecked,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.allChecked = $event),
+        indeterminate: _ctx.isIndeterminate,
+        onChange: _ctx.handleAllCheckedChange
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.title) + " ", 1),
+          createElementVNode("span", null, toDisplayString(_ctx.checkedSummary), 1)
+        ]),
+        _: 1
+      }, 8, ["modelValue", "indeterminate", "onChange"])
+    ]),
+    createElementVNode("div", {
+      class: normalizeClass(["el-transfer-panel__body", _ctx.hasFooter ? "is-with-footer" : ""])
+    }, [
+      _ctx.filterable ? (openBlock(), createBlock(_component_el_input, {
+        key: 0,
+        modelValue: _ctx.query,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.query = $event),
+        class: "el-transfer-panel__filter",
+        size: "small",
+        placeholder: _ctx.placeholder,
+        onMouseenter: _cache[2] || (_cache[2] = ($event) => _ctx.inputHover = true),
+        onMouseleave: _cache[3] || (_cache[3] = ($event) => _ctx.inputHover = false)
+      }, {
+        prefix: withCtx(() => [
+          _ctx.inputIcon ? (openBlock(), createBlock(_component_el_icon, {
+            key: 0,
+            class: "el-input__icon",
+            onClick: _ctx.clearQuery
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(_ctx.inputIcon)))
+            ]),
+            _: 1
+          }, 8, ["onClick"])) : createCommentVNode("v-if", true)
+        ]),
+        _: 1
+      }, 8, ["modelValue", "placeholder"])) : createCommentVNode("v-if", true),
+      withDirectives(createVNode(_component_el_checkbox_group, {
+        modelValue: _ctx.checked,
+        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.checked = $event),
+        class: normalizeClass([{ "is-filterable": _ctx.filterable }, "el-transfer-panel__list"])
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filteredData, (item) => {
+            return openBlock(), createBlock(_component_el_checkbox, {
+              key: item[_ctx.keyProp],
+              class: "el-transfer-panel__item",
+              label: item[_ctx.keyProp],
+              disabled: item[_ctx.disabledProp]
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_option_content, {
+                  option: _ctx.optionRender(item)
+                }, null, 8, ["option"])
+              ]),
+              _: 2
+            }, 1032, ["label", "disabled"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue", "class"]), [
+        [vShow, !_ctx.hasNoMatch && _ctx.data.length > 0]
+      ]),
+      withDirectives(createElementVNode("p", { class: "el-transfer-panel__empty" }, toDisplayString(_ctx.hasNoMatch ? _ctx.t("el.transfer.noMatch") : _ctx.t("el.transfer.noData")), 513), [
+        [vShow, _ctx.hasNoMatch || _ctx.data.length === 0]
+      ])
+    ], 2),
+    _ctx.hasFooter ? (openBlock(), createElementBlock("p", _hoisted_3, [
+      renderSlot(_ctx.$slots, "default")
+    ])) : createCommentVNode("v-if", true)
+  ]);
+}
+
+export { render };
+//# sourceMappingURL=transfer-panel.vue_vue_type_template_id_1a7d1f9c_lang.mjs.map

package/es/components/transfer/src/transfer-panel.vue_vue_type_template_id_1a7d1f9c_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"transfer-panel.vue_vue_type_template_id_1a7d1f9c_lang.mjs","sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue?vue&type=template&id=1a7d1f9c&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-transfer-panel\">\n    <p class=\"el-transfer-panel__header\">\n      <el-checkbox\n        v-model=\"allChecked\"\n        :indeterminate=\"isIndeterminate\"\n        @change=\"handleAllCheckedChange\"\n      >\n        {{ title }}\n        <span>{{ checkedSummary }}</span>\n      </el-checkbox>\n    </p>\n\n    <div\n      :class=\"['el-transfer-panel__body', hasFooter ? 'is-with-footer' : '']\"\n    >\n      <el-input\n        v-if=\"filterable\"\n        v-model=\"query\"\n        class=\"el-transfer-panel__filter\"\n        size=\"small\"\n        :placeholder=\"placeholder\"\n        @mouseenter=\"inputHover = true\"\n        @mouseleave=\"inputHover = false\"\n      >\n        <template #prefix>\n          <el-icon v-if=\"inputIcon\" class=\"el-input__icon\" @click=\"clearQuery\">\n            <component :is=\"inputIcon\" />\n          </el-icon>\n        </template>\n      </el-input>\n      <el-checkbox-group\n        v-show=\"!hasNoMatch && data.length > 0\"\n        v-model=\"checked\"\n        :class=\"{ 'is-filterable': filterable }\"\n        class=\"el-transfer-panel__list\"\n      >\n        <el-checkbox\n          v-for=\"item in filteredData\"\n          :key=\"item[keyProp]\"\n          class=\"el-transfer-panel__item\"\n          :label=\"item[keyProp]\"\n          :disabled=\"item[disabledProp]\"\n        >\n          <option-content :option=\"optionRender(item)\" />\n        </el-checkbox>\n      </el-checkbox-group>\n      <p\n        v-show=\"hasNoMatch || data.length === 0\"\n        class=\"el-transfer-panel__empty\"\n      >\n        {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n      </p>\n    </div>\n    <p v-if=\"hasFooter\" class=\"el-transfer-panel__footer\">\n      <slot></slot>\n    </p>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, reactive, toRefs } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport ElIcon from '@element-plus/components/icon'\nimport ElInput from '@element-plus/components/input'\nimport { CircleClose, Search } from '@element-plus/icons-vue'\nimport { useCheck, useCheckProps, CHECKED_CHANGE_EVENT } from './useCheck'\n\nexport default defineComponent({\n  name: 'ElTransferPanel',\n\n  components: {\n    ElCheckboxGroup,\n    ElCheckbox,\n    ElInput,\n    ElIcon,\n    OptionContent: ({ option }) => option,\n  },\n\n  props: useCheckProps,\n\n  emits: [CHECKED_CHANGE_EVENT],\n\n  setup(props, { slots }) {\n    const { t } = useLocale()\n\n    const panelState = reactive({\n      checked: [],\n      allChecked: false,\n      query: '',\n      inputHover: false,\n      checkChangeByUser: true,\n    })\n\n    const {\n      labelProp,\n      keyProp,\n      disabledProp,\n      filteredData,\n      checkedSummary,\n      isIndeterminate,\n      handleAllCheckedChange,\n    } = useCheck(props, panelState)\n\n    const hasNoMatch = computed(() => {\n      return panelState.query.length > 0 && filteredData.value.length === 0\n    })\n\n    const inputIcon = computed(() => {\n      return panelState.query.length > 0 && panelState.inputHover\n        ? CircleClose\n        : Search\n    })\n\n    const hasFooter = computed(() => !!slots.default()[0].children.length)\n\n    const clearQuery = () => {\n      if (inputIcon.value === CircleClose) {\n        panelState.query = ''\n      }\n    }\n\n    const { checked, allChecked, query, inputHover, checkChangeByUser } =\n      toRefs(panelState)\n\n    return {\n      labelProp,\n      keyProp,\n      disabledProp,\n      filteredData,\n      checkedSummary,\n      isIndeterminate,\n      handleAllCheckedChange,\n\n      checked,\n      allChecked,\n      query,\n      inputHover,\n      checkChangeByUser,\n\n      hasNoMatch,\n      inputIcon,\n      hasFooter,\n      clearQuery,\n\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_createVNode","_createBlock","_renderSlot"],"mappings":";;qBACO,OAAM;qBACN,OAAM;;;EAoDW,OAAM;AAAA;;;;;;;sBArD5BA,0BAAA;IACEC,wBAAA;MACEC;oBACW;qEAAA;QACR,eAAe;QACf,UAAQ;;yBAET;0CAAG;UACHD,iDAAS;;;;;IAIbA;MACG,kDAAmC;;MAG5B,gCADRE;;oBAEW;qEAAA;QACT,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,aAAa;QACb,oDAAY;QACZ,oDAAY;;QAEF,gBACT;UAAe,+BAAfA;;YAA0B,OAAM;AAAA,YAAkB,SAAO;;6BACvD;4BAAAA,oCAAgB;;;;;;;qBAItBD;oBAEW;qEAAA;QACR,0CAA0B,mBACrB;AAAA;yBAGJ;4BADFF,8CACiB,oBAAR;gCADTG;cAEG,KAAK,KAAK;cACX,OAAM;AAAA,cACL,OAAO,KAAK;cACZ,UAAU,KAAK;;+BAEhB;gBAAAD;kBAAiB,QAAQ,kBAAa;AAAA;;;;;;;;iBAZ/B,mBAAc,UAAK;;qBAe9BD,0BAEE,OAAM,8CAEH,kBAAa,gCAA2B;gBAHnC,mBAAc,UAAK;;;IAMtB,+BAATD,wBAAA;MACEI;;;;;;;"}

package/es/components/tree/index.d.ts

@@ -364,7 +364,7 @@ declare const _Tree: SFCWithInstall<import("vue").DefineComponent<{
     getHalfCheckedKeys: () => import("./src/tree.type").TreeKey[];
     setCurrentNode: (node: import("./src/model/node").default, shouldAutoExpandParent?: boolean) => void;
     setCurrentKey: (key: import("./src/tree.type").TreeKey, shouldAutoExpandParent?: boolean) => void;
-    t: (...args: any[]) => string;
+    t: import("../..").Translator;
     getNode: (data: import("./src/tree.type").TreeNodeData | import("./src/tree.type").TreeKey) => import("./src/model/node").default;
     remove: (data: import("./src/model/node").default | import("./src/tree.type").TreeNodeData) => void;
     append: (data: import("./src/tree.type").TreeNodeData, parentNode: import("./src/model/node").default | import("./src/tree.type").TreeNodeData | import("./src/tree.type").TreeKey) => void;
@@ -400,10 +400,10 @@ declare const _Tree: SFCWithInstall<import("vue").DefineComponent<{
     indent?: unknown;
     icon?: unknown;
 } & {
+    lazy: boolean;
     props: import("./src/tree.type").TreeOptionProps;
     data: unknown[];
     checkStrictly: boolean;
-    lazy: boolean;
     accordion: boolean;
     defaultExpandAll: boolean;
     indent: number;
@@ -417,8 +417,8 @@ declare const _Tree: SFCWithInstall<import("vue").DefineComponent<{
     highlightCurrent: boolean;
 } & {
     icon?: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | undefined;
-    emptyText?: string | undefined;
     load?: import("./src/tree.type").LoadFunction | undefined;
+    emptyText?: string | undefined;
     renderContent?: Function | undefined;
     defaultCheckedKeys?: import("./src/tree.type").TreeKey[] | undefined;
     defaultExpandedKeys?: import("./src/tree.type").TreeKey[] | undefined;
@@ -442,10 +442,10 @@ declare const _Tree: SFCWithInstall<import("vue").DefineComponent<{
     "onNode-drag-enter"?: ((...args: any[]) => any) | undefined;
     "onNode-drag-over"?: ((...args: any[]) => any) | undefined;
 }, {
+    lazy: boolean;
     props: import("./src/tree.type").TreeOptionProps;
     data: unknown[];
     checkStrictly: boolean;
-    lazy: boolean;
     accordion: boolean;
     defaultExpandAll: boolean;
     indent: number;
@@ -824,7 +824,7 @@ export declare const ElTree: SFCWithInstall<import("vue").DefineComponent<{
     getHalfCheckedKeys: () => import("./src/tree.type").TreeKey[];
     setCurrentNode: (node: import("./src/model/node").default, shouldAutoExpandParent?: boolean) => void;
     setCurrentKey: (key: import("./src/tree.type").TreeKey, shouldAutoExpandParent?: boolean) => void;
-    t: (...args: any[]) => string;
+    t: import("../..").Translator;
     getNode: (data: import("./src/tree.type").TreeNodeData | import("./src/tree.type").TreeKey) => import("./src/model/node").default;
     remove: (data: import("./src/model/node").default | import("./src/tree.type").TreeNodeData) => void;
     append: (data: import("./src/tree.type").TreeNodeData, parentNode: import("./src/model/node").default | import("./src/tree.type").TreeNodeData | import("./src/tree.type").TreeKey) => void;
@@ -860,10 +860,10 @@ export declare const ElTree: SFCWithInstall<import("vue").DefineComponent<{
     indent?: unknown;
     icon?: unknown;
 } & {
+    lazy: boolean;
     props: import("./src/tree.type").TreeOptionProps;
     data: unknown[];
     checkStrictly: boolean;
-    lazy: boolean;
     accordion: boolean;
     defaultExpandAll: boolean;
     indent: number;
@@ -877,8 +877,8 @@ export declare const ElTree: SFCWithInstall<import("vue").DefineComponent<{
     highlightCurrent: boolean;
 } & {
     icon?: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | undefined;
-    emptyText?: string | undefined;
     load?: import("./src/tree.type").LoadFunction | undefined;
+    emptyText?: string | undefined;
     renderContent?: Function | undefined;
     defaultCheckedKeys?: import("./src/tree.type").TreeKey[] | undefined;
     defaultExpandedKeys?: import("./src/tree.type").TreeKey[] | undefined;
@@ -902,10 +902,10 @@ export declare const ElTree: SFCWithInstall<import("vue").DefineComponent<{
     "onNode-drag-enter"?: ((...args: any[]) => any) | undefined;
     "onNode-drag-over"?: ((...args: any[]) => any) | undefined;
 }, {
+    lazy: boolean;
     props: import("./src/tree.type").TreeOptionProps;
     data: unknown[];
     checkStrictly: boolean;
-    lazy: boolean;
     accordion: boolean;
     defaultExpandAll: boolean;
     indent: number;

package/es/components/tree/index.mjs

@@ -1,5 +1,5 @@
 import './src/tree.mjs';
-import script from './src/tree.vue_vue&type=script&lang.mjs';
+import script from './src/tree.vue_vue_type_script_lang.mjs';
 
 script.install = (app) => {
   app.component(script.name, script);

package/es/components/tree/src/tree-node-content.mjs

@@ -1,5 +1,5 @@
-import script from './tree-node-content.vue_vue&type=script&lang.mjs';
-export { default } from './tree-node-content.vue_vue&type=script&lang.mjs';
+import script from './tree-node-content.vue_vue_type_script_lang.mjs';
+export { default } from './tree-node-content.vue_vue_type_script_lang.mjs';
 
 script.__file = "packages/components/tree/src/tree-node-content.vue";
 //# sourceMappingURL=tree-node-content.mjs.map

package/es/components/tree/src/tree-node-content.vue_vue_type_script_lang.mjs

@@ -0,0 +1,24 @@
+import { defineComponent, inject, h } from 'vue';
+
+var script = defineComponent({
+  name: "ElTreeNodeContent",
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    renderContent: Function
+  },
+  setup(props) {
+    const nodeInstance = inject("NodeInstance");
+    const tree = inject("RootTree");
+    return () => {
+      const node = props.node;
+      const { data, store } = node;
+      return props.renderContent ? props.renderContent(h, { _self: nodeInstance, node, data, store }) : tree.ctx.slots.default ? tree.ctx.slots.default({ node, data }) : h("span", { class: "el-tree-node__label" }, [node.label]);
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=tree-node-content.vue_vue_type_script_lang.mjs.map

package/es/components/tree/src/tree-node-content.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node-content.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/tree/src/tree-node-content.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { h, defineComponent, inject } from 'vue'\n\nimport type { ComponentInternalInstance } from 'vue'\nimport type { RootTreeType } from './tree.type'\n\nexport default defineComponent({\n  name: 'ElTreeNodeContent',\n  props: {\n    node: {\n      type: Object,\n      required: true,\n    },\n    renderContent: Function,\n  },\n  setup(props) {\n    const nodeInstance = inject<ComponentInternalInstance>('NodeInstance')\n    const tree = inject<RootTreeType>('RootTree')\n    return () => {\n      const node = props.node\n      const { data, store } = node\n      return props.renderContent\n        ? props.renderContent(h, { _self: nodeInstance, node, data, store })\n        : tree.ctx.slots.default\n        ? tree.ctx.slots.default({ node, data })\n        : h('span', { class: 'el-tree-node__label' }, [node.label])\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;AAMA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA;AAAA,IAEZ,eAAe;AAAA;AAAA,EAEjB,MAAM,OAAO;AACX,UAAM,eAAe,OAAkC;AACvD,UAAM,OAAO,OAAqB;AAClC,WAAO,MAAM;AACX,YAAM,OAAO,MAAM;AACnB,YAAM,EAAE,MAAM,UAAU;AACxB,aAAO,MAAM,gBACT,MAAM,cAAc,GAAG,EAAE,OAAO,cAAc,MAAM,MAAM,WAC1D,KAAK,IAAI,MAAM,UACf,KAAK,IAAI,MAAM,QAAQ,EAAE,MAAM,UAC/B,EAAE,QAAQ,EAAE,OAAO,yBAAyB,CAAC,KAAK;AAAA;AAAA;AAAA;;;;"}

package/es/components/tree/src/tree-node.mjs

@@ -1,6 +1,6 @@
-import script from './tree-node.vue_vue&type=script&lang.mjs';
-export { default } from './tree-node.vue_vue&type=script&lang.mjs';
-import { render } from './tree-node.vue_vue&type=template&id=62959aba&lang.mjs';
+import script from './tree-node.vue_vue_type_script_lang.mjs';
+export { default } from './tree-node.vue_vue_type_script_lang.mjs';
+import { render } from './tree-node.vue_vue_type_template_id_62959aba_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/tree/src/tree-node.vue";

package/es/components/tree/src/tree-node.vue_vue_type_script_lang.mjs

@@ -0,0 +1,203 @@
+import { defineComponent, inject, ref, getCurrentInstance, provide, watch, nextTick } from 'vue';
+import { isFunction, isString } from '@vue/shared';
+import _CollapseTransition from '../../collapse-transition/index.mjs';
+import { ElCheckbox } from '../../checkbox/index.mjs';
+import { ElIcon } from '../../icon/index.mjs';
+import { Loading, CaretRight } from '@element-plus/icons-vue';
+import { debugWarn } from '../../../utils/error.mjs';
+import './tree-node-content.mjs';
+import { getNodeKey } from './model/util.mjs';
+import { useNodeExpandEventBroadcast } from './model/useNodeExpandEventBroadcast.mjs';
+import { dragEventsKey } from './model/useDragNode.mjs';
+import Node from './model/node.mjs';
+import script$1 from './tree-node-content.vue_vue_type_script_lang.mjs';
+
+var script = defineComponent({
+  name: "ElTreeNode",
+  components: {
+    ElCollapseTransition: _CollapseTransition,
+    ElCheckbox,
+    NodeContent: script$1,
+    ElIcon,
+    Loading
+  },
+  props: {
+    node: {
+      type: Node,
+      default: () => ({})
+    },
+    props: {
+      type: Object,
+      default: () => ({})
+    },
+    accordion: Boolean,
+    renderContent: Function,
+    renderAfterExpand: Boolean,
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["node-expand"],
+  setup(props, ctx) {
+    const { broadcastExpanded } = useNodeExpandEventBroadcast(props);
+    const tree = inject("RootTree");
+    const expanded = ref(false);
+    const childNodeRendered = ref(false);
+    const oldChecked = ref(null);
+    const oldIndeterminate = ref(null);
+    const node$ = ref(null);
+    const dragEvents = inject(dragEventsKey);
+    const instance = getCurrentInstance();
+    provide("NodeInstance", instance);
+    if (!tree) {
+      debugWarn("Tree", "Can not find node's tree.");
+    }
+    if (props.node.expanded) {
+      expanded.value = true;
+      childNodeRendered.value = true;
+    }
+    const childrenKey = tree.props["children"] || "children";
+    watch(() => {
+      const children = props.node.data[childrenKey];
+      return children && [...children];
+    }, () => {
+      props.node.updateChildren();
+    });
+    watch(() => props.node.indeterminate, (val) => {
+      handleSelectChange(props.node.checked, val);
+    });
+    watch(() => props.node.checked, (val) => {
+      handleSelectChange(val, props.node.indeterminate);
+    });
+    watch(() => props.node.expanded, (val) => {
+      nextTick(() => expanded.value = val);
+      if (val) {
+        childNodeRendered.value = true;
+      }
+    });
+    const getNodeKey$1 = (node) => {
+      return getNodeKey(tree.props.nodeKey, node.data);
+    };
+    const getNodeClass = (node) => {
+      const nodeClassFunc = props.props.class;
+      if (!nodeClassFunc) {
+        return {};
+      }
+      let className;
+      if (isFunction(nodeClassFunc)) {
+        const { data } = node;
+        className = nodeClassFunc(data, node);
+      } else {
+        className = nodeClassFunc;
+      }
+      if (isString(className)) {
+        return { [className]: true };
+      } else {
+        return className;
+      }
+    };
+    const handleSelectChange = (checked, indeterminate) => {
+      if (oldChecked.value !== checked || oldIndeterminate.value !== indeterminate) {
+        tree.ctx.emit("check-change", props.node.data, checked, indeterminate);
+      }
+      oldChecked.value = checked;
+      oldIndeterminate.value = indeterminate;
+    };
+    const handleClick = () => {
+      const store = tree.store.value;
+      store.setCurrentNode(props.node);
+      tree.ctx.emit("current-change", store.currentNode ? store.currentNode.data : null, store.currentNode);
+      tree.currentNode.value = props.node;
+      if (tree.props.expandOnClickNode) {
+        handleExpandIconClick();
+      }
+      if (tree.props.checkOnClickNode && !props.node.disabled) {
+        handleCheckChange(null, {
+          target: { checked: !props.node.checked }
+        });
+      }
+      tree.ctx.emit("node-click", props.node.data, props.node, instance);
+    };
+    const handleContextMenu = (event) => {
+      if (tree.instance.vnode.props["onNodeContextmenu"]) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      tree.ctx.emit("node-contextmenu", event, props.node.data, props.node, instance);
+    };
+    const handleExpandIconClick = () => {
+      if (props.node.isLeaf)
+        return;
+      if (expanded.value) {
+        tree.ctx.emit("node-collapse", props.node.data, props.node, instance);
+        props.node.collapse();
+      } else {
+        props.node.expand();
+        ctx.emit("node-expand", props.node.data, props.node, instance);
+      }
+    };
+    const handleCheckChange = (value, ev) => {
+      props.node.setChecked(ev.target.checked, !tree.props.checkStrictly);
+      nextTick(() => {
+        const store = tree.store.value;
+        tree.ctx.emit("check", props.node.data, {
+          checkedNodes: store.getCheckedNodes(),
+          checkedKeys: store.getCheckedKeys(),
+          halfCheckedNodes: store.getHalfCheckedNodes(),
+          halfCheckedKeys: store.getHalfCheckedKeys()
+        });
+      });
+    };
+    const handleChildNodeExpand = (nodeData, node, instance2) => {
+      broadcastExpanded(node);
+      tree.ctx.emit("node-expand", nodeData, node, instance2);
+    };
+    const handleDragStart = (event) => {
+      if (!tree.props.draggable)
+        return;
+      dragEvents.treeNodeDragStart({ event, treeNode: props });
+    };
+    const handleDragOver = (event) => {
+      if (!tree.props.draggable)
+        return;
+      dragEvents.treeNodeDragOver({
+        event,
+        treeNode: { $el: node$.value, node: props.node }
+      });
+      event.preventDefault();
+    };
+    const handleDrop = (event) => {
+      event.preventDefault();
+    };
+    const handleDragEnd = (event) => {
+      if (!tree.props.draggable)
+        return;
+      dragEvents.treeNodeDragEnd(event);
+    };
+    return {
+      node$,
+      tree,
+      expanded,
+      childNodeRendered,
+      oldChecked,
+      oldIndeterminate,
+      getNodeKey: getNodeKey$1,
+      getNodeClass,
+      handleSelectChange,
+      handleClick,
+      handleContextMenu,
+      handleExpandIconClick,
+      handleCheckChange,
+      handleChildNodeExpand,
+      handleDragStart,
+      handleDragOver,
+      handleDrop,
+      handleDragEnd,
+      CaretRight
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=tree-node.vue_vue_type_script_lang.mjs.map

package/es/components/tree/src/tree-node.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/tree/src/tree-node.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"node.visible\"\n    ref=\"node$\"\n    class=\"el-tree-node\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': node.isCurrent,\n      'is-hidden': !node.visible,\n      'is-focusable': !node.disabled,\n      '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=\"el-tree-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          {\n            'is-leaf': node.isLeaf,\n            expanded: !node.isLeaf && expanded,\n          },\n          'el-tree-node__expand-icon',\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"tree.props.icon || CaretRight\"></component>\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=\"el-tree-node__loading-icon 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=\"el-tree-node__children\"\n        role=\"group\"\n        :aria-expanded=\"expanded\"\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          :props=\"props\"\n          @node-expand=\"handleChildNodeExpand\"\n        />\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  getCurrentInstance,\n  ref,\n  watch,\n  nextTick,\n  inject,\n  provide,\n} from 'vue'\nimport { isString, isFunction } from '@vue/shared'\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 { debugWarn } from '@element-plus/utils/error'\nimport NodeContent from './tree-node-content.vue'\nimport { getNodeKey as getNodeKeyUtil } from './model/util'\nimport { useNodeExpandEventBroadcast } from './model/useNodeExpandEventBroadcast'\nimport { dragEventsKey } from './model/useDragNode'\nimport Node from './model/node'\n\nimport type { ComponentInternalInstance, PropType } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type { TreeOptionProps, TreeNodeData, RootTreeType } from './tree.type'\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: {\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['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.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 = () => {\n      const store = tree.store.value\n      store.setCurrentNode(props.node)\n      tree.ctx.emit(\n        'current-change',\n        store.currentNode ? store.currentNode.data : null,\n        store.currentNode\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) {\n        handleCheckChange(null, {\n          target: { checked: !props.node.checked },\n        })\n      }\n      tree.ctx.emit('node-click', props.node.data, props.node, instance)\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    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 = (\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      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragOver({\n        event,\n        treeNode: { $el: node$.value, node: props.node },\n      })\n      event.preventDefault()\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      CaretRight,\n    }\n  },\n})\n</script>\n"],"names":["ElCollapseTransition","NodeContent","getNodeKey","getNodeKeyUtil"],"mappings":"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"}

package/es/components/tree/src/tree-node.vue_vue_type_template_id_62959aba_lang.mjs

@@ -0,0 +1,110 @@
+import { resolveComponent, withDirectives, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, normalizeStyle, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, createVNode, Fragment, renderList, vShow } from 'vue';
+
+const _hoisted_1 = ["aria-expanded", "aria-disabled", "aria-checked", "draggable", "data-key"];
+const _hoisted_2 = ["aria-expanded"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_el_checkbox = resolveComponent("el-checkbox");
+  const _component_loading = resolveComponent("loading");
+  const _component_node_content = resolveComponent("node-content");
+  const _component_el_tree_node = resolveComponent("el-tree-node");
+  const _component_el_collapse_transition = resolveComponent("el-collapse-transition");
+  return withDirectives((openBlock(), createElementBlock("div", {
+    ref: "node$",
+    class: normalizeClass(["el-tree-node", {
+      "is-expanded": _ctx.expanded,
+      "is-current": _ctx.node.isCurrent,
+      "is-hidden": !_ctx.node.visible,
+      "is-focusable": !_ctx.node.disabled,
+      "is-checked": !_ctx.node.disabled && _ctx.node.checked,
+      ..._ctx.getNodeClass(_ctx.node)
+    }]),
+    role: "treeitem",
+    tabindex: "-1",
+    "aria-expanded": _ctx.expanded,
+    "aria-disabled": _ctx.node.disabled,
+    "aria-checked": _ctx.node.checked,
+    draggable: _ctx.tree.props.draggable,
+    "data-key": _ctx.getNodeKey(_ctx.node),
+    onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"])),
+    onContextmenu: _cache[2] || (_cache[2] = (...args) => _ctx.handleContextMenu && _ctx.handleContextMenu(...args)),
+    onDragstart: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.handleDragStart && _ctx.handleDragStart(...args), ["stop"])),
+    onDragover: _cache[4] || (_cache[4] = withModifiers((...args) => _ctx.handleDragOver && _ctx.handleDragOver(...args), ["stop"])),
+    onDragend: _cache[5] || (_cache[5] = withModifiers((...args) => _ctx.handleDragEnd && _ctx.handleDragEnd(...args), ["stop"])),
+    onDrop: _cache[6] || (_cache[6] = withModifiers((...args) => _ctx.handleDrop && _ctx.handleDrop(...args), ["stop"]))
+  }, [
+    createElementVNode("div", {
+      class: "el-tree-node__content",
+      style: normalizeStyle({ paddingLeft: (_ctx.node.level - 1) * _ctx.tree.props.indent + "px" })
+    }, [
+      _ctx.tree.props.icon || _ctx.CaretRight ? (openBlock(), createBlock(_component_el_icon, {
+        key: 0,
+        class: normalizeClass([
+          {
+            "is-leaf": _ctx.node.isLeaf,
+            expanded: !_ctx.node.isLeaf && _ctx.expanded
+          },
+          "el-tree-node__expand-icon"
+        ]),
+        onClick: withModifiers(_ctx.handleExpandIconClick, ["stop"])
+      }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.tree.props.icon || _ctx.CaretRight)))
+        ]),
+        _: 1
+      }, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
+      _ctx.showCheckbox ? (openBlock(), createBlock(_component_el_checkbox, {
+        key: 1,
+        "model-value": _ctx.node.checked,
+        indeterminate: _ctx.node.indeterminate,
+        disabled: !!_ctx.node.disabled,
+        onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+        }, ["stop"])),
+        onChange: _ctx.handleCheckChange
+      }, null, 8, ["model-value", "indeterminate", "disabled", "onChange"])) : createCommentVNode("v-if", true),
+      _ctx.node.loading ? (openBlock(), createBlock(_component_el_icon, {
+        key: 2,
+        class: "el-tree-node__loading-icon is-loading"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_loading)
+        ]),
+        _: 1
+      })) : createCommentVNode("v-if", true),
+      createVNode(_component_node_content, {
+        node: _ctx.node,
+        "render-content": _ctx.renderContent
+      }, null, 8, ["node", "render-content"])
+    ], 4),
+    createVNode(_component_el_collapse_transition, null, {
+      default: withCtx(() => [
+        !_ctx.renderAfterExpand || _ctx.childNodeRendered ? withDirectives((openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "el-tree-node__children",
+          role: "group",
+          "aria-expanded": _ctx.expanded
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.node.childNodes, (child) => {
+            return openBlock(), createBlock(_component_el_tree_node, {
+              key: _ctx.getNodeKey(child),
+              "render-content": _ctx.renderContent,
+              "render-after-expand": _ctx.renderAfterExpand,
+              "show-checkbox": _ctx.showCheckbox,
+              node: child,
+              props: _ctx.props,
+              onNodeExpand: _ctx.handleChildNodeExpand
+            }, null, 8, ["render-content", "render-after-expand", "show-checkbox", "node", "props", "onNodeExpand"]);
+          }), 128))
+        ], 8, _hoisted_2)), [
+          [vShow, _ctx.expanded]
+        ]) : createCommentVNode("v-if", true)
+      ]),
+      _: 1
+    })
+  ], 42, _hoisted_1)), [
+    [vShow, _ctx.node.visible]
+  ]);
+}
+
+export { render };
+//# sourceMappingURL=tree-node.vue_vue_type_template_id_62959aba_lang.mjs.map

package/es/components/tree/src/tree-node.vue_vue_type_template_id_62959aba_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node.vue_vue_type_template_id_62959aba_lang.mjs","sources":["../../../../../../packages/components/tree/src/tree-node.vue?vue&type=template&id=62959aba&lang.js"],"sourcesContent":["<template>\n  <div\n    v-show=\"node.visible\"\n    ref=\"node$\"\n    class=\"el-tree-node\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': node.isCurrent,\n      'is-hidden': !node.visible,\n      'is-focusable': !node.disabled,\n      '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=\"el-tree-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          {\n            'is-leaf': node.isLeaf,\n            expanded: !node.isLeaf && expanded,\n          },\n          'el-tree-node__expand-icon',\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"tree.props.icon || CaretRight\"></component>\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=\"el-tree-node__loading-icon 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=\"el-tree-node__children\"\n        role=\"group\"\n        :aria-expanded=\"expanded\"\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          :props=\"props\"\n          @node-expand=\"handleChildNodeExpand\"\n        />\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  getCurrentInstance,\n  ref,\n  watch,\n  nextTick,\n  inject,\n  provide,\n} from 'vue'\nimport { isString, isFunction } from '@vue/shared'\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 { debugWarn } from '@element-plus/utils/error'\nimport NodeContent from './tree-node-content.vue'\nimport { getNodeKey as getNodeKeyUtil } from './model/util'\nimport { useNodeExpandEventBroadcast } from './model/useNodeExpandEventBroadcast'\nimport { dragEventsKey } from './model/useDragNode'\nimport Node from './model/node'\n\nimport type { ComponentInternalInstance, PropType } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type { TreeOptionProps, TreeNodeData, RootTreeType } from './tree.type'\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: {\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['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.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 = () => {\n      const store = tree.store.value\n      store.setCurrentNode(props.node)\n      tree.ctx.emit(\n        'current-change',\n        store.currentNode ? store.currentNode.data : null,\n        store.currentNode\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) {\n        handleCheckChange(null, {\n          target: { checked: !props.node.checked },\n        })\n      }\n      tree.ctx.emit('node-click', props.node.data, props.node, instance)\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    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 = (\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      if (!tree.props.draggable) return\n      dragEvents.treeNodeDragOver({\n        event,\n        treeNode: { $el: node$.value, node: props.node },\n      })\n      event.preventDefault()\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      CaretRight,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_createBlock","_createVNode"],"mappings":";;;;;;;;;;;sCACEA;IAEE,KAAI;AAAA,IACJ,uBAAM;;;;;;;;IASN,MAAK;AAAA,IACL,UAAS;AAAA,IACR,iBAAe;IACf,iBAAe,UAAK;AAAA,IACpB,gBAAc,UAAK;AAAA,IACnB,WAAW,UAAK,MAAM;AAAA,IACtB,YAAU,gBAAW;IACrB,8DAAY;IACZ,sDAAa;IACb,kEAAgB;IAChB,iEAAe;IACf,gEAAc;IACd,6DAAW;;IAEZC;MACE,OAAM;AAAA,MACL,qCAAuB,WAAK,aAAa,UAAK,MAAM;;MAG7C,UAAK,MAAM,QAAQ,gCAD3BC;;QAEG;;;;;;;QAOA,uBAAY;;yBAEb;wBAAAA,oCAAgB,UAAK,MAAM,QAAQ;;;;MAG7B,kCADRA;;QAEG,eAAa,UAAK;AAAA,QAClB,eAAe,UAAK;AAAA,QACpB,YAAY,UAAK;AAAA,QACjB,iDAAD;;QACC,UAAQ;;MAGH,UAAK,wBADbA;;QAEE,OAAM;AAAA;yBAEN;UAAAC;;;;MAEFA;QAAe,MAAM;QAAO,kBAAgB;;;IAE9CA;uBACE;SACS,0BAAqB,sDAD9BH;;UAGE,OAAM;AAAA,UACN,MAAK;AAAA,UACJ,iBAAe;;4BAEhBA,8CACkB,UAAK,aAAd;gCADTE;cAEG,KAAK,gBAAW;AAAA,cAChB,kBAAgB;cAChB,uBAAqB;cACrB,iBAAe;cACf,MAAM;AAAA,cACN,OAAO;cACP,cAAa;;;;kBAbR;;;;;;YA7DJ,UAAK;AAAA;AAAA;;;;"}

package/es/components/tree/src/tree.mjs

@@ -1,6 +1,6 @@
-import script from './tree.vue_vue&type=script&lang.mjs';
-export { default } from './tree.vue_vue&type=script&lang.mjs';
-import { render } from './tree.vue_vue&type=template&id=7539bec5&lang.mjs';
+import script from './tree.vue_vue_type_script_lang.mjs';
+export { default } from './tree.vue_vue_type_script_lang.mjs';
+import { render } from './tree.vue_vue_type_template_id_7539bec5_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/tree/src/tree.vue";