mirror of
https://github.com/unraid/api.git
synced 2026-03-13 13:38:51 -05:00
feat: WIP messages from php to i18n
This commit is contained in:
@@ -9,6 +9,7 @@ const defaultLocale = 'en_US'; // ja, en_US
|
||||
const i18n = createI18n<false>({
|
||||
legacy: false, // must set to `false`
|
||||
locale: defaultLocale,
|
||||
fallbackLocale: defaultLocale,
|
||||
messages: {
|
||||
en_US, // eslint-disable-line camelcase
|
||||
// ja,
|
||||
@@ -19,13 +20,24 @@ provide(I18nInjectionKey, i18n);
|
||||
|
||||
export interface Props {
|
||||
locale?: string;
|
||||
messages?: string;
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
locale: defaultLocale,
|
||||
messages: '',
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
i18n.global.locale.value = props.locale;
|
||||
onBeforeMount(() => {
|
||||
if (props.messages) {
|
||||
try {
|
||||
const parsedMessages = JSON.parse(decodeURIComponent(props.messages));
|
||||
i18n.global.locale.value = Object.keys(parsedMessages)[0];
|
||||
i18n.global.setLocaleMessage(Object.keys(parsedMessages)[0], parsedMessages);
|
||||
console.debug('[i18nHost] Messages parsed and set', Object.keys(parsedMessages)[0], parsedMessages);
|
||||
} catch (error) {
|
||||
console.error('[i18nHost] Failed to parse messages', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -11,13 +11,13 @@ import type { Server } from '~/types/server';
|
||||
import 'tailwindcss/tailwind.css';
|
||||
import '~/assets/main.css';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
export interface Props {
|
||||
server?: Server | string;
|
||||
}
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const callbackStore = useCallbackStore();
|
||||
const dropdownStore = useDropdownStore();
|
||||
const serverStore = useServerStore();
|
||||
@@ -28,9 +28,7 @@ const { bannerGradient, theme } = storeToRefs(useThemeStore());
|
||||
|
||||
/**
|
||||
* Close dropdown when clicking outside
|
||||
* @note
|
||||
* If in testing you have two variants of the component on a page
|
||||
* the clickOutside will fire twice making it seem like it doesn't work
|
||||
* @note If in testing you have two variants of the component on a page the clickOutside will fire twice making it seem like it doesn't work
|
||||
*/
|
||||
const clickOutsideTarget = ref();
|
||||
const clickOutsideIgnoreTarget = ref();
|
||||
@@ -58,26 +56,20 @@ watch(showCopyNotSupported, (newVal, oldVal) => {
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* Sets the server store and locale messages then listen for callbacks
|
||||
*/
|
||||
onBeforeMount(() => {
|
||||
// console.debug('[onBeforeMount]', { props }, typeof props.server);
|
||||
if (!props.server) {
|
||||
throw new Error('Server data not present');
|
||||
}
|
||||
/**
|
||||
* Set props from web component in store so the data is available throughout other components
|
||||
*/
|
||||
|
||||
if (typeof props.server === 'object') { // Handles the testing dev Vue component
|
||||
serverStore.setServer(props.server);
|
||||
} else if (typeof props.server === 'string') { // Handle web component
|
||||
const parsedServerProp = JSON.parse(props.server);
|
||||
serverStore.setServer(parsedServerProp);
|
||||
}
|
||||
/**
|
||||
* Listen for callbacks, if we receive one that needs to be acted upon the store will display
|
||||
* the feedback modal to show the user something is happening behind the scenes.
|
||||
*/
|
||||
|
||||
callbackStore.watcher();
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user