@bagelink/vue 1.2.126 → 1.2.132

package/src/components/Pill.vue

@@ -25,6 +25,8 @@ const props = defineProps<{
 	round?: boolean
 	btn?: BtnProp
 	btnEnd?: BtnProp
+	large?: boolean
+	small?: boolean
 }>()
 
 const slots: SetupContext['slots'] = useSlots()
@@ -77,11 +79,14 @@ const computedBackgroundColor = $computed(
 
 <template>
 	<div
+		style="height: var(--pill-height);"
 		:disabled="disabled" :class="{
 			'bgl_pill': !icon || slots.default || value,
 			round,
 			'bgl_flatPill': flat,
 			'bgl_pill-border': border || outline,
+			'pillLarge': large,
+			'pillSmall': small,
 		}"
 	>
 		<div class="bgl_pill-flex">
@@ -91,12 +96,18 @@ const computedBackgroundColor = $computed(
 					<Btn class="bgl_pill-btn" round thin v-bind="btn" />
 				</div>
 			</div>
-			<Icon v-if="icon" :icon="icon" />
+			<Icon v-if="icon" :icon="icon" style="font-size: var(--pill-font-size)" />
 			<slot />
 			<template v-if="!slots.default">
-				{{ value || modelValue }}
+				<p
+					class="pillText"
+				>
+					{{ value || modelValue }}
+					{{ slots.default ? slots.default : value || modelValue }}
+					{{ value || modelValue }}
+				</p>
 			</template>
-			<Icon v-if="iconEnd" :icon="iconEnd" />
+			<Icon v-if="iconEnd" :icon="iconEnd" style="font-size: var(--pill-font-size)" />
 			<div v-if="loading" class="loading" />
 			<div v-else>
 				<div v-if="btnEnd" class="flex h-100">
@@ -108,6 +119,17 @@ const computedBackgroundColor = $computed(
 </template>
 
 <style scoped>
+.pillLarge{
+	--pill-font-size: var(--bgl-font-size);
+	--pill-height:auto;
+}
+.pillSmall{
+	--pill-font-size: 9px;
+	--pill-height:15px;
+}
+.pillText{
+	font-size: var(--pill-font-size);
+}
 .bgl_pill-btn{
 	color: var(--pill-btn-color);
 	background: var(--pill-btn-bg);
@@ -137,14 +159,15 @@ const computedBackgroundColor = $computed(
 }
 
 .bgl_pill {
-  padding-inline: 0.25rem;
+  padding-inline: calc(var(--pill-font-size) / 6);
+  padding-block: calc(var(--pill-font-size) / 24);
   transition: var(--bgl-transition);
   background-color: v-bind(computedBackgroundColor);
   color: v-bind(cumputedTextColor);
   display: inline-block;
   margin-inline-end: 0.25rem;
   border-radius: var(--pill-border-radius);
-  height: var(--pill-height);
+  min-height: var(--pill-height);
   vertical-align: middle;
   margin-bottom: 0.25rem;
 }

package/src/components/dataTable/DataTable.vue

@@ -7,7 +7,7 @@ import {
 	keyToLabel,
 	getNestedValue
 } from '@bagelink/vue'
-import { useSlots, watch, computed } from 'vue'
+import { useSlots, watch, computed, toValue } from 'vue'
 import { useSchemaField } from '../../composables/useSchemaField'
 import { useTableData } from './useTableData'
 import { useTableSelection } from './useTableSelection'
@@ -30,12 +30,6 @@ const loading = defineModel('loading', { default: false })
 const itemHeight = defineModel('itemHeight', { default: 50 })
 const selectedItems = defineModel<string[]>('selectedItems', { default: [] as string[] })
 
-// Create computed properties to wrap the props
-const data = computed(() => props.data)
-const schema = computed(() => props.schema as any)
-const columns = computed(() => props.columns as any)
-const useServerSort = computed(() => props.useServerSort as any)
-
 const {
 	computedSchema,
 	computedData,
@@ -44,10 +38,10 @@ const {
 	toggleSort,
 	cleanTransformedData
 } = useTableData<T>({
-	data,
-	schema,
-	columns,
-	useServerSort,
+	data: computed(() => props.data),
+	schema: computed(() => toValue(props.schema)),
+	columns: computed(() => toValue(props.columns)),
+	useServerSort: computed(() => toValue(props.useServerSort)),
 	onSort: (field, direction) => {
 		emit('orderBy', `${field.trim()} ${direction.trim()}` as EmitOrderT)
 	}

package/src/components/dataTable/useTableData.ts

@@ -1,5 +1,5 @@
 import type { BglFormSchemaT } from '@bagelink/vue'
-import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
 import type { SortDirectionsT } from '../../types/TableSchema'
 import { useBglSchema, isDate, keyToLabel } from '@bagelink/vue'
 import { computed, ref, watch, toValue } from 'vue'
@@ -14,10 +14,10 @@ const SRC_VALUE_COMPONENTS = new Set(['img', 'iframe'])
 
 // Extend the base options interface to include computed refs
 export interface UseTableDataOptions<T> {
-	data: ComputedRef<T[]>
-	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
-	columns?: MaybeRefOrGetter<string[]>
-	useServerSort?: MaybeRefOrGetter<boolean>
+	data: MaybeRefOrGetter<T[]>
+	schema?: MaybeRefOrGetter<BglFormSchemaT<T> | undefined>
+	columns?: MaybeRefOrGetter<string[] | undefined>
+	useServerSort?: MaybeRefOrGetter<boolean | undefined>
 	onSort?: (field: string, direction: SortDirectionsT) => void
 }
 
@@ -44,7 +44,7 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
 			schemaState.value = 'loading'
 
 			// Get the data safely
-			const dataValue = options.data.value || []
+			const dataValue = toValue(options.data) || []
 
 			// Get the schema from useBglSchema
 			const schema = useBglSchema<T>({
@@ -100,6 +100,9 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
 	const computedSchema = computed(() => resolvedSchema.value)
 
 	function transform(rowData: T): TransformedData<T> {
+		// TODO: only use type casting in the return statement
+		// TODO: replace assignments with Object.assign(transformed, {[key]: value})
+
 		const transformed = { ...rowData } as TransformedData<T>
 		const schemaFields = computedSchema.value.filter((f: any) => f.id)
 
@@ -150,16 +153,14 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
 
 	const computedData = computed(() => {
 		// Get the data safely
-		const currentData = options.data.value || []
+		const currentData = toValue(options.data) || []
 
 		// If there's no data, return an empty array
 		if (!Array.isArray(currentData) || currentData.length === 0) {
 			return []
 		}
 
-		const useServerSortValue = $computed(() => toValue(options.useServerSort))
-
-		if (!sortField.value || useServerSortValue === true) {
+		if (!sortField.value || toValue(options.useServerSort) === true) {
 			return currentData.map(transform)
 		}
 

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

@@ -205,7 +205,7 @@ onMounted(() => {
 	>
 		<template #trigger>
 			<label>
-				{{ label }} <span v-if="required">*</span>
+				{{ label }} <span v-if="required && label">*</span>
 				<div class="flex gap-05">
 					<TextInput
 						v-if="searchable && open"

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

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import type { UploadInputProps } from '@bagelink/vue'
-import { Btn, IMAGE_FORMATS_REGEXP, Icon, Card, Image, pathKeyToURL } from '@bagelink/vue'
-import { watchDebounced } from '@vueuse/core'
-import { toValue } from 'vue'
+import { Btn, IMAGE_FORMATS_REGEXP, Icon, Card, Image, pathKeyToURL, Loading } from '@bagelink/vue'
+import { onMounted } from 'vue'
 import { useFileUpload } from './useFileUpload'
 
 const props = withDefaults(defineProps<UploadInputProps>(), {
 	height: '215px',
 	theme: 'dropzone',
-	accept: '*'
+	accept: '*',
 })
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
@@ -18,15 +17,23 @@ const {
 	pathKeys,
 	removeFile,
 	flushQueue,
-	fileToUrl,
 	addFile,
 	browse,
-	pk
+	pk,
 } = useFileUpload({
 	disabled: props.disabled,
 	dirPath: props.dirPath,
 	multiple: props.multiple,
-	accept: props.accept
+	accept: props.accept,
+	namespace: props.id,
+	onFileQueued: async () => {
+		await flushQueue()
+		updateModelValue()
+	}
+})
+
+onMounted(() => {
+	if (props.modelValue) pk.value = [props.modelValue].flat()
 })
 
 const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
@@ -39,31 +46,24 @@ function handleDrag(e: DragEvent, isDragging = false) {
 	if (!props.disabled) isDragOver = isDragging
 }
 
+function updateModelValue() {
+	if (props.multiple) emit('update:modelValue', pathKeys.value)
+	else emit('update:modelValue', pathKeys.value[0] || undefined)
+}
+
 async function handleDrop(e: DragEvent) {
 	if (props.disabled) return
 	e.preventDefault()
 	e.stopPropagation()
 	emit('addFileStart')
 	addFile(e.dataTransfer?.files)
-	await flushQueue()
-	// emit('update:modelValue', pathKeys.value)
 	isDragOver = false
 }
 
-watchDebounced(() => toValue(pk), (value) => {
-	if (props.multiple) emit('update:modelValue', value)
-	else emit('update:modelValue', value[0] || undefined)
-}, { deep: true, immediate: true })
-
-watchDebounced(() => props.modelValue, (newVal, oldVal) => {
-	if (`${newVal}` === `${oldVal}`) return
-	if (newVal === undefined) return
-	if (Array.isArray(newVal)) {
-		pk.value = newVal
-	} else {
-		pk.value = [newVal]
-	}
-}, { immediate: true, debounce: 500 })
+function fileName(pathKey: string) {
+	if (!pathKey || typeof pathKey !== 'string') return 'file'
+	return pathKey.split('/').pop() || 'file'
+}
 </script>
 
 <template>
@@ -108,7 +108,7 @@ watchDebounced(() => props.modelValue, (newVal, oldVal) => {
 							flat
 							thin
 							:href="pathKeyToURL(path_key)"
-							:download="path_key.split('/').pop()"
+							:download="fileName(path_key)"
 						/>
 						<div class="flex gap-025 rounded pe-1 ps-05 py-025 bg-gray-80 -my-1 ">
 							<Icon icon="draft" :size="1.5" />
@@ -116,7 +116,7 @@ watchDebounced(() => props.modelValue, (newVal, oldVal) => {
 								v-lightbox="{ src: pathKeyToURL(path_key), download: true }"
 								class="ellipsis-1 word-break-all h-20 m-0 color-black txt16"
 							>
-								{{ path_key.split('/').pop() }}
+								{{ fileName(path_key) }}
 							</p>
 						</div>
 					</div>
@@ -161,7 +161,7 @@ watchDebounced(() => props.modelValue, (newVal, oldVal) => {
 						/>
 						<Icon v-else icon="description" class="multi-preview" />
 						<p class="m-0">
-							{{ path_key.split('/').pop() }}
+							{{ fileName(path_key) }}
 						</p>
 						<Btn
 							thin
@@ -177,12 +177,12 @@ watchDebounced(() => props.modelValue, (newVal, oldVal) => {
 						class="multi-image-item-preview"
 						:class="{ 'bgl_fill-image': fill }"
 					>
-						<Image
+						<img
 							v-if="isImage(file.file.type)"
 							class="multi-preview"
-							:src="fileToUrl(file.file)"
+							:src="file.url"
 							alt=""
-						/>
+						>
 						<Icon v-else icon="description" class="multi-preview" />
 						<p class="no-margin multi-preview-txt">
 							{{ file.name }}
@@ -232,7 +232,7 @@ watchDebounced(() => props.modelValue, (newVal, oldVal) => {
 								thin
 								icon="download"
 								:href="pathKeyToURL(path_key)"
-								:download="path_key.split('/').pop()"
+								:download="fileName(path_key)"
 							/>
 						</div>
 						<div v-if="isImage(path_key)" class="h-100">
@@ -259,25 +259,13 @@ watchDebounced(() => props.modelValue, (newVal, oldVal) => {
 						class="single-image-item-preview"
 						:class="{ 'bgl_fill-image': fill }"
 					>
-						<div
-							class="pie"
-							:style="{ '--p': file.progress }"
-							style="--b: 2px"
-							:class="{ complete: file.progress === 100 }"
-						>
-							<span v-if="file.progress < 100" class="progress">
-								{{ file.progress.toFixed(0) }}
-							</span>
-							<Icon class="success" icon="check_circle" />
-						</div>
-						<Image
+						<Loading type="bar" :progress="file.progress" class="absolute bottom-05 end start w-100px mx-auto" />
+						<img
 							v-if="isImage(file.file.type)"
-							v-lightbox="{ src: fileToUrl(file.file), download: true }"
-							class="single-preview"
-
-							:src="fileToUrl(file.file)"
+							class="single-preview opacity-5"
+							:src="file.url"
 							alt=""
-						/>
+						>
 					</div>
 				</div>
 			</slot>

package/src/components/form/inputs/Upload/upload.css

@@ -35,13 +35,16 @@
 	margin: 0.5rem !important;
 	background: var(--bgl-popup-bg);
 	padding: 0;
-	padding-inline-end: 0.75rem;
+	padding-inline-end: 1rem;
+	padding-inline-start: 0.25rem;
 	text-align: start;
 	color: var(--input-color);
 	display: grid;
 	grid-template-columns: auto 1fr 22px;
-	gap: 1rem;
+	gap: 0.5rem;
 	align-items: center;
+	height: var(--btn-height);
+	font-size: var(--label-font-size);
 }
 
 .multi-image-item-preview p {
@@ -51,9 +54,10 @@
 }
 
 .multi-preview {
-	width: 40px;
-	height: 40px;
-	border-radius: var(--input-border-radius);
+	/* width: 40px; */
+	height: calc(var(--btn-height) - 0.5rem);
+	max-width: calc(var(--btn-height) - 0.5rem);
+	border-radius: calc(var(--input-border-radius) / 2);
 	object-fit: cover;
 	background: var(--bgl-gray-light);
 	text-align: center !important;
@@ -92,14 +96,13 @@
 }
 
 .single-preview {
-	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
-	min-height: calc(100% - 2rem);
 	height: calc(100% - 2rem);
-	object-fit: cover;
+	max-height: calc(100% - 2rem);
 	background: var(--bgl-gray-light);
-	width: 90%;
+	max-width: calc(100% - 2rem);
+	object-fit: contain;
 }
 
 .single-image-item-preview:hover::after {

package/src/components/form/inputs/Upload/upload.types.ts

@@ -36,8 +36,10 @@ export interface UploadOptions {
 
 export interface QueueFile {
 	file: File
+	url?: string
 	progress: number
 	uploading?: boolean
 	name?: string
 	uploaded?: boolean
+	namespace?: string
 }

package/src/components/form/inputs/Upload/useFileUpload.ts

@@ -8,11 +8,15 @@ interface UseFileUploadProps {
 	dirPath?: string
 	accept?: string
 	disabled?: boolean
+	namespace?: string
+	onFileQueued?: (files: QueueFile[]) => void
 }
 
 export function useFileUpload(props: UseFileUploadProps = {}) {
 	files.setBaseUrl(useBagel().host)
 
+	const namespace = props.namespace || 'default'
+
 	const fileQueue = ref<QueueFile[]>([])
 	const storageFiles = ref<BglFile[]>([])
 	const pk = ref<string[]>([])
@@ -40,12 +44,22 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 		}
 
 		const newQueueFiles = filesToAdd.map(f => ({
+			url: fileToUrl(f),
 			name: f.name,
 			file: f,
-			progress: 0
+			progress: 0,
+			namespace
 		}))
+		if (props.multiple) {
+			fileQueue.value.push(...newQueueFiles)
+		} else {
+			fileQueue.value = newQueueFiles
+		}
 
-		fileQueue.value.push(...newQueueFiles)
+		// Call the onFilesQueued callback if provided
+		if (props.onFileQueued && newQueueFiles.length > 0) {
+			props.onFileQueued(newQueueFiles)
+		}
 	}
 
 	const removeFile = async (pathKeyOrFile: string | File | QueueFile) => {
@@ -64,7 +78,15 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 				console.error('Error deleting file:', error)
 			}
 		} else if (pathKeyOrFile) {
-			const index = fileQueue.value.findIndex(({ file }) => file.name === pathKeyOrFile.name)
+			// For File or QueueFile, check if it's in our queue for this namespace
+			const fileToRemove = pathKeyOrFile instanceof File
+				? { name: pathKeyOrFile.name }
+				: pathKeyOrFile
+
+			const index = fileQueue.value.findIndex(queueFile => queueFile.file.name === fileToRemove.name
+				&& queueFile.namespace === namespace
+			)
+
 			if (index !== -1) {
 				fileQueue.value.splice(index, 1)
 			}
@@ -72,7 +94,10 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 	}
 
 	const flushQueue = async () => {
-		for (const file of fileQueue.value) {
+		// Only process files in the current namespace
+		const namespaceQueue = fileQueue.value.filter(file => file.namespace === namespace)
+
+		for (const file of namespaceQueue) {
 			file.uploading = true
 
 			// If not multiple, replace the existing file
@@ -85,7 +110,7 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 					onUploadProgress: (e: ProgressEvent) => {
 						file.progress = (e.loaded / e.total) * 100 - 1
 					},
-					dirPath: props.dirPath,
+					dirPath: props.dirPath
 				})
 				pk.value.push(data.path_key)
 			} catch (error) {
@@ -93,12 +118,12 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 			}
 		}
 
-		// Clear the queue after processing
-		fileQueue.value = []
+		// Clear only files in the current namespace from the queue
+		fileQueue.value = fileQueue.value.filter(file => file.namespace !== namespace)
 	}
 
 	// UI interaction
-	const browse = (upload = false) => {
+	const browse = (autoFlush = false) => {
 		if (props.disabled) return
 
 		const input = document.createElement('input')
@@ -108,7 +133,7 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 
 		input.onchange = (e: Event) => {
 			addFile((e.target as HTMLInputElement).files)
-			if (upload) {
+			if (autoFlush) {
 				flushQueue()
 			}
 		}
@@ -140,5 +165,6 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 		flushQueue,
 		addFile,
 		browse,
+		namespace
 	}
 }

package/src/components/form/inputs/index.ts

@@ -5,7 +5,6 @@ export { default as ColorInput } from './ColorInput.vue'
 export { default as DateInput } from './DateInput.vue'
 export { default as DatePicker } from './DatePicker.vue'
 export { default as EmailInput } from './EmailInput.vue'
-export { default as FileUpload } from './FileUpload.vue'
 export { default as JSONInput } from './JSONInput.vue'
 export { default as NumberInput } from './NumberInput.vue'
 export { default as OTP } from './OTP.vue'