@bagelink/vue 0.0.1139 → 0.0.1141

package/dist/types/TableSchema.d.ts

@@ -0,0 +1,36 @@
+import { BglFormSchemaT } from '..';
+import { 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;
+}
+//# sourceMappingURL=TableSchema.d.ts.map

package/dist/types/TableSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSchema.d.ts","sourceRoot":"","sources":["../../src/types/TableSchema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAE3C,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,CAAA;AAC5C,MAAM,MAAM,UAAU,GAAG,GAAG,MAAM,IAAI,eAAe,EAAE,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IACpF,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,MAAM,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACtD,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAChC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAA;CAC3D;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,UAAU,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC5C,IAAI,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAClC,IAAI,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IACjC,MAAM,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACtD,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,eAAe,CAAA;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;CACvB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1139",
+  "version": "0.0.1141",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Btn.vue

@@ -81,12 +81,12 @@ const slots: SetupContext['slots'] = useSlots()
 	>
 		<Loading v-if="loading" class="h-100p" size="15" />
 		<div v-else class="bgl_btn-flex">
-			<Icon v-if="icon" :icon="icon" />
+			<Icon v-if="icon" :icon="icon" class="transition-400" />
 			<slot />
 			<template v-if="!slots.default && value">
 				{{ value }}
 			</template>
-			<Icon v-if="iconEnd" :icon="iconEnd" />
+			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
 		</div>
 	</component>
 </template>

package/src/components/{TableSchema.vue → DataTable/DataTable.vue}

@@ -1,37 +1,20 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import type { BglFormSchemaT } from '@bagelink/vue'
+import type { TableSchemaProps } from '../../types/TableSchema'
 import {
 	BglComponent,
 	Icon,
-	isDate,
 	keyToLabel,
-	useBglSchema
 } from '@bagelink/vue'
-import {
-	useVirtualList,
-	useIntersectionObserver,
-	until
-} from '@vueuse/core'
-import { computed, useSlots, watch } from 'vue'
+
+import { useSlots, watch, computed } from 'vue'
+import { useTableData } from './useTableData'
+import { useTableSelection } from './useTableSelection'
+import { useTableVirtualization } from './useTableVirtualization'
 
 export type SortDirectionsT = 'ASC' | 'DESC'
 export type EmitOrderT = `${string} ${SortDirectionsT}`
 
-const {
-	data,
-	schema,
-	showFields,
-	onLastItemVisible,
-	useServerSort = false,
-	selectable = false,
-} = defineProps<{
-	data: T[]
-	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
-	showFields?: string[]
-	useServerSort?: boolean
-	selectable?: boolean
-	onLastItemVisible?: () => void
-}>()
+const props = defineProps<TableSchemaProps<T>>()
 
 const emit = defineEmits<{
 	'update:selectedItems': [string[]]
@@ -40,8 +23,6 @@ const emit = defineEmits<{
 	'lastItemVisible': []
 }>()
 
-const NON_DIGIT_REGEX = /[^\d.-]/g
-
 const slots: any = useSlots()
 
 const loading = defineModel('loading', { default: false })
@@ -54,148 +35,75 @@ const selectedItems = defineModel<string[]>(
 	}
 )
 
-let sortField = $ref('')
-let sortDirection = $ref<SortDirectionsT>('ASC')
-
-const allSelectorEl = $ref<HTMLInputElement | undefined>()
-const lastItemEl = $ref<HTMLTableRowElement | null>()
-
-const computedSelectedItems = $computed(() => selectedItems.value)
-const computedItemHeight = $computed(() => `${itemHeight.value}px`)
-const isSelectable = $computed(() => selectable === true && Array.isArray(selectedItems.value))
-const computedSortField = $computed(() => `_transformed_${sortField}`)
-const computedSchema = $computed(() => useBglSchema<T>({
-	schema,
-	showFields,
-	data,
-}))
-
-const computedData = computed(() => {
-	if (!sortField || useServerSort === true) return data.map(transform)
-
-	return (
-		data
-			.map(transform)
-			.sort(
-				(a, z) => {
-					let aValue = a[computedSortField] ?? a[sortField] ?? ''
-					let bValue = z[computedSortField] ?? z[sortField] ?? ''
-
-					if (isDate(aValue) && isDate(bValue)) {
-					// ? now we can sort by as number
-						aValue = new Date(aValue).getTime()
-						bValue = new Date(bValue).getTime()
-					}
-
-					const numAValue = Number.parseInt(`${aValue}`.replaceAll(NON_DIGIT_REGEX, ''), 10)
-					const numBValue = Number.parseInt(`${bValue}`.replaceAll(NON_DIGIT_REGEX, ''), 10)
-
-					if (!Number.isNaN(numAValue) && !Number.isNaN(numBValue)) {
-						if (sortDirection === 'ASC') return numAValue - numBValue
-						return numBValue - numAValue
-					}
-
-					if (typeof aValue === 'string') {
-						if (sortDirection === 'ASC') return aValue.localeCompare(bValue)
-						return bValue.localeCompare(aValue)
-					}
-
-					if (sortDirection === 'ASC') return aValue < bValue ? -1 : 1
-					return aValue < bValue ? 1 : -1
-				}
-			)
-	)
-})
-
-function transform(rowData: any) {
-	const obj: { [key: string]: any } = { ...rowData }
-	const schemaFields = computedSchema.filter((f: any) => f.id)
-
-	for (const field of schemaFields) {
-		const fieldData = rowData[`${field.id}`]
-		const newFieldVal = field.transform?.(fieldData, rowData)
+const data = computed(() => props.data)
 
-		Object.assign(obj, {
-			[`${field.id}`]: fieldData,
-			[`_transformed_${field.id}`]: newFieldVal,
-		})
-	}
-	return obj
-}
-
-function sort(fieldname: string) {
-	if (sortField === fieldname) {
-		if (sortDirection === 'ASC') sortDirection = 'DESC'
-		else sortField = ''
-	} else {
-		sortField = fieldname
-		sortDirection = 'ASC'
-	}
-	emit('orderBy', `${fieldname} ${sortDirection}`.trim() as EmitOrderT)
-}
-
-const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
+const {
+	computedSchema,
 	computedData,
-	{
-		itemHeight: itemHeight.value,
-		overscan: 10,
+	sortField,
+	sortDirection,
+	toggleSort
+} = useTableData<T>({
+	data,
+	schema: props.schema,
+	showFields: props.showFields,
+	useServerSort: props.useServerSort,
+	onSort: (field, direction) => {
+		emit('orderBy', `${field} ${direction}`.trim() as EmitOrderT)
 	}
-)
+})
 
-function updateAllSelectorState() {
-	if (!allSelectorEl) return
-	const allSelected = computedData.value.length === computedSelectedItems.length
-		&& computedData.value.every(s => s.id && computedSelectedItems.includes(s.id))
-	allSelectorEl.checked = allSelected
-	allSelectorEl.indeterminate = !allSelected && computedSelectedItems.length > 0
-}
+const {
+	computedSelectedItems,
+	isSelectable,
+	allSelectorEl,
+	updateAllSelectorState,
+	toggleSelectItem,
+	toggleSelectAll
+} = useTableSelection<T>({
+	selectable: props.selectable,
+	selectedItems,
+	onSelect: (item) => { emit('select', item) }
+})
 
-function toggleSelectItem(item: { [key: string]: any }) {
-	if (computedSelectedItems.length === 0) {
-		const obj = { ...item }
-		Object.keys(obj).forEach(key => key.startsWith('_transformed_') && delete obj[key])
-		emit('select', obj as T)
-		return
+const {
+	list,
+	containerProps,
+	wrapperProps,
+	scrollTo,
+	lastItemEl,
+	registerLastItemObserver
+} = useTableVirtualization<T>({
+	data: computedData,
+	itemHeight: itemHeight.value,
+	onLastItemVisible: () => {
+		emit('lastItemVisible')
+		props.onLastItemVisible?.()
 	}
-	const index = computedSelectedItems.indexOf(item.id)
-	index > -1 ? computedSelectedItems.splice(index, 1) : computedSelectedItems.push(item.id)
-}
-
-function toggleSelectAll(event: Event) {
-	const value = (event.target as HTMLInputElement).checked
-	selectedItems.value = value ? computedData.value.map((d: any) => d.id) : []
-}
-
-async function registerLastItemObserver() {
-	await until(() => lastItemEl).toBeTruthy()
+})
 
-	useIntersectionObserver(lastItemEl, ([entry]) => {
-		if (entry.isIntersecting && computedData.value.length) {
-			emit('lastItemVisible')
-		}
-	})
-}
+const computedItemHeight = $computed(() => `${itemHeight.value}px`)
 
 watch(
-	() => computedData.value.length,
-	(newLength, oldLength) => {
-		if (newLength === oldLength || onLastItemVisible !== undefined) return
-		scrollTo(0)
-	}
+	() => loading.value,
+	(newLoadingVal, oldLoadingVal) => {
+		if (newLoadingVal === oldLoadingVal) return
+		if (!newLoadingVal) registerLastItemObserver()
+	},
+	{ immediate: true }
 )
 
 watch(
-	() => computedSelectedItems.length,
+	computedSelectedItems,
 	() => { updateAllSelectorState() }
 )
 
 watch(
-	() => loading.value,
-	(newLoadingVal, oldLoadingVal) => {
-		if (newLoadingVal === oldLoadingVal) return
-		if (!newLoadingVal) registerLastItemObserver()
-	},
-	{ immediate: true }
+	computedData,
+	(newData, oldData) => {
+		if (newData.length === oldData.length || props.onLastItemVisible !== undefined) return
+		scrollTo(0)
+	}
 )
 </script>
 
@@ -226,7 +134,7 @@ watch(
 						v-for="field in computedSchema"
 						:key="field.id"
 						class="col"
-						@click="sort(field?.id || '')"
+						@click="toggleSort(field?.id || '')"
 					>
 						<div class="flex">
 							{{ field.label || keyToLabel(field.id) }}
@@ -281,7 +189,7 @@ watch(
 							</div>
 						</td>
 					</tr>
-					<tr v-if="onLastItemVisible !== undefined" ref="lastItemEl" style="height: 1px;" />
+					<tr v-if="props.onLastItemVisible !== undefined" ref="lastItemEl" style="height: 1px;" />
 				</tbody>
 			</table>
 		</div>

package/src/components/DataTable/tableTypes.ts

@@ -0,0 +1,38 @@
+import type { BglFormSchemaT } from '@bagelink/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: T[]
+	itemHeight: number
+	onLastItemVisible?: () => void
+}
+
+export interface TableDataOptions<T> {
+	data: T[]
+	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
+	showFields?: string[]
+	sortField: string
+	sortDirection: SortDirectionsT
+	useServerSort?: boolean
+}

package/src/components/DataTable/useSorting.ts

@@ -0,0 +1,30 @@
+import type { SortDirectionsT, SortingOptions } from '../../types/TableSchema'
+import { ref, computed } from 'vue'
+
+export function useSorting<T>(options: SortingOptions<T>) {
+	const sortFieldRef = ref('')
+	const sortDirectionRef = ref<SortDirectionsT>('ASC')
+
+	const sortField = computed(() => sortFieldRef.value)
+	const sortDirection = computed(() => sortDirectionRef.value)
+
+	function sort(fieldname: string) {
+		if (sortFieldRef.value === fieldname) {
+			if (sortDirectionRef.value === 'ASC') {
+				sortDirectionRef.value = 'DESC'
+			} else {
+				sortFieldRef.value = ''
+			}
+		} else {
+			sortFieldRef.value = fieldname
+			sortDirectionRef.value = 'ASC'
+		}
+		options.onSort(sortFieldRef.value, sortDirectionRef.value)
+	}
+
+	return {
+		sortField,
+		sortDirection,
+		sort
+	}
+}

package/src/components/DataTable/useTableData.ts

@@ -0,0 +1,95 @@
+import type { TableDataOptions, SortDirectionsT } from '../../types/TableSchema'
+import { useBglSchema, isDate } from '@bagelink/vue'
+import { computed, ref } from 'vue'
+
+const NON_DIGIT_REGEX = /[^\d.-]/g
+
+export interface UseTableDataOptions<T> extends Omit<TableDataOptions<T>, 'sortField' | 'sortDirection'> {
+	onSort?: (field: string, direction: SortDirectionsT) => void
+}
+
+export function useTableData<T extends Record<string, any>>(options: UseTableDataOptions<T>) {
+	// Create reactive reference to data prop
+
+	// Sorting state
+	const sortField = ref('')
+	const sortDirection = ref<SortDirectionsT>('ASC')
+
+	const computedSchema = computed(() => useBglSchema<T>({
+		schema: options.schema,
+		showFields: options.showFields,
+		data: options.data.value,
+	}))
+
+	function transform(rowData: T): T {
+		const transformed = { ...rowData }
+		const schemaFields = computedSchema.value.filter((f: any) => f.id)
+
+		for (const field of schemaFields) {
+			const fieldData = rowData[`${field.id}`]
+			const newFieldVal = field.transform?.(fieldData, rowData)
+			;(transformed as any)[`_transformed_${field.id}`] = newFieldVal
+		}
+		return transformed
+	}
+
+	const computedSortField = computed(() => `_transformed_${sortField.value}`)
+
+	const computedData = computed(() => {
+		const currentData = options.data.value
+		if (!sortField.value || options.useServerSort === true) {
+			return currentData.map(transform)
+		}
+
+		return currentData
+			.map(transform)
+			.sort((a, z) => {
+				let aValue = (a as any)[computedSortField.value] ?? a[sortField.value] ?? ''
+				let bValue = (z as any)[computedSortField.value] ?? z[sortField.value] ?? ''
+
+				if (isDate(aValue) && isDate(bValue)) {
+					aValue = new Date(aValue).getTime()
+					bValue = new Date(bValue).getTime()
+				}
+
+				const numAValue = Number.parseInt(`${aValue}`.replaceAll(NON_DIGIT_REGEX, ''), 10)
+				const numBValue = Number.parseInt(`${bValue}`.replaceAll(NON_DIGIT_REGEX, ''), 10)
+
+				if (!Number.isNaN(numAValue) && !Number.isNaN(numBValue)) {
+					if (sortDirection.value === 'ASC') return numAValue - numBValue
+					return numBValue - numAValue
+				}
+
+				if (typeof aValue === 'string') {
+					if (sortDirection.value === 'ASC') return aValue.localeCompare(bValue)
+					return bValue.localeCompare(aValue)
+				}
+
+				if (sortDirection.value === 'ASC') return aValue < bValue ? -1 : 1
+				return aValue < bValue ? 1 : -1
+			})
+	})
+
+	function toggleSort(fieldname: string) {
+		if (sortField.value === fieldname) {
+			if (sortDirection.value === 'ASC') {
+				sortDirection.value = 'DESC'
+			} else {
+				sortField.value = ''
+			}
+		} else {
+			sortField.value = fieldname
+			sortDirection.value = 'ASC'
+		}
+		options.onSort?.(sortField.value, sortDirection.value)
+	}
+
+	return {
+		computedSchema,
+		computedData,
+		transform,
+		sortField: computed(() => sortField.value),
+		sortDirection: computed(() => sortDirection.value),
+		toggleSort
+	}
+}

package/src/components/DataTable/useTableSelection.ts

@@ -0,0 +1,45 @@
+import type { TableSelectionOptions } from '../../types/TableSchema'
+import { computed, ref } from 'vue'
+
+export function useTableSelection<T extends Record<string, any>>(options: TableSelectionOptions<T>) {
+	const allSelectorEl = ref<HTMLInputElement>()
+	const computedSelectedItems = computed(() => options.selectedItems.value)
+	const isSelectable = computed(() => options.selectable === true && Array.isArray(options.selectedItems.value))
+
+	function updateAllSelectorState() {
+		if (!allSelectorEl.value) return
+		const allSelected = computedSelectedItems.value.length === options.selectedItems.value.length
+			&& computedSelectedItems.value.every(id => options.selectedItems.value.includes(id))
+		allSelectorEl.value.checked = allSelected
+		allSelectorEl.value.indeterminate = !allSelected && computedSelectedItems.value.length > 0
+	}
+
+	function toggleSelectItem(item: T) {
+		if (computedSelectedItems.value.length === 0) {
+			const cleanItem = { ...item }
+			Object.keys(cleanItem).forEach(key => key.startsWith('_transformed_') && delete cleanItem[key])
+			options.onSelect(cleanItem)
+			return
+		}
+		const index = computedSelectedItems.value.indexOf(item.id)
+		if (index > -1) {
+			options.selectedItems.value.splice(index, 1)
+		} else {
+			options.selectedItems.value.push(item.id)
+		}
+	}
+
+	function toggleSelectAll(event: Event) {
+		const value = (event.target as HTMLInputElement).checked
+		options.selectedItems.value = value ? computedSelectedItems.value.map((d: any) => d.id) : []
+	}
+
+	return {
+		computedSelectedItems,
+		isSelectable,
+		allSelectorEl,
+		updateAllSelectorState,
+		toggleSelectItem,
+		toggleSelectAll
+	}
+}

package/src/components/DataTable/useTableVirtualization.ts

@@ -0,0 +1,33 @@
+import type { TableVirtualizationOptions } from '../../types/TableSchema'
+import { useVirtualList, useIntersectionObserver, until } from '@vueuse/core'
+import { ref } from 'vue'
+
+export function useTableVirtualization<T>(options: TableVirtualizationOptions<T>) {
+	const lastItemEl = ref<HTMLTableRowElement | null>(null)
+	const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
+		options.data,
+		{
+			itemHeight: options.itemHeight,
+			overscan: 10,
+		}
+	)
+
+	async function registerLastItemObserver() {
+		await until(() => lastItemEl.value).toBeTruthy()
+
+		useIntersectionObserver(lastItemEl, ([entry]) => {
+			if (entry.isIntersecting && options.data.value.length) {
+				options.onLastItemVisible?.()
+			}
+		})
+	}
+
+	return {
+		list,
+		containerProps,
+		wrapperProps,
+		scrollTo,
+		lastItemEl,
+		registerLastItemObserver
+	}
+}

package/src/components/Icon/Icon.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 	weight?: number | string
 }>()
 
-const iconRender = (props.icon || props.name) as IconType
+const iconRender = $computed(() => props.icon || props.name) as IconType
 
 const iconRenderType = $computed(() => {
 	if (MATERIAL_ICONS.includes(iconRender)) return 'material'

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)
 		}
 	}

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

@@ -1,7 +1,7 @@
 <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'
@@ -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,6 +78,9 @@ 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>