@bagelink/vue 0.0.1031 → 0.0.1035

package/src/components/Image.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Skeleton, normalizeDimension, appendScript } from '@bagelink/vue'
+import { Skeleton, normalizeDimension, appendScript, useBagel } from '@bagelink/vue'
 import { watch } from 'vue'
 
 declare global {
@@ -8,8 +8,9 @@ declare global {
 	}
 }
 
-const { height, width, alt = '', src } = defineProps<{
-	src: string
+const { height, width, alt = '', src, pathKey } = defineProps<{
+	src?: string
+	pathKey?: string
 	alt?: string
 	width?: string | number
 	height?: string | number
@@ -18,12 +19,18 @@ const { height, width, alt = '', src } = defineProps<{
 
 let imageSrc = $ref<string | null>(null)
 
-async function loadImage(src: string) {
-	if (!src) {
+const bagel = useBagel()
+const fileBaseUrl = $computed(() => (bagel.fileBaseUrl || 'https://files.bagel.design').replace(/\/$/, ''))
+const pathToUrl = () => `${fileBaseUrl}/${pathKey}`
+
+async function loadImage() {
+	const url = src || pathToUrl()
+	console.log(url)
+	if (!url) {
 		imageSrc = null
 		return
 	}
-	const ext = src.split('.').pop()?.toLowerCase().split('?').shift()
+	const ext = url.split('.').pop()?.toLowerCase().split('?').shift()
 
 	if (ext === 'heic') {
 		if (!('caches' in window)) {
@@ -31,7 +38,7 @@ async function loadImage(src: string) {
 		} else {
 			try {
 				const imgCache = await window.caches.open('img-cache')
-				const cachedResponse = await imgCache.match(src)
+				const cachedResponse = await imgCache.match(url)
 				if (cachedResponse) {
 					imageSrc = URL.createObjectURL(await cachedResponse.blob())
 					return
@@ -42,7 +49,7 @@ async function loadImage(src: string) {
 		}
 		try {
 			await appendScript('https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js')
-			const response = await fetch(src)
+			const response = await fetch(url)
 			const blob = await response.blob()
 			const convertedBlob = await window.heic2any({ blob }) as Blob
 			imageSrc = URL.createObjectURL(convertedBlob)
@@ -50,7 +57,7 @@ async function loadImage(src: string) {
 			if ('caches' in window) {
 				try {
 					const imgCache = await window.caches.open('img-cache')
-					imgCache.put(src, new Response(convertedBlob))
+					imgCache.put(url, new Response(convertedBlob))
 				} catch (cacheError) {
 					console.warn('Failed to cache the image:', cacheError)
 				}
@@ -59,10 +66,10 @@ async function loadImage(src: string) {
 			console.error('Error converting HEIC file:', error)
 		}
 	} else {
-		imageSrc = src
+		imageSrc = url
 	}
 }
-watch(() => src, loadImage, { immediate: true })
+watch(() => [src, pathKey], loadImage, { immediate: true })
 </script>
 
 <template>

package/src/components/form/BglField.vue

@@ -11,7 +11,9 @@ import {
 	ToggleInput,
 	bindAttrs,
 	classify,
-	BagelForm
+	BagelForm,
+	NumberInput,
+	UploadInput,
 } from '@bagelink/vue'
 import TabsNav from '../layout/TabsNav.vue'
 
@@ -35,11 +37,13 @@ const is = $computed(() => {
 		customAttrs.multiline = true
 		return TextInput
 	}
+	if (props.field.$el === 'number') return NumberInput
 	if (props.field.$el === 'array') return FieldArray
 	if (props.field.$el === 'select') return SelectInput
 	if (props.field.$el === 'toggle') return ToggleInput
 	if (props.field.$el === 'check') return CheckInput
 	if (props.field.$el === 'richtext') return RichText
+	if (props.field.$el === 'upload') return UploadInput
 	if (props.field.$el === 'file') return FileUpload
 	if (props.field.$el === 'date') return DateInput
 	if (props.field.$el === 'tabs') return TabsNav

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

@@ -5,7 +5,7 @@ import { watch } from 'vue'
 type NumberLayout = 'default' | 'vertical' | 'horizontal'
 
 interface NumberInputProps {
-	modelValue: number
+	modelValue?: number
 	min?: number
 	max?: number
 	step?: number
@@ -14,7 +14,7 @@ interface NumberInputProps {
 	icon?: MaterialIcons
 	label?: string
 	placeholder?: string
-	disabled: boolean
+	disabled?: boolean
 	required?: boolean
 	id?: string
 	helptext?: string
@@ -41,7 +41,7 @@ const {
 
 const emit = defineEmits(['update:modelValue'])
 
-let numberValue = $ref(0)
+let numberValue = $ref(modelValue || 0)
 
 const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
 
@@ -81,7 +81,7 @@ watch(() => numberValue, () => {
 
 watch(() => modelValue, (newVal) => {
 	if (newVal !== numberValue)	{
-		numberValue = newVal
+		numberValue = newVal || 0
 	}
 }, { immediate: true })
 </script>
@@ -97,7 +97,7 @@ watch(() => modelValue, (newVal) => {
 		<label :for="id">
 			{{ label }}
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
-				<Btn v-if="layout && btnLayouts.includes(layout)" icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="increment" />
+				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="increment" />
 
 				<input
 					:id
@@ -131,7 +131,7 @@ watch(() => modelValue, (newVal) => {
 					v-if="icon"
 					:icon
 				/>
-				<Btn v-if="layout && btnLayouts.includes(layout)" icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="decrement" />
+				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="decrement" />
 
 				<div v-if="spinner && (!layout || !btnLayouts.includes(layout))" class="flex column spinner">
 					<Btn icon="add" flat thin class="bgl-ctrl-num-btn" @click="increment" />

package/src/components/form/inputs/Upload/{UploadFile.vue → UploadInput.vue}

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { MaterialIcons } from '@bagelink/vue'
 import type { BglFile, QueueFile } from './upload.types'
 import { Btn, IMAGE_FORMATS_REGEXP, Icon, useBagel, Card, Image } from '@bagelink/vue'
 import { watch } from 'vue'
@@ -26,12 +25,12 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits(['update:modelValue', 'addFileStart'])
-
 const bagel = useBagel()
-const fileBaseUrl = $computed(() => (props.baseURL || bagel.fileBaseUrl || 'https://files.bagel.design/').replace(/\/$/, ''))
 
 files.setBaseUrl(bagel.host)
 
+const fileBaseUrl = $computed(() => (props.baseURL || bagel.fileBaseUrl || 'https://files.bagel.design').replace(/\/$/, ''))
+const pathToUrl = (path_key: string) => `${fileBaseUrl}/${path_key}`
 const fileQueue = $ref<QueueFile[]>([])
 let storageFiles = $ref<BglFile[]>([])
 const pk = $ref<string[]>([props.modelValue].flat().filter(Boolean) as string[])
@@ -47,7 +46,6 @@ watch(() => pk, (value) => {
 }, { deep: true })
 
 const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
-const pathToUrl = (path_key: string) => `${fileBaseUrl}/${path_key}`
 const fileToUrl = (file: File) => URL.createObjectURL(file)
 
 let isDragOver = $ref(false)
@@ -79,7 +77,7 @@ async function flushQueue() {
 			})
 			pk.push(data.path_key)
 		} catch (error) {
-			console.error(error)
+			console.error('error flushing queue', error)
 		}
 	}
 	fileQueue.splice(0, fileQueue.length)
@@ -166,18 +164,25 @@ watch(() => props.dirPath, () => {
 				<div class="txt-gray txt-12 flex">
 					<div class="m-05 flex opacity-7 z-99">
 						<Btn
-							v-for="action in [
-								{ tooltip: 'Delete', icon: 'delete' as MaterialIcons, onClick: () => removeFile(path_key) },
-								{ tooltip: 'Replace', icon: 'autorenew' as MaterialIcons, onClick: browse },
-								{ tooltip: 'Download', icon: 'download' as MaterialIcons, href: pathToUrl(path_key), download: path_key.split('/').pop() },
-							]"
-							:key="action.tooltip"
-							v-tooltip="action.tooltip"
+							v-tooltip="'Delete'"
 							color="gray"
 							thin
-							:icon="action.icon"
-							v-bind="action.href ? { href: action.href, download: action.download, target: '_blank' } : {}"
-							@click.stop="action.onClick"
+							icon="delete"
+							@click="removeFile(path_key)"
+						/>
+						<Btn
+							v-tooltip="'Replace'"
+							color="gray"
+							thin
+							icon="autorenew"
+							@click="browse"
+						/>
+						<Btn
+							icon="download"
+							flat
+							thin
+							:href="pathToUrl(path_key)"
+							:download="path_key.split('/').pop()"
 						/>
 						<p
 							v-lightbox="{ src: pathToUrl(path_key), download: true }"
@@ -222,9 +227,8 @@ watch(() => props.dirPath, () => {
 					>
 						<Image
 							v-if="isImage(path_key)"
+							:pathKey="path_key"
 							class="multi-preview"
-							:src="pathToUrl(path_key)"
-							alt=""
 						/>
 						<Icon v-else icon="description" class="multi-preview" />
 						<p class="m-0">
@@ -235,7 +239,7 @@ watch(() => props.dirPath, () => {
 							flat
 							icon="delete"
 							color="red"
-							@click.stop="removeFile(path_key)"
+							@click="removeFile(path_key)"
 						/>
 					</div>
 					<div
@@ -280,25 +284,32 @@ watch(() => props.dirPath, () => {
 					>
 						<div class="position-start m-05 flex opacity-7 z-99 gap-025">
 							<Btn
-								v-for="action in [
-									{ tooltip: 'Delete', icon: 'delete' as MaterialIcons, onClick: () => removeFile(path_key) },
-									{ tooltip: 'Replace', icon: 'autorenew' as MaterialIcons, onClick: browse },
-									{ tooltip: 'Download', icon: 'download' as MaterialIcons, href: pathToUrl(path_key), download: path_key.split('/').pop() },
-								]"
-								:key="action.tooltip"
-								v-tooltip="action.tooltip"
+								v-tooltip="'Delete'"
+								color="gray"
+								thin
+								icon="delete"
+								@click="removeFile(path_key)"
+							/>
+							<Btn
+								v-tooltip="'Replace'"
+								color="gray"
+								thin
+								icon="autorenew"
+								@click="browse"
+							/>
+							<Btn
+								v-tooltip="'Download'"
 								color="gray"
 								thin
-								:icon="action.icon"
-								v-bind="action.href ? { href: action.href, download: action.download, target: '_blank' } : {}"
-								@click.stop="action.onClick"
+								icon="download"
+								:href="pathToUrl(path_key)"
+								:download="path_key.split('/').pop()"
 							/>
 						</div>
 						<div v-if="isImage(path_key)" class="h-100">
 							<Image
-								v-lightbox="{ src: pathToUrl(path_key), download: true }"
 								class="single-preview"
-								:src="pathToUrl(path_key)"
+								:pathKey="path_key"
 								alt=""
 							/>
 						</div>

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

@@ -19,4 +19,4 @@ export { default as TableField } from './TableField.vue'
 export { default as TelInput } from './TelInput.vue'
 export { default as TextInput } from './TextInput.vue'
 export { default as ToggleInput } from './ToggleInput.vue'
-export { default as Upload } from './Upload/UploadFile.vue'
+export { default as UploadInput } from './Upload/UploadInput.vue'

package/src/utils/BagelFormUtils.ts

@@ -142,7 +142,7 @@ export function numField(
 	options?: NumFieldOptions,
 ): Field {
 	return {
-		$el: 'text',
+		$el: 'number',
 		class: options?.class,
 		required: options?.required,
 		defaultValue: options?.defaultValue,
@@ -152,12 +152,9 @@ export function numField(
 		placeholder: options?.placeholder,
 		helptext: options?.helptext,
 		attrs: {
-			type: 'number',
-			nativeInputAttrs: {
-				step: options?.step,
-				min: options?.min,
-				max: options?.max,
-			},
+			step: options?.step,
+			min: options?.min,
+			max: options?.max,
 		},
 	}
 }
@@ -170,6 +167,19 @@ export function frmRow(...children: Field[]) {
 	}
 }
 
+interface UploadOptions extends InputOptions {
+	multiple?: boolean
+}
+
+export function uploadField(id: string, label?: string, options?: UploadOptions) {
+	return {
+		$el: 'upload',
+		id,
+		label,
+		attrs: options,
+	}
+}
+
 export function bglForm(idOrField?: string | Field, ...schema: Field[]) {
 	if (typeof idOrField === 'string') {
 		return {