mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-12 12:25:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(config-provider): remove provide(reactive) pattern

Browse Source
This commit is contained in:
07akioni 2021-04-20 23:36:37 +08:00
parent d9b50209bd
commit 728a9bb71d
17 changed files with 141 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/_internal/icons/replaceable.tsx
View File

@ -10,7 +10,7 @@ export function replaceable (name: keyof GlobalIconConfig, icon: JSX.Element) {
setup () {
const { NConfigProvider } = useConfig()
return () => {
const iconOverride = NConfigProvider?.mergedIcons?.[name]
const iconOverride = NConfigProvider?.mergedIconsRef.value?.[name]
return iconOverride ? iconOverride() : icon
}
}

10
src/_mixins/use-config.ts
View File

@ -28,12 +28,16 @@ export default function useConfig (
mergedBordered: computed(() => {
const { bordered } = props
if (bordered !== undefined) return bordered
return NConfigProvider?.mergedBordered ?? options.defaultBordered ?? true
return (
NConfigProvider?.mergedBorderedRef.value ??
options.defaultBordered ??
true
)
}),
mergedClsPrefix: computed(() => {
const clsPrefix = NConfigProvider?.mergedClsPrefix
const clsPrefix = NConfigProvider?.mergedClsPrefixRef.value
return clsPrefix || defaultClsPrefix
}),
namespace: computed(() => NConfigProvider?.mergedNamespace)
namespace: computed(() => NConfigProvider?.mergedNamespaceRef.value)
}
}

4
src/_mixins/use-hljs.ts
View File

@ -16,10 +16,10 @@ export default function useHljs (
props: UseHljsProps
): ComputedRef<Hljs | undefined> {
const NConfigProvider = inject(configProviderInjectionKey, null)
if (__DEV__ && !props.hljs && !NConfigProvider?.mergedHljs) {
if (__DEV__ && !props.hljs && !NConfigProvider?.mergedHljsRef.value) {
warn('code', 'hljs is not set.')
}
return computed(() => {
return (props.hljs as any) || NConfigProvider?.mergedHljs
return (props.hljs as any) || NConfigProvider?.mergedHljsRef.value
})
}

9
src/_mixins/use-locale.ts
View File

@ -10,13 +10,12 @@ export default function createLocaleMixin<T extends keyof typeof enUS> (
} {
const NConfigProvider = inject(configProviderInjectionKey, null)
const localeRef = computed(() => {
const { mergedLocale } = NConfigProvider || {}
if (mergedLocale) return mergedLocale[ns]
return enUS[ns]
const { mergedLocaleRef } = NConfigProvider || {}
return mergedLocaleRef?.value?.[ns] ?? enUS[ns]
})
const dateLocaleRef = computed(() => {
const { mergedDateLocale } = NConfigProvider || {}
return mergedDateLocale ?? dateEnUS
const { mergedDateLocaleRef } = NConfigProvider || {}
return mergedDateLocaleRef?.value ?? dateEnUS
})
return {
dateLocale: dateLocaleRef,

22
src/_mixins/use-theme.ts
View File

@ -121,19 +121,17 @@ function useTheme<N, T, R> (
} = props
const { common: selfCommonOverrides, peers: peersOverrides } = selfOverrides
const {
mergedTheme: {
common: globalCommon = undefined,
[resolveId]: {
common: globalSelfCommon = undefined,
self: globalSelf = undefined,
peers: globalPeers = {}
} = {}
} = {},
mergedThemeOverrides: {
common: globalCommonOverrides = undefined,
[resolveId]: globalSelfOverrides = {}
common: globalCommon = undefined,
[resolveId]: {
common: globalSelfCommon = undefined,
self: globalSelf = undefined,
peers: globalPeers = {}
} = {}
} = NConfigProvider || {}
} = NConfigProvider?.mergedThemeRef.value || {}
const {
common: globalCommonOverrides = undefined,
[resolveId]: globalSelfOverrides = {}
} = NConfigProvider?.mergedThemeOverridesRef.value || {}
const {
common: globalSelfCommonOverrides,
peers: globalPeersOverrides = {}

8
src/config-consumer/src/ConfigConsumer.ts
View File

@ -1,4 +1,4 @@
import { defineComponent, inject, toRef, watch, PropType } from 'vue'
import { defineComponent, inject, watch, PropType } from 'vue'
import { configProviderInjectionKey } from '../../config-provider/src/ConfigProvider'
import useLegacy, { OnLanguageChange } from './use-legacy'
@ -24,7 +24,7 @@ export default defineComponent({
setup (props) {
const NConfigProvider = inject(configProviderInjectionKey, null)
if (NConfigProvider) {
watch(toRef(NConfigProvider, 'mergedNamespace'), (value, oldValue) => {
watch(NConfigProvider.mergedNamespaceRef, (value, oldValue) => {
const { onNamespaceChange } = props
if (onNamespaceChange) onNamespaceChange(value, oldValue)
})
@ -39,7 +39,9 @@ export default defineComponent({
const { NConfigProvider } = this
return defaultSlot
? defaultSlot({
namespace: NConfigProvider ? NConfigProvider.mergedNamespace : null,
namespace: NConfigProvider
? NConfigProvider.mergedNamespaceRef.value
: null,
// deprecated
theme: this.legacyTheme,
language: this.legacyLanguage,

24
src/config-consumer/src/use-legacy.ts
View File

@ -1,4 +1,4 @@
import { computed, watch, toRef, ComputedRef } from 'vue'
import { computed, watch, ComputedRef } from 'vue'
import { ConfigProviderInjection } from '../../config-provider/src/internal-interface'
import styleScheme from '../../_deprecated/style-scheme'
@ -23,27 +23,31 @@ export default function useLegacy (
props?: UseLegacyProps
): UseLegacy {
if (NConfigProvider && props) {
watch(toRef(NConfigProvider, 'mergedLanguage'), (value, oldValue) => {
watch(NConfigProvider.mergedLanguageRef, (value, oldValue) => {
const { onLanguageChange } = props
if (onLanguageChange) onLanguageChange(value, oldValue)
})
}
return {
legacyTheme: computed(() => {
return NConfigProvider?.mergedLegacyTheme || 'light'
return NConfigProvider?.mergedLegacyThemeRef.value || 'light'
}),
legacyLanguage: computed(() => {
return NConfigProvider ? NConfigProvider.mergedLanguage : undefined
return NConfigProvider
? NConfigProvider.mergedLanguageRef.value
: undefined
}),
legacyThemeEnvironment: computed(() => {
const { mergedThemeEnvironments, mergedLegacyTheme } =
NConfigProvider || {}
return mergedThemeEnvironments
? mergedThemeEnvironments[mergedLegacyTheme || 'light']
: null
return (
NConfigProvider?.mergedThemeEnvironmentsRef.value?.[
NConfigProvider.mergedLegacyThemeRef.value || 'light'
] ?? null
)
}),
legacyStyleScheme: computed(() => {
return (styleScheme as any)[NConfigProvider?.mergedLegacyTheme || 'light']
return (styleScheme as any)[
NConfigProvider?.mergedLegacyThemeRef.value || 'light'
]
})
}
}

121
src/config-provider/src/ConfigProvider.ts
View File

@ -5,7 +5,6 @@ import {
defineComponent,
PropType,
provide,
reactive,
InjectionKey,
renderSlot
} from 'vue'
@ -111,7 +110,7 @@ export default defineComponent({
const mergedThemeRef = computed(() => {
const { theme } = props
if (theme === null) return undefined
return theme === undefined ? NConfigProvider?.mergedTheme : theme
return theme === undefined ? NConfigProvider?.mergedThemeRef.value : theme
})
const mergedThemeOverridesRef = computed(() => {
const { themeOverrides } = props
@ -119,9 +118,10 @@ export default defineComponent({
if (themeOverrides === null) return undefined
// use inherited themeOverrides
if (themeOverrides === undefined) {
return NConfigProvider?.mergedThemeOverrides
return NConfigProvider?.mergedThemeOverridesRef.value
} else {
const inheritedThemeOverrides = NConfigProvider?.mergedThemeOverrides
const inheritedThemeOverrides =
NConfigProvider?.mergedThemeOverridesRef.value
if (inheritedThemeOverrides === undefined) {
// no inherited, use self overrides
return themeOverrides
@ -134,78 +134,79 @@ export default defineComponent({
const mergedNamespaceRef = useMemo(() => {
const { namespace } = props
return namespace === undefined
? NConfigProvider?.mergedNamespace
? NConfigProvider?.mergedNamespaceRef.value
: namespace
})
const mergedBorderedRef = useMemo(() => {
const { bordered } = props
return bordered === undefined ? NConfigProvider?.mergedBordered : bordered
return bordered === undefined
? NConfigProvider?.mergedBorderedRef.value
: bordered
})
const mergedIconsRef = computed(() => {
const { icons } = props
return icons === undefined ? NConfigProvider?.mergedIcons : icons
return icons === undefined ? NConfigProvider?.mergedIconsRef.value : icons
})
const mergedComponentPropsRef = computed(() => {
const { componentOptions } = props
if (componentOptions !== undefined) return componentOptions
return NConfigProvider?.mergedComponentProps
return NConfigProvider?.mergedComponentPropsRef.value
})
const mergedClsPrefixRef = computed(() => {
const { clsPrefix } = props
return NConfigProvider?.mergedClsPrefix ?? clsPrefix
return NConfigProvider?.mergedClsPrefixRef.value ?? clsPrefix
})
provide(
configProviderInjectionKey,
reactive({
mergedIcons: mergedIconsRef,
mergedComponentProps: mergedComponentPropsRef,
mergedBordered: mergedBorderedRef,
mergedNamespace: mergedNamespaceRef,
mergedClsPrefix: mergedClsPrefixRef,
mergedLocale: computed(() => {
const { locale } = props
if (locale === null) return undefined
return locale === undefined ? NConfigProvider?.mergedLocale : locale
}),
mergedDateLocale: computed(() => {
const { dateLocale } = props
if (dateLocale === null) return undefined
return dateLocale === undefined
? NConfigProvider?.mergedDateLocale
: dateLocale
}),
mergedHljs: computed(() => {
const { hljs } = props
return hljs === undefined ? NConfigProvider?.mergedHljs : hljs
}),
// wip, unstable
mergedTheme: mergedThemeRef,
mergedThemeOverrides: mergedThemeOverridesRef,
// deprecated
mergedLegacyTheme: useMemo(() => {
const { legacyTheme } = props
return legacyTheme === undefined
? NConfigProvider?.mergedTheme
: legacyTheme
}),
mergedLanguage: useMemo(() => {
const { language, lang } = props
return language === undefined
? lang === undefined
? NConfigProvider?.mergedLanguage
: lang
: language
}),
mergedThemeEnvironments: computed(() => {
const { themeEnvironments, themeEnvironment } = props
return themeEnvironments === undefined
? themeEnvironment === undefined
? NConfigProvider?.mergedThemeEnvironments
: themeEnvironment
: themeEnvironments
})
provide(configProviderInjectionKey, {
mergedIconsRef,
mergedComponentPropsRef,
mergedBorderedRef,
mergedNamespaceRef,
mergedClsPrefixRef,
mergedLocaleRef: computed(() => {
const { locale } = props
if (locale === null) return undefined
return locale === undefined
? NConfigProvider?.mergedLocaleRef.value
: locale
}),
mergedDateLocaleRef: computed(() => {
const { dateLocale } = props
if (dateLocale === null) return undefined
return dateLocale === undefined
? NConfigProvider?.mergedDateLocaleRef.value
: dateLocale
}),
mergedHljsRef: computed(() => {
const { hljs } = props
return hljs === undefined ? NConfigProvider?.mergedHljsRef.value : hljs
}),
// wip, unstable
mergedThemeRef,
mergedThemeOverridesRef,
// deprecated
mergedLegacyThemeRef: useMemo(() => {
const { legacyTheme } = props
return legacyTheme === undefined
? NConfigProvider?.mergedLegacyThemeRef.value
: legacyTheme
}),
mergedLanguageRef: useMemo(() => {
const { language, lang } = props
return language === undefined
? lang === undefined
? NConfigProvider?.mergedLanguageRef.value
: lang
: language
}),
mergedThemeEnvironmentsRef: computed(() => {
const { themeEnvironments, themeEnvironment } = props
return themeEnvironments === undefined
? themeEnvironment === undefined
? NConfigProvider?.mergedThemeEnvironmentsRef.value
: themeEnvironment
: themeEnvironments
})
)
})
return {
mergedClsPrefix: mergedClsPrefixRef,
mergedBordered: mergedBorderedRef,

28
src/config-provider/src/internal-interface.ts
View File

@ -1,4 +1,4 @@
import { VNodeChild } from 'vue'
import { VNodeChild, Ref } from 'vue'
import type { AlertTheme } from '../../alert/styles'
import type { AnchorTheme } from '../../anchor/styles'
import type { AutoCompleteTheme } from '../../auto-complete/styles'
@ -201,21 +201,21 @@ export interface GlobalIconConfig {
}
export interface ConfigProviderInjection {
mergedClsPrefix: string | undefined
mergedBordered: boolean | undefined
mergedNamespace: string | undefined
mergedLocale: NLocale | undefined
mergedDateLocale: NDateLocale | undefined
mergedHljs: Hljs | undefined
mergedComponentProps: GlobalComponentConfig | undefined
mergedIcons: GlobalIconConfig | undefined
mergedTheme: GlobalTheme | undefined
mergedThemeOverrides: GlobalThemeOverrides | undefined
mergedClsPrefixRef: Ref<string | undefined>
mergedBorderedRef: Ref<boolean | undefined>
mergedNamespaceRef: Ref<string | undefined>
mergedLocaleRef: Ref<NLocale | undefined>
mergedDateLocaleRef: Ref<NDateLocale | undefined>
mergedHljsRef: Ref<Hljs | undefined>
mergedComponentPropsRef: Ref<GlobalComponentConfig | undefined>
mergedIconsRef: Ref<GlobalIconConfig | undefined>
mergedThemeRef: Ref<GlobalTheme | undefined>
mergedThemeOverridesRef: Ref<GlobalThemeOverrides | undefined>
// deprecated
/** @deprecated */
mergedLegacyTheme: string | undefined
mergedLegacyThemeRef: Ref<string | undefined>
/** @deprecated */
mergedLanguage: string | undefined
mergedLanguageRef: Ref<string | undefined>
/** @deprecated */
mergedThemeEnvironments: any | undefined
mergedThemeEnvironmentsRef: Ref<any | undefined>
}

4
src/data-table/src/HeaderButton/FilterButton.tsx
View File

@ -69,8 +69,8 @@ export default defineComponent({
})
const mergedRenderFilterRef = computed(() => {
return (
NConfigProvider?.mergedComponentProps?.DataTable?.renderFilter ||
props.column.renderFilter
NConfigProvider?.mergedComponentPropsRef.value?.DataTable
?.renderFilter || props.column.renderFilter
)
})
function handleFilterChange (

4
src/data-table/src/HeaderButton/SortButton.tsx
View File

@ -32,8 +32,8 @@ export default defineComponent({
})
const mergedRenderSorterRef = computed(() => {
return (
NConfigProvider?.mergedComponentProps?.DataTable?.renderSorter ||
props.column.renderSorter
NConfigProvider?.mergedComponentPropsRef.value?.DataTable
?.renderSorter || props.column.renderSorter
)
})
return {

4
src/date-picker/src/DatePicker.tsx
View File

@ -161,8 +161,8 @@ export default defineComponent({
})
const timePickerSizeRef = computed<TimePickerSize>(() => {
return (
NConfigProvider?.mergedComponentProps?.DatePicker?.timePickerSize ||
'small'
NConfigProvider?.mergedComponentPropsRef.value?.DatePicker
?.timePickerSize || 'small'
)
})
const isRangeRef = computed(() => {

2
src/dialog/src/Dialog.tsx
View File

@ -88,7 +88,7 @@ export default defineComponent({
const { iconPlacement } = props
return (
iconPlacement ??
NConfigProvider?.mergedComponentProps?.Dialog?.iconPlacement ??
NConfigProvider?.mergedComponentPropsRef.value?.Dialog?.iconPlacement ??
'left'
)
})

9
src/dynamic-input/src/DynamicInput.tsx
View File

@ -131,6 +131,10 @@ export default defineComponent({
if (Array.isArray(mergedValue)) return mergedValue.length <= props.min
return true
})
const buttonSizeRef = computed(() => {
return NConfigProvider?.mergedComponentPropsRef.value?.DynamicInput
?.buttonSize
})
function doUpdateValue (value: any[]): void {
const { onInput, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props
if (onInput) call(onInput, value)
@ -217,8 +221,8 @@ export default defineComponent({
})
return {
...useLocale('DynamicInput'),
buttonSize: buttonSizeRef,
mergedClsPrefix,
NConfigProvider,
NFormItem,
uncontrolledValue: uncontrolledValueRef,
mergedValue: mergedValueRef,
@ -242,6 +246,7 @@ export default defineComponent({
},
render () {
const {
buttonSize,
mergedClsPrefix,
mergedValue,
locale,
@ -256,8 +261,6 @@ export default defineComponent({
remove,
createItem
} = this
const buttonSize = this.NConfigProvider?.mergedComponentProps?.DynamicInput
?.buttonSize
return (
<div
class={`${mergedClsPrefix}-dynamic-input`}

4
src/global-style/src/GlobalStyle.ts
View File

@ -29,8 +29,8 @@ export default defineComponent({
} = NConfigProvider
? merge(
{},
NConfigProvider.mergedTheme?.common || commonLight,
NConfigProvider.mergedThemeOverrides?.common
NConfigProvider.mergedThemeRef.value?.common || commonLight,
NConfigProvider.mergedThemeOverridesRef.value?.common
)
: commonLight
if (styleApplied || !body.hasAttribute('n-styled')) {

6
src/pagination/src/Pagination.tsx
View File

@ -144,12 +144,14 @@ export default defineComponent({
})
const inputSizeRef = computed<InputSize>(() => {
return (
NConfigProvider?.mergedComponentProps?.Pagination?.inputSize || 'small'
NConfigProvider?.mergedComponentPropsRef.value?.Pagination?.inputSize ||
'small'
)
})
const selectSizeRef = computed<SelectSize>(() => {
return (
NConfigProvider?.mergedComponentProps?.Pagination?.selectSize || 'small'
NConfigProvider?.mergedComponentPropsRef.value?.Pagination
?.selectSize || 'small'
)
})

7
src/theme-editor/src/ThemeEditor.tsx
View File

@ -61,8 +61,9 @@ export default defineComponent({
const { NConfigProvider } = useConfig()
const theme = computed(() => {
const mergedTheme: GlobalTheme =
NConfigProvider?.mergedTheme || lightTheme
const mergedThemeOverrides = NConfigProvider?.mergedThemeOverrides
NConfigProvider?.mergedThemeRef.value || lightTheme
const mergedThemeOverrides =
NConfigProvider?.mergedThemeOverridesRef.value
const common = merge(
{},
mergedTheme.common || lightTheme.common,
@ -87,7 +88,7 @@ export default defineComponent({
return overrides
})
const themeCommonDefaultRef = computed(() => {
return NConfigProvider?.mergedTheme?.common || lightTheme.common
return NConfigProvider?.mergedThemeRef.value?.common || lightTheme.common
})
const showPanelRef = ref(false)
const overridesRef = ref<any>(