@bagelink/vue 1.2.79 → 1.2.83

package/src/types/BagelForm.ts

@@ -1,6 +1,6 @@
 import type { SelectInput, TextInput } from '@bagelink/vue'
 import type { Paths, Get, IterableElement, LiteralUnion } from 'type-fest'
-import type { VNode } from 'vue'
+import type { SetupContext, VNode } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 export type ToString<T> = T extends string | number ? `${T}` : never
@@ -65,21 +65,23 @@ export type FieldVal<T, P extends Path<T>> = Get<T, P>
 /** If path P in T is an array, this gives the array's element type. */
 export type ArrayFieldVal<T, P extends Path<T>> = IterableElement<Get<T, P>>
 
-export type SchemaChildrenT<T> = (Field<T> | string | VNode)[]
+export type VNodeFn<T, P extends Path<T>> = (props: { row?: T, field: BaseBagelField<T, P> }) => VNode
+
+export type SchemaChild<T, P extends Path<T>> = Field<T> | VNode | VNodeFn<T, P> | string
 
 export interface BaseBagelField<T, P extends Path<T>> {
 	'$el'?: any
 	'id'?: P
 	'label'?: string
 	'placeholder'?: string
-	'children'?: SchemaChildrenT<T>
 	'class'?: AttributeValue | AttributeFn<T, P>
 	'attrs'?: Attributes<T, P>
 	'required'?: boolean
 	'disabled'?: boolean
 	'helptext'?: string
 	'options'?: BagelFieldOptions<T>
-	'slots'?: { [key: string]: Field<T>[] }
+	'children'?: SchemaChild<T, P>[]
+	'slots'?: { [key: string]: SchemaChild<T, P>[] } | SetupContext['slots']
 	'defaultValue'?: any
 	'vIf'?: VIfType<T, P>
 	'v-if'?: VIfType<T, P>
@@ -92,22 +94,28 @@ export type MappedBaseBagelField<T> = {
 	[P in Path<T>]: BaseBagelField<T, P>
 }[Path<T>]
 
-export type InputBagelField<T> = MappedBaseBagelField<T> & {
-	$el: 'text' | ComponentExposed<typeof TextInput>
-	type?: string
-}
-
-export type SelectBagelField<T> = MappedBaseBagelField<T> & {
-	$el: 'select' | ComponentExposed<typeof SelectInput>
-}
-
 export type Field<T> = MappedBaseBagelField<T>
 
 export type BglFieldT<T> = Field<T>
 
 export type BglFormSchemaT<T> = Field<T>[]
 
-export type BglFormSchemaFnT<T> = (() => BglFormSchemaT<T>) | BglFormSchemaT<T>
+export type InputBagelField<T> = Field<T> & {
+	$el: 'text' | ComponentExposed<typeof TextInput>
+	type?: string
+}
+// export interface InputBagelField<T> extends BaseBagelField<T, Path<T>> {
+// 	$el: 'text' | ComponentExposed<typeof TextInput>
+// 	type?: string
+// }
+
+export type SelectBagelField<T> = Field<T> & {
+	$el: 'select' | ComponentExposed<typeof SelectInput>
+}
+// export interface SelectBagelField<T> extends BaseBagelField<T, Path<T>> {
+// 	$el: 'select' | ComponentExposed<typeof SelectInput>
+// 	type?: string
+// }
 
 export interface ValidateInputBaseT {
 	validate?: ValidationFn<{ [key: string]: unknown }, string>

package/src/types/TableSchema.ts

@@ -1,19 +1,19 @@
 import type { BglFormSchemaT } from '@bagelink/vue'
-import type { Ref, ComputedRef } from 'vue'
+import type { MaybeRefOrGetter, ComputedRef } from 'vue'
 
 export type SortDirectionsT = 'ASC' | 'DESC'
 export type EmitOrderT = `${string} ${SortDirectionsT}`
 
 export interface TableSchemaProps<T extends { [key: string]: any } = { [key: string]: any }> {
 	data: T[]
-	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
-	columns?: string[]
-	useServerSort?: boolean
+	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
+	columns?: MaybeRefOrGetter<string[]>
+	useServerSort?: MaybeRefOrGetter<boolean>
 	selectable?: boolean
 	onLastItemVisible?: () => void
 }
 
-export interface SortingOptions<T> {
+export interface SortingOptions {
 	onSort: (field: string, direction: SortDirectionsT) => void
 }
 
@@ -24,15 +24,15 @@ export interface TableSelectionOptions<T> {
 }
 
 export interface TableVirtualizationOptions<T> {
-	data: Ref<T[]> | ComputedRef<T[]>
+	data: ComputedRef<T[]>
 	itemHeight: number
 	onLastItemVisible?: () => void
 }
 
 export interface TableDataOptions<T> {
-	data: Ref<T[]> | ComputedRef<T[]>
-	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>) | Promise<BglFormSchemaT<T>> | Promise<() => BglFormSchemaT<T>>
-	columns?: string[]
+	data: MaybeRefOrGetter<T[]>
+	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
+	columns?: MaybeRefOrGetter<string[]>
 	sortField: string
 	sortDirection: SortDirectionsT
 	useServerSort?: boolean

package/src/utils/BagelFormUtils.ts

@@ -1,4 +1,4 @@
-import type { ArrayFieldVal, Attributes, BaseBagelField, BglFormSchemaT, Field, IconType, InputBagelField, Option, Path, SelectBagelField } from '@bagelink/vue'
+import type { ArrayFieldVal, Attributes, BaseBagelField, BglFormSchemaT, Field, IconType, InputBagelField, Option, Path, SchemaChild, SelectBagelField } from '@bagelink/vue'
 import type { UploadInputProps } from '../components/form/inputs/Upload/upload.types'
 
 interface InputOptions<T, P extends Path<T>> extends Partial<BaseBagelField<T, P>> {
@@ -231,7 +231,7 @@ export function numField<T, P extends Path<T>>(
 }
 
 // export function frmRow<T, P extends Path<T>>(...children: SchemaChildrenT<T>): BaseBagelField<T, P> {
-export function frmRow<T>(...children: Field<T>[]): Field<T> {
+export function frmRow<T>(...children: SchemaChild<T, Path<T>>[]): Field<T> {
 	return {
 		$el: 'div',
 		class: 'flex gap-1 m_block align-items-end',
@@ -239,7 +239,8 @@ export function frmRow<T>(...children: Field<T>[]): Field<T> {
 	}
 }
 
-export type UploadOptions<T, K extends Path<T>> = InputOptions<T, K> & UploadInputProps
+// export type UploadOptions<T, K extends Path<T>> = InputOptions<T, K> & UploadInputProps
+export interface UploadOptions<T, K extends Path<T>> extends InputOptions<T, K>, UploadInputProps {}
 
 export function uploadField<T, P extends Path<T>>(id: P, label?: string, options?: UploadOptions<T, P>): BaseBagelField<T, P> {
 	return {

package/src/utils/index.ts

@@ -124,26 +124,51 @@ export function sleep(ms: number = 100) {
 	return new Promise(resolve => setTimeout(resolve, ms))
 }
 
-export function appendScript(src: string, options?: { id?: string }): Promise<void> {
-	return new Promise((resolve, reject) => {
-		if (options?.id) {
-			if (document.getElementById(options.id)) {
-				resolve()
-				return
-			}
-		} else if (document.querySelector(`script[src="${src}"]`)) {
-			resolve()
-			return
-		}
+// Keep track of loading scripts
+const scriptsLoading = new Map<string, Promise<void>>()
+
+export async function appendScript(src: string, options?: { id?: string }): Promise<void> {
+	const scriptId = options?.id || src
+	await sleep(1)
+	// If this script is already loading, return the existing promise
+	if (scriptsLoading.has(scriptId)) {
+		return scriptsLoading.get(scriptId)!
+	}
+
+	// Check if script is already in the document
+	if (options?.id && document.getElementById(options.id)) {
+		return Promise.resolve()
+	} else if (document.querySelector(`script[src="${src}"]`)) {
+		return Promise.resolve()
+	}
+
+	// Create a new loading promise for this script
+	const loadingPromise = new Promise<void>((resolve, reject) => {
 		const script = document.createElement('script')
 		script.src = src
 		if (options?.id) {
 			script.id = options.id
 		}
-		script.onload = () => { resolve() }
-		script.onerror = reject
+
+		script.onload = () => {
+			resolve()
+			// Remove from loading scripts map when done
+			scriptsLoading.delete(scriptId)
+		}
+
+		script.onerror = (err) => {
+			reject(err)
+			// Remove from loading scripts map on error
+			scriptsLoading.delete(scriptId)
+		}
+
 		document.head.append(script)
 	})
+
+	// Store the loading promise for this script
+	scriptsLoading.set(scriptId, loadingPromise)
+
+	return loadingPromise
 }
 
 export function appendStyle(src: string): Promise<void> {

package/src/utils/{search.ts → useSearch.ts}

@@ -112,7 +112,7 @@ export interface SearchItemParams<T> {
 }
 
 export interface SearchResult<T> {
-	results: ComputedRef<readonly T[]>
+	results: ComputedRef<T[]>
 	resultCount: ComputedRef<number>
 	hasResults: ComputedRef<boolean>
 	isSearching: ComputedRef<boolean>
@@ -378,7 +378,6 @@ export function useSearch<T>(
 		// Otherwise use client-side filtering
 		return searchItems(params)
 	}
-
 	// Create computed references
 	const results = computed(() => getFilteredResults())
 	const resultCount = computed(() => results.value.length)