element-plus
Version:
> TODO: description
83 lines (82 loc) • 2.51 kB
JavaScript
import { computed, getCurrentInstance, inject, provide, ref, } from 'vue';
import English from '../../locale/lang/en';
export const useLocaleProps = {
locale: {
type: Object,
},
};
export const LocaleInjectionKey = 'ElLocaleInjection';
// this is meant to fix global methods like `ElMessage(opts)`, this way we can inject current locale
// into the component as default injection value.
// refer to: https://github.com/element-plus/element-plus/issues/2610#issuecomment-887965266
let localeObjCache;
function translate(path, option, current) {
const paths = path.split('.');
let value;
for (let i = 0, j = paths.length; i < j; i++) {
const property = paths[i];
value = current[property];
if (i === j - 1)
return template(value, option);
if (!value)
return '';
current = value;
}
}
export const useLocale = () => {
const vm = getCurrentInstance();
const props = vm.props;
const locale = computed(() => props.locale || English);
const lang = computed(() => locale.value.name);
const _translator = (...args) => {
const [path, option] = args;
return translate(path, option, locale.value);
};
const t = (...args) => {
return _translator(...args);
};
const provides = {
locale,
lang,
t,
};
// this could be broken if someone tries to do following:
/**
* <config-provider :locale="lang1">
* <config-provider :locale="lang2">
* Something calls modal component.
* </config-provider>
* </config-provider>
*/
localeObjCache = provides;
provide(LocaleInjectionKey, provides);
};
function template(str, option) {
if (!str || !option)
return str;
return str.replace(/\{(\w+)\}/g, (_, key) => {
return option[key];
});
}
export const localeProviderMaker = (locale = English) => {
const lang = ref(locale.name);
const localeRef = ref(locale);
return {
lang,
locale: localeRef,
t: (...args) => {
const [path, option] = args;
return translate(path, option, localeRef.value);
},
};
};
export const useLocaleInject = () => {
return inject(LocaleInjectionKey, localeObjCache || {
lang: ref(English.name),
locale: ref(English),
t: (...args) => {
const [path, option] = args;
return translate(path, option, English);
},
});
};