@element-plus/nightly 0.0.20250411 → 0.0.20250413

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

@@ -1 +1 @@
-{"version":3,"file":"scrollbar2.mjs","sources":["../../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { useAriaProps } from '@element-plus/hooks'\nimport type { ExtractPropTypes, StyleValue } from 'vue'\nimport type Scrollbar from './scrollbar.vue'\n\nexport const scrollbarProps = buildProps({\n  /**\n   * @description height of scrollbar\n   */\n  height: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description max height of scrollbar\n   */\n  maxHeight: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description whether to use the native scrollbar\n   */\n  native: {\n    type: Boolean,\n    default: false,\n  },\n  /**\n   * @description style of wrap\n   */\n  wrapStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n    default: '',\n  },\n  /**\n   * @description class of wrap\n   */\n  wrapClass: {\n    type: [String, Array],\n    default: '',\n  },\n  /**\n   * @description class of view\n   */\n  viewClass: {\n    type: [String, Array],\n    default: '',\n  },\n  /**\n   * @description style of view\n   */\n  viewStyle: {\n    type: [String, Array, Object],\n    default: '',\n  },\n  /**\n   * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance\n   */\n  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n  /**\n   * @description element tag of the view\n   */\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  /**\n   * @description always show\n   */\n  always: Boolean,\n  /**\n   * @description minimum size of scrollbar\n   */\n  minSize: {\n    type: Number,\n    default: 20,\n  },\n  /**\n   * @description Wrap tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: undefined,\n  },\n  /**\n   * @description id of view\n   */\n  id: String,\n  /**\n   * @description role of view\n   */\n  role: String,\n  ...useAriaProps(['ariaLabel', 'ariaOrientation']),\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> & unknown\n"],"names":[],"mappings":";;;;AAEY,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;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,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,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,EAAE,EAAE,MAAM;AACZ,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,GAAG,YAAY,CAAC,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;AACnD,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":"scrollbar2.mjs","sources":["../../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbarRef\" :class=\"ns.b()\">\n    <div\n      ref=\"wrapRef\"\n      :class=\"wrapKls\"\n      :style=\"wrapStyle\"\n      :tabindex=\"tabindex\"\n      @scroll=\"handleScroll\"\n    >\n      <component\n        :is=\"tag\"\n        :id=\"id\"\n        ref=\"resizeRef\"\n        :class=\"resizeKls\"\n        :style=\"viewStyle\"\n        :role=\"role\"\n        :aria-label=\"ariaLabel\"\n        :aria-orientation=\"ariaOrientation\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar ref=\"barRef\" :always=\"always\" :min-size=\"minSize\" />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onActivated,\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 { useNamespace } from '@element-plus/hooks'\nimport Bar from './bar.vue'\nimport { scrollbarContextKey } from './constants'\nimport { scrollbarEmits, scrollbarProps } from './scrollbar'\nimport type { BarInstance } from './bar'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst COMPONENT_NAME = 'ElScrollbar'\n\ndefineOptions({\n  name: COMPONENT_NAME,\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\nlet wrapScrollTop = 0\nlet wrapScrollLeft = 0\n\nconst scrollbarRef = ref<HTMLDivElement>()\nconst wrapRef = ref<HTMLDivElement>()\nconst resizeRef = ref<HTMLElement>()\nconst barRef = ref<BarInstance>()\n\nconst wrapStyle = 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 wrapKls = computed(() => {\n  return [\n    props.wrapClass,\n    ns.e('wrap'),\n    { [ns.em('wrap', 'hidden-default')]: !props.native },\n  ]\n})\n\nconst resizeKls = computed(() => {\n  return [ns.e('view'), props.viewClass]\n})\n\nconst handleScroll = () => {\n  if (wrapRef.value) {\n    barRef.value?.handleScroll(wrapRef.value)\n    wrapScrollTop = wrapRef.value.scrollTop\n    wrapScrollLeft = wrapRef.value.scrollLeft\n\n    emit('scroll', {\n      scrollTop: wrapRef.value.scrollTop,\n      scrollLeft: wrapRef.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    wrapRef.value!.scrollTo(arg1)\n  } else if (isNumber(arg1) && isNumber(arg2)) {\n    wrapRef.value!.scrollTo(arg1, arg2)\n  }\n}\n\nconst setScrollTop = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollTop = value\n}\n\nconst setScrollLeft = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollLeft = value\n}\n\nconst update = () => {\n  barRef.value?.update()\n}\n\nwatch(\n  () => props.noresize,\n  (noresize) => {\n    if (noresize) {\n      stopResizeObserver?.()\n      stopResizeListener?.()\n    } else {\n      ;({ stop: stopResizeObserver } = useResizeObserver(resizeRef, 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 (wrapRef.value) {\n          barRef.value?.handleScroll(wrapRef.value)\n        }\n      })\n  }\n)\n\nprovide(\n  scrollbarContextKey,\n  reactive({\n    scrollbarElement: scrollbarRef,\n    wrapElement: wrapRef,\n  })\n)\n\nonActivated(() => {\n  if (wrapRef.value) {\n    wrapRef.value.scrollTop = wrapScrollTop\n    wrapRef.value.scrollLeft = wrapScrollLeft\n  }\n})\n\nonMounted(() => {\n  if (!props.native)\n    nextTick(() => {\n      update()\n    })\n})\nonUpdated(() => update())\n\ndefineExpose({\n  /** @description scrollbar wrap ref */\n  wrapRef,\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":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_normalizeStyle"],"mappings":"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"}

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

@@ -1,135 +1,15 @@
-import { defineComponent, inject, ref, computed, onBeforeUnmount, toRef, openBlock, createBlock, Transition, unref, withCtx, withDirectives, createElementVNode, normalizeClass, withModifiers, normalizeStyle, vShow } from 'vue';
-import { useEventListener, isClient } from '@vueuse/core';
-import { scrollbarContextKey } from './constants.mjs';
-import { BAR_MAP, renderThumbStyle } from './util.mjs';
-import { thumbProps } from './thumb2.mjs';
-import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { throwError } from '../../../utils/error.mjs';
+import { buildProps } from '../../../utils/vue/props/runtime.mjs';
 
-const COMPONENT_NAME = "Thumb";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "thumb",
-  props: thumbProps,
-  setup(__props) {
-    const props = __props;
-    const scrollbar = inject(scrollbarContextKey);
-    const ns = useNamespace("scrollbar");
-    if (!scrollbar)
-      throwError(COMPONENT_NAME, "can not inject scrollbar context");
-    const instance = ref();
-    const thumb = ref();
-    const thumbState = ref({});
-    const visible = ref(false);
-    let cursorDown = false;
-    let cursorLeave = false;
-    let originalOnSelectStart = 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;
-      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;
-      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];
-      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 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;
-    };
-    onBeforeUnmount(() => {
-      restoreOnselectstart();
-      document.removeEventListener("mouseup", mouseUpDocumentHandler);
-    });
-    const restoreOnselectstart = () => {
-      if (document.onselectstart !== originalOnSelectStart)
-        document.onselectstart = originalOnSelectStart;
-    };
-    useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
-    useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(Transition, {
-        name: unref(ns).b("fade"),
-        persisted: ""
-      }, {
-        default: withCtx(() => [
-          withDirectives(createElementVNode("div", {
-            ref_key: "instance",
-            ref: instance,
-            class: normalizeClass([unref(ns).e("bar"), unref(ns).is(unref(bar).key)]),
-            onMousedown: clickTrackHandler,
-            onClick: withModifiers(() => {
-            }, ["stop"])
-          }, [
-            createElementVNode("div", {
-              ref_key: "thumb",
-              ref: thumb,
-              class: normalizeClass(unref(ns).e("thumb")),
-              style: normalizeStyle(unref(thumbStyle)),
-              onMousedown: clickThumbHandler
-            }, null, 38)
-          ], 42, ["onClick"]), [
-            [vShow, _ctx.always || visible.value]
-          ])
-        ]),
-        _: 1
-      }, 8, ["name"]);
-    };
-  }
+const thumbProps = buildProps({
+  vertical: Boolean,
+  size: String,
+  move: Number,
+  ratio: {
+    type: Number,
+    required: true
+  },
+  always: Boolean
 });
-var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "thumb.vue"]]);
 
-export { Thumb as default };
+export { thumbProps };
 //# sourceMappingURL=thumb.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"thumb.mjs","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 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  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  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\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":["_createBlock","_Transition","_unref","_withCtx","_withDirectives","_createElementVNode","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"thumb.mjs","sources":["../../../../../../../packages/components/scrollbar/src/thumb.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } 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>\n\nexport type ThumbInstance = InstanceType<typeof Thumb> & unknown\n"],"names":[],"mappings":";;AACY,MAAC,UAAU,GAAG,UAAU,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/es/packages/components/scrollbar/src/thumb2.mjs

@@ -1,15 +1,135 @@
-import { buildProps } from '../../../utils/vue/props/runtime.mjs';
+import { defineComponent, inject, ref, computed, onBeforeUnmount, toRef, openBlock, createBlock, Transition, unref, withCtx, withDirectives, createElementVNode, normalizeClass, withModifiers, normalizeStyle, vShow } from 'vue';
+import { useEventListener, isClient } from '@vueuse/core';
+import { scrollbarContextKey } from './constants.mjs';
+import { BAR_MAP, renderThumbStyle } from './util.mjs';
+import { thumbProps } from './thumb.mjs';
+import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { throwError } from '../../../utils/error.mjs';
 
-const thumbProps = buildProps({
-  vertical: Boolean,
-  size: String,
-  move: Number,
-  ratio: {
-    type: Number,
-    required: true
-  },
-  always: Boolean
+const COMPONENT_NAME = "Thumb";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "thumb",
+  props: thumbProps,
+  setup(__props) {
+    const props = __props;
+    const scrollbar = inject(scrollbarContextKey);
+    const ns = useNamespace("scrollbar");
+    if (!scrollbar)
+      throwError(COMPONENT_NAME, "can not inject scrollbar context");
+    const instance = ref();
+    const thumb = ref();
+    const thumbState = ref({});
+    const visible = ref(false);
+    let cursorDown = false;
+    let cursorLeave = false;
+    let originalOnSelectStart = 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;
+      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;
+      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];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 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;
+    };
+    onBeforeUnmount(() => {
+      restoreOnselectstart();
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+    });
+    const restoreOnselectstart = () => {
+      if (document.onselectstart !== originalOnSelectStart)
+        document.onselectstart = originalOnSelectStart;
+    };
+    useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
+    useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, {
+        name: unref(ns).b("fade"),
+        persisted: ""
+      }, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("div", {
+            ref_key: "instance",
+            ref: instance,
+            class: normalizeClass([unref(ns).e("bar"), unref(ns).is(unref(bar).key)]),
+            onMousedown: clickTrackHandler,
+            onClick: withModifiers(() => {
+            }, ["stop"])
+          }, [
+            createElementVNode("div", {
+              ref_key: "thumb",
+              ref: thumb,
+              class: normalizeClass(unref(ns).e("thumb")),
+              style: normalizeStyle(unref(thumbStyle)),
+              onMousedown: clickThumbHandler
+            }, null, 38)
+          ], 42, ["onClick"]), [
+            [vShow, _ctx.always || visible.value]
+          ])
+        ]),
+        _: 1
+      }, 8, ["name"]);
+    };
+  }
 });
+var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "thumb.vue"]]);
 
-export { thumbProps };
+export { Thumb as default };
 //# sourceMappingURL=thumb2.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"thumb2.mjs","sources":["../../../../../../../packages/components/scrollbar/src/thumb.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } 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>\n\nexport type ThumbInstance = InstanceType<typeof Thumb> & unknown\n"],"names":[],"mappings":";;AACY,MAAC,UAAU,GAAG,UAAU,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.mjs","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 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  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  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\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":["_createBlock","_Transition","_unref","_withCtx","_withDirectives","_createElementVNode","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;AA+BA,IAAM,MAAA,SAAA,GAAY,OAAO,mBAAmB,CAAA,CAAA;AAC5C,IAAM,MAAA,EAAA,GAAK,aAAa,WAAW,CAAA,CAAA;AAEnC,IAAA,IAAI,CAAC,SAAA;AAEL,MAAA,yBAAqC,EAAA,kCAAA,CAAA,CAAA;AACrC,IAAA,MAAM,QAAQ,GAAoB,GAAA,EAAA,CAAA;AAElC,IAAM,MAAA,KAAA,GAAA,GAAA,EAAa,CAAwC;AAC3D,IAAM,MAAA,UAAU,MAAS,CAAA,EAAA,CAAA,CAAA;AAEzB,IAAA,MAAiB,OAAA,GAAA,GAAA,CAAA,KAAA,CAAA,CAAA;AACjB,IAAA,IAAI,UAAc,GAAA,KAAA,CAAA;AAClB,IAAI,IAAA,WAAA,GAAA,KAAA,CAAA;AAIJ,IAAM,IAAA,qBAAqB,GAAA,mBAAyB,CAAA,aAAA,GAAA;AAEpD,IAAA,MAAM,GAAa,GAAA,QAAA,CAAA,MAAA,OAAA,CAAA,KAAA,CAAA,QAAA,GAAA,UAAA,GAAA,YAAA,CAAA,CAAA,CAAA;AAAA,IAAA,gBACA,GAAA,QAAA,CAAA,MAAA,gBAAA,CAAA;AAAA,MAAA,WACH,CAAA,IAAA;AAAA,MAAA,WACA,CAAA,IAAA;AAAA,MAAA,QACH,CAAA,KAAA;AAAA,KAAA,CACX,CAAC,CAAA;AAAA,IACH,MAAA,WAAA,GAAA,QAAA,CAAA,MAAA,QAAA,CAAA,KAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,IAAA,CAAA,GAAA,SAAA,CAAA,WAAA,CAAA,GAAA,CAAA,KAAA,CAAA,UAAA,CAAA,GAAA,KAAA,CAAA,KAAA,GAAA,KAAA,CAAA,KAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAAA,CAAA;AAEA,IAAA,MAAM,iBAAc,GAAA,CAAA,CAAA,KAAA;AAAA,MAClB,IAAA,EAAA,CAAA;AAAA,MAAA,CAAA,CAAA,eAAA,EAAA,CAAA;AAAA,MAAA,IAAA,CAAA,CAAA,OAAA,IAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,MAAA,CAAA;AAAA,QAAA,OAAA;AAAA,MAAA,CAAA,WAIkB,CAAA,cAAU,KAAM,IAAA,QACtB,CAAA,GAAA,EAAA,CAAA,iBAAiB,CAAM;AAEJ,MAAA,SAAA,CAAA,CAAA,CAAA,CAAA;AAAA,MACjC,MAAA,EAAA,GAAA,CAAA,CAAA,aAAA,CAAA;AAEA,MAAM,IAAA,CAAA,EAAA;AAEJ,QAAE,OAAgB;AAClB,MAAI,iBAAa,GAAC,CAAG,KAAG,CAAA,IAAA,CAAA,GAAW,EAAA,CAAA,GAAM,CAAG,KAAA,CAAA,MAAA,CAAA,IAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,GAAA,EAAA,CAAA,qBAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,SAAA,CAAA,CAAA,CAAA;AAE5C,KAAO,CAAA;AACP,IAAA,MAAA,iBAAW,GAAA,CAAA,CAAA,KAAA;AAEX,MAAA,IAAA,CAAA,MAAW,KAAE,IAAA,CAAA,QAAA,CAAA,KAAA,IAAA,CAAA,SAAA,CAAA,WAAA;AACb,QAAA,OAAS;AACT,MAAW,MAAA,MAAA,GAAA,QAAgB,CAAA,CAAA,CAAA,4BACN,EAAA,CAAA,IAChB,KAAI,CAAA,UAAY,GAAI,CAAA,CAAA;AAA8C,MACzE,MAAA,SAAA,GAAA,KAAA,CAAA,KAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA;AAEA,MAAM,MAAA,uBAAuC,GAAA,CAAA,MAAA,GAAA,SAAA,IAAA,GAAA,GAAA,WAAA,CAAA,KAAA,GAAA,QAAA,CAAA,KAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAAA;AAC3C,MAAI,qBAAiB,UAAkB,CAAA,MAAA,CAAA,0BAAwB,GAAA,SAAA,CAAA,WAAA,CAAA,GAAA,CAAA,KAAA,CAAA,UAAA,CAAA,GAAA,GAAA,CAAA;AAE/D,KAAA,CAAA;AAAoB,IACjB,MAAE,SAAuB,GAAA,CAAA,CAAA,KAAA;AACN,MACtB,CAAA,CAAA,wBAAA,EAAA,CAAA;AACA,MAAA,kBAAkB;AAClB,MAAM,QAAA,CAAA,gBAAA,CAAA,WACO,EAAA,wBAAmB,CAAA,CAAA;AAGhC,MAAU,QAAA,CAAA,gBAAgB,CAAA,SAAY,EAAA,sBACT,CAAA,CAAA;AAC3B,MACJ,qBAAA,GAAA,QAAA,CAAA,aAAA,CAAA;AAEA,MAAM,QAAA,CAAA,aAA+B,GAAA,MAAA,KAAA,CAAA;AACnC,KAAA,CAAA;AACA,IAAa,MAAA,wBAAA,GAAA,CAAA,CAAA,KAAA;AACb,MAAS,IAAA,CAAA,QAAA,CAAA,KAAA,IAAA,CAAA;AACT,QAAS,OAAA;AACT,MAAA,IAAA,UAAA,KAAA,KAAwB;AACxB,QAAA,OAAS;AAAsB,MACjC,MAAA,QAAA,GAAA,UAAA,CAAA,KAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA;AAEA,MAAM,IAAA,CAAA,QAAA;AACJ,QAAA,OAAK;AACL,MAAA,wBAA0B,CAAA,KAAA,CAAA,qBAAA,EAAA,CAAA,GAAA,CAAA,KAAA,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,IAAA,CAAA,CAAA,CAAA;AAE1B,MAAA,MAAM,kBAAW,GAAA,KAAiB,CAAA,KAAI,UAAU,CAAA,MAAA,CAAA,GAAA,QAAA,CAAA;AAChD,MAAA,MAAe,uBAAA,GAAA,CAAA,MAAA,GAAA,kBAAA,IAAA,GAAA,GAAA,WAAA,CAAA,KAAA,GAAA,QAAA,CAAA,KAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,CAAA,CAAA;AAEf,MAAA,SACG,CAAA,WAAA,CAAA,GAAS,CAAM,KAAA,CAAA,MAAA,CAAA,GAAA,uBAAkC,GAAA,SAChD,CAAA,WAAM,CAAM,SACd,CAAA,UAAA,CAAA,GAAA,GAAA,CAAA;AACF,KAAA,CAAA;AACA,IAAM,MAAA,sBAAA,GAAA,MACO;AAEb,MAAU,UAAA,GAAA,KAAA,CAAA;AAER,MACJ,UAAA,CAAA,KAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA;AAEA,MAAA,6BAA+B,WAAM,EAAA,wBAAA,CAAA,CAAA;AACnC,MAAa,QAAA,CAAA,mBAAA,CAAA,SAAA,EAAA,sBAAA,CAAA,CAAA;AACb,MAAA,oBAAiB,EAAU,CAAA;AAC3B,MAAS,IAAA,WAAA;AACT,QAAS,OAAA,CAAA,KAAA,GAAA,KAAA,CAAA;AACT,KAAqB,CAAA;AACrB,IAAI,MAAA,yBAA6B,GAAA,MAAA;AAAA,MACnC,WAAA,GAAA,KAAA,CAAA;AAEA,MAAA;AACE,KAAc,CAAA;AACd,IAAQ,MAAA,0BAAgB,GAAA,MAAA;AAAA,MAC1B,WAAA,GAAA,IAAA,CAAA;AAEA,MAAA;AACE,KAAc,CAAA;AACd,IAAA,eAAgB,CAAA,MAAA;AAAA,MAClB,oBAAA,EAAA,CAAA;AAEA,MAAA,QAAA,CAAA,mBAAsB,CAAA,SAAA,EAAA,sBAAA,CAAA,CAAA;AACpB,KAAqB,CAAA,CAAA;AACrB,IAAS,MAAA,oBAAA,GAAA;AAAqD,MAC/D,IAAA,QAAA,CAAA,aAAA,KAAA,qBAAA;AAED,QAAA,yBAA6B,qBAAM,CAAA;AACjC,KAAA,CAAA;AACE,IAAA,gBAAyB,CAAA,KAAA,CAAA,SAAA,EAAA,kBAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,CAAA,CAAA;AAAA,IAC7B,gBAAA,CAAA,KAAA,CAAA,SAAA,EAAA,kBAAA,CAAA,EAAA,YAAA,EAAA,0BAAA,CAAA,CAAA;AAEA,IAAA,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MACE,gBAAiB,EAAkB,EAAAA,WAAA,CAAAC,UAAA,EAAA;AAAA,QACnC,IAAA,EAAAC,KAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA;AAAA,QACA,SAAA,EAAA,EAAA;AAAA,OACF,EAAA;AACA,QAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,UACEC,cAAmC,CAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,YACnC,OAAA,EAAA,UAAA;AAAA,YACA,GAAA,EAAA,QAAA;AAAA,YACF,KAAA,EAAAC,cAAA,CAAA,CAAAJ,KAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,EAAAA,KAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAAA,KAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/packages/components/segmented/index.mjs

@@ -1,5 +1,5 @@
-import Segmented from './src/segmented2.mjs';
-export { defaultProps, segmentedEmits, segmentedProps } from './src/segmented.mjs';
+import Segmented from './src/segmented.mjs';
+export { defaultProps, segmentedEmits, segmentedProps } from './src/segmented2.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const ElSegmented = withInstall(Segmented);

package/es/packages/components/segmented/src/segmented.mjs

@@ -1,47 +1,173 @@
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { useSizeProp } from '../../../hooks/use-size/index.mjs';
-import { useAriaProps } from '../../../hooks/use-aria/index.mjs';
+import { defineComponent, ref, reactive, computed, watch, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+import { useActiveElement, useResizeObserver } from '@vueuse/core';
+import { segmentedProps, segmentedEmits, defaultProps } from './segmented2.mjs';
+import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { useId } from '../../../hooks/use-id/index.mjs';
+import { useFormSize, useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
+import { useFormItem, useFormItemInputId } from '../../form/src/hooks/use-form-item.mjs';
+import { isObject } from '@vue/shared';
+import { debugWarn } from '../../../utils/error.mjs';
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
-import { isString } from '@vue/shared';
-import { isNumber, isBoolean } from '../../../utils/types.mjs';
 
-const defaultProps = {
-  label: "label",
-  value: "value",
-  disabled: "disabled"
-};
-const segmentedProps = buildProps({
-  direction: {
-    type: definePropType(String),
-    default: "horizontal"
-  },
-  options: {
-    type: definePropType(Array),
-    default: () => []
-  },
-  modelValue: {
-    type: [String, Number, Boolean],
-    default: void 0
-  },
-  props: {
-    type: definePropType(Object),
-    default: () => defaultProps
-  },
-  block: Boolean,
-  size: useSizeProp,
-  disabled: Boolean,
-  validateEvent: {
-    type: Boolean,
-    default: true
-  },
-  id: String,
-  name: String,
-  ...useAriaProps(["ariaLabel"])
+const __default__ = defineComponent({
+  name: "ElSegmented"
 });
-const segmentedEmits = {
-  [UPDATE_MODEL_EVENT]: (val) => isString(val) || isNumber(val) || isBoolean(val),
-  [CHANGE_EVENT]: (val) => isString(val) || isNumber(val) || isBoolean(val)
-};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: segmentedProps,
+  emits: segmentedEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = useNamespace("segmented");
+    const segmentedId = useId();
+    const segmentedSize = useFormSize();
+    const _disabled = useFormDisabled();
+    const { formItem } = useFormItem();
+    const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
+      formItemContext: formItem
+    });
+    const segmentedRef = ref(null);
+    const activeElement = useActiveElement();
+    const state = reactive({
+      isInit: false,
+      width: 0,
+      height: 0,
+      translateX: 0,
+      translateY: 0,
+      focusVisible: false
+    });
+    const handleChange = (item) => {
+      const value = getValue(item);
+      emit(UPDATE_MODEL_EVENT, value);
+      emit(CHANGE_EVENT, value);
+    };
+    const aliasProps = computed(() => ({ ...defaultProps, ...props.props }));
+    const getValue = (item) => {
+      return isObject(item) ? item[aliasProps.value.value] : item;
+    };
+    const getLabel = (item) => {
+      return isObject(item) ? item[aliasProps.value.label] : item;
+    };
+    const getDisabled = (item) => {
+      return !!(_disabled.value || (isObject(item) ? item[aliasProps.value.disabled] : false));
+    };
+    const getSelected = (item) => {
+      return props.modelValue === getValue(item);
+    };
+    const getOption = (value) => {
+      return props.options.find((item) => getValue(item) === value);
+    };
+    const getItemCls = (item) => {
+      return [
+        ns.e("item"),
+        ns.is("selected", getSelected(item)),
+        ns.is("disabled", getDisabled(item))
+      ];
+    };
+    const updateSelect = () => {
+      if (!segmentedRef.value)
+        return;
+      const selectedItem = segmentedRef.value.querySelector(".is-selected");
+      const selectedItemInput = segmentedRef.value.querySelector(".is-selected input");
+      if (!selectedItem || !selectedItemInput) {
+        state.width = 0;
+        state.height = 0;
+        state.translateX = 0;
+        state.translateY = 0;
+        state.focusVisible = false;
+        return;
+      }
+      const rect = selectedItem.getBoundingClientRect();
+      state.isInit = true;
+      if (props.direction === "vertical") {
+        state.height = rect.height;
+        state.translateY = selectedItem.offsetTop;
+      } else {
+        state.width = rect.width;
+        state.translateX = selectedItem.offsetLeft;
+      }
+      try {
+        state.focusVisible = selectedItemInput.matches(":focus-visible");
+      } catch (e) {
+      }
+    };
+    const segmentedCls = computed(() => [
+      ns.b(),
+      ns.m(segmentedSize.value),
+      ns.is("block", props.block)
+    ]);
+    const selectedStyle = computed(() => ({
+      width: props.direction === "vertical" ? "100%" : `${state.width}px`,
+      height: props.direction === "vertical" ? `${state.height}px` : "100%",
+      transform: props.direction === "vertical" ? `translateY(${state.translateY}px)` : `translateX(${state.translateX}px)`,
+      display: state.isInit ? "block" : "none"
+    }));
+    const selectedCls = computed(() => [
+      ns.e("item-selected"),
+      ns.is("disabled", getDisabled(getOption(props.modelValue))),
+      ns.is("focus-visible", state.focusVisible)
+    ]);
+    const name = computed(() => {
+      return props.name || segmentedId.value;
+    });
+    useResizeObserver(segmentedRef, updateSelect);
+    watch(activeElement, updateSelect);
+    watch(() => props.modelValue, () => {
+      var _a;
+      updateSelect();
+      if (props.validateEvent) {
+        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn(err));
+      }
+    }, {
+      flush: "post"
+    });
+    return (_ctx, _cache) => {
+      return _ctx.options.length ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        id: unref(inputId),
+        ref_key: "segmentedRef",
+        ref: segmentedRef,
+        class: normalizeClass(unref(segmentedCls)),
+        role: "radiogroup",
+        "aria-label": !unref(isLabeledByFormItem) ? _ctx.ariaLabel || "segmented" : void 0,
+        "aria-labelledby": unref(isLabeledByFormItem) ? unref(formItem).labelId : void 0
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass([unref(ns).e("group"), unref(ns).m(props.direction)])
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle(unref(selectedStyle)),
+            class: normalizeClass(unref(selectedCls))
+          }, null, 6),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (item, index) => {
+            return openBlock(), createElementBlock("label", {
+              key: index,
+              class: normalizeClass(getItemCls(item))
+            }, [
+              createElementVNode("input", {
+                class: normalizeClass(unref(ns).e("item-input")),
+                type: "radio",
+                name: unref(name),
+                disabled: getDisabled(item),
+                checked: getSelected(item),
+                onChange: ($event) => handleChange(item)
+              }, null, 42, ["name", "disabled", "checked", "onChange"]),
+              createElementVNode("div", {
+                class: normalizeClass(unref(ns).e("item-label"))
+              }, [
+                renderSlot(_ctx.$slots, "default", { item }, () => [
+                  createTextVNode(toDisplayString(getLabel(item)), 1)
+                ])
+              ], 2)
+            ], 2);
+          }), 128))
+        ], 2)
+      ], 10, ["id", "aria-label", "aria-labelledby"])) : createCommentVNode("v-if", true);
+    };
+  }
+});
+var Segmented = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "segmented.vue"]]);
 
-export { defaultProps, segmentedEmits, segmentedProps };
+export { Segmented as default };
 //# sourceMappingURL=segmented.mjs.map