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

package/lib/components/tree-v2/src/tree-node.vue_vue&type=script&lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.vue_vue&type=script&lang.js","sources":["../../../../../../packages/components/tree-v2/src/tree-node.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"node$\"\n    class=\"el-tree-node\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': current,\n      'is-focusable': !disabled,\n      'is-checked': !disabled && checked,\n    }\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"disabled\"\n    :aria-checked=\"checked\"\n    :data-key=\"node?.key\"\n    @click.stop=\"handleClick\"\n    @contextmenu=\"handleContextMenu\"\n  >\n    <div\n      class=\"el-tree-node__content\"\n      :style=\"{ paddingLeft: `${(node.level - 1) * indent}px` }\"\n    >\n      <el-icon\n        :class=\"[\n          {\n            'is-leaf': node?.isLeaf,\n            'is-hidden': hiddenExpandIcon,\n            expanded: !node?.isLeaf && expanded,\n          },\n          'el-tree-node__expand-icon',\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"icon\" />\n      </el-icon>\n      <el-checkbox\n        v-if=\"showCheckbox\"\n        :model-value=\"checked\"\n        :indeterminate=\"indeterminate\"\n        :disabled=\"disabled\"\n        @change=\"handleCheckChange\"\n        @click.stop\n      />\n      <el-node-content :node=\"node\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { CaretRight } from '@element-plus/icons'\nimport ElIcon from '@element-plus/components/icon'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport ElNodeContent from './tree-node-content'\nimport {\n  ROOT_TREE_INJECTION_KEY,\n  NODE_CONTEXTMENU,\n  treeNodeEmits,\n  treeNodeProps,\n} from './virtual-tree'\n\nconst DEFAULT_ICON = 'caret-right'\n\nexport default defineComponent({\n  name: 'ElTreeNode',\n  components: {\n    ElIcon,\n    CaretRight,\n    ElCheckbox,\n    ElNodeContent,\n  },\n  props: treeNodeProps,\n  emits: treeNodeEmits,\n  setup(props, { emit }) {\n    const tree = inject(ROOT_TREE_INJECTION_KEY)\n\n    const indent = computed(() => {\n      return tree?.props.indent || 16\n    })\n\n    const icon = computed(() => {\n      return tree?.props.icon ? tree.props.icon : DEFAULT_ICON\n    })\n\n    const handleClick = () => {\n      emit('click', props.node)\n    }\n    const handleExpandIconClick = () => {\n      emit('toggle', props.node)\n    }\n    const handleCheckChange = (value: boolean) => {\n      emit('check', props.node, value)\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)\n    }\n\n    return {\n      indent,\n      icon,\n      handleClick,\n      handleExpandIconClick,\n      handleCheckChange,\n      handleContextMenu,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","CaretRight","ElCheckbox","ElNodeContent","treeNodeProps","treeNodeEmits","inject","ROOT_TREE_INJECTION_KEY","computed","NODE_CONTEXTMENU"],"mappings":";;;;;;;;;;;AA8DA,MAAM,eAAe;AAErB,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,YACVC;AAAA,gBACAC;AAAA,gBACAC;AAAA,mBACAC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAOC;AAAA,EACP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,OAAOC,WAAOC;AAEpB,UAAM,SAASC,aAAS,MAAM;AAC5B,aAAO,8BAAM,MAAM,WAAU;AAAA;AAG/B,UAAM,OAAOA,aAAS,MAAM;AAC1B,aAAO,8BAAM,MAAM,QAAO,KAAK,MAAM,OAAO;AAAA;AAG9C,UAAM,cAAc,MAAM;AACxB,WAAK,SAAS,MAAM;AAAA;AAEtB,UAAM,wBAAwB,MAAM;AAClC,WAAK,UAAU,MAAM;AAAA;AAEvB,UAAM,oBAAoB,CAAC,UAAmB;AAC5C,WAAK,SAAS,MAAM,MAAM;AAAA;AAE5B,UAAM,oBAAoB,CAAC,UAAiB;;AAC1C,UAAI,+CAAM,aAAN,mBAAgB,UAAhB,mBAAuB,UAAvB,mBAA+B,sBAAsB;AACvD,cAAM;AACN,cAAM;AAAA;AAER,mCAAM,IAAI,KAAKC,8BAAkB,OAAO,YAAM,SAAN,mBAAY,MAAM,MAAM;AAAA;AAGlE,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"tree-node.vue_vue&type=script&lang.js","sources":["../../../../../../packages/components/tree-v2/src/tree-node.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"node$\"\n    class=\"el-tree-node\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': current,\n      'is-focusable': !disabled,\n      'is-checked': !disabled && checked,\n    }\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"disabled\"\n    :aria-checked=\"checked\"\n    :data-key=\"node?.key\"\n    @click.stop=\"handleClick\"\n    @contextmenu=\"handleContextMenu\"\n  >\n    <div\n      class=\"el-tree-node__content\"\n      :style=\"{ paddingLeft: `${(node.level - 1) * indent}px` }\"\n    >\n      <el-icon\n        v-if=\"icon\"\n        :class=\"[\n          {\n            'is-leaf': node?.isLeaf,\n            'is-hidden': hiddenExpandIcon,\n            expanded: !node?.isLeaf && expanded,\n          },\n          'el-tree-node__expand-icon',\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"icon\" />\n      </el-icon>\n      <el-checkbox\n        v-if=\"showCheckbox\"\n        :model-value=\"checked\"\n        :indeterminate=\"indeterminate\"\n        :disabled=\"disabled\"\n        @change=\"handleCheckChange\"\n        @click.stop\n      />\n      <el-node-content :node=\"node\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { CaretRight } from '@element-plus/icons'\nimport ElIcon from '@element-plus/components/icon'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport ElNodeContent from './tree-node-content'\nimport {\n  ROOT_TREE_INJECTION_KEY,\n  NODE_CONTEXTMENU,\n  treeNodeEmits,\n  treeNodeProps,\n} from './virtual-tree'\n\nconst DEFAULT_ICON = 'caret-right'\n\nexport default defineComponent({\n  name: 'ElTreeNode',\n  components: {\n    ElIcon,\n    CaretRight,\n    ElCheckbox,\n    ElNodeContent,\n  },\n  props: treeNodeProps,\n  emits: treeNodeEmits,\n  setup(props, { emit }) {\n    const tree = inject(ROOT_TREE_INJECTION_KEY)\n\n    const indent = computed(() => {\n      return tree?.props.indent ?? 16\n    })\n\n    const icon = computed(() => {\n      return tree?.props.icon ?? DEFAULT_ICON\n    })\n\n    const handleClick = () => {\n      emit('click', props.node)\n    }\n    const handleExpandIconClick = () => {\n      emit('toggle', props.node)\n    }\n    const handleCheckChange = (value: boolean) => {\n      emit('check', props.node, value)\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)\n    }\n\n    return {\n      indent,\n      icon,\n      handleClick,\n      handleExpandIconClick,\n      handleCheckChange,\n      handleContextMenu,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","CaretRight","ElCheckbox","ElNodeContent","treeNodeProps","treeNodeEmits","inject","ROOT_TREE_INJECTION_KEY","computed","NODE_CONTEXTMENU"],"mappings":";;;;;;;;;;;AA+DA,MAAM,eAAe;AAErB,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,YACVC;AAAA,gBACAC;AAAA,gBACAC;AAAA,mBACAC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAOC;AAAA,EACP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,OAAOC,WAAOC;AAEpB,UAAM,SAASC,aAAS,MAAM;;AAC5B,aAAO,mCAAM,MAAM,WAAZ,YAAsB;AAAA;AAG/B,UAAM,OAAOA,aAAS,MAAM;;AAC1B,aAAO,mCAAM,MAAM,SAAZ,YAAoB;AAAA;AAG7B,UAAM,cAAc,MAAM;AACxB,WAAK,SAAS,MAAM;AAAA;AAEtB,UAAM,wBAAwB,MAAM;AAClC,WAAK,UAAU,MAAM;AAAA;AAEvB,UAAM,oBAAoB,CAAC,UAAmB;AAC5C,WAAK,SAAS,MAAM,MAAM;AAAA;AAE5B,UAAM,oBAAoB,CAAC,UAAiB;;AAC1C,UAAI,+CAAM,aAAN,mBAAgB,UAAhB,mBAAuB,UAAvB,mBAA+B,sBAAsB;AACvD,cAAM;AACN,cAAM;AAAA;AAER,mCAAM,IAAI,KAAKC,8BAAkB,OAAO,YAAM,SAAN,mBAAY,MAAM,MAAM;AAAA;AAGlE,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/lib/components/tree-v2/src/tree-node.vue_vue&type=template&id=71d8f826&lang.js

@@ -31,7 +31,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "el-tree-node__content",
       style: vue.normalizeStyle({ paddingLeft: `${(_ctx.node.level - 1) * _ctx.indent}px` })
     }, [
-      vue.createVNode(_component_el_icon, {
+      _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+        key: 0,
         class: vue.normalizeClass([
           {
             "is-leaf": (_b = _ctx.node) == null ? void 0 : _b.isLeaf,
@@ -46,9 +47,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
         ]),
         _: 1
-      }, 8, ["class", "onClick"]),
+      }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true),
       _ctx.showCheckbox ? (vue.openBlock(), vue.createBlock(_component_el_checkbox, {
-        key: 0,
+        key: 1,
         "model-value": _ctx.checked,
         indeterminate: _ctx.indeterminate,
         disabled: _ctx.disabled,

package/lib/components/tree-v2/src/tree-node.vue_vue&type=template&id=71d8f826&lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.vue_vue&type=template&id=71d8f826&lang.js","sources":["../../../../../../packages/components/tree-v2/src/tree-node.vue?vue&type=template&id=71d8f826&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"node$\"\n    class=\"el-tree-node\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': current,\n      'is-focusable': !disabled,\n      'is-checked': !disabled && checked,\n    }\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"disabled\"\n    :aria-checked=\"checked\"\n    :data-key=\"node?.key\"\n    @click.stop=\"handleClick\"\n    @contextmenu=\"handleContextMenu\"\n  >\n    <div\n      class=\"el-tree-node__content\"\n      :style=\"{ paddingLeft: `${(node.level - 1) * indent}px` }\"\n    >\n      <el-icon\n        :class=\"[\n          {\n            'is-leaf': node?.isLeaf,\n            'is-hidden': hiddenExpandIcon,\n            expanded: !node?.isLeaf && expanded,\n          },\n          'el-tree-node__expand-icon',\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"icon\" />\n      </el-icon>\n      <el-checkbox\n        v-if=\"showCheckbox\"\n        :model-value=\"checked\"\n        :indeterminate=\"indeterminate\"\n        :disabled=\"disabled\"\n        @change=\"handleCheckChange\"\n        @click.stop\n      />\n      <el-node-content :node=\"node\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { CaretRight } from '@element-plus/icons'\nimport ElIcon from '@element-plus/components/icon'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport ElNodeContent from './tree-node-content'\nimport {\n  ROOT_TREE_INJECTION_KEY,\n  NODE_CONTEXTMENU,\n  treeNodeEmits,\n  treeNodeProps,\n} from './virtual-tree'\n\nconst DEFAULT_ICON = 'caret-right'\n\nexport default defineComponent({\n  name: 'ElTreeNode',\n  components: {\n    ElIcon,\n    CaretRight,\n    ElCheckbox,\n    ElNodeContent,\n  },\n  props: treeNodeProps,\n  emits: treeNodeEmits,\n  setup(props, { emit }) {\n    const tree = inject(ROOT_TREE_INJECTION_KEY)\n\n    const indent = computed(() => {\n      return tree?.props.indent || 16\n    })\n\n    const icon = computed(() => {\n      return tree?.props.icon ? tree.props.icon : DEFAULT_ICON\n    })\n\n    const handleClick = () => {\n      emit('click', props.node)\n    }\n    const handleExpandIconClick = () => {\n      emit('toggle', props.node)\n    }\n    const handleCheckChange = (value: boolean) => {\n      emit('check', props.node, value)\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)\n    }\n\n    return {\n      indent,\n      icon,\n      handleClick,\n      handleExpandIconClick,\n      handleCheckChange,\n      handleContextMenu,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_createVNode","_createBlock"],"mappings":";;;;;;;;;;;;0BACEA;IACE,KAAI;AAAA,IACJ,2BAAM;;;;;;IAON,MAAK;AAAA,IACL,UAAS;AAAA,IACR,iBAAe;IACf,iBAAe;IACf,gBAAc;IACd,YAAU,oBAAA,mBAAM;AAAA,IAChB,kEAAY;IACZ,sDAAa;;IAEdC;MACE,OAAM;AAAA,MACL,4CAA0B,WAAK,aAAa;;MAE7CC;QACG;;;;;;;;QAQA,2BAAY;;6BAEb;4BAAAC,4CAAgB;;;;MAGV,sCADRA;;QAEG,eAAa;QACb,eAAe;QACf,UAAU;QACV,UAAQ;QACR,qDAAD;;;MAEFD,8CAAkB,MAAM;;;;;;;"}
+{"version":3,"file":"tree-node.vue_vue&type=template&id=71d8f826&lang.js","sources":["../../../../../../packages/components/tree-v2/src/tree-node.vue?vue&type=template&id=71d8f826&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"node$\"\n    class=\"el-tree-node\"\n    :class=\"{\n      'is-expanded': expanded,\n      'is-current': current,\n      'is-focusable': !disabled,\n      'is-checked': !disabled && checked,\n    }\"\n    role=\"treeitem\"\n    tabindex=\"-1\"\n    :aria-expanded=\"expanded\"\n    :aria-disabled=\"disabled\"\n    :aria-checked=\"checked\"\n    :data-key=\"node?.key\"\n    @click.stop=\"handleClick\"\n    @contextmenu=\"handleContextMenu\"\n  >\n    <div\n      class=\"el-tree-node__content\"\n      :style=\"{ paddingLeft: `${(node.level - 1) * indent}px` }\"\n    >\n      <el-icon\n        v-if=\"icon\"\n        :class=\"[\n          {\n            'is-leaf': node?.isLeaf,\n            'is-hidden': hiddenExpandIcon,\n            expanded: !node?.isLeaf && expanded,\n          },\n          'el-tree-node__expand-icon',\n        ]\"\n        @click.stop=\"handleExpandIconClick\"\n      >\n        <component :is=\"icon\" />\n      </el-icon>\n      <el-checkbox\n        v-if=\"showCheckbox\"\n        :model-value=\"checked\"\n        :indeterminate=\"indeterminate\"\n        :disabled=\"disabled\"\n        @change=\"handleCheckChange\"\n        @click.stop\n      />\n      <el-node-content :node=\"node\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { CaretRight } from '@element-plus/icons'\nimport ElIcon from '@element-plus/components/icon'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport ElNodeContent from './tree-node-content'\nimport {\n  ROOT_TREE_INJECTION_KEY,\n  NODE_CONTEXTMENU,\n  treeNodeEmits,\n  treeNodeProps,\n} from './virtual-tree'\n\nconst DEFAULT_ICON = 'caret-right'\n\nexport default defineComponent({\n  name: 'ElTreeNode',\n  components: {\n    ElIcon,\n    CaretRight,\n    ElCheckbox,\n    ElNodeContent,\n  },\n  props: treeNodeProps,\n  emits: treeNodeEmits,\n  setup(props, { emit }) {\n    const tree = inject(ROOT_TREE_INJECTION_KEY)\n\n    const indent = computed(() => {\n      return tree?.props.indent ?? 16\n    })\n\n    const icon = computed(() => {\n      return tree?.props.icon ?? DEFAULT_ICON\n    })\n\n    const handleClick = () => {\n      emit('click', props.node)\n    }\n    const handleExpandIconClick = () => {\n      emit('toggle', props.node)\n    }\n    const handleCheckChange = (value: boolean) => {\n      emit('check', props.node, value)\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)\n    }\n\n    return {\n      indent,\n      icon,\n      handleClick,\n      handleExpandIconClick,\n      handleCheckChange,\n      handleContextMenu,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_createBlock","_createVNode"],"mappings":";;;;;;;;;;;;0BACEA;IACE,KAAI;AAAA,IACJ,2BAAM;;;;;;IAON,MAAK;AAAA,IACL,UAAS;AAAA,IACR,iBAAe;IACf,iBAAe;IACf,gBAAc;IACd,YAAU,oBAAA,mBAAM;AAAA,IAChB,kEAAY;IACZ,sDAAa;;IAEdC;MACE,OAAM;AAAA,MACL,4CAA0B,WAAK,aAAa;;MAGrC,8BADRC;;QAEG;;;;;;;;QAQA,2BAAY;;6BAEb;4BAAAA,4CAAgB;;;;MAGV,sCADRA;;QAEG,eAAa;QACb,eAAe;QACf,UAAU;QACV,UAAQ;QACR,qDAAD;;;MAEFC,8CAAkB,MAAM;;;;;;;"}

package/lib/components/tree-v2/src/tree.vue_vue&type=script&lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.vue_vue&type=script&lang.js","sources":["../../../../../../packages/components/tree-v2/src/tree.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-tree\"\n    :class=\"{\n      'el-tree--highlight-current': highlightCurrent,\n    }\"\n    role=\"tree\"\n  >\n    <fixed-size-list\n      v-if=\"isNotEmpty\"\n      class-name=\"el-tree-virtual-list\"\n      :data=\"flattenTree\"\n      :total=\"flattenTree.length\"\n      :height=\"height\"\n      :item-size=\"itemSize\"\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          :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        ></el-tree-node>\n      </template>\n    </fixed-size-list>\n    <div v-else class=\"el-tree__empty-block\">\n      <span class=\"el-tree__empty-text\">{{\n        emptyText || t('el.tree.emptyText')\n      }}</span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance, provide } from 'vue'\nimport { useLocaleInject } from '@element-plus/hooks'\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'\nimport type { TreeProps } from './types'\n\nexport default defineComponent({\n  name: 'ElTreeV2',\n  components: {\n    ElTreeNode,\n    FixedSizeList,\n  },\n  props: treeProps,\n  emits: treeEmits,\n  setup(props: TreeProps, ctx) {\n    provide(ROOT_TREE_INJECTION_KEY, {\n      ctx,\n      props,\n      instance: getCurrentInstance(),\n    })\n    const { t } = useLocaleInject()\n    const {\n      flattenTree,\n      isNotEmpty,\n      toggleExpand,\n      isExpanded,\n      isIndeterminate,\n      isChecked,\n      isDisabled,\n      isCurrent,\n      isForceHiddenExpandIcon,\n      toggleCheckbox,\n      handleNodeClick,\n      handleNodeCheck,\n      // expose\n      getCurrentNode,\n      getCurrentKey,\n      setCurrentKey,\n      getCheckedKeys,\n      getCheckedNodes,\n      getHalfCheckedKeys,\n      getHalfCheckedNodes,\n      setChecked,\n      setCheckedKeys,\n      filter,\n      setData,\n    } = useTree(props, ctx.emit)\n\n    ctx.expose({\n      getCurrentNode,\n      getCurrentKey,\n      setCurrentKey,\n      getCheckedKeys,\n      getCheckedNodes,\n      getHalfCheckedKeys,\n      getHalfCheckedNodes,\n      setChecked,\n      setCheckedKeys,\n      filter,\n      setData,\n    })\n\n    return {\n      t,\n      flattenTree,\n      itemSize: 26,\n      isNotEmpty,\n      toggleExpand,\n      toggleCheckbox,\n      isExpanded,\n      isIndeterminate,\n      isChecked,\n      isDisabled,\n      isCurrent,\n      isForceHiddenExpandIcon,\n      handleNodeClick,\n      handleNodeCheck,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElTreeNode","FixedSizeList","treeProps","treeEmits","ROOT_TREE_INJECTION_KEY","getCurrentInstance","useLocaleInject","useTree"],"mappings":";;;;;;;;;;;;;;AAoDA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,gBACVC;AAAA,mBACAC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAOC;AAAA,EACP,MAAM,OAAkB,KAAK;AAC3B,gBAAQC,qCAAyB;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,UAAUC;AAAA;AAEZ,UAAM,EAAE,MAAMC;AACd,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACEC,gBAAQ,OAAO,IAAI;AAEvB,QAAI,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"tree.vue_vue&type=script&lang.js","sources":["../../../../../../packages/components/tree-v2/src/tree.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-tree\"\n    :class=\"{\n      'el-tree--highlight-current': highlightCurrent,\n    }\"\n    role=\"tree\"\n  >\n    <fixed-size-list\n      v-if=\"isNotEmpty\"\n      class-name=\"el-tree-virtual-list\"\n      :data=\"flattenTree\"\n      :total=\"flattenTree.length\"\n      :height=\"height\"\n      :item-size=\"itemSize\"\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          :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        ></el-tree-node>\n      </template>\n    </fixed-size-list>\n    <div v-else class=\"el-tree__empty-block\">\n      <span class=\"el-tree__empty-text\">{{\n        emptyText ?? t('el.tree.emptyText')\n      }}</span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance, provide } from 'vue'\nimport { useLocaleInject } from '@element-plus/hooks'\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'\nimport type { TreeProps } from './types'\n\nexport default defineComponent({\n  name: 'ElTreeV2',\n  components: {\n    ElTreeNode,\n    FixedSizeList,\n  },\n  props: treeProps,\n  emits: treeEmits,\n  setup(props: TreeProps, ctx) {\n    provide(ROOT_TREE_INJECTION_KEY, {\n      ctx,\n      props,\n      instance: getCurrentInstance(),\n    })\n    const { t } = useLocaleInject()\n    const {\n      flattenTree,\n      isNotEmpty,\n      toggleExpand,\n      isExpanded,\n      isIndeterminate,\n      isChecked,\n      isDisabled,\n      isCurrent,\n      isForceHiddenExpandIcon,\n      toggleCheckbox,\n      handleNodeClick,\n      handleNodeCheck,\n      // expose\n      getCurrentNode,\n      getCurrentKey,\n      setCurrentKey,\n      getCheckedKeys,\n      getCheckedNodes,\n      getHalfCheckedKeys,\n      getHalfCheckedNodes,\n      setChecked,\n      setCheckedKeys,\n      filter,\n      setData,\n    } = useTree(props, ctx.emit)\n\n    ctx.expose({\n      getCurrentNode,\n      getCurrentKey,\n      setCurrentKey,\n      getCheckedKeys,\n      getCheckedNodes,\n      getHalfCheckedKeys,\n      getHalfCheckedNodes,\n      setChecked,\n      setCheckedKeys,\n      filter,\n      setData,\n    })\n\n    return {\n      t,\n      flattenTree,\n      itemSize: 26,\n      isNotEmpty,\n      toggleExpand,\n      toggleCheckbox,\n      isExpanded,\n      isIndeterminate,\n      isChecked,\n      isDisabled,\n      isCurrent,\n      isForceHiddenExpandIcon,\n      handleNodeClick,\n      handleNodeCheck,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElTreeNode","FixedSizeList","treeProps","treeEmits","ROOT_TREE_INJECTION_KEY","getCurrentInstance","useLocaleInject","useTree"],"mappings":";;;;;;;;;;;;;;AAoDA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,gBACVC;AAAA,mBACAC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAOC;AAAA,EACP,MAAM,OAAkB,KAAK;AAC3B,gBAAQC,qCAAyB;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,UAAUC;AAAA;AAEZ,UAAM,EAAE,MAAMC;AACd,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACEC,gBAAQ,OAAO,IAAI;AAEvB,QAAI,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/lib/components/tree-v2/src/tree.vue_vue&type=template&id=5b45a1b2&lang.js

@@ -10,6 +10,7 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = { class: "el-tree__empty-text" };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _a;
   const _component_el_tree_node = vue.resolveComponent("el-tree-node");
   const _component_fixed_size_list = vue.resolveComponent("fixed-size-list");
   return vue.openBlock(), vue.createElementBlock("div", {
@@ -46,7 +47,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 1
     }, 8, ["data", "total", "height", "item-size", "perf-mode"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-      vue.createElementVNode("span", _hoisted_2, vue.toDisplayString(_ctx.emptyText || _ctx.t("el.tree.emptyText")), 1)
+      vue.createElementVNode("span", _hoisted_2, vue.toDisplayString((_a = _ctx.emptyText) != null ? _a : _ctx.t("el.tree.emptyText")), 1)
     ]))
   ], 2);
 }

package/lib/components/tree-v2/src/tree.vue_vue&type=template&id=5b45a1b2&lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.vue_vue&type=template&id=5b45a1b2&lang.js","sources":["../../../../../../packages/components/tree-v2/src/tree.vue?vue&type=template&id=5b45a1b2&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-tree\"\n    :class=\"{\n      'el-tree--highlight-current': highlightCurrent,\n    }\"\n    role=\"tree\"\n  >\n    <fixed-size-list\n      v-if=\"isNotEmpty\"\n      class-name=\"el-tree-virtual-list\"\n      :data=\"flattenTree\"\n      :total=\"flattenTree.length\"\n      :height=\"height\"\n      :item-size=\"itemSize\"\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          :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        ></el-tree-node>\n      </template>\n    </fixed-size-list>\n    <div v-else class=\"el-tree__empty-block\">\n      <span class=\"el-tree__empty-text\">{{\n        emptyText || t('el.tree.emptyText')\n      }}</span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance, provide } from 'vue'\nimport { useLocaleInject } from '@element-plus/hooks'\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'\nimport type { TreeProps } from './types'\n\nexport default defineComponent({\n  name: 'ElTreeV2',\n  components: {\n    ElTreeNode,\n    FixedSizeList,\n  },\n  props: treeProps,\n  emits: treeEmits,\n  setup(props: TreeProps, ctx) {\n    provide(ROOT_TREE_INJECTION_KEY, {\n      ctx,\n      props,\n      instance: getCurrentInstance(),\n    })\n    const { t } = useLocaleInject()\n    const {\n      flattenTree,\n      isNotEmpty,\n      toggleExpand,\n      isExpanded,\n      isIndeterminate,\n      isChecked,\n      isDisabled,\n      isCurrent,\n      isForceHiddenExpandIcon,\n      toggleCheckbox,\n      handleNodeClick,\n      handleNodeCheck,\n      // expose\n      getCurrentNode,\n      getCurrentKey,\n      setCurrentKey,\n      getCheckedKeys,\n      getCheckedNodes,\n      getHalfCheckedKeys,\n      getHalfCheckedNodes,\n      setChecked,\n      setCheckedKeys,\n      filter,\n      setData,\n    } = useTree(props, ctx.emit)\n\n    ctx.expose({\n      getCurrentNode,\n      getCurrentKey,\n      setCurrentKey,\n      getCheckedKeys,\n      getCheckedNodes,\n      getHalfCheckedKeys,\n      getHalfCheckedNodes,\n      setChecked,\n      setCheckedKeys,\n      filter,\n      setData,\n    })\n\n    return {\n      t,\n      flattenTree,\n      itemSize: 26,\n      isNotEmpty,\n      toggleExpand,\n      toggleCheckbox,\n      isExpanded,\n      isIndeterminate,\n      isChecked,\n      isDisabled,\n      isCurrent,\n      isForceHiddenExpandIcon,\n      handleNodeClick,\n      handleNodeCheck,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createBlock","_createVNode","_createElementVNode"],"mappings":";;;;;;;;EAmCgB,OAAM;AAAA;qBACV,OAAM;;;;0BAnChBA;IACE,2BAAM;;;IAIN,MAAK;AAAA;IAGG,oCADRC;;MAEE,cAAW;AAAA,MACV,MAAM;MACN,OAAO,iBAAY;AAAA,MACnB,QAAQ;MACR,aAAW;MACX,aAAW;;MAED,qBACT,GADoB,MAAM,OAAO;QACjCC;UACG,KAAK,KAAK,OAAO;AAAA,UACjB,0BAAO;AAAA,UACP,MAAM,KAAK;AAAA,UACX,UAAU,gBAAW,KAAK;AAAA,UAC1B,iBAAe;UACf,SAAS,eAAU,KAAK;AAAA,UACxB,eAAe,qBAAgB,KAAK;AAAA,UACpC,UAAU,gBAAW,KAAK;AAAA,UAC1B,SAAS,eAAU,KAAK;AAAA,UACxB,sBAAoB,6BAAwB,KAAK;AAAA,UACjD,SAAO;UACP,UAAQ;UACR,SAAO;;;;sFAIdF,8BAAA;MACEG,+BAAA,gCACE,kBAAa;;;;;;;"}
+{"version":3,"file":"tree.vue_vue&type=template&id=5b45a1b2&lang.js","sources":["../../../../../../packages/components/tree-v2/src/tree.vue?vue&type=template&id=5b45a1b2&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-tree\"\n    :class=\"{\n      'el-tree--highlight-current': highlightCurrent,\n    }\"\n    role=\"tree\"\n  >\n    <fixed-size-list\n      v-if=\"isNotEmpty\"\n      class-name=\"el-tree-virtual-list\"\n      :data=\"flattenTree\"\n      :total=\"flattenTree.length\"\n      :height=\"height\"\n      :item-size=\"itemSize\"\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          :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        ></el-tree-node>\n      </template>\n    </fixed-size-list>\n    <div v-else class=\"el-tree__empty-block\">\n      <span class=\"el-tree__empty-text\">{{\n        emptyText ?? t('el.tree.emptyText')\n      }}</span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, getCurrentInstance, provide } from 'vue'\nimport { useLocaleInject } from '@element-plus/hooks'\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'\nimport type { TreeProps } from './types'\n\nexport default defineComponent({\n  name: 'ElTreeV2',\n  components: {\n    ElTreeNode,\n    FixedSizeList,\n  },\n  props: treeProps,\n  emits: treeEmits,\n  setup(props: TreeProps, ctx) {\n    provide(ROOT_TREE_INJECTION_KEY, {\n      ctx,\n      props,\n      instance: getCurrentInstance(),\n    })\n    const { t } = useLocaleInject()\n    const {\n      flattenTree,\n      isNotEmpty,\n      toggleExpand,\n      isExpanded,\n      isIndeterminate,\n      isChecked,\n      isDisabled,\n      isCurrent,\n      isForceHiddenExpandIcon,\n      toggleCheckbox,\n      handleNodeClick,\n      handleNodeCheck,\n      // expose\n      getCurrentNode,\n      getCurrentKey,\n      setCurrentKey,\n      getCheckedKeys,\n      getCheckedNodes,\n      getHalfCheckedKeys,\n      getHalfCheckedNodes,\n      setChecked,\n      setCheckedKeys,\n      filter,\n      setData,\n    } = useTree(props, ctx.emit)\n\n    ctx.expose({\n      getCurrentNode,\n      getCurrentKey,\n      setCurrentKey,\n      getCheckedKeys,\n      getCheckedNodes,\n      getHalfCheckedKeys,\n      getHalfCheckedNodes,\n      setChecked,\n      setCheckedKeys,\n      filter,\n      setData,\n    })\n\n    return {\n      t,\n      flattenTree,\n      itemSize: 26,\n      isNotEmpty,\n      toggleExpand,\n      toggleCheckbox,\n      isExpanded,\n      isIndeterminate,\n      isChecked,\n      isDisabled,\n      isCurrent,\n      isForceHiddenExpandIcon,\n      handleNodeClick,\n      handleNodeCheck,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createBlock","_createVNode","_createElementVNode"],"mappings":";;;;;;;;EAmCgB,OAAM;AAAA;qBACV,OAAM;;;;;0BAnChBA;IACE,2BAAM;;;IAIN,MAAK;AAAA;IAGG,oCADRC;;MAEE,cAAW;AAAA,MACV,MAAM;MACN,OAAO,iBAAY;AAAA,MACnB,QAAQ;MACR,aAAW;MACX,aAAW;;MAED,qBACT,GADoB,MAAM,OAAO;QACjCC;UACG,KAAK,KAAK,OAAO;AAAA,UACjB,0BAAO;AAAA,UACP,MAAM,KAAK;AAAA,UACX,UAAU,gBAAW,KAAK;AAAA,UAC1B,iBAAe;UACf,SAAS,eAAU,KAAK;AAAA,UACxB,eAAe,qBAAgB,KAAK;AAAA,UACpC,UAAU,gBAAW,KAAK;AAAA,UAC1B,SAAS,eAAU,KAAK;AAAA,UACxB,sBAAoB,6BAAwB,KAAK;AAAA,UACjD,SAAO;UACP,UAAQ;UACR,SAAO;;;;sFAIdF,8BAAA;MACEG,+BAAA,gCACE,yBAAA,YAAa;;;;;;;"}

package/lib/components/virtual-list/src/builders/build-grid.d.ts

@@ -11,8 +11,9 @@ declare const createGrid: ({ name, clearCache, getColumnPosition, getColumnStart
     readonly innerElement: import("../../../../utils/props").BuildPropReturn<readonly [StringConstructor, ObjectConstructor], "div", unknown, unknown, unknown>;
     readonly style: import("../../../../utils/props").BuildPropReturn<import("../../../../utils/props").PropWrapper<StyleValue>, unknown, unknown, unknown, unknown>;
     readonly useIsScrolling: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly width: import("../../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, true, unknown, unknown>;
+    readonly width: import("../../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, false, unknown, unknown>;
     readonly perfMode: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly scrollbarAlwaysOn: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly columnCache: import("../../../../utils/props").BuildPropReturn<NumberConstructor, 2, false, never, never>;
     readonly columnWidth: import("../../../../utils/props").BuildPropReturn<import("../../../../utils/props").PropWrapper<number | import("../types").ItemSize>, never, true, never, never>;
     readonly estimatedColumnWidth: import("../../../../utils/props").BuildPropReturn<NumberConstructor, never, false, never, never>;
@@ -36,6 +37,7 @@ declare const createGrid: ({ name, clearCache, getColumnPosition, getColumnStart
     readonly useIsScrolling?: unknown;
     readonly width?: unknown;
     readonly perfMode?: unknown;
+    readonly scrollbarAlwaysOn?: unknown;
     readonly columnCache?: unknown;
     readonly columnWidth?: unknown;
     readonly estimatedColumnWidth?: unknown;
@@ -48,11 +50,11 @@ declare const createGrid: ({ name, clearCache, getColumnPosition, getColumnStart
     readonly totalRow?: unknown;
 } & {
     height: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    width: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
     data: any[];
     columnWidth: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<number | import("../types").ItemSize>, never, never>;
     direction: import("../../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl", never>;
     className: string;
+    scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     containerElement: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | Element>, unknown, unknown>;
     innerElement: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
@@ -65,6 +67,7 @@ declare const createGrid: ({ name, clearCache, getColumnPosition, getColumnStart
     totalColumn: number;
     totalRow: number;
 } & {
+    width?: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown> | undefined;
     style?: StyleValue | undefined;
     estimatedColumnWidth?: number | undefined;
     estimatedRowHeight?: number | undefined;
@@ -72,10 +75,12 @@ declare const createGrid: ({ name, clearCache, getColumnPosition, getColumnStart
     onScroll?: ((...args: any[]) => any) | undefined;
     "onItem-rendered"?: ((...args: any[]) => any) | undefined;
 }, {
+    width: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
     style: StyleValue;
     data: any[];
     direction: import("../../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl", never>;
     className: string;
+    scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     containerElement: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | Element>, unknown, unknown>;
     innerElement: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;

package/lib/components/virtual-list/src/builders/build-list.d.ts

@@ -10,8 +10,9 @@ declare const createList: ({ name, getOffset, getItemSize, getItemOffset, getEst
     readonly innerElement: import("../../../../utils/props").BuildPropReturn<readonly [StringConstructor, ObjectConstructor], "div", unknown, unknown, unknown>;
     readonly style: import("../../../../utils/props").BuildPropReturn<import("../../../../utils/props").PropWrapper<import("../../../../utils/types").StyleValue>, unknown, unknown, unknown, unknown>;
     readonly useIsScrolling: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly width: import("../../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, true, unknown, unknown>;
+    readonly width: import("../../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, false, unknown, unknown>;
     readonly perfMode: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly scrollbarAlwaysOn: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly cache: import("../../../../utils/props").BuildPropReturn<NumberConstructor, 2, false, never, never>;
     readonly estimatedItemSize: import("../../../../utils/props").BuildPropReturn<NumberConstructor, never, false, never, never>;
     readonly layout: import("../../../../utils/props").BuildPropReturn<StringConstructor, "vertical", false, "horizontal" | "vertical", never>;
@@ -19,7 +20,7 @@ declare const createList: ({ name, getOffset, getItemSize, getItemOffset, getEst
     readonly total: import("../../../../utils/props").BuildPropReturn<NumberConstructor, never, true, never, never>;
     readonly itemSize: import("../../../../utils/props").BuildPropReturn<import("../../../../utils/props").PropWrapper<number | import("../types").ItemSize>, never, true, never, never>;
 }, {
-    clientSize: import("vue").ComputedRef<string | number>;
+    clientSize: import("vue").ComputedRef<string | number | undefined>;
     estimatedTotalSize: import("vue").ComputedRef<number>;
     windowStyle: import("vue").ComputedRef<(string | CSSProperties | import("../../../../utils/types").StyleValue[] | {
         position: string;
@@ -42,6 +43,7 @@ declare const createList: ({ name, getOffset, getItemSize, getItemOffset, getEst
         scrollOffset: number;
         updateRequested: boolean;
         isScrollbarDragging: boolean;
+        scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     }>;
     getItemStyle: (idx: number) => CSSProperties;
     onScroll: (e: Event) => void;
@@ -61,6 +63,7 @@ declare const createList: ({ name, getOffset, getItemSize, getItemOffset, getEst
     readonly useIsScrolling?: unknown;
     readonly width?: unknown;
     readonly perfMode?: unknown;
+    readonly scrollbarAlwaysOn?: unknown;
     readonly cache?: unknown;
     readonly estimatedItemSize?: unknown;
     readonly layout?: unknown;
@@ -69,12 +72,12 @@ declare const createList: ({ name, getOffset, getItemSize, getItemOffset, getEst
     readonly itemSize?: unknown;
 } & {
     height: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    width: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
     layout: import("../../../../utils/props").BuildPropType<StringConstructor, "horizontal" | "vertical", never>;
     data: any[];
     direction: import("../../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl", never>;
     className: string;
     total: number;
+    scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     containerElement: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | Element>, unknown, unknown>;
     innerElement: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
@@ -83,17 +86,20 @@ declare const createList: ({ name, getOffset, getItemSize, getItemOffset, getEst
     initScrollOffset: number;
     itemSize: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<number | import("../types").ItemSize>, never, never>;
 } & {
+    width?: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown> | undefined;
     style?: import("../../../../utils/types").StyleValue | undefined;
     estimatedItemSize?: number | undefined;
 }> & {
     onScroll?: ((...args: any[]) => any) | undefined;
     "onItem-rendered"?: ((...args: any[]) => any) | undefined;
 }, {
+    width: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
     layout: import("../../../../utils/props").BuildPropType<StringConstructor, "horizontal" | "vertical", never>;
     style: import("../../../../utils/types").StyleValue;
     data: any[];
     direction: import("../../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl", never>;
     className: string;
+    scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     containerElement: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | Element>, unknown, unknown>;
     innerElement: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;

package/lib/components/virtual-list/src/builders/build-list.js

@@ -42,7 +42,8 @@ const createList = ({
         scrollDir: "forward",
         scrollOffset: util.isNumber(props.initScrollOffset) ? props.initScrollOffset : 0,
         updateRequested: false,
-        isScrollbarDragging: false
+        isScrollbarDragging: false,
+        scrollbarAlwaysOn: props.scrollbarAlwaysOn
       });
       const itemsToRender = vue.computed(() => {
         const { total, cache } = props;
@@ -337,8 +338,7 @@ const createList = ({
         onScroll: onScrollbarScroll,
         ratio: clientSize * 100 / this.estimatedTotalSize,
         scrollFrom: states.scrollOffset / (this.estimatedTotalSize - clientSize),
-        total,
-        visible: true
+        total
       });
       const listContainer = vue.h(Container, {
         class: className,
@@ -350,7 +350,10 @@ const createList = ({
       }, !shared.isString(Container) ? { default: () => [InnerNode] } : [InnerNode]);
       return vue.h("div", {
         key: 0,
-        class: "el-vl__wrapper"
+        class: [
+          "el-vl__wrapper",
+          states.scrollbarAlwaysOn ? "always-on" : ""
+        ]
       }, [listContainer, scrollbar$1]);
     }
   });

package/lib/components/virtual-list/src/builders/build-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"build-list.js","sources":["../../../../../../../packages/components/virtual-list/src/builders/build-list.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  ref,\n  nextTick,\n  onMounted,\n  onUpdated,\n  resolveDynamicComponent,\n  h,\n  unref,\n} from 'vue'\nimport { hasOwn } from '@vue/shared'\n\nimport { isNumber, isString } from '@element-plus/utils/util'\nimport isServer from '@element-plus/utils/isServer'\n\nimport { useCache } from '../hooks/use-cache'\nimport useWheel from '../hooks/use-wheel'\nimport Scrollbar from '../components/scrollbar'\nimport { getScrollDir, isHorizontal, getRTLOffsetType } from '../utils'\nimport { virtualizedListProps } from '../props'\nimport {\n  AUTO_ALIGNMENT,\n  BACKWARD,\n  FORWARD,\n  RTL,\n  HORIZONTAL,\n  ITEM_RENDER_EVT,\n  SCROLL_EVT,\n  RTL_OFFSET_NAG,\n  RTL_OFFSET_POS_DESC,\n} from '../defaults'\n\nimport type { VNode, CSSProperties, Slot, VNodeChild } from 'vue'\nimport type { ListConstructorProps, Alignment } from '../types'\nimport type { VirtualizedListProps } from '../props'\n\nconst createList = ({\n  name,\n  getOffset,\n  getItemSize,\n  getItemOffset,\n  getEstimatedTotalSize,\n  getStartIndexForOffset,\n  getStopIndexForStartIndex,\n  initCache,\n  clearCache,\n  validateProps,\n}: ListConstructorProps<VirtualizedListProps>) => {\n  return defineComponent({\n    name: name ?? 'ElVirtualList',\n    props: virtualizedListProps,\n    emits: [ITEM_RENDER_EVT, SCROLL_EVT],\n    setup(props, { emit, expose }) {\n      validateProps(props)\n      const instance = getCurrentInstance()!\n      const dynamicSizeCache = ref(initCache(props, instance))\n\n      const getItemStyleCache = useCache()\n      // refs\n      // here windowRef and innerRef can be type of HTMLElement\n      // or user defined component type, depends on the type passed\n      // by user\n      const windowRef = ref<HTMLElement>()\n      const innerRef = ref<HTMLElement>()\n      const scrollbarRef = ref()\n\n      const states = ref({\n        isScrolling: false,\n        scrollDir: 'forward',\n        scrollOffset: isNumber(props.initScrollOffset)\n          ? props.initScrollOffset\n          : 0,\n        updateRequested: false,\n        isScrollbarDragging: false,\n      })\n\n      // computed\n      const itemsToRender = computed(() => {\n        const { total, cache } = props\n        const { isScrolling, scrollDir, scrollOffset } = unref(states)\n\n        if (total === 0) {\n          return [0, 0, 0, 0]\n        }\n\n        const startIndex = getStartIndexForOffset(\n          props,\n          scrollOffset,\n          unref(dynamicSizeCache)\n        )\n        const stopIndex = getStopIndexForStartIndex(\n          props,\n          startIndex,\n          scrollOffset,\n          unref(dynamicSizeCache)\n        )\n\n        const cacheBackward =\n          !isScrolling || scrollDir === BACKWARD ? Math.max(1, cache) : 1\n        const cacheForward =\n          !isScrolling || scrollDir === FORWARD ? Math.max(1, cache) : 1\n\n        return [\n          Math.max(0, startIndex - cacheBackward),\n          Math.max(0, Math.min(total! - 1, stopIndex + cacheForward)),\n          startIndex,\n          stopIndex,\n        ]\n      })\n\n      const estimatedTotalSize = computed(() =>\n        getEstimatedTotalSize(props, unref(dynamicSizeCache))\n      )\n\n      const _isHorizontal = computed(() => isHorizontal(props.layout))\n\n      const windowStyle = computed(() => [\n        {\n          position: 'relative',\n          overflow: 'hidden',\n          WebkitOverflowScrolling: 'touch',\n          willChange: 'transform',\n        },\n        {\n          direction: props.direction,\n          height: isNumber(props.height) ? `${props.height}px` : props.height,\n          width: isNumber(props.width) ? `${props.width}px` : props.width,\n        },\n        props.style,\n      ])\n\n      const innerStyle = computed(() => {\n        const size = unref(estimatedTotalSize)\n        const horizontal = unref(_isHorizontal)\n        return {\n          height: horizontal ? '100%' : `${size}px`,\n          pointerEvents: unref(states).isScrolling ? 'none' : undefined,\n          width: horizontal ? `${size}px` : '100%',\n        }\n      })\n\n      const clientSize = computed(() =>\n        _isHorizontal.value ? props.width : props.height\n      )\n\n      // methods\n      const { onWheel } = useWheel(\n        {\n          atStartEdge: computed(() => states.value.scrollOffset <= 0),\n          atEndEdge: computed(\n            () => states.value.scrollOffset >= estimatedTotalSize.value\n          ),\n          layout: computed(() => props.layout),\n        },\n        (offset) => {\n          ;(\n            scrollbarRef.value as any as {\n              onMouseUp: () => void\n            }\n          ).onMouseUp?.()\n          scrollTo(\n            Math.min(\n              states.value.scrollOffset + offset,\n              estimatedTotalSize.value - (clientSize.value as number)\n            )\n          )\n        }\n      )\n\n      const emitEvents = () => {\n        const { total } = props\n\n        if (total! > 0) {\n          const [cacheStart, cacheEnd, visibleStart, visibleEnd] =\n            unref(itemsToRender)\n          emit(ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd)\n        }\n\n        const { scrollDir, scrollOffset, updateRequested } = unref(states)\n        emit(SCROLL_EVT, scrollDir, scrollOffset, updateRequested)\n      }\n\n      const scrollVertically = (e: Event) => {\n        const { clientHeight, scrollHeight, scrollTop } =\n          e.currentTarget as HTMLElement\n        const _states = unref(states)\n        if (_states.scrollOffset === scrollTop) {\n          return\n        }\n\n        const scrollOffset = Math.max(\n          0,\n          Math.min(scrollTop, scrollHeight - clientHeight)\n        )\n\n        states.value = {\n          ..._states,\n          isScrolling: true,\n          scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),\n          scrollOffset,\n          updateRequested: false,\n        }\n\n        nextTick(resetIsScrolling)\n      }\n\n      const scrollHorizontally = (e: Event) => {\n        const { clientWidth, scrollLeft, scrollWidth } =\n          e.currentTarget as HTMLElement\n        const _states = unref(states)\n\n        if (_states.scrollOffset === scrollLeft) {\n          return\n        }\n\n        const { direction } = props\n\n        let scrollOffset = scrollLeft\n\n        if (direction === RTL) {\n          // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n          // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.\n          // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.\n          switch (getRTLOffsetType()) {\n            case RTL_OFFSET_NAG: {\n              scrollOffset = -scrollLeft\n              break\n            }\n            case RTL_OFFSET_POS_DESC: {\n              scrollOffset = scrollWidth - clientWidth - scrollLeft\n              break\n            }\n          }\n        }\n\n        scrollOffset = Math.max(\n          0,\n          Math.min(scrollOffset, scrollWidth - clientWidth)\n        )\n\n        states.value = {\n          ..._states,\n          isScrolling: true,\n          scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),\n          scrollOffset,\n          updateRequested: false,\n        }\n\n        nextTick(resetIsScrolling)\n      }\n\n      const onScroll = (e: Event) => {\n        unref(_isHorizontal) ? scrollHorizontally(e) : scrollVertically(e)\n        emitEvents()\n      }\n\n      const onScrollbarScroll = (distanceToGo: number, totalSteps: number) => {\n        const offset =\n          ((estimatedTotalSize.value - (clientSize.value as number)) /\n            totalSteps) *\n          distanceToGo\n        scrollTo(\n          Math.min(\n            estimatedTotalSize.value - (clientSize.value as number),\n            offset\n          )\n        )\n      }\n\n      const scrollTo = (offset: number) => {\n        offset = Math.max(offset, 0)\n\n        if (offset === unref(states).scrollOffset) {\n          return\n        }\n\n        states.value = {\n          ...unref(states),\n          scrollOffset: offset,\n          scrollDir: getScrollDir(unref(states).scrollOffset, offset),\n          updateRequested: true,\n        }\n\n        nextTick(resetIsScrolling)\n      }\n\n      const scrollToItem = (\n        idx: number,\n        alignment: Alignment = AUTO_ALIGNMENT\n      ) => {\n        const { scrollOffset } = unref(states)\n\n        idx = Math.max(0, Math.min(idx, props.total! - 1))\n        scrollTo(\n          getOffset(\n            props,\n            idx,\n            alignment,\n            scrollOffset,\n            unref(dynamicSizeCache)\n          )\n        )\n      }\n\n      const getItemStyle = (idx: number) => {\n        const { direction, itemSize, layout } = props\n\n        const itemStyleCache = getItemStyleCache.value(\n          clearCache && itemSize,\n          clearCache && layout,\n          clearCache && direction\n        )\n\n        let style: CSSProperties\n        if (hasOwn(itemStyleCache, String(idx))) {\n          style = itemStyleCache[idx]\n        } else {\n          const offset = getItemOffset(props, idx, unref(dynamicSizeCache))\n          const size = getItemSize(props, idx, unref(dynamicSizeCache))\n          const horizontal = unref(_isHorizontal)\n\n          const isRtl = direction === RTL\n          const offsetHorizontal = horizontal ? offset : 0\n          itemStyleCache[idx] = style = {\n            position: 'absolute',\n            left: isRtl ? undefined : `${offsetHorizontal}px`,\n            right: isRtl ? `${offsetHorizontal}px` : undefined,\n            top: !horizontal ? `${offset}px` : 0,\n            height: !horizontal ? `${size}px` : '100%',\n            width: horizontal ? `${size}px` : '100%',\n          }\n        }\n\n        return style\n      }\n\n      // TODO:\n      // perf optimization here, reset isScrolling with debounce.\n\n      const resetIsScrolling = () => {\n        // timer = null\n\n        states.value.isScrolling = false\n        nextTick(() => {\n          getItemStyleCache.value(-1, null, null)\n        })\n      }\n\n      const resetScrollTop = () => {\n        const window = windowRef.value\n        if (window) {\n          window.scrollTop = 0\n        }\n      }\n\n      // life cycles\n      onMounted(() => {\n        if (isServer) return\n        const { initScrollOffset } = props\n        const windowElement = unref(windowRef)\n        if (isNumber(initScrollOffset) && windowElement) {\n          if (unref(_isHorizontal)) {\n            windowElement.scrollLeft = initScrollOffset\n          } else {\n            windowElement.scrollTop = initScrollOffset\n          }\n        }\n\n        emitEvents()\n      })\n\n      onUpdated(() => {\n        const { direction, layout } = props\n        const { scrollOffset, updateRequested } = unref(states)\n        const windowElement = unref(windowRef)\n\n        if (updateRequested && windowElement) {\n          if (layout === HORIZONTAL) {\n            if (direction === RTL) {\n              // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n              // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n              // So we need to determine which browser behavior we're dealing with, and mimic it.\n              switch (getRTLOffsetType()) {\n                case 'negative': {\n                  windowElement.scrollLeft = -scrollOffset\n                  break\n                }\n                case 'positive-ascending': {\n                  windowElement.scrollLeft = scrollOffset\n                  break\n                }\n                default: {\n                  const { clientWidth, scrollWidth } = windowElement\n                  windowElement.scrollLeft =\n                    scrollWidth - clientWidth - scrollOffset\n                  break\n                }\n              }\n            } else {\n              windowElement.scrollLeft = scrollOffset\n            }\n          } else {\n            windowElement.scrollTop = scrollOffset\n          }\n        }\n      })\n\n      const api = {\n        clientSize,\n        estimatedTotalSize,\n        windowStyle,\n        windowRef,\n        innerRef,\n        innerStyle,\n        itemsToRender,\n        scrollbarRef,\n        states,\n        getItemStyle,\n        onScroll,\n        onScrollbarScroll,\n        onWheel,\n        scrollTo,\n        scrollToItem,\n        resetScrollTop,\n      }\n\n      expose({\n        windowRef,\n        innerRef,\n        getItemStyleCache,\n        scrollTo,\n        scrollToItem,\n        resetScrollTop,\n        states,\n      })\n\n      return api\n    },\n\n    render(ctx: any) {\n      const {\n        $slots,\n        className,\n        clientSize,\n        containerElement,\n        data,\n        getItemStyle,\n        innerElement,\n        itemsToRender,\n        innerStyle,\n        layout,\n        total,\n        onScroll,\n        onScrollbarScroll,\n        onWheel,\n        states,\n        useIsScrolling,\n        windowStyle,\n      } = ctx\n\n      const [start, end] = itemsToRender\n\n      const Container = resolveDynamicComponent(containerElement)\n      const Inner = resolveDynamicComponent(innerElement)\n\n      const children = [] as VNodeChild[]\n\n      if (total > 0) {\n        for (let i = start; i <= end; i++) {\n          children.push(\n            ($slots.default as Slot)?.({\n              data,\n              key: i,\n              index: i,\n              isScrolling: useIsScrolling ? states.isScrolling : undefined,\n              style: getItemStyle(i),\n            })\n          )\n        }\n      }\n\n      const InnerNode = [\n        h(\n          Inner as VNode,\n          {\n            style: innerStyle,\n            ref: 'innerRef',\n          },\n          !isString(Inner)\n            ? {\n                default: () => children,\n              }\n            : children\n        ),\n      ]\n\n      const scrollbar = h(Scrollbar, {\n        ref: 'scrollbarRef',\n        clientSize,\n        layout,\n        onScroll: onScrollbarScroll,\n        ratio: (clientSize * 100) / this.estimatedTotalSize,\n        scrollFrom:\n          states.scrollOffset / (this.estimatedTotalSize - clientSize),\n        total,\n        visible: true,\n      })\n\n      const listContainer = h(\n        Container as VNode,\n        {\n          class: className,\n          style: windowStyle,\n          onScroll,\n          onWheel,\n          ref: 'windowRef',\n          key: 0,\n        },\n        !isString(Container) ? { default: () => [InnerNode] } : [InnerNode]\n      )\n\n      return h(\n        'div',\n        {\n          key: 0,\n          class: 'el-vl__wrapper',\n        },\n        [listContainer, scrollbar]\n      )\n    },\n  })\n}\n\nexport default createList\n"],"names":["defineComponent","virtualizedListProps","ITEM_RENDER_EVT","SCROLL_EVT","getCurrentInstance","ref","useCache","isNumber","computed","unref","BACKWARD","FORWARD","isHorizontal","useWheel","getScrollDir","RTL","getRTLOffsetType","RTL_OFFSET_NAG","RTL_OFFSET_POS_DESC","AUTO_ALIGNMENT","hasOwn","isServer","HORIZONTAL","resolveDynamicComponent","h","isString","scrollbar","Scrollbar"],"mappings":"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"}
+{"version":3,"file":"build-list.js","sources":["../../../../../../../packages/components/virtual-list/src/builders/build-list.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  ref,\n  nextTick,\n  onMounted,\n  onUpdated,\n  resolveDynamicComponent,\n  h,\n  unref,\n} from 'vue'\nimport { hasOwn } from '@vue/shared'\n\nimport { isNumber, isString } from '@element-plus/utils/util'\nimport isServer from '@element-plus/utils/isServer'\n\nimport { useCache } from '../hooks/use-cache'\nimport useWheel from '../hooks/use-wheel'\nimport Scrollbar from '../components/scrollbar'\nimport { getScrollDir, isHorizontal, getRTLOffsetType } from '../utils'\nimport { virtualizedListProps } from '../props'\nimport {\n  AUTO_ALIGNMENT,\n  BACKWARD,\n  FORWARD,\n  RTL,\n  HORIZONTAL,\n  ITEM_RENDER_EVT,\n  SCROLL_EVT,\n  RTL_OFFSET_NAG,\n  RTL_OFFSET_POS_DESC,\n} from '../defaults'\n\nimport type { VNode, CSSProperties, Slot, VNodeChild } from 'vue'\nimport type { ListConstructorProps, Alignment } from '../types'\nimport type { VirtualizedListProps } from '../props'\n\nconst createList = ({\n  name,\n  getOffset,\n  getItemSize,\n  getItemOffset,\n  getEstimatedTotalSize,\n  getStartIndexForOffset,\n  getStopIndexForStartIndex,\n  initCache,\n  clearCache,\n  validateProps,\n}: ListConstructorProps<VirtualizedListProps>) => {\n  return defineComponent({\n    name: name ?? 'ElVirtualList',\n    props: virtualizedListProps,\n    emits: [ITEM_RENDER_EVT, SCROLL_EVT],\n    setup(props, { emit, expose }) {\n      validateProps(props)\n      const instance = getCurrentInstance()!\n      const dynamicSizeCache = ref(initCache(props, instance))\n\n      const getItemStyleCache = useCache()\n      // refs\n      // here windowRef and innerRef can be type of HTMLElement\n      // or user defined component type, depends on the type passed\n      // by user\n      const windowRef = ref<HTMLElement>()\n      const innerRef = ref<HTMLElement>()\n      const scrollbarRef = ref()\n      const states = ref({\n        isScrolling: false,\n        scrollDir: 'forward',\n        scrollOffset: isNumber(props.initScrollOffset)\n          ? props.initScrollOffset\n          : 0,\n        updateRequested: false,\n        isScrollbarDragging: false,\n        scrollbarAlwaysOn: props.scrollbarAlwaysOn,\n      })\n\n      // computed\n      const itemsToRender = computed(() => {\n        const { total, cache } = props\n        const { isScrolling, scrollDir, scrollOffset } = unref(states)\n\n        if (total === 0) {\n          return [0, 0, 0, 0]\n        }\n\n        const startIndex = getStartIndexForOffset(\n          props,\n          scrollOffset,\n          unref(dynamicSizeCache)\n        )\n        const stopIndex = getStopIndexForStartIndex(\n          props,\n          startIndex,\n          scrollOffset,\n          unref(dynamicSizeCache)\n        )\n\n        const cacheBackward =\n          !isScrolling || scrollDir === BACKWARD ? Math.max(1, cache) : 1\n        const cacheForward =\n          !isScrolling || scrollDir === FORWARD ? Math.max(1, cache) : 1\n\n        return [\n          Math.max(0, startIndex - cacheBackward),\n          Math.max(0, Math.min(total! - 1, stopIndex + cacheForward)),\n          startIndex,\n          stopIndex,\n        ]\n      })\n\n      const estimatedTotalSize = computed(() =>\n        getEstimatedTotalSize(props, unref(dynamicSizeCache))\n      )\n\n      const _isHorizontal = computed(() => isHorizontal(props.layout))\n\n      const windowStyle = computed(() => [\n        {\n          position: 'relative',\n          overflow: 'hidden',\n          WebkitOverflowScrolling: 'touch',\n          willChange: 'transform',\n        },\n        {\n          direction: props.direction,\n          height: isNumber(props.height) ? `${props.height}px` : props.height,\n          width: isNumber(props.width) ? `${props.width}px` : props.width,\n        },\n        props.style,\n      ])\n\n      const innerStyle = computed(() => {\n        const size = unref(estimatedTotalSize)\n        const horizontal = unref(_isHorizontal)\n        return {\n          height: horizontal ? '100%' : `${size}px`,\n          pointerEvents: unref(states).isScrolling ? 'none' : undefined,\n          width: horizontal ? `${size}px` : '100%',\n        }\n      })\n\n      const clientSize = computed(() =>\n        _isHorizontal.value ? props.width : props.height\n      )\n\n      // methods\n      const { onWheel } = useWheel(\n        {\n          atStartEdge: computed(() => states.value.scrollOffset <= 0),\n          atEndEdge: computed(\n            () => states.value.scrollOffset >= estimatedTotalSize.value\n          ),\n          layout: computed(() => props.layout),\n        },\n        (offset) => {\n          ;(\n            scrollbarRef.value as any as {\n              onMouseUp: () => void\n            }\n          ).onMouseUp?.()\n          scrollTo(\n            Math.min(\n              states.value.scrollOffset + offset,\n              estimatedTotalSize.value - (clientSize.value as number)\n            )\n          )\n        }\n      )\n\n      const emitEvents = () => {\n        const { total } = props\n\n        if (total! > 0) {\n          const [cacheStart, cacheEnd, visibleStart, visibleEnd] =\n            unref(itemsToRender)\n          emit(ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd)\n        }\n\n        const { scrollDir, scrollOffset, updateRequested } = unref(states)\n        emit(SCROLL_EVT, scrollDir, scrollOffset, updateRequested)\n      }\n\n      const scrollVertically = (e: Event) => {\n        const { clientHeight, scrollHeight, scrollTop } =\n          e.currentTarget as HTMLElement\n        const _states = unref(states)\n        if (_states.scrollOffset === scrollTop) {\n          return\n        }\n\n        const scrollOffset = Math.max(\n          0,\n          Math.min(scrollTop, scrollHeight - clientHeight)\n        )\n\n        states.value = {\n          ..._states,\n          isScrolling: true,\n          scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),\n          scrollOffset,\n          updateRequested: false,\n        }\n\n        nextTick(resetIsScrolling)\n      }\n\n      const scrollHorizontally = (e: Event) => {\n        const { clientWidth, scrollLeft, scrollWidth } =\n          e.currentTarget as HTMLElement\n        const _states = unref(states)\n\n        if (_states.scrollOffset === scrollLeft) {\n          return\n        }\n\n        const { direction } = props\n\n        let scrollOffset = scrollLeft\n\n        if (direction === RTL) {\n          // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n          // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.\n          // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.\n          switch (getRTLOffsetType()) {\n            case RTL_OFFSET_NAG: {\n              scrollOffset = -scrollLeft\n              break\n            }\n            case RTL_OFFSET_POS_DESC: {\n              scrollOffset = scrollWidth - clientWidth - scrollLeft\n              break\n            }\n          }\n        }\n\n        scrollOffset = Math.max(\n          0,\n          Math.min(scrollOffset, scrollWidth - clientWidth)\n        )\n\n        states.value = {\n          ..._states,\n          isScrolling: true,\n          scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),\n          scrollOffset,\n          updateRequested: false,\n        }\n\n        nextTick(resetIsScrolling)\n      }\n\n      const onScroll = (e: Event) => {\n        unref(_isHorizontal) ? scrollHorizontally(e) : scrollVertically(e)\n        emitEvents()\n      }\n\n      const onScrollbarScroll = (distanceToGo: number, totalSteps: number) => {\n        const offset =\n          ((estimatedTotalSize.value - (clientSize.value as number)) /\n            totalSteps) *\n          distanceToGo\n        scrollTo(\n          Math.min(\n            estimatedTotalSize.value - (clientSize.value as number),\n            offset\n          )\n        )\n      }\n\n      const scrollTo = (offset: number) => {\n        offset = Math.max(offset, 0)\n\n        if (offset === unref(states).scrollOffset) {\n          return\n        }\n\n        states.value = {\n          ...unref(states),\n          scrollOffset: offset,\n          scrollDir: getScrollDir(unref(states).scrollOffset, offset),\n          updateRequested: true,\n        }\n\n        nextTick(resetIsScrolling)\n      }\n\n      const scrollToItem = (\n        idx: number,\n        alignment: Alignment = AUTO_ALIGNMENT\n      ) => {\n        const { scrollOffset } = unref(states)\n\n        idx = Math.max(0, Math.min(idx, props.total! - 1))\n        scrollTo(\n          getOffset(\n            props,\n            idx,\n            alignment,\n            scrollOffset,\n            unref(dynamicSizeCache)\n          )\n        )\n      }\n\n      const getItemStyle = (idx: number) => {\n        const { direction, itemSize, layout } = props\n\n        const itemStyleCache = getItemStyleCache.value(\n          clearCache && itemSize,\n          clearCache && layout,\n          clearCache && direction\n        )\n\n        let style: CSSProperties\n        if (hasOwn(itemStyleCache, String(idx))) {\n          style = itemStyleCache[idx]\n        } else {\n          const offset = getItemOffset(props, idx, unref(dynamicSizeCache))\n          const size = getItemSize(props, idx, unref(dynamicSizeCache))\n          const horizontal = unref(_isHorizontal)\n\n          const isRtl = direction === RTL\n          const offsetHorizontal = horizontal ? offset : 0\n          itemStyleCache[idx] = style = {\n            position: 'absolute',\n            left: isRtl ? undefined : `${offsetHorizontal}px`,\n            right: isRtl ? `${offsetHorizontal}px` : undefined,\n            top: !horizontal ? `${offset}px` : 0,\n            height: !horizontal ? `${size}px` : '100%',\n            width: horizontal ? `${size}px` : '100%',\n          }\n        }\n\n        return style\n      }\n\n      // TODO:\n      // perf optimization here, reset isScrolling with debounce.\n\n      const resetIsScrolling = () => {\n        // timer = null\n\n        states.value.isScrolling = false\n        nextTick(() => {\n          getItemStyleCache.value(-1, null, null)\n        })\n      }\n\n      const resetScrollTop = () => {\n        const window = windowRef.value\n        if (window) {\n          window.scrollTop = 0\n        }\n      }\n\n      // life cycles\n      onMounted(() => {\n        if (isServer) return\n        const { initScrollOffset } = props\n        const windowElement = unref(windowRef)\n        if (isNumber(initScrollOffset) && windowElement) {\n          if (unref(_isHorizontal)) {\n            windowElement.scrollLeft = initScrollOffset\n          } else {\n            windowElement.scrollTop = initScrollOffset\n          }\n        }\n\n        emitEvents()\n      })\n\n      onUpdated(() => {\n        const { direction, layout } = props\n        const { scrollOffset, updateRequested } = unref(states)\n        const windowElement = unref(windowRef)\n\n        if (updateRequested && windowElement) {\n          if (layout === HORIZONTAL) {\n            if (direction === RTL) {\n              // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n              // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n              // So we need to determine which browser behavior we're dealing with, and mimic it.\n              switch (getRTLOffsetType()) {\n                case 'negative': {\n                  windowElement.scrollLeft = -scrollOffset\n                  break\n                }\n                case 'positive-ascending': {\n                  windowElement.scrollLeft = scrollOffset\n                  break\n                }\n                default: {\n                  const { clientWidth, scrollWidth } = windowElement\n                  windowElement.scrollLeft =\n                    scrollWidth - clientWidth - scrollOffset\n                  break\n                }\n              }\n            } else {\n              windowElement.scrollLeft = scrollOffset\n            }\n          } else {\n            windowElement.scrollTop = scrollOffset\n          }\n        }\n      })\n\n      const api = {\n        clientSize,\n        estimatedTotalSize,\n        windowStyle,\n        windowRef,\n        innerRef,\n        innerStyle,\n        itemsToRender,\n        scrollbarRef,\n        states,\n        getItemStyle,\n        onScroll,\n        onScrollbarScroll,\n        onWheel,\n        scrollTo,\n        scrollToItem,\n        resetScrollTop,\n      }\n\n      expose({\n        windowRef,\n        innerRef,\n        getItemStyleCache,\n        scrollTo,\n        scrollToItem,\n        resetScrollTop,\n        states,\n      })\n\n      return api\n    },\n\n    render(ctx: any) {\n      const {\n        $slots,\n        className,\n        clientSize,\n        containerElement,\n        data,\n        getItemStyle,\n        innerElement,\n        itemsToRender,\n        innerStyle,\n        layout,\n        total,\n        onScroll,\n        onScrollbarScroll,\n        onWheel,\n        states,\n        useIsScrolling,\n        windowStyle,\n      } = ctx\n\n      const [start, end] = itemsToRender\n\n      const Container = resolveDynamicComponent(containerElement)\n      const Inner = resolveDynamicComponent(innerElement)\n\n      const children = [] as VNodeChild[]\n\n      if (total > 0) {\n        for (let i = start; i <= end; i++) {\n          children.push(\n            ($slots.default as Slot)?.({\n              data,\n              key: i,\n              index: i,\n              isScrolling: useIsScrolling ? states.isScrolling : undefined,\n              style: getItemStyle(i),\n            })\n          )\n        }\n      }\n\n      const InnerNode = [\n        h(\n          Inner as VNode,\n          {\n            style: innerStyle,\n            ref: 'innerRef',\n          },\n          !isString(Inner)\n            ? {\n                default: () => children,\n              }\n            : children\n        ),\n      ]\n\n      const scrollbar = h(Scrollbar, {\n        ref: 'scrollbarRef',\n        clientSize,\n        layout,\n        onScroll: onScrollbarScroll,\n        ratio: (clientSize * 100) / this.estimatedTotalSize,\n        scrollFrom:\n          states.scrollOffset / (this.estimatedTotalSize - clientSize),\n        total,\n      })\n\n      const listContainer = h(\n        Container as VNode,\n        {\n          class: className,\n          style: windowStyle,\n          onScroll,\n          onWheel,\n          ref: 'windowRef',\n          key: 0,\n        },\n        !isString(Container) ? { default: () => [InnerNode] } : [InnerNode]\n      )\n\n      return h(\n        'div',\n        {\n          key: 0,\n          class: [\n            'el-vl__wrapper',\n            states.scrollbarAlwaysOn ? 'always-on' : '',\n          ],\n        },\n        [listContainer, scrollbar]\n      )\n    },\n  })\n}\n\nexport default createList\n"],"names":["defineComponent","virtualizedListProps","ITEM_RENDER_EVT","SCROLL_EVT","getCurrentInstance","ref","useCache","isNumber","computed","unref","BACKWARD","FORWARD","isHorizontal","useWheel","getScrollDir","RTL","getRTLOffsetType","RTL_OFFSET_NAG","RTL_OFFSET_POS_DESC","AUTO_ALIGNMENT","hasOwn","isServer","HORIZONTAL","resolveDynamicComponent","h","isString","scrollbar","Scrollbar"],"mappings":"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"}

package/lib/components/virtual-list/src/components/dynamic-size-grid.d.ts

@@ -8,8 +8,9 @@ declare const FixedSizeGrid: import("vue").DefineComponent<{
     readonly innerElement: import("../../../../utils/props").BuildPropReturn<readonly [StringConstructor, ObjectConstructor], "div", unknown, unknown, unknown>;
     readonly style: import("../../../../utils/props").BuildPropReturn<import("../../../../utils/props").PropWrapper<import("../../../../utils/types").StyleValue>, unknown, unknown, unknown, unknown>;
     readonly useIsScrolling: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly width: import("../../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, true, unknown, unknown>;
+    readonly width: import("../../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, false, unknown, unknown>;
     readonly perfMode: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly scrollbarAlwaysOn: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly columnCache: import("../../../../utils/props").BuildPropReturn<NumberConstructor, 2, false, never, never>;
     readonly columnWidth: import("../../../../utils/props").BuildPropReturn<import("../../../../utils/props").PropWrapper<number | ItemSize>, never, true, never, never>;
     readonly estimatedColumnWidth: import("../../../../utils/props").BuildPropReturn<NumberConstructor, never, false, never, never>;
@@ -33,6 +34,7 @@ declare const FixedSizeGrid: import("vue").DefineComponent<{
     readonly useIsScrolling?: unknown;
     readonly width?: unknown;
     readonly perfMode?: unknown;
+    readonly scrollbarAlwaysOn?: unknown;
     readonly columnCache?: unknown;
     readonly columnWidth?: unknown;
     readonly estimatedColumnWidth?: unknown;
@@ -45,11 +47,11 @@ declare const FixedSizeGrid: import("vue").DefineComponent<{
     readonly totalRow?: unknown;
 } & {
     height: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    width: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
     data: any[];
     columnWidth: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<number | ItemSize>, never, never>;
     direction: import("../../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl", never>;
     className: string;
+    scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     containerElement: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | Element>, unknown, unknown>;
     innerElement: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
@@ -62,6 +64,7 @@ declare const FixedSizeGrid: import("vue").DefineComponent<{
     totalColumn: number;
     totalRow: number;
 } & {
+    width?: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown> | undefined;
     style?: import("../../../../utils/types").StyleValue | undefined;
     estimatedColumnWidth?: number | undefined;
     estimatedRowHeight?: number | undefined;
@@ -69,10 +72,12 @@ declare const FixedSizeGrid: import("vue").DefineComponent<{
     onScroll?: ((...args: any[]) => any) | undefined;
     "onItem-rendered"?: ((...args: any[]) => any) | undefined;
 }, {
+    width: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
     style: import("../../../../utils/types").StyleValue;
     data: any[];
     direction: import("../../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl", never>;
     className: string;
+    scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     containerElement: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | Element>, unknown, unknown>;
     innerElement: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;

package/lib/components/virtual-list/src/components/dynamic-size-list.d.ts

@@ -8,8 +8,9 @@ declare const DynamicSizeList: import("vue").DefineComponent<{
     readonly innerElement: import("../../../../utils/props").BuildPropReturn<readonly [StringConstructor, ObjectConstructor], "div", unknown, unknown, unknown>;
     readonly style: import("../../../../utils/props").BuildPropReturn<import("../../../../utils/props").PropWrapper<import("../../../../utils/types").StyleValue>, unknown, unknown, unknown, unknown>;
     readonly useIsScrolling: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly width: import("../../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, true, unknown, unknown>;
+    readonly width: import("../../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, false, unknown, unknown>;
     readonly perfMode: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly scrollbarAlwaysOn: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly cache: import("../../../../utils/props").BuildPropReturn<NumberConstructor, 2, false, never, never>;
     readonly estimatedItemSize: import("../../../../utils/props").BuildPropReturn<NumberConstructor, never, false, never, never>;
     readonly layout: import("../../../../utils/props").BuildPropReturn<StringConstructor, "vertical", false, "horizontal" | "vertical", never>;
@@ -17,7 +18,7 @@ declare const DynamicSizeList: import("vue").DefineComponent<{
     readonly total: import("../../../../utils/props").BuildPropReturn<NumberConstructor, never, true, never, never>;
     readonly itemSize: import("../../../../utils/props").BuildPropReturn<import("../../../../utils/props").PropWrapper<number | ItemSize>, never, true, never, never>;
 }, {
-    clientSize: import("vue").ComputedRef<string | number>;
+    clientSize: import("vue").ComputedRef<string | number | undefined>;
     estimatedTotalSize: import("vue").ComputedRef<number>;
     windowStyle: import("vue").ComputedRef<(string | import("vue").CSSProperties | import("../../../../utils/types").StyleValue[] | {
         position: string;
@@ -40,6 +41,7 @@ declare const DynamicSizeList: import("vue").DefineComponent<{
         scrollOffset: number;
         updateRequested: boolean;
         isScrollbarDragging: boolean;
+        scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     }>;
     getItemStyle: (idx: number) => import("vue").CSSProperties;
     onScroll: (e: Event) => void;
@@ -59,6 +61,7 @@ declare const DynamicSizeList: import("vue").DefineComponent<{
     readonly useIsScrolling?: unknown;
     readonly width?: unknown;
     readonly perfMode?: unknown;
+    readonly scrollbarAlwaysOn?: unknown;
     readonly cache?: unknown;
     readonly estimatedItemSize?: unknown;
     readonly layout?: unknown;
@@ -67,12 +70,12 @@ declare const DynamicSizeList: import("vue").DefineComponent<{
     readonly itemSize?: unknown;
 } & {
     height: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    width: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
     layout: import("../../../../utils/props").BuildPropType<StringConstructor, "horizontal" | "vertical", never>;
     data: any[];
     direction: import("../../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl", never>;
     className: string;
     total: number;
+    scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     containerElement: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | Element>, unknown, unknown>;
     innerElement: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
@@ -81,17 +84,20 @@ declare const DynamicSizeList: import("vue").DefineComponent<{
     initScrollOffset: number;
     itemSize: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<number | ItemSize>, never, never>;
 } & {
+    width?: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown> | undefined;
     style?: import("../../../../utils/types").StyleValue | undefined;
     estimatedItemSize?: number | undefined;
 }> & {
     onScroll?: ((...args: any[]) => any) | undefined;
     "onItem-rendered"?: ((...args: any[]) => any) | undefined;
 }, {
+    width: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
     layout: import("../../../../utils/props").BuildPropType<StringConstructor, "horizontal" | "vertical", never>;
     style: import("../../../../utils/types").StyleValue;
     data: any[];
     direction: import("../../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl", never>;
     className: string;
+    scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     containerElement: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | Element>, unknown, unknown>;
     innerElement: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;

package/lib/components/virtual-list/src/components/fixed-size-grid.d.ts

@@ -7,8 +7,9 @@ declare const FixedSizeGrid: import("vue").DefineComponent<{
     readonly innerElement: import("../../../../utils/props").BuildPropReturn<readonly [StringConstructor, ObjectConstructor], "div", unknown, unknown, unknown>;
     readonly style: import("../../../../utils/props").BuildPropReturn<import("../../../../utils/props").PropWrapper<import("../../../../utils/types").StyleValue>, unknown, unknown, unknown, unknown>;
     readonly useIsScrolling: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly width: import("../../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, true, unknown, unknown>;
+    readonly width: import("../../../../utils/props").BuildPropReturn<readonly [NumberConstructor, StringConstructor], unknown, false, unknown, unknown>;
     readonly perfMode: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly scrollbarAlwaysOn: import("../../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly columnCache: import("../../../../utils/props").BuildPropReturn<NumberConstructor, 2, false, never, never>;
     readonly columnWidth: import("../../../../utils/props").BuildPropReturn<import("../../../../utils/props").PropWrapper<number | import("../types").ItemSize>, never, true, never, never>;
     readonly estimatedColumnWidth: import("../../../../utils/props").BuildPropReturn<NumberConstructor, never, false, never, never>;
@@ -32,6 +33,7 @@ declare const FixedSizeGrid: import("vue").DefineComponent<{
     readonly useIsScrolling?: unknown;
     readonly width?: unknown;
     readonly perfMode?: unknown;
+    readonly scrollbarAlwaysOn?: unknown;
     readonly columnCache?: unknown;
     readonly columnWidth?: unknown;
     readonly estimatedColumnWidth?: unknown;
@@ -44,11 +46,11 @@ declare const FixedSizeGrid: import("vue").DefineComponent<{
     readonly totalRow?: unknown;
 } & {
     height: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    width: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
     data: any[];
     columnWidth: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<number | import("../types").ItemSize>, never, never>;
     direction: import("../../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl", never>;
     className: string;
+    scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     containerElement: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | Element>, unknown, unknown>;
     innerElement: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;
@@ -61,6 +63,7 @@ declare const FixedSizeGrid: import("vue").DefineComponent<{
     totalColumn: number;
     totalRow: number;
 } & {
+    width?: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown> | undefined;
     style?: import("../../../../utils/types").StyleValue | undefined;
     estimatedColumnWidth?: number | undefined;
     estimatedRowHeight?: number | undefined;
@@ -68,10 +71,12 @@ declare const FixedSizeGrid: import("vue").DefineComponent<{
     onScroll?: ((...args: any[]) => any) | undefined;
     "onItem-rendered"?: ((...args: any[]) => any) | undefined;
 }, {
+    width: import("../../../../utils/props").BuildPropType<readonly [NumberConstructor, StringConstructor], unknown, unknown>;
     style: import("../../../../utils/types").StyleValue;
     data: any[];
     direction: import("../../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl", never>;
     className: string;
+    scrollbarAlwaysOn: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     perfMode: import("../../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     containerElement: import("../../../../utils/props").BuildPropType<import("../../../../utils/props").PropWrapper<string | Element>, unknown, unknown>;
     innerElement: import("../../../../utils/props").BuildPropType<readonly [StringConstructor, ObjectConstructor], unknown, unknown>;