element-plus 2.2.14 → 2.2.15

package/es/components/page-header/src/page-header2.mjs

@@ -1,11 +1,13 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode } from 'vue';
 import { ElIcon } from '../../icon/index.mjs';
+import { ElDivider } from '../../divider/index.mjs';
 import '../../../hooks/index.mjs';
 import { pageHeaderProps, pageHeaderEmits } from './page-header.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import { useLocale } from '../../../hooks/use-locale/index.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
+const _hoisted_1 = ["aria-label"];
 const __default__ = {
   name: "ElPageHeader"
 };
@@ -14,47 +16,87 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: pageHeaderProps,
   emits: pageHeaderEmits,
   setup(__props, { emit }) {
+    const slots = useSlots();
     const { t } = useLocale();
     const ns = useNamespace("page-header");
+    const kls = computed(() => {
+      return [
+        ns.b(),
+        {
+          [ns.m("has-breadcrumb")]: !!slots.breadcrumb,
+          [ns.m("has-extra")]: !!slots.extra,
+          [ns.is("contentful")]: !!slots.default
+        }
+      ];
+    });
     function handleClick() {
       emit("back");
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(ns).b())
+        class: normalizeClass(unref(kls))
       }, [
         createElementVNode("div", {
-          class: normalizeClass(unref(ns).e("left")),
-          onClick: handleClick
+          class: normalizeClass(unref(ns).e("breadcrumb"))
+        }, [
+          renderSlot(_ctx.$slots, "breadcrumb")
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(unref(ns).e("header"))
         }, [
-          _ctx.icon || _ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(unref(ns).e("icon"))
-          }, [
-            renderSlot(_ctx.$slots, "icon", {}, () => [
-              _ctx.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
-                default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
-                ]),
-                _: 1
-              })) : createCommentVNode("v-if", true)
-            ])
-          ], 2)) : createCommentVNode("v-if", true),
           createElementVNode("div", {
-            class: normalizeClass(unref(ns).e("title"))
+            class: normalizeClass(unref(ns).e("left"))
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(unref(ns).e("back")),
+              role: "button",
+              tabindex: "0",
+              onClick: handleClick
+            }, [
+              _ctx.icon || _ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                "aria-label": _ctx.title || unref(t)("el.pageHeader.title"),
+                class: normalizeClass(unref(ns).e("icon"))
+              }, [
+                renderSlot(_ctx.$slots, "icon", {}, () => [
+                  _ctx.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
+                    default: withCtx(() => [
+                      (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("v-if", true)
+                ])
+              ], 10, _hoisted_1)) : createCommentVNode("v-if", true),
+              createElementVNode("div", {
+                class: normalizeClass(unref(ns).e("title"))
+              }, [
+                renderSlot(_ctx.$slots, "title", {}, () => [
+                  createTextVNode(toDisplayString(_ctx.title || unref(t)("el.pageHeader.title")), 1)
+                ])
+              ], 2)
+            ], 2),
+            createVNode(unref(ElDivider), { direction: "vertical" }),
+            createElementVNode("div", {
+              class: normalizeClass(unref(ns).e("content"))
+            }, [
+              renderSlot(_ctx.$slots, "content", {}, () => [
+                createTextVNode(toDisplayString(_ctx.content), 1)
+              ])
+            ], 2)
+          ], 2),
+          _ctx.$slots.extra ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(unref(ns).e("extra"))
           }, [
-            renderSlot(_ctx.$slots, "title", {}, () => [
-              createTextVNode(toDisplayString(_ctx.title || unref(t)("el.pageHeader.title")), 1)
-            ])
-          ], 2)
+            renderSlot(_ctx.$slots, "extra")
+          ], 2)) : createCommentVNode("v-if", true)
         ], 2),
-        createElementVNode("div", {
-          class: normalizeClass(unref(ns).e("content"))
+        _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(unref(ns).e("main"))
         }, [
-          renderSlot(_ctx.$slots, "content", {}, () => [
-            createTextVNode(toDisplayString(_ctx.content), 1)
-          ])
-        ], 2)
+          renderSlot(_ctx.$slots, "default")
+        ], 2)) : createCommentVNode("v-if", true)
       ], 2);
     };
   }

package/es/components/page-header/src/page-header2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"page-header2.mjs","sources":["../../../../../../packages/components/page-header/src/page-header.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <div :class=\"ns.e('left')\" @click=\"handleClick\">\n      <div v-if=\"icon || $slots.icon\" :class=\"ns.e('icon')\">\n        <slot name=\"icon\">\n          <el-icon v-if=\"icon\">\n            <component :is=\"icon\" />\n          </el-icon>\n        </slot>\n      </div>\n      <div :class=\"ns.e('title')\">\n        <slot name=\"title\">{{ title || t('el.pageHeader.title') }}</slot>\n      </div>\n    </div>\n    <div :class=\"ns.e('content')\">\n      <slot name=\"content\">{{ content }}</slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { ElIcon } from '@element-plus/components/icon'\n\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { pageHeaderEmits, pageHeaderProps } from './page-header'\n\ndefineOptions({\n  name: 'ElPageHeader',\n})\ndefineProps(pageHeaderProps)\nconst emit = defineEmits(pageHeaderEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('page-header')\n\nfunction handleClick() {\n  emit('back')\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+BA,IAAA,MAAA,EAAA,MAAA,SAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,GAAA,aAAA,aAAA,CAAA,CAAA;AAEA,IAAA,SAAA,WAAA,GAAA;AACA,MAAA,IAAA,CAAA,MAAA,CAAA,CAAA;AAAA,KACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"page-header2.mjs","sources":["../../../../../../packages/components/page-header/src/page-header.vue"],"sourcesContent":["<template>\n  <div :class=\"kls\">\n    <div :class=\"ns.e('breadcrumb')\">\n      <slot name=\"breadcrumb\" />\n    </div>\n    <div :class=\"ns.e('header')\">\n      <div :class=\"ns.e('left')\">\n        <div\n          :class=\"ns.e('back')\"\n          role=\"button\"\n          tabindex=\"0\"\n          @click=\"handleClick\"\n        >\n          <div\n            v-if=\"icon || $slots.icon\"\n            :aria-label=\"title || t('el.pageHeader.title')\"\n            :class=\"ns.e('icon')\"\n          >\n            <slot name=\"icon\">\n              <el-icon v-if=\"icon\">\n                <component :is=\"icon\" />\n              </el-icon>\n            </slot>\n          </div>\n          <div :class=\"ns.e('title')\">\n            <slot name=\"title\">{{ title || t('el.pageHeader.title') }}</slot>\n          </div>\n        </div>\n        <el-divider direction=\"vertical\" />\n        <div :class=\"ns.e('content')\">\n          <slot name=\"content\">{{ content }}</slot>\n        </div>\n      </div>\n\n      <div v-if=\"$slots.extra\" :class=\"ns.e('extra')\">\n        <slot name=\"extra\" />\n      </div>\n    </div>\n\n    <div v-if=\"$slots.default\" :class=\"ns.e('main')\">\n      <slot />\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, useSlots } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ElDivider } from '@element-plus/components/divider'\n\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { pageHeaderEmits, pageHeaderProps } from './page-header'\n\ndefineOptions({\n  name: 'ElPageHeader',\n})\n\ndefineProps(pageHeaderProps)\nconst emit = defineEmits(pageHeaderEmits)\nconst slots = useSlots()\n\nconst { t } = useLocale()\nconst ns = useNamespace('page-header')\nconst kls = computed(() => {\n  return [\n    ns.b(),\n    {\n      [ns.m('has-breadcrumb')]: !!slots.breadcrumb,\n      [ns.m('has-extra')]: !!slots.extra,\n      [ns.is('contentful')]: !!slots.default,\n    },\n  ]\n})\n\nfunction handleClick() {\n  emit('back')\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA0DA,IAAA,MAAA,QAAA,QAAA,EAAA,CAAA;AAEA,IAAA,MAAA,EAAA,MAAA,SAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,GAAA,aAAA,aAAA,CAAA,CAAA;AACA,IAAA,MAAA,GAAA,GAAA,SAAA,MAAA;AACA,MAAA,OAAA;AAAA,QACA,GAAA,CAAA,EAAA;AAAA,QACA;AAAA,UACA,CAAA,EAAA,CAAA,CAAA,CAAA,gBAAA,CAAA,GAAA,CAAA,CAAA,KAAA,CAAA,UAAA;AAAA,UACA,CAAA,EAAA,CAAA,CAAA,CAAA,WAAA,CAAA,GAAA,CAAA,CAAA,KAAA,CAAA,KAAA;AAAA,UACA,CAAA,EAAA,CAAA,EAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,KAAA,CAAA,OAAA;AAAA,SACA;AAAA,OACA,CAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,SAAA,WAAA,GAAA;AACA,MAAA,IAAA,CAAA,MAAA,CAAA,CAAA;AAAA,KACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/scrollbar/index.mjs

@@ -1,7 +1,7 @@
 import '../../utils/index.mjs';
-import Scrollbar from './src/scrollbar2.mjs';
+import Scrollbar from './src/scrollbar.mjs';
 export { BAR_MAP, GAP, renderThumbStyle } from './src/util.mjs';
-export { scrollbarEmits, scrollbarProps } from './src/scrollbar.mjs';
+export { scrollbarEmits, scrollbarProps } from './src/scrollbar2.mjs';
 export { thumbProps } from './src/thumb.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 

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

@@ -1,50 +1,175 @@
+import { defineComponent, ref, computed, watch, nextTick, provide, reactive, onMounted, onUpdated, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createCommentVNode } from 'vue';
+import { isNumber, useResizeObserver, useEventListener } from '@vueuse/core';
 import '../../../utils/index.mjs';
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { isNumber } from '@vueuse/core';
+import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
+import { GAP } from './util.mjs';
+import Bar from './bar2.mjs';
+import { scrollbarProps, scrollbarEmits } from './scrollbar2.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { addUnit } from '../../../utils/dom/style.mjs';
+import { isObject } from '@vue/shared';
+import { debugWarn } from '../../../utils/error.mjs';
+import { scrollbarContextKey } from '../../../tokens/scrollbar.mjs';
 
-const scrollbarProps = buildProps({
-  height: {
-    type: [String, Number],
-    default: ""
-  },
-  maxHeight: {
-    type: [String, Number],
-    default: ""
-  },
-  native: Boolean,
-  wrapStyle: {
-    type: definePropType([String, Object, Array]),
-    default: ""
-  },
-  wrapClass: {
-    type: [String, Array],
-    default: ""
-  },
-  viewClass: {
-    type: [String, Array],
-    default: ""
-  },
-  viewStyle: {
-    type: [String, Array, Object],
-    default: ""
-  },
-  noresize: Boolean,
-  tag: {
-    type: String,
-    default: "div"
-  },
-  always: Boolean,
-  minSize: {
-    type: Number,
-    default: 20
+const __default__ = {
+  name: "ElScrollbar"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: scrollbarProps,
+  emits: scrollbarEmits,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const ns = useNamespace("scrollbar");
+    let stopResizeObserver = void 0;
+    let stopResizeListener = void 0;
+    const scrollbar$ = ref();
+    const wrap$ = ref();
+    const resize$ = ref();
+    const sizeWidth = ref("0");
+    const sizeHeight = ref("0");
+    const barRef = ref();
+    const ratioY = ref(1);
+    const ratioX = ref(1);
+    const SCOPE = "ElScrollbar";
+    const style = computed(() => {
+      const style2 = {};
+      if (props.height)
+        style2.height = addUnit(props.height);
+      if (props.maxHeight)
+        style2.maxHeight = addUnit(props.maxHeight);
+      return [props.wrapStyle, style2];
+    });
+    const handleScroll = () => {
+      var _a;
+      if (wrap$.value) {
+        (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrap$.value);
+        emit("scroll", {
+          scrollTop: wrap$.value.scrollTop,
+          scrollLeft: wrap$.value.scrollLeft
+        });
+      }
+    };
+    function scrollTo(arg1, arg2) {
+      if (isObject(arg1)) {
+        wrap$.value.scrollTo(arg1);
+      } else if (isNumber(arg1) && isNumber(arg2)) {
+        wrap$.value.scrollTo(arg1, arg2);
+      }
+    }
+    const setScrollTop = (value) => {
+      if (!isNumber(value)) {
+        debugWarn(SCOPE, "value must be a number");
+        return;
+      }
+      wrap$.value.scrollTop = value;
+    };
+    const setScrollLeft = (value) => {
+      if (!isNumber(value)) {
+        debugWarn(SCOPE, "value must be a number");
+        return;
+      }
+      wrap$.value.scrollLeft = value;
+    };
+    const update = () => {
+      if (!wrap$.value)
+        return;
+      const offsetHeight = wrap$.value.offsetHeight - GAP;
+      const offsetWidth = wrap$.value.offsetWidth - GAP;
+      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight;
+      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth;
+      const height = Math.max(originalHeight, props.minSize);
+      const width = Math.max(originalWidth, props.minSize);
+      ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
+      ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
+      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
+      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
+    };
+    watch(() => props.noresize, (noresize) => {
+      if (noresize) {
+        stopResizeObserver == null ? void 0 : stopResizeObserver();
+        stopResizeListener == null ? void 0 : stopResizeListener();
+      } else {
+        ;
+        ({ stop: stopResizeObserver } = useResizeObserver(resize$, update));
+        stopResizeListener = useEventListener("resize", update);
+      }
+    }, { immediate: true });
+    watch(() => [props.maxHeight, props.height], () => {
+      if (!props.native)
+        nextTick(() => {
+          var _a;
+          update();
+          if (wrap$.value) {
+            (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrap$.value);
+          }
+        });
+    });
+    provide(scrollbarContextKey, reactive({
+      scrollbarElement: scrollbar$,
+      wrapElement: wrap$
+    }));
+    onMounted(() => {
+      if (!props.native)
+        nextTick(() => {
+          update();
+        });
+    });
+    onUpdated(() => update());
+    expose({
+      wrap$,
+      update,
+      scrollTo,
+      setScrollTop,
+      setScrollLeft,
+      handleScroll
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "scrollbar$",
+        ref: scrollbar$,
+        class: normalizeClass(unref(ns).b())
+      }, [
+        createElementVNode("div", {
+          ref_key: "wrap$",
+          ref: wrap$,
+          class: normalizeClass([
+            _ctx.wrapClass,
+            unref(ns).e("wrap"),
+            { [unref(ns).em("wrap", "hidden-default")]: !_ctx.native }
+          ]),
+          style: normalizeStyle(unref(style)),
+          onScroll: handleScroll
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+            ref_key: "resize$",
+            ref: resize$,
+            class: normalizeClass([unref(ns).e("view"), _ctx.viewClass]),
+            style: normalizeStyle(_ctx.viewStyle)
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["class", "style"]))
+        ], 38),
+        !_ctx.native ? (openBlock(), createBlock(Bar, {
+          key: 0,
+          ref_key: "barRef",
+          ref: barRef,
+          height: sizeHeight.value,
+          width: sizeWidth.value,
+          always: _ctx.always,
+          "ratio-x": ratioX.value,
+          "ratio-y": ratioY.value
+        }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : createCommentVNode("v-if", true)
+      ], 2);
+    };
   }
 });
-const scrollbarEmits = {
-  scroll: ({
-    scrollTop,
-    scrollLeft
-  }) => [scrollTop, scrollLeft].every(isNumber)
-};
+var Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/scrollbar/src/scrollbar.vue"]]);
 
-export { scrollbarEmits, scrollbarProps };
+export { Scrollbar as default };
 //# sourceMappingURL=scrollbar.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport type { ExtractPropTypes, StyleValue } from 'vue'\nimport type Scrollbar from './scrollbar.vue'\n\nexport const scrollbarProps = buildProps({\n  height: {\n    type: [String, Number],\n    default: '',\n  },\n  maxHeight: {\n    type: [String, Number],\n    default: '',\n  },\n  native: Boolean,\n  wrapStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n    default: '',\n  },\n  wrapClass: {\n    type: [String, Array],\n    default: '',\n  },\n  viewClass: {\n    type: [String, Array],\n    default: '',\n  },\n  viewStyle: {\n    type: [String, Array, Object],\n    default: '',\n  },\n  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  always: Boolean,\n  minSize: {\n    type: Number,\n    default: 20,\n  },\n} as const)\nexport type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>\n\nexport const scrollbarEmits = {\n  scroll: ({\n    scrollTop,\n    scrollLeft,\n  }: {\n    scrollTop: number\n    scrollLeft: number\n  }) => [scrollTop, scrollLeft].every(isNumber),\n}\nexport type ScrollbarEmits = typeof scrollbarEmits\n\nexport type ScrollbarInstance = InstanceType<typeof Scrollbar>\n"],"names":[],"mappings":";;;;AACY,MAAC,cAAc,GAAG,UAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;AACjC,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC,EAAE;AACS,MAAC,cAAc,GAAG;AAC9B,EAAE,MAAM,EAAE,CAAC;AACX,IAAI,SAAS;AACb,IAAI,UAAU;AACd,GAAG,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;AAC/C;;;;"}
+{"version":3,"file":"scrollbar.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbar$\" :class=\"ns.b()\">\n    <div\n      ref=\"wrap$\"\n      :class=\"[\n        wrapClass,\n        ns.e('wrap'),\n        { [ns.em('wrap', 'hidden-default')]: !native },\n      ]\"\n      :style=\"style\"\n      @scroll=\"handleScroll\"\n    >\n      <component\n        :is=\"tag\"\n        ref=\"resize$\"\n        :class=\"[ns.e('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      />\n    </template>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  onUpdated,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { addUnit, debugWarn, isNumber, isObject } from '@element-plus/utils'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { useNamespace } from '@element-plus/hooks'\nimport { GAP } from './util'\nimport Bar from './bar.vue'\nimport { scrollbarEmits, scrollbarProps } from './scrollbar'\nimport type { BarInstance } from './bar'\nimport type { CSSProperties, StyleValue } from 'vue'\n\ndefineOptions({\n  name: 'ElScrollbar',\n})\n\nconst props = defineProps(scrollbarProps)\nconst emit = defineEmits(scrollbarEmits)\n\nconst ns = useNamespace('scrollbar')\n\nlet stopResizeObserver: (() => void) | undefined = undefined\nlet stopResizeListener: (() => void) | undefined = undefined\n\nconst scrollbar$ = ref<HTMLDivElement>()\nconst wrap$ = ref<HTMLDivElement>()\nconst resize$ = ref<HTMLElement>()\n\nconst sizeWidth = ref('0')\nconst sizeHeight = ref('0')\nconst barRef = ref<BarInstance>()\nconst ratioY = ref(1)\nconst ratioX = ref(1)\nconst SCOPE = 'ElScrollbar'\n\nconst 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\nconst 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// TODO: refactor method overrides, due to script setup dts\n// @ts-nocheck\nfunction scrollTo(xCord: number, yCord?: number): void\nfunction scrollTo(options: ScrollToOptions): void\nfunction scrollTo(arg1: unknown, arg2?: number) {\n  if (isObject(arg1)) {\n    wrap$.value!.scrollTo(arg1)\n  } else if (isNumber(arg1) && isNumber(arg2)) {\n    wrap$.value!.scrollTo(arg1, arg2)\n  }\n}\n\nconst 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\nconst 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\nconst update = () => {\n  if (!wrap$.value) return\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\nwatch(\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\nwatch(\n  () => [props.maxHeight, props.height],\n  () => {\n    if (!props.native)\n      nextTick(() => {\n        update()\n        if (wrap$.value) {\n          barRef.value?.handleScroll(wrap$.value)\n        }\n      })\n  }\n)\n\nprovide(\n  scrollbarContextKey,\n  reactive({\n    scrollbarElement: scrollbar$,\n    wrapElement: wrap$,\n  })\n)\n\nonMounted(() => {\n  if (!props.native)\n    nextTick(() => {\n      update()\n    })\n})\nonUpdated(() => update())\n\ndefineExpose({\n  /** @description scrollbar wrap ref */\n  wrap$,\n  /** @description update scrollbar state manually */\n  update,\n  /** @description scrolls to a particular set of coordinates */\n  scrollTo,\n  /** @description set distance to scroll top */\n  setScrollTop,\n  /** @description set distance to scroll left */\n  setScrollLeft,\n  /** @description handle scroll event */\n  handleScroll,\n})\n</script>\n"],"names":[],"mappings":"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"}

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

@@ -1,175 +1,50 @@
-import { defineComponent, ref, computed, watch, nextTick, provide, reactive, onMounted, onUpdated, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createCommentVNode } from 'vue';
-import { isNumber, useResizeObserver, useEventListener } from '@vueuse/core';
 import '../../../utils/index.mjs';
-import '../../../tokens/index.mjs';
-import '../../../hooks/index.mjs';
-import { GAP } from './util.mjs';
-import Bar from './bar2.mjs';
-import { scrollbarProps, scrollbarEmits } from './scrollbar.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { addUnit } from '../../../utils/dom/style.mjs';
-import { isObject } from '@vue/shared';
-import { debugWarn } from '../../../utils/error.mjs';
-import { scrollbarContextKey } from '../../../tokens/scrollbar.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { isNumber } from '@vueuse/core';
 
-const __default__ = {
-  name: "ElScrollbar"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: scrollbarProps,
-  emits: scrollbarEmits,
-  setup(__props, { expose, emit }) {
-    const props = __props;
-    const ns = useNamespace("scrollbar");
-    let stopResizeObserver = void 0;
-    let stopResizeListener = void 0;
-    const scrollbar$ = ref();
-    const wrap$ = ref();
-    const resize$ = ref();
-    const sizeWidth = ref("0");
-    const sizeHeight = ref("0");
-    const barRef = ref();
-    const ratioY = ref(1);
-    const ratioX = ref(1);
-    const SCOPE = "ElScrollbar";
-    const style = computed(() => {
-      const style2 = {};
-      if (props.height)
-        style2.height = addUnit(props.height);
-      if (props.maxHeight)
-        style2.maxHeight = addUnit(props.maxHeight);
-      return [props.wrapStyle, style2];
-    });
-    const handleScroll = () => {
-      var _a;
-      if (wrap$.value) {
-        (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrap$.value);
-        emit("scroll", {
-          scrollTop: wrap$.value.scrollTop,
-          scrollLeft: wrap$.value.scrollLeft
-        });
-      }
-    };
-    function scrollTo(arg1, arg2) {
-      if (isObject(arg1)) {
-        wrap$.value.scrollTo(arg1);
-      } else if (isNumber(arg1) && isNumber(arg2)) {
-        wrap$.value.scrollTo(arg1, arg2);
-      }
-    }
-    const setScrollTop = (value) => {
-      if (!isNumber(value)) {
-        debugWarn(SCOPE, "value must be a number");
-        return;
-      }
-      wrap$.value.scrollTop = value;
-    };
-    const setScrollLeft = (value) => {
-      if (!isNumber(value)) {
-        debugWarn(SCOPE, "value must be a number");
-        return;
-      }
-      wrap$.value.scrollLeft = value;
-    };
-    const update = () => {
-      if (!wrap$.value)
-        return;
-      const offsetHeight = wrap$.value.offsetHeight - GAP;
-      const offsetWidth = wrap$.value.offsetWidth - GAP;
-      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight;
-      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth;
-      const height = Math.max(originalHeight, props.minSize);
-      const width = Math.max(originalWidth, props.minSize);
-      ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
-      ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
-      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
-      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
-    };
-    watch(() => props.noresize, (noresize) => {
-      if (noresize) {
-        stopResizeObserver == null ? void 0 : stopResizeObserver();
-        stopResizeListener == null ? void 0 : stopResizeListener();
-      } else {
-        ;
-        ({ stop: stopResizeObserver } = useResizeObserver(resize$, update));
-        stopResizeListener = useEventListener("resize", update);
-      }
-    }, { immediate: true });
-    watch(() => [props.maxHeight, props.height], () => {
-      if (!props.native)
-        nextTick(() => {
-          var _a;
-          update();
-          if (wrap$.value) {
-            (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrap$.value);
-          }
-        });
-    });
-    provide(scrollbarContextKey, reactive({
-      scrollbarElement: scrollbar$,
-      wrapElement: wrap$
-    }));
-    onMounted(() => {
-      if (!props.native)
-        nextTick(() => {
-          update();
-        });
-    });
-    onUpdated(() => update());
-    expose({
-      wrap$,
-      update,
-      scrollTo,
-      setScrollTop,
-      setScrollLeft,
-      handleScroll
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "scrollbar$",
-        ref: scrollbar$,
-        class: normalizeClass(unref(ns).b())
-      }, [
-        createElementVNode("div", {
-          ref_key: "wrap$",
-          ref: wrap$,
-          class: normalizeClass([
-            _ctx.wrapClass,
-            unref(ns).e("wrap"),
-            { [unref(ns).em("wrap", "hidden-default")]: !_ctx.native }
-          ]),
-          style: normalizeStyle(unref(style)),
-          onScroll: handleScroll
-        }, [
-          (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
-            ref_key: "resize$",
-            ref: resize$,
-            class: normalizeClass([unref(ns).e("view"), _ctx.viewClass]),
-            style: normalizeStyle(_ctx.viewStyle)
-          }, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }, 8, ["class", "style"]))
-        ], 38),
-        !_ctx.native ? (openBlock(), createBlock(Bar, {
-          key: 0,
-          ref_key: "barRef",
-          ref: barRef,
-          height: sizeHeight.value,
-          width: sizeWidth.value,
-          always: _ctx.always,
-          "ratio-x": ratioX.value,
-          "ratio-y": ratioY.value
-        }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : createCommentVNode("v-if", true)
-      ], 2);
-    };
+const scrollbarProps = buildProps({
+  height: {
+    type: [String, Number],
+    default: ""
+  },
+  maxHeight: {
+    type: [String, Number],
+    default: ""
+  },
+  native: Boolean,
+  wrapStyle: {
+    type: definePropType([String, Object, Array]),
+    default: ""
+  },
+  wrapClass: {
+    type: [String, Array],
+    default: ""
+  },
+  viewClass: {
+    type: [String, Array],
+    default: ""
+  },
+  viewStyle: {
+    type: [String, Array, Object],
+    default: ""
+  },
+  noresize: Boolean,
+  tag: {
+    type: String,
+    default: "div"
+  },
+  always: Boolean,
+  minSize: {
+    type: Number,
+    default: 20
   }
 });
-var Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/scrollbar/src/scrollbar.vue"]]);
+const scrollbarEmits = {
+  scroll: ({
+    scrollTop,
+    scrollLeft
+  }) => [scrollTop, scrollLeft].every(isNumber)
+};
 
-export { Scrollbar as default };
+export { scrollbarEmits, scrollbarProps };
 //# sourceMappingURL=scrollbar2.mjs.map