beyond-webui 1.1.42 → 1.1.43

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

@@ -1,4 +1,4 @@
-import { defineComponent, useSlots, computed, provide, getCurrentInstance, openBlock, createElementBlock, normalizeClass, unref, createBlock, withCtx, normalizeStyle, createElementVNode, toDisplayString } from 'vue';
+import { defineComponent, useSlots, computed, provide, getCurrentInstance, openBlock, createElementBlock, normalizeClass, unref, createBlock, withCtx, normalizeStyle, renderSlot, createElementVNode, toDisplayString } from 'vue';
 import '../../../hooks/index.mjs';
 import '../../form/index.mjs';
 import '../../virtual-list/index.mjs';
@@ -36,14 +36,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const {
       flattenTree,
       isNotEmpty,
+      listRef,
       toggleExpand,
-      isExpanded,
       isIndeterminate,
       isChecked,
       isDisabled,
       isCurrent,
       isForceHiddenExpandIcon,
       handleNodeClick,
+      handleNodeDrop,
       handleNodeCheck,
       toggleCheckbox,
       getCurrentNode,
@@ -60,7 +61,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       getNode,
       expandNode,
       collapseNode,
-      setExpandedKeys
+      setExpandedKeys,
+      scrollToNode,
+      scrollTo
     } = useTree(props, emit);
     expose({
       toggleCheckbox,
@@ -78,29 +81,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       getNode,
       expandNode,
       collapseNode,
-      setExpandedKeys
+      setExpandedKeys,
+      scrollToNode,
+      scrollTo
     });
     return (_ctx, _cache) => {
-      var _a;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass([unref(ns).b(), { [unref(ns).m("highlight-current")]: _ctx.highlightCurrent }]),
         role: "tree"
       }, [
         unref(isNotEmpty) ? (openBlock(), createBlock(unref(FixedSizeList), {
           key: 0,
+          ref_key: "listRef",
+          ref: listRef,
           "class-name": unref(ns).b("virtual-list"),
           data: unref(flattenTree),
           total: unref(flattenTree).length,
           height: _ctx.height,
           "item-size": unref(treeNodeSize),
-          "perf-mode": _ctx.perfMode
+          "perf-mode": _ctx.perfMode,
+          "scrollbar-always-on": _ctx.scrollbarAlwaysOn
         }, {
           default: withCtx(({ data, index, style }) => [
             (openBlock(), createBlock(ElTreeNode, {
               key: data[index].key,
               style: normalizeStyle(style),
               node: data[index],
-              expanded: unref(isExpanded)(data[index]),
+              expanded: data[index].expanded,
               "show-checkbox": _ctx.showCheckbox,
               checked: unref(isChecked)(data[index]),
               indeterminate: unref(isIndeterminate)(data[index]),
@@ -110,17 +117,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "hidden-expand-icon": unref(isForceHiddenExpandIcon)(data[index]),
               onClick: unref(handleNodeClick),
               onToggle: unref(toggleExpand),
-              onCheck: unref(handleNodeCheck)
-            }, null, 8, ["style", "node", "expanded", "show-checkbox", "checked", "indeterminate", "item-size", "disabled", "current", "hidden-expand-icon", "onClick", "onToggle", "onCheck"]))
+              onCheck: unref(handleNodeCheck),
+              onDrop: unref(handleNodeDrop)
+            }, null, 8, ["style", "node", "expanded", "show-checkbox", "checked", "indeterminate", "item-size", "disabled", "current", "hidden-expand-icon", "onClick", "onToggle", "onCheck", "onDrop"]))
           ]),
           _: 1
-        }, 8, ["class-name", "data", "total", "height", "item-size", "perf-mode"])) : (openBlock(), createElementBlock("div", {
+        }, 8, ["class-name", "data", "total", "height", "item-size", "perf-mode", "scrollbar-always-on"])) : (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(unref(ns).e("empty-block"))
         }, [
-          createElementVNode("span", {
-            class: normalizeClass(unref(ns).e("empty-text"))
-          }, toDisplayString((_a = _ctx.emptyText) != null ? _a : unref(t)("el.tree.emptyText")), 3)
+          renderSlot(_ctx.$slots, "empty", {}, () => {
+            var _a;
+            return [
+              createElementVNode("span", {
+                class: normalizeClass(unref(ns).e("empty-text"))
+              }, toDisplayString((_a = _ctx.emptyText) != null ? _a : unref(t)("el.tree.emptyText")), 3)
+            ];
+          })
         ], 2))
       ], 2);
     };

package/es/components/tree-v2/src/tree.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tree.mjs","sources":["../../../../../../packages/components/tree-v2/src/tree.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b(), { [ns.m('highlight-current')]: highlightCurrent }]\"\n    role=\"tree\"\n  >\n    <fixed-size-list\n      v-if=\"isNotEmpty\"\n      :class-name=\"ns.b('virtual-list')\"\n      :data=\"flattenTree\"\n      :total=\"flattenTree.length\"\n      :height=\"height\"\n      :item-size=\"treeNodeSize\"\n      :perf-mode=\"perfMode\"\n    >\n      <template #default=\"{ data, index, style }\">\n        <el-tree-node\n          :key=\"data[index].key\"\n          :style=\"style\"\n          :node=\"data[index]\"\n          :expanded=\"isExpanded(data[index])\"\n          :show-checkbox=\"showCheckbox\"\n          :checked=\"isChecked(data[index])\"\n          :indeterminate=\"isIndeterminate(data[index])\"\n          :item-size=\"treeNodeSize\"\n          :disabled=\"isDisabled(data[index])\"\n          :current=\"isCurrent(data[index])\"\n          :hidden-expand-icon=\"isForceHiddenExpandIcon(data[index])\"\n          @click=\"handleNodeClick\"\n          @toggle=\"toggleExpand\"\n          @check=\"handleNodeCheck\"\n        />\n      </template>\n    </fixed-size-list>\n    <div v-else :class=\"ns.e('empty-block')\">\n      <span :class=\"ns.e('empty-text')\">{{\n        emptyText ?? t('el.tree.emptyText')\n      }}</span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, getCurrentInstance, provide, useSlots } from 'vue'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { formItemContextKey } from '@element-plus/components/form'\nimport { FixedSizeList } from '@element-plus/components/virtual-list'\nimport { useTree } from './composables/useTree'\nimport ElTreeNode from './tree-node.vue'\nimport { ROOT_TREE_INJECTION_KEY, treeEmits, treeProps } from './virtual-tree'\n\ndefineOptions({\n  name: 'ElTreeV2',\n})\n\nconst props = defineProps(treeProps)\nconst emit = defineEmits(treeEmits)\n\nconst slots = useSlots()\n\nconst treeNodeSize = computed(() => props.itemSize)\n\nprovide(ROOT_TREE_INJECTION_KEY, {\n  ctx: {\n    emit,\n    slots,\n  },\n  props,\n  instance: getCurrentInstance()!,\n})\nprovide(formItemContextKey, undefined)\nconst { t } = useLocale()\nconst ns = useNamespace('tree')\nconst {\n  flattenTree,\n  isNotEmpty,\n  toggleExpand,\n  isExpanded,\n  isIndeterminate,\n  isChecked,\n  isDisabled,\n  isCurrent,\n  isForceHiddenExpandIcon,\n  handleNodeClick,\n  handleNodeCheck,\n  // expose\n  toggleCheckbox,\n  getCurrentNode,\n  getCurrentKey,\n  setCurrentKey,\n  getCheckedKeys,\n  getCheckedNodes,\n  getHalfCheckedKeys,\n  getHalfCheckedNodes,\n  setChecked,\n  setCheckedKeys,\n  filter,\n  setData,\n  getNode,\n  expandNode,\n  collapseNode,\n  setExpandedKeys,\n} = useTree(props, emit)\n\ndefineExpose({\n  toggleCheckbox,\n  getCurrentNode,\n  getCurrentKey,\n  setCurrentKey,\n  getCheckedKeys,\n  getCheckedNodes,\n  getHalfCheckedKeys,\n  getHalfCheckedNodes,\n  setChecked,\n  setCheckedKeys,\n  filter,\n  setData,\n  getNode,\n  expandNode,\n  collapseNode,\n  setExpandedKeys,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;mCAkDc,CAAA;AAAA,EACZ,IAAM,EAAA,UAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,IAAA,MAAM,YAAe,GAAA,QAAA,CAAS,MAAM,KAAA,CAAM,QAAQ,CAAA,CAAA;AAElD,IAAA,OAAA,CAAQ,uBAAyB,EAAA;AAAA,MAC/B,GAAK,EAAA;AAAA,QACH,IAAA;AAAA,QACA,KAAA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,UAAU,kBAAmB,EAAA;AAAA,KAC9B,CAAA,CAAA;AACD,IAAA,OAAA,CAAQ,oBAAoB,KAAS,CAAA,CAAA,CAAA;AACrC,IAAM,MAAA,EAAE,MAAM,SAAU,EAAA,CAAA;AACxB,IAAM,MAAA,EAAA,GAAK,aAAa,MAAM,CAAA,CAAA;AAC9B,IAAM,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAA;AAAA,MACA,eAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,uBAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MAEA,cAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,MACA,mBAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,KACE,GAAA,OAAA,CAAQ,OAAO,IAAI,CAAA,CAAA;AAEvB,IAAa,MAAA,CAAA;AAAA,MACX,cAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,MACA,mBAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tree.mjs","sources":["../../../../../../packages/components/tree-v2/src/tree.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b(), { [ns.m('highlight-current')]: highlightCurrent }]\"\n    role=\"tree\"\n  >\n    <fixed-size-list\n      v-if=\"isNotEmpty\"\n      ref=\"listRef\"\n      :class-name=\"ns.b('virtual-list')\"\n      :data=\"flattenTree\"\n      :total=\"flattenTree.length\"\n      :height=\"height\"\n      :item-size=\"treeNodeSize\"\n      :perf-mode=\"perfMode\"\n      :scrollbar-always-on=\"scrollbarAlwaysOn\"\n    >\n      <template #default=\"{ data, index, style }\">\n        <el-tree-node\n          :key=\"data[index].key\"\n          :style=\"style\"\n          :node=\"data[index]\"\n          :expanded=\"data[index].expanded\"\n          :show-checkbox=\"showCheckbox\"\n          :checked=\"isChecked(data[index])\"\n          :indeterminate=\"isIndeterminate(data[index])\"\n          :item-size=\"treeNodeSize\"\n          :disabled=\"isDisabled(data[index])\"\n          :current=\"isCurrent(data[index])\"\n          :hidden-expand-icon=\"isForceHiddenExpandIcon(data[index])\"\n          @click=\"handleNodeClick\"\n          @toggle=\"toggleExpand\"\n          @check=\"handleNodeCheck\"\n          @drop=\"handleNodeDrop\"\n        />\n      </template>\n    </fixed-size-list>\n    <div v-else :class=\"ns.e('empty-block')\">\n      <slot name=\"empty\">\n        <span :class=\"ns.e('empty-text')\">\n          {{ emptyText ?? t('el.tree.emptyText') }}\n        </span>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, getCurrentInstance, provide, useSlots } from 'vue'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { formItemContextKey } from '@element-plus/components/form'\nimport { FixedSizeList } from '@element-plus/components/virtual-list'\nimport { useTree } from './composables/useTree'\nimport ElTreeNode from './tree-node.vue'\nimport { ROOT_TREE_INJECTION_KEY, treeEmits, treeProps } from './virtual-tree'\n\ndefineOptions({\n  name: 'ElTreeV2',\n})\n\nconst props = defineProps(treeProps)\nconst emit = defineEmits(treeEmits)\n\nconst slots = useSlots()\n\nconst treeNodeSize = computed(() => props.itemSize)\n\nprovide(ROOT_TREE_INJECTION_KEY, {\n  ctx: {\n    emit,\n    slots,\n  },\n  props,\n  instance: getCurrentInstance()!,\n})\nprovide(formItemContextKey, undefined)\nconst { t } = useLocale()\nconst ns = useNamespace('tree')\nconst {\n  flattenTree,\n  isNotEmpty,\n  listRef,\n  toggleExpand,\n  isIndeterminate,\n  isChecked,\n  isDisabled,\n  isCurrent,\n  isForceHiddenExpandIcon,\n  handleNodeClick,\n  handleNodeDrop,\n  handleNodeCheck,\n  // expose\n  toggleCheckbox,\n  getCurrentNode,\n  getCurrentKey,\n  setCurrentKey,\n  getCheckedKeys,\n  getCheckedNodes,\n  getHalfCheckedKeys,\n  getHalfCheckedNodes,\n  setChecked,\n  setCheckedKeys,\n  filter,\n  setData,\n  getNode,\n  expandNode,\n  collapseNode,\n  setExpandedKeys,\n  scrollToNode,\n  scrollTo,\n} = useTree(props, emit)\n\ndefineExpose({\n  toggleCheckbox,\n  getCurrentNode,\n  getCurrentKey,\n  setCurrentKey,\n  getCheckedKeys,\n  getCheckedNodes,\n  getHalfCheckedKeys,\n  getHalfCheckedNodes,\n  setChecked,\n  setCheckedKeys,\n  filter,\n  setData,\n  getNode,\n  expandNode,\n  collapseNode,\n  setExpandedKeys,\n  scrollToNode,\n  scrollTo,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;mCAuDc,CAAA;AAAA,EACZ,IAAM,EAAA,UAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,IAAA,MAAM,YAAe,GAAA,QAAA,CAAS,MAAM,KAAA,CAAM,QAAQ,CAAA,CAAA;AAElD,IAAA,OAAA,CAAQ,uBAAyB,EAAA;AAAA,MAC/B,GAAK,EAAA;AAAA,QACH,IAAA;AAAA,QACA,KAAA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,UAAU,kBAAmB,EAAA;AAAA,KAC9B,CAAA,CAAA;AACD,IAAA,OAAA,CAAQ,oBAAoB,KAAS,CAAA,CAAA,CAAA;AACrC,IAAM,MAAA,EAAE,MAAM,SAAU,EAAA,CAAA;AACxB,IAAM,MAAA,EAAA,GAAK,aAAa,MAAM,CAAA,CAAA;AAC9B,IAAM,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,uBAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MAEA,cAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,MACA,mBAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,KACE,GAAA,OAAA,CAAQ,OAAO,IAAI,CAAA,CAAA;AAEvB,IAAa,MAAA,CAAA;AAAA,MACX,cAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,MACA,mBAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}