@element-plus/nightly 0.0.20260315 → 0.0.20260316

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

@@ -5,76 +5,44 @@ import "../../index.js";
 import * as vue from "vue";
 
 //#region ../../packages/components/segmented/index.d.ts
-declare const ElSegmented: {
-  new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<SegmentedProps> & Readonly<{
-    onChange?: ((val: any) => any) | undefined;
-    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-  }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    change: (val: any) => void;
-    "update:modelValue": (val: any) => void;
-  }, vue.PublicProps, {
-    props: Props;
-    modelValue: string | number | boolean;
-    disabled: boolean;
-    validateEvent: boolean;
-    direction: "vertical" | "horizontal";
-    options: Option[];
-  }, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
-    P: {};
-    B: {};
-    D: {};
-    C: {};
-    M: {};
-    Defaults: {};
-  }, Readonly<SegmentedProps> & Readonly<{
+declare const ElSegmented: (<T extends Option = Option>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
+  slots: {
+    default?: (props: {
+      item: T;
+    }) => any;
+  };
+  emit: ((event: "change", val: any) => void) & ((event: "update:modelValue", val: any) => void);
+  attrs: any;
+}, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: vue.PublicProps & {
+    direction?: ("vertical" | "horizontal") | undefined;
+    options?: T[] | undefined;
+    modelValue?: (string | number | boolean) | undefined;
+    props?: Props | undefined;
+    block?: boolean | undefined;
+    size?: ComponentSize | undefined;
+    disabled?: boolean | undefined;
+    validateEvent?: boolean | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    ariaLabel?: string | undefined;
     onChange?: ((val: any) => any) | undefined;
     "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-  }>, {}, {}, {}, {}, {
-    props: Props;
-    modelValue: string | number | boolean;
-    disabled: boolean;
-    validateEvent: boolean;
-    direction: "vertical" | "horizontal";
-    options: Option[];
-  }>;
-  __isFragment?: never;
-  __isTeleport?: never;
-  __isSuspense?: never;
-} & vue.ComponentOptionsBase<Readonly<SegmentedProps> & Readonly<{
-  onChange?: ((val: any) => any) | undefined;
-  "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  change: (val: any) => void;
-  "update:modelValue": (val: any) => void;
-}, string, {
-  props: Props;
-  modelValue: string | number | boolean;
-  disabled: boolean;
-  validateEvent: boolean;
-  direction: "vertical" | "horizontal";
-  options: Option[];
-}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
-  $slots: {
+  } & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: {
     default?: (props: {
-      item: any;
+      item: T;
     }) => any;
   };
-}) & vue.ObjectPlugin & {
-  setPropsDefaults: (defaults: Partial<{
-    readonly direction?: ("vertical" | "horizontal") | undefined;
-    readonly options?: Option[] | undefined;
-    readonly modelValue?: (string | number | boolean) | undefined;
-    readonly props?: Props | undefined;
-    readonly block?: boolean | undefined;
-    readonly size?: ComponentSize | undefined;
-    readonly disabled?: boolean | undefined;
-    readonly validateEvent?: boolean | undefined;
-    readonly id?: string | undefined;
-    readonly name?: string | undefined;
-    readonly ariaLabel?: string | undefined;
-    readonly onChange?: ((val: any) => any) | undefined;
-    readonly "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-  } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps>) => void;
-} & Record<string, any>;
+  emit: ((event: "change", val: any) => void) & ((event: "update:modelValue", val: any) => void);
+}>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+  [key: string]: any;
+}> & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+}) & vue.ObjectPlugin & Record<string, any>;
 //#endregion
 export { ElSegmented, ElSegmented as default, Props, SegmentedEmits, SegmentedInstance, SegmentedProps, SegmentedPropsPublic, defaultProps, segmentedEmits, segmentedProps };

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

@@ -4,7 +4,8 @@ import "../../../utils/index.js";
 import { Option } from "./types.js";
 import { _default } from "./segmented.vue.js";
 import * as vue from "vue";
-import { ExtractPublicPropTypes } from "vue";
+import { ComponentInstance, ExtractPublicPropTypes } from "vue";
+import { ComponentExposed } from "vue-component-type-helpers";
 
 //#region ../../packages/components/segmented/src/segmented.d.ts
 interface Props {
@@ -13,12 +14,12 @@ interface Props {
   disabled?: string;
 }
 declare const defaultProps: Required<Props>;
-interface SegmentedProps {
+interface SegmentedProps<T extends Option = Option> {
   direction?: 'vertical' | 'horizontal';
   /**
    * @description options of segmented
    */
-  options?: Option[];
+  options?: T[];
   /**
    * @description binding value
    */
@@ -86,6 +87,6 @@ declare const segmentedEmits: {
   change: (val: any) => val is string | number | boolean;
 };
 type SegmentedEmits = typeof segmentedEmits;
-type SegmentedInstance = InstanceType<typeof _default> & unknown;
+type SegmentedInstance = ComponentInstance<typeof _default> & ComponentExposed<typeof _default>;
 //#endregion
 export { Props, SegmentedEmits, SegmentedInstance, SegmentedProps, SegmentedPropsPublic, defaultProps, segmentedEmits, segmentedProps };

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

@@ -1 +1 @@
-{"version":3,"file":"segmented.mjs","names":[],"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 { ExtractPublicPropTypes } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type Segmented from './segmented.vue'\n\nexport interface Props {\n  label?: string\n  value?: string\n  disabled?: string\n}\n\nexport const defaultProps: Required<Props> = {\n  label: 'label',\n  value: 'value',\n  disabled: 'disabled',\n}\n\nexport interface SegmentedProps {\n  direction?: 'vertical' | 'horizontal'\n  /**\n   * @description options of segmented\n   */\n  options?: Option[]\n  /**\n   * @description binding value\n   */\n  modelValue?: string | number | boolean\n  /**\n   * @description configuration options, see the following table\n   */\n  props?: Props\n  /**\n   * @description fit width of parent content\n   */\n  block?: boolean\n  /**\n   * @description size of component\n   */\n  size?: ComponentSize\n  /**\n   * @description whether segmented is disabled\n   */\n  disabled?: boolean\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\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\n/**\n * @deprecated Removed after 3.0.0, Use `SegmentedProps` instead.\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 configuration options, see the following table\n   */\n  props: {\n    type: definePropType<Props>(Object),\n    default: () => defaultProps,\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: {\n    type: Boolean,\n    default: undefined,\n  },\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\n/**\n * @deprecated Removed after 3.0.0, Use `SegmentedProps` instead.\n */\nexport type SegmentedPropsPublic = ExtractPublicPropTypes<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> & unknown\n"],"mappings":";;;;;;;AAqBA,MAAa,eAAgC;CAC3C,OAAO;CACP,OAAO;CACP,UAAU;CACX;;;;AAiDD,MAAa,iBAAiB,WAAW;CACvC,WAAW;EACT,MAAM,eAA0C,OAAO;EACvD,SAAS;EACV;CAID,SAAS;EACP,MAAM,eAAyB,MAAM;EACrC,eAAe,EAAE;EAClB;CAID,YAAY;EACV,MAAM;GAAC;GAAQ;GAAQ;GAAQ;EAC/B,SAAS;EACV;CAID,OAAO;EACL,MAAM,eAAsB,OAAO;EACnC,eAAe;EAChB;CAID,OAAO;CAIP,MAAM;CAIN,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,IAAI;CAIJ,MAAM;CACN,GAAG,aAAa,CAAC,YAAY,CAAC;CAC/B,CAAC;AAOF,MAAa,iBAAiB;EAC3B,sBAAsB,QACrB,SAAS,IAAI,IAAI,SAAS,IAAI,IAAI,UAAU,IAAI;EACjD,gBAAgB,QACf,SAAS,IAAI,IAAI,SAAS,IAAI,IAAI,UAAU,IAAI;CACnD"}
+{"version":3,"file":"segmented.mjs","names":[],"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 { ComponentInstance, ExtractPublicPropTypes } from 'vue'\nimport type { ComponentExposed } from 'vue-component-type-helpers'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type Segmented from './segmented.vue'\n\nexport interface Props {\n  label?: string\n  value?: string\n  disabled?: string\n}\n\nexport const defaultProps: Required<Props> = {\n  label: 'label',\n  value: 'value',\n  disabled: 'disabled',\n}\n\nexport interface SegmentedProps<T extends Option = Option> {\n  direction?: 'vertical' | 'horizontal'\n  /**\n   * @description options of segmented\n   */\n  options?: T[]\n  /**\n   * @description binding value\n   */\n  modelValue?: string | number | boolean\n  /**\n   * @description configuration options, see the following table\n   */\n  props?: Props\n  /**\n   * @description fit width of parent content\n   */\n  block?: boolean\n  /**\n   * @description size of component\n   */\n  size?: ComponentSize\n  /**\n   * @description whether segmented is disabled\n   */\n  disabled?: boolean\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\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\n/**\n * @deprecated Removed after 3.0.0, Use `SegmentedProps` instead.\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 configuration options, see the following table\n   */\n  props: {\n    type: definePropType<Props>(Object),\n    default: () => defaultProps,\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: {\n    type: Boolean,\n    default: undefined,\n  },\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\n/**\n * @deprecated Removed after 3.0.0, Use `SegmentedProps` instead.\n */\nexport type SegmentedPropsPublic = ExtractPublicPropTypes<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 = ComponentInstance<typeof Segmented> &\n  ComponentExposed<typeof Segmented>\n"],"mappings":";;;;;;;AAsBA,MAAa,eAAgC;CAC3C,OAAO;CACP,OAAO;CACP,UAAU;CACX;;;;AAiDD,MAAa,iBAAiB,WAAW;CACvC,WAAW;EACT,MAAM,eAA0C,OAAO;EACvD,SAAS;EACV;CAID,SAAS;EACP,MAAM,eAAyB,MAAM;EACrC,eAAe,EAAE;EAClB;CAID,YAAY;EACV,MAAM;GAAC;GAAQ;GAAQ;GAAQ;EAC/B,SAAS;EACV;CAID,OAAO;EACL,MAAM,eAAsB,OAAO;EACnC,eAAe;EAChB;CAID,OAAO;CAIP,MAAM;CAIN,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,IAAI;CAIJ,MAAM;CACN,GAAG,aAAa,CAAC,YAAY,CAAC;CAC/B,CAAC;AAOF,MAAa,iBAAiB;EAC3B,sBAAsB,QACrB,SAAS,IAAI,IAAI,SAAS,IAAI,IAAI,UAAU,IAAI;EACjD,gBAAgB,QACf,SAAS,IAAI,IAAI,SAAS,IAAI,IAAI,UAAU,IAAI;CACnD"}

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

@@ -1,34 +1,29 @@
 import { Option } from "./types.js";
-import { Props, SegmentedProps } from "./segmented.js";
+import { SegmentedProps } from "./segmented.js";
 import * as vue from "vue";
 
 //#region ../../packages/components/segmented/src/segmented.vue.d.ts
-declare var __VLS_1: {
-  item: any;
-};
-type __VLS_Slots = {} & {
-  default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: vue.DefineComponent<SegmentedProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  change: (val: any) => void;
-  "update:modelValue": (val: any) => void;
-}, string, vue.PublicProps, Readonly<SegmentedProps> & Readonly<{
-  onChange?: ((val: any) => any) | undefined;
-  "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-}>, {
-  props: Props;
-  modelValue: string | number | boolean;
-  disabled: boolean;
-  validateEvent: boolean;
-  direction: "vertical" | "horizontal";
-  options: Option[];
-}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-type __VLS_WithSlots<T, S> = T & {
-  new (): {
-    $slots: S;
+declare const __VLS_export: <T extends Option = Option>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: vue.PublicProps & __VLS_PrettifyLocal<SegmentedProps<T> & {
+    onChange?: ((val: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: {
+    default?: (props: {
+      item: T;
+    }) => any;
   };
+  emit: ((event: "change", val: any) => void) & ((event: "update:modelValue", val: any) => void);
+}>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+  [key: string]: any;
+}> & {
+  __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
 export { _default };

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

@@ -5,7 +5,7 @@ import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
 import { useId } from "../../../hooks/use-id/index.mjs";
 import { useFormDisabled, useFormSize } from "../../form/src/hooks/use-form-common-props.mjs";
 import { useFormItem, useFormItemInputId } from "../../form/src/hooks/use-form-item.mjs";
-import { defaultProps, segmentedEmits, segmentedProps } from "./segmented.mjs";
+import { defaultProps, segmentedEmits } from "./segmented.mjs";
 import { useActiveElement, useResizeObserver } from "@vueuse/core";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, reactive, ref, renderList, renderSlot, toDisplayString, unref, watch } from "vue";
 
@@ -24,7 +24,62 @@ const _hoisted_2 = [
 var segmented_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "ElSegmented",
 	__name: "segmented",
-	props: segmentedProps,
+	props: {
+		direction: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		options: {
+			type: Array,
+			required: false,
+			default: () => []
+		},
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		props: {
+			type: Object,
+			required: false,
+			default: () => defaultProps
+		},
+		block: {
+			type: Boolean,
+			required: false
+		},
+		size: {
+			type: null,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false
+		}
+	},
 	emits: segmentedEmits,
 	setup(__props, { emit: __emit }) {
 		const props = __props;
@@ -55,7 +110,6 @@ var segmented_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			...defaultProps,
 			...props.props
 		}));
-		const intoAny = (item) => item;
 		const getValue = (item) => {
 			return isObject(item) ? item[aliasProps.value.value] : item;
 		};
@@ -151,7 +205,7 @@ var segmented_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					disabled: getDisabled(item),
 					checked: getSelected(item),
 					onChange: ($event) => handleChange($event, item)
-				}, null, 42, _hoisted_2), createElementVNode("div", { class: normalizeClass(unref(ns).e("item-label")) }, [renderSlot(_ctx.$slots, "default", { item: intoAny(item) }, () => [createTextVNode(toDisplayString(getLabel(item)), 1)])], 2)], 2);
+				}, 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)) : createCommentVNode("v-if", true);
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"segmented.vue_vue_type_script_setup_true_lang.mjs","names":[],"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(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($event, item)\"\n        />\n        <div :class=\"ns.e('item-label')\">\n          <slot :item=\"intoAny(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 { defaultProps, segmentedEmits } from './segmented'\n\nimport type { Option } from './types'\nimport type { SegmentedProps } from './segmented'\n\ndefineOptions({\n  name: 'ElSegmented',\n})\n\nconst props = withDefaults(defineProps<SegmentedProps>(), {\n  direction: 'horizontal',\n  options: () => [],\n  props: () => defaultProps,\n  validateEvent: true,\n  modelValue: undefined,\n  disabled: undefined,\n})\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 = (evt: Event, item: Option) => {\n  const value = getValue(item)\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  ;(evt.target as HTMLInputElement).checked = value === props.modelValue\n}\n\nconst aliasProps = computed(() => ({ ...defaultProps, ...props.props }))\n\n//FIXME: remove this when vue >=3.3\nconst intoAny = (item: any) => item\n\nconst getValue = (item: Option) => {\n  return isObject(item) ? item[aliasProps.value.value] : item\n}\n\nconst getLabel = (item: Option) => {\n  return isObject(item) ? item[aliasProps.value.label] : item\n}\n\nconst getDisabled = (item: Option | undefined) => {\n  return !!(\n    _disabled.value ||\n    (isObject(item) ? item[aliasProps.value.disabled] : false)\n  )\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  state.isInit = true\n  if (props.direction === 'vertical') {\n    state.height = selectedItem.offsetHeight\n    state.translateY = selectedItem.offsetTop\n  } else {\n    state.width = selectedItem.offsetWidth\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"],"mappings":"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"}
+{"version":3,"file":"segmented.vue_vue_type_script_setup_true_lang.mjs","names":[],"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(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($event, 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 generic=\"T extends Option = Option\">\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 { defaultProps, segmentedEmits } from './segmented'\n\nimport type { Option } from './types'\nimport type { SegmentedProps } from './segmented'\n\ndefineOptions({\n  name: 'ElSegmented',\n})\n\nconst props = withDefaults(defineProps<SegmentedProps<T>>(), {\n  direction: 'horizontal',\n  options: () => [],\n  props: () => defaultProps,\n  validateEvent: true,\n  modelValue: undefined,\n  disabled: undefined,\n})\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 = (evt: Event, item: T) => {\n  const value = getValue(item)\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  ;(evt.target as HTMLInputElement).checked = value === props.modelValue\n}\n\nconst aliasProps = computed(() => ({ ...defaultProps, ...props.props }))\n\nconst getValue = (item: T) => {\n  return isObject(item) ? item[aliasProps.value.value] : item\n}\n\nconst getLabel = (item: T) => {\n  return isObject(item) ? item[aliasProps.value.label] : item\n}\n\nconst getDisabled = (item: T | undefined) => {\n  return !!(\n    _disabled.value ||\n    (isObject(item) ? item[aliasProps.value.disabled] : false)\n  )\n}\n\nconst getSelected = (item: T) => {\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: T) => {\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  state.isInit = true\n  if (props.direction === 'vertical') {\n    state.height = selectedItem.offsetHeight\n    state.translateY = selectedItem.offsetTop\n  } else {\n    state.width = selectedItem.offsetWidth\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDA,MAAM,QAAQ;EAQd,MAAM,OAAO;EAEb,MAAM,KAAK,aAAa,YAAW;EACnC,MAAM,cAAc,OAAM;EAC1B,MAAM,gBAAgB,aAAY;EAClC,MAAM,YAAY,iBAAgB;EAClC,MAAM,EAAE,aAAa,aAAY;EACjC,MAAM,EAAE,SAAS,wBAAwB,mBAAmB,OAAO,EACjE,iBAAiB,UAClB,CAAA;EAED,MAAM,eAAe,IAAwB,KAAI;EACjD,MAAM,gBAAgB,kBAAiB;EAEvC,MAAM,QAAQ,SAAS;GACrB,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,cAAc;GACf,CAAA;EAED,MAAM,gBAAgB,KAAY,SAAY;GAC5C,MAAM,QAAQ,SAAS,KAAI;AAC3B,QAAK,oBAAoB,MAAK;AAC9B,QAAK,cAAc,MAAK;AACvB,GAAC,IAAI,OAA4B,UAAU,UAAU,MAAM;;EAG9D,MAAM,aAAa,gBAAgB;GAAE,GAAG;GAAc,GAAG,MAAM;GAAO,EAAC;EAEvE,MAAM,YAAY,SAAY;AAC5B,UAAO,SAAS,KAAK,GAAG,KAAK,WAAW,MAAM,SAAS;;EAGzD,MAAM,YAAY,SAAY;AAC5B,UAAO,SAAS,KAAK,GAAG,KAAK,WAAW,MAAM,SAAS;;EAGzD,MAAM,eAAe,SAAwB;AAC3C,UAAO,CAAC,EACN,UAAU,UACT,SAAS,KAAK,GAAG,KAAK,WAAW,MAAM,YAAY;;EAIxD,MAAM,eAAe,SAAY;AAC/B,UAAO,MAAM,eAAe,SAAS,KAAI;;EAG3C,MAAM,aAAa,UAAe;AAChC,UAAO,MAAM,QAAQ,MAAM,SAAS,SAAS,KAAK,KAAK,MAAK;;EAG9D,MAAM,cAAc,SAAY;AAC9B,UAAO;IACL,GAAG,EAAE,OAAO;IACZ,GAAG,GAAG,YAAY,YAAY,KAAK,CAAC;IACpC,GAAG,GAAG,YAAY,YAAY,KAAK,CAAC;IACtC;;EAGF,MAAM,qBAAqB;AACzB,OAAI,CAAC,aAAa,MAAO;GACzB,MAAM,eAAe,aAAa,MAAM,cACtC,eACD;GACD,MAAM,oBAAoB,aAAa,MAAM,cAC3C,qBACD;AACD,OAAI,CAAC,gBAAgB,CAAC,mBAAmB;AACvC,UAAM,QAAQ;AACd,UAAM,SAAS;AACf,UAAM,aAAa;AACnB,UAAM,aAAa;AACnB,UAAM,eAAe;AACrB;;AAEF,SAAM,SAAS;AACf,OAAI,MAAM,cAAc,YAAY;AAClC,UAAM,SAAS,aAAa;AAC5B,UAAM,aAAa,aAAa;UAC3B;AACL,UAAM,QAAQ,aAAa;AAC3B,UAAM,aAAa,aAAa;;AAElC,OAAI;AAEF,UAAM,eAAe,kBAAkB,QAAQ,iBAAgB;WACzD;;EAGV,MAAM,eAAe,eAAe;GAClC,GAAG,GAAG;GACN,GAAG,EAAE,cAAc,MAAM;GACzB,GAAG,GAAG,SAAS,MAAM,MAAM;GAC5B,CAAA;EAED,MAAM,gBAAgB,gBAAgB;GACpC,OAAO,MAAM,cAAc,aAAa,SAAS,GAAG,MAAM,MAAM;GAChE,QAAQ,MAAM,cAAc,aAAa,GAAG,MAAM,OAAO,MAAM;GAC/D,WACE,MAAM,cAAc,aAChB,cAAc,MAAM,WAAW,OAC/B,cAAc,MAAM,WAAW;GACrC,SAAS,MAAM,SAAS,UAAU;GACnC,EAAC;EAEF,MAAM,cAAc,eAAe;GACjC,GAAG,EAAE,gBAAgB;GACrB,GAAG,GAAG,YAAY,YAAY,UAAU,MAAM,WAAW,CAAC,CAAC;GAC3D,GAAG,GAAG,iBAAiB,MAAM,aAAa;GAC3C,CAAA;EAED,MAAM,OAAO,eAAe;AAC1B,UAAO,MAAM,QAAQ,YAAY;IAClC;AAED,oBAAkB,cAAc,aAAY;AAE5C,QAAM,eAAe,aAAY;AAEjC,cACQ,MAAM,kBACN;AACJ,iBAAa;AACb,OAAI,MAAM,cACR,WAAU,WAAW,SAAS,CAAC,OAAO,QAAQ,UAAU,IAAI,CAAA;KAGhE,EACE,OAAO,QACT,CACF;;UAlMU,QAAA,QAAQ,uBADhB,mBA6BM,OAAA;;IA3BH,IAAI,MAAA,QAAO;aACR;IAAJ,KAAI;IACH,OAAK,eAAE,aAAA,MAAY;IACpB,MAAK;IACJ,cAAU,CAAG,MAAA,oBAAmB,GAAG,QAAA,aAAS,cAAkB;IAC9D,mBAAiB,MAAA,oBAAmB,GAAG,MAAA,SAAQ,CAAE,UAAU;OAE5D,mBAmBM,OAAA,EAnBA,OAAK,eAAA,CAAG,MAAA,GAAE,CAAC,EAAC,QAAA,EAAW,MAAA,GAAE,CAAC,EAAE,QAAA,UAAS,CAAA,CAAA,KACzC,mBAAmD,OAAA;IAA7C,OAAK,eAAE,cAAA,MAAa;IAAG,OAAK,eAAE,YAAA,MAAW;kCAC/C,mBAgBQ,UAAA,MAAA,WAfkB,QAAA,UAAhB,MAAM,UAAK;wBADrB,mBAgBQ,SAAA;KAdL,KAAK;KACL,OAAK,eAAE,WAAW,KAAI,CAAA;QAEvB,mBAOE,SAAA;KANC,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,aAAA,CAAA;KACZ,MAAK;KACJ,MAAM,KAAA;KACN,UAAU,YAAY,KAAI;KAC1B,SAAS,YAAY,KAAI;KACzB,WAAM,WAAE,aAAa,QAAQ,KAAI;8BAEpC,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,aAAA,CAAA,KACf,WAA8C,KAAA,QAAA,WAAA,EAAjC,MAAI,QAA6B,iCAAxB,SAAS,KAAI,CAAA,EAAA,EAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"segmented2.mjs","names":[],"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(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($event, item)\"\n        />\n        <div :class=\"ns.e('item-label')\">\n          <slot :item=\"intoAny(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 { defaultProps, segmentedEmits } from './segmented'\n\nimport type { Option } from './types'\nimport type { SegmentedProps } from './segmented'\n\ndefineOptions({\n  name: 'ElSegmented',\n})\n\nconst props = withDefaults(defineProps<SegmentedProps>(), {\n  direction: 'horizontal',\n  options: () => [],\n  props: () => defaultProps,\n  validateEvent: true,\n  modelValue: undefined,\n  disabled: undefined,\n})\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 = (evt: Event, item: Option) => {\n  const value = getValue(item)\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  ;(evt.target as HTMLInputElement).checked = value === props.modelValue\n}\n\nconst aliasProps = computed(() => ({ ...defaultProps, ...props.props }))\n\n//FIXME: remove this when vue >=3.3\nconst intoAny = (item: any) => item\n\nconst getValue = (item: Option) => {\n  return isObject(item) ? item[aliasProps.value.value] : item\n}\n\nconst getLabel = (item: Option) => {\n  return isObject(item) ? item[aliasProps.value.label] : item\n}\n\nconst getDisabled = (item: Option | undefined) => {\n  return !!(\n    _disabled.value ||\n    (isObject(item) ? item[aliasProps.value.disabled] : false)\n  )\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  state.isInit = true\n  if (props.direction === 'vertical') {\n    state.height = selectedItem.offsetHeight\n    state.translateY = selectedItem.offsetTop\n  } else {\n    state.width = selectedItem.offsetWidth\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"],"mappings":""}
+{"version":3,"file":"segmented2.mjs","names":[],"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(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($event, 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 generic=\"T extends Option = Option\">\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 { defaultProps, segmentedEmits } from './segmented'\n\nimport type { Option } from './types'\nimport type { SegmentedProps } from './segmented'\n\ndefineOptions({\n  name: 'ElSegmented',\n})\n\nconst props = withDefaults(defineProps<SegmentedProps<T>>(), {\n  direction: 'horizontal',\n  options: () => [],\n  props: () => defaultProps,\n  validateEvent: true,\n  modelValue: undefined,\n  disabled: undefined,\n})\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 = (evt: Event, item: T) => {\n  const value = getValue(item)\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  ;(evt.target as HTMLInputElement).checked = value === props.modelValue\n}\n\nconst aliasProps = computed(() => ({ ...defaultProps, ...props.props }))\n\nconst getValue = (item: T) => {\n  return isObject(item) ? item[aliasProps.value.value] : item\n}\n\nconst getLabel = (item: T) => {\n  return isObject(item) ? item[aliasProps.value.label] : item\n}\n\nconst getDisabled = (item: T | undefined) => {\n  return !!(\n    _disabled.value ||\n    (isObject(item) ? item[aliasProps.value.disabled] : false)\n  )\n}\n\nconst getSelected = (item: T) => {\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: T) => {\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  state.isInit = true\n  if (props.direction === 'vertical') {\n    state.height = selectedItem.offsetHeight\n    state.translateY = selectedItem.offsetTop\n  } else {\n    state.width = selectedItem.offsetWidth\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"],"mappings":""}

package/es/components/table/src/table-body/events-helper.mjs

@@ -1,13 +1,11 @@
 import { addClass, hasClass, removeClass } from "../../../../utils/dom/style.mjs";
+import { isGreaterThan } from "../../../../utils/numbers.mjs";
 import { createTablePopper, getCell, getColumnByCell, removePopper } from "../util.mjs";
 import { TABLE_INJECTION_KEY } from "../tokens.mjs";
 import { debounce } from "lodash-unified";
 import { h, inject, ref } from "vue";
 
 //#region ../../packages/components/table/src/table-body/events-helper.ts
-function isGreaterThan(a, b, epsilon = .03) {
-	return a - b > epsilon;
-}
 function useEvents(props) {
 	const parent = inject(TABLE_INJECTION_KEY);
 	const tooltipContent = ref("");

package/es/components/table/src/table-body/events-helper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"events-helper.mjs","names":[],"sources":["../../../../../../../packages/components/table/src/table-body/events-helper.ts"],"sourcesContent":["import { h, inject, ref } from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { addClass, hasClass, removeClass } from '@element-plus/utils'\nimport {\n  createTablePopper,\n  getCell,\n  getColumnByCell,\n  removePopper,\n} from '../util'\nimport { TABLE_INJECTION_KEY } from '../tokens'\n\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { TableBodyProps } from './defaults'\nimport type { TableOverflowTooltipOptions } from '../util'\nimport type { DefaultRow } from '../table/defaults'\n\nfunction isGreaterThan(a: number, b: number, epsilon = 0.03) {\n  return a - b > epsilon\n}\n\nfunction useEvents<T extends DefaultRow>(props: Partial<TableBodyProps<T>>) {\n  const parent = inject(TABLE_INJECTION_KEY)\n  const tooltipContent = ref('')\n  const tooltipTrigger = ref(h('div'))\n  const handleEvent = (event: Event, row: T, name: string) => {\n    const table = parent\n    const cell = getCell(event)\n    let column: TableColumnCtx<T> | null = null\n    const namespace = table?.vnode.el?.dataset.prefix\n    if (cell) {\n      column = getColumnByCell(\n        {\n          columns: props.store?.states.columns.value ?? [],\n        },\n        cell,\n        namespace\n      )\n      if (column) {\n        table?.emit(`cell-${name}`, row, column, cell, event)\n      }\n    }\n    table?.emit(`row-${name}`, row, column, event)\n  }\n  const handleDoubleClick = (event: Event, row: T) => {\n    handleEvent(event, row, 'dblclick')\n  }\n  const handleClick = (event: Event, row: T) => {\n    props.store?.commit('setCurrentRow', row)\n    handleEvent(event, row, 'click')\n  }\n  const handleContextMenu = (event: Event, row: T) => {\n    handleEvent(event, row, 'contextmenu')\n  }\n  const handleMouseEnter = debounce((index: number) => {\n    props.store?.commit('setHoverRow', index)\n  }, 30)\n  const handleMouseLeave = debounce(() => {\n    props.store?.commit('setHoverRow', null)\n  }, 30)\n  const getPadding = (el: HTMLElement) => {\n    const style = window.getComputedStyle(el, null)\n    const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0\n    const paddingRight = Number.parseInt(style.paddingRight, 10) || 0\n    const paddingTop = Number.parseInt(style.paddingTop, 10) || 0\n    const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0\n    return {\n      left: paddingLeft,\n      right: paddingRight,\n      top: paddingTop,\n      bottom: paddingBottom,\n    }\n  }\n\n  const toggleRowClassByCell = (\n    rowSpan: number,\n    event: MouseEvent,\n    toggle: (el: Element, cls: string) => void\n  ) => {\n    let node: Node | null | undefined = (event?.target as Element | null)\n      ?.parentNode\n    while (rowSpan > 1) {\n      node = node?.nextSibling\n      if (!node || node.nodeName !== 'TR') break\n      toggle(node as Element, 'hover-row hover-fixed-row')\n      rowSpan--\n    }\n  }\n\n  const handleCellMouseEnter = (\n    event: MouseEvent,\n    row: T,\n    tooltipOptions: TableOverflowTooltipOptions\n  ) => {\n    if (!parent) return\n    const table = parent\n    const cell = getCell(event)\n    const namespace = table?.vnode.el?.dataset.prefix\n    let column: TableColumnCtx<T> | null = null\n    if (cell) {\n      column = getColumnByCell(\n        {\n          columns: props.store?.states.columns.value ?? [],\n        },\n        cell,\n        namespace\n      )\n      if (!column) {\n        return\n      }\n      if (cell.rowSpan > 1) {\n        toggleRowClassByCell(cell.rowSpan, event, addClass)\n      }\n      const hoverState = (table.hoverState = {\n        cell,\n        column: column as any,\n        row,\n      })\n      table?.emit(\n        'cell-mouse-enter',\n        hoverState.row,\n        hoverState.column,\n        hoverState.cell,\n        event\n      )\n    }\n\n    if (!tooltipOptions) {\n      if (removePopper?.trigger === cell) {\n        removePopper?.()\n      }\n      return\n    }\n\n    // 判断是否text-overflow, 如果是就显示tooltip\n    const cellChild = (event.target as HTMLElement).querySelector(\n      '.cell'\n    ) as HTMLElement\n    if (\n      !(\n        hasClass(cellChild, `${namespace}-tooltip`) &&\n        cellChild.childNodes.length &&\n        cellChild.textContent?.trim()\n      )\n    ) {\n      return\n    }\n    // use range width instead of scrollWidth to determine whether the text is overflowing\n    // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3\n    const range = document.createRange()\n    range.setStart(cellChild, 0)\n    range.setEnd(cellChild, cellChild.childNodes.length)\n    /** detail: https://github.com/element-plus/element-plus/issues/10790\n     *  What went wrong?\n     *  UI > Browser > Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost precision during internal calculations. In the example above:\n     *    - Expected: 188\n     *    - Actual: 188.00000762939453\n     */\n    const { width: rangeWidth, height: rangeHeight } =\n      range.getBoundingClientRect()\n    const { width: cellChildWidth, height: cellChildHeight } =\n      cellChild.getBoundingClientRect()\n\n    const { top, left, right, bottom } = getPadding(cellChild)\n    const horizontalPadding = left + right\n    const verticalPadding = top + bottom\n    if (\n      isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) ||\n      isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) ||\n      // When using a high-resolution screen, it is possible that a returns cellChild.scrollWidth value of 1921 and\n      // cellChildWidth returns a value of 1920.994140625. #16856 #16673\n      isGreaterThan(cellChild.scrollWidth, cellChildWidth)\n    ) {\n      createTablePopper(\n        tooltipOptions,\n        (cell?.innerText || cell?.textContent) ?? '',\n        row,\n        column,\n        cell,\n        table\n      )\n    } else if (removePopper?.trigger === cell) {\n      removePopper?.()\n    }\n  }\n  const handleCellMouseLeave = (event: MouseEvent) => {\n    const cell = getCell(event)\n    if (!cell) return\n    if (cell.rowSpan > 1) {\n      toggleRowClassByCell(cell.rowSpan, event, removeClass)\n    }\n    const oldHoverState = parent?.hoverState\n    parent?.emit(\n      'cell-mouse-leave',\n      oldHoverState?.row,\n      oldHoverState?.column,\n      oldHoverState?.cell,\n      event\n    )\n  }\n\n  return {\n    handleDoubleClick,\n    handleClick,\n    handleContextMenu,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleCellMouseEnter,\n    handleCellMouseLeave,\n    tooltipContent,\n    tooltipTrigger,\n  }\n}\n\nexport default useEvents\n"],"mappings":"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"}
+{"version":3,"file":"events-helper.mjs","names":[],"sources":["../../../../../../../packages/components/table/src/table-body/events-helper.ts"],"sourcesContent":["import { h, inject, ref } from 'vue'\nimport { debounce } from 'lodash-unified'\nimport {\n  addClass,\n  hasClass,\n  isGreaterThan,\n  removeClass,\n} from '@element-plus/utils'\nimport {\n  createTablePopper,\n  getCell,\n  getColumnByCell,\n  removePopper,\n} from '../util'\nimport { TABLE_INJECTION_KEY } from '../tokens'\n\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { TableBodyProps } from './defaults'\nimport type { TableOverflowTooltipOptions } from '../util'\nimport type { DefaultRow } from '../table/defaults'\n\nfunction useEvents<T extends DefaultRow>(props: Partial<TableBodyProps<T>>) {\n  const parent = inject(TABLE_INJECTION_KEY)\n  const tooltipContent = ref('')\n  const tooltipTrigger = ref(h('div'))\n  const handleEvent = (event: Event, row: T, name: string) => {\n    const table = parent\n    const cell = getCell(event)\n    let column: TableColumnCtx<T> | null = null\n    const namespace = table?.vnode.el?.dataset.prefix\n    if (cell) {\n      column = getColumnByCell(\n        {\n          columns: props.store?.states.columns.value ?? [],\n        },\n        cell,\n        namespace\n      )\n      if (column) {\n        table?.emit(`cell-${name}`, row, column, cell, event)\n      }\n    }\n    table?.emit(`row-${name}`, row, column, event)\n  }\n  const handleDoubleClick = (event: Event, row: T) => {\n    handleEvent(event, row, 'dblclick')\n  }\n  const handleClick = (event: Event, row: T) => {\n    props.store?.commit('setCurrentRow', row)\n    handleEvent(event, row, 'click')\n  }\n  const handleContextMenu = (event: Event, row: T) => {\n    handleEvent(event, row, 'contextmenu')\n  }\n  const handleMouseEnter = debounce((index: number) => {\n    props.store?.commit('setHoverRow', index)\n  }, 30)\n  const handleMouseLeave = debounce(() => {\n    props.store?.commit('setHoverRow', null)\n  }, 30)\n  const getPadding = (el: HTMLElement) => {\n    const style = window.getComputedStyle(el, null)\n    const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0\n    const paddingRight = Number.parseInt(style.paddingRight, 10) || 0\n    const paddingTop = Number.parseInt(style.paddingTop, 10) || 0\n    const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0\n    return {\n      left: paddingLeft,\n      right: paddingRight,\n      top: paddingTop,\n      bottom: paddingBottom,\n    }\n  }\n\n  const toggleRowClassByCell = (\n    rowSpan: number,\n    event: MouseEvent,\n    toggle: (el: Element, cls: string) => void\n  ) => {\n    let node: Node | null | undefined = (event?.target as Element | null)\n      ?.parentNode\n    while (rowSpan > 1) {\n      node = node?.nextSibling\n      if (!node || node.nodeName !== 'TR') break\n      toggle(node as Element, 'hover-row hover-fixed-row')\n      rowSpan--\n    }\n  }\n\n  const handleCellMouseEnter = (\n    event: MouseEvent,\n    row: T,\n    tooltipOptions: TableOverflowTooltipOptions\n  ) => {\n    if (!parent) return\n    const table = parent\n    const cell = getCell(event)\n    const namespace = table?.vnode.el?.dataset.prefix\n    let column: TableColumnCtx<T> | null = null\n    if (cell) {\n      column = getColumnByCell(\n        {\n          columns: props.store?.states.columns.value ?? [],\n        },\n        cell,\n        namespace\n      )\n      if (!column) {\n        return\n      }\n      if (cell.rowSpan > 1) {\n        toggleRowClassByCell(cell.rowSpan, event, addClass)\n      }\n      const hoverState = (table.hoverState = {\n        cell,\n        column: column as any,\n        row,\n      })\n      table?.emit(\n        'cell-mouse-enter',\n        hoverState.row,\n        hoverState.column,\n        hoverState.cell,\n        event\n      )\n    }\n\n    if (!tooltipOptions) {\n      if (removePopper?.trigger === cell) {\n        removePopper?.()\n      }\n      return\n    }\n\n    // 判断是否text-overflow, 如果是就显示tooltip\n    const cellChild = (event.target as HTMLElement).querySelector(\n      '.cell'\n    ) as HTMLElement\n    if (\n      !(\n        hasClass(cellChild, `${namespace}-tooltip`) &&\n        cellChild.childNodes.length &&\n        cellChild.textContent?.trim()\n      )\n    ) {\n      return\n    }\n    // use range width instead of scrollWidth to determine whether the text is overflowing\n    // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3\n    const range = document.createRange()\n    range.setStart(cellChild, 0)\n    range.setEnd(cellChild, cellChild.childNodes.length)\n    /** detail: https://github.com/element-plus/element-plus/issues/10790\n     *  What went wrong?\n     *  UI > Browser > Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost precision during internal calculations. In the example above:\n     *    - Expected: 188\n     *    - Actual: 188.00000762939453\n     */\n    const { width: rangeWidth, height: rangeHeight } =\n      range.getBoundingClientRect()\n    const { width: cellChildWidth, height: cellChildHeight } =\n      cellChild.getBoundingClientRect()\n\n    const { top, left, right, bottom } = getPadding(cellChild)\n    const horizontalPadding = left + right\n    const verticalPadding = top + bottom\n    if (\n      isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) ||\n      isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) ||\n      // When using a high-resolution screen, it is possible that a returns cellChild.scrollWidth value of 1921 and\n      // cellChildWidth returns a value of 1920.994140625. #16856 #16673\n      isGreaterThan(cellChild.scrollWidth, cellChildWidth)\n    ) {\n      createTablePopper(\n        tooltipOptions,\n        (cell?.innerText || cell?.textContent) ?? '',\n        row,\n        column,\n        cell,\n        table\n      )\n    } else if (removePopper?.trigger === cell) {\n      removePopper?.()\n    }\n  }\n  const handleCellMouseLeave = (event: MouseEvent) => {\n    const cell = getCell(event)\n    if (!cell) return\n    if (cell.rowSpan > 1) {\n      toggleRowClassByCell(cell.rowSpan, event, removeClass)\n    }\n    const oldHoverState = parent?.hoverState\n    parent?.emit(\n      'cell-mouse-leave',\n      oldHoverState?.row,\n      oldHoverState?.column,\n      oldHoverState?.cell,\n      event\n    )\n  }\n\n  return {\n    handleDoubleClick,\n    handleClick,\n    handleContextMenu,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleCellMouseEnter,\n    handleCellMouseLeave,\n    tooltipContent,\n    tooltipTrigger,\n  }\n}\n\nexport default useEvents\n"],"mappings":"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"}

package/es/components/tabs/src/tab-nav.mjs

@@ -1,10 +1,10 @@
 import { EVENT_CODE } from "../../../constants/aria.mjs";
 import { getEventCode } from "../../../utils/dom/event.mjs";
 import { rAF } from "../../../utils/raf.mjs";
-import { capitalize } from "../../../utils/strings.mjs";
 import { throwError } from "../../../utils/error.mjs";
 import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
 import { mutable } from "../../../utils/typescript.mjs";
+import { isGreaterThan } from "../../../utils/numbers.mjs";
 import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
 import { ElIcon } from "../../icon/index.mjs";
 import useWheel from "../../virtual-list/src/hooks/use-wheel.mjs";
@@ -99,17 +99,17 @@ const TabNav = /* @__PURE__ */ defineComponent({
 		};
 		const scrollPrev = () => {
 			if (!navScroll$.value) return;
-			const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];
+			const containerSize = navScroll$.value.getBoundingClientRect()[sizeName.value];
 			const currentOffset = navOffset.value;
 			if (!currentOffset) return;
 			navOffset.value = currentOffset > containerSize ? currentOffset - containerSize : 0;
 		};
 		const scrollNext = () => {
 			if (!navScroll$.value || !nav$.value) return;
-			const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];
-			const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];
+			const navSize = nav$.value.getBoundingClientRect()[sizeName.value];
+			const containerSize = navScroll$.value.getBoundingClientRect()[sizeName.value];
 			const currentOffset = navOffset.value;
-			if (navSize - currentOffset <= containerSize) return;
+			if (!isGreaterThan(navSize - currentOffset, containerSize)) return;
 			navOffset.value = navSize - currentOffset > containerSize * 2 ? currentOffset + containerSize : navSize - containerSize;
 		};
 		const scrollToActiveTab = async () => {
@@ -121,12 +121,15 @@ const TabNav = /* @__PURE__ */ defineComponent({
 			const navScroll = navScroll$.value;
 			const activeTabBounding = activeTab.getBoundingClientRect();
 			const navScrollBounding = navScroll.getBoundingClientRect();
-			const maxOffset = isHorizontal.value ? nav.offsetWidth - navScrollBounding.width : nav.offsetHeight - navScrollBounding.height;
+			const navScrollLeft = navScrollBounding.left + 1;
+			const navScrollRight = navScrollBounding.right - 1;
+			const navBounding = nav.getBoundingClientRect();
+			const maxOffset = isHorizontal.value ? navBounding.width - navScrollBounding.width : navBounding.height - navScrollBounding.height;
 			const currentOffset = navOffset.value;
 			let newOffset = currentOffset;
 			if (isHorizontal.value) {
-				if (activeTabBounding.left < navScrollBounding.left) newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
-				if (activeTabBounding.right > navScrollBounding.right) newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
+				if (activeTabBounding.left < navScrollLeft) newOffset = currentOffset - (navScrollLeft - activeTabBounding.left);
+				if (activeTabBounding.right > navScrollRight) newOffset = currentOffset + activeTabBounding.right - navScrollRight;
 			} else {
 				if (activeTabBounding.top < navScrollBounding.top) newOffset = currentOffset - (navScrollBounding.top - activeTabBounding.top);
 				if (activeTabBounding.bottom > navScrollBounding.bottom) newOffset = currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom);
@@ -143,8 +146,8 @@ const TabNav = /* @__PURE__ */ defineComponent({
 			if (containerSize < navSize) {
 				scrollable.value = scrollable.value || {};
 				scrollable.value.prev = currentOffset;
-				scrollable.value.next = currentOffset + containerSize < navSize;
-				if (navSize - currentOffset < containerSize) navOffset.value = navSize - containerSize;
+				scrollable.value.next = isGreaterThan(navSize, currentOffset + containerSize);
+				if (isGreaterThan(containerSize, navSize - currentOffset)) navOffset.value = navSize - containerSize;
 			} else {
 				scrollable.value = false;
 				if (currentOffset > 0) navOffset.value = 0;