@bagelink/vue 0.0.466 → 0.0.471

package/src/components/layout/tabsManager.ts

@@ -1,18 +1,18 @@
-import { reactive, computed } from 'vue';
+import { computed, reactive } from 'vue'
 
-const state = reactive(new Map());
+const state = reactive(new Map())
 
 export function useTabs(group: string) {
 	if (!state.has(group)) {
-		state.set(group, reactive({ currentTab: null }));
+		state.set(group, reactive({ currentTab: null }))
 	}
 
 	const currentTab = computed({
 		get: () => state.get(group).currentTab,
 		set: (val) => {
-			state.get(group).currentTab = val;
+			state.get(group).currentTab = val
 		},
-	});
+	})
 
-	return { currentTab };
+	return { currentTab }
 }

package/src/index.ts

@@ -1,9 +1,14 @@
 export {
-	BagelVue, type BagelOptions, bagelInjectionKey, useBagel, useI18nT, i18nTInjectionKey,
-} from './plugins/bagel';
-export { ModalPlugin, useModal } from './plugins/modal';
-export * from './utils';
-export * from './types';
-export * from './components';
-export * from './utils/allCountries';
-import './styles/bagel.css';
+	BagelVue,
+	type BagelOptions,
+	bagelInjectionKey,
+	useBagel,
+	useI18nT,
+	i18nTInjectionKey,
+} from './plugins/bagel'
+export { ModalPlugin, useModal } from './plugins/modal'
+export * from './utils'
+export * from './types'
+export * from './components'
+export * from './utils/allCountries'
+import './styles/bagel.css'

package/src/plugins/bagel.ts

@@ -1,45 +1,45 @@
 // import { vTooltip } from 'floating-vue';
-import FloatingVue from 'floating-vue';
-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>;
+import FloatingVue from 'floating-vue'
+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<
-	// eslint-disable-next-line no-unused-vars
+
 	(key: string) => string
->;
+>
 
 export function useBagel() {
-	const bagel = inject(bagelInjectionKey);
-	if (!bagel) throw new Error('No bagel provided');
+	const bagel = inject(bagelInjectionKey)
+	if (!bagel) throw new Error('No bagel provided')
 
-	return bagel;
+	return bagel
 }
 
 export function useI18nT() {
-	const i18nT = inject(i18nTInjectionKey);
-	if (!i18nT) throw new Error('No i18nT provided');
+	const i18nT = inject(i18nTInjectionKey)
+	if (!i18nT) throw new Error('No i18nT provided')
 
-	return i18nT;
+	return i18nT
 }
 
 export interface BagelOptions {
-	availableLangs?: string[];
-	defaultLang?: string;
-	language?: string;
-	host: string;
-	// eslint-disable-next-line no-unused-vars
-	onError?: (err: Error) => void;
-	// eslint-disable-next-line no-unused-vars
-	i18nT?: (key: string) => string;
+	availableLangs?: string[]
+	defaultLang?: string
+	language?: string
+	host: string
+
+	onError?: (err: Error) => void
+
+	i18nT?: (key: string) => string
 }
 export const BagelVue: Plugin = {
 	install: (app, options: BagelOptions) => {
-		const bagel = new Bagel({ host: options.host, onError: options.onError });
-		app.directive('click-outside', clickOutside);
+		const bagel = new Bagel({ host: options.host, onError: options.onError })
+		app.directive('click-outside', clickOutside)
 
 		app.use(FloatingVue, {
 			themes: {
@@ -49,15 +49,15 @@ export const BagelVue: Plugin = {
 					placement: 'bottom',
 				},
 			},
-		});
-		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.provide(i18nTInjectionKey, options?.i18nT || ((key: string) => key));
+		})
+		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.provide(i18nTInjectionKey, options.i18nT || ((key: string) => key))
 	},
-};
+}

package/src/plugins/modal.ts

@@ -1,87 +1,86 @@
-import {
-	h, InjectionKey, inject, defineComponent,
-} from 'vue';
-import type { Plugin } from 'vue';
-import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue';
-import { Modal, ModalForm, ModalConfirm } from '@bagelink/vue';
+import { defineComponent, h, inject,
+} from 'vue'
+import type { InjectionKey,	Plugin } from 'vue'
+import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue'
+import { Modal, ModalConfirm, ModalForm } from '@bagelink/vue'
 
 export interface ModalOptions {
-	title?: string;
-	dismissable?: boolean;
-	side?: boolean;
-	width?: string;
-	actions?: BtnOptions[];
-	class?: string;
-	visible?: boolean;
+	title?: string
+	dismissable?: boolean
+	side?: boolean
+	width?: string
+	actions?: BtnOptions[]
+	class?: string
+	visible?: boolean
 }
 
 export interface ModalFormOptions {
-	side?: boolean;
-	title?: string;
-	visible?: boolean;
-	width?: string;
-	dismissable?: boolean;
-	schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT;
-	onSubmit?: (formData: any) => any;
-	onDelete?: (id: string) => Promise<void>;
-	onError?: ((err: any) => void);
-	modelValue?: Record<string, any>;
-	'onUpdate:modelValue'?: (val: any) => void;
+	'side'?: boolean
+	'title'?: string
+	'visible'?: boolean
+	'width'?: string
+	'dismissable'?: boolean
+	'schema': BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
+	'onSubmit'?: (formData: any) => any
+	'onDelete'?: (id: string) => Promise<void>
+	'onError'?: ((err: any) => void)
+	'modelValue'?: Record<string, any>
+	'onUpdate:modelValue'?: (val: any) => void
 }
 
-export type ModalConfirmOptions = {
-	title?: string;
-	message?: string;
-	resolve: (val: boolean) => void;
-};
+export interface ModalConfirmOptions {
+	title?: string
+	message?: string
+	resolve: (val: boolean) => void
+}
 
-type ModalType = 'modal' | 'modalForm' | 'confirm';
+type ModalType = 'modal' | 'modalForm' | 'confirm'
 
-type ConfirmModalUserOptions = string | { title: string; message: string };
+type ConfirmModalUserOptions = string | { title: string, message: string }
 
 export interface ModalComponentProps {
-	componentSlots: Record<string, any>;
-	modalType: ModalType;
-	modalOptions: ModalOptions | ModalFormOptions | ModalConfirmOptions;
+	componentSlots: Record<string, any>
+	modalType: ModalType
+	modalOptions: ModalOptions | ModalFormOptions | ModalConfirmOptions
 }
 
 export interface ModalFormComponentProps {
-	componentSlots: Record<string, any>;
-	modalType: 'modalForm';
-	modalOptions: ModalFormOptions;
+	componentSlots: Record<string, any>
+	modalType: 'modalForm'
+	modalOptions: ModalFormOptions
 }
 
 export interface ModalApi {
-	showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
-	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined;
-	hideModal: (index?: number) => void;
-	confirm: (options: ConfirmModalUserOptions) => Promise<boolean>;
+	showModal: (options: ModalOptions, slots?: Record<string, any>) => void
+	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined
+	hideModal: (index?: number) => void
+	confirm: (options: ConfirmModalUserOptions) => Promise<boolean>
 }
 
-export const ModalSymbol: InjectionKey<ModalApi> = Symbol('modal');
+export const ModalSymbol: InjectionKey<ModalApi> = Symbol('modal')
 
-export const useModal = (): ModalApi => {
-	const modalApi = inject(ModalSymbol);
-	if (!modalApi) throw new Error('Modal API not provided');
-	return modalApi;
-};
+export function useModal(): ModalApi {
+	const modalApi = inject(ModalSymbol)
+	if (!modalApi) throw new Error('Modal API not provided')
+	return modalApi
+}
 
 export const ModalPlugin: Plugin = {
 	install: (app) => {
-		const modalStack = $ref<ModalComponentProps[]>([]);
+		const modalStack = $ref<ModalComponentProps[]>([])
 
 		const hideModal = (index: number) => {
-			modalStack.splice(index, 1);
-		};
+			modalStack.splice(index, 1)
+		}
 
 		const modalConfirm = (options: ConfirmModalUserOptions) => new Promise<boolean>((resolve) => {
-			if (typeof options === 'string') options = { title: options, message: '' };
+			if (typeof options === 'string') options = { title: options, message: '' }
 			modalStack.push({
 				modalOptions: { ...options, resolve },
 				modalType: 'confirm',
 				componentSlots: {},
-			});
-		});
+			})
+		})
 
 		const showModal = (
 			modalType: ModalType,
@@ -92,29 +91,29 @@ export const ModalPlugin: Plugin = {
 				modalOptions: options,
 				modalType,
 				componentSlots: slots,
-			});
-			if (modalType === 'modalForm') return modalStack.at(-1) as ModalFormComponentProps | undefined;
-			return modalStack.at(-1);
-		};
+			})
+			if (modalType === 'modalForm') return modalStack.at(-1) as ModalFormComponentProps | undefined
+			return modalStack.at(-1)
+		}
 
 		app.provide(ModalSymbol, {
 			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal('modal', options, slots),
 			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal('modalForm', options, slots) as ModalFormComponentProps,
 			confirm: (userOptions: ConfirmModalUserOptions) => modalConfirm(userOptions),
-			hideModal: (index = modalStack.length - 1) => hideModal(index),
-		});
+			hideModal: (index = modalStack.length - 1) => { hideModal(index) },
+		})
 
 		const ModalComponent = defineComponent({
 			data: () => ({ modalStack }),
 			render() {
 				return this.modalStack.map((modal, index) => {
-					const props = { ...modal.modalOptions, visible: true, 'onUpdate:visible': () => hideModal(index) };
-					if (modal.modalType === 'modalForm') return h(ModalForm, props as ModalFormOptions, modal.componentSlots);
-					if (modal.modalType === 'confirm') return h(ModalConfirm, props as any, {});
-					return h(Modal, props, modal.componentSlots);
-				});
+					const props = { ...modal.modalOptions, 'visible': true, 'onUpdate:visible': () => { hideModal(index) } }
+					if (modal.modalType === 'modalForm') return h(ModalForm, props as ModalFormOptions, modal.componentSlots)
+					if (modal.modalType === 'confirm') return h(ModalConfirm, props as any, {})
+					return h(Modal, props, modal.componentSlots)
+				})
 			},
-		});
-		app.component('ModalContainer', ModalComponent);
+		})
+		app.component('ModalContainer', ModalComponent)
 	},
-};
+}

package/src/styles/layout.css

@@ -20,9 +20,10 @@
 }
 
 .flex-center {
-    justify-items: center;
+    justify-content: center;
     align-items: center;
-    display: flex;}
+    display: flex;
+}
 
 .justify-items-center {
     justify-items: center;
@@ -126,7 +127,8 @@
     inset-inline-end: 0px;
 }
 
-.positioned-full {
+.positioned-full,
+.p-all {
     top: 0;
     bottom: 0;
     inset-inline-start: 0;

package/src/styles/mobilLayout.css

@@ -1592,4 +1592,11 @@
         direction: rtl;
     }
 
+    .m_positioned-full,
+    .m_p-all {
+        top: 0;
+        bottom: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+    }
 }

package/src/types/BagelForm.ts

@@ -1,42 +1,42 @@
-import { SelectInput, TextInput } from '@bagelink/vue';
+import type { SelectInput, TextInput } from '@bagelink/vue'
 
-export type AttributeValue = string | number | boolean | null | undefined | Record<string, any>;
+export type AttributeValue = string | number | boolean | null | undefined | Record<string, any>
 
-export type AttributeFn<T = Record<string, any>> = (field: any, row: T) => AttributeValue;
+export type AttributeFn<T = Record<string, any>> = (field: any, row: T) => AttributeValue
 
 export interface Attributes<T = any> {
-  [key: string]: AttributeValue | AttributeFn<T>
+	[key: string]: AttributeValue | AttributeFn<T>
 }
 
-export type BaseBagelField<T = Record<string, any>> = {
-	$el?: any;
-	id?: string;
-	label?: string;
-	placeholder?: string;
-	children?: Field<T>[];
-	class?: AttributeValue | AttributeFn<T>,
-	attrs?: Attributes<T>;
-	required?: boolean;
-	disabled?: boolean;
-	helptext?: string;
-	options?: string | ({ label?: string; value: string | number } | string | number | Record<string, any>)[] | ((val: any, rowData?: Record<string, any>) => void);
-	defaultValue?: any;
-	transform?: (val?: any, rowData?: Record<string, any>) => any;
-	onUpdate?: (val: any, rowData?: Record<string, any>) => void;
-	'v-if'?: string | boolean | ((val: any, row: T) => boolean);
+export interface BaseBagelField<T = Record<string, any>> {
+	'$el'?: any
+	'id'?: string
+	'label'?: string
+	'placeholder'?: string
+	'children'?: Field<T>[]
+	'class'?: AttributeValue | AttributeFn<T>
+	'attrs'?: Attributes<T>
+	'required'?: boolean
+	'disabled'?: boolean
+	'helptext'?: string
+	'options'?: string | ({ label?: string, value: string | number } | string | number | Record<string, any>)[] | ((val: any, rowData?: Record<string, any>) => void)
+	'defaultValue'?: any
+	'transform'?: (val?: any, rowData?: Record<string, any>) => any
+	'onUpdate'?: (val: any, rowData?: Record<string, any>) => void
+	'v-if'?: string | boolean | ((val: any, row: T) => boolean)
 }
 
 export interface InputBagelField<T> extends BaseBagelField<T> {
-  $el: 'text' | typeof TextInput;
-  id: string;
-  type?: string;
+	$el: 'text' | typeof TextInput
+	id: string
+	type?: string
 }
 
 export interface SelectBagelField<T> extends BaseBagelField<T> {
-  $el: 'select' | typeof SelectInput;
-  id: string;
+	$el: 'select' | typeof SelectInput
+	id: string
 }
 
-export type Field<T = Record<string, any>> = BaseBagelField<T> | InputBagelField<T> | SelectBagelField<T>;
+export type Field<T = Record<string, any>> = BaseBagelField<T> | InputBagelField<T> | SelectBagelField<T>
 
-export type BglFormSchemaT<T = Record<string, any>> = Field<T>[];
+export type BglFormSchemaT<T = Record<string, any>> = Field<T>[]

package/src/types/BtnOptions.ts

@@ -1,16 +1,16 @@
-import type { ThemeType, MaterialIcons } from '.';
+import type { MaterialIcons, ThemeType } from '.'
 
 export interface BtnOptions {
-	onClick?: () => void;
-	color?:ThemeType;
-	theme?:ThemeType;
-	disabled?: boolean;
-	icon?: MaterialIcons;
-	flat?: boolean;
-	thin?: boolean;
-	type?: 'button' | 'submit' | 'reset';
-	loading?: boolean;
-	role?: string;
-	value?: string;
-	border?: boolean;
+	onClick?: () => void
+	color?: ThemeType
+	theme?: ThemeType
+	disabled?: boolean
+	icon?: MaterialIcons
+	flat?: boolean
+	thin?: boolean
+	type?: 'button' | 'submit' | 'reset'
+	loading?: boolean
+	role?: string
+	value?: string
+	border?: boolean
 }

package/src/types/NavLink.ts

@@ -1,10 +1,10 @@
-import { MaterialIcons } from './materialIcons';
+import type { MaterialIcons } from './materialIcons'
 
-export type NavLink = {
-  label: string;
-  to?: string;
-  icon: MaterialIcons;
-  localized?: string;
-  children?: NavLink[];
-  onClick?: () => void;
+export interface NavLink {
+	label: string
+	to?: string
+	icon: MaterialIcons
+	localized?: string
+	children?: NavLink[]
+	onClick?: () => void
 }

package/src/types/file.ts

@@ -1,12 +1,12 @@
-export type StorageFile = {
-  organization?: string[];
-  name: string;
-  url: string;
-  mimetype?: string;
-  size?: number;
-  extension?: string;
-  path?: string;
-  id?: string;
-  created_at?: Date | string;
-  updated_at?: Date | string;
+export interface StorageFile {
+	organization?: string[]
+	name: string
+	url: string
+	mimetype?: string
+	size?: number
+	extension?: string
+	path?: string
+	id?: string
+	created_at?: Date | string
+	updated_at?: Date | string
 }

package/src/types/index.ts

@@ -1,21 +1,25 @@
 export type {
-	ModalFormComponentProps, ModalApi, ModalComponentProps, ModalFormOptions, ModalOptions,
-} from '../plugins/modal';
+	ModalFormComponentProps,
+	ModalApi,
+	ModalComponentProps,
+	ModalFormOptions,
+	ModalOptions,
+} from '../plugins/modal'
 
-import type { MaterialIcons } from './materialIcons';
+import type { MaterialIcons } from './materialIcons'
 
-export type { MaterialIcons };
-export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
-export type { StorageFile } from './file';
-export type { NavLink } from './NavLink';
+export type { MaterialIcons }
+export type { Tables, TableToTypeMapping } from '@bagelink/sdk'
+export type { StorageFile } from './file'
+export type { NavLink } from './NavLink'
 
-export * from './BtnOptions';
-export * from './BagelForm';
+export * from './BtnOptions'
+export * from './BagelForm'
 
 export type Tab = {
-	label: string;
-	id: string;
-	icon?: MaterialIcons;
+	label: string
+	id: string
+	icon?: MaterialIcons
 } | string
 
 export type ThemeType = |