@element-plus/nightly 0.0.20220126 → 0.0.20220127

package/es/components/pagination/src/pagination.mjs

@@ -161,6 +161,14 @@ var Pagination = defineComponent({
       currentPageBridge.value += 1;
       emit("next-click", currentPageBridge.value);
     }
+    function addClass(element, cls) {
+      if (element) {
+        if (!element.props) {
+          element.props = {};
+        }
+        element.props.class = [element.props.class, cls].join(" ");
+      }
+    }
     provide(elPaginationKey, {
       pageCount: pageCountBridge,
       disabled: computed(() => props.disabled),
@@ -207,7 +215,8 @@ var Pagination = defineComponent({
           pageSize: pageSizeBridge.value,
           pageSizes: props.pageSizes,
           popperClass: props.popperClass,
-          disabled: props.disabled
+          disabled: props.disabled,
+          size: props.small ? "small" : "default"
         }),
         slot: (_b = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : null,
         total: h(Total, { total: isAbsent(props.total) ? 0 : props.total })
@@ -228,6 +237,8 @@ var Pagination = defineComponent({
       if (haveRightWrapper && rightWrapperChildren.length > 0) {
         rootChildren.unshift(rightWrapperRoot);
       }
+      addClass(rootChildren[0], "is-first");
+      addClass(rootChildren[rootChildren.length - 1], "is-last");
       return h("div", {
         role: "pagination",
         "aria-label": "pagination",

package/es/components/pagination/src/pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.mjs","sources":["../../../../../../packages/components/pagination/src/pagination.ts"],"sourcesContent":["import {\n  h,\n  ref,\n  provide,\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  watch,\n} from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { elPaginationKey } from '@element-plus/tokens'\n\nimport Prev from './components/prev.vue'\nimport Next from './components/next.vue'\nimport Sizes from './components/sizes.vue'\nimport Jumper from './components/jumper.vue'\nimport Total from './components/total.vue'\nimport Pager from './components/pager.vue'\n\nimport type { VNode, ExtractPropTypes } from 'vue'\n\n/**\n * It it user's responsibility to guarantee that the value of props.total... is number\n * (same as pageSize, defaultPageSize, currentPage, defaultCurrentPage, pageCount)\n * Otherwise we can reasonable infer that the corresponding field is absent\n */\nconst isAbsent = (v: unknown): v is undefined => typeof v !== 'number'\n\ntype LayoutKey =\n  | 'prev'\n  | 'pager'\n  | 'next'\n  | 'jumper'\n  | '->'\n  | 'total'\n  | 'sizes'\n  | 'slot'\n\nexport const paginationProps = buildProps({\n  total: Number,\n  pageSize: Number,\n  defaultPageSize: Number,\n  currentPage: Number,\n  defaultCurrentPage: Number,\n  pageCount: Number,\n  pagerCount: {\n    type: Number,\n    validator: (value: unknown) => {\n      return (\n        typeof value === 'number' &&\n        (value | 0) === value &&\n        value > 4 &&\n        value < 22 &&\n        value % 2 === 1\n      )\n    },\n    default: 7,\n  },\n  layout: {\n    type: String,\n    default: (\n      ['prev', 'pager', 'next', 'jumper', '->', 'total'] as LayoutKey[]\n    ).join(', '),\n  },\n  pageSizes: {\n    type: definePropType<number[]>(Array),\n    default: () => mutable([10, 20, 30, 40, 50, 100] as const),\n  },\n  popperClass: {\n    type: String,\n    default: '',\n  },\n  prevText: {\n    type: String,\n    default: '',\n  },\n  nextText: {\n    type: String,\n    default: '',\n  },\n  small: Boolean,\n  background: Boolean,\n  disabled: Boolean,\n  hideOnSinglePage: Boolean,\n} as const)\nexport type PaginationProps = ExtractPropTypes<typeof paginationProps>\n\nexport const paginationEmits = {\n  'update:current-page': (val: number) => typeof val === 'number',\n  'update:page-size': (val: number) => typeof val === 'number',\n  'size-change': (val: number) => typeof val === 'number',\n  'current-change': (val: number) => typeof val === 'number',\n  'prev-click': (val: number) => typeof val === 'number',\n  'next-click': (val: number) => typeof val === 'number',\n}\nexport type PaginationEmits = typeof paginationEmits\n\nconst componentName = 'ElPagination'\nexport default defineComponent({\n  name: componentName,\n\n  props: paginationProps,\n  emits: paginationEmits,\n\n  setup(props, { emit, slots }) {\n    const { t } = useLocale()\n    const vnodeProps = getCurrentInstance()!.vnode.props || {}\n    // we can find @xxx=\"xxx\" props on `vnodeProps` to check if user bind corresponding events\n    const hasCurrentPageListener =\n      'onUpdate:currentPage' in vnodeProps ||\n      'onUpdate:current-page' in vnodeProps ||\n      'onCurrentChange' in vnodeProps\n    const hasPageSizeListener =\n      'onUpdate:pageSize' in vnodeProps ||\n      'onUpdate:page-size' in vnodeProps ||\n      'onSizeChange' in vnodeProps\n    const assertValidUsage = computed(() => {\n      // Users have to set either one, otherwise count of pages cannot be determined\n      if (isAbsent(props.total) && isAbsent(props.pageCount)) return false\n      // <el-pagination ...otherProps :current-page=\"xxx\" /> without corresponding listener is forbidden now\n      // Users have to use two way binding of `currentPage`\n      // If users just want to provide a default value, `defaultCurrentPage` is here for you\n      if (!isAbsent(props.currentPage) && !hasCurrentPageListener) return false\n      // When you want to change sizes, things get more complex, detailed below\n      // Basically the most important value we need is page count\n      // either directly from props.pageCount\n      // or calculated from props.total\n      // we will take props.pageCount precedence over props.total\n      if (props.layout.includes('sizes')) {\n        if (!isAbsent(props.pageCount)) {\n          // if props.pageCount is assign by user, then user have to watch pageSize change\n          // and recalculate pageCount\n          if (!hasPageSizeListener) return false\n        } else if (!isAbsent(props.total)) {\n          // Otherwise, we will see if user have props.pageSize defined\n          // If so, meaning user want to have pageSize controlled himself/herself from component\n          // Thus page size listener is required\n          // users are account for page size change\n          if (!isAbsent(props.pageSize)) {\n            if (!hasPageSizeListener) {\n              return false\n            }\n          } else {\n            // (else block just for explaination)\n            // else page size is controlled by el-pagination internally\n          }\n        }\n      }\n      return true\n    })\n\n    const innerPageSize = ref(\n      isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize\n    )\n    const innerCurrentPage = ref(\n      isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage\n    )\n\n    const pageSizeBridge = computed({\n      get() {\n        return isAbsent(props.pageSize) ? innerPageSize.value : props.pageSize\n      },\n      set(v: number) {\n        if (isAbsent(props.pageSize)) {\n          innerPageSize.value = v\n        }\n        if (hasPageSizeListener) {\n          emit('update:page-size', v)\n          emit('size-change', v)\n        }\n      },\n    })\n\n    const pageCountBridge = computed<number>(() => {\n      let pageCount = 0\n      if (!isAbsent(props.pageCount)) {\n        pageCount = props.pageCount\n      } else if (!isAbsent(props.total)) {\n        pageCount = Math.max(1, Math.ceil(props.total / pageSizeBridge.value))\n      }\n      return pageCount\n    })\n\n    const currentPageBridge = computed<number>({\n      get() {\n        return isAbsent(props.currentPage)\n          ? innerCurrentPage.value\n          : props.currentPage\n      },\n      set(v) {\n        let newCurrentPage = v\n        if (v < 1) {\n          newCurrentPage = 1\n        } else if (v > pageCountBridge.value) {\n          newCurrentPage = pageCountBridge.value\n        }\n        if (isAbsent(props.currentPage)) {\n          innerCurrentPage.value = newCurrentPage\n        }\n        if (hasCurrentPageListener) {\n          emit('update:current-page', newCurrentPage)\n          emit('current-change', newCurrentPage)\n        }\n      },\n    })\n\n    watch(pageCountBridge, (val) => {\n      if (currentPageBridge.value > val) currentPageBridge.value = val\n    })\n\n    function handleCurrentChange(val: number) {\n      currentPageBridge.value = val\n    }\n\n    function handleSizeChange(val: number) {\n      pageSizeBridge.value = val\n      const newPageCount = pageCountBridge.value\n      if (currentPageBridge.value > newPageCount) {\n        currentPageBridge.value = newPageCount\n      }\n    }\n\n    function prev() {\n      if (props.disabled) return\n      currentPageBridge.value -= 1\n      emit('prev-click', currentPageBridge.value)\n    }\n\n    function next() {\n      if (props.disabled) return\n      currentPageBridge.value += 1\n      emit('next-click', currentPageBridge.value)\n    }\n\n    provide(elPaginationKey, {\n      pageCount: pageCountBridge,\n      disabled: computed(() => props.disabled),\n      currentPage: currentPageBridge,\n      changeEvent: handleCurrentChange,\n      handleSizeChange,\n    })\n\n    return () => {\n      if (!assertValidUsage.value) {\n        debugWarn(componentName, t('el.pagination.deprecationWarning'))\n        return null\n      }\n      if (!props.layout) return null\n      if (props.hideOnSinglePage && pageCountBridge.value <= 1) return null\n      const rootChildren: Array<VNode | VNode[] | null> = []\n      const rightWrapperChildren: Array<VNode | VNode[] | null> = []\n      const rightWrapperRoot = h(\n        'div',\n        { class: 'el-pagination__rightwrapper' },\n        rightWrapperChildren\n      )\n      const TEMPLATE_MAP: Record<\n        Exclude<LayoutKey, '->'>,\n        VNode | VNode[] | null\n      > = {\n        prev: h(Prev, {\n          disabled: props.disabled,\n          currentPage: currentPageBridge.value,\n          prevText: props.prevText,\n          onClick: prev,\n        }),\n        jumper: h(Jumper),\n        pager: h(Pager, {\n          currentPage: currentPageBridge.value,\n          pageCount: pageCountBridge.value,\n          pagerCount: props.pagerCount,\n          onChange: handleCurrentChange,\n          disabled: props.disabled,\n        }),\n        next: h(Next, {\n          disabled: props.disabled,\n          currentPage: currentPageBridge.value,\n          pageCount: pageCountBridge.value,\n          nextText: props.nextText,\n          onClick: next,\n        }),\n        sizes: h(Sizes, {\n          pageSize: pageSizeBridge.value,\n          pageSizes: props.pageSizes,\n          popperClass: props.popperClass,\n          disabled: props.disabled,\n        }),\n        slot: slots?.default?.() ?? null,\n        total: h(Total, { total: isAbsent(props.total) ? 0 : props.total }),\n      }\n\n      const components = props.layout\n        .split(',')\n        .map((item: string) => item.trim()) as LayoutKey[]\n\n      let haveRightWrapper = false\n\n      components.forEach((c) => {\n        if (c === '->') {\n          haveRightWrapper = true\n          return\n        }\n        if (!haveRightWrapper) {\n          rootChildren.push(TEMPLATE_MAP[c])\n        } else {\n          rightWrapperChildren.push(TEMPLATE_MAP[c])\n        }\n      })\n\n      if (haveRightWrapper && rightWrapperChildren.length > 0) {\n        rootChildren.unshift(rightWrapperRoot)\n      }\n\n      return h(\n        'div',\n        {\n          role: 'pagination',\n          'aria-label': 'pagination',\n          class: [\n            'el-pagination',\n            {\n              'is-background': props.background,\n              'el-pagination--small': props.small,\n            },\n          ],\n        },\n        rootChildren\n      )\n    }\n  },\n})\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pagination.mjs","sources":["../../../../../../packages/components/pagination/src/pagination.ts"],"sourcesContent":["import {\n  h,\n  ref,\n  provide,\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  watch,\n} from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { elPaginationKey } from '@element-plus/tokens'\n\nimport Prev from './components/prev.vue'\nimport Next from './components/next.vue'\nimport Sizes from './components/sizes.vue'\nimport Jumper from './components/jumper.vue'\nimport Total from './components/total.vue'\nimport Pager from './components/pager.vue'\n\nimport type { VNode, ExtractPropTypes } from 'vue'\n\n/**\n * It it user's responsibility to guarantee that the value of props.total... is number\n * (same as pageSize, defaultPageSize, currentPage, defaultCurrentPage, pageCount)\n * Otherwise we can reasonable infer that the corresponding field is absent\n */\nconst isAbsent = (v: unknown): v is undefined => typeof v !== 'number'\n\ntype LayoutKey =\n  | 'prev'\n  | 'pager'\n  | 'next'\n  | 'jumper'\n  | '->'\n  | 'total'\n  | 'sizes'\n  | 'slot'\n\nexport const paginationProps = buildProps({\n  total: Number,\n  pageSize: Number,\n  defaultPageSize: Number,\n  currentPage: Number,\n  defaultCurrentPage: Number,\n  pageCount: Number,\n  pagerCount: {\n    type: Number,\n    validator: (value: unknown) => {\n      return (\n        typeof value === 'number' &&\n        (value | 0) === value &&\n        value > 4 &&\n        value < 22 &&\n        value % 2 === 1\n      )\n    },\n    default: 7,\n  },\n  layout: {\n    type: String,\n    default: (\n      ['prev', 'pager', 'next', 'jumper', '->', 'total'] as LayoutKey[]\n    ).join(', '),\n  },\n  pageSizes: {\n    type: definePropType<number[]>(Array),\n    default: () => mutable([10, 20, 30, 40, 50, 100] as const),\n  },\n  popperClass: {\n    type: String,\n    default: '',\n  },\n  prevText: {\n    type: String,\n    default: '',\n  },\n  nextText: {\n    type: String,\n    default: '',\n  },\n  small: Boolean,\n  background: Boolean,\n  disabled: Boolean,\n  hideOnSinglePage: Boolean,\n} as const)\nexport type PaginationProps = ExtractPropTypes<typeof paginationProps>\n\nexport const paginationEmits = {\n  'update:current-page': (val: number) => typeof val === 'number',\n  'update:page-size': (val: number) => typeof val === 'number',\n  'size-change': (val: number) => typeof val === 'number',\n  'current-change': (val: number) => typeof val === 'number',\n  'prev-click': (val: number) => typeof val === 'number',\n  'next-click': (val: number) => typeof val === 'number',\n}\nexport type PaginationEmits = typeof paginationEmits\n\nconst componentName = 'ElPagination'\nexport default defineComponent({\n  name: componentName,\n\n  props: paginationProps,\n  emits: paginationEmits,\n\n  setup(props, { emit, slots }) {\n    const { t } = useLocale()\n    const vnodeProps = getCurrentInstance()!.vnode.props || {}\n    // we can find @xxx=\"xxx\" props on `vnodeProps` to check if user bind corresponding events\n    const hasCurrentPageListener =\n      'onUpdate:currentPage' in vnodeProps ||\n      'onUpdate:current-page' in vnodeProps ||\n      'onCurrentChange' in vnodeProps\n    const hasPageSizeListener =\n      'onUpdate:pageSize' in vnodeProps ||\n      'onUpdate:page-size' in vnodeProps ||\n      'onSizeChange' in vnodeProps\n    const assertValidUsage = computed(() => {\n      // Users have to set either one, otherwise count of pages cannot be determined\n      if (isAbsent(props.total) && isAbsent(props.pageCount)) return false\n      // <el-pagination ...otherProps :current-page=\"xxx\" /> without corresponding listener is forbidden now\n      // Users have to use two way binding of `currentPage`\n      // If users just want to provide a default value, `defaultCurrentPage` is here for you\n      if (!isAbsent(props.currentPage) && !hasCurrentPageListener) return false\n      // When you want to change sizes, things get more complex, detailed below\n      // Basically the most important value we need is page count\n      // either directly from props.pageCount\n      // or calculated from props.total\n      // we will take props.pageCount precedence over props.total\n      if (props.layout.includes('sizes')) {\n        if (!isAbsent(props.pageCount)) {\n          // if props.pageCount is assign by user, then user have to watch pageSize change\n          // and recalculate pageCount\n          if (!hasPageSizeListener) return false\n        } else if (!isAbsent(props.total)) {\n          // Otherwise, we will see if user have props.pageSize defined\n          // If so, meaning user want to have pageSize controlled himself/herself from component\n          // Thus page size listener is required\n          // users are account for page size change\n          if (!isAbsent(props.pageSize)) {\n            if (!hasPageSizeListener) {\n              return false\n            }\n          } else {\n            // (else block just for explaination)\n            // else page size is controlled by el-pagination internally\n          }\n        }\n      }\n      return true\n    })\n\n    const innerPageSize = ref(\n      isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize\n    )\n    const innerCurrentPage = ref(\n      isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage\n    )\n\n    const pageSizeBridge = computed({\n      get() {\n        return isAbsent(props.pageSize) ? innerPageSize.value : props.pageSize\n      },\n      set(v: number) {\n        if (isAbsent(props.pageSize)) {\n          innerPageSize.value = v\n        }\n        if (hasPageSizeListener) {\n          emit('update:page-size', v)\n          emit('size-change', v)\n        }\n      },\n    })\n\n    const pageCountBridge = computed<number>(() => {\n      let pageCount = 0\n      if (!isAbsent(props.pageCount)) {\n        pageCount = props.pageCount\n      } else if (!isAbsent(props.total)) {\n        pageCount = Math.max(1, Math.ceil(props.total / pageSizeBridge.value))\n      }\n      return pageCount\n    })\n\n    const currentPageBridge = computed<number>({\n      get() {\n        return isAbsent(props.currentPage)\n          ? innerCurrentPage.value\n          : props.currentPage\n      },\n      set(v) {\n        let newCurrentPage = v\n        if (v < 1) {\n          newCurrentPage = 1\n        } else if (v > pageCountBridge.value) {\n          newCurrentPage = pageCountBridge.value\n        }\n        if (isAbsent(props.currentPage)) {\n          innerCurrentPage.value = newCurrentPage\n        }\n        if (hasCurrentPageListener) {\n          emit('update:current-page', newCurrentPage)\n          emit('current-change', newCurrentPage)\n        }\n      },\n    })\n\n    watch(pageCountBridge, (val) => {\n      if (currentPageBridge.value > val) currentPageBridge.value = val\n    })\n\n    function handleCurrentChange(val: number) {\n      currentPageBridge.value = val\n    }\n\n    function handleSizeChange(val: number) {\n      pageSizeBridge.value = val\n      const newPageCount = pageCountBridge.value\n      if (currentPageBridge.value > newPageCount) {\n        currentPageBridge.value = newPageCount\n      }\n    }\n\n    function prev() {\n      if (props.disabled) return\n      currentPageBridge.value -= 1\n      emit('prev-click', currentPageBridge.value)\n    }\n\n    function next() {\n      if (props.disabled) return\n      currentPageBridge.value += 1\n      emit('next-click', currentPageBridge.value)\n    }\n\n    function addClass(element: any, cls: string) {\n      if (element) {\n        if (!element.props) {\n          element.props = {}\n        }\n        element.props.class = [element.props.class, cls].join(' ')\n      }\n    }\n\n    provide(elPaginationKey, {\n      pageCount: pageCountBridge,\n      disabled: computed(() => props.disabled),\n      currentPage: currentPageBridge,\n      changeEvent: handleCurrentChange,\n      handleSizeChange,\n    })\n\n    return () => {\n      if (!assertValidUsage.value) {\n        debugWarn(componentName, t('el.pagination.deprecationWarning'))\n        return null\n      }\n      if (!props.layout) return null\n      if (props.hideOnSinglePage && pageCountBridge.value <= 1) return null\n      const rootChildren: Array<VNode | VNode[] | null> = []\n      const rightWrapperChildren: Array<VNode | VNode[] | null> = []\n      const rightWrapperRoot = h(\n        'div',\n        { class: 'el-pagination__rightwrapper' },\n        rightWrapperChildren\n      )\n      const TEMPLATE_MAP: Record<\n        Exclude<LayoutKey, '->'>,\n        VNode | VNode[] | null\n      > = {\n        prev: h(Prev, {\n          disabled: props.disabled,\n          currentPage: currentPageBridge.value,\n          prevText: props.prevText,\n          onClick: prev,\n        }),\n        jumper: h(Jumper),\n        pager: h(Pager, {\n          currentPage: currentPageBridge.value,\n          pageCount: pageCountBridge.value,\n          pagerCount: props.pagerCount,\n          onChange: handleCurrentChange,\n          disabled: props.disabled,\n        }),\n        next: h(Next, {\n          disabled: props.disabled,\n          currentPage: currentPageBridge.value,\n          pageCount: pageCountBridge.value,\n          nextText: props.nextText,\n          onClick: next,\n        }),\n        sizes: h(Sizes, {\n          pageSize: pageSizeBridge.value,\n          pageSizes: props.pageSizes,\n          popperClass: props.popperClass,\n          disabled: props.disabled,\n          size: props.small ? 'small' : 'default',\n        }),\n        slot: slots?.default?.() ?? null,\n        total: h(Total, { total: isAbsent(props.total) ? 0 : props.total }),\n      }\n\n      const components = props.layout\n        .split(',')\n        .map((item: string) => item.trim()) as LayoutKey[]\n\n      let haveRightWrapper = false\n\n      components.forEach((c) => {\n        if (c === '->') {\n          haveRightWrapper = true\n          return\n        }\n        if (!haveRightWrapper) {\n          rootChildren.push(TEMPLATE_MAP[c])\n        } else {\n          rightWrapperChildren.push(TEMPLATE_MAP[c])\n        }\n      })\n\n      if (haveRightWrapper && rightWrapperChildren.length > 0) {\n        rootChildren.unshift(rightWrapperRoot)\n      }\n\n      addClass(rootChildren[0], 'is-first')\n      addClass(rootChildren[rootChildren.length - 1], 'is-last')\n\n      return h(\n        'div',\n        {\n          role: 'pagination',\n          'aria-label': 'pagination',\n          class: [\n            'el-pagination',\n            {\n              'is-background': props.background,\n              'el-pagination--small': props.small,\n            },\n          ],\n        },\n        rootChildren\n      )\n    }\n  },\n})\n"],"names":[],"mappings":"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"}

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

@@ -14,6 +14,7 @@ export declare const ElScrollbar: import("../../utils/types").SFCWithInstall<imp
     scrollbar$: import("vue").Ref<HTMLDivElement | undefined>;
     wrap$: import("vue").Ref<HTMLDivElement | undefined>;
     resize$: import("vue").Ref<HTMLElement | undefined>;
+    barRef: import("vue").Ref<any>;
     moveX: import("vue").Ref<number>;
     moveY: import("vue").Ref<number>;
     ratioX: import("vue").Ref<number>;
@@ -63,4 +64,4 @@ export declare const ElScrollbar: import("../../utils/types").SFCWithInstall<imp
 export default ElScrollbar;
 export * from './src/util';
 export * from './src/scrollbar';
-export * from './src/bar';
+export * from './src/thumb';

package/es/components/scrollbar/index.mjs

@@ -2,7 +2,7 @@ import { withInstall } from '../../utils/with-install.mjs';
 import Scrollbar from './src/scrollbar2.mjs';
 export { BAR_MAP, renderThumbStyle } from './src/util.mjs';
 export { scrollbarEmits, scrollbarProps } from './src/scrollbar.mjs';
-export { barProps } from './src/bar.mjs';
+export { thumbProps } from './src/thumb.mjs';
 
 const ElScrollbar = withInstall(Scrollbar);
 

package/es/components/scrollbar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/scrollbar/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport Scrollbar from './src/scrollbar.vue'\n\nexport const ElScrollbar = withInstall(Scrollbar)\nexport default ElScrollbar\n\nexport * from './src/util'\nexport * from './src/scrollbar'\nexport * from './src/bar'\n"],"names":[],"mappings":";;;;;;AAEY,MAAC,WAAW,GAAG,WAAW,CAAC,SAAS;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/scrollbar/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport Scrollbar from './src/scrollbar.vue'\n\nexport const ElScrollbar = withInstall(Scrollbar)\nexport default ElScrollbar\n\nexport * from './src/util'\nexport * from './src/scrollbar'\nexport * from './src/thumb'\n"],"names":[],"mappings":";;;;;;AAEY,MAAC,WAAW,GAAG,WAAW,CAAC,SAAS;;;;"}

package/es/components/scrollbar/src/bar.d.ts

@@ -1,9 +1,9 @@
 import type { ExtractPropTypes } from 'vue';
 export declare const barProps: {
-    readonly vertical: BooleanConstructor;
-    readonly size: StringConstructor;
-    readonly move: NumberConstructor;
-    readonly ratio: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
-    readonly always: BooleanConstructor;
+    readonly always: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly width: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly height: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly ratioX: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 1, unknown, unknown, unknown>;
+    readonly ratioY: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 1, unknown, unknown, unknown>;
 };
 export declare type BarProps = ExtractPropTypes<typeof barProps>;

package/es/components/scrollbar/src/bar.mjs

@@ -1,14 +1,26 @@
 import { buildProps } from '../../../utils/props.mjs';
 
 const barProps = buildProps({
-  vertical: Boolean,
-  size: String,
-  move: Number,
-  ratio: {
+  always: {
+    type: Boolean,
+    default: true
+  },
+  width: {
+    type: String,
+    default: ""
+  },
+  height: {
+    type: String,
+    default: ""
+  },
+  ratioX: {
     type: Number,
-    required: true
+    default: 1
   },
-  always: Boolean
+  ratioY: {
+    type: Number,
+    default: 1
+  }
 });
 
 export { barProps };

package/es/components/scrollbar/src/bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bar.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const barProps = buildProps({\n  vertical: Boolean,\n  size: String,\n  move: Number,\n  ratio: {\n    type: Number,\n    required: true,\n  },\n  always: Boolean,\n} as const)\nexport type BarProps = ExtractPropTypes<typeof barProps>\n"],"names":[],"mappings":";;AACY,MAAC,QAAQ,GAAG,UAAU,CAAC;AACnC,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,CAAC;;;;"}
+{"version":3,"file":"bar.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const barProps = buildProps({\n  always: {\n    type: Boolean,\n    default: true,\n  },\n  width: {\n    type: String,\n    default: '',\n  },\n  height: {\n    type: String,\n    default: '',\n  },\n  ratioX: {\n    type: Number,\n    default: 1,\n  },\n  ratioY: {\n    type: Number,\n    default: 1,\n  },\n} as const)\nexport type BarProps = ExtractPropTypes<typeof barProps>\n"],"names":[],"mappings":";;AACY,MAAC,QAAQ,GAAG,UAAU,CAAC;AACnC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,CAAC;;;;"}

package/es/components/scrollbar/src/bar.vue.d.ts

@@ -1,43 +1,24 @@
 declare const _default: import("vue").DefineComponent<{
-    readonly vertical: BooleanConstructor;
-    readonly size: StringConstructor;
-    readonly move: NumberConstructor;
-    readonly ratio: import("../../../utils/props").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
-    readonly always: BooleanConstructor;
+    readonly always: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly width: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly height: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly ratioX: import("../../../utils/props").BuildPropReturn<NumberConstructor, 1, unknown, unknown, unknown>;
+    readonly ratioY: import("../../../utils/props").BuildPropReturn<NumberConstructor, 1, unknown, unknown, unknown>;
 }, {
-    instance: import("vue").Ref<HTMLDivElement | undefined>;
-    thumb: import("vue").Ref<HTMLDivElement | undefined>;
-    bar: import("vue").ComputedRef<{
-        offset: string;
-        scroll: string;
-        scrollSize: string;
-        size: string;
-        key: string;
-        axis: string;
-        client: string;
-        direction: string;
-    } | {
-        offset: string;
-        scroll: string;
-        scrollSize: string;
-        size: string;
-        key: string;
-        axis: string;
-        client: string;
-        direction: string;
-    }>;
-    thumbStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
-    visible: import("vue").Ref<boolean>;
-    clickTrackHandler: (e: MouseEvent) => void;
-    clickThumbHandler: (e: MouseEvent) => void;
+    handleScroll: (wrap: HTMLDivElement) => void;
+    moveX: import("vue").Ref<number>;
+    moveY: import("vue").Ref<number>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly vertical: BooleanConstructor;
-    readonly size: StringConstructor;
-    readonly move: NumberConstructor;
-    readonly ratio: import("../../../utils/props").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
-    readonly always: BooleanConstructor;
+    readonly always: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly width: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly height: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly ratioX: import("../../../utils/props").BuildPropReturn<NumberConstructor, 1, unknown, unknown, unknown>;
+    readonly ratioY: import("../../../utils/props").BuildPropReturn<NumberConstructor, 1, unknown, unknown, unknown>;
 }>>, {
-    always: boolean;
-    vertical: boolean;
+    height: string;
+    width: string;
+    always: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    ratioX: number;
+    ratioY: number;
 }>;
 export default _default;

package/es/components/scrollbar/src/bar2.mjs

@@ -1,133 +1,49 @@
-import { defineComponent, inject, ref, computed, onBeforeUnmount, toRef, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, vShow } from 'vue';
-import { isClient, useEventListener } from '@vueuse/core';
-import '../../../tokens/index.mjs';
-import { throwError } from '../../../utils/error.mjs';
-import { BAR_MAP, renderThumbStyle } from './util.mjs';
+import { defineComponent, ref, resolveComponent, openBlock, createElementBlock, Fragment, createVNode } from 'vue';
+import Thumb from './thumb2.mjs';
 import { barProps } from './bar.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { scrollbarContextKey } from '../../../tokens/scrollbar.mjs';
 
-const COMPONENT_NAME = "Bar";
 const _sfc_main = defineComponent({
-  name: COMPONENT_NAME,
+  components: {
+    Thumb
+  },
   props: barProps,
   setup(props) {
-    const scrollbar = inject(scrollbarContextKey);
-    if (!scrollbar)
-      throwError(COMPONENT_NAME, "can not inject scrollbar context");
-    const instance = ref();
-    const thumb = ref();
-    const barStore = ref({});
-    const visible = ref(false);
-    let cursorDown = false;
-    let cursorLeave = false;
-    let onselectstartStore = isClient ? document.onselectstart : null;
-    const bar = computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
-    const thumbStyle = computed(() => renderThumbStyle({
-      size: props.size,
-      move: props.move,
-      bar: bar.value
-    }));
-    const offsetRatio = computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
-    const clickThumbHandler = (e) => {
-      var _a;
-      e.stopPropagation();
-      if (e.ctrlKey || [1, 2].includes(e.button))
-        return;
-      (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
-      startDrag(e);
-      const el = e.currentTarget;
-      if (!el)
-        return;
-      barStore.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
+    const moveX = ref(0);
+    const moveY = ref(0);
+    const GAP = 4;
+    const handleScroll = (wrap) => {
+      if (wrap) {
+        const offsetHeight = wrap.offsetHeight - GAP;
+        const offsetWidth = wrap.offsetWidth - GAP;
+        moveY.value = wrap.scrollTop * 100 / offsetHeight * props.ratioY;
+        moveX.value = wrap.scrollLeft * 100 / offsetWidth * props.ratioX;
+      }
     };
-    const clickTrackHandler = (e) => {
-      if (!thumb.value || !instance.value || !scrollbar.wrapElement)
-        return;
-      const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
-      const thumbHalf = thumb.value[bar.value.offset] / 2;
-      const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
-      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
-    };
-    const startDrag = (e) => {
-      e.stopImmediatePropagation();
-      cursorDown = true;
-      document.addEventListener("mousemove", mouseMoveDocumentHandler);
-      document.addEventListener("mouseup", mouseUpDocumentHandler);
-      onselectstartStore = document.onselectstart;
-      document.onselectstart = () => false;
-    };
-    const mouseMoveDocumentHandler = (e) => {
-      if (!instance.value || !thumb.value)
-        return;
-      if (cursorDown === false)
-        return;
-      const prevPage = barStore.value[bar.value.axis];
-      if (!prevPage)
-        return;
-      const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
-      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
-      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
-      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
-    };
-    const mouseUpDocumentHandler = () => {
-      cursorDown = false;
-      barStore.value[bar.value.axis] = 0;
-      document.removeEventListener("mousemove", mouseMoveDocumentHandler);
-      document.removeEventListener("mouseup", mouseUpDocumentHandler);
-      restoreOnselectstart();
-      if (cursorLeave)
-        visible.value = false;
-    };
-    const mouseMoveScrollbarHandler = () => {
-      cursorLeave = false;
-      visible.value = !!props.size;
-    };
-    const mouseLeaveScrollbarHandler = () => {
-      cursorLeave = true;
-      visible.value = cursorDown;
-    };
-    onBeforeUnmount(() => {
-      restoreOnselectstart();
-      document.removeEventListener("mouseup", mouseUpDocumentHandler);
-    });
-    const restoreOnselectstart = () => {
-      if (document.onselectstart !== onselectstartStore)
-        document.onselectstart = onselectstartStore;
-    };
-    useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
-    useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
     return {
-      instance,
-      thumb,
-      bar,
-      thumbStyle,
-      visible,
-      clickTrackHandler,
-      clickThumbHandler
+      handleScroll,
+      moveX,
+      moveY
     };
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock(Transition, { name: "el-scrollbar-fade" }, {
-    default: withCtx(() => [
-      withDirectives(createElementVNode("div", {
-        ref: "instance",
-        class: normalizeClass(["el-scrollbar__bar", "is-" + _ctx.bar.key]),
-        onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.clickTrackHandler && _ctx.clickTrackHandler(...args))
-      }, [
-        createElementVNode("div", {
-          ref: "thumb",
-          class: "el-scrollbar__thumb",
-          style: normalizeStyle(_ctx.thumbStyle),
-          onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.clickThumbHandler && _ctx.clickThumbHandler(...args))
-        }, null, 36)
-      ], 34), [
-        [vShow, _ctx.always || _ctx.visible]
-      ])
-    ]),
-    _: 1
-  });
+  const _component_thumb = resolveComponent("thumb");
+  return openBlock(), createElementBlock(Fragment, null, [
+    createVNode(_component_thumb, {
+      move: _ctx.moveX,
+      ratio: _ctx.ratioX,
+      size: _ctx.width,
+      always: _ctx.always
+    }, null, 8, ["move", "ratio", "size", "always"]),
+    createVNode(_component_thumb, {
+      move: _ctx.moveY,
+      ratio: _ctx.ratioY,
+      size: _ctx.height,
+      vertical: "",
+      always: _ctx.always
+    }, null, 8, ["move", "ratio", "size", "always"])
+  ], 64);
 }
 var Bar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/es/components/scrollbar/src/bar2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.vue"],"sourcesContent":["<template>\n  <transition name=\"el-scrollbar-fade\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"['el-scrollbar__bar', 'is-' + bar.key]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        class=\"el-scrollbar__thumb\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      ></div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  ref,\n  toRef,\n} from 'vue'\nimport { useEventListener, isClient } from '@vueuse/core'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils/error'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { barProps } from './bar'\n\nconst COMPONENT_NAME = 'Bar'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: barProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const barStore = ref({})\n    const visible = ref(false)\n\n    let cursorDown = false\n    let cursorLeave = false\n    let onselectstartStore:\n      | ((this: GlobalEventHandlers, ev: Event) => any)\n      | null = isClient ? document.onselectstart : null\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    const offsetRatio = computed(\n      () =>\n        // offsetRatioX = original width of thumb / current width of thumb / ratioX\n        // offsetRatioY = original height of thumb / current height of thumb / ratioY\n        // instance height = wrap height - GAP\n        instance.value![bar.value.offset] ** 2 /\n        scrollbar.wrapElement![bar.value.scrollSize] /\n        props.ratio /\n        thumb.value![bar.value.offset]\n    )\n\n    const clickThumbHandler = (e: MouseEvent) => {\n      // prevent click event of middle and right button\n      e.stopPropagation()\n      if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n      window.getSelection()?.removeAllRanges()\n      startDrag(e)\n\n      const el = e.currentTarget as HTMLDivElement\n      if (!el) return\n      barStore.value[bar.value.axis] =\n        el[bar.value.offset] -\n        (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\n      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n      const offset = Math.abs(\n        (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]\n      )\n      const thumbHalf = thumb.value[bar.value.offset] / 2\n      const thumbPositionPercentage =\n        ((offset - thumbHalf) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const startDrag = (e: MouseEvent) => {\n      e.stopImmediatePropagation()\n      cursorDown = true\n      document.addEventListener('mousemove', mouseMoveDocumentHandler)\n      document.addEventListener('mouseup', mouseUpDocumentHandler)\n      onselectstartStore = document.onselectstart\n      document.onselectstart = () => false\n    }\n\n    const mouseMoveDocumentHandler = (e: MouseEvent) => {\n      if (!instance.value || !thumb.value) return\n      if (cursorDown === false) return\n\n      const prevPage = barStore.value[bar.value.axis]\n      if (!prevPage) return\n\n      const offset =\n        (instance.value.getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]) *\n        -1\n      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n      const thumbPositionPercentage =\n        ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const mouseUpDocumentHandler = () => {\n      cursorDown = false\n      barStore.value[bar.value.axis] = 0\n      document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n      restoreOnselectstart()\n      if (cursorLeave) visible.value = false\n    }\n\n    const mouseMoveScrollbarHandler = () => {\n      cursorLeave = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave = true\n      visible.value = cursorDown\n    }\n\n    onBeforeUnmount(() => {\n      restoreOnselectstart()\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n    })\n\n    const restoreOnselectstart = () => {\n      if (document.onselectstart !== onselectstartStore)\n        document.onselectstart = onselectstartStore\n    }\n\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mousemove',\n      mouseMoveScrollbarHandler\n    )\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mouseleave',\n      mouseLeaveScrollbarHandler\n    )\n\n    return {\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n      clickTrackHandler,\n      clickThumbHandler,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;AAkCA,MAAM,iBAAiB;AACvB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,YAAY,OAAO;AACzB,QAAI,CAAC;AACH,iBAAW,gBAAgB;AAE7B,UAAM,WAAW;AACjB,UAAM,QAAQ;AAEd,UAAM,WAAW,IAAI;AACrB,UAAM,UAAU,IAAI;AAEpB,QAAI,aAAa;AACjB,QAAI,cAAc;AAClB,QAAI,qBAEO,WAAW,SAAS,gBAAgB;AAE/C,UAAM,MAAM,SACV,MAAM,QAAQ,MAAM,WAAW,aAAa;AAG9C,UAAM,aAAa,SAAS,MAC1B,iBAAiB;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,KAAK,IAAI;AAAA;AAIb,UAAM,cAAc,SAClB,MAIE,SAAS,MAAO,IAAI,MAAM,WAAW,IACrC,UAAU,YAAa,IAAI,MAAM,cACjC,MAAM,QACN,MAAM,MAAO,IAAI,MAAM;AAG3B,UAAM,oBAAoB,CAAC,MAAkB;AAE3C;AACA,uBAAiB;AAA2B;AAE5C;AACA;AAEA,iBAAW,EAAE;AACb;AAAS;AACT,eAAS;AAEqD;AAGhE;AACE,UAAI,iBAAiB;AAA0C;AAE/D;AAIA,YAAM,kBAAkB;AACxB,YAAM;AAIN,sCAAgC,UAC7B,oCACW,YAAY,UAAU,cAClC;AAAA;AAGJ;AACE;AACA;AACA;AACA,eAAS,iBAAiB,WAAW;AACrC;AACA;AAA+B;AAGjC;AACE,UAAI;AAAiC;AACrC;AAA0B;AAE1B;AACA;AAAe;AAEf;AAIA,YAAM,qDAAqD;AAC3D,YAAM,0BACF,UAAS;AAEb,sCAAgC,UAC7B,gDACuB,wBACxB;AAAA;AAGJ;AACE;AACA,yBAAmB;AACnB,eAAS,oBAAoB;AAC7B,eAAS,oBAAoB,WAAW;AACxC;AACA;AAAiB;AAAgB;AAGnC;AACE;AACA;AAAwB;AAG1B;AACE;AACA;AAAgB;AAGlB;AACE;AACA;AAAwC;AAG1C;AACE,UAAI;AACF;AAAyB;AAG7B;AAKA,qBACE,MAAM,WAAW,qBACjB;AAIF;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;AA/KI;AAZN,qBAEM;AAAU;AACR,QACL;AAAW;;AAEZ;AACa;AACN,UACJ;AAAK,UACL;AAAS;;;AATM;;;;;;;;;;;"}
+{"version":3,"file":"bar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.vue"],"sourcesContent":["<template>\n  <thumb :move=\"moveX\" :ratio=\"ratioX\" :size=\"width\" :always=\"always\" />\n  <thumb\n    :move=\"moveY\"\n    :ratio=\"ratioY\"\n    :size=\"height\"\n    vertical\n    :always=\"always\"\n  />\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue'\nimport Thumb from './thumb.vue'\nimport { barProps } from './bar'\n\nexport default defineComponent({\n  components: {\n    Thumb,\n  },\n  props: barProps,\n  setup(props) {\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    const handleScroll = (wrap: HTMLDivElement) => {\n      if (wrap) {\n        const offsetHeight = wrap.offsetHeight - GAP\n        const offsetWidth = wrap.offsetWidth - GAP\n\n        moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * props.ratioY\n        moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * props.ratioX\n      }\n    }\n\n    return {\n      handleScroll,\n      moveX,\n      moveY,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;;;;AAeA,MAAK,YAAa,gBAAa;AAAA,EAC7B,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,MAAM,OAAO;AACX,UAAM,QAAQ,IAAI;AAClB,UAAM,QAAQ,IAAI;AAClB,UAAM,MAAM;AAEZ,UAAM,eAAe,CAAC,SAAyB;AAC7C,UAAI,MAAM;AACR,cAAM,eAAe,KAAK,eAAe;AACzC,cAAM,cAAc,KAAK,cAAc;AAEvC,cAAM,QAAU,KAAK,YAAY,MAAO,eAAgB,MAAM;AAC9D,cAAM,QAAU,KAAK,aAAa,MAAO,cAAe,MAAM;AAAA;AAAA;AAIlE,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;SArCJA,aAAsEC;AAAA,gBAAxD,kBAAK;AAAA,MAAG,MAAK,KAAE;AAAA,MAAS,OAAM;AAAA,MAAQ,MAAM,KAAE;AAAA;OAC5D,SAME;AAAA,gBALO,kBAAK;AAAA,MACX,MAAK,KAAE;AAAA,MACP,OAAM;AAAA,MACP;AAAA,MACC,UAAQ;AAAA;;;;;;;;"}

package/es/components/scrollbar/src/scrollbar.vue.d.ts

@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     scrollbar$: import("vue").Ref<HTMLDivElement | undefined>;
     wrap$: import("vue").Ref<HTMLDivElement | undefined>;
     resize$: import("vue").Ref<HTMLElement | undefined>;
+    barRef: import("vue").Ref<any>;
     moveX: import("vue").Ref<number>;
     moveY: import("vue").Ref<number>;
     ratioX: import("vue").Ref<number>;

package/es/components/scrollbar/src/scrollbar2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, provide, reactive, onMounted, nextTick, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, Fragment, createVNode, createCommentVNode } from 'vue';
+import { defineComponent, ref, computed, watch, provide, reactive, onMounted, nextTick, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createCommentVNode } from 'vue';
 import { useResizeObserver, useEventListener } from '@vueuse/core';
 import { addUnit, isNumber } from '../../../utils/util.mjs';
 import { debugWarn } from '../../../utils/error.mjs';
@@ -23,6 +23,7 @@ const _sfc_main = defineComponent({
     const resize$ = ref();
     const sizeWidth = ref("0");
     const sizeHeight = ref("0");
+    const barRef = ref();
     const moveX = ref(0);
     const moveY = ref(0);
     const ratioY = ref(1);
@@ -38,11 +39,9 @@ const _sfc_main = defineComponent({
       return [props.wrapStyle, style2];
     });
     const handleScroll = () => {
+      var _a;
       if (wrap$.value) {
-        const offsetHeight = wrap$.value.offsetHeight - GAP;
-        const offsetWidth = wrap$.value.offsetWidth - GAP;
-        moveY.value = wrap$.value.scrollTop * 100 / offsetHeight * ratioY.value;
-        moveX.value = wrap$.value.scrollLeft * 100 / offsetWidth * ratioX.value;
+        (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrap$.value);
         emit("scroll", {
           scrollTop: wrap$.value.scrollTop,
           scrollLeft: wrap$.value.scrollLeft
@@ -99,6 +98,7 @@ const _sfc_main = defineComponent({
       scrollbar$,
       wrap$,
       resize$,
+      barRef,
       moveX,
       moveY,
       ratioX,
@@ -141,21 +141,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 3
       }, 8, ["class", "style"]))
     ], 38),
-    !_ctx.native ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-      createVNode(_component_bar, {
-        move: _ctx.moveX,
-        ratio: _ctx.ratioX,
-        size: _ctx.sizeWidth,
-        always: _ctx.always
-      }, null, 8, ["move", "ratio", "size", "always"]),
-      createVNode(_component_bar, {
-        move: _ctx.moveY,
-        ratio: _ctx.ratioY,
-        size: _ctx.sizeHeight,
-        vertical: "",
-        always: _ctx.always
-      }, null, 8, ["move", "ratio", "size", "always"])
-    ], 64)) : createCommentVNode("v-if", true)
+    !_ctx.native ? (openBlock(), createBlock(_component_bar, {
+      key: 0,
+      ref: "barRef",
+      height: _ctx.sizeHeight,
+      width: _ctx.sizeWidth,
+      always: _ctx.always,
+      "ratio-x": _ctx.ratioX,
+      "ratio-y": _ctx.ratioY
+    }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : createCommentVNode("v-if", true)
   ], 512);
 }
 var Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/es/components/scrollbar/src/scrollbar2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbar$\" class=\"el-scrollbar\">\n    <div\n      ref=\"wrap$\"\n      :class=\"[\n        wrapClass,\n        'el-scrollbar__wrap',\n        native ? '' : 'el-scrollbar__wrap--hidden-default',\n      ]\"\n      :style=\"style\"\n      @scroll=\"handleScroll\"\n    >\n      <component\n        :is=\"tag\"\n        ref=\"resize$\"\n        :class=\"['el-scrollbar__view', viewClass]\"\n        :style=\"viewStyle\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar :move=\"moveX\" :ratio=\"ratioX\" :size=\"sizeWidth\" :always=\"always\" />\n      <bar\n        :move=\"moveY\"\n        :ratio=\"ratioY\"\n        :size=\"sizeHeight\"\n        vertical\n        :always=\"always\"\n      />\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  reactive,\n} from 'vue'\nimport { useResizeObserver, useEventListener } from '@vueuse/core'\nimport { addUnit, isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport Bar from './bar.vue'\n\nimport { scrollbarProps, scrollbarEmits } from './scrollbar'\nimport type { StyleValue, CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElScrollbar',\n  components: {\n    Bar,\n  },\n  props: scrollbarProps,\n  emits: scrollbarEmits,\n\n  setup(props, { emit }) {\n    let stopResizeObserver: (() => void) | undefined = undefined\n    let stopResizeListener: (() => void) | undefined = undefined\n\n    const scrollbar$ = ref<HTMLDivElement>()\n    const wrap$ = ref<HTMLDivElement>()\n    const resize$ = ref<HTMLElement>()\n\n    const sizeWidth = ref('0')\n    const sizeHeight = ref('0')\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const ratioY = ref(1)\n    const ratioX = ref(1)\n    const SCOPE = 'ElScrollbar'\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    const style = computed<StyleValue>(() => {\n      const style: CSSProperties = {}\n      if (props.height) style.height = addUnit(props.height)\n      if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)\n      return [props.wrapStyle, style]\n    })\n\n    const handleScroll = () => {\n      if (wrap$.value) {\n        const offsetHeight = wrap$.value.offsetHeight - GAP\n        const offsetWidth = wrap$.value.offsetWidth - GAP\n\n        moveY.value =\n          ((wrap$.value.scrollTop * 100) / offsetHeight) * ratioY.value\n        moveX.value =\n          ((wrap$.value.scrollLeft * 100) / offsetWidth) * ratioX.value\n\n        emit('scroll', {\n          scrollTop: wrap$.value.scrollTop,\n          scrollLeft: wrap$.value.scrollLeft,\n        })\n      }\n    }\n\n    const setScrollTop = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollTop = value\n    }\n\n    const setScrollLeft = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollLeft = value\n    }\n\n    const update = () => {\n      if (!wrap$.value) return\n\n      const offsetHeight = wrap$.value.offsetHeight - GAP\n      const offsetWidth = wrap$.value.offsetWidth - GAP\n\n      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight\n      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth\n      const height = Math.max(originalHeight, props.minSize)\n      const width = Math.max(originalWidth, props.minSize)\n\n      ratioY.value =\n        originalHeight /\n        (offsetHeight - originalHeight) /\n        (height / (offsetHeight - height))\n      ratioX.value =\n        originalWidth /\n        (offsetWidth - originalWidth) /\n        (width / (offsetWidth - width))\n\n      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n    }\n\n    watch(\n      () => props.noresize,\n      (noresize) => {\n        if (noresize) {\n          stopResizeObserver?.()\n          stopResizeListener?.()\n        } else {\n          ;({ stop: stopResizeObserver } = useResizeObserver(resize$, update))\n          stopResizeListener = useEventListener('resize', update)\n        }\n      },\n      { immediate: true }\n    )\n\n    provide(\n      scrollbarContextKey,\n      reactive({\n        scrollbarElement: scrollbar$,\n        wrapElement: wrap$,\n      })\n    )\n\n    onMounted(() => {\n      if (!props.native) nextTick(() => update())\n    })\n\n    return {\n      scrollbar$,\n      wrap$,\n      resize$,\n\n      moveX,\n      moveY,\n      ratioX,\n      ratioY,\n      sizeWidth,\n      sizeHeight,\n      style,\n      update,\n      handleScroll,\n      setScrollTop,\n      setScrollLeft,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","_resolveDynamicComponent","_withCtx"],"mappings":"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"}
+{"version":3,"file":"scrollbar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbar$\" class=\"el-scrollbar\">\n    <div\n      ref=\"wrap$\"\n      :class=\"[\n        wrapClass,\n        'el-scrollbar__wrap',\n        native ? '' : 'el-scrollbar__wrap--hidden-default',\n      ]\"\n      :style=\"style\"\n      @scroll=\"handleScroll\"\n    >\n      <component\n        :is=\"tag\"\n        ref=\"resize$\"\n        :class=\"['el-scrollbar__view', viewClass]\"\n        :style=\"viewStyle\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar\n        ref=\"barRef\"\n        :height=\"sizeHeight\"\n        :width=\"sizeWidth\"\n        :always=\"always\"\n        :ratio-x=\"ratioX\"\n        :ratio-y=\"ratioY\"\n      ></bar>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  reactive,\n} from 'vue'\nimport { useResizeObserver, useEventListener } from '@vueuse/core'\nimport { addUnit, isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport Bar from './bar.vue'\n\nimport { scrollbarProps, scrollbarEmits } from './scrollbar'\nimport type { StyleValue, CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElScrollbar',\n  components: {\n    Bar,\n  },\n  props: scrollbarProps,\n  emits: scrollbarEmits,\n\n  setup(props, { emit }) {\n    let stopResizeObserver: (() => void) | undefined = undefined\n    let stopResizeListener: (() => void) | undefined = undefined\n\n    const scrollbar$ = ref<HTMLDivElement>()\n    const wrap$ = ref<HTMLDivElement>()\n    const resize$ = ref<HTMLElement>()\n\n    const sizeWidth = ref('0')\n    const sizeHeight = ref('0')\n    const barRef = ref()\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const ratioY = ref(1)\n    const ratioX = ref(1)\n    const SCOPE = 'ElScrollbar'\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    const style = computed<StyleValue>(() => {\n      const style: CSSProperties = {}\n      if (props.height) style.height = addUnit(props.height)\n      if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)\n      return [props.wrapStyle, style]\n    })\n\n    const handleScroll = () => {\n      if (wrap$.value) {\n        barRef.value?.handleScroll(wrap$.value)\n\n        emit('scroll', {\n          scrollTop: wrap$.value.scrollTop,\n          scrollLeft: wrap$.value.scrollLeft,\n        })\n      }\n    }\n\n    const setScrollTop = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollTop = value\n    }\n\n    const setScrollLeft = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollLeft = value\n    }\n\n    const update = () => {\n      if (!wrap$.value) return\n\n      const offsetHeight = wrap$.value.offsetHeight - GAP\n      const offsetWidth = wrap$.value.offsetWidth - GAP\n\n      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight\n      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth\n      const height = Math.max(originalHeight, props.minSize)\n      const width = Math.max(originalWidth, props.minSize)\n\n      ratioY.value =\n        originalHeight /\n        (offsetHeight - originalHeight) /\n        (height / (offsetHeight - height))\n      ratioX.value =\n        originalWidth /\n        (offsetWidth - originalWidth) /\n        (width / (offsetWidth - width))\n\n      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n    }\n\n    watch(\n      () => props.noresize,\n      (noresize) => {\n        if (noresize) {\n          stopResizeObserver?.()\n          stopResizeListener?.()\n        } else {\n          ;({ stop: stopResizeObserver } = useResizeObserver(resize$, update))\n          stopResizeListener = useEventListener('resize', update)\n        }\n      },\n      { immediate: true }\n    )\n\n    provide(\n      scrollbarContextKey,\n      reactive({\n        scrollbarElement: scrollbar$,\n        wrapElement: wrap$,\n      })\n    )\n\n    onMounted(() => {\n      if (!props.native) nextTick(() => update())\n    })\n\n    return {\n      scrollbar$,\n      wrap$,\n      resize$,\n      barRef,\n      moveX,\n      moveY,\n      ratioX,\n      ratioY,\n      sizeWidth,\n      sizeHeight,\n      style,\n      update,\n      handleScroll,\n      setScrollTop,\n      setScrollLeft,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;AAqDA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,QAAI,qBAA+C;AACnD,QAAI,qBAA+C;AAEnD,UAAM,aAAa;AACnB,UAAM,QAAQ;AACd,UAAM,UAAU;AAEhB,UAAM,YAAY,IAAI;AACtB,UAAM,aAAa,IAAI;AACvB,UAAM,SAAS;AACf,UAAM,QAAQ,IAAI;AAClB,UAAM,QAAQ,IAAI;AAClB,UAAM,SAAS,IAAI;AACnB,UAAM,SAAS,IAAI;AACnB,UAAM,QAAQ;AACd,UAAM,MAAM;AAEZ,UAAM,QAAQ,SAAqB,MAAM;AACvC,YAAM,SAAuB;AAC7B,UAAI,MAAM;AAAQ,eAAM,SAAS,QAAQ,MAAM;AAC/C,UAAI,MAAM;AAAW,eAAM,YAAY,QAAQ,MAAM;AACrD,aAAO,CAAC,MAAM,WAAW;AAAA;AAG3B,UAAM,eAAe,MAAM;AACzB,UAAI;AACF,eAAO;AAEP;AAAe,qBACF;AAAY,UACvB;AAAwB;AAAA;AAAA;AAK9B;AACE,UAAI;AACF,yBAAiB;AACjB;AAAA;AAEF;AAAyB;AAG3B;AACE,UAAI;AACF,yBAAiB;AACjB;AAAA;AAEF;AAA0B;AAG5B;AACE,UAAI;AAAc;AAElB;AACA,YAAM,oBAAoB,MAAM;AAEhC,YAAM,qCAAqC,MAAM;AACjD,YAAM;AACN,YAAM,wCAAwC;AAC9C,YAAM,aAAa,IAAI,eAAe;AAEtC;AAIA,aAAO,QACL,gDAEC;AAEH,kCAA4B;AAC5B,gBAAU,oCAAoC,GAAG,YAAY;AAAA;AAG/D;AAGI,UAAI;AACF;AACA;AAAA;AAEA;AAAC,QAAC;AACF;AAAgD;AAAA,OAGpD;AAGF;AAEW;AACW,MAClB;AAAa;AAIjB;AACE;AAAmB,iBAAS,MAAM;AAAA;AAGpC;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;AAjLiB;AAAM;;;;;AAmBnB;AAjBO;AACL;AAAqB;QAAwC;AAAA;;;AAM5D;;;AAIQ;AACP,QACL;AAAgB;;;AAET;;;;OAGK;AAAA;;AAET,MACH;AAAA,MACA;AAAO,MACP,YAAQ;AAAA,MACR;AAAS,MACT;AAAS;;;;;;;;;"}

package/es/components/scrollbar/src/thumb.d.ts

@@ -0,0 +1,9 @@
+import type { ExtractPropTypes } from 'vue';
+export declare const thumbProps: {
+    readonly vertical: BooleanConstructor;
+    readonly size: StringConstructor;
+    readonly move: NumberConstructor;
+    readonly ratio: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
+    readonly always: BooleanConstructor;
+};
+export declare type ThumbProps = ExtractPropTypes<typeof thumbProps>;