@element-plus/nightly 0.0.20251125 → 0.0.20251126

package/lib/components/scrollbar/src/scrollbar2.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var core = require('@vueuse/core');
-var bar = require('./bar.js');
+var bar = require('./bar2.js');
 var constants = require('./constants.js');
 var scrollbar = require('./scrollbar.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');

package/lib/components/scrollbar/src/thumb.js

@@ -2,146 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var core = require('@vueuse/core');
-var constants = require('./constants.js');
-var util = require('./util.js');
-var thumb = require('./thumb2.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-namespace/index.js');
-var error = require('../../../utils/error.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
 
-const COMPONENT_NAME = "Thumb";
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  __name: "thumb",
-  props: thumb.thumbProps,
-  setup(__props) {
-    const props = __props;
-    const scrollbar = vue.inject(constants.scrollbarContextKey);
-    const ns = index.useNamespace("scrollbar");
-    if (!scrollbar)
-      error.throwError(COMPONENT_NAME, "can not inject scrollbar context");
-    const instance = vue.ref();
-    const thumb = vue.ref();
-    const thumbState = vue.ref({});
-    const visible = vue.ref(false);
-    let cursorDown = false;
-    let cursorLeave = false;
-    let baseScrollHeight = 0;
-    let baseScrollWidth = 0;
-    let originalOnSelectStart = core.isClient ? document.onselectstart : null;
-    const bar = vue.computed(() => util.BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
-    const thumbStyle = vue.computed(() => util.renderThumbStyle({
-      size: props.size,
-      move: props.move,
-      bar: bar.value
-    }));
-    const offsetRatio = vue.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;
-      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
-    };
-    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;
-      baseScrollHeight = scrollbar.wrapElement.scrollHeight;
-      baseScrollWidth = scrollbar.wrapElement.scrollWidth;
-      document.addEventListener("mousemove", mouseMoveDocumentHandler);
-      document.addEventListener("mouseup", mouseUpDocumentHandler);
-      originalOnSelectStart = document.onselectstart;
-      document.onselectstart = () => false;
-    };
-    const mouseMoveDocumentHandler = (e) => {
-      if (!instance.value || !thumb.value)
-        return;
-      if (cursorDown === false)
-        return;
-      const prevPage = thumbState.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];
-      if (bar.value.scroll === "scrollLeft") {
-        scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollWidth / 100;
-      } else {
-        scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollHeight / 100;
-      }
-    };
-    const mouseUpDocumentHandler = () => {
-      cursorDown = false;
-      thumbState.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;
-    };
-    vue.onBeforeUnmount(() => {
-      restoreOnselectstart();
-      document.removeEventListener("mouseup", mouseUpDocumentHandler);
-    });
-    const restoreOnselectstart = () => {
-      if (document.onselectstart !== originalOnSelectStart)
-        document.onselectstart = originalOnSelectStart;
-    };
-    core.useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
-    core.useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.Transition, {
-        name: vue.unref(ns).b("fade"),
-        persisted: ""
-      }, {
-        default: vue.withCtx(() => [
-          vue.withDirectives(vue.createElementVNode("div", {
-            ref_key: "instance",
-            ref: instance,
-            class: vue.normalizeClass([vue.unref(ns).e("bar"), vue.unref(ns).is(vue.unref(bar).key)]),
-            onMousedown: clickTrackHandler,
-            onClick: vue.withModifiers(() => {
-            }, ["stop"])
-          }, [
-            vue.createElementVNode("div", {
-              ref_key: "thumb",
-              ref: thumb,
-              class: vue.normalizeClass(vue.unref(ns).e("thumb")),
-              style: vue.normalizeStyle(vue.unref(thumbStyle)),
-              onMousedown: clickThumbHandler
-            }, null, 38)
-          ], 42, ["onClick"]), [
-            [vue.vShow, _ctx.always || visible.value]
-          ])
-        ]),
-        _: 1
-      }, 8, ["name"]);
-    };
-  }
+const thumbProps = runtime.buildProps({
+  vertical: Boolean,
+  size: String,
+  move: Number,
+  ratio: {
+    type: Number,
+    required: true
+  },
+  always: Boolean
 });
-var Thumb = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "thumb.vue"]]);
 
-exports["default"] = Thumb;
+exports.thumbProps = thumbProps;
 //# sourceMappingURL=thumb.js.map

package/lib/components/scrollbar/src/thumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumb.js","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n      @mousedown=\"clickTrackHandler\"\n      @click.stop\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isClient, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { scrollbarContextKey } from './constants'\nimport { BAR_MAP, renderThumbStyle } from './util'\nimport { thumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nconst props = defineProps(thumbProps)\n\nconst scrollbar = inject(scrollbarContextKey)\nconst ns = useNamespace('scrollbar')\n\nif (!scrollbar) throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\nconst instance = ref<HTMLDivElement>()\nconst thumb = ref<HTMLDivElement>()\n\nconst thumbState = ref<Partial<Record<'X' | 'Y', number>>>({})\nconst visible = ref(false)\n\nlet cursorDown = false\nlet cursorLeave = false\nlet baseScrollHeight = 0\nlet baseScrollWidth = 0\nlet originalOnSelectStart:\n  | ((this: GlobalEventHandlers, ev: Event) => any)\n  | null = isClient ? document.onselectstart : null\n\nconst bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])\n\nconst thumbStyle = computed(() =>\n  renderThumbStyle({\n    size: props.size,\n    move: props.move,\n    bar: bar.value,\n  })\n)\n\nconst 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\nconst 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  thumbState.value[bar.value.axis] =\n    el[bar.value.offset] -\n    (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n}\n\nconst 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 * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n}\n\nconst startDrag = (e: MouseEvent) => {\n  e.stopImmediatePropagation()\n  cursorDown = true\n  baseScrollHeight = scrollbar.wrapElement.scrollHeight\n  baseScrollWidth = scrollbar.wrapElement.scrollWidth\n  document.addEventListener('mousemove', mouseMoveDocumentHandler)\n  document.addEventListener('mouseup', mouseUpDocumentHandler)\n  originalOnSelectStart = document.onselectstart\n  document.onselectstart = () => false\n}\n\nconst mouseMoveDocumentHandler = (e: MouseEvent) => {\n  if (!instance.value || !thumb.value) return\n  if (cursorDown === false) return\n\n  const prevPage = thumbState.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\n  if (bar.value.scroll === 'scrollLeft') {\n    scrollbar.wrapElement[bar.value.scroll] =\n      (thumbPositionPercentage * baseScrollWidth) / 100\n  } else {\n    scrollbar.wrapElement[bar.value.scroll] =\n      (thumbPositionPercentage * baseScrollHeight) / 100\n  }\n}\n\nconst mouseUpDocumentHandler = () => {\n  cursorDown = false\n  thumbState.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\nconst mouseMoveScrollbarHandler = () => {\n  cursorLeave = false\n  visible.value = !!props.size\n}\n\nconst mouseLeaveScrollbarHandler = () => {\n  cursorLeave = true\n  visible.value = cursorDown\n}\n\nonBeforeUnmount(() => {\n  restoreOnselectstart()\n  document.removeEventListener('mouseup', mouseUpDocumentHandler)\n})\n\nconst restoreOnselectstart = () => {\n  if (document.onselectstart !== originalOnSelectStart)\n    document.onselectstart = originalOnSelectStart\n}\n\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mousemove',\n  mouseMoveScrollbarHandler\n)\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mouseleave',\n  mouseLeaveScrollbarHandler\n)\n</script>\n"],"names":["inject","scrollbarContextKey","useNamespace","throwError","ref","isClient","computed","BAR_MAP","renderThumbStyle","onBeforeUnmount","useEventListener","toRef","_createBlock","_Transition","_unref","_withCtx","_withDirectives","_createElementVNode","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"thumb.js","sources":["../../../../../../packages/components/scrollbar/src/thumb.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\nimport type Thumb from './thumb.vue'\n\nexport const thumbProps = 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 ThumbProps = ExtractPropTypes<typeof thumbProps>\nexport type ThumbPropsPublic = __ExtractPublicPropTypes<typeof thumbProps>\n\nexport type ThumbInstance = InstanceType<typeof Thumb> & unknown\n"],"names":["buildProps"],"mappings":";;;;;;AACY,MAAC,UAAU,GAAGA,kBAAU,CAAC;AACrC,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;;;;"}

package/lib/components/scrollbar/src/thumb2.js

@@ -2,18 +2,146 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var runtime = require('../../../utils/vue/props/runtime.js');
+var vue = require('vue');
+var core = require('@vueuse/core');
+var constants = require('./constants.js');
+var util = require('./util.js');
+var thumb = require('./thumb.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../hooks/use-namespace/index.js');
+var error = require('../../../utils/error.js');
 
-const thumbProps = runtime.buildProps({
-  vertical: Boolean,
-  size: String,
-  move: Number,
-  ratio: {
-    type: Number,
-    required: true
-  },
-  always: Boolean
+const COMPONENT_NAME = "Thumb";
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "thumb",
+  props: thumb.thumbProps,
+  setup(__props) {
+    const props = __props;
+    const scrollbar = vue.inject(constants.scrollbarContextKey);
+    const ns = index.useNamespace("scrollbar");
+    if (!scrollbar)
+      error.throwError(COMPONENT_NAME, "can not inject scrollbar context");
+    const instance = vue.ref();
+    const thumb = vue.ref();
+    const thumbState = vue.ref({});
+    const visible = vue.ref(false);
+    let cursorDown = false;
+    let cursorLeave = false;
+    let baseScrollHeight = 0;
+    let baseScrollWidth = 0;
+    let originalOnSelectStart = core.isClient ? document.onselectstart : null;
+    const bar = vue.computed(() => util.BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
+    const thumbStyle = vue.computed(() => util.renderThumbStyle({
+      size: props.size,
+      move: props.move,
+      bar: bar.value
+    }));
+    const offsetRatio = vue.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;
+      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
+    };
+    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;
+      baseScrollHeight = scrollbar.wrapElement.scrollHeight;
+      baseScrollWidth = scrollbar.wrapElement.scrollWidth;
+      document.addEventListener("mousemove", mouseMoveDocumentHandler);
+      document.addEventListener("mouseup", mouseUpDocumentHandler);
+      originalOnSelectStart = document.onselectstart;
+      document.onselectstart = () => false;
+    };
+    const mouseMoveDocumentHandler = (e) => {
+      if (!instance.value || !thumb.value)
+        return;
+      if (cursorDown === false)
+        return;
+      const prevPage = thumbState.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];
+      if (bar.value.scroll === "scrollLeft") {
+        scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollWidth / 100;
+      } else {
+        scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollHeight / 100;
+      }
+    };
+    const mouseUpDocumentHandler = () => {
+      cursorDown = false;
+      thumbState.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;
+    };
+    vue.onBeforeUnmount(() => {
+      restoreOnselectstart();
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+    });
+    const restoreOnselectstart = () => {
+      if (document.onselectstart !== originalOnSelectStart)
+        document.onselectstart = originalOnSelectStart;
+    };
+    core.useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
+    core.useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.Transition, {
+        name: vue.unref(ns).b("fade"),
+        persisted: ""
+      }, {
+        default: vue.withCtx(() => [
+          vue.withDirectives(vue.createElementVNode("div", {
+            ref_key: "instance",
+            ref: instance,
+            class: vue.normalizeClass([vue.unref(ns).e("bar"), vue.unref(ns).is(vue.unref(bar).key)]),
+            onMousedown: clickTrackHandler,
+            onClick: vue.withModifiers(() => {
+            }, ["stop"])
+          }, [
+            vue.createElementVNode("div", {
+              ref_key: "thumb",
+              ref: thumb,
+              class: vue.normalizeClass(vue.unref(ns).e("thumb")),
+              style: vue.normalizeStyle(vue.unref(thumbStyle)),
+              onMousedown: clickThumbHandler
+            }, null, 38)
+          ], 42, ["onClick"]), [
+            [vue.vShow, _ctx.always || visible.value]
+          ])
+        ]),
+        _: 1
+      }, 8, ["name"]);
+    };
+  }
 });
+var Thumb = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "thumb.vue"]]);
 
-exports.thumbProps = thumbProps;
+exports["default"] = Thumb;
 //# sourceMappingURL=thumb2.js.map

package/lib/components/scrollbar/src/thumb2.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumb2.js","sources":["../../../../../../packages/components/scrollbar/src/thumb.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\nimport type Thumb from './thumb.vue'\n\nexport const thumbProps = 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 ThumbProps = ExtractPropTypes<typeof thumbProps>\nexport type ThumbPropsPublic = __ExtractPublicPropTypes<typeof thumbProps>\n\nexport type ThumbInstance = InstanceType<typeof Thumb> & unknown\n"],"names":["buildProps"],"mappings":";;;;;;AACY,MAAC,UAAU,GAAGA,kBAAU,CAAC;AACrC,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":"thumb2.js","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n      @mousedown=\"clickTrackHandler\"\n      @click.stop\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isClient, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { scrollbarContextKey } from './constants'\nimport { BAR_MAP, renderThumbStyle } from './util'\nimport { thumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nconst props = defineProps(thumbProps)\n\nconst scrollbar = inject(scrollbarContextKey)\nconst ns = useNamespace('scrollbar')\n\nif (!scrollbar) throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\nconst instance = ref<HTMLDivElement>()\nconst thumb = ref<HTMLDivElement>()\n\nconst thumbState = ref<Partial<Record<'X' | 'Y', number>>>({})\nconst visible = ref(false)\n\nlet cursorDown = false\nlet cursorLeave = false\nlet baseScrollHeight = 0\nlet baseScrollWidth = 0\nlet originalOnSelectStart:\n  | ((this: GlobalEventHandlers, ev: Event) => any)\n  | null = isClient ? document.onselectstart : null\n\nconst bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])\n\nconst thumbStyle = computed(() =>\n  renderThumbStyle({\n    size: props.size,\n    move: props.move,\n    bar: bar.value,\n  })\n)\n\nconst 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\nconst 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  thumbState.value[bar.value.axis] =\n    el[bar.value.offset] -\n    (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n}\n\nconst 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 * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n}\n\nconst startDrag = (e: MouseEvent) => {\n  e.stopImmediatePropagation()\n  cursorDown = true\n  baseScrollHeight = scrollbar.wrapElement.scrollHeight\n  baseScrollWidth = scrollbar.wrapElement.scrollWidth\n  document.addEventListener('mousemove', mouseMoveDocumentHandler)\n  document.addEventListener('mouseup', mouseUpDocumentHandler)\n  originalOnSelectStart = document.onselectstart\n  document.onselectstart = () => false\n}\n\nconst mouseMoveDocumentHandler = (e: MouseEvent) => {\n  if (!instance.value || !thumb.value) return\n  if (cursorDown === false) return\n\n  const prevPage = thumbState.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\n  if (bar.value.scroll === 'scrollLeft') {\n    scrollbar.wrapElement[bar.value.scroll] =\n      (thumbPositionPercentage * baseScrollWidth) / 100\n  } else {\n    scrollbar.wrapElement[bar.value.scroll] =\n      (thumbPositionPercentage * baseScrollHeight) / 100\n  }\n}\n\nconst mouseUpDocumentHandler = () => {\n  cursorDown = false\n  thumbState.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\nconst mouseMoveScrollbarHandler = () => {\n  cursorLeave = false\n  visible.value = !!props.size\n}\n\nconst mouseLeaveScrollbarHandler = () => {\n  cursorLeave = true\n  visible.value = cursorDown\n}\n\nonBeforeUnmount(() => {\n  restoreOnselectstart()\n  document.removeEventListener('mouseup', mouseUpDocumentHandler)\n})\n\nconst restoreOnselectstart = () => {\n  if (document.onselectstart !== originalOnSelectStart)\n    document.onselectstart = originalOnSelectStart\n}\n\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mousemove',\n  mouseMoveScrollbarHandler\n)\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mouseleave',\n  mouseLeaveScrollbarHandler\n)\n</script>\n"],"names":["inject","scrollbarContextKey","useNamespace","throwError","ref","isClient","computed","BAR_MAP","renderThumbStyle","onBeforeUnmount","useEventListener","toRef","_createBlock","_Transition","_unref","_withCtx","_withDirectives","_createElementVNode","_normalizeClass"],"mappings":"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"}

package/lib/components/select-v2/src/useProps.d.ts

@@ -8,7 +8,7 @@ export interface Props {
 }
 export declare const defaultProps: Required<Props>;
 export declare function useProps(props: Pick<SelectV2Props, 'props'>): {
-    aliasProps: import("vue").ComputedRef<{
+    aliasProps: import("vue").Ref<{
         label: string;
         value: string;
         disabled: string;

package/lib/components/select-v2/src/useProps.js

@@ -12,7 +12,14 @@ const defaultProps = {
   options: "options"
 };
 function useProps(props) {
-  const aliasProps = vue.computed(() => ({ ...defaultProps, ...props.props }));
+  const aliasProps = vue.ref({ ...defaultProps, ...props.props });
+  let cache = { ...props.props };
+  vue.watch(() => props.props, (val) => {
+    if (!lodashUnified.isEqual(val, cache)) {
+      aliasProps.value = { ...defaultProps, ...val };
+      cache = { ...val };
+    }
+  }, { deep: true });
   const getLabel = (option) => lodashUnified.get(option, aliasProps.value.label);
   const getValue = (option) => lodashUnified.get(option, aliasProps.value.value);
   const getDisabled = (option) => lodashUnified.get(option, aliasProps.value.disabled);

package/lib/components/select-v2/src/useProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useProps.js","sources":["../../../../../../packages/components/select-v2/src/useProps.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { get } from 'lodash-unified'\n\nimport type { SelectV2Props } from './token'\nimport type { Option } from './select.types'\n\nexport interface Props {\n  label?: string\n  value?: string\n  disabled?: string\n  options?: string\n}\n\nexport const defaultProps: Required<Props> = {\n  label: 'label',\n  value: 'value',\n  disabled: 'disabled',\n  options: 'options',\n}\n\nexport function useProps(props: Pick<SelectV2Props, 'props'>) {\n  const aliasProps = computed(() => ({ ...defaultProps, ...props.props }))\n\n  const getLabel = (option: Option) => get(option, aliasProps.value.label)\n  const getValue = (option: Option) => get(option, aliasProps.value.value)\n  const getDisabled = (option: Option) => get(option, aliasProps.value.disabled)\n  const getOptions = (option: Option) => get(option, aliasProps.value.options)\n\n  return {\n    aliasProps,\n    getLabel,\n    getValue,\n    getDisabled,\n    getOptions,\n  }\n}\n"],"names":["computed","get"],"mappings":";;;;;;;AAEY,MAAC,YAAY,GAAG;AAC5B,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,QAAQ,EAAE,UAAU;AACtB,EAAE,OAAO,EAAE,SAAS;AACpB,EAAE;AACK,SAAS,QAAQ,CAAC,KAAK,EAAE;AAChC,EAAE,MAAM,UAAU,GAAGA,YAAQ,CAAC,OAAO,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;AAC3E,EAAE,MAAM,QAAQ,GAAG,CAAC,MAAM,KAAKC,iBAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACnE,EAAE,MAAM,QAAQ,GAAG,CAAC,MAAM,KAAKA,iBAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACnE,EAAE,MAAM,WAAW,GAAG,CAAC,MAAM,KAAKA,iBAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AACzE,EAAE,MAAM,UAAU,GAAG,CAAC,MAAM,KAAKA,iBAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACvE,EAAE,OAAO;AACT,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,QAAQ;AACZ,IAAI,WAAW;AACf,IAAI,UAAU;AACd,GAAG,CAAC;AACJ;;;;;"}
+{"version":3,"file":"useProps.js","sources":["../../../../../../packages/components/select-v2/src/useProps.ts"],"sourcesContent":["import { ref, watch } from 'vue'\nimport { get, isEqual } from 'lodash-unified'\n\nimport type { SelectV2Props } from './token'\nimport type { Option } from './select.types'\n\nexport interface Props {\n  label?: string\n  value?: string\n  disabled?: string\n  options?: string\n}\n\nexport const defaultProps: Required<Props> = {\n  label: 'label',\n  value: 'value',\n  disabled: 'disabled',\n  options: 'options',\n}\n\nexport function useProps(props: Pick<SelectV2Props, 'props'>) {\n  const aliasProps = ref({ ...defaultProps, ...props.props })\n  let cache = { ...props.props }\n\n  watch(\n    () => props.props,\n    (val) => {\n      // The props is an object, and its properties may be modified without changing the reference. In this case, the watch values before and after are equal. Here, we compare using the cached previous value.\n      if (!isEqual(val, cache)) {\n        aliasProps.value = { ...defaultProps, ...val }\n        cache = { ...val }\n      }\n    },\n    { deep: true }\n  )\n\n  const getLabel = (option: Option) => get(option, aliasProps.value.label)\n  const getValue = (option: Option) => get(option, aliasProps.value.value)\n  const getDisabled = (option: Option) => get(option, aliasProps.value.disabled)\n  const getOptions = (option: Option) => get(option, aliasProps.value.options)\n\n  return {\n    aliasProps,\n    getLabel,\n    getValue,\n    getDisabled,\n    getOptions,\n  }\n}\n"],"names":["ref","watch","isEqual","get"],"mappings":";;;;;;;AAEY,MAAC,YAAY,GAAG;AAC5B,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,QAAQ,EAAE,UAAU;AACtB,EAAE,OAAO,EAAE,SAAS;AACpB,EAAE;AACK,SAAS,QAAQ,CAAC,KAAK,EAAE;AAChC,EAAE,MAAM,UAAU,GAAGA,OAAG,CAAC,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;AAC9D,EAAE,IAAI,KAAK,GAAG,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;AACjC,EAAEC,SAAK,CAAC,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,KAAK;AACpC,IAAI,IAAI,CAACC,qBAAO,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE;AAC9B,MAAM,UAAU,CAAC,KAAK,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,GAAG,EAAE,CAAC;AACrD,MAAM,KAAK,GAAG,EAAE,GAAG,GAAG,EAAE,CAAC;AACzB,KAAK;AACL,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;AACrB,EAAE,MAAM,QAAQ,GAAG,CAAC,MAAM,KAAKC,iBAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACnE,EAAE,MAAM,QAAQ,GAAG,CAAC,MAAM,KAAKA,iBAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACnE,EAAE,MAAM,WAAW,GAAG,CAAC,MAAM,KAAKA,iBAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AACzE,EAAE,MAAM,UAAU,GAAG,CAAC,MAAM,KAAKA,iBAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACvE,EAAE,OAAO;AACT,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,QAAQ;AACZ,IAAI,WAAW;AACf,IAAI,UAAU;AACd,GAAG,CAAC;AACJ;;;;;"}

package/lib/components/splitter/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var splitter$1 = require('./src/splitter2.js');
-var splitPanel$1 = require('./src/split-panel.js');
-var splitter = require('./src/splitter.js');
-var splitPanel = require('./src/split-panel2.js');
+var splitter$1 = require('./src/splitter.js');
+var splitPanel$1 = require('./src/split-panel2.js');
+var splitter = require('./src/splitter2.js');
+var splitPanel = require('./src/split-panel.js');
 var install = require('../../utils/vue/install.js');
 
 const ElSplitter = install.withInstall(splitter$1["default"], {

package/lib/components/splitter/src/split-panel.js

@@ -2,167 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var usePanel = require('./hooks/usePanel.js');
-var splitBar = require('./split-bar.js');
-var splitPanel = require('./split-panel2.js');
-var type = require('./type.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var useSize = require('./hooks/useSize.js');
-var index = require('../../../hooks/use-namespace/index.js');
-var error = require('../../../utils/error.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
 
-const COMPONENT_NAME = "ElSplitterPanel";
-const __default__ = vue.defineComponent({
-  name: COMPONENT_NAME
+const splitterPanelProps = runtime.buildProps({
+  min: {
+    type: [String, Number]
+  },
+  max: {
+    type: [String, Number]
+  },
+  size: {
+    type: [String, Number]
+  },
+  resizable: {
+    type: Boolean,
+    default: true
+  },
+  collapsible: Boolean
 });
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: splitPanel.splitterPanelProps,
-  emits: splitPanel.splitterPanelEmits,
-  setup(__props, { expose, emit: emits }) {
-    const props = __props;
-    const ns = index.useNamespace("splitter-panel");
-    const splitterContext = vue.inject(type.splitterRootContextKey);
-    if (!splitterContext)
-      error.throwError(COMPONENT_NAME, "usage: <el-splitter><el-splitter-panel /></el-splitter/>");
-    const { panels, layout, lazy, containerSize, pxSizes } = vue.toRefs(splitterContext);
-    const {
-      registerPanel,
-      unregisterPanel,
-      onCollapse,
-      onMoveEnd,
-      onMoveStart,
-      onMoving
-    } = splitterContext;
-    const panelEl = vue.ref();
-    const instance = vue.getCurrentInstance();
-    const uid = instance.uid;
-    const index$1 = vue.ref(0);
-    const panel = vue.computed(() => panels.value[index$1.value]);
-    const setIndex = (val) => {
-      index$1.value = val;
-    };
-    const panelSize = vue.computed(() => {
-      var _a;
-      if (!panel.value)
-        return 0;
-      return (_a = pxSizes.value[index$1.value]) != null ? _a : 0;
-    });
-    const nextSize = vue.computed(() => {
-      var _a;
-      if (!panel.value)
-        return 0;
-      return (_a = pxSizes.value[index$1.value + 1]) != null ? _a : 0;
-    });
-    const nextPanel = vue.computed(() => {
-      if (panel.value) {
-        return panels.value[index$1.value + 1];
-      }
-      return null;
-    });
-    const isResizable = vue.computed(() => {
-      var _a;
-      if (!nextPanel.value)
-        return false;
-      return props.resizable && ((_a = nextPanel.value) == null ? void 0 : _a.resizable) && (panelSize.value !== 0 || !props.min) && (nextSize.value !== 0 || !nextPanel.value.min);
-    });
-    const isShowBar = vue.computed(() => {
-      if (!panel.value)
-        return false;
-      return index$1.value !== panels.value.length - 1;
-    });
-    const startCollapsible = vue.computed(() => usePanel.isCollapsible(panel.value, panelSize.value, nextPanel.value, nextSize.value));
-    const endCollapsible = vue.computed(() => usePanel.isCollapsible(nextPanel.value, nextSize.value, panel.value, panelSize.value));
-    function sizeToPx(str) {
-      if (useSize.isPct(str)) {
-        return useSize.getPct(str) * containerSize.value || 0;
-      } else if (useSize.isPx(str)) {
-        return useSize.getPx(str);
-      }
-      return str != null ? str : 0;
-    }
-    let isSizeUpdating = false;
-    vue.watch(() => props.size, () => {
-      if (!isSizeUpdating && panel.value) {
-        if (!containerSize.value) {
-          panel.value.size = props.size;
-          return;
-        }
-        const size = sizeToPx(props.size);
-        const maxSize = sizeToPx(props.max);
-        const minSize = sizeToPx(props.min);
-        const finalSize = Math.min(Math.max(size, minSize || 0), maxSize || size);
-        if (finalSize !== size) {
-          emits("update:size", finalSize);
-        }
-        panel.value.size = finalSize;
-      }
-    });
-    vue.watch(() => {
-      var _a;
-      return (_a = panel.value) == null ? void 0 : _a.size;
-    }, (val) => {
-      if (val !== props.size) {
-        isSizeUpdating = true;
-        emits("update:size", val);
-        vue.nextTick(() => isSizeUpdating = false);
-      }
-    });
-    vue.watch(() => props.resizable, (val) => {
-      if (panel.value) {
-        panel.value.resizable = val;
-      }
-    });
-    const _panel = vue.reactive({
-      el: panelEl.value,
-      uid,
-      getVnode: () => instance.vnode,
-      setIndex,
-      ...props,
-      collapsible: vue.computed(() => usePanel.getCollapsible(props.collapsible))
-    });
-    registerPanel(_panel);
-    vue.onBeforeUnmount(() => unregisterPanel(_panel));
-    expose({
-      splitterPanelRef: panelEl
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.createElementVNode("div", vue.mergeProps({
-          ref_key: "panelEl",
-          ref: panelEl,
-          class: [vue.unref(ns).b()],
-          style: { flexBasis: `${vue.unref(panelSize)}px` }
-        }, _ctx.$attrs), [
-          vue.renderSlot(_ctx.$slots, "default")
-        ], 16),
-        vue.unref(isShowBar) ? (vue.openBlock(), vue.createBlock(splitBar["default"], {
-          key: 0,
-          index: index$1.value,
-          layout: vue.unref(layout),
-          lazy: vue.unref(lazy),
-          resizable: vue.unref(isResizable),
-          "start-collapsible": vue.unref(startCollapsible),
-          "end-collapsible": vue.unref(endCollapsible),
-          onMoveStart: vue.unref(onMoveStart),
-          onMoving: vue.unref(onMoving),
-          onMoveEnd: vue.unref(onMoveEnd),
-          onCollapse: vue.unref(onCollapse)
-        }, {
-          "start-collapsible": vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "start-collapsible")
-          ]),
-          "end-collapsible": vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "end-collapsible")
-          ]),
-          _: 3
-        }, 8, ["index", "layout", "lazy", "resizable", "start-collapsible", "end-collapsible", "onMoveStart", "onMoving", "onMoveEnd", "onCollapse"])) : vue.createCommentVNode("v-if", true)
-      ], 64);
-    };
-  }
-});
-var SplitPanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "split-panel.vue"]]);
+const splitterPanelEmits = {
+  "update:size": (value) => typeof value === "number"
+};
 
-exports["default"] = SplitPanel;
+exports.splitterPanelEmits = splitterPanelEmits;
+exports.splitterPanelProps = splitterPanelProps;
 //# sourceMappingURL=split-panel.js.map