@bagelink/vue 0.0.1145 → 0.0.1151

package/src/components/form/BagelForm.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { BglFormSchemaT, BglFormSchemaFnT, Field } from '@bagelink/vue'
 import type { VNode } from 'vue'
-import { BglForm,	CheckInput, DateInput, FieldArray, FileUpload, NumberInput, RichText, SelectInput, TabsNav, TextInput, ToggleInput, UploadInput } from '@bagelink/vue'
 import { h, watch } from 'vue'
+import { useSchemaField } from '../../composables/useSchemaField'
 
 interface Props {
 	modelValue: Record<string, any>
@@ -39,30 +39,6 @@ const isDirty = $computed(() => {
 	return current !== initial
 })
 
-function getComponent(field: Field) {
-	const componentMap = {
-		text: TextInput,
-		textarea: TextInput,
-		number: NumberInput,
-		array: FieldArray,
-		select: SelectInput,
-		toggle: ToggleInput,
-		check: CheckInput,
-		richtext: RichText,
-		upload: UploadInput,
-		file: FileUpload,
-		date: DateInput,
-		tabs: TabsNav,
-		bglform: BglForm
-	}
-
-	if (field.$el === 'textarea' && !field.attrs?.multiline) {
-		field.attrs = { ...field.attrs, multiline: true }
-	}
-
-	return componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div'
-}
-
 function updateFormData(fieldId: string, value: any) {
 	formData = {
 		...formData,
@@ -76,82 +52,6 @@ function handleSubmit() {
 	initialFormData = { ...formData }
 }
 
-function renderSchemaField(field: Field): VNode | null {
-	const Component = getComponent(field)
-	if (!Component) return null
-
-	// Check if this field should be rendered based on v-if conditions
-	if (!shouldRenderField(field)) return null
-
-	const {
-		$el,
-		vIf,
-		'v-if': vIf2,
-		children,
-		options,
-		attrs,
-		class: fieldClass,
-		id,
-		onUpdate,
-		// Common form field props that need special handling
-		required,
-		label,
-		placeholder,
-		disabled,
-		...fieldProps
-	} = field
-
-	const currentValue = field.id ? formData[field.id] : undefined
-
-	const props: Record<string, any> = {
-		...fieldProps,
-		required,
-		label,
-		placeholder,
-		disabled,
-		'modelValue': currentValue,
-		'onUpdate:modelValue': (value: any) => {
-			if (!field.id) return
-			updateFormData(field.id, value)
-			field.onUpdate?.(value, formData)
-		}
-	}
-
-	// Remove undefined props to avoid vue warnings
-	Object.keys(props).forEach(key => props[key] === undefined && delete props[key])
-
-	// Add options if they exist in the field
-	if (field.options) {
-		props.options = typeof field.options === 'function'
-			? field.options(formData[field.id as string], formData)
-			: field.options
-	}
-
-	// Handle dynamic props
-	if (field.attrs) {
-		Object.entries(field.attrs).forEach(([key, value]) => {
-			props[key] = typeof value === 'function' ? value(formData[field.id as string], formData) : value
-		})
-	}
-
-	if (field.class) {
-		props.class = typeof field.class === 'function'
-			? field.class(formData[field.id as string], formData)
-			: field.class
-	}
-
-	const slots = field.children?.length
-		? {
-			default: () => field.children!
-				.map(child => typeof child === 'string' ? child : renderSchemaField(child))
-				.filter(Boolean),
-			...field.slots
-		}
-		: field.slots
-
-	return h(Component as any, props, slots)
-}
-
 function shouldRenderField(field: Field): boolean {
 	const condition = field.vIf ?? field['v-if']
 	if (condition === undefined) return true
@@ -165,6 +65,21 @@ function validateForm() {
 	return form.reportValidity()
 }
 
+const { renderField } = useSchemaField<Record<string, any>>({
+	mode: 'form',
+	getRowData: () => formData,
+	onUpdate: (field, value) => {
+		if (!field.id) return
+		updateFormData(field.id, value)
+		field.onUpdate?.(value, formData)
+	}
+})
+
+function renderSchemaField(field: Field): VNode | null {
+	if (!shouldRenderField(field)) return null
+	return renderField(field)
+}
+
 defineExpose({ form, isDirty, validateForm })
 </script>
 

package/src/components/form/FieldArray.vue

@@ -7,7 +7,8 @@ import type {
 	BglFormSchemaFnT,
 	Field,
 } from '@bagelink/vue'
-import { BglForm, BglField, Btn } from '@bagelink/vue'
+import { BagelForm, Btn } from '@bagelink/vue'
+import { useSchemaField } from '../../composables/useSchemaField'
 
 const props = withDefaults(
 	defineProps<{
@@ -70,6 +71,18 @@ const computedField = $computed(
 		$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()
+	}
+})
 </script>
 
 <template>
@@ -78,34 +91,46 @@ const computedField = $computed(
 			{{ label }}
 		</p>
 
-		<div v-if="schema" class="-ms-05 ps-05 border-start">
-			<div v-for="(_, i) in data" :key="i" outline thin class="mb-05 itemBox transition p-05">
-				<BglForm v-model="data[i]" :schema="schema" @update:model-value="emitValue" />
-				<Btn
-					v-if="props.delete"
-					icon="delete"
-					value="Delete"
-					class="txt10 opacity-7 color-red"
-					thin
-					flat
-					@click="deleteItem(i)"
-				/>
+		<div v-if="schema" class="ps-025 border-start">
+			<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)"
+					/>
+				</div>
 			</div>
 			<Btn v-if="add" thin icon="add" color="gray" class="txt12" @click="addItem">
-				<p>Add {{ label }}</p>
+				<p>{{ label }}</p>
 			</Btn>
 		</div>
 		<template v-else>
-			<BglField v-for="(_, i) in data" :key="i" v-model="data[i]" :field="computedField" @update:model-value="emitValue" />
+			<component
+				:is="renderField({ ...computedField, id: String(i) })"
+				v-for="(_, i) in data"
+				:key="i"
+				@update:model-value="emitValue"
+			/>
 		</template>
 	</div>
 </template>
 
 <style>
 .itemBox{
-	/* border-top: 2px solid var(--bgl-gray); */
-	/* border-bottom: 2px solid var(--bgl-gray); */
 	background: var(--input-bg);
+	grid-template-columns: 1fr auto;
+	display: grid;
+	--label-font-size: 0.6rem;
+	--input-height: 30px;
+	--input-font-size: 14px;
+}
+.pt-065{
+	padding-top: 0.65rem;
 }
 
 .itemBox .bagel-input input,
@@ -114,4 +139,7 @@ const computedField = $computed(
 .itemBox .custom-select .input {
 	background: var(--bgl-white) !important;
 }
+.itemBox .bagel-input{
+	margin-bottom: 0.15rem !important;
+}
 </style>

package/src/components/form/index.ts

@@ -1,5 +1,4 @@
 export { default as BglForm } from './BagelForm.vue'
 export { default as BagelForm } from './BagelForm.vue'
-export { default as BglField } from './BglField.vue'
 export { default as FieldArray } from './FieldArray.vue'
 export * from './inputs'

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

@@ -43,6 +43,9 @@ const {
 	accept?: string
 	required?: boolean
 	disabled?: boolean
+	dropPlaceholder?: string
+	noFilePlaceholder?: string
+	btnPlaceholder?: string
 }>()
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
@@ -258,10 +261,9 @@ function drop(e: DragEvent) {
 				class="px-1-5"
 				icon="upload"
 				outline
+				:value="btnPlaceholder || 'Upload'"
 				@click="browse"
-			>
-				Upload
-			</Btn>
+			/>
 
 			<div
 				v-for="file in storageFiles"
@@ -304,7 +306,7 @@ function drop(e: DragEvent) {
 						<Icon icon="draft" :size="1.5" />
 						<p
 							v-lightbox="{ src: file.url, download: true }"
-							class="ellipsis-1 word-break-all h-20 m-0 color-black txt18"
+							class="ellipsis-1 word-break-all h-20 m-0 color-black txt16"
 						>
 							{{ file.name }}
 						</p>
@@ -323,7 +325,7 @@ function drop(e: DragEvent) {
 				v-if="!storageFiles.length && !fileQueue.length"
 				class="txt-gray txt-12"
 			>
-				No file selected
+				{{ noFilePlaceholder || 'No file selected' }}
 			</span>
 		</Card>
 		<div
@@ -493,7 +495,9 @@ function drop(e: DragEvent) {
 					class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05"
 				>
 					<Icon icon="upload_2" />
-					Drop files here or click to upload
+					<span class=" pretty balance">
+						{{ dropPlaceholder || 'Drag and Drop files here or click to upload' }}
+					</span>
 				</p>
 			</slot>
 		</div>

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

@@ -103,7 +103,9 @@ watch(() => modelValue, (newVal) => {
 		}"
 	>
 		<div :for="id">
-			{{ label }}
+			<label>
+				{{ label }}
+			</label>
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
 				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment" />
 

package/src/components/form/inputs/RichText/index.vue

@@ -88,7 +88,7 @@ watch(() => editor.state.content, (newValue) => {
 <template>
 	<div class="bagel-input">
 		<label>{{ label }}</label>
-		<div class="rich-text-editor rounded pt-05 px-05 pb-075 mb-05" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
+		<div class="rich-text-editor rounded pt-05 px-05 pb-075" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
 			<EditorToolbar
 				v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
 				@action="commands.execute"

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -18,6 +18,10 @@ const props = withDefaults(defineProps<{
 	required?: boolean
 	disabled?: boolean
 	baseURL?: string
+	dropPlaceholder?: string
+	noFilePlaceholder?: string
+	btnPlaceholder?: string
+
 }>(), {
 	height: '215px',
 	theme: 'dropzone',
@@ -155,10 +159,9 @@ watch(() => props.dirPath, () => {
 				class="px-1-5"
 				icon="upload"
 				outline
+				:value="btnPlaceholder || 'Upload'"
 				@click="browse"
-			>
-				Upload
-			</Btn>
+			/>
 
 			<template v-for="path_key in pathKeys" :key="path_key">
 				<div class="txt-gray txt-12 flex">
@@ -188,7 +191,7 @@ watch(() => props.dirPath, () => {
 							<Icon icon="draft" :size="1.5" />
 							<p
 								v-lightbox="{ src: pathToUrl(path_key), download: true }"
-								class="ellipsis-1 word-break-all h-20 m-0 color-black txt18"
+								class="ellipsis-1 word-break-all h-20 m-0 color-black txt16"
 							>
 								{{ path_key.split('/').pop() }}
 							</p>
@@ -201,7 +204,7 @@ watch(() => props.dirPath, () => {
 				v-if="!pathKeys.length && !fileQueue.length"
 				class="txt-gray txt-12"
 			>
-				No file selected
+				{{ noFilePlaceholder || 'No file selected' }}
 			</span>
 		</Card>
 
@@ -363,9 +366,11 @@ watch(() => props.dirPath, () => {
 				:fileQueue
 				:browse
 			>
-				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05">
+				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05 ">
 					<Icon icon="upload_2" />
-					Drop files here or click to upload
+					<span class=" pretty balance">
+						{{ dropPlaceholder || 'Drag and Drop files here or click to upload' }}
+					</span>
 				</p>
 			</slot>
 		</div>

package/src/components/index.ts

@@ -12,7 +12,9 @@ export { default as Carousel } from './Carousel.vue'
 export * from './dashboard'
 export { default as DataPreview } from './DataPreview.vue'
 export { default as DataTable } from './DataTable/DataTable.vue'
+/** @deprecated Use DataTable instead of TableSchema. They are the same component. */
 export { default as TableSchema } from './DataTable/DataTable.vue'
+export { Draggable, useDraggable, vDraggable } from './Draggable'
 export { default as Dropdown } from './Dropdown.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'
 export { default as Flag } from './Flag.vue'
@@ -22,15 +24,16 @@ export { default as IframeVue } from './IframeVue.vue'
 export { default as Image } from './Image.vue'
 export * from './layout'
 export { default as ListItem } from './ListItem.vue'
+
 export { default as ListView } from './ListView.vue'
 export { default as Loading } from './Loading.vue'
-
 export { default as MapEmbed } from './MapEmbed.vue'
 export { default as Modal } from './Modal.vue'
 export { default as ModalConfirm } from './ModalConfirm.vue'
 export { default as ModalForm } from './ModalForm.vue'
 export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
+
 export { default as Pill } from './Pill.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
 
@@ -38,4 +41,5 @@ export { default as Title } from './Title.vue'
 export { default as ToolBar } from './ToolBar.vue'
 
 export { default as TopBar } from './TopBar.vue'
+
 export { default as Zoomer } from './Zoomer.vue'

package/src/composables/useSchemaField.ts

@@ -0,0 +1,193 @@
+import type { VNode } from 'vue'
+import type { BaseBagelField } from '../types/BagelForm'
+import {
+	TextInput,
+	NumberInput,
+	FieldArray,
+	SelectInput,
+	ToggleInput,
+	CheckInput,
+	RichText,
+	UploadInput,
+	FileUpload,
+	DateInput,
+	TabsNav,
+	BglForm,
+	bindAttrs,
+	classify,
+	keyToLabel
+} from '@bagelink/vue'
+import { h } from 'vue'
+
+const SLOT_VALUE_COMPONENTS = new Set(['div', 'span', 'p'])
+
+const SRC_VALUE_COMPONENTS = new Set(['img', 'iframe'])
+
+export interface UseSchemaFieldOptions<T> {
+	mode?: 'form' | 'preview' | 'table'
+	getRowData?: () => T
+	onUpdate?: (field: BaseBagelField<T>, value: any) => void
+}
+
+export function useSchemaField<T extends Record<string, any>>(options: UseSchemaFieldOptions<T>) {
+	const { mode = 'form', getRowData, onUpdate } = options
+
+	function getComponent(field: BaseBagelField<T>) {
+		const componentMap = {
+			text: TextInput,
+			textarea: TextInput,
+			number: NumberInput,
+			array: FieldArray,
+			select: SelectInput,
+			toggle: ToggleInput,
+			check: CheckInput,
+			richtext: RichText,
+			upload: UploadInput,
+			file: FileUpload,
+			date: DateInput,
+			tabs: TabsNav,
+			form: BglForm
+		}
+
+		if (field.$el === 'textarea' && !field.attrs?.multiline) {
+			field.attrs = { ...field.attrs, multiline: true }
+		}
+
+		return typeof field.$el === 'object' ? field.$el : componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div'
+	}
+
+	function renderField(
+		field: BaseBagelField<T>,
+		slots?: Record<string, (props: { row: T, field: BaseBagelField<T> }) => any>
+	): VNode | null {
+		const Component = getComponent(field)
+		if (!Component) return null
+
+		const rowData = getRowData?.() || {} as T
+
+		const {
+			$el,
+			children,
+			options,
+			attrs,
+			class: fieldClass,
+			id,
+			transform,
+			slots: fieldSlots,
+			required,
+			label,
+			placeholder,
+			disabled,
+			...fieldProps
+		} = field
+
+		const currentValue = field.id ? rowData[field.id as keyof T] : undefined
+		const transformedValue = transform ? transform(currentValue, rowData) : currentValue
+
+		// First bind any function attributes with the current value and row data
+		const boundFieldProps = bindAttrs(fieldProps, currentValue, rowData)
+
+		// Check if this component should receive value as slot
+		const isSlotValueComponent = typeof Component === 'string' && SLOT_VALUE_COMPONENTS.has(Component)
+		// Check if this component should receive value as src
+		const isSrcValueComponent = typeof Component === 'string' && SRC_VALUE_COMPONENTS.has(Component)
+
+		const props: Record<string, any> = {
+			...boundFieldProps,
+			required,
+			label,
+			placeholder,
+			disabled,
+		}
+
+		// For form mode, always use the original value for modelValue
+		if (mode === 'form') {
+			props.modelValue = currentValue
+			props['onUpdate:modelValue'] = (value: any) => {
+				onUpdate?.(field, value)
+			}
+		} else {
+			// For display modes (table/preview), use transformed value based on component type
+			if (isSlotValueComponent) {
+				// Slot components don't need a value prop
+			} else if (isSrcValueComponent) {
+				props.src = transformedValue
+			} else {
+				props.modelValue = transformedValue
+			}
+		}
+
+		// Remove undefined props to avoid vue warnings
+		Object.keys(props).forEach(key => props[key] === undefined && delete props[key])
+
+		// Add options if they exist in the field
+		if (field.options) {
+			props.options = typeof field.options === 'function'
+				? field.options(currentValue, rowData)
+				: field.options
+		}
+
+		// Handle dynamic props and attrs
+		if (field.attrs) {
+			const boundAttrs = bindAttrs(field.attrs, currentValue, rowData)
+			Object.entries(boundAttrs).forEach(([key, value]) => {
+				if (typeof value === 'function') {
+					props[key] = value(currentValue, rowData)
+				} else {
+					props[key] = value
+				}
+			})
+		}
+
+		// Handle class binding last to ensure all transformations are applied
+		props.class = classify(currentValue, rowData, fieldClass, props.class)
+
+		// Handle component slots
+		const componentSlots: Record<string, any> = {}
+
+		// Add default slot if there are children
+		if (children?.length) {
+			componentSlots.default = () => children.map((child) => {
+				if (typeof child === 'string') return child
+				return renderField(child, slots)
+			})
+		}
+
+		// For slot value components, add the transformed value as default slot content
+		if (isSlotValueComponent && transformedValue !== undefined) {
+			componentSlots.default = () => transformedValue?.toString() || ''
+		}
+
+		// Add any custom slots from the field
+		if (fieldSlots) {
+			Object.entries(fieldSlots).forEach(([name, slot]) => {
+				componentSlots[name] = typeof slot === 'function'
+					? () => slot(currentValue, rowData)
+					: () => slot
+			})
+		}
+
+		// Handle custom slot content from parent
+		const slotContent = field.id && slots?.[field.id]
+			? slots[field.id]({ row: rowData, field })
+			: undefined
+
+		if (mode === 'preview') {
+			return h('div', { class: 'preview-field' }, [
+				h('div', { class: 'field-label' }, field.label || keyToLabel(field.id || '')),
+				h('div', { class: 'field-value' }, [
+					slotContent || (typeof field.$el === 'object'
+						? h(Component as any, props, componentSlots)
+						: transformedValue?.toString() || '')
+				])
+			])
+		}
+
+		return slotContent || h(Component as any, props, componentSlots)
+	}
+
+	return {
+		renderField,
+		getComponent
+	}
+}

package/src/styles/text.css

@@ -114,7 +114,6 @@
     font-size: 100px;
 }
 
-
 .txt110,
 .txt-110 {
     font-size: 110px;
@@ -140,7 +139,6 @@
     font-size: 150px;
 }
 
-
 .txt18,
 .txt-18 {
     font-size: 18px;
@@ -357,6 +355,18 @@
     cursor: pointer;
 }
 
+.grab {
+    cursor: grab;
+}
+
+.grab:active {
+    cursor: grabbing;
+}
+
+.not-allowed {
+    cursor: not-allowed;
+}
+
 .decoration-none {
     text-decoration: none;
 }
@@ -387,7 +397,7 @@
 }
 
 .bgl_icon-font {
-    font-family: "Material Symbols Outlined", serif !important;
+    font-family: 'Material Symbols Outlined', serif !important;
 }
 
 .nowrap {
@@ -406,9 +416,7 @@
     white-space: nowrap;
 }
 
-
 @media screen and (max-width: 910px) {
-
     .txt20,
     .txt-20 {
         font-size: 18px;
@@ -525,7 +533,6 @@
         font-size: 72px;
     }
 
-
     .m_txt80,
     .m_txt-80 {
         font-size: 80px;
@@ -541,7 +548,6 @@
         font-size: 100px;
     }
 
-
     .m_txt110,
     .m_txt-110 {
         font-size: 110px;
@@ -792,9 +798,8 @@
         text-decoration: underline !important;
     }
 
-
     .m_bgl_icon-font {
-        font-family: "Material Symbols Outlined", serif;
+        font-family: 'Material Symbols Outlined', serif;
     }
 
     .m_nowrap {
@@ -828,5 +833,4 @@
     .m_capitalize {
         text-transform: capitalize;
     }
-
-}
+}