@bagelink/vue 1.0.33 → 1.0.41

package/src/components/form/FieldArray.vue

@@ -7,7 +7,8 @@ import type {
 	BglFormSchemaFnT,
 	Field,
 } from '@bagelink/vue'
-import { BagelForm, Btn } from '@bagelink/vue'
+import { BagelForm, Btn, Loading } from '@bagelink/vue'
+import { ref, onMounted } from 'vue'
 import { useSchemaField } from '../../composables/useSchemaField'
 
 const props = withDefaults(
@@ -39,50 +40,82 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
-const data = $ref<T[]>(props.modelValue || [])
+// State
+const minimizedItems = ref<boolean[]>([])
+const internalData = ref<any[]>(props.modelValue || [])
+const schemaState = ref<'loading' | 'loaded' | 'error'>('loaded')
+const resolvedSchemaData = ref<any[]>([])
 
+// Resolve schema (handles sync, async, function, and direct values)
+async function resolveSchema() {
+	if (!props.schema) {
+		resolvedSchemaData.value = []
+		schemaState.value = 'loaded'
+		return
+	}
+
+	try {
+		schemaState.value = 'loading'
+		const isPromise = (obj: any) => obj && typeof obj.then === 'function'
+
+		let result: any
+		if (typeof props.schema === 'function') {
+			result = props.schema()
+			result = isPromise(result) ? await result : result
+		} else {
+			result = isPromise(props.schema) ? await props.schema : props.schema
+		}
+
+		resolvedSchemaData.value = result
+		schemaState.value = 'loaded'
+	} catch (error) {
+		console.error('Schema error:', error)
+		schemaState.value = 'error'
+		resolvedSchemaData.value = []
+	}
+}
+
+// Initialize schema on mount
+onMounted(() => {
+	resolveSchema()
+})
+
+// Event handlers
 function emitValue() {
-	emit('update:modelValue', data)
+	emit('update:modelValue', internalData.value)
 }
 
 function deleteItem(i: number) {
-	data.splice(i, 1)
+	internalData.value.splice(i, 1)
 	emitValue()
 }
 
 function addItem() {
-	data.push({} as any)
+	internalData.value.push({})
 	emitValue()
 }
 
-const computedField = $computed(
-	() => ({
-		label: props.label,
-		placeholder: props.placeholder,
-		children: props.children,
-		// class: props.class,
-		attrs: props.attrs,
-		required: props.required,
-		disabled: props.disabled,
-		helptext: props.helptext,
-		options: props.options,
-		defaultValue: props.defaultValue,
-		transform: props.transform,
-		$el: props.el,
-	}) as Field<T>
-) as Field<Record<string, any>>
-
-const { renderField } = useSchemaField<Record<string, any>>({
-	mode: 'form',
-	getRowData: () => data,
-	onUpdate: (field, value) => {
-		if (!field.id) return
-		const index = Number.parseInt(field.id)
-		if (Number.isNaN(index)) return
-		data[index] = value
-		emitValue()
-	}
-})
+function toggleMinimized(index: number) {
+	minimizedItems.value[index] = !minimizedItems.value[index]
+}
+
+function updateItem(index: number, value: any) {
+	internalData.value[index] = value
+	emitValue()
+}
+
+// // Field rendering
+// const { renderField } = useSchemaField<any>({
+// 	mode: 'form',
+// 	getRowData: () => internalData.value,
+// 	onUpdate: (field, value) => {
+// 		if (!field.id) return
+// 		const index = Number.parseInt(field.id)
+// 		if (Number.isNaN(index)) return
+// 		internalData.value[index] = value
+// 		emitValue()
+// 	}
+// })
 </script>
 
 <template>
@@ -90,37 +123,78 @@ const { renderField } = useSchemaField<Record<string, any>>({
 		<p class="label mb-05">
 			{{ label }}
 		</p>
+		<div v-if="resolvedSchemaData.length > 0" class="ps-025 border-start mb-05">
+			<!-- Loading state -->
+			<div v-if="schemaState === 'loading'" class="flex-center h-300px">
+				<Loading />
+			</div>
 
-		<div v-if="schema" class="ps-025 border-start mb-05">
-			<div v-for="(_, i) in data" :key="i" outline thin class="mb-05 itemBox transition ps-05 pb-025 pt-025 radius-05 gap-05 overflow-hidden">
-				<BagelForm v-model="data[i]" :schema="schema" @update:model-value="emitValue" />
-				<div class="bg-gray-80 -my-05 px-025 pt-065 txt-center">
-					<Btn
-						v-if="props.delete"
-						icon="delete"
-						class="txt10 opacity-7"
-						thin
-						flat
-						@click="deleteItem(i)"
+			<!-- Error state -->
+			<div v-else-if="schemaState === 'error'" class="flex-center h-300px txt-red">
+				Error
+			</div>
+
+			<!-- Render items -->
+			<template v-else>
+				<div
+					v-for="(item, i) in internalData" :key="i" outline thin
+					class="mb-05 itemBox transition ps-05 pb-025 pt-025 radius-05 gap-05 overflow-hidden"
+					:class="{ minimized: minimizedItems[i] }"
+				>
+					<p v-if="minimizedItems[i]" class="minimizedText txt14 p-025 opacity-7">
+						{{ label }} {{ i + 1 }}
+					</p>
+					<BagelForm
+						v-else
+						:model-value="item"
+						:schema="resolvedSchemaData"
+						@update:model-value="val => updateItem(i, val)"
 					/>
+					<div class="bg-gray-80 -my-05 px-025 pt-065 pb-05 txt-center space-between flex column">
+						<Btn
+							v-if="resolvedSchemaData.length > 4"
+							class="block rotate-180 txt10 opacity-7 p-025"
+							flat thin icon="keyboard_arrow_down"
+							@click="toggleMinimized(i)"
+						/>
+						<Btn
+							v-if="props.delete"
+							icon="delete"
+							class="txt10 opacity-7"
+							thin
+							flat
+							@click="deleteItem(i)"
+						/>
+					</div>
 				</div>
-			</div>
-			<Btn v-if="add" thin icon="add" color="gray" class="txt12" @click="addItem">
-				<p>{{ label }}</p>
-			</Btn>
+				<Btn v-if="add" thin icon="add" color="gray" class="txt12" @click="addItem">
+					<p>{{ label }}</p>
+				</Btn>
+			</template>
 		</div>
+
 		<template v-else>
-			<component
-				:is="renderField({ ...computedField, id: String(i) })"
-				v-for="(_, i) in data"
-				:key="i"
-				@update:model-value="emitValue"
-			/>
+			<div v-for="(_, i) in internalData" :key="i">
+				<p>No schema available</p>
+			</div>
 		</template>
 	</div>
 </template>
 
 <style>
+.minimized{
+	height: 2.4rem;
+	overflow: hidden;
+}
+.minimizedText{
+	display: none;
+}
+.minimized .minimizedText{
+	display: block;
+}
+.minimized .rotate-180{
+	transform: rotate(0deg);
+}
 .itemBox{
 	background: var(--input-bg);
 	grid-template-columns: 1fr auto;
@@ -129,6 +203,7 @@ const { renderField } = useSchemaField<Record<string, any>>({
 	--input-height: 30px;
 	--input-font-size: 14px;
 }
+
 .pt-065{
 	padding-top: 0.65rem;
 }

package/src/components/layout/BottomMenu.vue

@@ -23,7 +23,7 @@ defineProps<{
 			@click="nav.onClick"
 		>
 			<Icon :icon="nav.icon" :size="1.4" class="m-0 line-height-14" />
-			<p class="m-0 pb-025 txt14 line-height-1 w60 menu-text">
+			<p class="m-0 pb-025 txt10 line-height-1 w60 menu-text">
 				{{ nav.label }}
 			</p>
 		</Btn>

package/src/composables/index.ts

@@ -10,13 +10,23 @@ interface useBglSchemaParamsT<T> {
 	data?: any[]
 }
 
-export function useBglSchema<T = { [key: string]: unknown }>(
+export async function useBglSchema<T = { [key: string]: unknown }>(
 	{ schema, columns, data }: useBglSchemaParamsT<T> = {}
-): BglFormSchemaT<T> {
+): Promise<BglFormSchemaT<T>> {
 	let _schema = schema
+
+	// Handle async schema functions
 	if (typeof _schema === 'function') {
-		_schema = _schema()
+		const result = _schema()
+		if (result instanceof Promise) {
+			_schema = await result
+		} else {
+			_schema = result
+		}
+	} else if (_schema instanceof Promise) {
+		_schema = await _schema
 	}
+
 	if (_schema) {
 		return (
 			columns && columns.length > 0
@@ -41,7 +51,7 @@ export function localRef<T>(
 		localStorage.setItem(key, JSON.stringify(val))
 	}, { immediate: true, deep: true })
 
-	return value
+	return value as any
 }
 
 export const useLocalStorage = localRef

package/src/styles/layout.css

@@ -2759,6 +2759,36 @@
     min-height: 200px;
 }
 
+.h-250,
+.h250p,
+.h-250p {
+    height: 250%;
+}
+
+.vh-250,
+.h-250vh,
+.h250vh {
+    height: 250vh;
+}
+
+.h-250px,
+.h250px {
+    height: 250px;
+}
+
+.hm-250px,
+.max-h-250px,
+.h-max-250px,
+.max-h250px {
+    max-height: 250px;
+}
+
+.min-h-250px,
+.h-min-250px,
+.min-h250px {
+    min-height: 250px;
+}
+
 .h-300,
 .h300p,
 .h-300p {
@@ -2789,6 +2819,36 @@
     min-height: 300px;
 }
 
+.h-350,
+.h350p,
+.h-350p {
+    height: 350%;
+}
+
+.vh-350,
+.h-350vh,
+.h350vh {
+    height: 350vh;
+}
+
+.h-350px,
+.h350px {
+    height: 350px;
+}
+
+.hm-350px,
+.max-h-350px,
+.h-max-350px,
+.max-h350px {
+    max-height: 350px;
+}
+
+.min-h-350px,
+.h-min-350px,
+.min-h350px {
+    min-height: 350px;
+}
+
 .h-400,
 .h400p,
 .h-400p {
@@ -2819,6 +2879,36 @@
     min-height: 400px;
 }
 
+.h-450,
+.h450p,
+.h-450p {
+    height: 450%;
+}
+
+.vh-450,
+.h-450vh,
+.h450vh {
+    height: 450vh;
+}
+
+.h-450px,
+.h450px {
+    height: 450px;
+}
+
+.hm-450px,
+.max-h-450px,
+.h-max-450px,
+.max-h450px {
+    max-height: 450px;
+}
+
+.min-h-450px,
+.h-min-450px,
+.min-h450px {
+    min-height: 450px;
+}
+
 .h-500,
 .h500p,
 .h-500p {
@@ -2849,6 +2939,36 @@
     min-height: 500px;
 }
 
+.h-550,
+.h550p,
+.h-550p {
+    height: 550%;
+}
+
+.vh-550,
+.h-550vh,
+.h550vh {
+    height: 550vh;
+}
+
+.h-550px,
+.h550px {
+    height: 550px;
+}
+
+.hm-550px,
+.max-h-550px,
+.h-max-550px,
+.max-h550px {
+    max-height: 550px;
+}
+
+.min-h-550px,
+.h-min-550px,
+.min-h550px {
+    min-height: 550px;
+}
+
 .h-600,
 .h600p,
 .h-600p {
@@ -2879,6 +2999,36 @@
     min-height: 600px;
 }
 
+.h-650,
+.h650p,
+.h-650p {
+    height: 650%;
+}
+
+.vh-650,
+.h-650vh,
+.h650vh {
+    height: 650vh;
+}
+
+.h-650px,
+.h650px {
+    height: 650px;
+}
+
+.hm-650px,
+.max-h-650px,
+.h-max-650px,
+.max-h650px {
+    max-height: 650px;
+}
+
+.min-h-650px,
+.h-min-650px,
+.min-h650px {
+    min-height: 650px;
+}
+
 .h-700,
 .h700p,
 .h-700p {
@@ -2909,6 +3059,36 @@
     min-height: 700px;
 }
 
+.h-750,
+.h750p,
+.h-750p {
+    height: 750%;
+}
+
+.vh-750,
+.h-750vh,
+.h750vh {
+    height: 750vh;
+}
+
+.h-750px,
+.h750px {
+    height: 750px;
+}
+
+.hm-750px,
+.max-h-750px,
+.h-max-750px,
+.max-h750px {
+    max-height: 750px;
+}
+
+.min-h-750px,
+.h-min-750px,
+.min-h750px {
+    min-height: 750px;
+}
+
 .h-800,
 .h800p,
 .h-800p {
@@ -2939,6 +3119,36 @@
     min-height: 800px;
 }
 
+.h-850,
+.h850p,
+.h-850p {
+    height: 850%;
+}
+
+.vh-850,
+.h-850vh,
+.h850vh {
+    height: 850vh;
+}
+
+.h-850px,
+.h850px {
+    height: 850px;
+}
+
+.hm-850px,
+.max-h-850px,
+.h-max-850px,
+.max-h850px {
+    max-height: 850px;
+}
+
+.min-h-850px,
+.h-min-850px,
+.min-h850px {
+    min-height: 850px;
+}
+
 .h-900,
 .h900p,
 .h-900p {
@@ -2969,6 +3179,36 @@
     min-height: 900px;
 }
 
+.h-950,
+.h950p,
+.h-950p {
+    height: 950%;
+}
+
+.vh-950,
+.h-950vh,
+.h950vh {
+    height: 950vh;
+}
+
+.h-950px,
+.h950px {
+    height: 950px;
+}
+
+.hm-950px,
+.max-h-950px,
+.h-max-950px,
+.max-h950px {
+    max-height: 950px;
+}
+
+.min-h-950px,
+.h-min-950px,
+.min-h950px {
+    min-height: 950px;
+}
+
 .h-1000,
 .h1000p,
 .h-1000p {