element-plus 2.6.2 → 2.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"thumb2.mjs","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isClient, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { scrollbarContextKey } from './constants'\nimport { BAR_MAP, renderThumbStyle } from './util'\nimport { thumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nconst props = defineProps(thumbProps)\n\nconst scrollbar = inject(scrollbarContextKey)\nconst ns = useNamespace('scrollbar')\n\nif (!scrollbar) throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\nconst instance = ref<HTMLDivElement>()\nconst thumb = ref<HTMLDivElement>()\n\nconst thumbState = ref<Partial<Record<'X' | 'Y', number>>>({})\nconst visible = ref(false)\n\nlet cursorDown = false\nlet cursorLeave = false\nlet originalOnSelectStart:\n  | ((this: GlobalEventHandlers, ev: Event) => any)\n  | null = isClient ? document.onselectstart : null\n\nconst bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])\n\nconst thumbStyle = computed(() =>\n  renderThumbStyle({\n    size: props.size,\n    move: props.move,\n    bar: bar.value,\n  })\n)\n\nconst offsetRatio = computed(\n  () =>\n    // offsetRatioX = original width of thumb / current width of thumb / ratioX\n    // offsetRatioY = original height of thumb / current height of thumb / ratioY\n    // instance height = wrap height - GAP\n    instance.value![bar.value.offset] ** 2 /\n    scrollbar.wrapElement![bar.value.scrollSize] /\n    props.ratio /\n    thumb.value![bar.value.offset]\n)\n\nconst clickThumbHandler = (e: MouseEvent) => {\n  // prevent click event of middle and right button\n  e.stopPropagation()\n  if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n  window.getSelection()?.removeAllRanges()\n  startDrag(e)\n\n  const el = e.currentTarget as HTMLDivElement\n  if (!el) return\n  thumbState.value[bar.value.axis] =\n    el[bar.value.offset] -\n    (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n}\n\nconst clickTrackHandler = (e: MouseEvent) => {\n  if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n  const offset = Math.abs(\n    (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n      e[bar.value.client]\n  )\n  const thumbHalf = thumb.value[bar.value.offset] / 2\n  const thumbPositionPercentage =\n    ((offset - thumbHalf) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n}\n\nconst startDrag = (e: MouseEvent) => {\n  e.stopImmediatePropagation()\n  cursorDown = true\n  document.addEventListener('mousemove', mouseMoveDocumentHandler)\n  document.addEventListener('mouseup', mouseUpDocumentHandler)\n  originalOnSelectStart = document.onselectstart\n  document.onselectstart = () => false\n}\n\nconst mouseMoveDocumentHandler = (e: MouseEvent) => {\n  if (!instance.value || !thumb.value) return\n  if (cursorDown === false) return\n\n  const prevPage = thumbState.value[bar.value.axis]\n  if (!prevPage) return\n\n  const offset =\n    (instance.value.getBoundingClientRect()[bar.value.direction] -\n      e[bar.value.client]) *\n    -1\n  const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n  const thumbPositionPercentage =\n    ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n}\n\nconst mouseUpDocumentHandler = () => {\n  cursorDown = false\n  thumbState.value[bar.value.axis] = 0\n  document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n  document.removeEventListener('mouseup', mouseUpDocumentHandler)\n  restoreOnselectstart()\n  if (cursorLeave) visible.value = false\n}\n\nconst mouseMoveScrollbarHandler = () => {\n  cursorLeave = false\n  visible.value = !!props.size\n}\n\nconst mouseLeaveScrollbarHandler = () => {\n  cursorLeave = true\n  visible.value = cursorDown\n}\n\nonBeforeUnmount(() => {\n  restoreOnselectstart()\n  document.removeEventListener('mouseup', mouseUpDocumentHandler)\n})\n\nconst restoreOnselectstart = () => {\n  if (document.onselectstart !== originalOnSelectStart)\n    document.onselectstart = originalOnSelectStart\n}\n\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mousemove',\n  mouseMoveScrollbarHandler\n)\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mouseleave',\n  mouseLeaveScrollbarHandler\n)\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thumb2.mjs","sources":["../../../../../../packages/components/scrollbar/src/thumb.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type Thumb from './thumb.vue'\n\nexport const thumbProps = buildProps({\n  vertical: Boolean,\n  size: String,\n  move: Number,\n  ratio: {\n    type: Number,\n    required: true,\n  },\n  always: Boolean,\n} as const)\nexport type ThumbProps = ExtractPropTypes<typeof thumbProps>\n\nexport type ThumbInstance = InstanceType<typeof Thumb>\n"],"names":[],"mappings":";;;AACY,MAAC,UAAU,GAAG,UAAU,CAAC;AACrC,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,CAAC;;;;"}

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

@@ -0,0 +1,115 @@
+export declare const ElSegmented: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+    options: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./src/types").Option[]) | (() => import("./src/types").Option[]) | ((new (...args: any[]) => import("./src/types").Option[]) | (() => import("./src/types").Option[]))[], unknown, unknown, () => never[], boolean>;
+    modelValue: import("element-plus/es/utils").EpPropFinalized<(NumberConstructor | BooleanConstructor | StringConstructor)[], unknown, unknown, undefined, boolean>;
+    block: BooleanConstructor;
+    size: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    disabled: BooleanConstructor;
+    validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
+    id: StringConstructor;
+    name: StringConstructor;
+    ariaLabel: StringConstructor;
+}, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        options: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./src/types").Option[]) | (() => import("./src/types").Option[]) | ((new (...args: any[]) => import("./src/types").Option[]) | (() => import("./src/types").Option[]))[], unknown, unknown, () => never[], boolean>;
+        modelValue: import("element-plus/es/utils").EpPropFinalized<(NumberConstructor | BooleanConstructor | StringConstructor)[], unknown, unknown, undefined, boolean>;
+        block: BooleanConstructor;
+        size: {
+            readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+        disabled: BooleanConstructor;
+        validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
+        id: StringConstructor;
+        name: StringConstructor;
+        ariaLabel: StringConstructor;
+    }>> & {
+        onChange?: ((val: any) => any) | undefined;
+        "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+    }>>;
+    emit: ((event: "update:modelValue", val: any) => void) & ((event: "change", val: any) => void);
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: {
+            (name: string, state: boolean | undefined): string;
+            (name: string): string;
+        };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
+    };
+    segmentedId: import("vue").Ref<string>;
+    segmentedSize: import("vue").ComputedRef<"" | "default" | "small" | "large">;
+    _disabled: import("vue").ComputedRef<boolean>;
+    formItem: import("..").FormItemContext | undefined;
+    inputId: import("vue").Ref<string | undefined>;
+    isLabeledByFormItem: import("vue").ComputedRef<boolean>;
+    segmentedRef: import("vue").Ref<HTMLElement | null>;
+    activeElement: import("vue").ComputedRef<HTMLElement | null | undefined>;
+    state: {
+        isInit: boolean;
+        width: number;
+        translateX: number;
+        disabled: boolean;
+        focusVisible: boolean;
+    };
+    handleChange: (item: import("./src/types").Option) => void;
+    getValue: (item: import("./src/types").Option) => string | number | boolean | undefined;
+    getLabel: (item: import("./src/types").Option) => string | number | boolean | undefined;
+    getDisabled: (item: import("./src/types").Option) => boolean;
+    getSelected: (item: import("./src/types").Option) => boolean;
+    getOption: (value: any) => import("./src/types").Option;
+    getItemCls: (item: import("./src/types").Option) => string[];
+    updateSelect: () => void;
+    segmentedCls: import("vue").ComputedRef<string[]>;
+    selectedStyle: import("vue").ComputedRef<{
+        width: string;
+        transform: string;
+        display: string;
+    }>;
+    selectedCls: import("vue").ComputedRef<string[]>;
+    name: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: any) => boolean;
+    change: (val: any) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    options: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("./src/types").Option[]) | (() => import("./src/types").Option[]) | ((new (...args: any[]) => import("./src/types").Option[]) | (() => import("./src/types").Option[]))[], unknown, unknown, () => never[], boolean>;
+    modelValue: import("element-plus/es/utils").EpPropFinalized<(NumberConstructor | BooleanConstructor | StringConstructor)[], unknown, unknown, undefined, boolean>;
+    block: BooleanConstructor;
+    size: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    disabled: BooleanConstructor;
+    validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
+    id: StringConstructor;
+    name: StringConstructor;
+    ariaLabel: StringConstructor;
+}>> & {
+    onChange?: ((val: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+}, {
+    modelValue: import("element-plus/es/utils").EpPropMergeType<(NumberConstructor | BooleanConstructor | StringConstructor)[], unknown, unknown>;
+    disabled: boolean;
+    validateEvent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    block: boolean;
+    options: import("./src/types").Option[];
+}>> & Record<string, any>;
+export default ElSegmented;
+export * from './src/segmented';

package/es/components/segmented/index.mjs

@@ -0,0 +1,9 @@
+import '../../utils/index.mjs';
+import Segmented from './src/segmented.mjs';
+export { segmentedEmits, segmentedProps } from './src/segmented2.mjs';
+import { withInstall } from '../../utils/vue/install.mjs';
+
+const ElSegmented = withInstall(Segmented);
+
+export { ElSegmented, ElSegmented as default };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/segmented/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Segmented from './src/segmented.vue'\n\nexport const ElSegmented = withInstall(Segmented)\nexport default ElSegmented\n\nexport * from './src/segmented'\n"],"names":[],"mappings":";;;;;AAEY,MAAC,WAAW,GAAG,WAAW,CAAC,SAAS;;;;"}

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

@@ -0,0 +1,26 @@
+import type { Option } from './types';
+import type { ExtractPropTypes } from 'vue';
+import type Segmented from './segmented.vue';
+export declare const segmentedProps: {
+    options: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Option[]) | (() => Option[]) | ((new (...args: any[]) => Option[]) | (() => Option[]))[], unknown, unknown, () => never[], boolean>;
+    modelValue: import("element-plus/es/utils").EpPropFinalized<(NumberConstructor | BooleanConstructor | StringConstructor)[], unknown, unknown, undefined, boolean>;
+    block: BooleanConstructor;
+    size: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    disabled: BooleanConstructor;
+    validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
+    id: StringConstructor;
+    name: StringConstructor;
+    ariaLabel: StringConstructor;
+};
+export declare type SegmentedProps = ExtractPropTypes<typeof segmentedProps>;
+export declare const segmentedEmits: {
+    "update:modelValue": (val: any) => boolean;
+    change: (val: any) => boolean;
+};
+export declare type SegmentedEmits = typeof segmentedEmits;
+export declare type SegmentedInstance = InstanceType<typeof Segmented>;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.mjs","sources":["../../../../../../packages/components/segmented/src/segmented.vue"],"sourcesContent":["<template>\n  <div\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')\">\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  translateX: 0,\n  disabled: false,\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) => {\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.translateX = 0\n    state.disabled = false\n    state.focusVisible = false\n    return\n  }\n  const rect = selectedItem.getBoundingClientRect()\n  state.isInit = true\n  state.width = rect.width\n  state.translateX = selectedItem.offsetLeft\n  state.disabled = getDisabled(getOption(props.modelValue))\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: `${state.width}px`,\n  transform: `translateX(${state.translateX}px)`,\n  display: state.isInit ? 'block' : 'none',\n}))\n\nconst selectedCls = computed(() => [\n  ns.e('item-selected'),\n  ns.is('disabled', state.disabled),\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":[],"mappings":"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"}

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

@@ -0,0 +1,115 @@
+import type { Option } from './types';
+declare const _default: import("vue").DefineComponent<{
+    options: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Option[]) | (() => Option[]) | ((new (...args: any[]) => Option[]) | (() => Option[]))[], unknown, unknown, () => never[], boolean>;
+    modelValue: import("element-plus/es/utils").EpPropFinalized<(NumberConstructor | BooleanConstructor | StringConstructor)[], unknown, unknown, undefined, boolean>;
+    block: BooleanConstructor;
+    size: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    disabled: BooleanConstructor;
+    validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
+    id: StringConstructor;
+    name: StringConstructor;
+    ariaLabel: StringConstructor;
+}, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        options: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Option[]) | (() => Option[]) | ((new (...args: any[]) => Option[]) | (() => Option[]))[], unknown, unknown, () => never[], boolean>;
+        modelValue: import("element-plus/es/utils").EpPropFinalized<(NumberConstructor | BooleanConstructor | StringConstructor)[], unknown, unknown, undefined, boolean>;
+        block: BooleanConstructor;
+        size: {
+            readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+        disabled: BooleanConstructor;
+        validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
+        id: StringConstructor;
+        name: StringConstructor;
+        ariaLabel: StringConstructor;
+    }>> & {
+        onChange?: ((val: any) => any) | undefined;
+        "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+    }>>;
+    emit: ((event: "update:modelValue", val: any) => void) & ((event: "change", val: any) => void);
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: {
+            (name: string, state: boolean | undefined): string;
+            (name: string): string;
+        };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
+    };
+    segmentedId: import("vue").Ref<string>;
+    segmentedSize: import("vue").ComputedRef<"" | "default" | "small" | "large">;
+    _disabled: import("vue").ComputedRef<boolean>;
+    formItem: import("element-plus/es/components/form").FormItemContext | undefined;
+    inputId: import("vue").Ref<string | undefined>;
+    isLabeledByFormItem: import("vue").ComputedRef<boolean>;
+    segmentedRef: import("vue").Ref<HTMLElement | null>;
+    activeElement: import("vue").ComputedRef<HTMLElement | null | undefined>;
+    state: {
+        isInit: boolean;
+        width: number;
+        translateX: number;
+        disabled: boolean;
+        focusVisible: boolean;
+    };
+    handleChange: (item: Option) => void;
+    getValue: (item: Option) => string | number | boolean | undefined;
+    getLabel: (item: Option) => string | number | boolean | undefined;
+    getDisabled: (item: Option) => boolean;
+    getSelected: (item: Option) => boolean;
+    getOption: (value: any) => Option;
+    getItemCls: (item: Option) => string[];
+    updateSelect: () => void;
+    segmentedCls: import("vue").ComputedRef<string[]>;
+    selectedStyle: import("vue").ComputedRef<{
+        width: string;
+        transform: string;
+        display: string;
+    }>;
+    selectedCls: import("vue").ComputedRef<string[]>;
+    name: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: any) => boolean;
+    change: (val: any) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    options: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Option[]) | (() => Option[]) | ((new (...args: any[]) => Option[]) | (() => Option[]))[], unknown, unknown, () => never[], boolean>;
+    modelValue: import("element-plus/es/utils").EpPropFinalized<(NumberConstructor | BooleanConstructor | StringConstructor)[], unknown, unknown, undefined, boolean>;
+    block: BooleanConstructor;
+    size: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    disabled: BooleanConstructor;
+    validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
+    id: StringConstructor;
+    name: StringConstructor;
+    ariaLabel: StringConstructor;
+}>> & {
+    onChange?: ((val: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+}, {
+    modelValue: import("element-plus/es/utils").EpPropMergeType<(NumberConstructor | BooleanConstructor | StringConstructor)[], unknown, unknown>;
+    disabled: boolean;
+    validateEvent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    block: boolean;
+    options: Option[];
+}>;
+export default _default;

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

@@ -0,0 +1,36 @@
+import '../../../utils/index.mjs';
+import '../../../hooks/index.mjs';
+import '../../../constants/index.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { useSizeProp } from '../../../hooks/use-size/index.mjs';
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
+import { isString } from '@vue/shared';
+import { isNumber } from '../../../utils/types.mjs';
+
+const segmentedProps = buildProps({
+  options: {
+    type: definePropType(Array),
+    default: () => []
+  },
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  block: Boolean,
+  size: useSizeProp,
+  disabled: Boolean,
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  id: String,
+  name: String,
+  ariaLabel: String
+});
+const segmentedEmits = {
+  [UPDATE_MODEL_EVENT]: (val) => isString(val) || isNumber(val),
+  [CHANGE_EVENT]: (val) => isString(val) || isNumber(val)
+};
+
+export { segmentedEmits, segmentedProps };
+//# sourceMappingURL=segmented2.mjs.map

package/es/components/segmented/src/segmented2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented2.mjs","sources":["../../../../../../packages/components/segmented/src/segmented.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isNumber,\n  isString,\n} from '@element-plus/utils'\nimport { 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  /**\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  /**\n   * @description native `aria-label` attribute\n   */\n  ariaLabel: String,\n})\n\nexport type SegmentedProps = ExtractPropTypes<typeof segmentedProps>\n\nexport const segmentedEmits = {\n  [UPDATE_MODEL_EVENT]: (val: any) => isString(val) || isNumber(val),\n  [CHANGE_EVENT]: (val: any) => isString(val) || isNumber(val),\n}\nexport type SegmentedEmits = typeof segmentedEmits\n\nexport type SegmentedInstance = InstanceType<typeof Segmented>\n"],"names":[],"mappings":";;;;;;;;;AAQY,MAAC,cAAc,GAAG,UAAU,CAAC;AACzC,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,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,EAAE,WAAW;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,SAAS,EAAE,MAAM;AACnB,CAAC,EAAE;AACS,MAAC,cAAc,GAAG;AAC9B,EAAE,CAAC,kBAAkB,GAAG,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC;AAC/D,EAAE,CAAC,YAAY,GAAG,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC;AACzD;;;;"}

package/es/components/segmented/src/types.d.ts

@@ -0,0 +1,6 @@
+export declare type Option = {
+    label: string;
+    value: string | number | boolean;
+    disabled?: boolean;
+    [key: string]: any;
+} | string | number | boolean | undefined;

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

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.mjs.map

package/es/components/segmented/src/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/es/components/segmented/style/css.d.ts

@@ -0,0 +1,2 @@
+import 'element-plus/es/components/base/style/css';
+import 'element-plus/theme-chalk/el-segmented.css';

package/es/components/segmented/style/css.mjs

@@ -0,0 +1,3 @@
+import '../../base/style/css.mjs';
+import 'element-plus/theme-chalk/el-segmented.css';
+//# sourceMappingURL=css.mjs.map

package/es/components/segmented/style/css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/components/segmented/style/index.d.ts

@@ -0,0 +1,2 @@
+import 'element-plus/es/components/base/style';
+import 'element-plus/theme-chalk/src/segmented.scss';

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

@@ -0,0 +1,3 @@
+import '../../base/style/index.mjs';
+import 'element-plus/theme-chalk/src/segmented.scss';
+//# sourceMappingURL=index.mjs.map

package/es/components/segmented/style/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}