@bagelink/vue 1.1.31 → 1.1.35-beta.2

package/src/components/form/inputs/RichText/utils/media.ts

@@ -1,14 +1,20 @@
-import type { Modal } from '@bagelink/vue'
+import type { Field } from '@bagelink/vue'
+import type { ModalApi } from '../../../../../plugins/modal'
+
 import type { EditorState } from '../richTextTypes'
 import { bagelFormUtils as bglFrmUtil } from '@bagelink/vue'
 
-// const { frmRow, numField } = bagelFormUtils
-
-export function insertImage(modal: typeof Modal, state: EditorState) {
+export function insertImage(modal: ModalApi, state: EditorState) {
 	const { range, doc } = state
 	if (!range || !doc) return
 
-	modal.showModalForm({
+	modal.showModalForm<{
+		src: string
+		alt: string
+		width: number
+		height: number
+		figcaption: boolean
+	}>({
 		title: 'Upload Image',
 		schema: [
 			{ id: 'src', $el: 'file', attrs: { bindkey: 'url' } },
@@ -19,7 +25,7 @@ export function insertImage(modal: typeof Modal, state: EditorState) {
 			),
 			{ id: 'figcaption', $el: 'check', label: 'Show Caption' },
 		],
-		onSubmit: (data: Record<string, any>) => {
+		onSubmit: (data: { [key: string]: any }) => {
 			if (data.src) {
 				const img = doc.createElement('img')
 				Object.assign(img, {
@@ -47,7 +53,7 @@ export function insertImage(modal: typeof Modal, state: EditorState) {
 	})
 }
 
-export function insertLink(modal: typeof Modal, state: EditorState) {
+export function insertLink(modal: ModalApi, state: EditorState) {
 	const { range, doc } = state
 	if (!range || !doc) return
 
@@ -69,11 +75,14 @@ export function insertLink(modal: typeof Modal, state: EditorState) {
 	})
 }
 
-export function insertEmbed(modal: typeof Modal, state: EditorState) {
+export interface InsertImbedModalData { url: string, width?: number, height?: number, allowFullscreen?: boolean }
+
+export function insertEmbed(modal: ModalApi, state: EditorState) {
 	const { range, doc } = state
 	if (!range || !doc) return
 
-	modal.showModalForm({
+	modal.showModalForm<InsertImbedModalData
+	>({
 		title: 'Insert Embed',
 		schema: [
 			{ id: 'url', $el: 'text', label: 'URL', attrs: { placeholder: 'Enter URL (YouTube, Vimeo, etc.)' } },
@@ -81,7 +90,7 @@ export function insertEmbed(modal: typeof Modal, state: EditorState) {
 				bglFrmUtil.numField('width', 'Width', { min: 200, placeholder: '560' }),
 				bglFrmUtil.numField('height', 'Height', { min: 200, placeholder: '315' })
 			),
-			{ id: 'allowFullscreen', $el: 'check', label: 'Allow Fullscreen', value: true },
+			{ id: 'allowFullscreen', $el: 'check', label: 'Allow Fullscreen', value: true } as Field<InsertImbedModalData>,
 		],
 		onSubmit: (data: { url: string, width?: number, height?: number, allowFullscreen?: boolean }) => {
 			if (!data.url) return

package/src/components/form/inputs/TextInput.vue

@@ -1,41 +1,40 @@
 <script setup lang="ts">
-import type { IconType } from '@bagelink/vue'
-import {
-	Icon,
-	useDebounceFn
+import type { IconType, ValidateInputBaseT } from '@bagelink/vue'
+import { Icon, useDebounceFn, useValidateFieldValue } from '@bagelink/vue'
 
-} from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
 
+export interface TextInputProps extends ValidateInputBaseT {
+	id?: string
+	title?: string
+	helptext?: string
+	name?: string
+	placeholder?: string
+	modelValue?: string | number
+	label?: string
+	small?: boolean
+	dense?: boolean
+	required?: boolean
+	pattern?: string
+	defaultValue?: string | number
+	shrink?: boolean
+	disabled?: boolean
+	type?: string
+	nativeInputAttrs?: { [key: string]: any }
+	icon?: IconType
+	iconStart?: IconType
+	multiline?: boolean
+	autoheight?: boolean
+	code?: boolean
+	rows?: number | string
+	autocomplete?: AutoFillField
+	autofocus?: boolean
+	onFocusout?: (e: FocusEvent) => void
+	onFocus?: (e: FocusEvent) => void
+}
+
 const props = withDefaults(
-	defineProps<{
-		id?: string
-		title?: string
-		helptext?: string
-		name?: string
-		placeholder?: string
-		modelValue?: string | number
-		label?: string
-		small?: boolean
-		dense?: boolean
-		required?: boolean
-		pattern?: string
-		defaultValue?: string | number
-		shrink?: boolean
-		disabled?: boolean
-		type?: string
-		nativeInputAttrs?: { [key: string]: any }
-		icon?: IconType
-		iconStart?: IconType
-		multiline?: boolean
-		autoheight?: boolean
-		code?: boolean
-		rows?: number | string
-		autocomplete?: AutoFillField
-		autofocus?: boolean
-		onFocusout?: (e: FocusEvent) => void
-		onFocus?: (e: FocusEvent) => void
-	}>(),
+	defineProps<TextInputProps>(),
 	{
 		type: 'text',
 		modelValue: '',
@@ -46,6 +45,13 @@ let inputVal = $ref<string | number>()
 
 const input = $ref<HTMLInputElement>()
 
+useValidateFieldValue(
+	() => inputVal,
+	() => input,
+	props.validate,
+	props.getFormData
+)
+
 const inputRows = $computed(() => {
 	let rows = Number(props.rows) || 1
 	if (props.autoheight) rows = Math.max(rows, String(inputVal).split('\n').length)

package/src/components/form/useBagelFormState.ts

@@ -4,7 +4,7 @@ import { getNestedValue } from '../../utils'
 
 export const FORM_STATE_KEY = Symbol('bagelFormState')
 
-export interface BagelFormState<T = any> {
+export interface BagelFormState<T> {
 	data: Ref<T>
 	getFieldData: (path?: string) => any
 	updateField: (path: string, value: any) => void

package/src/composables/index.ts

@@ -5,6 +5,7 @@ import { getFallbackSchema } from '@bagelink/vue'
 import { ref, watch } from 'vue'
 
 export { useDevice } from './useDevice'
+export { useValidateFieldValue } from './useValidateFieldValue'
 
 interface UseBglSchemaParamsT<T> {
 	schema?: BglFormSchemaFnT<T>

package/src/composables/useFormField.ts

@@ -3,7 +3,7 @@ import type { BagelFormState } from '../components/form/useBagelFormState'
 import { inject, computed } from 'vue'
 import { FORM_STATE_KEY } from '../components/form/useBagelFormState'
 
-export function useFormField<T = any>(props: {
+export function useFormField<T>(props: {
 	field: Field<T>
 	fieldID?: string
 	modelValue?: any

package/src/composables/useSchemaField.ts

@@ -28,7 +28,7 @@ const SRC_VALUE_COMPONENTS = new Set(['img', 'iframe'])
 
 export interface UseSchemaFieldOptions<T> {
 	mode?: 'form' | 'preview' | 'table'
-	getRowData?: () => T
+	getFormData?: () => T
 	onUpdate?: (field: BaseBagelField<T>, value: any) => void
 	includeUnset?: boolean
 }
@@ -40,7 +40,7 @@ type SlotFunction<T> = (props: SlotProps<T>) => any
 type SupportedSlot<T> = BglFormSchemaT<T> | VNode | SlotFunction<T>
 
 export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchemaFieldOptions<T>) {
-	const { mode = 'form', getRowData, onUpdate, includeUnset = false } = optns
+	const { mode = 'form', getFormData, onUpdate, includeUnset = false } = optns
 
 	// Helper function to render objects recursively
 	function renderObject(obj: any, depth = 0): string {
@@ -113,13 +113,13 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		const Component = getComponent(field)
 		if (!Component) return null
 
-		const rowData = getRowData?.() || {} as T
+		const rowData = getFormData?.() || {} as T
 
 		// Check vIf condition first
 		const condition = field.vIf ?? field['v-if']
 		if (condition !== undefined) {
 			if (typeof condition === 'function') {
-				if (!condition(field.id ? rowData[field.id as keyof T] : undefined, rowData)) {
+				if (!condition(field.id ? rowData[field.id] : undefined, rowData)) {
 					return null
 				}
 			} else if (typeof condition === 'string') {
@@ -139,6 +139,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			class: fieldClass,
 			id,
 			transform,
+			validate,
 			slots: fieldSlots,
 			required,
 			label,
@@ -151,8 +152,9 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		const currentValue = field.id
 			? ('get' in rowData
 				? rowData.get(field.id)
-				: rowData[field.id as keyof T])
+				: rowData[field.id])
 			: undefined
+
 		const transformedValue = transform ? transform(currentValue, rowData) : currentValue
 
 		// First bind any function attributes with the current value and row data
@@ -169,6 +171,9 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			label,
 			placeholder,
 			disabled,
+			validate,
+			id,
+			getFormData,
 		}
 
 		// For form mode, always use the original value for modelValue
@@ -218,7 +223,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		props.class = classify(currentValue, rowData, fieldClass, props.class)
 
 		// Handle component slots with vIf aware child rendering
-		const componentSlots: Record<string, any> = {}
+		const componentSlots: { [key: string]: any } = {}
 
 		// Add default slot if there are children
 		if (children?.length) {

package/src/composables/useValidateFieldValue.ts

@@ -0,0 +1,26 @@
+import type { ValidateInputBaseT } from '@bagelink/vue'
+import type { WatchSource } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+
+export function useValidateFieldValue(
+	inputVal: WatchSource,
+	getInput?: () => HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | undefined,
+	validateFn?: ValidateInputBaseT['validate'],
+	getFormData?: ValidateInputBaseT['getFormData'],
+) {
+	watchDebounced(
+		inputVal,
+		(newVal, oldVal) => {
+			getInput?.()?.setCustomValidity('')
+
+			console.log({ validateFn, getFormData, input: getInput })
+
+			if (!validateFn || newVal === oldVal || !newVal) return
+
+			const isValid = validateFn(newVal, getFormData?.())
+
+			if (typeof isValid === 'string') getInput?.()?.setCustomValidity(isValid)
+		},
+		{ debounce: 500 },
+	)
+}

package/src/plugins/modal.ts

@@ -1,10 +1,11 @@
 import type { InjectionKey, Plugin } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 import type { ConfirmModalUserOptions, ModalComponentProps, ModalConfirmOptions, ModalFormComponentProps, ModalFormOptions, ModalOptions, ModalType } from './modalTypes'
 import { Modal, ModalConfirm, ModalForm } from '@bagelink/vue'
 import { defineComponent, h, inject } from 'vue'
 
 export interface ModalApi {
-	showModal: (options: ModalOptions, slots?: { [key: string]: any }) => ModalComponentProps | undefined
+	showModal: <T extends { [key: string]: any }>(options: ModalOptions, slots?: { [key: string]: any }) => ModalComponentProps<T> | 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>
@@ -20,7 +21,7 @@ export function useModal(): ModalApi {
 
 export const ModalPlugin: Plugin = {
 	install: (app) => {
-		const modalStack = $ref<ModalComponentProps[]>([])
+		const modalStack = $ref<ModalComponentProps<object>[]>([])
 
 		const hideModal = (index: number) => {
 			modalStack.splice(index, 1)
@@ -37,11 +38,11 @@ export const ModalPlugin: Plugin = {
 			})
 		}
 
-		const showModal = <T extends { [key: string]: any } = any>(
+		const showModal = <T extends { [key: string]: any }>(
 			modalType: ModalType,
 			options: ModalOptions | ModalFormOptions<T>,
 			slots: { [key: string]: any } = {}
-		): ModalComponentProps | ModalFormComponentProps<T> | undefined => {
+		): ModalComponentProps<T> | ModalFormComponentProps<T> | undefined => {
 			const modalComponent = {
 				modalOptions: options,
 				modalType,
@@ -76,7 +77,7 @@ export const ModalPlugin: Plugin = {
 					}
 					switch (modal.modalType) {
 						case 'modalForm':
-							return h(ModalForm, props as ModalFormOptions, modal.componentSlots)
+							return h(ModalForm, props as ComponentProps<typeof ModalForm>, modal.componentSlots)
 						case 'confirmModal':
 
 							return h(ModalConfirm, props as ModalConfirmOptions, {})

package/src/plugins/modalTypes.ts

@@ -25,18 +25,18 @@ export interface ModalConfirmOptions {
 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 {
+export interface ModalComponentProps<T extends { [key: string]: any }> {
 	componentSlots: { [key: string]: any }
 	modalType: ModalType
-	modalOptions: ModalOptions | ModalFormOptions | ModalConfirmOptions
+	modalOptions: ModalOptions | ModalFormOptions<T> | ModalConfirmOptions
 }
 
-export interface ModalFormComponentProps<T extends { [key: string]: any } = any> extends ModalComponentProps {
+export interface ModalFormComponentProps<T extends { [key: string]: any }> extends ModalComponentProps<T> {
 	modalType: 'modalForm'
 	modalOptions: ModalFormOptions<T>
 }
 
-export interface ModalFormOptions<T extends { [key: string]: any } = any> {
+export interface ModalFormOptions<T extends { [key: string]: any }> {
 	'schema': BglFormSchemaFnT<T>
 	'modelValue'?: T
 	'onUpdate:modelValue'?: (val: T) => void

package/src/styles/appearance.css

@@ -717,6 +717,14 @@
     filter: drop-shadow(0 0 10px var(--bgl-black-tint));
 }
 
+.border-white {
+    border-color: var(--bgl-white) !important;
+}
+
+.border-white-unset {
+    border-color: unset !important;
+}
+
 .border-bottom {
     border-bottom: 1px solid var(--border-color)
 }
@@ -1475,6 +1483,14 @@
         box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
     }
 
+    .m_border-white {
+        border-color: var(--bgl-white) !important;
+    }
+
+    .m_border-white-unset {
+        border-color: unset !important;
+    }
+
     .m_border-bottom {
         border-bottom: 1px solid var(--border-color)
     }

package/src/styles/buttons.css

@@ -94,7 +94,7 @@
 }
 
 .rotate-0 {
-    transform: rotate(0deg);
+    transform: rotate(0deg) !important;
 }
 
 @media screen and (max-width: 910px) {
@@ -119,7 +119,7 @@
     }
 
     .m_rotate-0 {
-        transform: rotate(0deg);
+        transform: rotate(0deg) !important;
     }
 }
 

package/src/styles/layout.css

@@ -2555,6 +2555,11 @@
     height: 100%;
 }
 
+.h100pi,
+.h-100pi {
+    height: 100% !important;
+}
+
 .vh-100,
 .h-100vh,
 .h100vh {

package/src/types/BagelForm.ts

@@ -1,11 +1,12 @@
 import type { SelectInput, TextInput } from '@bagelink/vue'
 import type { VNode } from 'vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
 
 export type AttributeValue = string | number | boolean | undefined | undefined | { [key: string]: any }
 
-export type AttributeFn<T = { [key: string]: any }> = (field: any, row: T) => AttributeValue
+export type AttributeFn<T = { [key: string]: any }> = (field: any, row?: T) => AttributeValue
 
-export interface Attributes<T = any> {
+export interface Attributes<T> {
 	[key: string]: AttributeValue | AttributeFn<T>
 }
 
@@ -24,8 +25,6 @@ export type BagelFieldOptions<T = { [key: string]: any }> = (
 	| ((val: any, rowData?: T) => void)
 )
 
-type GenericAssertFn<T> = (val: any, row: T) => boolean
-
 // Helper type for controlling recursion depth
 type FiniteRangeIndex = [never, 0, 1, 2, 3, 4]
 
@@ -48,6 +47,23 @@ export type PropertyPath<T> = T extends object
 	? keyof T & string | DotNotation<T>
 	: string
 
+export type FieldValType<T, K> = K extends keyof T ? T[K] : never
+
+export type GenericAssertFn<T> = (val: any, row: T) => boolean
+
+export type TypedAssertFn<T, K> = (
+	K extends keyof T ?
+		(val: FieldValType<T, K>, row: T) => boolean :
+		GenericAssertFn<T>
+)
+
+export type VIfType<T, K> = string | boolean | TypedAssertFn<T, K>
+
+export type ValidationFn<T, K> = (
+	val: FieldValType<T, K>,
+	rowData?: T,
+) => string | undefined
+
 export interface BaseBagelField<T = { [key: string]: any }> {
 	'$el'?: any
 	'id'?: PropertyPath<T>
@@ -60,22 +76,23 @@ export interface BaseBagelField<T = { [key: string]: any }> {
 	'disabled'?: boolean
 	'helptext'?: string
 	'options'?: BagelFieldOptions<T>
-	'slots'?: { [key: string]: any }
+	'slots'?: { [key: string]: Field<T>[] }
 	'defaultValue'?: any
-	'transform'?: (val?: any, rowData?: T) => any
-	'onUpdate'?: (val: any, rowData?: T) => void
-	'v-if'?: string | boolean | GenericAssertFn<T>
-	'vIf'?: string | boolean | GenericAssertFn<T>
+	'vIf'?: VIfType<T, this['id']>
+	'v-if'?: VIfType<T, this['id']>
+	'transform'?: (val?: FieldValType<T, this['id']>, rowData?: T) => any
+	'onUpdate'?: (val: FieldValType<T, this['id']>, rowData?: T) => unknown
+	'validate'?: ValidationFn<T, this['id']>
 }
 
 export interface InputBagelField<T> extends BaseBagelField<T> {
-	$el: 'text' | InstanceType<typeof TextInput>
+	$el: 'text' | ComponentExposed<typeof TextInput>
 	id?: PropertyPath<T>
 	type?: string
 }
 
 export interface SelectBagelField<T> extends BaseBagelField<T> {
-	$el: 'select' | InstanceType<typeof SelectInput>
+	$el: 'select' | ComponentExposed<typeof SelectInput>
 	id?: PropertyPath<T>
 }
 
@@ -85,3 +102,8 @@ export type BglFieldT<T = { [key: string]: any }> = Field<T>
 export type BglFormSchemaT<T = { [key: string]: any }> = Field<T>[]
 
 export type BglFormSchemaFnT<T = { [key: string]: any }> = (() => BglFormSchemaT<T>) | BglFormSchemaT<T>
+
+export interface ValidateInputBaseT {
+	validate?: ValidationFn<{ [key: string]: unknown }, string>
+	getFormData?: () => any
+}

package/src/types/TableSchema.ts

@@ -4,7 +4,7 @@ import type { Ref, ComputedRef } from 'vue'
 export type SortDirectionsT = 'ASC' | 'DESC'
 export type EmitOrderT = `${string} ${SortDirectionsT}`
 
-export interface TableSchemaProps<T extends Record<string, any> = Record<string, any>> {
+export interface TableSchemaProps<T extends { [key: string]: any } = { [key: string]: any }> {
 	data: T[]
 	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
 	columns?: string[]