@bagelink/vue 0.0.1139 → 0.0.1143

package/src/components/form/BagelForm.vue

@@ -1,7 +1,7 @@
 <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 { BglForm,	CheckInput, DateInput, FieldArray, FileUpload, NumberInput, RichText, SelectInput, TabsNav, TextInput, ToggleInput, UploadInput } from '@bagelink/vue'
 import { h, watch } from 'vue'
 
 interface Props {
@@ -63,17 +63,10 @@ function getComponent(field: Field) {
 	return componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div'
 }
 
-function processFieldValue(fieldType: any, value: any): any {
-	if (value == null) return value
-	if (fieldType === 'select' && typeof value === 'object') return value.value
-	if (typeof value === 'object' && 'value' in value) return value.value
-	return value
-}
-
-function updateFormData(fieldId: string, value: any, fieldType?: any) {
+function updateFormData(fieldId: string, value: any) {
 	formData = {
 		...formData,
-		[fieldId]: processFieldValue(fieldType, value)
+		[fieldId]: value
 	}
 	emit('update:modelValue', formData)
 }
@@ -116,10 +109,10 @@ function renderSchemaField(field: Field): VNode | null {
 		label,
 		placeholder,
 		disabled,
-		'modelValue': processFieldValue(field.$el, currentValue),
+		'modelValue': currentValue,
 		'onUpdate:modelValue': (value: any) => {
 			if (!field.id) return
-			updateFormData(field.id, value, field.$el)
+			updateFormData(field.id, value)
 			field.onUpdate?.(value, formData)
 		}
 	}
@@ -151,9 +144,10 @@ function renderSchemaField(field: Field): VNode | null {
 		? {
 			default: () => field.children!
 				.map(child => typeof child === 'string' ? child : renderSchemaField(child))
-				.filter(Boolean)
+				.filter(Boolean),
+			...field.slots
 		}
-		: undefined
+		: field.slots
 
 	return h(Component as any, props, slots)
 }
@@ -177,7 +171,7 @@ defineExpose({ form, isDirty, validateForm })
 <template>
 	<form ref="form" @submit.prevent="handleSubmit">
 		<template v-if="resolvedSchema">
-			<template v-for="(field, index) in resolvedSchema" :key="field.id || index">
+			<template v-for="(field) in resolvedSchema" :key="field.id">
 				<component :is="renderSchemaField(field)" />
 			</template>
 		</template>

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

@@ -462,6 +462,7 @@ function drop(e: DragEvent) {
 						</div>
 						<Image
 							v-if="isImage(fileQ.file.type)"
+							v-lightbox="{ src: fileToUrl(fileQ.file), download: true }"
 							class="single-preview"
 							:src="fileToUrl(fileQ.file)"
 							alt=""

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { ToolbarConfig } from './richTextTypes'
 import { CodeEditor, copyText, Btn } from '@bagelink/vue'
-import { watch, computed } from 'vue'
+import { watch } from 'vue'
 import EditorToolbar from './components/EditorToolbar.vue'
 import { useCommands } from './composables/useCommands'
 import { useEditor } from './composables/useEditor'
 import { useEditorKeyboard } from './composables/useEditorKeyboard'
 
-const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig, debug?: boolean }>()
+const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig, debug?: boolean, label?: string }>()
 const emit = defineEmits(['update:modelValue'])
 
 const iframe = $ref<HTMLIFrameElement>()
@@ -15,8 +15,8 @@ const editor = useEditor()
 const commands = useCommands(editor.state, props.debug ? editor.debug : undefined)
 
 // Expose debug methods if debug mode is enabled
-const debugMethods = computed(() => props.debug ? editor.debug : undefined)
-
+const debugMethods = $computed(() => props.debug ? editor.debug : undefined)
+const hasRTL = $computed(() => /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(props.modelValue))
 async function initEditor() {
 	if (!iframe) {
 		setTimeout(initEditor, 100)
@@ -30,7 +30,6 @@ async function initEditor() {
 	doc.body.contentEditable = 'true'
 
 	// Set default direction based on content
-	const hasRTL = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(props.modelValue)
 	doc.body.dir = hasRTL ? 'rtl' : 'ltr'
 
 	const style = doc.createElement('style')
@@ -79,38 +78,44 @@ watch(() => props.modelValue, (newValue) => {
 })
 
 watch(() => editor.state.content, (newValue) => {
+	if (editor.state.doc?.body.innerHTML) {
+		editor.state.doc.body.dir = hasRTL ? 'rtl' : 'ltr'
+	}
 	emit('update:modelValue', newValue)
 })
 </script>
 
 <template>
-	<div class="rich-text-editor rounded pt-05 px-05 pb-075 mb-05" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
-		<EditorToolbar
-			v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
-			@action="commands.execute"
-		/>
-		<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
-			<div class="content-area radius-05">
-				<iframe id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" @load="initEditor" />
-			</div>
-			<CodeEditor
-				v-if="editor.state.isSplitView" v-model="editor.state.content" language="html"
-				@update:modelValue="editor.updateContent('html')"
+	<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 }">
+			<EditorToolbar
+				v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
+				@action="commands.execute"
 			/>
-		</div>
-		<div v-if="debug" class="flex">
-			<p class="text12 txt-gray mb-0 p-0">
-				Debug
-			</p>
-			<Btn thin color="gray" icon="delete" @click="debugMethods?.clearSession">
-				Clear Session
-			</Btn>
-			<Btn thin color="gray" icon="download" @click="debugMethods?.downloadSession">
-				Download Log
-			</Btn>
-			<Btn thin color="gray" icon="content_copy" @click="copyText(debugMethods?.exportDebugWithPrompt() || '')">
-				Copy Log
-			</Btn>
+			<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
+				<div class="content-area radius-05">
+					<iframe id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" @load="initEditor" />
+				</div>
+				<CodeEditor
+					v-if="editor.state.isSplitView" v-model="editor.state.content" language="html"
+					@update:modelValue="editor.updateContent('html')"
+				/>
+			</div>
+			<div v-if="debug" class="flex">
+				<p class="text12 txt-gray mb-0 p-0">
+					Debug
+				</p>
+				<Btn thin color="gray" icon="delete" @click="debugMethods?.clearSession">
+					Clear Session
+				</Btn>
+				<Btn thin color="gray" icon="download" @click="debugMethods?.downloadSession">
+					Download Log
+				</Btn>
+				<Btn thin color="gray" icon="content_copy" @click="copyText(debugMethods?.exportDebugWithPrompt() || '')">
+					Copy Log
+				</Btn>
+			</div>
 		</div>
 	</div>
 </template>

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

@@ -31,14 +31,11 @@ interface PropTypes {
 }
 
 const props = withDefaults(defineProps<PropTypes>(), {
-	searchPlaceholder: 'Search',
 	placeholder: 'Select',
 })
 
 const emit = defineEmits(['update:modelValue']) // Add 'search' event
 
-const searchPlaceholder = $computed(() => props.searchPlaceholder)
-
 const searchInput = $ref<HTMLElement | undefined>()
 
 let selectedItems = $ref<Option[]>([])
@@ -61,6 +58,7 @@ const selectedLabel = $computed((): string => {
 	}
 	return selectedItems.map(item => getLabel(item)).join(', ')
 })
+const searchPlaceholder = $computed(() => props.searchPlaceholder ?? selectedLabel ?? 'Search')
 
 let serverOptions: Option[] = $ref([])
 let isSearching = $ref(false)

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

@@ -308,6 +308,8 @@ watch(() => props.dirPath, () => {
 						</div>
 						<div v-if="isImage(path_key)" class="h-100">
 							<Image
+								v-lightbox="{ src: pathToUrl(path_key), download: true }"
+
 								class="single-preview"
 								:pathKey="path_key"
 								alt=""
@@ -341,7 +343,9 @@ watch(() => props.dirPath, () => {
 						</div>
 						<Image
 							v-if="isImage(file.file.type)"
+							v-lightbox="{ src: fileToUrl(file.file), download: true }"
 							class="single-preview"
+
 							:src="fileToUrl(file.file)"
 							alt=""
 						/>

package/src/components/index.ts

@@ -11,6 +11,8 @@ export { default as Card } from './Card.vue'
 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'
+export { default as TableSchema } from './DataTable/DataTable.vue'
 export { default as Dropdown } from './Dropdown.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'
 export { default as Flag } from './Flag.vue'
@@ -22,8 +24,8 @@ 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 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'
@@ -31,7 +33,6 @@ 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'
-export { default as TableSchema } from './TableSchema.vue'
 
 export { default as Title } from './Title.vue'
 export { default as ToolBar } from './ToolBar.vue'

package/src/types/BagelForm.ts

@@ -36,6 +36,7 @@ export interface BaseBagelField<T = { [key: string]: any }> {
 	'disabled'?: boolean
 	'helptext'?: string
 	'options'?: BagelFieldOptions<T>
+	'slots'?: { [key: string]: any }
 	'defaultValue'?: any
 	'transform'?: (val?: any, rowData?: T) => any
 	'onUpdate'?: (val: any, rowData?: T) => void

package/src/types/TableSchema.ts

@@ -0,0 +1,39 @@
+import type { BglFormSchemaT } from '@bagelink/vue'
+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>> {
+	data: T[]
+	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
+	showFields?: string[]
+	useServerSort?: boolean
+	selectable?: boolean
+	onLastItemVisible?: () => void
+}
+
+export interface SortingOptions<T> {
+	onSort: (field: string, direction: SortDirectionsT) => void
+}
+
+export interface TableSelectionOptions<T> {
+	selectable: boolean | undefined
+	selectedItems: { value: string[] }
+	onSelect: (item: T) => void
+}
+
+export interface TableVirtualizationOptions<T> {
+	data: Ref<T[]> | ComputedRef<T[]>
+	itemHeight: number
+	onLastItemVisible?: () => void
+}
+
+export interface TableDataOptions<T> {
+	data: Ref<T[]> | ComputedRef<T[]>
+	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
+	showFields?: string[]
+	sortField: string
+	sortDirection: SortDirectionsT
+	useServerSort?: boolean
+}