feat: WIP messages from php to i18n

This commit is contained in:
Zack Spear
2023-08-01 18:04:56 -07:00
committed by Zack Spear
parent 2b81cd819d
commit c752544414
2 changed files with 20 additions and 16 deletions

View File

@@ -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>

View File

@@ -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>