naive-ui
Version:
A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast
214 lines • 8.14 kB
JavaScript
import { computed, defineComponent, h, inject, markRaw, provide } from 'vue';
import { useMemo } from 'vooks';
import { merge } from 'lodash-es';
import { hash } from 'css-render';
import { warn } from "../../_utils/index.mjs";
import { defaultClsPrefix } from "../../_mixins/index.mjs";
import { configProviderInjectionKey } from "./context.mjs";
export const configProviderProps = {
abstract: Boolean,
bordered: {
type: Boolean,
default: undefined
},
clsPrefix: String,
locale: Object,
dateLocale: Object,
namespace: String,
rtl: Array,
tag: {
type: String,
default: 'div'
},
hljs: Object,
katex: Object,
theme: Object,
themeOverrides: Object,
componentOptions: Object,
icons: Object,
breakpoints: Object,
preflightStyleDisabled: Boolean,
styleMountTarget: Object,
inlineThemeDisabled: {
type: Boolean,
default: undefined
},
// deprecated
as: {
type: String,
validator: () => {
warn('config-provider', '`as` is deprecated, please use `tag` instead.');
return true;
},
default: undefined
}
};
export default defineComponent({
name: 'ConfigProvider',
alias: ['App'],
props: configProviderProps,
setup(props) {
const NConfigProvider = inject(configProviderInjectionKey, null);
const mergedThemeRef = computed(() => {
const {
theme
} = props;
if (theme === null) return undefined;
const inheritedTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeRef.value;
return theme === undefined ? inheritedTheme : inheritedTheme === undefined ? theme : Object.assign({}, inheritedTheme, theme);
});
const mergedThemeOverridesRef = computed(() => {
const {
themeOverrides
} = props;
// stop inheriting themeOverrides
if (themeOverrides === null) return undefined;
// use inherited themeOverrides
if (themeOverrides === undefined) {
return NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeOverridesRef.value;
} else {
const inheritedThemeOverrides = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeOverridesRef.value;
if (inheritedThemeOverrides === undefined) {
// no inherited, use self overrides
return themeOverrides;
} else {
// merge overrides
return merge({}, inheritedThemeOverrides, themeOverrides);
}
}
});
const mergedNamespaceRef = useMemo(() => {
const {
namespace
} = props;
return namespace === undefined ? NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedNamespaceRef.value : namespace;
});
const mergedBorderedRef = useMemo(() => {
const {
bordered
} = props;
return bordered === undefined ? NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBorderedRef.value : bordered;
});
const mergedIconsRef = computed(() => {
const {
icons
} = props;
return icons === undefined ? NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedIconsRef.value : icons;
});
const mergedComponentPropsRef = computed(() => {
const {
componentOptions
} = props;
if (componentOptions !== undefined) return componentOptions;
return NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value;
});
const mergedClsPrefixRef = computed(() => {
const {
clsPrefix
} = props;
if (clsPrefix !== undefined) return clsPrefix;
if (NConfigProvider) return NConfigProvider.mergedClsPrefixRef.value;
return defaultClsPrefix;
});
const mergedRtlRef = computed(() => {
var _a;
const {
rtl
} = props;
if (rtl === undefined) {
return NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef.value;
}
const rtlEnabledState = {};
for (const rtlInfo of rtl) {
rtlEnabledState[rtlInfo.name] = markRaw(rtlInfo);
(_a = rtlInfo.peers) === null || _a === void 0 ? void 0 : _a.forEach(peerRtlInfo => {
if (!(peerRtlInfo.name in rtlEnabledState)) {
rtlEnabledState[peerRtlInfo.name] = markRaw(peerRtlInfo);
}
});
}
return rtlEnabledState;
});
const mergedBreakpointsRef = computed(() => {
return props.breakpoints || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBreakpointsRef.value);
});
const inlineThemeDisabled = props.inlineThemeDisabled || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.inlineThemeDisabled);
const preflightStyleDisabled = props.preflightStyleDisabled || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.preflightStyleDisabled);
const styleMountTarget = props.styleMountTarget || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.styleMountTarget);
const mergedThemeHashRef = computed(() => {
const {
value: theme
} = mergedThemeRef;
const {
value: mergedThemeOverrides
} = mergedThemeOverridesRef;
const hasThemeOverrides = mergedThemeOverrides && Object.keys(mergedThemeOverrides).length !== 0;
const themeName = theme === null || theme === void 0 ? void 0 : theme.name;
if (themeName) {
if (hasThemeOverrides) {
return `${themeName}-${hash(JSON.stringify(mergedThemeOverridesRef.value))}`;
}
return themeName;
} else {
if (hasThemeOverrides) {
return hash(JSON.stringify(mergedThemeOverridesRef.value));
}
return '';
}
});
provide(configProviderInjectionKey, {
mergedThemeHashRef,
mergedBreakpointsRef,
mergedRtlRef,
mergedIconsRef,
mergedComponentPropsRef,
mergedBorderedRef,
mergedNamespaceRef,
mergedClsPrefixRef,
mergedLocaleRef: computed(() => {
const {
locale
} = props;
if (locale === null) return undefined;
return locale === undefined ? NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedLocaleRef.value : locale;
}),
mergedDateLocaleRef: computed(() => {
const {
dateLocale
} = props;
if (dateLocale === null) return undefined;
return dateLocale === undefined ? NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedDateLocaleRef.value : dateLocale;
}),
mergedHljsRef: computed(() => {
const {
hljs
} = props;
return hljs === undefined ? NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedHljsRef.value : hljs;
}),
mergedKatexRef: computed(() => {
const {
katex
} = props;
return katex === undefined ? NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedKatexRef.value : katex;
}),
mergedThemeRef,
mergedThemeOverridesRef,
inlineThemeDisabled: inlineThemeDisabled || false,
preflightStyleDisabled: preflightStyleDisabled || false,
styleMountTarget
});
return {
mergedClsPrefix: mergedClsPrefixRef,
mergedBordered: mergedBorderedRef,
mergedNamespace: mergedNamespaceRef,
mergedTheme: mergedThemeRef,
mergedThemeOverrides: mergedThemeOverridesRef
};
},
render() {
var _a, _b, _c, _d;
return !this.abstract ? h(this.as || this.tag, {
class: `${this.mergedClsPrefix || defaultClsPrefix}-config-provider`
}, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a)) : (_d = (_c = this.$slots).default) === null || _d === void 0 ? void 0 : _d.call(_c);
}
});