@bagelink/vue 0.0.427 → 0.0.435

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/BagelFormUtils.ts

@@ -1,6 +1,10 @@
 import type { Field } from '@bagelink/vue';
 
-export type Option = string | number | Record<string, any> | { label: string, value: string | number };
+export type Option =
+	| string
+	| number
+	| Record<string, any>
+	| { label: string; value: string | number };
 
 interface InputOptions {
 	required?: boolean;
@@ -8,6 +12,7 @@ interface InputOptions {
 	class?: string;
 	defaultValue?: string;
 	disabled?: boolean;
+	helptext?: string;
 }
 
 interface TextInputOptions extends InputOptions {
@@ -27,9 +32,13 @@ interface NumFieldOptions extends InputOptions {
 	step?: number;
 }
 
-type RichTextOptions = InputOptions
+type RichTextOptions = InputOptions;
 
-export function richText(id: string, label?: string, options?: RichTextOptions) {
+export function richText(
+	id: string,
+	label?: string,
+	options?: RichTextOptions,
+) {
 	return {
 		$el: 'richtext',
 		class: options?.class,
@@ -41,7 +50,11 @@ export function richText(id: string, label?: string, options?: RichTextOptions)
 	};
 }
 
-export function txtField(id: string, label?: string, options?: TextInputOptions): Field {
+export function txtField(
+	id: string,
+	label?: string,
+	options?: TextInputOptions,
+): Field {
 	return {
 		$el: 'text',
 		class: options?.class,
@@ -49,11 +62,20 @@ export function txtField(id: string, label?: string, options?: TextInputOptions)
 		id,
 		label,
 		placeholder: options?.placeholder,
-		attrs: { type: options?.type, pattern: options?.pattern, multiline: options?.multiline },
+		attrs: {
+			type: options?.type,
+			pattern: options?.pattern,
+			multiline: options?.multiline,
+		},
 	};
 }
 
-export function slctField(id: string, label?: string, options?: Option[] | (() => Option[]), config?: SlctInputOptions): Field {
+export function slctField(
+	id: string,
+	label?: string,
+	options?: Option[] | (() => Option[]),
+	config?: SlctInputOptions,
+): Field {
 	return {
 		$el: 'select',
 		id,
@@ -63,11 +85,19 @@ export function slctField(id: string, label?: string, options?: Option[] | (() =
 		required: config?.required,
 		label,
 		defaultValue: config?.defaultValue,
-		attrs: { disabled: config?.disabled, searchable: config?.searchable, multiselect: config?.multiselect },
+		attrs: {
+			disabled: config?.disabled,
+			searchable: config?.searchable,
+			multiselect: config?.multiselect,
+		},
 	};
 }
 
-export function checkField(id: string, label?: string, options?: NumFieldOptions): Field {
+export function checkField(
+	id: string,
+	label?: string,
+	options?: NumFieldOptions,
+): Field {
 	return {
 		$el: 'check',
 		class: options?.class,
@@ -77,7 +107,11 @@ export function checkField(id: string, label?: string, options?: NumFieldOptions
 	};
 }
 
-export function numField(id: string, label?: string, options?: NumFieldOptions): Field {
+export function numField(
+	id: string,
+	label?: string,
+	options?: NumFieldOptions,
+): Field {
 	return {
 		$el: 'text',
 		class: options?.class,
@@ -92,7 +126,7 @@ export function numField(id: string, label?: string, options?: NumFieldOptions):
 export function frmRow(...children: Field[]) {
 	return {
 		$el: 'div',
-		class: 'flex gap-1 m_block mt-1',
+		class: 'flex gap-1 m_block',
 		children,
 	};
 }

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,
+	};
+}