@bagelink/vue 1.2.101 → 1.2.105

package/src/components/form/FieldArray.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup generic="T, P extends Path<T>">
+<script lang="ts" setup generic="T extends {[key: string]: any}, P extends Path<T>">
 import type {
 	AttributeFn,
 	AttributeValue,
@@ -50,6 +50,8 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
+const BagelFormFA = BagelForm<T, P>
+
 // State
 const minimizedItems = ref<boolean[]>([])
 const internalData = ref<any[]>(props.modelValue || [])
@@ -201,7 +203,7 @@ const showMinimizeButton = computed(() => {
 					</p>
 
 					<!-- Form View -->
-					<BagelForm
+					<BagelFormFA
 						v-else
 						:model-value="isPrimitiveType ? { value: item } : item"
 						:schema="resolvedSchemaData"

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

@@ -1,4 +1,4 @@
-import type { Field } from '@bagelink/vue'
+import type { BaseBagelField } from '@bagelink/vue'
 import type { ModalApi } from '../../../../../plugins/modal'
 
 import type { EditorState } from '../richTextTypes'
@@ -90,7 +90,7 @@ export function insertEmbed(modal: ModalApi, state: EditorState) {
 				bglFrmUtil.numField('width', 'Width', { min: 200, placeholder: '560' }),
 				bglFrmUtil.numField('height', 'Height', { min: 200, placeholder: '315' })
 			),
-			{ id: 'allowFullscreen', $el: 'check', label: 'Allow Fullscreen', value: true } as Field<InsertImbedModalData>,
+			{ id: 'allowFullscreen', $el: 'check', label: 'Allow Fullscreen', value: true } as BaseBagelField<InsertImbedModalData, 'allowFullscreen'>,
 		],
 		onSubmit: (data: { url: string, width?: number, height?: number, allowFullscreen?: boolean }) => {
 			if (!data.url) return

package/src/components/index.ts

@@ -15,6 +15,7 @@ export { default as DataTable } from './dataTable/DataTable.vue'
 /** @deprecated Use DataTable instead. TableSchema is an alias that will be removed in a future version. */
 export { default as TableSchema } from './dataTable/DataTable.vue'
 export { Draggable, useDraggable, vDraggable } from './draggable'
+export { default as DragOver } from './DragOver.vue'
 export { default as Dropdown } from './Dropdown.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'
 export { default as Flag } from './Flag.vue'
@@ -22,6 +23,7 @@ export * from './form'
 export { default as Icon } from './Icon/Icon.vue'
 export { default as IframeVue } from './IframeVue.vue'
 export { default as Image } from './Image.vue'
+export { default as ImportData } from './ImportData.vue'
 export * from './layout'
 export { default as ListItem } from './ListItem.vue'
 export { default as ListView } from './ListView.vue'

package/src/components/lightbox/Lightbox.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { LightboxItem } from './lightbox.types'
 
-import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Carousel } from '@bagelink/vue'
+import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Carousel, downloadFile } from '@bagelink/vue'
 import { watch } from 'vue'
 
 let isOpen = $ref(false)
@@ -61,18 +61,6 @@ function clickOutside() {
 	if (zoom === 1) close()
 }
 
-const upgradeHeaders = (url: string) => url.replace(/http:\/\//, '//')
-
-function downloadFile() {
-	const link = document.createElement('a')
-	const src = currentItem.src || ''
-	link.target = '_blank'
-	link.href = upgradeHeaders(src)
-	link.download = src ? src.split('/').pop() || 'download' : 'download'
-	document.body.appendChild(link)
-	link.click()
-	document.body.removeChild(link)
-}
 defineExpose({ open, close })
 </script>
 
@@ -118,7 +106,7 @@ defineExpose({ open, close })
 					<Btn
 						v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat icon="download"
 						value="Download File"
-						@click="downloadFile"
+						@click="downloadFile(currentItem?.src)"
 					/>
 					<div v-if="!currentItem?.openFile && !currentItem?.download" />
 				</div>

package/src/composables/index.ts

@@ -5,8 +5,8 @@ import { getFallbackSchema } from '@bagelink/vue'
 import { ref, toValue, watch } from 'vue'
 
 export { useDevice } from './useDevice'
+export { useExcel } from './useExcel'
 export { usePolling } from './usePolling'
-export { useValidateFieldValue } from './useValidateFieldValue'
 interface UseBglSchemaParamsT<T> {
 	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
 	columns?: MaybeRefOrGetter<string[]>
@@ -47,3 +47,4 @@ export function localRef<T>(
 }
 
 export const useLocalStorage = localRef
+export { useValidateFieldValue } from './useValidateFieldValue'

package/src/composables/useExcel.ts

@@ -0,0 +1,220 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type { BglFormSchemaT } from '../types'
+import { ref, toValue } from 'vue'
+import { appendScript, downloadFile, getNestedValue } from '../utils'
+
+declare global {
+	interface Window {
+		XLSX: any
+	}
+}
+
+interface SheetData {
+	headers: string[]
+	data: Record<string, any>[]
+}
+
+const objKeys = (object: object) => Object.keys(object)
+const strToTitle = (str?: string) => str?.split(' ').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' ')
+
+function formatData<T>(data: T[], schema?: BglFormSchemaT<T>) {
+	return schema
+		? data.map((row) => {
+			const newRow: any = {}
+			schema.forEach(({ id, transform, label }) => {
+				if (id) {
+					// Support for dot notation to access nested properties
+					const value = getNestedValue(row, id)
+					const key = label || id
+					newRow[key] = transform?.(value, row) || value || ''
+				}
+			})
+			return newRow
+		})
+		: data
+}
+
+export function useExcel() {
+	const xlsxLoaded = ref(false)
+
+	async function ensureXLSXLoaded() {
+		if (!xlsxLoaded.value) {
+			await appendScript('https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js')
+			xlsxLoaded.value = true
+		}
+		return window.XLSX
+	}
+
+	async function downloadExcel<T>(data: T[], fileName = 'data', schemaFn?: MaybeRefOrGetter<BglFormSchemaT<T>>) {
+		const schema = toValue(schemaFn) || []
+		const XLSX = await ensureXLSXLoaded()
+
+		const formattedData = formatData(data, schema)
+		const headers = schema.length > 0 ? schema.map(({ id, label }) => ({ v: label || id, t: 's' })) : []
+		const ws = XLSX.utils.json_to_sheet(formattedData)
+
+		if (headers.length > 0) {
+			XLSX.utils.sheet_add_aoa(ws, [headers.map(h => h.v)], { origin: 'A1' })
+		}
+
+		const wb = XLSX.utils.book_new()
+		XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
+		fileName = fileName.endsWith('.xlsx') ? fileName : `${fileName}.xlsx`
+		XLSX.writeFile(wb, fileName)
+	}
+
+	async function downloadCSV(data: Record<string, any>[], fileName = 'data', schema?: BglFormSchemaT<any>) {
+		const keys = schema ? schema.map(({ id }) => id).filter(Boolean) : [...new Set(data.flatMap(objKeys))]
+		const columns = schema ? schema.map(({ label, id }) => label || strToTitle(id)) : keys.map(strToTitle)
+
+		const formattedData = formatData(data, schema)
+		const csv = [
+			columns.join(','),
+			...formattedData.map(row => keys.map((key) => {
+				const value = row[key as string] !== undefined ? row[key as string] : ''
+				return `"${String(value).replace(/"/g, '""')}"`
+			}).join(','))
+		].join('\n')
+		fileName = fileName.endsWith('.csv') ? fileName : `${fileName}.csv`
+		const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' })
+		downloadFile(blob, fileName)
+	}
+
+	async function getWorkbook(file: File) {
+		const XLSX = await ensureXLSXLoaded()
+		const data = await file.arrayBuffer()
+		return XLSX.read(data)
+	}
+
+	async function getSheetNames(file: File): Promise<string[]> {
+		const workbook = await getWorkbook(file)
+		return workbook.SheetNames
+	}
+
+	async function readSheetData(file: File, sheetName: string, hasHeaders = true): Promise<SheetData> {
+		const XLSX = await ensureXLSXLoaded()
+		const workbook = await getWorkbook(file)
+		const worksheet = workbook.Sheets[sheetName]
+
+		// Read the raw sheet data as arrays
+		const rawSheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) as any[][]
+
+		if (rawSheetData.length === 0) {
+			return { headers: [], data: [] }
+		}
+
+		// Extract headers based on hasHeaders setting
+		let headers: string[] = []
+		let startRow = 0
+
+		if (hasHeaders) {
+			// Use first row as headers
+			headers = rawSheetData[0].map(h => String(h || '').trim())
+			startRow = 1
+		} else {
+			// Generate column letter headers (A, B, C...)
+			const firstRow = rawSheetData[0]
+			headers = firstRow.map((_, i) => String.fromCharCode(65 + i))
+		}
+
+		// Convert the raw data into objects
+		const parsedData = []
+		for (let i = startRow; i < rawSheetData.length; i++) {
+			const row = rawSheetData[i]
+			const rowData: Record<string, any> = {}
+			for (let j = 0; j < headers.length; j++) {
+				if (j < row.length) {
+					rowData[headers[j]] = row[j]
+				} else {
+					rowData[headers[j]] = ''
+				}
+			}
+
+			parsedData.push(rowData)
+		}
+
+		return {
+			headers,
+			data: parsedData
+		}
+	}
+
+	async function readExcelFile(file: File): Promise<any[]> {
+		const XLSX = await ensureXLSXLoaded()
+
+		return new Promise((resolve, reject) => {
+			const reader = new FileReader()
+
+			reader.onload = (e) => {
+				try {
+					const data = new Uint8Array(e.target?.result as ArrayBuffer)
+					const workbook = XLSX.read(data, { type: 'array' })
+
+					const firstSheetName = workbook.SheetNames[0]
+					const worksheet = workbook.Sheets[firstSheetName]
+					const jsonData = XLSX.utils.sheet_to_json(worksheet)
+
+					resolve(jsonData)
+				} catch (error) {
+					reject(error)
+				}
+			}
+
+			reader.onerror = () => {
+				reject(new Error('Failed to read file'))
+			}
+
+			reader.readAsArrayBuffer(file)
+		})
+	}
+
+	// Helper function for date detection and conversion
+	function isExcelSerialDate(value: any): boolean {
+		return (
+			typeof value === 'number'
+			&& Number.isInteger(value)
+			&& value >= 20000
+			&& value <= 50000
+		)
+	}
+
+	function excelSerialDateToJSDate(serial: number): Date {
+		const excelEpoch = new Date(Date.UTC(1899, 11, 30)) // Excel counts from Dec 30, 1899
+		const msPerDay = 24 * 60 * 60 * 1000
+		return new Date(excelEpoch.getTime() + serial * msPerDay)
+	}
+
+	function formatDate(date: Date, includeTime = false): string {
+		if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+			return ''
+		}
+
+		const year = date.getFullYear()
+		const month = String(date.getMonth() + 1).padStart(2, '0')
+		const day = String(date.getDate()).padStart(2, '0')
+
+		if (!includeTime) {
+			return `${year}-${month}-${day}`
+		}
+
+		const hours = String(date.getHours()).padStart(2, '0')
+		const minutes = String(date.getMinutes()).padStart(2, '0')
+		const seconds = String(date.getSeconds()).padStart(2, '0')
+
+		return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`
+	}
+
+	return {
+		downloadExcel,
+		downloadCSV,
+		readExcelFile,
+		ensureXLSXLoaded,
+		getSheetNames,
+		readSheetData,
+		getWorkbook,
+		// Date helpers
+		isExcelSerialDate,
+		excelSerialDateToJSDate,
+		formatDate
+	}
+}

package/src/plugins/modalTypes.ts

@@ -37,7 +37,7 @@ export interface ModalFormComponentProps<T extends { [key: string]: any }> exten
 	modalOptions: ModalFormOptions<T>
 }
 
-export interface ModalFormOptions<T extends { [key: string]: any }> {
+export interface ModalFormOptions<T> {
 	'schema': MaybeRefOrGetter<BglFormSchemaT<T>>
 	'modelValue'?: T
 	'onUpdate:modelValue'?: (val: T) => void

package/src/styles/buttons.css

@@ -1,140 +1,144 @@
 .bgl_btn,
 .bgl_flatBtn,
 .bgl_btn-icon {
-    font-family: inherit;
-    white-space: nowrap;
-    cursor: pointer;
-    box-sizing: border-box;
-    user-select: none;
-    border: none;
-    transition: var(--bgl-transition);
-    border-radius: var(--btn-border-radius);
-    line-height: var(--btn-height);
-    font-size: var(--input-font-size);
-    display: inline-block;
-    height: var(--btn-height);
-    padding: 0;
+	font-family: inherit;
+	white-space: nowrap;
+	cursor: pointer;
+	box-sizing: border-box;
+	user-select: none;
+	border: none;
+	transition: var(--bgl-transition);
+	border-radius: var(--btn-border-radius);
+	line-height: var(--btn-height);
+	font-size: var(--input-font-size);
+	display: inline-block;
+	height: var(--btn-height);
+	padding: 0;
 }
 
 .btn-close {
-    margin-top: -20px;
-    margin-inline-end: -20px;
-    margin-inline-start: auto;
-    margin-bottom: 15px;
-    transition: var(--bgl-transition);
-    height: 30px;
-    width: 30px;
-    opacity: 0.6;
-    cursor: pointer;
-    border-radius: 100%;
-    outline: 2px solid transparent;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+	margin-top: -20px;
+	margin-inline-end: -20px;
+	margin-inline-start: auto;
+	margin-bottom: 15px;
+	transition: var(--bgl-transition);
+	height: 30px;
+	width: 30px;
+	opacity: 0.6;
+	cursor: pointer;
+	border-radius: 100%;
+	outline: 2px solid transparent;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .btn-close:hover {
-    background: var(--bgl-gray-light);
-    opacity: 1;
+	background: var(--bgl-gray-light);
+	opacity: 1;
 }
 
 .btn-close:active {
-    background: var(--bgl-gray);
+	background: var(--bgl-gray);
 }
 
 .btn-close::before {
-    content: 'close';
-    font-family: 'Material Symbols Outlined', serif;
+	content: 'close';
+	font-family: 'Material Symbols Outlined', serif;
 }
 
 .bgl_btn.thin {
-    height: calc(var(--btn-height) * 0.7);
-    line-height: calc(var(--btn-height) * 0.7);
+	height: calc(var(--btn-height) * 0.7);
+	line-height: calc(var(--btn-height) * 0.7);
 }
 
 .hover {
-    cursor: pointer;
-    transition: all 400ms ease;
+	cursor: pointer;
+	transition: all 400ms ease;
 }
 
 .hover:hover {
-    filter: brightness(90%);
+	filter: brightness(90%);
 }
 
 .hover:active {
-    filter: brightness(80%);
+	filter: brightness(80%);
 }
 
 .border {
-    border: 1px solid var(--border-color);
+	border: 1px solid var(--border-color);
 }
 
 .border-primary {
-    border: 1px solid var(--bgl-primary);
+	border: 1px solid var(--bgl-primary);
 }
 
 .outline {
-    outline: 1px solid var(--border-color);
+	outline: 1px solid var(--border-color);
+}
+
+.outline-dashed {
+	outline: 2px dashed var(--border-color);
 }
 
 .outline-primary {
-    outline: 1px solid var(--bgl-primary);
+	outline: 1px solid var(--bgl-primary);
 }
 
 .rotate-270 {
-    transform: rotate(270deg);
+	transform: rotate(270deg);
 }
 
 .rotate-180 {
-    transform: rotate(180deg);
+	transform: rotate(180deg);
 }
 
 .rotate-90 {
-    transform: rotate(90deg);
+	transform: rotate(90deg);
 }
 
 .rotate-0 {
-    transform: rotate(0deg) !important;
+	transform: rotate(0deg) !important;
 }
 
 @media screen and (max-width: 910px) {
-    .bgl_btn {
-        padding: 0 20px;
-    }
+	.bgl_btn {
+		padding: 0 20px;
+	}
 
-    .m_border {
-        border: 1px solid var(--border-color);
-    }
+	.m_border {
+		border: 1px solid var(--border-color);
+	}
 
-    .m_rotate-270 {
-        transform: rotate(270deg);
-    }
+	.m_rotate-270 {
+		transform: rotate(270deg);
+	}
 
-    .m_rotate-180 {
-        transform: rotate(180deg);
-    }
+	.m_rotate-180 {
+		transform: rotate(180deg);
+	}
 
-    .m_rotate-90 {
-        transform: rotate(90deg);
-    }
+	.m_rotate-90 {
+		transform: rotate(90deg);
+	}
 
-    .m_rotate-0 {
-        transform: rotate(0deg) !important;
-    }
+	.m_rotate-0 {
+		transform: rotate(0deg) !important;
+	}
 }
 
 .ripple {
-    position: absolute;
-    border-radius: 50%;
-    transform: scale(0);
-    background: rgba(0, 0, 0, 0.3);
-    pointer-events: none;
-    animation: rippleEffect 0.6s ease-out;
+	position: absolute;
+	border-radius: 50%;
+	transform: scale(0);
+	background: rgba(0, 0, 0, 0.3);
+	pointer-events: none;
+	animation: rippleEffect 0.6s ease-out;
 }
 
 @keyframes rippleEffect {
-    to {
-        transform: scale(4);
-        opacity: 0;
-    }
-}
+	to {
+		transform: scale(4);
+		opacity: 0;
+	}
+}

package/src/types/BagelForm.ts

@@ -100,22 +100,22 @@ export type BglFieldT<T> = Field<T>
 
 export type BglFormSchemaT<T> = Field<T>[]
 
-export type InputBagelField<T> = Field<T> & {
-	$el: 'text' | ComponentExposed<typeof TextInput>
-	type?: string
-}
-// export interface InputBagelField<T> extends BaseBagelField<T, Path<T>> {
+// export type InputBagelField<T> = Field<T> & {
 // 	$el: 'text' | ComponentExposed<typeof TextInput>
 // 	type?: string
 // }
-
-export type SelectBagelField<T> = Field<T> & {
-	$el: 'select' | ComponentExposed<typeof SelectInput>
+export interface InputBagelField<T, P extends Path<T>> extends BaseBagelField<T, P> {
+	$el: 'text' | ComponentExposed<typeof TextInput>
+	type?: string
 }
-// export interface SelectBagelField<T> extends BaseBagelField<T, Path<T>> {
+
+// export type SelectBagelField<T> = Field<T> & {
 // 	$el: 'select' | ComponentExposed<typeof SelectInput>
-// 	type?: string
 // }
+export interface SelectBagelField<T, P extends Path<T>> extends BaseBagelField<T, P> {
+	$el: 'select' | ComponentExposed<typeof SelectInput>
+	type?: string
+}
 
 export interface ValidateInputBaseT {
 	validate?: ValidationFn<{ [key: string]: unknown }, string>

package/src/utils/BagelFormUtils.ts

@@ -75,7 +75,7 @@ export function txtField<T, P extends Path<T>>(
 	id: P,
 	label?: string,
 	options?: TextInputOptions<T, P>,
-): BaseBagelField<T, P> | InputBagelField<T> {
+): BaseBagelField<T, P> | InputBagelField<T, P> {
 	return {
 		$el: 'text',
 		id,
@@ -107,7 +107,7 @@ export function selectField<T, P extends Path<T>>(
 	label?: string,
 	options?: Option[] | (() => Option[]),
 	config?: SlctInputOptions<T, P>,
-): BaseBagelField<T, P> | SelectBagelField<T> {
+): BaseBagelField<T, P> | SelectBagelField<T, P> {
 	return {
 		$el: 'select',
 		id,
@@ -230,17 +230,29 @@ export function numField<T, P extends Path<T>>(
 	}
 }
 
-export function frmRow<T>(...children: SchemaChild<T, Path<T>>[]): Field<T> {
+export function frmRow<
+	T,
+	P extends Path<T>
+>(
+	...children: SchemaChild<T, P>[]
+) {
 	return {
 		$el: 'div',
 		class: 'flex gap-1 m_block align-items-end',
 		children,
-	}
+	} satisfies BaseBagelField<T, P>
 }
 
-export type UploadOptions<T, K extends Path<T>> = InputOptions<T, K> & UploadInputProps
+export interface UploadOptions<T, K extends Path<T>> extends UploadInputProps, InputOptions<T, K> {}
 
-export function uploadField<T, P extends Path<T>>(id: P, label?: string, options?: UploadOptions<T, P>): BaseBagelField<T, P> {
+export function uploadField<
+	T,
+	P extends Path<T>
+>(
+	id: P,
+	label?: string,
+	options?: UploadOptions<T, P>
+): BaseBagelField<T, P> {
 	return {
 		$el: 'upload',
 		id,

package/src/utils/index.ts

@@ -232,3 +232,24 @@ export function getNestedValue(obj: any, path?: string, defaultValue: any = unde
 
 	return current ?? defaultValue
 }
+
+const upgradeHeaders = (url: string) => url.replace(/http:\/\//, '//')
+
+export function downloadFile(source: string | Blob, fileName?: string) {
+	const link = document.createElement('a')
+	link.target = '_blank'
+
+	if (typeof source === 'string') {
+		link.href = upgradeHeaders(source)
+		link.download = fileName || source.split('/').pop() || 'download'
+	} else {
+		const url = URL.createObjectURL(source)
+		link.href = url
+		link.download = fileName || 'download'
+		URL.revokeObjectURL(url)
+	}
+
+	document.body.appendChild(link)
+	link.click()
+	document.body.removeChild(link)
+}