fix(component): type deduction

fect-org · May 29, 2022 · 61ccdd7 · 61ccdd7
1 parent 650b3a1
commit 61ccdd7
Show file tree

Hide file tree

Showing 19 changed files with 58 additions and 44 deletions.
diff --git a/packages/vue/src/button/__tests__/__snapshots__/index.spec.tsx.snap b/packages/vue/src/button/__tests__/__snapshots__/index.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`Button button have icon only 1`] = `
 <div class="container"><button class="fect-button fect-button--default fect-button--medium" style="--button-hover-bg: var(--button-default-color); --button-hover-border: var(--primary-foreground); --button-hover-color: var(--primary-foreground);" type="button">
     <!---->
     <!---->
-    <div class="fect-button__icon" style="left: 50%; transform: translate(-50%, -50%);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+    <div class="fect-button__icon" style="left: 50%; transform: translate(-50%, -50%);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
         <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
       </svg></div>
     <!---->
@@ -67,7 +67,7 @@ exports[`Button should be support icon 1`] = `
 <div class="container"><button class="fect-button fect-button--default fect-button--medium" style="--button-hover-bg: var(--button-default-color); --button-hover-border: var(--primary-foreground); --button-hover-color: var(--primary-foreground);" type="button">
     <!---->
     <!---->
-    <div class="fect-button__icon" style="left: 15%; transform: translateY(-50%);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+    <div class="fect-button__icon" style="left: 15%; transform: translateY(-50%);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
         <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
       </svg></div>
     <div class="fect-button__text"> Button </div>

diff --git a/packages/vue/src/checkbox-group/interface.ts b/packages/vue/src/checkbox-group/interface.ts
@@ -1,5 +1,5 @@
 import { checkboxGroupProps } from './props'
-import type { Ref, ExtractPropTypes } from 'vue'
+import type { Ref, ExtractPropTypes, DeepReadonly } from 'vue'
 
 interface CheckboxEeventTarget {
   checked?: boolean
@@ -15,7 +15,7 @@ export interface CheckboxEvent {
 
 export interface CheckboxContext {
   props: ExtractPropTypes<typeof checkboxGroupProps>
-  parentValue: Ref<string[]>
+  parentValue: DeepReadonly<Ref<string[]>>
   updateCheckboxGroupValue: (val: string) => void
   updateCheckboxGroupEvent: (e: CheckboxEvent) => void
 }
diff --git a/packages/vue/src/collapse-group/interface.ts b/packages/vue/src/collapse-group/interface.ts
@@ -1,6 +1,6 @@
-import type { Ref } from 'vue'
+import type { DeepReadonly, Ref } from 'vue'
 
 export interface CollapseContext {
-  checked: Ref<number[]>
+  checked: DeepReadonly<Ref<number[]>>
   updateCollapseGroupChecked(childIdx: number): void
 }
diff --git a/packages/vue/src/form-item/form-item.tsx b/packages/vue/src/form-item/form-item.tsx
@@ -87,7 +87,8 @@ export default defineComponent({
       const { prop } = props
       if (!prop) {
         if (process.env.NODE_ENV !== 'production') {
-          return console.error(`[Fect] <FormItem> prop is required for validate`)
+          console.error(`[Fect] <FormItem> prop is required for validate`)
+          return
         }
       }
       const { model } = context!.props

diff --git a/packages/vue/src/form/form-context.ts b/packages/vue/src/form/form-context.ts
@@ -7,7 +7,7 @@ const READONLY_FORM_KEY: InjectionKey<FormContext> = Symbol('formKey')
 
 const READONLY_FORM_ITEM_KEY: InjectionKey<FormItemCotnext> = Symbol('formItemKey')
 
-export const createFormContext = () => createProvider<FormItemInstance>(READONLY_FORM_KEY)
+export const createFormContext = () => createProvider<FormItemInstance, FormContext>(READONLY_FORM_KEY)
 
 export const useFormContext = () => useProvider(READONLY_FORM_KEY)
 

diff --git a/packages/vue/src/form/form.tsx b/packages/vue/src/form/form.tsx
@@ -3,7 +3,7 @@ import { useExpose } from '@fect-ui/vue-hooks'
 import { props } from './props'
 import { createName, createBem, isPlainObject, len, isArray } from '../utils'
 import { createFormContext } from './form-context'
-import type { PromisfyValidate, ValidateCallback } from './interface'
+import type { PromisfyValidate, ValidateCallback, ValidateResult } from './interface'
 import './index.less'
 import { Apollo } from './apollo'
 
@@ -49,7 +49,7 @@ export default defineComponent({
     const validateField = (fields: string | string[], callback?: ValidateCallback) => {
       fields = isArray(fields) ? fields : [fields]
       const fds = children.filter((_) => fields.includes(_.prop))
-      const result = fds.map((fd) => fd.validate('', callback))
+      const result = fds.map((fd) => fd.validate('', callback)) as ValidateResult[]
       if (!len(result) && callback) return callback(true, {})
       result.forEach(({ state, errs }) => {
         callback && callback(state, errs)

diff --git a/packages/vue/src/form/interface.ts b/packages/vue/src/form/interface.ts
@@ -16,13 +16,22 @@ export interface FormContext {
   props: FormProps
 }
 
-export type FormItemInstance = ComponentInstance<Omit<FormItemCotnext, 'behavior'> & FormItemProps>
+export type FormItemInstance = ComponentInstance<
+  Omit<FormItemCotnext, 'behavior'> &
+    FormItemProps & {
+      updateShowLogState: (state: boolean) => void
+      clearValidate: () => void
+    }
+>
+
+export interface ValidateResult {
+  state: boolean
+  errs: ValidateErrorParams
+}
 
 export interface FormItemCotnext {
   behavior: ComputedRef<Pick<FormProps, 'disabled' | 'size'>>
-  validate: (trigger: Trigger, callback?: ValidateCallback) => { state: boolean; errs: ValidateErrorParams }
-  updateShowLogState: (state: boolean) => void
-  clearValidate: () => void
+  validate: (trigger: Trigger, callback?: ValidateCallback) => ValidateResult | void
 }
 
 export type FormInstance = ComponentInstance<{

diff --git a/packages/vue/src/input/__tests__/__snapshots__/index.spec.ts.snap b/packages/vue/src/input/__tests__/__snapshots__/index.spec.ts.snap
@@ -58,11 +58,11 @@ exports[`Input should support render prefix and suffix icon 1`] = `
     <div class="fect-input__container">
       <!---->
       <div class="fect-input__wrapper">
-        <div class="fect-input__icon fect-input__icon--prefix" style="cursor: pointer; pointer-events: auto;"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+        <div class="fect-input__icon fect-input__icon--prefix" style="cursor: pointer; pointer-events: auto;"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
             <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
           </svg></div><input type="text" class="">
         <!---->
-        <div class="fect-input__icon fect-input__icon--suffix" style="cursor: pointer; pointer-events: auto;"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+        <div class="fect-input__icon fect-input__icon--suffix" style="cursor: pointer; pointer-events: auto;"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
             <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
           </svg></div>
       </div>

diff --git a/packages/vue/src/radio-group/interface.ts b/packages/vue/src/radio-group/interface.ts
@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import type { DeepReadonly, Ref } from 'vue'
 import type { NormalSizes } from '../utils'
 
 export type Parent = number | string
@@ -23,6 +23,6 @@ export interface RadioGroupContext {
     size: NormalSizes
   }
   updateRadioGroupChangeEvent: (val: RadioEvent) => void
-  parentValue: Ref<Parent>
+  parentValue: DeepReadonly<Ref<Parent>>
   updateRadioGroupValue: (val: Parent) => void
 }
diff --git a/packages/vue/src/rating/__tests__/__snapshots__/index.spec.tsx.snap b/packages/vue/src/rating/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`Rating should be support custom Icon render 1`] = `
 <div class="fect-rating" role="slider" tabindex="0">
-  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
       <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
     </svg></div>
-  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
       <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
     </svg></div>
-  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
       <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
     </svg></div>
-  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
       <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
     </svg></div>
-  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
       <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
     </svg></div>
 </div>

diff --git a/packages/vue/src/row/interface.ts b/packages/vue/src/row/interface.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
 
 export interface LayoutContext {
-  gutter: Ref<number>
+  gutter: Ref<number | string>
 }
diff --git a/packages/vue/src/select/__tests__/__snapshots__/index.spec.ts.snap b/packages/vue/src/select/__tests__/__snapshots__/index.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Select should support render with multiple mode 1`] = `
   <div class="fect-select fect-select--medium" style="--select-content-height: 0px;" data-size="medium">
     <div class="fect-tooltip">
       <div class="fect-select__content">
-        <div class="fect-grid fect-grid--live fect-grid__group fect-grid__group--wrap fect-select__multiple" style="align-content: flex-start; align-items: stretch; flex-direction: row; justify-content: flex-start; --fect-grid-gap: calc(0.5 * 16px * 1/3);"></div>
+        <div class="fect-grid fect-grid--live fect-grid__group fect-grid__group--wrap fect-select__multiple" style="align-content: flex-start; align-items: stretch; flex-direction: row; justify-content: flex-start; --fect-grid-gap: calc(0.5 * 16px * 1/3); background-color: transparent;"></div>
         <div class="fect-input fect-input--medium">
           <!---->
           <div class="fect-input__container">

diff --git a/packages/vue/src/select/index.less b/packages/vue/src/select/index.less
@@ -64,7 +64,6 @@
     position: absolute;
     line-height: normal;
     box-sizing: border-box;
-    background-color: var(--primary-background);
   }
   &__item {
     display: inline-flex;

diff --git a/packages/vue/src/select/interface.ts b/packages/vue/src/select/interface.ts
@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, Ref, ComputedRef } from 'vue'
+import type { ExtractPropTypes, Ref, ComputedRef, DeepReadonly } from 'vue'
 import type { ComponentInstance } from '../utils'
 import { selectOptionProps, props } from './props'
 
@@ -9,7 +9,7 @@ interface SelectState {
 
 export interface SelectContext {
   updateSelectVisible: () => void
-  parentValue: Ref<string | string[]>
+  parentValue: DeepReadonly<Ref<string | number | Array<string | number>>>
   selectState: ComputedRef<SelectState>
   updateDropDown: () => void
   updateSelectValue: (val: string | number) => void

diff --git a/packages/vue/src/select/props.ts b/packages/vue/src/select/props.ts
@@ -3,11 +3,11 @@ import type { NormalSizes } from '../utils'
 
 export const props = {
   modelValue: {
-    type: [String, Number, Array] as PropType<string | string[]>,
+    type: [String, Number, Array] as PropType<string | string[] | number[] | number>,
     default: ''
   },
   value: {
-    type: [String, Number, Array] as PropType<string | string[]>,
+    type: [String, Number, Array] as PropType<string | string[] | number[] | number>,
     default: ''
   },
   placeholder: {

diff --git a/packages/vue/src/select/select-context.ts b/packages/vue/src/select/select-context.ts
@@ -4,6 +4,6 @@ import type { SelectContext, SelectPropInstance } from './interface'
 
 export const READONLY_SELECT_KEY: InjectionKey<SelectContext> = Symbol('selectKey')
 
-export const createSelectContext = () => createProvider<SelectPropInstance>(READONLY_SELECT_KEY)
+export const createSelectContext = () => createProvider<SelectPropInstance, SelectContext>(READONLY_SELECT_KEY)
 
 export const useSelectContext = () => useProvider(READONLY_SELECT_KEY)
diff --git a/packages/vue/src/select/select.tsx b/packages/vue/src/select/select.tsx
@@ -1,6 +1,6 @@
 import { computed, ref, watch, defineComponent, nextTick } from 'vue'
 import { useState } from '@fect-ui/vue-hooks'
-import { createName, createBem, pick, getDomRect, assign, isArray, useMounted, addUnit } from '../utils'
+import { createName, createBem, pick, getDomRect, assign, isArray, useMounted, addUnit, len } from '../utils'
 import Input from '../input'
 import Tooltip from '../tooltip'
 import GridGroup from '../grid-group'
@@ -30,8 +30,7 @@ export default defineComponent({
     const selectRef = ref<HTMLDivElement>()
     const gridRef = ref<ComponentInstance>()
     const { provider, children } = createSelectContext()
-
-    const [value, setValue] = useState<string | string[]>(props.modelValue || props.value)
+    const [value, setValue] = useState<string | number | Array<string | number>>(props.modelValue || props.value)
     const [visible, setVisible] = useState<boolean>(false)
     const [dropdownWidth, setDropdownWidth] = useState<number>(0)
     const [showClear, setShowClear] = useState<boolean>(false)
@@ -66,15 +65,14 @@ export default defineComponent({
       })
     }
 
-    const updateSelectValue = (val: string) => {
+    const updateSelectValue = (val: string | number) => {
       setValue((pre) => {
         if (props.multiple) {
           const previous = isArray(pre) ? pre : [pre]
-          if (!pre.includes(val)) return [...previous, val]
+          if (!previous.includes(val)) return [...previous, val]
           return previous.filter((item) => item !== val)
-        } else {
-          return val
         }
+        return val
       })
     }
 
@@ -116,7 +114,14 @@ export default defineComponent({
       const { clearable } = props
       const list = queryChecked.value
       return (
-        <GridGroup ref={gridRef} class={bem('multiple')} gap={0.5}>
+        <GridGroup
+          ref={gridRef}
+          class={bem('multiple')}
+          gap={0.5}
+          style={{
+            backgroundColor: len(list) ? 'var(--primary-background)' : 'transparent'
+          }}
+        >
           {list.map((_) => (
             <SelectMultiple onClear={() => multipleClearClickHandler(_.value as string)} clearable={clearable}>
               {_.label}

diff --git a/packages/vue/src/swipe/interface.ts b/packages/vue/src/swipe/interface.ts
@@ -1,9 +1,9 @@
 import { ComponentInstance } from '../utils'
-import type { Ref } from 'vue'
+import type { DeepReadonly, Ref } from 'vue'
 
 export interface SwipeContext {
-  index: Ref<number>
-  size: Ref<number>
+  index: DeepReadonly<Ref<number>>
+  size: DeepReadonly<Ref<number>>
 }
 
 export interface Shape {

diff --git a/packages/vue/src/tabs/interface.ts b/packages/vue/src/tabs/interface.ts
@@ -1,12 +1,12 @@
-import type { ExtractPropTypes, Ref } from 'vue'
+import type { DeepReadonly, ExtractPropTypes, Ref } from 'vue'
 import type { ComponentInstance, DomRect } from '../utils'
 import { tabProps, tabsProps } from './props'
 
 export type TabPropInstance = ComponentInstance<ExtractPropTypes<typeof tabProps>>
 
 export interface TabsContext {
   props: ExtractPropTypes<typeof tabsProps>
-  checked: Ref<string | number>
+  checked: DeepReadonly<Ref<string | number>>
 }
 
 export type TabsHighlightRect = DomRect & {