@element-plus/nightly 0.0.20250225 → 0.0.20250227

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

@@ -1 +1 @@
-{"version":3,"file":"segmented.js","sources":["../../../../../../packages/components/segmented/src/segmented.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"options.length\"\n    :id=\"inputId\"\n    ref=\"segmentedRef\"\n    :class=\"segmentedCls\"\n    role=\"radiogroup\"\n    :aria-label=\"!isLabeledByFormItem ? ariaLabel || 'segmented' : undefined\"\n    :aria-labelledby=\"isLabeledByFormItem ? formItem!.labelId : undefined\"\n  >\n    <div :class=\"[ns.e('group'), ns.m(props.direction)]\">\n      <div :style=\"selectedStyle\" :class=\"selectedCls\" />\n      <label\n        v-for=\"(item, index) in options\"\n        :key=\"index\"\n        :class=\"getItemCls(item)\"\n      >\n        <input\n          :class=\"ns.e('item-input')\"\n          type=\"radio\"\n          :name=\"name\"\n          :disabled=\"getDisabled(item)\"\n          :checked=\"getSelected(item)\"\n          @change=\"handleChange(item)\"\n        />\n        <div :class=\"ns.e('item-label')\">\n          <slot :item=\"item\">{{ getLabel(item) }}</slot>\n        </div>\n      </label>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, reactive, ref, watch } from 'vue'\nimport { useActiveElement, useResizeObserver } from '@vueuse/core'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport { debugWarn, isObject } from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { segmentedEmits, segmentedProps } from './segmented'\nimport type { Option } from './types'\n\ndefineOptions({\n  name: 'ElSegmented',\n})\n\nconst props = defineProps(segmentedProps)\nconst emit = defineEmits(segmentedEmits)\n\nconst ns = useNamespace('segmented')\nconst segmentedId = useId()\nconst segmentedSize = useFormSize()\nconst _disabled = useFormDisabled()\nconst { formItem } = useFormItem()\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst segmentedRef = ref<HTMLElement | null>(null)\nconst activeElement = useActiveElement()\n\nconst state = reactive({\n  isInit: false,\n  width: 0,\n  height: 0,\n  translateX: 0,\n  translateY: 0,\n  focusVisible: false,\n})\n\nconst handleChange = (item: Option) => {\n  const value = getValue(item)\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n}\n\nconst getValue = (item: Option) => {\n  return isObject(item) ? item.value : item\n}\n\nconst getLabel = (item: Option) => {\n  return isObject(item) ? item.label : item\n}\n\nconst getDisabled = (item: Option | undefined) => {\n  return !!(_disabled.value || (isObject(item) ? item.disabled : false))\n}\n\nconst getSelected = (item: Option) => {\n  return props.modelValue === getValue(item)\n}\n\nconst getOption = (value: any) => {\n  return props.options.find((item) => getValue(item) === value)\n}\n\nconst getItemCls = (item: Option) => {\n  return [\n    ns.e('item'),\n    ns.is('selected', getSelected(item)),\n    ns.is('disabled', getDisabled(item)),\n  ]\n}\n\nconst updateSelect = () => {\n  if (!segmentedRef.value) return\n  const selectedItem = segmentedRef.value.querySelector(\n    '.is-selected'\n  ) as HTMLElement\n  const selectedItemInput = segmentedRef.value.querySelector(\n    '.is-selected input'\n  ) as HTMLElement\n  if (!selectedItem || !selectedItemInput) {\n    state.width = 0\n    state.height = 0\n    state.translateX = 0\n    state.translateY = 0\n    state.focusVisible = false\n    return\n  }\n  const rect = selectedItem.getBoundingClientRect()\n  state.isInit = true\n  if (props.direction === 'vertical') {\n    state.height = rect.height\n    state.translateY = selectedItem.offsetTop\n  } else {\n    state.width = rect.width\n    state.translateX = selectedItem.offsetLeft\n  }\n  try {\n    // This will failed in test\n    state.focusVisible = selectedItemInput.matches(':focus-visible')\n  } catch {}\n}\n\nconst segmentedCls = computed(() => [\n  ns.b(),\n  ns.m(segmentedSize.value),\n  ns.is('block', props.block),\n])\n\nconst selectedStyle = computed(() => ({\n  width: props.direction === 'vertical' ? '100%' : `${state.width}px`,\n  height: props.direction === 'vertical' ? `${state.height}px` : '100%',\n  transform:\n    props.direction === 'vertical'\n      ? `translateY(${state.translateY}px)`\n      : `translateX(${state.translateX}px)`,\n  display: state.isInit ? 'block' : 'none',\n}))\n\nconst selectedCls = computed(() => [\n  ns.e('item-selected'),\n  ns.is('disabled', getDisabled(getOption(props.modelValue))),\n  ns.is('focus-visible', state.focusVisible),\n])\n\nconst name = computed(() => {\n  return props.name || segmentedId.value\n})\n\nuseResizeObserver(segmentedRef, updateSelect)\n\nwatch(activeElement, updateSelect)\n\nwatch(\n  () => props.modelValue,\n  () => {\n    updateSelect()\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch((err) => debugWarn(err))\n    }\n  },\n  {\n    flush: 'post',\n  }\n)\n</script>\n"],"names":["useNamespace","useId","useFormSize","useFormDisabled","useFormItem","useFormItemInputId","ref","useActiveElement","reactive","UPDATE_MODEL_EVENT","CHANGE_EVENT","isObject","computed","useResizeObserver","watch","debugWarn","_openBlock","_createElementBlock","_unref"],"mappings":";;;;;;;;;;;;;;;;uCAgDc,CAAA;AAAA,EACZ,IAAM,EAAA,aAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAM,MAAA,EAAA,GAAKA,mBAAa,WAAW,CAAA,CAAA;AACnC,IAAA,MAAM,cAAcC,aAAM,EAAA,CAAA;AAC1B,IAAA,MAAM,gBAAgBC,8BAAY,EAAA,CAAA;AAClC,IAAA,MAAM,YAAYC,kCAAgB,EAAA,CAAA;AAClC,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,uBAAY,EAAA,CAAA;AACjC,IAAA,MAAM,EAAE,OAAA,EAAS,mBAAoB,EAAA,GAAIC,+BAAmB,KAAO,EAAA;AAAA,MACjE,eAAiB,EAAA,QAAA;AAAA,KAClB,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAeC,QAAwB,IAAI,CAAA,CAAA;AACjD,IAAA,MAAM,gBAAgBC,qBAAiB,EAAA,CAAA;AAEvC,IAAA,MAAM,QAAQC,YAAS,CAAA;AAAA,MACrB,MAAQ,EAAA,KAAA;AAAA,MACR,KAAO,EAAA,CAAA;AAAA,MACP,MAAQ,EAAA,CAAA;AAAA,MACR,UAAY,EAAA,CAAA;AAAA,MACZ,UAAY,EAAA,CAAA;AAAA,MACZ,YAAc,EAAA,KAAA;AAAA,KACf,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CAAC,IAAiB,KAAA;AACrC,MAAM,MAAA,KAAA,GAAQ,SAAS,IAAI,CAAA,CAAA;AAC3B,MAAA,IAAA,CAAKC,0BAAoB,KAAK,CAAA,CAAA;AAC9B,MAAA,IAAA,CAAKC,oBAAc,KAAK,CAAA,CAAA;AAAA,KAC1B,CAAA;AAEA,IAAM,MAAA,QAAA,GAAW,CAAC,IAAiB,KAAA;AACjC,MAAA,OAAOC,eAAS,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,KAAQ,GAAA,IAAA,CAAA;AAAA,KACvC,CAAA;AAEA,IAAM,MAAA,QAAA,GAAW,CAAC,IAAiB,KAAA;AACjC,MAAA,OAAOA,eAAS,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,KAAQ,GAAA,IAAA,CAAA;AAAA,KACvC,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,IAA6B,KAAA;AAChD,MAAO,OAAA,CAAC,EAAE,SAAU,CAAA,KAAA,KAAUA,gBAAS,IAAI,CAAA,GAAI,KAAK,QAAW,GAAA,KAAA,CAAA,CAAA,CAAA;AAAA,KACjE,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,IAAiB,KAAA;AACpC,MAAO,OAAA,KAAA,CAAM,UAAe,KAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAAA,KAC3C,CAAA;AAEA,IAAM,MAAA,SAAA,GAAY,CAAC,KAAe,KAAA;AAChC,MAAO,OAAA,KAAA,CAAM,QAAQ,IAAK,CAAA,CAAC,SAAS,QAAS,CAAA,IAAI,MAAM,KAAK,CAAA,CAAA;AAAA,KAC9D,CAAA;AAEA,IAAM,MAAA,UAAA,GAAa,CAAC,IAAiB,KAAA;AACnC,MAAO,OAAA;AAAA,QACL,EAAA,CAAG,EAAE,MAAM,CAAA;AAAA,QACX,EAAG,CAAA,EAAA,CAAG,UAAY,EAAA,WAAA,CAAY,IAAI,CAAC,CAAA;AAAA,QACnC,EAAG,CAAA,EAAA,CAAG,UAAY,EAAA,WAAA,CAAY,IAAI,CAAC,CAAA;AAAA,OACrC,CAAA;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,eAAe,MAAM;AACzB,MAAI,IAAA,CAAC,aAAa,KAAO;AACzB,QAAM,OAAA;AAAkC,MACtC,MAAA,YAAA,GAAA,YAAA,CAAA,KAAA,CAAA,aAAA,CAAA,cAAA,CAAA,CAAA;AAAA,MACF,MAAA,iBAAA,GAAA,YAAA,CAAA,KAAA,CAAA,aAAA,CAAA,oBAAA,CAAA,CAAA;AACA,MAAM,IAAA,CAAA,YAAA,IAAA,CAAA,iBAAiC,EAAM;AAAA,QAC3C,KAAA,CAAA,KAAA,GAAA,CAAA,CAAA;AAAA,QACF,KAAA,CAAA,MAAA,GAAA,CAAA,CAAA;AACA,QAAI,KAAiB,CAAA,UAAA,GAAA,CAAC,CAAmB;AACvC,QAAA,KAAA,CAAM,UAAQ,GAAA,CAAA,CAAA;AACd,QAAA,KAAA,CAAM,YAAS,GAAA,KAAA,CAAA;AACf,QAAA,OAAmB;AACnB,OAAA;AACA,MAAA,MAAA,IAAqB,GAAA,YAAA,CAAA,qBAAA,EAAA,CAAA;AACrB,MAAA,KAAA,CAAA,MAAA,GAAA,IAAA,CAAA;AAAA,MACF,IAAA,KAAA,CAAA,SAAA,KAAA,UAAA,EAAA;AACA,QAAM,KAAA,CAAA,oBAA0C,CAAA;AAChD,QAAA,KAAe,CAAA,UAAA,GAAA,YAAA,CAAA,SAAA,CAAA;AACf,OAAI,MAAA;AACF,QAAA,KAAA,CAAM,YAAc,CAAA,KAAA,CAAA;AACpB,QAAA,KAAA,CAAM,aAAa,YAAa,CAAA,UAAA,CAAA;AAAA,OAC3B;AACL,MAAA,IAAA;AACA,QAAA,KAAA,CAAM,eAA0B,iBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,CAAA;AAAA,OAClC,CAAA,OAAA,CAAA,EAAA;AACA,OAAI;AAEF,KAAM,CAAA;AAAyD,IAAA,MACzD,YAAA,GAAAC,YAAA,CAAA,MAAA;AAAA,MAAC,EAAA,CAAA,CAAA,EAAA;AAAA,MACX,EAAA,CAAA,CAAA,CAAA,aAAA,CAAA,KAAA,CAAA;AAEA,MAAM,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA;AAA8B,KAAA,CAClC;AAAK,IACL,MAAK,aAAA,GAAmBA,YAAA,CAAA,OAAA;AAAA,MACxB,KAAG,EAAY,KAAA,CAAA,SAAW,KAAA,UAAA,GAAA,MAAA,GAAA,CAAA,EAAA,KAAA,CAAA,KAAA,CAAA,EAAA,CAAA;AAAA,MAC3B,MAAA,EAAA,KAAA,CAAA,SAAA,KAAA,UAAA,GAAA,CAAA,EAAA,KAAA,CAAA,MAAA,CAAA,EAAA,CAAA,GAAA,MAAA;AAED,MAAM,SAAA,EAAA,KAAA,CAAA,cAAgC,UAAA,GAAA,CAAA,WAAA,EAAA,KAAA,CAAA,UAAA,CAAA,GAAA,CAAA,GAAA,CAAA,WAAA,EAAA,KAAA,CAAA,UAAA,CAAA,GAAA,CAAA;AAAA,MACpC,OAAO,EAAM,KAAA,CAAA,MAAA,GAAA,gBAA2B;AAAuB,KAAA,CAC/D;AAA+D,IAC/D,MAAA,WACQ,GAAAA,YAAA,CAAA,MACF;AAC8B,MACpC,EAAA,CAAA,CAAA,CAAA,eAAe,CAAA;AAAmB,MAClC,EAAA,CAAA,EAAA,CAAA,UAAA,EAAA,WAAA,CAAA,SAAA,CAAA,KAAA,CAAA,UAAA,CAAA,CAAA,CAAA;AAEF,MAAM,EAAA,CAAA,EAAA,CAAA,sBAA6B,CAAA,YAAA,CAAA;AAAA,KACjC,CAAA,CAAA;AAAoB,IACpB,UAAkB,GAAAA,YAAA,CAAA,MAAA;AAAwC,MAC1D,OAAuB,KAAA,CAAA,IAAA,IAAA,WAAkB,CAAA,KAAA,CAAA;AAAA,KAC1C,CAAA,CAAA;AAED,IAAMC,mCAAsB,EAAA,YAAA,CAAA,CAAA;AAC1B,IAAOC,SAAA,CAAA,2BAA0B,CAAA,CAAA;AAAA,IACnCA,SAAC,CAAA,MAAA,KAAA,CAAA,UAAA,EAAA,MAAA;AAED,MAAA,IAAA,EAAA,CAAA;AAEA,MAAA;AAEA,MAAA,IAAA,KAAA,CAAA,aAAA,EAAA;AAAA,cACc,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,QAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,QAAA,EAAA,QAAA,CAAA,CAAA,KAAA,CAAA,CAAA,GAAA,KAAAC,eAAA,CAAA,GAAA,CAAA,CAAA,CAAA;AAAA,OACN;AACJ,KAAa,EAAA;AACb,MAAA,KAAA,QAAyB;AACvB,KAAU,CAAA,CAAA;AAAkD,IAC9D,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MACF,OAAA,IAAA,CAAA,OAAA,CAAA,MAAA,IAAAC,aAAA,EAAA,EAAAC,sBAAA,CAAA,KAAA,EAAA;AAAA,QACA,GAAA,EAAA,CAAA;AAAA,QACE,EAAO,EAAAC,SAAA,CAAA,OAAA,CAAA;AAAA,QACT,OAAA,EAAA,cAAA;AAAA,QACF,GAAA,EAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"segmented.js","sources":["../../../../../../packages/components/segmented/src/segmented.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isBoolean,\n  isNumber,\n  isString,\n} from '@element-plus/utils'\nimport { useAriaProps, useSizeProp } from '@element-plus/hooks'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { Option } from './types'\nimport type { ExtractPropTypes } from 'vue'\nimport type Segmented from './segmented.vue'\n\nexport const segmentedProps = buildProps({\n  direction: {\n    type: definePropType<'vertical' | 'horizontal'>(String),\n    default: 'horizontal',\n  },\n  /**\n   * @description options of segmented\n   */\n  options: {\n    type: definePropType<Option[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: [String, Number, Boolean],\n    default: undefined,\n  },\n  /**\n   * @description fit width of parent content\n   */\n  block: Boolean,\n  /**\n   * @description size of component\n   */\n  size: useSizeProp,\n  /**\n   * @description whether segmented is disabled\n   */\n  disabled: Boolean,\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description native input id\n   */\n  id: String,\n  /**\n   * @description native `name` attribute\n   */\n  name: String,\n  ...useAriaProps(['ariaLabel']),\n})\n\nexport type SegmentedProps = ExtractPropTypes<typeof segmentedProps>\n\nexport const segmentedEmits = {\n  [UPDATE_MODEL_EVENT]: (val: any) =>\n    isString(val) || isNumber(val) || isBoolean(val),\n  [CHANGE_EVENT]: (val: any) =>\n    isString(val) || isNumber(val) || isBoolean(val),\n}\nexport type SegmentedEmits = typeof segmentedEmits\n\nexport type SegmentedInstance = InstanceType<typeof Segmented>\n"],"names":["buildProps","definePropType","useSizeProp","useAriaProps","UPDATE_MODEL_EVENT","isString","isNumber","isBoolean","CHANGE_EVENT"],"mappings":";;;;;;;;;;;AASY,MAAC,cAAc,GAAGA,kBAAU,CAAC;AACzC,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEC,sBAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,YAAY;AACzB,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,EAAE;AACrB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;AACnC,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,IAAI,EAAEC,iBAAW;AACnB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,EAAE,EAAE,MAAM;AACZ,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,GAAGC,oBAAY,CAAC,CAAC,WAAW,CAAC,CAAC;AAChC,CAAC,EAAE;AACS,MAAC,cAAc,GAAG;AAC9B,EAAE,CAACC,wBAAkB,GAAG,CAAC,GAAG,KAAKC,eAAQ,CAAC,GAAG,CAAC,IAAIC,cAAQ,CAAC,GAAG,CAAC,IAAIC,eAAS,CAAC,GAAG,CAAC;AACjF,EAAE,CAACC,kBAAY,GAAG,CAAC,GAAG,KAAKH,eAAQ,CAAC,GAAG,CAAC,IAAIC,cAAQ,CAAC,GAAG,CAAC,IAAIC,eAAS,CAAC,GAAG,CAAC;AAC3E;;;;;"}

package/lib/components/segmented/src/segmented2.js

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

package/lib/components/segmented/src/segmented2.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented2.js","sources":["../../../../../../packages/components/segmented/src/segmented.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isBoolean,\n  isNumber,\n  isString,\n} from '@element-plus/utils'\nimport { useAriaProps, useSizeProp } from '@element-plus/hooks'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { Option } from './types'\nimport type { ExtractPropTypes } from 'vue'\nimport type Segmented from './segmented.vue'\n\nexport const segmentedProps = buildProps({\n  direction: {\n    type: definePropType<'vertical' | 'horizontal'>(String),\n    default: 'horizontal',\n  },\n  /**\n   * @description options of segmented\n   */\n  options: {\n    type: definePropType<Option[]>(Array),\n    default: () => [],\n  },\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: [String, Number, Boolean],\n    default: undefined,\n  },\n  /**\n   * @description fit width of parent content\n   */\n  block: Boolean,\n  /**\n   * @description size of component\n   */\n  size: useSizeProp,\n  /**\n   * @description whether segmented is disabled\n   */\n  disabled: Boolean,\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description native input id\n   */\n  id: String,\n  /**\n   * @description native `name` attribute\n   */\n  name: String,\n  ...useAriaProps(['ariaLabel']),\n})\n\nexport type SegmentedProps = ExtractPropTypes<typeof segmentedProps>\n\nexport const segmentedEmits = {\n  [UPDATE_MODEL_EVENT]: (val: any) =>\n    isString(val) || isNumber(val) || isBoolean(val),\n  [CHANGE_EVENT]: (val: any) =>\n    isString(val) || isNumber(val) || isBoolean(val),\n}\nexport type SegmentedEmits = typeof segmentedEmits\n\nexport type SegmentedInstance = InstanceType<typeof Segmented>\n"],"names":["buildProps","definePropType","useSizeProp","useAriaProps","UPDATE_MODEL_EVENT","isString","isNumber","isBoolean","CHANGE_EVENT"],"mappings":";;;;;;;;;;;AASY,MAAC,cAAc,GAAGA,kBAAU,CAAC;AACzC,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEC,sBAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,YAAY;AACzB,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,EAAE;AACrB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;AACnC,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,IAAI,EAAEC,iBAAW;AACnB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,EAAE,EAAE,MAAM;AACZ,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,GAAGC,oBAAY,CAAC,CAAC,WAAW,CAAC,CAAC;AAChC,CAAC,EAAE;AACS,MAAC,cAAc,GAAG;AAC9B,EAAE,CAACC,wBAAkB,GAAG,CAAC,GAAG,KAAKC,eAAQ,CAAC,GAAG,CAAC,IAAIC,cAAQ,CAAC,GAAG,CAAC,IAAIC,eAAS,CAAC,GAAG,CAAC;AACjF,EAAE,CAACC,kBAAY,GAAG,CAAC,GAAG,KAAKH,eAAQ,CAAC,GAAG,CAAC,IAAIC,cAAQ,CAAC,GAAG,CAAC,IAAIC,eAAS,CAAC,GAAG,CAAC;AAC3E;;;;;"}
+{"version":3,"file":"segmented2.js","sources":["../../../../../../packages/components/segmented/src/segmented.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"options.length\"\n    :id=\"inputId\"\n    ref=\"segmentedRef\"\n    :class=\"segmentedCls\"\n    role=\"radiogroup\"\n    :aria-label=\"!isLabeledByFormItem ? ariaLabel || 'segmented' : undefined\"\n    :aria-labelledby=\"isLabeledByFormItem ? formItem!.labelId : undefined\"\n  >\n    <div :class=\"[ns.e('group'), ns.m(props.direction)]\">\n      <div :style=\"selectedStyle\" :class=\"selectedCls\" />\n      <label\n        v-for=\"(item, index) in options\"\n        :key=\"index\"\n        :class=\"getItemCls(item)\"\n      >\n        <input\n          :class=\"ns.e('item-input')\"\n          type=\"radio\"\n          :name=\"name\"\n          :disabled=\"getDisabled(item)\"\n          :checked=\"getSelected(item)\"\n          @change=\"handleChange(item)\"\n        />\n        <div :class=\"ns.e('item-label')\">\n          <slot :item=\"item\">{{ getLabel(item) }}</slot>\n        </div>\n      </label>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, reactive, ref, watch } from 'vue'\nimport { useActiveElement, useResizeObserver } from '@vueuse/core'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport { debugWarn, isObject } from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { segmentedEmits, segmentedProps } from './segmented'\nimport type { Option } from './types'\n\ndefineOptions({\n  name: 'ElSegmented',\n})\n\nconst props = defineProps(segmentedProps)\nconst emit = defineEmits(segmentedEmits)\n\nconst ns = useNamespace('segmented')\nconst segmentedId = useId()\nconst segmentedSize = useFormSize()\nconst _disabled = useFormDisabled()\nconst { formItem } = useFormItem()\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst segmentedRef = ref<HTMLElement | null>(null)\nconst activeElement = useActiveElement()\n\nconst state = reactive({\n  isInit: false,\n  width: 0,\n  height: 0,\n  translateX: 0,\n  translateY: 0,\n  focusVisible: false,\n})\n\nconst handleChange = (item: Option) => {\n  const value = getValue(item)\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n}\n\nconst getValue = (item: Option) => {\n  return isObject(item) ? item.value : item\n}\n\nconst getLabel = (item: Option) => {\n  return isObject(item) ? item.label : item\n}\n\nconst getDisabled = (item: Option | undefined) => {\n  return !!(_disabled.value || (isObject(item) ? item.disabled : false))\n}\n\nconst getSelected = (item: Option) => {\n  return props.modelValue === getValue(item)\n}\n\nconst getOption = (value: any) => {\n  return props.options.find((item) => getValue(item) === value)\n}\n\nconst getItemCls = (item: Option) => {\n  return [\n    ns.e('item'),\n    ns.is('selected', getSelected(item)),\n    ns.is('disabled', getDisabled(item)),\n  ]\n}\n\nconst updateSelect = () => {\n  if (!segmentedRef.value) return\n  const selectedItem = segmentedRef.value.querySelector(\n    '.is-selected'\n  ) as HTMLElement\n  const selectedItemInput = segmentedRef.value.querySelector(\n    '.is-selected input'\n  ) as HTMLElement\n  if (!selectedItem || !selectedItemInput) {\n    state.width = 0\n    state.height = 0\n    state.translateX = 0\n    state.translateY = 0\n    state.focusVisible = false\n    return\n  }\n  const rect = selectedItem.getBoundingClientRect()\n  state.isInit = true\n  if (props.direction === 'vertical') {\n    state.height = rect.height\n    state.translateY = selectedItem.offsetTop\n  } else {\n    state.width = rect.width\n    state.translateX = selectedItem.offsetLeft\n  }\n  try {\n    // This will failed in test\n    state.focusVisible = selectedItemInput.matches(':focus-visible')\n  } catch {}\n}\n\nconst segmentedCls = computed(() => [\n  ns.b(),\n  ns.m(segmentedSize.value),\n  ns.is('block', props.block),\n])\n\nconst selectedStyle = computed(() => ({\n  width: props.direction === 'vertical' ? '100%' : `${state.width}px`,\n  height: props.direction === 'vertical' ? `${state.height}px` : '100%',\n  transform:\n    props.direction === 'vertical'\n      ? `translateY(${state.translateY}px)`\n      : `translateX(${state.translateX}px)`,\n  display: state.isInit ? 'block' : 'none',\n}))\n\nconst selectedCls = computed(() => [\n  ns.e('item-selected'),\n  ns.is('disabled', getDisabled(getOption(props.modelValue))),\n  ns.is('focus-visible', state.focusVisible),\n])\n\nconst name = computed(() => {\n  return props.name || segmentedId.value\n})\n\nuseResizeObserver(segmentedRef, updateSelect)\n\nwatch(activeElement, updateSelect)\n\nwatch(\n  () => props.modelValue,\n  () => {\n    updateSelect()\n    if (props.validateEvent) {\n      formItem?.validate?.('change').catch((err) => debugWarn(err))\n    }\n  },\n  {\n    flush: 'post',\n  }\n)\n</script>\n"],"names":["useNamespace","useId","useFormSize","useFormDisabled","useFormItem","useFormItemInputId","ref","useActiveElement","reactive","UPDATE_MODEL_EVENT","CHANGE_EVENT","isObject","computed","useResizeObserver","watch","debugWarn","_openBlock","_createElementBlock","_unref"],"mappings":"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"}

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

@@ -183,7 +183,7 @@ var ElSelectMenu = vue.defineComponent({
         enter,
         numpadEnter
       } = aria.EVENT_CODE;
-      if (code !== tab) {
+      if ([esc, down, up, enter, numpadEnter].includes(code)) {
         e.preventDefault();
         e.stopPropagation();
       }

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

@@ -1 +1 @@
-{"version":3,"file":"select-dropdown.js","sources":["../../../../../../packages/components/select-v2/src/select-dropdown.tsx"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  inject,\n  ref,\n  toRaw,\n  unref,\n  watch,\n} from 'vue'\nimport { get } from 'lodash-unified'\nimport { isObject, isUndefined } from '@element-plus/utils'\nimport {\n  DynamicSizeList,\n  FixedSizeList,\n} from '@element-plus/components/virtual-list'\nimport { useNamespace } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport GroupItem from './group-item.vue'\nimport OptionItem from './option-item.vue'\nimport { useProps } from './useProps'\n\nimport { selectV2InjectionKey } from './token'\n\nimport type {\n  DynamicSizeListInstance,\n  FixedSizeListInstance,\n  ItemProps,\n} from '@element-plus/components/virtual-list'\nimport type { Option, OptionItemProps } from './select.types'\nimport type {\n  ComponentPublicInstance,\n  ComputedRef,\n  ExtractPropTypes,\n  Ref,\n} from 'vue'\n\nconst props = {\n  loading: Boolean,\n  data: {\n    type: Array,\n    required: true as const,\n  },\n  hoveringIndex: Number,\n  width: Number,\n}\ninterface SelectDropdownExposed {\n  listRef: Ref<FixedSizeListInstance | DynamicSizeListInstance | undefined>\n  isSized: ComputedRef<boolean>\n  isItemDisabled: (modelValue: any[] | any, selected: boolean) => boolean\n  isItemHovering: (target: number) => boolean\n  isItemSelected: (modelValue: any[] | any, target: Option) => boolean\n  scrollToItem: (index: number) => void\n  resetScrollTop: () => void\n}\nexport type SelectDropdownInstance = ComponentPublicInstance<\n  ExtractPropTypes<typeof props>,\n  SelectDropdownExposed\n>\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n  props,\n  setup(props, { slots, expose }) {\n    const select = inject(selectV2InjectionKey)!\n    const ns = useNamespace('select')\n    const { getLabel, getValue, getDisabled } = useProps(select.props)\n\n    const cachedHeights = ref<Array<number>>([])\n\n    const listRef = ref<FixedSizeListInstance | DynamicSizeListInstance>()\n\n    const size = computed(() => props.data.length)\n    watch(\n      () => size.value,\n      () => {\n        select.tooltipRef.value!.updatePopper?.()\n      }\n    )\n\n    const isSized = computed(() =>\n      isUndefined(select.props.estimatedOptionHeight)\n    )\n    const listProps = computed(() => {\n      if (isSized.value) {\n        return {\n          itemSize: select.props.itemHeight,\n        }\n      }\n\n      return {\n        estimatedSize: select.props.estimatedOptionHeight,\n        itemSize: (idx: number) => cachedHeights.value[idx],\n      }\n    })\n\n    const contains = (arr: Array<any> = [], target: any) => {\n      const {\n        props: { valueKey },\n      } = select\n\n      if (!isObject(target)) {\n        return arr.includes(target)\n      }\n\n      return (\n        arr &&\n        arr.some((item) => {\n          return toRaw(get(item, valueKey)) === get(target, valueKey)\n        })\n      )\n    }\n    const isEqual = (selected: unknown, target: unknown) => {\n      if (!isObject(target)) {\n        return selected === target\n      } else {\n        const { valueKey } = select.props\n        return get(selected, valueKey) === get(target, valueKey)\n      }\n    }\n\n    const isItemSelected: SelectDropdownExposed['isItemSelected'] = (\n      modelValue,\n      target\n    ) => {\n      if (select.props.multiple) {\n        return contains(modelValue, getValue(target))\n      }\n      return isEqual(modelValue, getValue(target))\n    }\n\n    const isItemDisabled: SelectDropdownExposed['isItemDisabled'] = (\n      modelValue,\n      selected\n    ) => {\n      const { disabled, multiple, multipleLimit } = select.props\n      return (\n        disabled ||\n        (!selected &&\n          (multiple\n            ? multipleLimit > 0 && modelValue.length >= multipleLimit\n            : false))\n      )\n    }\n\n    const isItemHovering: SelectDropdownExposed['isItemHovering'] = (target) =>\n      props.hoveringIndex === target\n\n    const scrollToItem: SelectDropdownExposed['scrollToItem'] = (index) => {\n      const list = listRef.value\n      if (list) {\n        list.scrollToItem(index)\n      }\n    }\n\n    const resetScrollTop: SelectDropdownExposed['resetScrollTop'] = () => {\n      const list = listRef.value\n      if (list) {\n        list.resetScrollTop()\n      }\n    }\n    const exposed: SelectDropdownExposed = {\n      listRef,\n      isSized,\n\n      isItemDisabled,\n      isItemHovering,\n      isItemSelected,\n      scrollToItem,\n      resetScrollTop,\n    }\n    expose(exposed)\n\n    const Item = (itemProps: ItemProps<any>) => {\n      const { index, data, style } = itemProps\n      const sized = unref(isSized)\n      const { itemSize, estimatedSize } = unref(listProps)\n      const { modelValue } = select.props\n      const { onSelect, onHover } = select\n      const item = data[index]\n      if (item.type === 'Group') {\n        return (\n          <GroupItem\n            item={item}\n            style={style}\n            height={sized ? (itemSize as number) : estimatedSize}\n          />\n        )\n      }\n\n      const isSelected = isItemSelected(modelValue, item)\n      const isDisabled = isItemDisabled(modelValue, isSelected)\n      const isHovering = isItemHovering(index)\n      return (\n        <OptionItem\n          {...itemProps}\n          selected={isSelected}\n          disabled={getDisabled(item) || isDisabled}\n          created={!!item.created}\n          hovering={isHovering}\n          item={item}\n          onSelect={onSelect}\n          onHover={onHover}\n        >\n          {{\n            default: (props: OptionItemProps) =>\n              slots.default?.(props) || <span>{getLabel(item)}</span>,\n          }}\n        </OptionItem>\n      )\n    }\n\n    // computed\n    const { onKeyboardNavigate, onKeyboardSelect } = select\n\n    const onForward = () => {\n      onKeyboardNavigate('forward')\n    }\n\n    const onBackward = () => {\n      onKeyboardNavigate('backward')\n    }\n\n    const onEscOrTab = () => {\n      // The following line actually doesn't work. Fixing it may introduce a small breaking change for some users, so just comment it out for now.\n      // select.expanded = false\n    }\n\n    const onKeydown = (e: KeyboardEvent) => {\n      const { code } = e\n      const { tab, esc, down, up, enter, numpadEnter } = EVENT_CODE\n      if (code !== tab) {\n        e.preventDefault()\n        e.stopPropagation()\n      }\n\n      switch (code) {\n        case tab:\n        case esc:\n          onEscOrTab()\n          break\n        case down:\n          onForward()\n          break\n        case up:\n          onBackward()\n          break\n        case enter:\n        case numpadEnter:\n          onKeyboardSelect()\n          break\n      }\n    }\n\n    return () => {\n      const { data, width } = props\n      const { height, multiple, scrollbarAlwaysOn } = select.props\n\n      const List = unref(isSized) ? FixedSizeList : DynamicSizeList\n\n      return (\n        <div\n          class={[ns.b('dropdown'), ns.is('multiple', multiple)]}\n          style={{\n            width: `${width}px`,\n          }}\n        >\n          {slots.header?.()}\n          {slots.loading?.() || slots.empty?.() || (\n            <List\n              ref={listRef}\n              {...unref(listProps)}\n              className={ns.be('dropdown', 'list')}\n              scrollbarAlwaysOn={scrollbarAlwaysOn}\n              data={data}\n              height={height}\n              width={width}\n              total={data.length}\n              // @ts-ignore - dts problem\n              onKeydown={onKeydown}\n            >\n              {{\n                default: (props: ItemProps<any>) => <Item {...props} />,\n              }}\n            </List>\n          )}\n          {slots.footer?.()}\n        </div>\n      )\n    }\n  },\n})\n"],"names":["props","loading","Boolean","data","type","Array","required","hoveringIndex","Number","width","defineComponent","name","slots","expose","inject","selectV2InjectionKey","select","useNamespace","ns","getLabel","getValue","getDisabled","cachedHeights","ref","listRef","computed","watch","size","tooltipRef","value","isSized","isUndefined","estimatedOptionHeight","listProps","itemSize","itemHeight","estimatedSize","contains","valueKey","isObject","target","arr","get","item","isEqual","selected","isItemSelected","modelValue","isItemDisabled","multipleLimit","isItemHovering","scrollToItem","resetScrollTop","list","unref","Item","itemProps","style","_createVNode","GroupItem","OptionItem","_mergeProps","onSelect","onHover","sized","onKeyboardSelect","onForward","EVENT_CODE","onBackward","onEscOrTab","onKeydown","code","esc","down","numpadEnter","tab","e"],"mappings":"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"}
+{"version":3,"file":"select-dropdown.js","sources":["../../../../../../packages/components/select-v2/src/select-dropdown.tsx"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  inject,\n  ref,\n  toRaw,\n  unref,\n  watch,\n} from 'vue'\nimport { get } from 'lodash-unified'\nimport { isObject, isUndefined } from '@element-plus/utils'\nimport {\n  DynamicSizeList,\n  FixedSizeList,\n} from '@element-plus/components/virtual-list'\nimport { useNamespace } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport GroupItem from './group-item.vue'\nimport OptionItem from './option-item.vue'\nimport { useProps } from './useProps'\n\nimport { selectV2InjectionKey } from './token'\n\nimport type {\n  DynamicSizeListInstance,\n  FixedSizeListInstance,\n  ItemProps,\n} from '@element-plus/components/virtual-list'\nimport type { Option, OptionItemProps } from './select.types'\nimport type {\n  ComponentPublicInstance,\n  ComputedRef,\n  ExtractPropTypes,\n  Ref,\n} from 'vue'\n\nconst props = {\n  loading: Boolean,\n  data: {\n    type: Array,\n    required: true as const,\n  },\n  hoveringIndex: Number,\n  width: Number,\n}\ninterface SelectDropdownExposed {\n  listRef: Ref<FixedSizeListInstance | DynamicSizeListInstance | undefined>\n  isSized: ComputedRef<boolean>\n  isItemDisabled: (modelValue: any[] | any, selected: boolean) => boolean\n  isItemHovering: (target: number) => boolean\n  isItemSelected: (modelValue: any[] | any, target: Option) => boolean\n  scrollToItem: (index: number) => void\n  resetScrollTop: () => void\n}\nexport type SelectDropdownInstance = ComponentPublicInstance<\n  ExtractPropTypes<typeof props>,\n  SelectDropdownExposed\n>\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n  props,\n  setup(props, { slots, expose }) {\n    const select = inject(selectV2InjectionKey)!\n    const ns = useNamespace('select')\n    const { getLabel, getValue, getDisabled } = useProps(select.props)\n\n    const cachedHeights = ref<Array<number>>([])\n\n    const listRef = ref<FixedSizeListInstance | DynamicSizeListInstance>()\n\n    const size = computed(() => props.data.length)\n    watch(\n      () => size.value,\n      () => {\n        select.tooltipRef.value!.updatePopper?.()\n      }\n    )\n\n    const isSized = computed(() =>\n      isUndefined(select.props.estimatedOptionHeight)\n    )\n    const listProps = computed(() => {\n      if (isSized.value) {\n        return {\n          itemSize: select.props.itemHeight,\n        }\n      }\n\n      return {\n        estimatedSize: select.props.estimatedOptionHeight,\n        itemSize: (idx: number) => cachedHeights.value[idx],\n      }\n    })\n\n    const contains = (arr: Array<any> = [], target: any) => {\n      const {\n        props: { valueKey },\n      } = select\n\n      if (!isObject(target)) {\n        return arr.includes(target)\n      }\n\n      return (\n        arr &&\n        arr.some((item) => {\n          return toRaw(get(item, valueKey)) === get(target, valueKey)\n        })\n      )\n    }\n    const isEqual = (selected: unknown, target: unknown) => {\n      if (!isObject(target)) {\n        return selected === target\n      } else {\n        const { valueKey } = select.props\n        return get(selected, valueKey) === get(target, valueKey)\n      }\n    }\n\n    const isItemSelected: SelectDropdownExposed['isItemSelected'] = (\n      modelValue,\n      target\n    ) => {\n      if (select.props.multiple) {\n        return contains(modelValue, getValue(target))\n      }\n      return isEqual(modelValue, getValue(target))\n    }\n\n    const isItemDisabled: SelectDropdownExposed['isItemDisabled'] = (\n      modelValue,\n      selected\n    ) => {\n      const { disabled, multiple, multipleLimit } = select.props\n      return (\n        disabled ||\n        (!selected &&\n          (multiple\n            ? multipleLimit > 0 && modelValue.length >= multipleLimit\n            : false))\n      )\n    }\n\n    const isItemHovering: SelectDropdownExposed['isItemHovering'] = (target) =>\n      props.hoveringIndex === target\n\n    const scrollToItem: SelectDropdownExposed['scrollToItem'] = (index) => {\n      const list = listRef.value\n      if (list) {\n        list.scrollToItem(index)\n      }\n    }\n\n    const resetScrollTop: SelectDropdownExposed['resetScrollTop'] = () => {\n      const list = listRef.value\n      if (list) {\n        list.resetScrollTop()\n      }\n    }\n    const exposed: SelectDropdownExposed = {\n      listRef,\n      isSized,\n\n      isItemDisabled,\n      isItemHovering,\n      isItemSelected,\n      scrollToItem,\n      resetScrollTop,\n    }\n    expose(exposed)\n\n    const Item = (itemProps: ItemProps<any>) => {\n      const { index, data, style } = itemProps\n      const sized = unref(isSized)\n      const { itemSize, estimatedSize } = unref(listProps)\n      const { modelValue } = select.props\n      const { onSelect, onHover } = select\n      const item = data[index]\n      if (item.type === 'Group') {\n        return (\n          <GroupItem\n            item={item}\n            style={style}\n            height={sized ? (itemSize as number) : estimatedSize}\n          />\n        )\n      }\n\n      const isSelected = isItemSelected(modelValue, item)\n      const isDisabled = isItemDisabled(modelValue, isSelected)\n      const isHovering = isItemHovering(index)\n      return (\n        <OptionItem\n          {...itemProps}\n          selected={isSelected}\n          disabled={getDisabled(item) || isDisabled}\n          created={!!item.created}\n          hovering={isHovering}\n          item={item}\n          onSelect={onSelect}\n          onHover={onHover}\n        >\n          {{\n            default: (props: OptionItemProps) =>\n              slots.default?.(props) || <span>{getLabel(item)}</span>,\n          }}\n        </OptionItem>\n      )\n    }\n\n    // computed\n    const { onKeyboardNavigate, onKeyboardSelect } = select\n\n    const onForward = () => {\n      onKeyboardNavigate('forward')\n    }\n\n    const onBackward = () => {\n      onKeyboardNavigate('backward')\n    }\n\n    const onEscOrTab = () => {\n      // The following line actually doesn't work. Fixing it may introduce a small breaking change for some users, so just comment it out for now.\n      // select.expanded = false\n    }\n\n    const onKeydown = (e: KeyboardEvent) => {\n      const { code } = e\n      const { tab, esc, down, up, enter, numpadEnter } = EVENT_CODE\n      if ([esc, down, up, enter, numpadEnter].includes(code)) {\n        e.preventDefault()\n        e.stopPropagation()\n      }\n\n      switch (code) {\n        case tab:\n        case esc:\n          onEscOrTab()\n          break\n        case down:\n          onForward()\n          break\n        case up:\n          onBackward()\n          break\n        case enter:\n        case numpadEnter:\n          onKeyboardSelect()\n          break\n      }\n    }\n\n    return () => {\n      const { data, width } = props\n      const { height, multiple, scrollbarAlwaysOn } = select.props\n\n      const List = unref(isSized) ? FixedSizeList : DynamicSizeList\n\n      return (\n        <div\n          class={[ns.b('dropdown'), ns.is('multiple', multiple)]}\n          style={{\n            width: `${width}px`,\n          }}\n        >\n          {slots.header?.()}\n          {slots.loading?.() || slots.empty?.() || (\n            <List\n              ref={listRef}\n              {...unref(listProps)}\n              className={ns.be('dropdown', 'list')}\n              scrollbarAlwaysOn={scrollbarAlwaysOn}\n              data={data}\n              height={height}\n              width={width}\n              total={data.length}\n              // @ts-ignore - dts problem\n              onKeydown={onKeydown}\n            >\n              {{\n                default: (props: ItemProps<any>) => <Item {...props} />,\n              }}\n            </List>\n          )}\n          {slots.footer?.()}\n        </div>\n      )\n    }\n  },\n})\n"],"names":["props","loading","Boolean","data","type","Array","required","hoveringIndex","Number","width","defineComponent","name","slots","expose","inject","selectV2InjectionKey","select","useNamespace","ns","getLabel","getValue","getDisabled","cachedHeights","ref","listRef","computed","watch","size","tooltipRef","value","isSized","isUndefined","estimatedOptionHeight","listProps","itemSize","itemHeight","estimatedSize","contains","valueKey","isObject","target","arr","get","item","isEqual","selected","isItemSelected","modelValue","isItemDisabled","multipleLimit","isItemHovering","scrollToItem","resetScrollTop","list","unref","Item","itemProps","style","_createVNode","GroupItem","OptionItem","_mergeProps","onSelect","onHover","sized","onKeyboardSelect","onForward","EVENT_CODE","onBackward","onEscOrTab","onKeydown","code","esc","down","numpadEnter","up","e"],"mappings":"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"}

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

@@ -101,7 +101,7 @@ declare const _default: import("vue").DefineComponent<{
     emptyText: import("vue").ComputedRef<string | false | null>;
     popupHeight: import("vue").ComputedRef<number>;
     debounce: import("vue").ComputedRef<0 | 300>;
-    allOptions: import("vue").Ref<import("./select.types").OptionType[]>;
+    allOptions: import("vue").ComputedRef<import("./select.types").OptionType[]>;
     filteredOptions: import("vue").Ref<import("./select.types").OptionType[]>;
     iconComponent: import("vue").ComputedRef<any>;
     iconReverse: import("vue").ComputedRef<any>;

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

@@ -13,7 +13,7 @@ type useSelectReturnType = (props: ISelectV2Props, emit: SelectEmitFn) => {
     emptyText: ComputedRef<string | false | null>;
     popupHeight: ComputedRef<number>;
     debounce: ComputedRef<0 | 300>;
-    allOptions: Ref<OptionType[]>;
+    allOptions: ComputedRef<OptionType[]>;
     filteredOptions: Ref<OptionType[]>;
     iconComponent: ComputedRef<any>;
     iconReverse: ComputedRef<any>;

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

@@ -16,12 +16,12 @@ var index$3 = require('../../../hooks/use-composition/index.js');
 var index$4 = require('../../../hooks/use-focus-controller/index.js');
 var shared = require('@vue/shared');
 var icon = require('../../../utils/vue/icon.js');
+var strings = require('../../../utils/strings.js');
 var useFormCommonProps = require('../../form/src/hooks/use-form-common-props.js');
 var aria = require('../../../constants/aria.js');
 var error = require('../../../utils/error.js');
 var types = require('../../../utils/types.js');
 var event = require('../../../constants/event.js');
-var strings = require('../../../utils/strings.js');
 
 const useSelect = (props, emit) => {
   const { t } = index.useLocale();
@@ -85,7 +85,12 @@ const useSelect = (props, emit) => {
       states.menuVisibleOnFocus = false;
     }
   });
-  const allOptions = vue.ref([]);
+  const allOptions = vue.computed(() => filterOptions(""));
+  const hasOptions = vue.computed(() => {
+    if (props.loading)
+      return false;
+    return props.options.length > 0 || states.createdOptions.length > 0;
+  });
   const filteredOptions = vue.ref([]);
   const expanded = vue.ref(false);
   const selectDisabled = vue.computed(() => props.disabled || (elForm == null ? void 0 : elForm.disabled));
@@ -116,24 +121,24 @@ const useSelect = (props, emit) => {
     if (props.loading) {
       return props.loadingText || t("el.select.loading");
     } else {
-      if (props.remote && !states.inputValue && allOptions.value.length === 0)
+      if (props.remote && !states.inputValue && !hasOptions.value)
         return false;
-      if (props.filterable && states.inputValue && allOptions.value.length > 0 && filteredOptions.value.length === 0) {
+      if (props.filterable && states.inputValue && hasOptions.value && filteredOptions.value.length === 0) {
         return props.noMatchText || t("el.select.noMatch");
       }
-      if (allOptions.value.length === 0) {
+      if (!hasOptions.value) {
         return props.noDataText || t("el.select.noData");
       }
     }
     return null;
   });
   const filterOptions = (query) => {
+    const regexp = new RegExp(strings.escapeStringRegexp(query), "i");
+    const isFilterMethodValid = props.filterable && shared.isFunction(props.filterMethod);
+    const isRemoteMethodValid = props.filterable && props.remote && shared.isFunction(props.remoteMethod);
     const isValidOption = (o) => {
-      if (props.filterable && shared.isFunction(props.filterMethod))
-        return true;
-      if (props.filterable && props.remote && shared.isFunction(props.remoteMethod))
+      if (isFilterMethodValid || isRemoteMethodValid)
         return true;
-      const regexp = new RegExp(strings.escapeStringRegexp(query), "i");
       return query ? regexp.test(getLabel(o) || "") : true;
     };
     if (props.loading) {
@@ -156,7 +161,6 @@ const useSelect = (props, emit) => {
     }, []);
   };
   const updateOptions = () => {
-    allOptions.value = filterOptions("");
     filteredOptions.value = filterOptions(states.inputValue);
   };
   const allOptionsValueMap = vue.computed(() => {
@@ -183,7 +187,7 @@ const useSelect = (props, emit) => {
       return;
     }
     const width = ((_a = selectRef.value) == null ? void 0 : _a.offsetWidth) || 200;
-    if (!props.fitInputWidth && allOptions.value.length > 0) {
+    if (!props.fitInputWidth && hasOptions.value) {
       vue.nextTick(() => {
         popperSize.value = Math.max(width, calculateLabelMaxWidth());
       });