@bagelink/vue 0.0.423 → 0.0.431

package/src/plugins/bagel.ts

@@ -4,6 +4,7 @@ import { inject } from 'vue';
 import type { InjectionKey, Plugin } from 'vue';
 import { Bagel } from '@bagelink/sdk';
 import clickOutside from '../utils/clickOutside';
+import { useLang } from '../utils';
 
 export const bagelInjectionKey = Symbol('bagel') as InjectionKey<Bagel>;
 export const i18nTInjectionKey = Symbol('bagel') as InjectionKey<
@@ -26,11 +27,14 @@ export function useI18nT() {
 }
 
 export interface BagelOptions {
-	host: string
+	availableLangs?: string[];
+	defaultLang?: string;
+	language?: string;
+	host: string;
 	// eslint-disable-next-line no-unused-vars
-	onError?: (err: Error) => void,
+	onError?: (err: Error) => void;
 	// eslint-disable-next-line no-unused-vars
-	i18nT?: (key: string) => string
+	i18nT?: (key: string) => string;
 }
 export const BagelVue: Plugin = {
 	install: (app, options: BagelOptions) => {
@@ -46,9 +50,14 @@ export const BagelVue: Plugin = {
 				},
 			},
 		});
+		const { availableLangs, defaultLang, lang } = useLang();
+		if (options.availableLangs) availableLangs.value = options.availableLangs;
+		if (options.defaultLang) defaultLang.value = options.defaultLang;
+		if (options.language) lang.value = options.language;
 		app.config.globalProperties.$bagel = bagel;
 		app.provide(bagelInjectionKey, bagel);
-		app.config.globalProperties.$i18T = options?.i18nT || ((key?: string) => key);
+		app.config.globalProperties.$i18T =
+			options?.i18nT || ((key?: string) => key);
 		app.provide(i18nTInjectionKey, options?.i18nT || ((key: string) => key));
 	},
 };

package/src/utils/index.ts

@@ -61,3 +61,5 @@ export const denullify = (itemData?: Record<string, any>, fieldID?: string) => (
 export { formatString } from './strings';
 
 export * as bagelFormUtils from './BagelFormUtils';
+
+export { useLang } from './lang';

package/src/utils/lang.ts

@@ -0,0 +1,39 @@
+import { reactive, computed } from 'vue';
+
+interface State {
+	defaultLang: string;
+	availableLangs: string[];
+	lang: string;
+}
+
+const state: State = reactive({
+	defaultLang: '',
+	availableLangs: [],
+	lang: 'en',
+});
+
+export function useLang() {
+	const lang = computed({
+		get: () => state.lang,
+		set: (val) => (state.lang = val),
+	});
+
+	const $tdb = (langEl: Record<string, any>) => langEl[state.lang] || langEl[state.defaultLang] || '';
+
+	const availableLangs = computed({
+		get: () => state.availableLangs,
+		set: (val) => (state.availableLangs = val),
+	});
+
+	const defaultLang = computed({
+		get: () => state.defaultLang,
+		set: (val) => (state.defaultLang = val),
+	});
+
+	return {
+		lang,
+		$tdb,
+		availableLangs,
+		defaultLang,
+	};
+}