@bagelink/vue 0.0.1004 → 0.0.1006

package/src/components/TableSchema.vue

@@ -5,9 +5,13 @@ import {
 	MaterialIcon,
 	isDate,
 	keyToLabel,
-	useBglSchema,
+	useBglSchema
 } from '@bagelink/vue'
-import { useVirtualList, useIntersectionObserver, until } from '@vueuse/core'
+import {
+	useVirtualList,
+	useIntersectionObserver,
+	until
+} from '@vueuse/core'
 import { computed, useSlots, watch } from 'vue'
 
 export type SortDirectionsT = 'ASC' | 'DESC'
@@ -19,7 +23,7 @@ const {
 	showFields,
 	onLastItemVisible,
 	useServerSort = false,
-	selectable = false
+	selectable = false,
 } = defineProps<{
 	data: T[]
 	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
@@ -36,55 +40,36 @@ const emit = defineEmits<{
 	'lastItemVisible': []
 }>()
 
-const slots = useSlots()
-const loading = defineModel('loading', { default: false })
+const NON_DIGIT_REGEX = /[^\d.-]/g
 
-const itemHeight = defineModel('itemHeight', { default: 50 })
-const computedItemHeight = $computed(() => `${itemHeight.value}px`)
-
-let sortField = $ref('')
-let sortDirection = $ref<SortDirectionsT>('ASC')
+const slots: any = useSlots()
 
+const loading = defineModel('loading', { default: false })
+const itemHeight = defineModel('itemHeight', { default: 50 })
 const selectedItems = defineModel<string[]>(
 	'selectedItems',
 	{
 		default: [] as string[],
-		set: (value: string[]) => {
-			setTimeout(updateAllSelectorState, 0)
-			return value
-		},
+		set: (value: string[]) => value,
 	}
 )
 
-const isSelectable = $computed(() => selectable === true && Array.isArray(selectedItems.value))
+let sortField = $ref('')
+let sortDirection = $ref<SortDirectionsT>('ASC')
 
-const computedSortField = $computed(() => `_transformed_${sortField}`)
+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,
 }))
 
-function transform(rowData: any) {
-	const obj: { [key: string]: any } = { ...rowData }
-	const schemaFields = computedSchema.filter(f => f.id)
-
-	for (const field of schemaFields) {
-		const fieldData = rowData[`${field.id}`]
-
-		const newFieldVal = field.transform?.(fieldData, rowData)
-
-		Object.assign(obj, {
-			[`${field.id}`]: fieldData,
-			[`_transformed_${field.id}`]: newFieldVal,
-		})
-	}
-	return obj
-}
-
-const NON_DIGIT_REGEX = /[^\d.-]/g
-
 const computedData = computed(() => {
 	if (!sortField || useServerSort === true) return data.map(transform)
 
@@ -122,6 +107,23 @@ const computedData = computed(() => {
 	)
 })
 
+function transform(rowData: any) {
+	const obj: { [key: string]: any } = { ...rowData }
+	const schemaFields = computedSchema.filter(f => f.id)
+
+	for (const field of schemaFields) {
+		const fieldData = rowData[`${field.id}`]
+
+		const newFieldVal = field.transform?.(fieldData, rowData)
+
+		Object.assign(obj, {
+			[`${field.id}`]: fieldData,
+			[`_transformed_${field.id}`]: newFieldVal,
+		})
+	}
+	return obj
+}
+
 function sort(fieldname: string) {
 	if (sortField === fieldname) {
 		if (sortDirection === 'ASC') sortDirection = 'DESC'
@@ -130,11 +132,9 @@ function sort(fieldname: string) {
 		sortField = fieldname
 		sortDirection = 'ASC'
 	}
-
 	emit('orderBy', `${fieldname} ${sortDirection}`.trim() as EmitOrderT)
 }
 
-// #region ? VIRTUAL LIST
 const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
 	computedData,
 	{
@@ -143,64 +143,53 @@ const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
 	}
 )
 
-watch(
-	() => computedData.value.length,
-	(newLength, oldLength) => {
-		if (newLength === oldLength || onLastItemVisible !== undefined) return
-		scrollTo(0)
-	}
-)
-// #endregion ? VIRTUAL LIST
-
-// #region ? SELECT COLUMN
-const allSelector = $ref<HTMLInputElement | undefined>()
-const computedSelectedItems = $computed(() => selectedItems.value)
-
 function updateAllSelectorState() {
-	if (!allSelector) return
-	const allSelected
-		= computedData.value.length === computedSelectedItems.length
+	if (!allSelectorEl) return
+	const allSelected = computedData.value.length === computedSelectedItems.length
 		&& computedData.value.every(s => s.id && computedSelectedItems.includes(s.id))
-	allSelector.checked = allSelected
-	allSelector.indeterminate = !allSelected && computedSelectedItems.length > 0
+	allSelectorEl.checked = allSelected
+	allSelectorEl.indeterminate = !allSelected && computedSelectedItems.length > 0
 }
 
 function toggleSelectItem(item: { [key: string]: any }) {
 	if (computedSelectedItems.length === 0) {
 		const obj = { ...item }
-		Object.keys(obj).forEach((key) => {
-			if (key.startsWith('_transformed_')) delete obj[key]
-		})
-
+		Object.keys(obj).forEach(key => key.startsWith('_transformed_') && delete obj[key])
 		emit('select', obj as T)
 		return
 	}
 	const index = computedSelectedItems.indexOf(item.id)
-	if (index > -1) {
-		computedSelectedItems.splice(index, 1)
-	} else {
-		computedSelectedItems.push(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) : []
 }
-// #endregion ? SELECT COLUMN
-
-const lastItem = $ref<HTMLTableRowElement | null>()
 
 async function registerLastItemObserver() {
-	await until(() => lastItem).toBeTruthy()
+	await until(() => lastItemEl).toBeTruthy()
 
-	useIntersectionObserver(lastItem, ([entry]) => {
+	useIntersectionObserver(lastItemEl, ([entry]) => {
 		if (entry.isIntersecting && computedData.value.length) {
 			emit('lastItemVisible')
 		}
 	})
 }
 
+watch(
+	() => computedData.value.length,
+	(newLength, oldLength) => {
+		if (newLength === oldLength || onLastItemVisible !== undefined) return
+		scrollTo(0)
+	}
+)
+
+watch(
+	() => computedSelectedItems.length,
+	() => { updateAllSelectorState() }
+)
+
 watch(
 	() => loading.value,
 	(newLoadingVal, oldLoadingVal) => {
@@ -228,7 +217,7 @@ watch(
 				<thead class="row first-row">
 					<th v-if="isSelectable">
 						<input
-							ref="allSelector"
+							ref="allSelectorEl"
 							type="checkbox"
 							@click.stop
 							@change="toggleSelectAll"
@@ -292,7 +281,7 @@ watch(
 							</div>
 						</td>
 					</tr>
-					<tr v-if="onLastItemVisible !== undefined" ref="lastItem" />
+					<tr v-if="onLastItemVisible !== undefined" ref="lastItemEl" style="height: 1px;" />
 				</tbody>
 			</table>
 		</div>

package/src/components/form/BglField.vue

@@ -66,7 +66,8 @@ function setFieldData(key: string, val: any) {
 	return data
 }
 
-function getFieldData(obj: Record<string, any>, key: string) {
+function getFieldData(obj: any, key: string) {
+	if (typeof obj !== 'object' || obj === null) return obj
 	const keys = key.split(objPathRegex)
 	let result = obj
 	for (const k of keys) {

package/src/components/form/inputs/RichText/composables/useEditor.ts

@@ -60,7 +60,6 @@ export function useEditor() {
 				styles.add(style)
 			}
 		})
-
 		updateListStyles(styles)
 		state.selectedStyles = styles
 	}

package/src/components/form/inputs/RichText/utils/media.ts

@@ -1,4 +1,7 @@
 import type { EditorState, Modal } from '../richTextTypes'
+import { bagelFormUtils } from '@bagelink/vue'
+
+const { frmRow, numField } = bagelFormUtils
 
 export function insertImage(modal: Modal, state: EditorState) {
 	const { range, doc } = state
@@ -9,15 +12,34 @@ export function insertImage(modal: Modal, state: EditorState) {
 		schema: [
 			{ id: 'src', $el: 'file', attrs: { bindkey: 'url' } },
 			{ id: 'alt', $el: 'text', label: 'Alt Text' },
+			frmRow(
+				numField('width', 'Width', { min: 1 }),
+				numField('height', 'Height', { min: 1 }),
+			),
+			{ id: 'figcaption', $el: 'check', label: 'Show Caption' },
 		],
-		onSubmit: (data: { src: string, alt: string }) => {
+		onSubmit: (data: Record<string, any>) => {
 			if (data.src) {
 				const img = doc.createElement('img')
-				img.src = data.src
-				img.alt = data.alt
-				// range.deleteContents()
+				Object.assign(img, {
+					src: data.src,
+					alt: data.alt || '',
+					width: data.width || undefined,
+					height: data.height || undefined
+				})
+
+				const node = data.figcaption
+					? (() => {
+						const figcaption = doc.createElement('figcaption')
+						figcaption.textContent = data.alt
+						const figure = doc.createElement('figure')
+						figure.append(img, figcaption)
+						return figure
+					})()
+					: img
+
 				range.collapse(false)
-				range.insertNode(img)
+				range.insertNode(node)
 			}
 		}
 	})

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

@@ -12,7 +12,7 @@ import {
 import { onMounted, watch } from 'vue'
 import 'floating-vue/style.css'
 
-const props = defineProps<{
+interface PropTypes {
 	options: Option[]
 	placeholder?: string
 	disabled?: boolean
@@ -28,11 +28,16 @@ const props = defineProps<{
 	clearable?: boolean
 	searchPlaceholder?: string
 	onSearch?: (search: string) => Promise<Option[]>
-}>()
+}
+
+const props = withDefaults(defineProps<PropTypes>(), {
+	searchPlaceholder: 'Search',
+	placeholder: 'Select',
+})
 
 const emit = defineEmits(['update:modelValue']) // Add 'search' event
 
-const searchPlaceholder = $computed(() => props.searchPlaceholder || 'Search')
+const searchPlaceholder = $computed(() => props.searchPlaceholder)
 
 const searchInput = $ref<HTMLElement | undefined>()
 
@@ -46,7 +51,7 @@ let selected = $ref(false)
 let open = $ref(false)
 
 const selectedLabel = $computed((): string => {
-	if (selectedItemCount === 0) return props.placeholder || 'Select'
+	if (selectedItemCount === 0) return props.placeholder
 	if (selectedItemCount > 4) {
 		const str = selectedItems
 			.slice(0, 4)

package/src/components/layout/SidebarMenu.vue

@@ -43,7 +43,6 @@ function toggleMenu() {
 				v-tooltip.right="{
 					content: nav.label,
 					disabled: open,
-					class: ['nav-tooltip'],
 				}"
 				:to="nav.to"
 				class="nav-button px-075 me-auto w-100"