@element-plus/nightly 0.0.20260720 → 0.0.20260722

package/lib/components/rate/src/rate.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"rate.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/rate/src/rate.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"inputId\"\n    :class=\"[rateClasses, ns.is('disabled', rateDisabled)]\"\n    role=\"slider\"\n    :aria-label=\"!isLabeledByFormItem ? ariaLabel || 'rating' : undefined\"\n    :aria-labelledby=\"\n      isLabeledByFormItem ? formItemContext?.labelId : undefined\n    \"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text || undefined\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    :style=\"rateStyles\"\n    :tabindex=\"rateDisabled ? undefined : 0\"\n    :aria-disabled=\"rateDisabled\"\n    @keydown=\"handleKey\"\n  >\n    <span\n      v-for=\"(item, key) in max\"\n      :key=\"key\"\n      :class=\"ns.e('item')\"\n      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n    >\n      <el-icon\n        ref=\"iconRefs\"\n        :class=\"[\n          ns.e('icon'),\n          { hover: hoverIndex === item },\n          ns.is('active', item <= currentValue),\n          ns.is('focus-visible', item === Math.ceil(currentValue || 1)),\n        ]\"\n      >\n        <component\n          :is=\"activeComponent\"\n          v-show=\"!showDecimalIcon(item) && item <= currentValue\"\n        />\n        <component\n          :is=\"voidComponent\"\n          v-show=\"!showDecimalIcon(item) && item > currentValue\"\n        />\n        <component\n          :is=\"voidComponent\"\n          v-show=\"showDecimalIcon(item)\"\n          :class=\"[ns.em('decimal', 'box')]\"\n        />\n        <el-icon\n          v-show=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          :class=\"[ns.e('icon'), ns.e('decimal')]\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </el-icon>\n      </el-icon>\n    </span>\n    <span\n      v-if=\"showText || showScore\"\n      :class=\"ns.e('text')\"\n      :style=\"{ color: textColor }\"\n    >\n      {{ text }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, markRaw, ref, watch } from 'vue'\nimport { clamp } from 'lodash-unified'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { getEventCode, isArray, isObject, isString } from '@element-plus/utils'\nimport {\n  formItemContextKey,\n  useFormDisabled,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Star, StarFilled } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { rateEmits } from './rate'\n\nimport type { CSSProperties, Component } from 'vue'\nimport type { IconInstance } from '@element-plus/components/icon'\nimport type { RateProps } from './rate'\n\nfunction getValueFromMap<T>(\n  value: number,\n  map: Record<string, T | { excluded?: boolean; value: T }>\n) {\n  const isExcludedObject = (\n    val: unknown\n  ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n  const matchedKeys = Object.keys(map)\n    .map((key) => +key)\n    .filter((key) => {\n      const val = map[key]\n      const excluded = isExcludedObject(val) ? val.excluded : false\n      return excluded ? value < key : value <= key\n    })\n    .sort((a, b) => a - b)\n  const matchedValue = map[matchedKeys[0]]\n  return (isExcludedObject(matchedValue) && matchedValue.value) || matchedValue\n}\n\ndefineOptions({\n  name: 'ElRate',\n})\n\nconst props = withDefaults(defineProps<RateProps>(), {\n  modelValue: 0,\n  id: undefined,\n  lowThreshold: 2,\n  highThreshold: 4,\n  max: 5,\n  colors: () => ['', '', ''],\n  voidColor: '',\n  disabledVoidColor: '',\n  icons: () => [StarFilled, StarFilled, StarFilled],\n  voidIcon: () => Star,\n  disabledVoidIcon: () => StarFilled,\n  disabled: undefined,\n  textColor: '',\n  texts: () => [\n    'Extremely bad',\n    'Disappointed',\n    'Fair',\n    'Satisfied',\n    'Surprise',\n  ],\n  scoreTemplate: '{value}',\n})\nconst emit = defineEmits(rateEmits)\n\nconst formItemContext = inject(formItemContextKey, undefined)\nconst rateSize = useFormSize()\nconst ns = useNamespace('rate')\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext,\n})\n\nconst currentValue = ref(clamp(props.modelValue, 0, props.max))\nconst hoverIndex = ref(-1)\nconst pointerAtLeftHalf = ref(true)\n\nconst iconRefs = ref<IconInstance[]>([])\nconst iconClientWidths = computed<number[]>(() =>\n  iconRefs.value.map((icon) => icon.$el.clientWidth)\n)\nconst rateClasses = computed(() => [ns.b(), ns.m(rateSize.value)])\nconst rateDisabled = useFormDisabled()\nconst rateStyles = computed(() => {\n  return ns.cssVarBlock({\n    'void-color': props.voidColor,\n    'disabled-void-color': props.disabledVoidColor,\n    'fill-color': activeColor.value,\n  }) as CSSProperties\n})\n\nconst text = computed(() => {\n  let result = ''\n  if (props.showScore) {\n    result = props.scoreTemplate.replace(\n      /\\{\\s*value\\s*\\}/,\n      rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n    )\n  } else if (props.showText) {\n    result = props.texts[Math.ceil(currentValue.value) - 1]\n  }\n  return result\n})\nconst valueDecimal = computed(\n  () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n)\nconst colorMap = computed(() =>\n  isArray(props.colors)\n    ? {\n        [props.lowThreshold]: props.colors[0],\n        [props.highThreshold]: { value: props.colors[1], excluded: true },\n        [props.max]: props.colors[2],\n      }\n    : props.colors\n)\nconst activeColor = computed(() => {\n  const color = getValueFromMap(currentValue.value, colorMap.value)\n  // {value: '', excluded: true} returned\n  return isObject(color) ? '' : color\n})\nconst decimalStyle = computed(() => {\n  let width = ''\n  if (rateDisabled.value) {\n    width = `${valueDecimal.value}%`\n  } else if (props.allowHalf) {\n    width = '50%'\n  }\n  return {\n    color: activeColor.value,\n    width,\n  }\n})\nconst componentMap = computed(() => {\n  let icons = isArray(props.icons) ? [...props.icons] : { ...props.icons }\n  icons = markRaw(icons) as\n    | Array<string | Component>\n    | Record<number, string | Component>\n  return isArray(icons)\n    ? {\n        [props.lowThreshold]: icons[0],\n        [props.highThreshold]: {\n          value: icons[1],\n          excluded: true,\n        },\n        [props.max]: icons[2],\n      }\n    : icons\n})\nconst decimalIconComponent = computed(() =>\n  getValueFromMap(props.modelValue, componentMap.value)\n)\nconst voidComponent = computed(() =>\n  rateDisabled.value\n    ? isString(props.disabledVoidIcon)\n      ? props.disabledVoidIcon\n      : (markRaw(props.disabledVoidIcon) as Component)\n    : isString(props.voidIcon)\n      ? props.voidIcon\n      : (markRaw(props.voidIcon) as Component)\n)\nconst activeComponent = computed(() =>\n  getValueFromMap(currentValue.value, componentMap.value)\n)\n\nfunction showDecimalIcon(item: number) {\n  const showWhenDisabled =\n    rateDisabled.value &&\n    valueDecimal.value > 0 &&\n    item - 1 < props.modelValue &&\n    item > props.modelValue\n  const showWhenAllowHalf =\n    props.allowHalf &&\n    pointerAtLeftHalf.value &&\n    item - 0.5 <= currentValue.value &&\n    item > currentValue.value\n  return showWhenDisabled || showWhenAllowHalf\n}\n\nfunction emitValue(value: number) {\n  // if allow clear, and selected value is same as modelValue, reset value to 0\n  if (props.clearable && value === props.modelValue) {\n    value = 0\n  }\n\n  emit(UPDATE_MODEL_EVENT, value)\n  if (props.modelValue !== value) {\n    emit(CHANGE_EVENT, value)\n  }\n}\n\nfunction selectValue(value: number) {\n  if (rateDisabled.value) {\n    return\n  }\n  if (props.allowHalf && pointerAtLeftHalf.value) {\n    emitValue(currentValue.value)\n  } else {\n    emitValue(value)\n  }\n}\n\nfunction handleKey(e: KeyboardEvent) {\n  if (rateDisabled.value) {\n    return\n  }\n  const code = getEventCode(e)\n  const step = props.allowHalf ? 0.5 : 1\n  let _currentValue = currentValue.value\n\n  switch (code) {\n    case EVENT_CODE.up:\n    case EVENT_CODE.right:\n      _currentValue += step\n      break\n    case EVENT_CODE.left:\n    case EVENT_CODE.down:\n      _currentValue -= step\n      break\n  }\n\n  _currentValue = clamp(_currentValue, 0, props.max)\n\n  if (_currentValue === currentValue.value) {\n    return\n  }\n\n  e.stopPropagation()\n  e.preventDefault()\n  emit(UPDATE_MODEL_EVENT, _currentValue)\n  emit(CHANGE_EVENT, _currentValue)\n  return _currentValue\n}\n\nfunction setCurrentValue(value: number, event?: MouseEvent) {\n  if (rateDisabled.value) {\n    return\n  }\n  if (props.allowHalf && event) {\n    pointerAtLeftHalf.value =\n      event.offsetX * 2 <= iconClientWidths.value[value - 1]\n    currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n  } else {\n    currentValue.value = value\n  }\n  hoverIndex.value = value\n}\n\nfunction resetCurrentValue() {\n  if (rateDisabled.value) {\n    return\n  }\n  if (props.allowHalf) {\n    pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue)\n  }\n  currentValue.value = clamp(props.modelValue, 0, props.max)\n  hoverIndex.value = -1\n}\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    currentValue.value = clamp(val, 0, props.max)\n    pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue)\n  }\n)\n\nif (!props.modelValue) {\n  emit(UPDATE_MODEL_EVENT, 0)\n}\n\ndefineExpose({\n  /** @description set current value */\n  setCurrentValue,\n  /** @description reset current value */\n  resetCurrentValue,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"rate.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/rate/src/rate.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"inputId\"\n    :class=\"[rateClasses, ns.is('disabled', rateDisabled)]\"\n    role=\"slider\"\n    :aria-label=\"!isLabeledByFormItem ? ariaLabel || 'rating' : undefined\"\n    :aria-labelledby=\"\n      isLabeledByFormItem ? formItemContext?.labelId : undefined\n    \"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text || undefined\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    :style=\"rateStyles\"\n    :tabindex=\"rateDisabled ? undefined : 0\"\n    :aria-disabled=\"rateDisabled\"\n    @keydown=\"handleKey\"\n  >\n    <span\n      v-for=\"(item, key) in max\"\n      :key=\"key\"\n      :class=\"ns.e('item')\"\n      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n    >\n      <el-icon\n        ref=\"iconRefs\"\n        :class=\"[\n          ns.e('icon'),\n          { hover: hoverIndex === item },\n          ns.is('active', item <= currentValue),\n          ns.is('focus-visible', item === Math.ceil(currentValue || 1)),\n        ]\"\n      >\n        <component\n          :is=\"activeComponent\"\n          v-show=\"!showDecimalIcon(item) && item <= currentValue\"\n        />\n        <component\n          :is=\"voidComponent\"\n          v-show=\"!showDecimalIcon(item) && item > currentValue\"\n        />\n        <component\n          :is=\"voidComponent\"\n          v-show=\"showDecimalIcon(item)\"\n          :class=\"[ns.em('decimal', 'box')]\"\n        />\n        <el-icon\n          v-show=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          :class=\"[ns.e('icon'), ns.e('decimal')]\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </el-icon>\n      </el-icon>\n    </span>\n    <span\n      v-if=\"showText || showScore\"\n      :class=\"ns.e('text')\"\n      :style=\"{ color: textColor }\"\n    >\n      {{ text }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, markRaw, ref, watch } from 'vue'\nimport { clamp } from 'lodash-unified'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { getEventCode, isArray, isObject, isString } from '@element-plus/utils'\nimport {\n  formItemContextKey,\n  useFormDisabled,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Star, StarFilled } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { rateEmits } from './rate'\n\nimport type { CSSProperties, Component } from 'vue'\nimport type { IconInstance } from '@element-plus/components/icon'\nimport type { RateProps } from './rate'\n\nfunction getValueFromMap<T>(\n  value: number,\n  map: Record<string, T | { excluded?: boolean; value: T }>\n) {\n  const isExcludedObject = (\n    val: unknown\n  ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n  const matchedKeys = Object.keys(map)\n    .map((key) => +key)\n    .filter((key) => {\n      const val = map[key]\n      const excluded = isExcludedObject(val) ? val.excluded : false\n      return excluded ? value < key : value <= key\n    })\n    .sort((a, b) => a - b)\n  const matchedValue = map[matchedKeys[0]]\n  return (isExcludedObject(matchedValue) && matchedValue.value) || matchedValue\n}\n\ndefineOptions({\n  name: 'ElRate',\n})\n\nconst props = withDefaults(defineProps<RateProps>(), {\n  modelValue: 0,\n  id: undefined,\n  lowThreshold: 2,\n  highThreshold: 4,\n  max: 5,\n  colors: () => ['', '', ''],\n  voidColor: '',\n  disabledVoidColor: '',\n  icons: () => [StarFilled, StarFilled, StarFilled],\n  voidIcon: () => Star,\n  disabledVoidIcon: () => StarFilled,\n  disabled: undefined,\n  textColor: '',\n  texts: () => [\n    'Extremely bad',\n    'Disappointed',\n    'Fair',\n    'Satisfied',\n    'Surprise',\n  ],\n  scoreTemplate: '{value}',\n})\nconst emit = defineEmits(rateEmits)\n\nconst formItemContext = inject(formItemContextKey, undefined)\nconst rateSize = useFormSize()\nconst ns = useNamespace('rate')\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext,\n})\n\nconst currentValue = ref(clamp(props.modelValue, 0, props.max))\nconst hoverIndex = ref(-1)\nconst pointerAtLeftHalf = ref(true)\n\nconst iconRefs = ref<IconInstance[]>([])\nconst iconClientWidths = computed<number[]>(() =>\n  iconRefs.value.map((icon) => icon.$el.clientWidth)\n)\nconst rateClasses = computed(() => [ns.b(), ns.m(rateSize.value)])\nconst rateDisabled = useFormDisabled()\nconst rateStyles = computed(() => {\n  return ns.cssVarBlock({\n    'void-color': props.voidColor,\n    'disabled-void-color': props.disabledVoidColor,\n    'fill-color': activeColor.value,\n  }) as CSSProperties\n})\n\nconst text = computed(() => {\n  let result = ''\n  if (props.showScore) {\n    result = props.scoreTemplate.replace(\n      /\\{\\s*value\\s*\\}/,\n      rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n    )\n  } else if (props.showText) {\n    result = props.texts[Math.ceil(currentValue.value) - 1]\n  }\n  return result\n})\nconst valueDecimal = computed(\n  () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n)\nconst colorMap = computed(() =>\n  isArray(props.colors)\n    ? {\n        [props.lowThreshold]: props.colors[0],\n        [props.highThreshold]: { value: props.colors[1], excluded: true },\n        [props.max]: props.colors[2],\n      }\n    : props.colors\n)\nconst activeColor = computed(() => {\n  const color = getValueFromMap(currentValue.value, colorMap.value)\n  // {value: '', excluded: true} returned\n  return isObject(color) ? '' : color\n})\nconst decimalStyle = computed(() => {\n  let width = ''\n  if (rateDisabled.value) {\n    width = `${valueDecimal.value}%`\n  } else if (props.allowHalf) {\n    width = '50%'\n  }\n  return {\n    color: activeColor.value,\n    width,\n  }\n})\nconst componentMap = computed(() => {\n  let icons = isArray(props.icons) ? [...props.icons] : { ...props.icons }\n  icons = markRaw(icons) as\n    Array<string | Component> | Record<number, string | Component>\n  return isArray(icons)\n    ? {\n        [props.lowThreshold]: icons[0],\n        [props.highThreshold]: {\n          value: icons[1],\n          excluded: true,\n        },\n        [props.max]: icons[2],\n      }\n    : icons\n})\nconst decimalIconComponent = computed(() =>\n  getValueFromMap(props.modelValue, componentMap.value)\n)\nconst voidComponent = computed(() =>\n  rateDisabled.value\n    ? isString(props.disabledVoidIcon)\n      ? props.disabledVoidIcon\n      : (markRaw(props.disabledVoidIcon) as Component)\n    : isString(props.voidIcon)\n      ? props.voidIcon\n      : (markRaw(props.voidIcon) as Component)\n)\nconst activeComponent = computed(() =>\n  getValueFromMap(currentValue.value, componentMap.value)\n)\n\nfunction showDecimalIcon(item: number) {\n  const showWhenDisabled =\n    rateDisabled.value &&\n    valueDecimal.value > 0 &&\n    item - 1 < props.modelValue &&\n    item > props.modelValue\n  const showWhenAllowHalf =\n    props.allowHalf &&\n    pointerAtLeftHalf.value &&\n    item - 0.5 <= currentValue.value &&\n    item > currentValue.value\n  return showWhenDisabled || showWhenAllowHalf\n}\n\nfunction emitValue(value: number) {\n  // if allow clear, and selected value is same as modelValue, reset value to 0\n  if (props.clearable && value === props.modelValue) {\n    value = 0\n  }\n\n  emit(UPDATE_MODEL_EVENT, value)\n  if (props.modelValue !== value) {\n    emit(CHANGE_EVENT, value)\n  }\n}\n\nfunction selectValue(value: number) {\n  if (rateDisabled.value) {\n    return\n  }\n  if (props.allowHalf && pointerAtLeftHalf.value) {\n    emitValue(currentValue.value)\n  } else {\n    emitValue(value)\n  }\n}\n\nfunction handleKey(e: KeyboardEvent) {\n  if (rateDisabled.value) {\n    return\n  }\n  const code = getEventCode(e)\n  const step = props.allowHalf ? 0.5 : 1\n  let _currentValue = currentValue.value\n\n  switch (code) {\n    case EVENT_CODE.up:\n    case EVENT_CODE.right:\n      _currentValue += step\n      break\n    case EVENT_CODE.left:\n    case EVENT_CODE.down:\n      _currentValue -= step\n      break\n  }\n\n  _currentValue = clamp(_currentValue, 0, props.max)\n\n  if (_currentValue === currentValue.value) {\n    return\n  }\n\n  e.stopPropagation()\n  e.preventDefault()\n  emit(UPDATE_MODEL_EVENT, _currentValue)\n  emit(CHANGE_EVENT, _currentValue)\n  return _currentValue\n}\n\nfunction setCurrentValue(value: number, event?: MouseEvent) {\n  if (rateDisabled.value) {\n    return\n  }\n  if (props.allowHalf && event) {\n    pointerAtLeftHalf.value =\n      event.offsetX * 2 <= iconClientWidths.value[value - 1]\n    currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n  } else {\n    currentValue.value = value\n  }\n  hoverIndex.value = value\n}\n\nfunction resetCurrentValue() {\n  if (rateDisabled.value) {\n    return\n  }\n  if (props.allowHalf) {\n    pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue)\n  }\n  currentValue.value = clamp(props.modelValue, 0, props.max)\n  hoverIndex.value = -1\n}\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    currentValue.value = clamp(val, 0, props.max)\n    pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue)\n  }\n)\n\nif (!props.modelValue) {\n  emit(UPDATE_MODEL_EVENT, 0)\n}\n\ndefineExpose({\n  /** @description set current value */\n  setCurrentValue,\n  /** @description reset current value */\n  resetCurrentValue,\n})\n</script>\n"],"mappings":"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"}

package/lib/components/rate/src/rate2.js.map

@@ -1 +1 @@
-{"version":3,"file":"rate2.js","names":[],"sources":["../../../../../../packages/components/rate/src/rate.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"inputId\"\n    :class=\"[rateClasses, ns.is('disabled', rateDisabled)]\"\n    role=\"slider\"\n    :aria-label=\"!isLabeledByFormItem ? ariaLabel || 'rating' : undefined\"\n    :aria-labelledby=\"\n      isLabeledByFormItem ? formItemContext?.labelId : undefined\n    \"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text || undefined\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    :style=\"rateStyles\"\n    :tabindex=\"rateDisabled ? undefined : 0\"\n    :aria-disabled=\"rateDisabled\"\n    @keydown=\"handleKey\"\n  >\n    <span\n      v-for=\"(item, key) in max\"\n      :key=\"key\"\n      :class=\"ns.e('item')\"\n      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n    >\n      <el-icon\n        ref=\"iconRefs\"\n        :class=\"[\n          ns.e('icon'),\n          { hover: hoverIndex === item },\n          ns.is('active', item <= currentValue),\n          ns.is('focus-visible', item === Math.ceil(currentValue || 1)),\n        ]\"\n      >\n        <component\n          :is=\"activeComponent\"\n          v-show=\"!showDecimalIcon(item) && item <= currentValue\"\n        />\n        <component\n          :is=\"voidComponent\"\n          v-show=\"!showDecimalIcon(item) && item > currentValue\"\n        />\n        <component\n          :is=\"voidComponent\"\n          v-show=\"showDecimalIcon(item)\"\n          :class=\"[ns.em('decimal', 'box')]\"\n        />\n        <el-icon\n          v-show=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          :class=\"[ns.e('icon'), ns.e('decimal')]\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </el-icon>\n      </el-icon>\n    </span>\n    <span\n      v-if=\"showText || showScore\"\n      :class=\"ns.e('text')\"\n      :style=\"{ color: textColor }\"\n    >\n      {{ text }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, markRaw, ref, watch } from 'vue'\nimport { clamp } from 'lodash-unified'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { getEventCode, isArray, isObject, isString } from '@element-plus/utils'\nimport {\n  formItemContextKey,\n  useFormDisabled,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Star, StarFilled } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { rateEmits } from './rate'\n\nimport type { CSSProperties, Component } from 'vue'\nimport type { IconInstance } from '@element-plus/components/icon'\nimport type { RateProps } from './rate'\n\nfunction getValueFromMap<T>(\n  value: number,\n  map: Record<string, T | { excluded?: boolean; value: T }>\n) {\n  const isExcludedObject = (\n    val: unknown\n  ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n  const matchedKeys = Object.keys(map)\n    .map((key) => +key)\n    .filter((key) => {\n      const val = map[key]\n      const excluded = isExcludedObject(val) ? val.excluded : false\n      return excluded ? value < key : value <= key\n    })\n    .sort((a, b) => a - b)\n  const matchedValue = map[matchedKeys[0]]\n  return (isExcludedObject(matchedValue) && matchedValue.value) || matchedValue\n}\n\ndefineOptions({\n  name: 'ElRate',\n})\n\nconst props = withDefaults(defineProps<RateProps>(), {\n  modelValue: 0,\n  id: undefined,\n  lowThreshold: 2,\n  highThreshold: 4,\n  max: 5,\n  colors: () => ['', '', ''],\n  voidColor: '',\n  disabledVoidColor: '',\n  icons: () => [StarFilled, StarFilled, StarFilled],\n  voidIcon: () => Star,\n  disabledVoidIcon: () => StarFilled,\n  disabled: undefined,\n  textColor: '',\n  texts: () => [\n    'Extremely bad',\n    'Disappointed',\n    'Fair',\n    'Satisfied',\n    'Surprise',\n  ],\n  scoreTemplate: '{value}',\n})\nconst emit = defineEmits(rateEmits)\n\nconst formItemContext = inject(formItemContextKey, undefined)\nconst rateSize = useFormSize()\nconst ns = useNamespace('rate')\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext,\n})\n\nconst currentValue = ref(clamp(props.modelValue, 0, props.max))\nconst hoverIndex = ref(-1)\nconst pointerAtLeftHalf = ref(true)\n\nconst iconRefs = ref<IconInstance[]>([])\nconst iconClientWidths = computed<number[]>(() =>\n  iconRefs.value.map((icon) => icon.$el.clientWidth)\n)\nconst rateClasses = computed(() => [ns.b(), ns.m(rateSize.value)])\nconst rateDisabled = useFormDisabled()\nconst rateStyles = computed(() => {\n  return ns.cssVarBlock({\n    'void-color': props.voidColor,\n    'disabled-void-color': props.disabledVoidColor,\n    'fill-color': activeColor.value,\n  }) as CSSProperties\n})\n\nconst text = computed(() => {\n  let result = ''\n  if (props.showScore) {\n    result = props.scoreTemplate.replace(\n      /\\{\\s*value\\s*\\}/,\n      rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n    )\n  } else if (props.showText) {\n    result = props.texts[Math.ceil(currentValue.value) - 1]\n  }\n  return result\n})\nconst valueDecimal = computed(\n  () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n)\nconst colorMap = computed(() =>\n  isArray(props.colors)\n    ? {\n        [props.lowThreshold]: props.colors[0],\n        [props.highThreshold]: { value: props.colors[1], excluded: true },\n        [props.max]: props.colors[2],\n      }\n    : props.colors\n)\nconst activeColor = computed(() => {\n  const color = getValueFromMap(currentValue.value, colorMap.value)\n  // {value: '', excluded: true} returned\n  return isObject(color) ? '' : color\n})\nconst decimalStyle = computed(() => {\n  let width = ''\n  if (rateDisabled.value) {\n    width = `${valueDecimal.value}%`\n  } else if (props.allowHalf) {\n    width = '50%'\n  }\n  return {\n    color: activeColor.value,\n    width,\n  }\n})\nconst componentMap = computed(() => {\n  let icons = isArray(props.icons) ? [...props.icons] : { ...props.icons }\n  icons = markRaw(icons) as\n    | Array<string | Component>\n    | Record<number, string | Component>\n  return isArray(icons)\n    ? {\n        [props.lowThreshold]: icons[0],\n        [props.highThreshold]: {\n          value: icons[1],\n          excluded: true,\n        },\n        [props.max]: icons[2],\n      }\n    : icons\n})\nconst decimalIconComponent = computed(() =>\n  getValueFromMap(props.modelValue, componentMap.value)\n)\nconst voidComponent = computed(() =>\n  rateDisabled.value\n    ? isString(props.disabledVoidIcon)\n      ? props.disabledVoidIcon\n      : (markRaw(props.disabledVoidIcon) as Component)\n    : isString(props.voidIcon)\n      ? props.voidIcon\n      : (markRaw(props.voidIcon) as Component)\n)\nconst activeComponent = computed(() =>\n  getValueFromMap(currentValue.value, componentMap.value)\n)\n\nfunction showDecimalIcon(item: number) {\n  const showWhenDisabled =\n    rateDisabled.value &&\n    valueDecimal.value > 0 &&\n    item - 1 < props.modelValue &&\n    item > props.modelValue\n  const showWhenAllowHalf =\n    props.allowHalf &&\n    pointerAtLeftHalf.value &&\n    item - 0.5 <= currentValue.value &&\n    item > currentValue.value\n  return showWhenDisabled || showWhenAllowHalf\n}\n\nfunction emitValue(value: number) {\n  // if allow clear, and selected value is same as modelValue, reset value to 0\n  if (props.clearable && value === props.modelValue) {\n    value = 0\n  }\n\n  emit(UPDATE_MODEL_EVENT, value)\n  if (props.modelValue !== value) {\n    emit(CHANGE_EVENT, value)\n  }\n}\n\nfunction selectValue(value: number) {\n  if (rateDisabled.value) {\n    return\n  }\n  if (props.allowHalf && pointerAtLeftHalf.value) {\n    emitValue(currentValue.value)\n  } else {\n    emitValue(value)\n  }\n}\n\nfunction handleKey(e: KeyboardEvent) {\n  if (rateDisabled.value) {\n    return\n  }\n  const code = getEventCode(e)\n  const step = props.allowHalf ? 0.5 : 1\n  let _currentValue = currentValue.value\n\n  switch (code) {\n    case EVENT_CODE.up:\n    case EVENT_CODE.right:\n      _currentValue += step\n      break\n    case EVENT_CODE.left:\n    case EVENT_CODE.down:\n      _currentValue -= step\n      break\n  }\n\n  _currentValue = clamp(_currentValue, 0, props.max)\n\n  if (_currentValue === currentValue.value) {\n    return\n  }\n\n  e.stopPropagation()\n  e.preventDefault()\n  emit(UPDATE_MODEL_EVENT, _currentValue)\n  emit(CHANGE_EVENT, _currentValue)\n  return _currentValue\n}\n\nfunction setCurrentValue(value: number, event?: MouseEvent) {\n  if (rateDisabled.value) {\n    return\n  }\n  if (props.allowHalf && event) {\n    pointerAtLeftHalf.value =\n      event.offsetX * 2 <= iconClientWidths.value[value - 1]\n    currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n  } else {\n    currentValue.value = value\n  }\n  hoverIndex.value = value\n}\n\nfunction resetCurrentValue() {\n  if (rateDisabled.value) {\n    return\n  }\n  if (props.allowHalf) {\n    pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue)\n  }\n  currentValue.value = clamp(props.modelValue, 0, props.max)\n  hoverIndex.value = -1\n}\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    currentValue.value = clamp(val, 0, props.max)\n    pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue)\n  }\n)\n\nif (!props.modelValue) {\n  emit(UPDATE_MODEL_EVENT, 0)\n}\n\ndefineExpose({\n  /** @description set current value */\n  setCurrentValue,\n  /** @description reset current value */\n  resetCurrentValue,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"rate2.js","names":[],"sources":["../../../../../../packages/components/rate/src/rate.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"inputId\"\n    :class=\"[rateClasses, ns.is('disabled', rateDisabled)]\"\n    role=\"slider\"\n    :aria-label=\"!isLabeledByFormItem ? ariaLabel || 'rating' : undefined\"\n    :aria-labelledby=\"\n      isLabeledByFormItem ? formItemContext?.labelId : undefined\n    \"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text || undefined\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    :style=\"rateStyles\"\n    :tabindex=\"rateDisabled ? undefined : 0\"\n    :aria-disabled=\"rateDisabled\"\n    @keydown=\"handleKey\"\n  >\n    <span\n      v-for=\"(item, key) in max\"\n      :key=\"key\"\n      :class=\"ns.e('item')\"\n      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n    >\n      <el-icon\n        ref=\"iconRefs\"\n        :class=\"[\n          ns.e('icon'),\n          { hover: hoverIndex === item },\n          ns.is('active', item <= currentValue),\n          ns.is('focus-visible', item === Math.ceil(currentValue || 1)),\n        ]\"\n      >\n        <component\n          :is=\"activeComponent\"\n          v-show=\"!showDecimalIcon(item) && item <= currentValue\"\n        />\n        <component\n          :is=\"voidComponent\"\n          v-show=\"!showDecimalIcon(item) && item > currentValue\"\n        />\n        <component\n          :is=\"voidComponent\"\n          v-show=\"showDecimalIcon(item)\"\n          :class=\"[ns.em('decimal', 'box')]\"\n        />\n        <el-icon\n          v-show=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          :class=\"[ns.e('icon'), ns.e('decimal')]\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </el-icon>\n      </el-icon>\n    </span>\n    <span\n      v-if=\"showText || showScore\"\n      :class=\"ns.e('text')\"\n      :style=\"{ color: textColor }\"\n    >\n      {{ text }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, markRaw, ref, watch } from 'vue'\nimport { clamp } from 'lodash-unified'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { getEventCode, isArray, isObject, isString } from '@element-plus/utils'\nimport {\n  formItemContextKey,\n  useFormDisabled,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Star, StarFilled } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { rateEmits } from './rate'\n\nimport type { CSSProperties, Component } from 'vue'\nimport type { IconInstance } from '@element-plus/components/icon'\nimport type { RateProps } from './rate'\n\nfunction getValueFromMap<T>(\n  value: number,\n  map: Record<string, T | { excluded?: boolean; value: T }>\n) {\n  const isExcludedObject = (\n    val: unknown\n  ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n  const matchedKeys = Object.keys(map)\n    .map((key) => +key)\n    .filter((key) => {\n      const val = map[key]\n      const excluded = isExcludedObject(val) ? val.excluded : false\n      return excluded ? value < key : value <= key\n    })\n    .sort((a, b) => a - b)\n  const matchedValue = map[matchedKeys[0]]\n  return (isExcludedObject(matchedValue) && matchedValue.value) || matchedValue\n}\n\ndefineOptions({\n  name: 'ElRate',\n})\n\nconst props = withDefaults(defineProps<RateProps>(), {\n  modelValue: 0,\n  id: undefined,\n  lowThreshold: 2,\n  highThreshold: 4,\n  max: 5,\n  colors: () => ['', '', ''],\n  voidColor: '',\n  disabledVoidColor: '',\n  icons: () => [StarFilled, StarFilled, StarFilled],\n  voidIcon: () => Star,\n  disabledVoidIcon: () => StarFilled,\n  disabled: undefined,\n  textColor: '',\n  texts: () => [\n    'Extremely bad',\n    'Disappointed',\n    'Fair',\n    'Satisfied',\n    'Surprise',\n  ],\n  scoreTemplate: '{value}',\n})\nconst emit = defineEmits(rateEmits)\n\nconst formItemContext = inject(formItemContextKey, undefined)\nconst rateSize = useFormSize()\nconst ns = useNamespace('rate')\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext,\n})\n\nconst currentValue = ref(clamp(props.modelValue, 0, props.max))\nconst hoverIndex = ref(-1)\nconst pointerAtLeftHalf = ref(true)\n\nconst iconRefs = ref<IconInstance[]>([])\nconst iconClientWidths = computed<number[]>(() =>\n  iconRefs.value.map((icon) => icon.$el.clientWidth)\n)\nconst rateClasses = computed(() => [ns.b(), ns.m(rateSize.value)])\nconst rateDisabled = useFormDisabled()\nconst rateStyles = computed(() => {\n  return ns.cssVarBlock({\n    'void-color': props.voidColor,\n    'disabled-void-color': props.disabledVoidColor,\n    'fill-color': activeColor.value,\n  }) as CSSProperties\n})\n\nconst text = computed(() => {\n  let result = ''\n  if (props.showScore) {\n    result = props.scoreTemplate.replace(\n      /\\{\\s*value\\s*\\}/,\n      rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n    )\n  } else if (props.showText) {\n    result = props.texts[Math.ceil(currentValue.value) - 1]\n  }\n  return result\n})\nconst valueDecimal = computed(\n  () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n)\nconst colorMap = computed(() =>\n  isArray(props.colors)\n    ? {\n        [props.lowThreshold]: props.colors[0],\n        [props.highThreshold]: { value: props.colors[1], excluded: true },\n        [props.max]: props.colors[2],\n      }\n    : props.colors\n)\nconst activeColor = computed(() => {\n  const color = getValueFromMap(currentValue.value, colorMap.value)\n  // {value: '', excluded: true} returned\n  return isObject(color) ? '' : color\n})\nconst decimalStyle = computed(() => {\n  let width = ''\n  if (rateDisabled.value) {\n    width = `${valueDecimal.value}%`\n  } else if (props.allowHalf) {\n    width = '50%'\n  }\n  return {\n    color: activeColor.value,\n    width,\n  }\n})\nconst componentMap = computed(() => {\n  let icons = isArray(props.icons) ? [...props.icons] : { ...props.icons }\n  icons = markRaw(icons) as\n    Array<string | Component> | Record<number, string | Component>\n  return isArray(icons)\n    ? {\n        [props.lowThreshold]: icons[0],\n        [props.highThreshold]: {\n          value: icons[1],\n          excluded: true,\n        },\n        [props.max]: icons[2],\n      }\n    : icons\n})\nconst decimalIconComponent = computed(() =>\n  getValueFromMap(props.modelValue, componentMap.value)\n)\nconst voidComponent = computed(() =>\n  rateDisabled.value\n    ? isString(props.disabledVoidIcon)\n      ? props.disabledVoidIcon\n      : (markRaw(props.disabledVoidIcon) as Component)\n    : isString(props.voidIcon)\n      ? props.voidIcon\n      : (markRaw(props.voidIcon) as Component)\n)\nconst activeComponent = computed(() =>\n  getValueFromMap(currentValue.value, componentMap.value)\n)\n\nfunction showDecimalIcon(item: number) {\n  const showWhenDisabled =\n    rateDisabled.value &&\n    valueDecimal.value > 0 &&\n    item - 1 < props.modelValue &&\n    item > props.modelValue\n  const showWhenAllowHalf =\n    props.allowHalf &&\n    pointerAtLeftHalf.value &&\n    item - 0.5 <= currentValue.value &&\n    item > currentValue.value\n  return showWhenDisabled || showWhenAllowHalf\n}\n\nfunction emitValue(value: number) {\n  // if allow clear, and selected value is same as modelValue, reset value to 0\n  if (props.clearable && value === props.modelValue) {\n    value = 0\n  }\n\n  emit(UPDATE_MODEL_EVENT, value)\n  if (props.modelValue !== value) {\n    emit(CHANGE_EVENT, value)\n  }\n}\n\nfunction selectValue(value: number) {\n  if (rateDisabled.value) {\n    return\n  }\n  if (props.allowHalf && pointerAtLeftHalf.value) {\n    emitValue(currentValue.value)\n  } else {\n    emitValue(value)\n  }\n}\n\nfunction handleKey(e: KeyboardEvent) {\n  if (rateDisabled.value) {\n    return\n  }\n  const code = getEventCode(e)\n  const step = props.allowHalf ? 0.5 : 1\n  let _currentValue = currentValue.value\n\n  switch (code) {\n    case EVENT_CODE.up:\n    case EVENT_CODE.right:\n      _currentValue += step\n      break\n    case EVENT_CODE.left:\n    case EVENT_CODE.down:\n      _currentValue -= step\n      break\n  }\n\n  _currentValue = clamp(_currentValue, 0, props.max)\n\n  if (_currentValue === currentValue.value) {\n    return\n  }\n\n  e.stopPropagation()\n  e.preventDefault()\n  emit(UPDATE_MODEL_EVENT, _currentValue)\n  emit(CHANGE_EVENT, _currentValue)\n  return _currentValue\n}\n\nfunction setCurrentValue(value: number, event?: MouseEvent) {\n  if (rateDisabled.value) {\n    return\n  }\n  if (props.allowHalf && event) {\n    pointerAtLeftHalf.value =\n      event.offsetX * 2 <= iconClientWidths.value[value - 1]\n    currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n  } else {\n    currentValue.value = value\n  }\n  hoverIndex.value = value\n}\n\nfunction resetCurrentValue() {\n  if (rateDisabled.value) {\n    return\n  }\n  if (props.allowHalf) {\n    pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue)\n  }\n  currentValue.value = clamp(props.modelValue, 0, props.max)\n  hoverIndex.value = -1\n}\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    currentValue.value = clamp(val, 0, props.max)\n    pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue)\n  }\n)\n\nif (!props.modelValue) {\n  emit(UPDATE_MODEL_EVENT, 0)\n}\n\ndefineExpose({\n  /** @description set current value */\n  setCurrentValue,\n  /** @description reset current value */\n  resetCurrentValue,\n})\n</script>\n"],"mappings":""}

package/lib/components/result/src/result.d.ts

@@ -31,7 +31,7 @@ interface ResultProps {
 declare const resultProps: {
   readonly title: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
   readonly subTitle: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-  readonly icon: EpPropFinalized<StringConstructor, "error" | "info" | "primary" | "success" | "warning", unknown, "info", boolean>;
+  readonly icon: EpPropFinalized<StringConstructor, "info" | "primary" | "success" | "warning" | "error", unknown, "info", boolean>;
 };
 /**
  * @deprecated Removed after 3.0.0, Use `ResultProps` instead.

package/lib/components/row/src/row.d.ts

@@ -30,7 +30,7 @@ interface RowProps {
 declare const rowProps: {
   readonly tag: EpPropFinalized<StringConstructor, unknown, unknown, "div", boolean>;
   readonly gutter: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
-  readonly justify: EpPropFinalized<StringConstructor, "space-around" | "space-between" | "space-evenly" | "center" | "end" | "start", unknown, "start", boolean>;
+  readonly justify: EpPropFinalized<StringConstructor, "center" | "space-around" | "space-between" | "space-evenly" | "end" | "start", unknown, "start", boolean>;
   readonly align: {
     readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "top" | "bottom" | "middle", unknown>>;
     readonly required: false;

package/lib/components/scrollbar/src/scrollbar.d.ts

@@ -1,4 +1,5 @@
 import { EpPropFinalized } from "../../../utils/vue/props/types.js";
+import { ClassValue } from "../../../utils/typescript.js";
 import _default from "./scrollbar.vue.js";
 import * as _$vue from "vue";
 import { ExtractPublicPropTypes, StyleValue } from "vue";
@@ -33,12 +34,12 @@ interface ScrollbarProps {
    * @description class of wrap
    * @default ''
    */
-  wrapClass?: string | string[];
+  wrapClass?: ClassValue;
   /**
    * @description class of view
    * @default ''
    */
-  viewClass?: string | string[];
+  viewClass?: ClassValue;
   /**
    * @description style of view
    * @default ''
@@ -100,8 +101,8 @@ declare const scrollbarProps: {
   readonly maxHeight: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
   readonly native: BooleanConstructor;
   readonly wrapStyle: EpPropFinalized<(new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, "", boolean>;
-  readonly wrapClass: EpPropFinalized<readonly [StringConstructor, ArrayConstructor], unknown, unknown, "", boolean>;
-  readonly viewClass: EpPropFinalized<readonly [StringConstructor, ArrayConstructor], unknown, unknown, "", boolean>;
+  readonly wrapClass: EpPropFinalized<(new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue) | (((new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue)) | null)[], unknown, unknown, "", boolean>;
+  readonly viewClass: EpPropFinalized<(new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue) | (((new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue)) | null)[], unknown, unknown, "", boolean>;
   readonly viewStyle: EpPropFinalized<(new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, "", boolean>;
   readonly noresize: BooleanConstructor;
   readonly tag: EpPropFinalized<StringConstructor, unknown, unknown, "div", boolean>;

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

@@ -48,14 +48,24 @@ const scrollbarProps = require_runtime.buildProps({
 	* @description class of wrap
 	*/
 	wrapClass: {
-		type: [String, Array],
+		type: require_runtime.definePropType([
+			String,
+			Array,
+			Object,
+			Boolean
+		]),
 		default: ""
 	},
 	/**
 	* @description class of view
 	*/
 	viewClass: {
-		type: [String, Array],
+		type: require_runtime.definePropType([
+			String,
+			Array,
+			Object,
+			Boolean
+		]),
 		default: ""
 	},
 	/**

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

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.js","names":["buildProps","definePropType","useAriaProps","isNumber"],"sources":["../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { useAriaProps } from '@element-plus/hooks'\n\nimport type { ExtractPublicPropTypes, StyleValue } from 'vue'\nimport type Scrollbar from './scrollbar.vue'\n\nexport interface ScrollbarProps {\n  /**\n   * @description trigger distance(px)\n   * @default 0\n   */\n  distance?: number\n  /**\n   * @description height of scrollbar\n   * @default ''\n   */\n  height?: number | string\n  /**\n   * @description max height of scrollbar\n   * @default ''\n   */\n  maxHeight?: number | string\n  /**\n   * @description whether to use the native scrollbar\n   */\n  native?: boolean\n  /**\n   * @description style of wrap\n   * @default ''\n   */\n  wrapStyle?: StyleValue\n  /**\n   * @description class of wrap\n   * @default ''\n   */\n  wrapClass?: string | string[]\n  /**\n   * @description class of view\n   * @default ''\n   */\n  viewClass?: string | string[]\n  /**\n   * @description style of view\n   * @default ''\n   */\n  viewStyle?: StyleValue\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\n  /**\n   * @description element tag of the view\n   * @default 'div'\n   */\n  tag?: keyof HTMLElementTagNameMap | (string & {})\n  /**\n   * @description always show\n   */\n  always?: boolean\n  /**\n   * @description minimum size of scrollbar\n   * @default 20\n   */\n  minSize?: number\n  /**\n   * @description Wrap tabindex\n   * @default undefined\n   */\n  tabindex?: number | string\n  /**\n   * @description id of view\n   */\n  id?: string\n  /**\n   * @description role of view\n   */\n  role?: string\n  /**\n   * @description native `aria-label` attribute\n   */\n  ariaLabel?: string\n  /**\n   * @description native `aria-orientation` attribute\n   */\n  ariaOrientation?: 'horizontal' | 'vertical' | 'undefined'\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ScrollbarProps` instead.\n */\nexport const scrollbarProps = buildProps({\n  /**\n   * @description trigger distance(px)\n   */\n  distance: {\n    type: Number,\n    default: 0,\n  },\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: Boolean,\n  /**\n   * @description style of wrap\n   */\n  wrapStyle: {\n    type: definePropType<StyleValue>([String, Object, Array, Boolean]),\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: definePropType<StyleValue>([String, Object, Array, Boolean]),\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)\n\n/**\n * @deprecated Removed after 3.0.0, Use `ScrollbarProps` instead.\n */\nexport type ScrollbarPropsPublic = ExtractPublicPropTypes<typeof scrollbarProps>\n\nexport const scrollbarEmits = {\n  'end-reached': (direction: ScrollbarDirection) =>\n    ['left', 'right', 'top', 'bottom'].includes(direction),\n  scroll: ({\n    scrollTop,\n    scrollLeft,\n  }: {\n    scrollTop: number\n    scrollLeft: number\n  }) => [scrollTop, scrollLeft].every(isNumber),\n}\nexport type ScrollbarEmits = typeof scrollbarEmits\nexport type ScrollbarDirection = 'top' | 'bottom' | 'left' | 'right'\n\nexport type ScrollbarInstance = InstanceType<typeof Scrollbar> & unknown\n"],"mappings":";;;;;;;;AA0FA,MAAa,iBAAiBA,gBAAAA,WAAW;;;;CAIvC,UAAU;EACR,MAAM;EACN,SAAS;EACV;;;;CAID,QAAQ;EACN,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;;;;CAID,WAAW;EACT,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;;;;CAID,QAAQ;;;;CAIR,WAAW;EACT,MAAMC,gBAAAA,eAA2B;GAAC;GAAQ;GAAQ;GAAO;GAAQ,CAAC;EAClE,SAAS;EACV;;;;CAID,WAAW;EACT,MAAM,CAAC,QAAQ,MAAM;EACrB,SAAS;EACV;;;;CAID,WAAW;EACT,MAAM,CAAC,QAAQ,MAAM;EACrB,SAAS;EACV;;;;CAID,WAAW;EACT,MAAMA,gBAAAA,eAA2B;GAAC;GAAQ;GAAQ;GAAO;GAAQ,CAAC;EAClE,SAAS;EACV;;;;CAID,UAAU;;;;CAIV,KAAK;EACH,MAAM;EACN,SAAS;EACV;;;;CAID,QAAQ;;;;CAIR,SAAS;EACP,MAAM;EACN,SAAS;EACV;;;;CAID,UAAU;EACR,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS,KAAA;EACV;;;;CAID,IAAI;;;;CAIJ,MAAM;CACN,GAAGC,cAAAA,aAAa,CAAC,aAAa,kBAAkB,CAAC;CAClD,CAAU;AAOX,MAAa,iBAAiB;CAC5B,gBAAgB,cACd;EAAC;EAAQ;EAAS;EAAO;EAAS,CAAC,SAAS,UAAU;CACxD,SAAS,EACP,WACA,iBAII,CAAC,WAAW,WAAW,CAAC,MAAMC,cAAAA,SAAS;CAC9C"}
+{"version":3,"file":"scrollbar.js","names":["buildProps","definePropType","useAriaProps","isNumber"],"sources":["../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { useAriaProps } from '@element-plus/hooks'\n\nimport type { ClassValue } from '@element-plus/utils'\nimport type { ExtractPublicPropTypes, StyleValue } from 'vue'\nimport type Scrollbar from './scrollbar.vue'\n\nexport interface ScrollbarProps {\n  /**\n   * @description trigger distance(px)\n   * @default 0\n   */\n  distance?: number\n  /**\n   * @description height of scrollbar\n   * @default ''\n   */\n  height?: number | string\n  /**\n   * @description max height of scrollbar\n   * @default ''\n   */\n  maxHeight?: number | string\n  /**\n   * @description whether to use the native scrollbar\n   */\n  native?: boolean\n  /**\n   * @description style of wrap\n   * @default ''\n   */\n  wrapStyle?: StyleValue\n  /**\n   * @description class of wrap\n   * @default ''\n   */\n  wrapClass?: ClassValue\n  /**\n   * @description class of view\n   * @default ''\n   */\n  viewClass?: ClassValue\n  /**\n   * @description style of view\n   * @default ''\n   */\n  viewStyle?: StyleValue\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\n  /**\n   * @description element tag of the view\n   * @default 'div'\n   */\n  tag?: keyof HTMLElementTagNameMap | (string & {})\n  /**\n   * @description always show\n   */\n  always?: boolean\n  /**\n   * @description minimum size of scrollbar\n   * @default 20\n   */\n  minSize?: number\n  /**\n   * @description Wrap tabindex\n   * @default undefined\n   */\n  tabindex?: number | string\n  /**\n   * @description id of view\n   */\n  id?: string\n  /**\n   * @description role of view\n   */\n  role?: string\n  /**\n   * @description native `aria-label` attribute\n   */\n  ariaLabel?: string\n  /**\n   * @description native `aria-orientation` attribute\n   */\n  ariaOrientation?: 'horizontal' | 'vertical' | 'undefined'\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ScrollbarProps` instead.\n */\nexport const scrollbarProps = buildProps({\n  /**\n   * @description trigger distance(px)\n   */\n  distance: {\n    type: Number,\n    default: 0,\n  },\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: Boolean,\n  /**\n   * @description style of wrap\n   */\n  wrapStyle: {\n    type: definePropType<StyleValue>([String, Object, Array, Boolean]),\n    default: '',\n  },\n  /**\n   * @description class of wrap\n   */\n  wrapClass: {\n    type: definePropType<ClassValue>([String, Array, Object, Boolean]),\n    default: '',\n  },\n  /**\n   * @description class of view\n   */\n  viewClass: {\n    type: definePropType<ClassValue>([String, Array, Object, Boolean]),\n    default: '',\n  },\n  /**\n   * @description style of view\n   */\n  viewStyle: {\n    type: definePropType<StyleValue>([String, Object, Array, Boolean]),\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)\n\n/**\n * @deprecated Removed after 3.0.0, Use `ScrollbarProps` instead.\n */\nexport type ScrollbarPropsPublic = ExtractPublicPropTypes<typeof scrollbarProps>\n\nexport const scrollbarEmits = {\n  'end-reached': (direction: ScrollbarDirection) =>\n    ['left', 'right', 'top', 'bottom'].includes(direction),\n  scroll: ({\n    scrollTop,\n    scrollLeft,\n  }: {\n    scrollTop: number\n    scrollLeft: number\n  }) => [scrollTop, scrollLeft].every(isNumber),\n}\nexport type ScrollbarEmits = typeof scrollbarEmits\nexport type ScrollbarDirection = 'top' | 'bottom' | 'left' | 'right'\n\nexport type ScrollbarInstance = InstanceType<typeof Scrollbar> & unknown\n"],"mappings":";;;;;;;;AA2FA,MAAa,iBAAiBA,gBAAAA,WAAW;;;;CAIvC,UAAU;EACR,MAAM;EACN,SAAS;EACV;;;;CAID,QAAQ;EACN,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;;;;CAID,WAAW;EACT,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;;;;CAID,QAAQ;;;;CAIR,WAAW;EACT,MAAMC,gBAAAA,eAA2B;GAAC;GAAQ;GAAQ;GAAO;GAAQ,CAAC;EAClE,SAAS;EACV;;;;CAID,WAAW;EACT,MAAMA,gBAAAA,eAA2B;GAAC;GAAQ;GAAO;GAAQ;GAAQ,CAAC;EAClE,SAAS;EACV;;;;CAID,WAAW;EACT,MAAMA,gBAAAA,eAA2B;GAAC;GAAQ;GAAO;GAAQ;GAAQ,CAAC;EAClE,SAAS;EACV;;;;CAID,WAAW;EACT,MAAMA,gBAAAA,eAA2B;GAAC;GAAQ;GAAQ;GAAO;GAAQ,CAAC;EAClE,SAAS;EACV;;;;CAID,UAAU;;;;CAIV,KAAK;EACH,MAAM;EACN,SAAS;EACV;;;;CAID,QAAQ;;;;CAIR,SAAS;EACP,MAAM;EACN,SAAS;EACV;;;;CAID,UAAU;EACR,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS,KAAA;EACV;;;;CAID,IAAI;;;;CAIJ,MAAM;CACN,GAAGC,cAAAA,aAAa,CAAC,aAAa,kBAAkB,CAAC;CAClD,CAAU;AAOX,MAAa,iBAAiB;CAC5B,gBAAgB,cACd;EAAC;EAAQ;EAAS;EAAO;EAAS,CAAC,SAAS,UAAU;CACxD,SAAS,EACP,WACA,iBAII,CAAC,WAAW,WAAW,CAAC,MAAMC,cAAAA,SAAS;CAC9C"}

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

@@ -1,3 +1,4 @@
+import { ClassValue } from "../../../utils/typescript.js";
 import { ScrollbarDirection, ScrollbarProps } from "./scrollbar.js";
 import * as _$vue from "vue";
 import { CSSProperties, StyleValue } from "vue";
@@ -29,14 +30,14 @@ declare const __VLS_base: _$vue.DefineComponent<ScrollbarProps, {
   }) => any) | undefined;
   "onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
 }>, {
+  tabindex: number | string;
   height: number | string;
   maxHeight: number | string;
-  tabindex: number | string;
   tag: keyof HTMLElementTagNameMap | (string & {});
   distance: number;
   wrapStyle: string | false | CSSProperties | StyleValue[] | null;
-  wrapClass: string | string[];
-  viewClass: string | string[];
+  wrapClass: string | false | Record<string, any> | ClassValue[] | null;
+  viewClass: string | false | Record<string, any> | ClassValue[] | null;
   viewStyle: string | false | CSSProperties | StyleValue[] | null;
   minSize: number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

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

@@ -1 +1 @@
-{"version":3,"file":"thumb.vue_vue_type_script_setup_true_lang.js","names":[],"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'\n\nimport type { 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"],"mappings":"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"}
+{"version":3,"file":"thumb.vue_vue_type_script_setup_true_lang.js","names":[],"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'\n\nimport type { 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) | null = isClient\n  ? document.onselectstart\n  : 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"],"mappings":";;;;;;;;;AA6BA,MAAM,iBAAiB;;;;;EACvB,MAAM,QAAQ;EAEd,MAAM,aAAA,GAAA,IAAA,QAAmB,kBAAA,oBAAmB;EAC5C,MAAM,KAAK,cAAA,aAAa,YAAW;EAEnC,IAAI,CAAC,WAAW,cAAA,WAAW,gBAAgB,mCAAkC;EAE7E,MAAM,YAAA,GAAA,IAAA,MAA+B;EACrC,MAAM,SAAA,GAAA,IAAA,MAA4B;EAElC,MAAM,cAAA,GAAA,IAAA,KAAqD,EAAE,CAAA;EAC7D,MAAM,WAAA,GAAA,IAAA,KAAc,MAAK;EAEzB,IAAI,aAAa;EACjB,IAAI,cAAc;EAClB,IAAI,mBAAmB;EACvB,IAAI,kBAAkB;EACtB,IAAI,wBACuD,aAAA,WACvD,SAAS,gBACT;EAEJ,MAAM,OAAA,GAAA,IAAA,gBAAqB,aAAA,QAAQ,MAAM,WAAW,aAAa,cAAa;EAE9E,MAAM,cAAA,GAAA,IAAA,gBACJ,aAAA,iBAAiB;GACf,MAAM,MAAM;GACZ,MAAM,MAAM;GACZ,KAAK,IAAI;GACV,CAAA,CACH;EAEA,MAAM,eAAA,GAAA,IAAA,gBAKF,SAAS,MAAO,IAAI,MAAM,WAAW,IACrC,UAAU,YAAa,IAAI,MAAM,cACjC,MAAM,QACN,MAAM,MAAO,IAAI,MAAM,QAC3B;EAEA,MAAM,qBAAqB,MAAkB;GAE3C,EAAE,iBAAgB;GAClB,IAAI,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE;GAE5C,OAAO,cAAc,EAAE,iBAAgB;GACvC,UAAU,EAAC;GAEX,MAAM,KAAK,EAAE;GACb,IAAI,CAAC,IAAI;GACT,WAAW,MAAM,IAAI,MAAM,QACzB,GAAG,IAAI,MAAM,WACZ,EAAE,IAAI,MAAM,UAAU,GAAG,uBAAuB,CAAC,IAAI,MAAM;;EAGhE,MAAM,qBAAqB,MAAkB;GAC3C,IAAI,CAAC,MAAM,SAAS,CAAC,SAAS,SAAS,CAAC,UAAU,aAAa;GAO/D,MAAM,2BALS,KAAK,IACjB,EAAE,OAAuB,uBAAuB,CAAC,IAAI,MAAM,aAC1D,EAAE,IAAI,MAAM,QAIN,GAFQ,MAAM,MAAM,IAAI,MAAM,UAAU,KAExB,MAAM,YAAY,QAC1C,SAAS,MAAM,IAAI,MAAM;GAE3B,UAAU,YAAY,IAAI,MAAM,UAC7B,0BAA0B,UAAU,YAAY,IAAI,MAAM,cAC3D;;EAGJ,MAAM,aAAa,MAAkB;GACnC,EAAE,0BAAyB;GAC3B,aAAa;GACb,mBAAmB,UAAU,YAAa;GAC1C,kBAAkB,UAAU,YAAa;GACzC,SAAS,iBAAiB,aAAa,yBAAwB;GAC/D,SAAS,iBAAiB,WAAW,uBAAsB;GAC3D,wBAAwB,SAAS;GACjC,SAAS,sBAAsB;;EAGjC,MAAM,4BAA4B,MAAkB;GAClD,IAAI,CAAC,SAAS,SAAS,CAAC,MAAM,OAAO;GACrC,IAAI,eAAe,OAAO;GAE1B,MAAM,WAAW,WAAW,MAAM,IAAI,MAAM;GAC5C,IAAI,CAAC,UAAU;GAOf,MAAM,4BAJH,SAAS,MAAM,uBAAuB,CAAC,IAAI,MAAM,aAChD,EAAE,IAAI,MAAM,WACd,MACyB,MAAM,MAAM,IAAI,MAAM,UAAU,aAExB,MAAM,YAAY,QACnD,SAAS,MAAM,IAAI,MAAM;GAE3B,IAAI,IAAI,MAAM,WAAW,cACvB,UAAU,YAAa,IAAI,MAAM,UAC9B,0BAA0B,kBAAmB;QAEhD,UAAU,YAAa,IAAI,MAAM,UAC9B,0BAA0B,mBAAoB;;EAIrD,MAAM,+BAA+B;GACnC,aAAa;GACb,WAAW,MAAM,IAAI,MAAM,QAAQ;GACnC,SAAS,oBAAoB,aAAa,yBAAwB;GAClE,SAAS,oBAAoB,WAAW,uBAAsB;GAC9D,sBAAqB;GACrB,IAAI,aAAa,QAAQ,QAAQ;;EAGnC,MAAM,kCAAkC;GACtC,cAAc;GACd,QAAQ,QAAQ,CAAC,CAAC,MAAM;;EAG1B,MAAM,mCAAmC;GACvC,cAAc;GACd,QAAQ,QAAQ;;EAGlB,CAAA,GAAA,IAAA,uBAAsB;GACpB,sBAAqB;GACrB,SAAS,oBAAoB,WAAW,uBAAsB;IAC/D;EAED,MAAM,6BAA6B;GACjC,IAAI,SAAS,kBAAkB,uBAC7B,SAAS,gBAAgB;;EAG7B,CAAA,GAAA,aAAA,mBAAA,GAAA,IAAA,OACQ,WAAW,mBAAmB,EACpC,aACA,0BACF;EACA,CAAA,GAAA,aAAA,mBAAA,GAAA,IAAA,OACQ,WAAW,mBAAmB,EACpC,cACA,2BACF;;qDAnKe,IAAA,YAAA;IAfA,OAAA,GAAA,IAAA,OAAM,GAAE,CAAC,EAAC,OAAA;IAAvB,WAAA;;oCAcQ,EAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,oBAAA,OAAA;cAXA;KAAJ,KAAI;KACH,QAAA,GAAA,IAAA,gBAAK,EAAA,GAAA,IAAA,OAAG,GAAE,CAAC,EAAC,MAAA,GAAA,GAAA,IAAA,OAAS,GAAE,CAAC,GAAG,IAAA,MAAI,IAAG,CAAA,CAAA;KAClC,aAAW;KACX,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,IAAA,qBAAN,IAAW,CAAA,OAAA,CAAA;oCAOT,OAAA;cAJI;KAAJ,KAAI;KACH,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,QAAA,CAAA;KACX,QAAA,GAAA,IAAA,gBAAO,WAAA,MAAU;KACjB,aAAW;qCAVN,QAAA,UAAU,QAAA,MAAO,CAAA,CAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"thumb2.js","names":[],"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'\n\nimport type { 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"],"mappings":""}
+{"version":3,"file":"thumb2.js","names":[],"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'\n\nimport type { 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) | null = isClient\n  ? document.onselectstart\n  : 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"],"mappings":""}

package/lib/components/segmented/index.d.ts

@@ -5,13 +5,13 @@ import * as _$vue from "vue";
 
 //#region ../../packages/components/segmented/index.d.ts
 declare const ElSegmented: (<T extends Option = Option>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
+  attrs: any;
+  emit: ((event: "update:modelValue", val: any) => void) & ((event: "change", val: any) => void);
   slots: {
     default?: (props: {
       item: T;
     }) => any;
   };
-  emit: ((event: "update:modelValue", val: any) => void) & ((event: "change", val: any) => void);
-  attrs: any;
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: _$vue.PublicProps & {
     direction?: "vertical" | "horizontal" | undefined;
@@ -25,8 +25,8 @@ declare const ElSegmented: (<T extends Option = Option>(__VLS_props: NonNullable
     id?: string | undefined;
     name?: string | undefined;
     ariaLabel?: string | undefined;
-    onChange?: ((val: any) => any) | undefined;
     "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+    onChange?: ((val: any) => any) | undefined;
   } & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
   } ? P : {});

package/lib/components/segmented/src/segmented.d.ts

@@ -63,7 +63,7 @@ declare const segmentedProps: {
   ariaLabel: StringConstructor;
   direction: EpPropFinalized<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical") | (((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical")) | null)[], unknown, unknown, string, boolean>;
   options: EpPropFinalized<(new (...args: any[]) => Option[]) | (() => Option[]) | (((new (...args: any[]) => Option[]) | (() => Option[])) | null)[], unknown, unknown, () => never[], boolean>;
-  modelValue: EpPropFinalized<(NumberConstructor | StringConstructor | BooleanConstructor)[], unknown, unknown, undefined, boolean>;
+  modelValue: EpPropFinalized<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
   props: EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | (((new (...args: any[]) => Props) | (() => Props)) | null)[], unknown, unknown, () => Required<Props>, boolean>;
   block: BooleanConstructor;
   size: {

package/lib/components/segmented/src/segmented.vue.d.ts

@@ -5,8 +5,8 @@ import * as _$vue from "vue";
 //#region ../../packages/components/segmented/src/segmented.vue.d.ts
 declare const __VLS_export: <T extends Option = Option>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: _$vue.PublicProps & __VLS_PrettifyLocal<SegmentedProps<T> & {
-    onChange?: ((val: any) => any) | undefined;
     "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+    onChange?: ((val: any) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
   } ? P : {});

package/lib/components/select/src/option.d.ts

@@ -5,13 +5,13 @@ import * as _$vue from "vue";
 declare const COMPONENT_NAME = "ElOption";
 declare const optionProps: {
   value: {
-    readonly type: _$vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>>;
     readonly required: true;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
   label: {
-    readonly type: _$vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(StringConstructor | NumberConstructor)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/lib/components/select/src/option.vue.d.ts

@@ -6,13 +6,13 @@ import * as _$vue from "vue";
 declare const _default: typeof __VLS_export;
 declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   value: {
-    readonly type: _$vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>>;
     readonly required: true;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
   label: {
-    readonly type: _$vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(StringConstructor | NumberConstructor)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -40,7 +40,7 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   };
   id: _$vue.Ref<string, string>;
   containerKls: _$vue.ComputedRef<string[]>;
-  currentLabel: _$vue.ComputedRef<boolean | EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
+  currentLabel: _$vue.ComputedRef<boolean | EpPropMergeType<(StringConstructor | NumberConstructor)[], unknown, unknown>>;
   itemSelected: _$vue.ComputedRef<boolean>;
   isDisabled: _$vue.ComputedRef<boolean>;
   select: SelectContext;
@@ -59,13 +59,13 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   selectOptionClick: () => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
   value: {
-    readonly type: _$vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>>;
     readonly required: true;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
   label: {
-    readonly type: _$vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(StringConstructor | NumberConstructor)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/lib/components/select/src/select-dropdown.vue.d.ts

@@ -1,3 +1,4 @@
+import { ClassValue } from "../../../utils/typescript.js";
 import * as _$vue from "vue";
 
 //#region ../../packages/components/select/src/select-dropdown.vue.d.ts
@@ -22,7 +23,7 @@ declare const __VLS_export: _$vue.DefineComponent<{}, {
     cssVarBlockName: (name: string) => string;
   };
   minWidth: _$vue.Ref<string, string>;
-  popperClass: _$vue.ComputedRef<string>;
+  popperClass: _$vue.ComputedRef<string | false | Record<string, any> | ClassValue[] | null>;
   isMultiple: _$vue.ComputedRef<boolean>;
   isFitInputWidth: _$vue.ComputedRef<boolean>;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;

package/lib/components/select/src/select.d.ts

@@ -1,12 +1,13 @@
 import { EmitFn } from "../../../utils/vue/typescript.js";
 import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
+import { ClassValue } from "../../../utils/typescript.js";
 import { PopperEffect } from "../../popper/src/popper.js";
 import { Options, Placement } from "../../popper/index.js";
 import { ScrollbarDirection } from "../../scrollbar/src/scrollbar.js";
 import { Props } from "../../select-v2/src/useProps.js";
 import _default from "./select.vue.js";
 import * as _$vue from "vue";
-import { CSSProperties, ExtractPropTypes, ExtractPublicPropTypes } from "vue";
+import { ExtractPropTypes, ExtractPublicPropTypes, StyleValue } from "vue";
 
 //#region ../../packages/components/select/src/select.d.ts
 /**
@@ -17,8 +18,8 @@ interface TagTooltipProps {
   placement?: Placement;
   fallbackPlacements?: Placement[];
   effect?: PopperEffect;
-  popperClass?: string;
-  popperStyle?: string | CSSProperties;
+  popperClass?: ClassValue;
+  popperStyle?: StyleValue;
   transition?: string;
   teleported?: boolean;
   popperOptions?: Partial<Options>;
@@ -33,7 +34,7 @@ declare const selectProps: {
   valueOnClear: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown, undefined, boolean>;
   name: StringConstructor;
   id: StringConstructor;
-  modelValue: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor)[], unknown, unknown> | EpPropMergeType<(NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor)[], unknown, unknown> | EpPropMergeType<(NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown, undefined, boolean>;
+  modelValue: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown, undefined, boolean>;
   autocomplete: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
   automaticDropdown: BooleanConstructor;
   size: {
@@ -48,13 +49,8 @@ declare const selectProps: {
   filterable: BooleanConstructor;
   allowCreate: BooleanConstructor;
   loading: BooleanConstructor;
-  popperClass: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
-  popperStyle: {
-    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties) | (((new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  popperClass: EpPropFinalized<(new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue) | (((new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue)) | null)[], unknown, unknown, string, boolean>;
+  popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
   remote: BooleanConstructor;
   debounce: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
@@ -111,9 +107,9 @@ declare const selectProps: {
   remoteShowSuffix: BooleanConstructor;
   showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
   offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
-  placement: EpPropFinalized<(new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
+  placement: EpPropFinalized<(new (...args: any[]) => "left" | "right" | "top" | "auto" | "bottom" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "left" | "right" | "top" | "auto" | "bottom" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
   fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, string[], boolean>;
-  tabindex: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, number, boolean>;
+  tabindex: EpPropFinalized<(StringConstructor | NumberConstructor)[], unknown, unknown, number, boolean>;
   appendTo: {
     readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>>;
     readonly required: false;

package/lib/components/select/src/select.js

@@ -84,13 +84,26 @@ const selectProps = require_runtime$1.buildProps({
 	* @description custom class name for Select's dropdown
 	*/
 	popperClass: {
-		type: String,
+		type: require_runtime$1.definePropType([
+			String,
+			Array,
+			Object,
+			Boolean
+		]),
 		default: ""
 	},
 	/**
 	* @description custom style for Select's dropdown
 	*/
-	popperStyle: { type: require_runtime$1.definePropType([String, Object]) },
+	popperStyle: {
+		type: require_runtime$1.definePropType([
+			String,
+			Array,
+			Object,
+			Boolean
+		]),
+		default: void 0
+	},
 	/**
 	* @description [popper.js](https://popper.js.org/docs/v2/) parameters
 	*/