@bagelink/vue 0.0.1167 → 0.0.1174

package/src/plugins/modal.ts

@@ -1,62 +1,11 @@
-import type { BglFormSchemaFnT, BtnOptions, ThemeType } from '@bagelink/vue'
 import type { InjectionKey, Plugin } from 'vue'
+import type { ConfirmModalUserOptions, ModalComponentProps, ModalConfirmOptions, ModalFormComponentProps, ModalFormOptions, ModalOptions, ModalType } from './modalTypes'
 import { Modal, ModalConfirm, ModalForm } from '@bagelink/vue'
 import { defineComponent, h, inject } from 'vue'
 
-// Interface Definitions
-export interface ModalOptions {
-	title?: string
-	dismissable?: boolean
-	side?: boolean
-	width?: string
-	actions?: BtnOptions[]
-	class?: string
-	visible?: boolean
-}
-
-export interface ModalFormOptions extends ModalOptions {
-	'schema': BglFormSchemaFnT<any>
-	'onSubmit'?: (formData: any) => any
-	'submitText'?: string
-	'cancelText'?: string
-	'deleteText'?: string
-	'duplicateText'?: string
-	'onDelete'?: (id: string) => Promise<void>
-	'onDuplicate'?: (formData: any) => Promise<void>
-	'onError'?: (err: any) => void
-	'modelValue'?: { [key: string]: any }
-	'onUpdate:modelValue'?: (val: any) => void
-}
-
-export interface ModalConfirmOptions {
-	'title': string
-	'message': string
-	'confirmText'?: string
-	'confirmBtnColor'?: ThemeType
-	'cancelText'?: string
-	'cancelBtnColor'?: ThemeType
-	'resolve': (val: boolean) => void
-	'onUpdate:visible': () => void
-	'visible': boolean
-}
-
-type ModalType = 'modal' | 'modalForm' | 'confirmModal'
-type ConfirmModalUserOptions = string | { title: string, message: string, confirmText?: string, cancelText?: string, confirmBtnColor?: string, cancelBtnColor?: string }
-
-export interface ModalComponentProps {
-	componentSlots: { [key: string]: any }
-	modalType: ModalType
-	modalOptions: ModalOptions | ModalFormOptions | ModalConfirmOptions
-}
-
-export interface ModalFormComponentProps extends ModalComponentProps {
-	modalType: 'modalForm'
-	modalOptions: ModalFormOptions
-}
-
 export interface ModalApi {
 	showModal: (options: ModalOptions, slots?: { [key: string]: any }) => ModalComponentProps | undefined
-	showModalForm: (options: ModalFormOptions, slots?: { [key: string]: any }) => ModalFormComponentProps | undefined
+	showModalForm: <T extends { [key: string]: any }>(options: ModalFormOptions<T>, slots?: { [key: string]: any }) => ModalFormComponentProps<T> | undefined
 	hideModal: (index?: number) => void
 	confirmModal: (options: ConfirmModalUserOptions) => Promise<boolean>
 }
@@ -88,11 +37,11 @@ export const ModalPlugin: Plugin = {
 			})
 		}
 
-		const showModal = (
+		const showModal = <T extends { [key: string]: any } = any>(
 			modalType: ModalType,
-			options: ModalOptions | ModalFormOptions,
+			options: ModalOptions | ModalFormOptions<T>,
 			slots: { [key: string]: any } = {}
-		): ModalComponentProps | ModalFormComponentProps | undefined => {
+		): ModalComponentProps | ModalFormComponentProps<T> | undefined => {
 			const modalComponent = {
 				modalOptions: options,
 				modalType,
@@ -101,7 +50,7 @@ export const ModalPlugin: Plugin = {
 			modalStack.push(modalComponent)
 
 			if (modalType === 'modalForm') {
-				return modalComponent as ModalFormComponentProps
+				return modalComponent as ModalFormComponentProps<T>
 			}
 			return modalComponent
 		}
@@ -109,7 +58,7 @@ export const ModalPlugin: Plugin = {
 		app.provide(ModalSymbol, {
 			showModal: (options: ModalOptions, slots?: { [key: string]: any }) => showModal('modal', options, slots),
 
-			showModalForm: (options: ModalFormOptions, slots?: { [key: string]: any }) => showModal('modalForm', options, slots) as ModalFormComponentProps,
+			showModalForm: <T extends { [key: string]: any }>(options: ModalFormOptions<T>, slots?: { [key: string]: any }) => showModal<T>('modalForm', options, slots) as ModalFormComponentProps<T>,
 
 			confirmModal: (options: ConfirmModalUserOptions) => confirmModal(options),
 
@@ -137,7 +86,6 @@ export const ModalPlugin: Plugin = {
 				})
 			},
 		})
-
 		app.component('ModalContainer', ModalComponent)
 	},
 }

package/src/plugins/modalTypes.ts

@@ -0,0 +1,58 @@
+import type { BglFormSchemaFnT, BtnOptions, ThemeType } from '@bagelink/vue'
+
+export interface ModalOptions {
+	title?: string
+	dismissable?: boolean
+	side?: boolean
+	width?: string
+	actions?: BtnOptions[]
+	class?: string
+	visible?: boolean
+}
+
+export interface ModalConfirmOptions {
+	'title': string
+	'message': string
+	'confirmText'?: string
+	'confirmBtnColor'?: ThemeType
+	'cancelText'?: string
+	'cancelBtnColor'?: ThemeType
+	'resolve': (val: boolean) => void
+	'onUpdate:visible': () => void
+	'visible': boolean
+}
+
+export type ModalType = 'modal' | 'modalForm' | 'confirmModal'
+export type ConfirmModalUserOptions = string | { title: string, message: string, confirmText?: string, cancelText?: string, confirmBtnColor?: string, cancelBtnColor?: string }
+
+export interface ModalComponentProps {
+	componentSlots: { [key: string]: any }
+	modalType: ModalType
+	modalOptions: ModalOptions | ModalFormOptions | ModalConfirmOptions
+}
+
+export interface ModalFormComponentProps<T extends { [key: string]: any } = any> extends ModalComponentProps {
+	modalType: 'modalForm'
+	modalOptions: ModalFormOptions<T>
+}
+
+export interface ModalFormOptions<T extends { [key: string]: any } = any> {
+	'schema': BglFormSchemaFnT<T>
+	'modelValue'?: T
+	'onUpdate:modelValue'?: (val: T) => void
+	'onSubmit'?: (formData: T) => any
+	'onDelete'?: (formData: T) => Promise<void>
+	'onDuplicate'?: (formData: T) => Promise<void>
+	'submitText'?: string
+	'cancelText'?: string
+	'deleteText'?: string
+	'duplicateText'?: string
+	'onError'?: (err: any) => void
+	'side'?: boolean
+	'title'?: string
+	'width'?: string
+	'dismissable'?: boolean
+	'visible'?: boolean
+	'actions'?: BtnOptions[]
+	'class'?: string
+}

package/src/types/index.ts

@@ -1,10 +1,8 @@
 export type {
-	ModalApi,
 	ModalComponentProps,
 	ModalComponentProps as ModalFormComponentProps,
-	ModalFormOptions,
 	ModalOptions,
-} from '../plugins/modal'
+} from '../plugins/modalTypes'
 
 import type { IconType, MaterialIcons } from '../components/Icon/types'
 

package/src/utils/BagelFormUtils.ts

@@ -38,9 +38,12 @@ interface NumFieldOptions extends InputOptions {
 
 type RichTextOptions = InputOptions
 
-export function getBaseField<T>(id?: string, labelOrRest: string | Partial<Field<T>> = {}, rest: Partial<Field<T>> = {}): Field<T> {
+export function getBaseField<T extends { [key: string]: any }>(
+	id?: keyof T extends string ? keyof T : string,
+	labelOrRest: string | Partial<Field<T>> = {},
+	rest: Partial<Field<T>> = {}
+): Field<T> {
 	if (typeof labelOrRest === 'object') return { id, ...labelOrRest }
-
 	return { id, label: labelOrRest, ...rest }
 }