From 0e05d8c90826a2b6090056d49784f30f4fbf1e2e Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 12 Jul 2021 20:54:19 +0800 Subject: [PATCH] types: improve relation types (#9016) --- src/checkbox-group/CheckboxGroup.tsx | 14 ++++++-- src/checkbox/Checkbox.tsx | 7 ++-- src/col/Col.tsx | 4 +-- src/collapse-item/CollapseItem.tsx | 4 +-- src/collapse/Collapse.tsx | 6 ++-- src/composables/use-link-field.ts | 3 +- src/dropdown-item/DropdownItem.tsx | 7 ++-- src/dropdown-menu/DropdownMenu.tsx | 9 +++--- src/field/Field.tsx | 14 ++++++-- src/form/Form.tsx | 48 ++++++++++++++++------------ src/grid-item/GridItem.tsx | 15 ++++++--- src/grid/Grid.tsx | 6 ++-- src/index-anchor/IndexAnchor.tsx | 4 +-- src/index-bar/IndexBar.tsx | 10 +++--- src/picker/Picker.tsx | 5 +-- src/radio-group/RadioGroup.tsx | 18 +++++++---- src/radio/Radio.tsx | 4 +-- src/row/Row.tsx | 16 +++++++--- src/sidebar-item/SidebarItem.tsx | 4 +-- src/sidebar/Sidebar.tsx | 6 ++-- src/step/Step.tsx | 4 +-- src/steps/Steps.tsx | 6 ++-- src/swipe-item/SwipeItem.tsx | 4 +-- src/swipe/Swipe.tsx | 9 +++--- src/tab/Tab.tsx | 4 +-- src/tabbar-item/TabbarItem.tsx | 4 +-- src/tabbar/Tabbar.tsx | 12 +++++-- src/tabs/Tabs.tsx | 7 ++-- 28 files changed, 146 insertions(+), 108 deletions(-) diff --git a/src/checkbox-group/CheckboxGroup.tsx b/src/checkbox-group/CheckboxGroup.tsx index 88084b07d..cdaff67cd 100644 --- a/src/checkbox-group/CheckboxGroup.tsx +++ b/src/checkbox-group/CheckboxGroup.tsx @@ -1,4 +1,10 @@ -import { PropType, watch, defineComponent, ExtractPropTypes } from 'vue'; +import { + watch, + PropType, + InjectionKey, + defineComponent, + ExtractPropTypes, +} from 'vue'; import { createNamespace } from '../utils'; import { useChildren } from '@vant/use'; import { useExpose } from '../composables/use-expose'; @@ -7,8 +13,6 @@ import { CheckerParent, CheckerDirection } from '../checkbox/Checker'; const [name, bem] = createNamespace('checkbox-group'); -export const CHECKBOX_GROUP_KEY = Symbol(name); - const props = { max: [Number, String], disabled: Boolean, @@ -33,6 +37,10 @@ export type CheckboxGroupProvide = CheckerParent & { updateValue: (value: unknown[]) => void; }; +export const CHECKBOX_GROUP_KEY: InjectionKey = Symbol( + name +); + export default defineComponent({ name, diff --git a/src/checkbox/Checkbox.tsx b/src/checkbox/Checkbox.tsx index 140dd0b50..976b45df6 100644 --- a/src/checkbox/Checkbox.tsx +++ b/src/checkbox/Checkbox.tsx @@ -2,10 +2,7 @@ import { computed, watch, defineComponent } from 'vue'; // Utils import { createNamespace, extend, pick, truthProp } from '../utils'; -import { - CHECKBOX_GROUP_KEY, - CheckboxGroupProvide, -} from '../checkbox-group/CheckboxGroup'; +import { CHECKBOX_GROUP_KEY } from '../checkbox-group/CheckboxGroup'; // Composables import { useParent } from '@vant/use'; @@ -27,7 +24,7 @@ export default defineComponent({ emits: ['change', 'update:modelValue'], setup(props, { emit, slots }) { - const { parent } = useParent(CHECKBOX_GROUP_KEY); + const { parent } = useParent(CHECKBOX_GROUP_KEY); const setParentValue = (checked: boolean) => { const { name } = props; diff --git a/src/col/Col.tsx b/src/col/Col.tsx index aafe9b8e8..06ddb3bf2 100644 --- a/src/col/Col.tsx +++ b/src/col/Col.tsx @@ -1,7 +1,7 @@ import { computed, PropType, defineComponent } from 'vue'; import { createNamespace } from '../utils'; import { useParent } from '@vant/use'; -import { ROW_KEY, RowProvide } from '../row/Row'; +import { ROW_KEY } from '../row/Row'; const [name, bem] = createNamespace('col'); @@ -21,7 +21,7 @@ export default defineComponent({ }, setup(props, { slots }) { - const { parent, index } = useParent(ROW_KEY); + const { parent, index } = useParent(ROW_KEY); const style = computed(() => { if (!parent) { diff --git a/src/collapse-item/CollapseItem.tsx b/src/collapse-item/CollapseItem.tsx index 57e2c7b28..cbd930267 100644 --- a/src/collapse-item/CollapseItem.tsx +++ b/src/collapse-item/CollapseItem.tsx @@ -3,7 +3,7 @@ import { ref, watch, computed, nextTick, defineComponent } from 'vue'; // Utils import { cellProps } from '../cell/Cell'; import { createNamespace, extend, pick, truthProp } from '../utils'; -import { COLLAPSE_KEY, CollapseProvide } from '../collapse/Collapse'; +import { COLLAPSE_KEY } from '../collapse/Collapse'; // Composables import { raf, doubleRaf, useParent } from '@vant/use'; @@ -30,7 +30,7 @@ export default defineComponent({ setup(props, { slots }) { const wrapperRef = ref(); const contentRef = ref(); - const { parent, index } = useParent(COLLAPSE_KEY); + const { parent, index } = useParent(COLLAPSE_KEY); if (!parent) { if (process.env.NODE_ENV !== 'production') { diff --git a/src/collapse/Collapse.tsx b/src/collapse/Collapse.tsx index 991b75cd5..4915621cb 100644 --- a/src/collapse/Collapse.tsx +++ b/src/collapse/Collapse.tsx @@ -1,17 +1,17 @@ -import { PropType, defineComponent } from 'vue'; +import { PropType, defineComponent, InjectionKey } from 'vue'; import { truthProp, createNamespace } from '../utils'; import { BORDER_TOP_BOTTOM } from '../utils/constant'; import { useChildren } from '@vant/use'; const [name, bem] = createNamespace('collapse'); -export const COLLAPSE_KEY = Symbol(name); - export type CollapseProvide = { toggle: (name: number | string, expanded: boolean) => void; isExpanded: (name: number | string) => boolean; }; +export const COLLAPSE_KEY: InjectionKey = Symbol(name); + function validateModelValue( modelValue: string | number | Array, accordion: boolean diff --git a/src/composables/use-link-field.ts b/src/composables/use-link-field.ts index 9a7c2fc81..9707bff2c 100644 --- a/src/composables/use-link-field.ts +++ b/src/composables/use-link-field.ts @@ -1,7 +1,8 @@ import { watch, inject, InjectionKey } from 'vue'; +import type { FormProvide } from '../form/Form'; import type { FieldProvide } from '../field/types'; -export const FORM_KEY = Symbol('van-form'); +export const FORM_KEY: InjectionKey = Symbol('van-form'); export const FIELD_KEY: InjectionKey = Symbol('van-field'); export function useLinkField(getValue: () => unknown) { diff --git a/src/dropdown-item/DropdownItem.tsx b/src/dropdown-item/DropdownItem.tsx index 77d431cf1..c5d9ec0da 100644 --- a/src/dropdown-item/DropdownItem.tsx +++ b/src/dropdown-item/DropdownItem.tsx @@ -14,10 +14,7 @@ import { getZIndexStyle, createNamespace, } from '../utils'; -import { - DROPDOWN_KEY, - DropdownMenuProvide, -} from '../dropdown-menu/DropdownMenu'; +import { DROPDOWN_KEY } from '../dropdown-menu/DropdownMenu'; // Composables import { useParent } from '@vant/use'; @@ -61,7 +58,7 @@ export default defineComponent({ showWrapper: false, }); - const { parent } = useParent(DROPDOWN_KEY); + const { parent } = useParent(DROPDOWN_KEY); if (!parent) { if (process.env.NODE_ENV !== 'production') { diff --git a/src/dropdown-menu/DropdownMenu.tsx b/src/dropdown-menu/DropdownMenu.tsx index 4fb73e78d..17db689cb 100644 --- a/src/dropdown-menu/DropdownMenu.tsx +++ b/src/dropdown-menu/DropdownMenu.tsx @@ -3,6 +3,7 @@ import { Ref, computed, PropType, + InjectionKey, CSSProperties, defineComponent, ExtractPropTypes, @@ -22,8 +23,6 @@ import { const [name, bem] = createNamespace('dropdown-menu'); -export const DROPDOWN_KEY = Symbol(name); - export type DropdownMenuDirection = 'up' | 'down'; const props = { @@ -47,6 +46,8 @@ export type DropdownMenuProvide = { offset: Ref; }; +export const DROPDOWN_KEY: InjectionKey = Symbol(name); + export default defineComponent({ name, @@ -57,9 +58,7 @@ export default defineComponent({ const barRef = ref(); const offset = ref(0); - const { children, linkChildren } = useChildren( - DROPDOWN_KEY - ); + const { children, linkChildren } = useChildren(DROPDOWN_KEY); const scrollParent = useScrollParent(root); const opened = computed(() => diff --git a/src/field/Field.tsx b/src/field/Field.tsx index a3ac3a08e..75f0cd386 100644 --- a/src/field/Field.tsx +++ b/src/field/Field.tsx @@ -55,6 +55,16 @@ import type { const [name, bem] = createNamespace('field'); +// Shared props of Field and Form +type SharedProps = + | 'colon' + | 'disabled' + | 'readonly' + | 'labelWidth' + | 'labelAlign' + | 'inputAlign' + | 'errorMessageAlign'; + // provide to Search component to inherit export const fieldProps = { formatter: Function as PropType<(value: string) => string>, @@ -141,11 +151,11 @@ export default defineComponent({ const inputRef = ref(); const childFieldValue = ref<() => unknown>(); - const { parent: form } = useParent(FORM_KEY); + const { parent: form } = useParent(FORM_KEY); const getModelValue = () => String(props.modelValue ?? ''); - const getProp = (key: keyof typeof props) => { + const getProp = (key: T) => { if (isDef(props[key])) { return props[key]; } diff --git a/src/form/Form.tsx b/src/form/Form.tsx index a0aec5622..8156f5d62 100644 --- a/src/form/Form.tsx +++ b/src/form/Form.tsx @@ -1,7 +1,7 @@ -import { PropType, defineComponent } from 'vue'; +import { PropType, defineComponent, ExtractPropTypes } from 'vue'; // Utils -import { truthProp, createNamespace, ComponentInstance } from '../utils'; +import { truthProp, createNamespace } from '../utils'; // Composables import { useChildren } from '@vant/use'; @@ -17,32 +17,38 @@ import type { const [name, bem] = createNamespace('form'); +const props = { + colon: Boolean, + disabled: Boolean, + readonly: Boolean, + showError: Boolean, + labelWidth: [Number, String], + labelAlign: String as PropType, + inputAlign: String as PropType, + scrollToError: Boolean, + validateFirst: Boolean, + submitOnEnter: truthProp, + showErrorMessage: truthProp, + errorMessageAlign: String as PropType, + validateTrigger: { + type: String as PropType, + default: 'onBlur', + }, +}; + +export type FormProvide = { + props: ExtractPropTypes; +}; + export default defineComponent({ name, - props: { - colon: Boolean, - disabled: Boolean, - readonly: Boolean, - showError: Boolean, - labelWidth: [Number, String], - labelAlign: String as PropType, - inputAlign: String as PropType, - scrollToError: Boolean, - validateFirst: Boolean, - submitOnEnter: truthProp, - showErrorMessage: truthProp, - errorMessageAlign: String as PropType, - validateTrigger: { - type: String as PropType, - default: 'onBlur', - }, - }, + props, emits: ['submit', 'failed'], setup(props, { emit, slots }) { - const { children, linkChildren } = useChildren(FORM_KEY); + const { children, linkChildren } = useChildren(FORM_KEY); const getFieldsByNames = (names?: string[]) => { if (names) { diff --git a/src/grid-item/GridItem.tsx b/src/grid-item/GridItem.tsx index bdafb5364..db1c14ea8 100644 --- a/src/grid-item/GridItem.tsx +++ b/src/grid-item/GridItem.tsx @@ -3,7 +3,7 @@ import { computed, CSSProperties, defineComponent } from 'vue'; // Utils import { createNamespace, addUnit, extend } from '../utils'; import { BORDER } from '../utils/constant'; -import { GRID_KEY, GridProvide } from '../grid/Grid'; +import { GRID_KEY } from '../grid/Grid'; // Composables import { useParent } from '@vant/use'; @@ -28,7 +28,7 @@ export default defineComponent({ }), setup(props, { slots }) { - const { parent, index } = useParent(GRID_KEY); + const { parent, index } = useParent(GRID_KEY); const route = useRoute(); if (!parent) { @@ -113,8 +113,15 @@ export default defineComponent({ }; return () => { - const { center, border, square, gutter, reverse, direction, clickable } = - parent.props; + const { + center, + border, + square, + gutter, + reverse, + direction, + clickable, + } = parent.props; const classes = [ bem('content', [ diff --git a/src/grid/Grid.tsx b/src/grid/Grid.tsx index fd0d95544..8037c233b 100644 --- a/src/grid/Grid.tsx +++ b/src/grid/Grid.tsx @@ -1,12 +1,10 @@ -import { PropType, defineComponent, ExtractPropTypes } from 'vue'; +import { PropType, defineComponent, ExtractPropTypes, InjectionKey } from 'vue'; import { createNamespace, addUnit, truthProp } from '../utils'; import { BORDER_TOP } from '../utils/constant'; import { useChildren } from '@vant/use'; const [name, bem] = createNamespace('grid'); -export const GRID_KEY = Symbol(name); - export type GridDirection = 'horizontal' | 'vertical'; const props = { @@ -28,6 +26,8 @@ export type GridProvide = { props: ExtractPropTypes; }; +export const GRID_KEY: InjectionKey = Symbol(name); + export default defineComponent({ name, diff --git a/src/index-anchor/IndexAnchor.tsx b/src/index-anchor/IndexAnchor.tsx index edadfd15c..1b6b3ca6e 100644 --- a/src/index-anchor/IndexAnchor.tsx +++ b/src/index-anchor/IndexAnchor.tsx @@ -3,7 +3,7 @@ import { ref, reactive, computed, CSSProperties, defineComponent } from 'vue'; // Utils import { createNamespace, extend, getZIndexStyle } from '../utils'; import { BORDER_BOTTOM } from '../utils/constant'; -import { INDEX_BAR_KEY, IndexBarProvide } from '../index-bar/IndexBar'; +import { INDEX_BAR_KEY } from '../index-bar/IndexBar'; import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll'; // Composables @@ -29,7 +29,7 @@ export default defineComponent({ }); const root = ref(); - const { parent } = useParent(INDEX_BAR_KEY); + const { parent } = useParent(INDEX_BAR_KEY); if (!parent) { if (process.env.NODE_ENV !== 'production') { diff --git a/src/index-bar/IndexBar.tsx b/src/index-bar/IndexBar.tsx index 82f579af1..f2b0288d4 100644 --- a/src/index-bar/IndexBar.tsx +++ b/src/index-bar/IndexBar.tsx @@ -6,6 +6,7 @@ import { PropType, Teleport, onMounted, + InjectionKey, CSSProperties, TeleportProps, defineComponent, @@ -22,7 +23,6 @@ import { createNamespace, getRootScrollTop, setRootScrollTop, - ComponentInstance, } from '../utils'; // Composables @@ -46,8 +46,6 @@ function genAlphabet() { const [name, bem] = createNamespace('index-bar'); -export const INDEX_BAR_KEY = Symbol(name); - const props = { sticky: truthProp, zIndex: [Number, String], @@ -67,6 +65,8 @@ export type IndexBarProvide = { props: ExtractPropTypes; }; +export const INDEX_BAR_KEY: InjectionKey = Symbol(name); + export default defineComponent({ name, @@ -80,9 +80,7 @@ export default defineComponent({ const touch = useTouch(); const scrollParent = useScrollParent(root); - const { children, linkChildren } = useChildren( - INDEX_BAR_KEY - ); + const { children, linkChildren } = useChildren(INDEX_BAR_KEY); linkChildren({ props }); diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx index 8f535e964..e41e92fa0 100644 --- a/src/picker/Picker.tsx +++ b/src/picker/Picker.tsx @@ -7,7 +7,6 @@ import { truthProp, preventDefault, createNamespace, - ComponentInstance, } from '../utils'; import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant'; @@ -114,9 +113,7 @@ export default defineComponent({ props.columnsFieldNames ); - const { children, linkChildren } = useChildren( - PICKER_KEY - ); + const { children, linkChildren } = useChildren(PICKER_KEY); linkChildren(); diff --git a/src/radio-group/RadioGroup.tsx b/src/radio-group/RadioGroup.tsx index 54fd32b4a..23a01b044 100644 --- a/src/radio-group/RadioGroup.tsx +++ b/src/radio-group/RadioGroup.tsx @@ -1,26 +1,32 @@ -import { watch, defineComponent, ExtractPropTypes } from 'vue'; +import { + watch, + PropType, + InjectionKey, + defineComponent, + ExtractPropTypes, +} from 'vue'; import { unknownProp, createNamespace } from '../utils'; import { useChildren } from '@vant/use'; import { useLinkField } from '../composables/use-link-field'; -import { CheckerParent } from '../checkbox/Checker'; +import type { CheckerDirection } from '../checkbox/Checker'; const [name, bem] = createNamespace('radio-group'); -export const RADIO_KEY = Symbol(name); - const props = { disabled: Boolean, iconSize: [Number, String], - direction: String, + direction: String as PropType, modelValue: unknownProp, checkedColor: String, }; -export type RadioGroupProvide = CheckerParent & { +export type RadioGroupProvide = { props: ExtractPropTypes; updateValue: (value: unknown) => void; }; +export const RADIO_KEY: InjectionKey = Symbol(name); + export default defineComponent({ name, diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx index f73f70693..14d93e4b5 100644 --- a/src/radio/Radio.tsx +++ b/src/radio/Radio.tsx @@ -2,7 +2,7 @@ import { defineComponent } from 'vue'; // Utils import { pick, createNamespace } from '../utils'; -import { RADIO_KEY, RadioGroupProvide } from '../radio-group/RadioGroup'; +import { RADIO_KEY } from '../radio-group/RadioGroup'; // Composables import { useParent } from '@vant/use'; @@ -20,7 +20,7 @@ export default defineComponent({ emits: ['update:modelValue'], setup(props, { emit, slots }) { - const { parent } = useParent(RADIO_KEY); + const { parent } = useParent(RADIO_KEY); const checked = () => { const value = parent ? parent.props.modelValue : props.modelValue; diff --git a/src/row/Row.tsx b/src/row/Row.tsx index 01f1d88e2..6be902cd4 100644 --- a/src/row/Row.tsx +++ b/src/row/Row.tsx @@ -1,17 +1,23 @@ -import { computed, PropType, ComputedRef, defineComponent } from 'vue'; -import { truthProp, createNamespace, ComponentInstance } from '../utils'; +import { + computed, + PropType, + ComputedRef, + InjectionKey, + defineComponent, +} from 'vue'; +import { truthProp, createNamespace } from '../utils'; import { useChildren } from '@vant/use'; const [name, bem] = createNamespace('row'); -export const ROW_KEY = Symbol(name); - export type RowSpaces = { left?: number; right: number }[]; export type RowProvide = { spaces: ComputedRef; }; +export const ROW_KEY: InjectionKey = Symbol(name); + export type RowAlign = 'top' | 'center' | 'bottom'; export type RowJustify = @@ -39,7 +45,7 @@ export default defineComponent({ }, setup(props, { slots }) { - const { children, linkChildren } = useChildren(ROW_KEY); + const { children, linkChildren } = useChildren(ROW_KEY); const groups = computed(() => { const groups: number[][] = [[]]; diff --git a/src/sidebar-item/SidebarItem.tsx b/src/sidebar-item/SidebarItem.tsx index 16fcaa577..60bf5b841 100644 --- a/src/sidebar-item/SidebarItem.tsx +++ b/src/sidebar-item/SidebarItem.tsx @@ -2,7 +2,7 @@ import { defineComponent } from 'vue'; // Utils import { createNamespace, extend } from '../utils'; -import { SIDEBAR_KEY, SidebarProvide } from '../sidebar/Sidebar'; +import { SIDEBAR_KEY } from '../sidebar/Sidebar'; // Composables import { useParent } from '@vant/use'; @@ -27,7 +27,7 @@ export default defineComponent({ setup(props, { emit, slots }) { const route = useRoute(); - const { parent, index } = useParent(SIDEBAR_KEY); + const { parent, index } = useParent(SIDEBAR_KEY); if (!parent) { if (process.env.NODE_ENV !== 'production') { diff --git a/src/sidebar/Sidebar.tsx b/src/sidebar/Sidebar.tsx index 10b31c178..e114e7666 100644 --- a/src/sidebar/Sidebar.tsx +++ b/src/sidebar/Sidebar.tsx @@ -1,16 +1,16 @@ -import { defineComponent } from 'vue'; +import { defineComponent, InjectionKey } from 'vue'; import { createNamespace } from '../utils'; import { useChildren } from '@vant/use'; const [name, bem] = createNamespace('sidebar'); -export const SIDEBAR_KEY = Symbol(name); - export type SidebarProvide = { getActive: () => number; setActive: (value: number) => void; }; +export const SIDEBAR_KEY: InjectionKey = Symbol(name); + export default defineComponent({ name, diff --git a/src/step/Step.tsx b/src/step/Step.tsx index 4e0873fd9..02cf6a4ed 100644 --- a/src/step/Step.tsx +++ b/src/step/Step.tsx @@ -3,7 +3,7 @@ import { computed, defineComponent } from 'vue'; // Utils import { createNamespace } from '../utils'; import { BORDER } from '../utils/constant'; -import { STEPS_KEY, StepsProvide } from '../steps/Steps'; +import { STEPS_KEY } from '../steps/Steps'; // Composables import { useParent } from '@vant/use'; @@ -17,7 +17,7 @@ export default defineComponent({ name, setup(props, { slots }) { - const { parent, index } = useParent(STEPS_KEY); + const { parent, index } = useParent(STEPS_KEY); if (!parent) { if (process.env.NODE_ENV !== 'production') { diff --git a/src/steps/Steps.tsx b/src/steps/Steps.tsx index f53986329..1158e01d3 100644 --- a/src/steps/Steps.tsx +++ b/src/steps/Steps.tsx @@ -1,11 +1,9 @@ -import { PropType, defineComponent, ExtractPropTypes } from 'vue'; +import { PropType, defineComponent, ExtractPropTypes, InjectionKey } from 'vue'; import { createNamespace } from '../utils'; import { useChildren } from '@vant/use'; const [name, bem] = createNamespace('steps'); -export const STEPS_KEY = Symbol(name); - export type StepsDirection = 'horizontal' | 'vertical'; const props = { @@ -33,6 +31,8 @@ export type StepsProvide = { onClickStep: (index: number) => void; }; +export const STEPS_KEY: InjectionKey = Symbol(name); + export default defineComponent({ name, diff --git a/src/swipe-item/SwipeItem.tsx b/src/swipe-item/SwipeItem.tsx index c54a2a42e..9bb26e51a 100644 --- a/src/swipe-item/SwipeItem.tsx +++ b/src/swipe-item/SwipeItem.tsx @@ -9,7 +9,7 @@ import { // Utils import { createNamespace } from '../utils'; -import { SWIPE_KEY, SwipeProvide } from '../swipe/Swipe'; +import { SWIPE_KEY } from '../swipe/Swipe'; // Composables import { useParent } from '@vant/use'; @@ -28,7 +28,7 @@ export default defineComponent({ mounted: false, }); - const { parent, index } = useParent(SWIPE_KEY); + const { parent, index } = useParent(SWIPE_KEY); if (!parent) { if (process.env.NODE_ENV !== 'production') { diff --git a/src/swipe/Swipe.tsx b/src/swipe/Swipe.tsx index f5d4c9285..6f74c59c3 100644 --- a/src/swipe/Swipe.tsx +++ b/src/swipe/Swipe.tsx @@ -6,6 +6,7 @@ import { onMounted, ComputedRef, onActivated, + InjectionKey, CSSProperties, onDeactivated, onBeforeUnmount, @@ -20,7 +21,6 @@ import { truthProp, preventDefault, createNamespace, - ComponentInstance, } from '../utils'; // Composables @@ -36,8 +36,6 @@ import { onPopupReopen } from '../composables/on-popup-reopen'; const [name, bem] = createNamespace('swipe'); -export const SWIPE_KEY = Symbol(name); - const props = { loop: truthProp, width: [Number, String], @@ -73,6 +71,8 @@ export type SwipeProvide = { activeIndicator: ComputedRef; }; +export const SWIPE_KEY: InjectionKey = Symbol(name); + export default defineComponent({ name, @@ -93,8 +93,7 @@ export default defineComponent({ const touch = useTouch(); const windowSize = useWindowSize(); - const { children, linkChildren } = - useChildren(SWIPE_KEY); + const { children, linkChildren } = useChildren(SWIPE_KEY); const count = computed(() => children.length); diff --git a/src/tab/Tab.tsx b/src/tab/Tab.tsx index b7e29c977..1c580bc08 100644 --- a/src/tab/Tab.tsx +++ b/src/tab/Tab.tsx @@ -11,7 +11,7 @@ import { // Utils import { createNamespace, extend, unknownProp } from '../utils'; -import { TABS_KEY, TabsProvide } from '../tabs/Tabs'; +import { TABS_KEY } from '../tabs/Tabs'; // Composables import { useParent } from '@vant/use'; @@ -38,7 +38,7 @@ export default defineComponent({ setup(props, { slots }) { const inited = ref(false); - const { parent, index } = useParent(TABS_KEY); + const { parent, index } = useParent(TABS_KEY); if (!parent) { if (process.env.NODE_ENV !== 'production') { diff --git a/src/tabbar-item/TabbarItem.tsx b/src/tabbar-item/TabbarItem.tsx index 7c05df971..654547ad0 100644 --- a/src/tabbar-item/TabbarItem.tsx +++ b/src/tabbar-item/TabbarItem.tsx @@ -2,7 +2,7 @@ import { computed, getCurrentInstance, defineComponent } from 'vue'; // Utils import { createNamespace, extend, isObject } from '../utils'; -import { TABBAR_KEY, TabbarProvide } from '../tabbar/Tabbar'; +import { TABBAR_KEY } from '../tabbar/Tabbar'; // Composables import { useParent } from '@vant/use'; @@ -30,7 +30,7 @@ export default defineComponent({ setup(props, { emit, slots }) { const route = useRoute(); const vm = getCurrentInstance()!.proxy!; - const { parent, index } = useParent(TABBAR_KEY); + const { parent, index } = useParent(TABBAR_KEY); if (!parent) { if (process.env.NODE_ENV !== 'production') { diff --git a/src/tabbar/Tabbar.tsx b/src/tabbar/Tabbar.tsx index 8259ddc1a..9d44c924c 100644 --- a/src/tabbar/Tabbar.tsx +++ b/src/tabbar/Tabbar.tsx @@ -1,4 +1,10 @@ -import { ref, PropType, defineComponent, ExtractPropTypes } from 'vue'; +import { + ref, + PropType, + InjectionKey, + defineComponent, + ExtractPropTypes, +} from 'vue'; // Utils import { truthProp, createNamespace, getZIndexStyle } from '../utils'; @@ -11,8 +17,6 @@ import { usePlaceholder } from '../composables/use-placeholder'; const [name, bem] = createNamespace('tabbar'); -export const TABBAR_KEY = Symbol(name); - const props = { route: Boolean, fixed: truthProp, @@ -37,6 +41,8 @@ export type TabbarProvide = { setActive: (active: number | string) => void; }; +export const TABBAR_KEY: InjectionKey = Symbol(name); + export default defineComponent({ name, diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx index 4702d5012..05e6f5637 100644 --- a/src/tabs/Tabs.tsx +++ b/src/tabs/Tabs.tsx @@ -7,6 +7,7 @@ import { PropType, ComputedRef, onActivated, + InjectionKey, CSSProperties, defineComponent, ExtractPropTypes, @@ -51,8 +52,6 @@ import TabsContent from './TabsContent'; const [name, bem] = createNamespace('tabs'); -export const TABS_KEY = Symbol(name); - export type TabsType = 'line' | 'card'; const props = { @@ -100,6 +99,8 @@ export type TabsProvide = { currentName: ComputedRef; }; +export const TABS_KEY: InjectionKey = Symbol(name); + export default defineComponent({ name, @@ -119,7 +120,7 @@ export default defineComponent({ const windowSize = useWindowSize(); const scroller = useScrollParent(root); const [titleRefs, setTitleRefs] = useRefs(); - const { children, linkChildren } = useChildren(TABS_KEY); + const { children, linkChildren } = useChildren(TABS_KEY); const state = reactive({ inited: false,