refactor(components): [segmented] use type-based definitions (#23453)

* refactor(components): [segmented] use type-based definitions

* chore: add default value

---------

Co-authored-by: keeplearning66 <1256734885@qq.com>

packages/components/segmented/src/segmented.ts

@@ -9,7 +9,8 @@ import { useAriaProps, useSizeProp } from '@element-plus/hooks'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 
 import type { Option } from './types'
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
+import type { ComponentSize } from '@element-plus/constants'
 import type Segmented from './segmented.vue'
 
 export interface Props {
@@ -24,6 +25,53 @@ export const defaultProps: Required<Props> = {
   disabled: 'disabled',
 }
 
+export interface SegmentedProps {
+  direction?: 'vertical' | 'horizontal'
+  /**
+   * @description options of segmented
+   */
+  options?: Option[]
+  /**
+   * @description binding value
+   */
+  modelValue?: string | number | boolean
+  /**
+   * @description configuration options, see the following table
+   */
+  props?: Props
+  /**
+   * @description fit width of parent content
+   */
+  block?: boolean
+  /**
+   * @description size of component
+   */
+  size?: ComponentSize
+  /**
+   * @description whether segmented is disabled
+   */
+  disabled?: boolean
+  /**
+   * @description whether to trigger form validation
+   */
+  validateEvent?: boolean
+  /**
+   * @description native input id
+   */
+  id?: string
+  /**
+   * @description native `name` attribute
+   */
+  name?: string
+  /**
+   * @description native `aria-label` attribute
+   */
+  ariaLabel?: string
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `SegmentedProps` instead.
+ */
 export const segmentedProps = buildProps({
   direction: {
     type: definePropType<'vertical' | 'horizontal'>(String),
@@ -83,7 +131,9 @@ export const segmentedProps = buildProps({
   ...useAriaProps(['ariaLabel']),
 })
 
-export type SegmentedProps = ExtractPropTypes<typeof segmentedProps>
+/**
+ * @deprecated Removed after 3.0.0, Use `SegmentedProps` instead.
+ */
 export type SegmentedPropsPublic = ExtractPublicPropTypes<typeof segmentedProps>
 
 export const segmentedEmits = {

packages/components/segmented/src/segmented.vue

@@ -43,15 +43,23 @@ import {
 } from '@element-plus/components/form'
 import { debugWarn, isObject } from '@element-plus/utils'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { defaultProps, segmentedEmits, segmentedProps } from './segmented'
+import { defaultProps, segmentedEmits } from './segmented'
 
 import type { Option } from './types'
+import type { SegmentedProps } from './segmented'
 
 defineOptions({
   name: 'ElSegmented',
 })
 
-const props = defineProps(segmentedProps)
+const props = withDefaults(defineProps<SegmentedProps>(), {
+  direction: 'horizontal',
+  options: () => [],
+  props: () => defaultProps,
+  validateEvent: true,
+  modelValue: undefined,
+  disabled: undefined,
+})
 const emit = defineEmits(segmentedEmits)
 
 const ns = useNamespace('segmented')