@bagelink/vue 0.0.1025 → 0.0.1031

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

@@ -4,7 +4,7 @@ import { Btn } from '@bagelink/vue'
 import SignaturePad from 'signature_pad'
 import { onMounted, onUnmounted, watch } from 'vue'
 
-interface WaterMark {
+export interface WaterMark {
 	text: string
 	x: number
 	y: number
@@ -16,7 +16,7 @@ interface WaterMark {
 	style: string
 }
 
-type FormatType = 'image/png' | 'image/jpg' | 'image/jpeg' | 'image/svg+xml'
+export type FormatType = 'image/png' | 'image/jpg' | 'image/jpeg' | 'image/svg+xml'
 
 const props = withDefaults(defineProps<{
 	sigOption?: SignaturePadOptions

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

@@ -0,0 +1,357 @@
+<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'
+import { files } from './upload'
+
+const props = withDefaults(defineProps<{
+	label?: string
+	multiple?: boolean
+	modelValue?: string | string[]
+	width?: string
+	height?: string | 'auto'
+	dirPath?: string
+	fill?: boolean
+	oval?: boolean
+	theme?: 'dropzone' | 'basic'
+	accept?: string
+	required?: boolean
+	disabled?: boolean
+	baseURL?: string
+}>(), {
+	height: '215px',
+	theme: 'dropzone',
+	accept: '*'
+})
+
+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 fileQueue = $ref<QueueFile[]>([])
+let storageFiles = $ref<BglFile[]>([])
+const pk = $ref<string[]>([props.modelValue].flat().filter(Boolean) as string[])
+
+const pathKeys = $computed<string[]>(() => {
+	const sf = storageFiles.map(file => file.path_key)
+	return [...pk, ...sf]
+})
+
+watch(() => pk, (value) => {
+	if (props.multiple) emit('update:modelValue', value)
+	else emit('update:modelValue', value[0] || undefined)
+}, { 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)
+
+// File handling methods
+async function removeFile(path_key: string) {
+	storageFiles = storageFiles.filter(file => file.path_key !== path_key)
+	const pki = pk.indexOf(path_key)
+	if (pki !== -1) pk.splice(pki, 1)
+
+	try {
+		await files.delete(path_key)
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+async function flushQueue() {
+	emit('addFileStart')
+	for (const file of fileQueue) {
+		file.uploading = true
+		if (!props.multiple) pk.splice(0, 1)
+		try {
+			const { data } = await files.upload(file.file, {
+				onUploadProgress: (e: ProgressEvent) => {
+					file.progress = (e.loaded / e.total) * 100 - 1
+				},
+				dirPath: props.dirPath,
+			})
+			pk.push(data.path_key)
+		} catch (error) {
+			console.error(error)
+		}
+	}
+	fileQueue.splice(0, fileQueue.length)
+}
+
+// Event handlers
+function browse() {
+	if (props.disabled) return
+	const input = document.createElement('input')
+	input.type = 'file'
+	input.multiple = props.multiple
+	input.accept = props.accept
+	input.onchange = (e: Event) => {
+		const files = Array.from((e.target as HTMLInputElement).files || [])
+		fileQueue.push(...files.map(file => ({ name: file.name, file, progress: 0 })))
+		flushQueue()
+	}
+	input.click()
+}
+
+function handleDrag(e: DragEvent, isDragging = false) {
+	e.preventDefault()
+	e.stopPropagation()
+	if (!props.disabled) isDragOver = isDragging
+}
+
+function handleDrop(e: DragEvent) {
+	if (props.disabled) return
+	e.preventDefault()
+	e.stopPropagation()
+
+	if (e.dataTransfer?.files) {
+		fileQueue.push(...Array.from(e.dataTransfer.files)
+			.map(file => ({ name: file.name, file, progress: 0 })))
+		flushQueue()
+	}
+	isDragOver = false
+}
+
+if (props.dirPath) {
+	files.get(props.dirPath)
+		.then(response => storageFiles.push(...[response.data].flat()))
+		.catch(console.error)
+}
+
+watch(() => props.dirPath, () => {
+	if (props.dirPath) {
+		files.get(props.dirPath)
+			.then(response => storageFiles.push(...[response.data].flat()))
+			.catch(console.error)
+	}
+})
+</script>
+
+<template>
+	<div class="bagel-input">
+		<label v-if="label">{{ label }}</label>
+		<input
+			v-if="required && !pathKeys.length"
+			placeholder="required"
+			type="text"
+			required
+			class="pixel"
+		>
+
+		<Card
+			v-if="theme === 'basic'"
+			outline
+			class="flex p-05 gap-1"
+			@dragover="(e) => handleDrag(e, true)"
+			@drop="handleDrop"
+		>
+			<Btn
+				v-if="!pathKeys.length && !fileQueue.length"
+				class="px-1-5"
+				icon="upload"
+				outline
+				@click="browse"
+			>
+				Upload
+			</Btn>
+
+			<template v-for="path_key in pathKeys" :key="path_key">
+				<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"
+							color="gray"
+							thin
+							:icon="action.icon"
+							v-bind="action.href ? { href: action.href, download: action.download, target: '_blank' } : {}"
+							@click.stop="action.onClick"
+						/>
+						<p
+							v-lightbox="{ src: pathToUrl(path_key), download: true }"
+							class="ellipsis-1 word-break-all h-20 m-0"
+						>
+							{{ path_key.split('/').pop() }}
+						</p>
+					</div>
+				</div>
+			</template>
+
+			<span
+				v-if="!pathKeys.length && !fileQueue.length"
+				class="txt-gray txt-12"
+			>
+				No file selected
+			</span>
+		</Card>
+
+		<div
+			v-else
+			class="fileUploadWrap"
+			:class="{
+				'fileDropZone': !pathKeys.length && !fileQueue.length,
+				'dragover': isDragOver,
+				'bgl_oval-upload': oval,
+			}"
+			:style="{ width, height }"
+			@click="browse"
+			@dragover="(e) => handleDrag(e, true)"
+			@drop="handleDrop"
+			@dragleave="(e) => handleDrag(e)"
+		>
+			<slot name="files" :files="pathKeys" :fileQueue>
+				<div v-if="multiple" class="bgl-multi-preview">
+					<div
+						v-for="path_key in pathKeys"
+						:key="path_key"
+						v-lightbox="{ src: pathToUrl(path_key), download: true }"
+						class="multi-image-item-preview"
+						:class="{ 'bgl_fill-image': fill }"
+					>
+						<Image
+							v-if="isImage(path_key)"
+							class="multi-preview"
+							:src="pathToUrl(path_key)"
+							alt=""
+						/>
+						<Icon v-else icon="description" class="multi-preview" />
+						<p class="m-0">
+							{{ path_key.split('/').pop() }}
+						</p>
+						<Btn
+							thin
+							flat
+							icon="delete"
+							color="red"
+							@click.stop="removeFile(path_key)"
+						/>
+					</div>
+					<div
+						v-for="file in fileQueue"
+						:key="file.name"
+						class="multi-image-item-preview"
+						:class="{ 'bgl_fill-image': fill }"
+					>
+						<Image
+							v-if="isImage(file.file.type)"
+							class="multi-preview"
+							:src="fileToUrl(file.file)"
+							alt=""
+						/>
+						<Icon v-else icon="description" class="multi-preview" />
+						<p class="no-margin multi-preview-txt">
+							{{ file.name }}
+						</p>
+						<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>
+					</div>
+				</div>
+
+				<div
+					v-else-if="pathKeys.length > 0 || fileQueue.length > 0"
+					class="bgl-single-preview"
+				>
+					<div
+						v-for="path_key in pathKeys"
+						:key="path_key"
+						class="single-image-item-preview"
+						:class="{ 'bgl_fill-image': fill }"
+					>
+						<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"
+								color="gray"
+								thin
+								:icon="action.icon"
+								v-bind="action.href ? { href: action.href, download: action.download, target: '_blank' } : {}"
+								@click.stop="action.onClick"
+							/>
+						</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)"
+								alt=""
+							/>
+						</div>
+						<Icon
+							v-else
+							v-lightbox="{ src: pathToUrl(path_key), download: true }"
+							:size="4"
+							weight="2"
+							icon="description"
+							class="color-primary w-100"
+						/>
+					</div>
+					<div
+						v-for="file in fileQueue"
+						:key="file.name"
+						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
+							v-if="isImage(file.file.type)"
+							class="single-preview"
+							:src="fileToUrl(file.file)"
+							alt=""
+						/>
+					</div>
+				</div>
+			</slot>
+
+			<slot
+				v-if="(!pathKeys.length && !fileQueue.length) || multiple"
+				name="placeholder"
+				:files="pathKeys"
+				:fileQueue
+				:browse
+			>
+				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05">
+					<Icon icon="upload_2" />
+					Drop files here or click to upload
+				</p>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<style src="./upload.css" scoped></style>

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

@@ -0,0 +1,232 @@
+.fileUploadWrap {
+	outline: 1px solid var(--border-color);
+	border-radius: var(--input-border-radius);
+	text-align: center;
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	position: relative;
+	font-size: var(--input-font-size);
+	overflow-y: auto;
+	background: var(--input-bg);
+	height: 215px;
+}
+
+.bagel-input .fileUploadWrap.fileDropZone {
+	background: var(--input-bg);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-gray);
+	flex-direction: column;
+}
+
+.fileUploadWrap.dragover,
+.fileUploadWrap:hover {
+	box-shadow: inset 0 0 10px #00000012;
+}
+
+.fileUploadWrap[style*='height: auto;'] {
+	min-height: 215px;
+}
+
+.multi-image-item-preview {
+	border: 1px solid var(--border-color) !important;
+	border-radius: var(--input-border-radius);
+	margin: 0.5rem !important;
+	background: var(--bgl-popup-bg);
+	padding: 0;
+	padding-inline-end: 0.75rem;
+	text-align: start;
+	color: var(--input-color);
+	display: grid;
+	grid-template-columns: auto 1fr 22px;
+	gap: 1rem;
+	align-items: center;
+}
+
+.multi-image-item-preview p {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.multi-preview {
+	width: 40px;
+	height: 40px;
+	border-radius: var(--input-border-radius);
+	object-fit: cover;
+	background: var(--bgl-gray-light);
+	text-align: center !important;
+	justify-content: center;
+	align-items: center;
+	display: flex;
+}
+
+.bgl-single-preview {
+	height: 100%;
+	position: relative;
+}
+
+.bgl-single-preview + .fileUploadPlaceHolder {
+	position: absolute;
+	inset: 0;
+	margin: auto;
+	top: calc(50% - 2rem);
+}
+
+.single-image-item-preview {
+	height: 100%;
+	min-height: 100%;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.fileUploadWrap[style*='height: auto'] .single-image-item-preview {
+	min-height: 215px;
+}
+
+.fileUploadWrap[style*='height: auto'] .single-preview {
+	margin: 0rem !important;
+}
+
+.single-preview {
+	border-radius: var(--input-border-radius);
+	margin: 1rem;
+	padding: 0px;
+	min-height: calc(100% - 2rem);
+	height: calc(100% - 2rem);
+	object-fit: cover;
+	background: var(--bgl-gray-light);
+	width: 90%;
+}
+
+.single-image-item-preview:hover::after {
+	content: 'zoom_in';
+	font-size: 32px;
+	font-family: 'Material Symbols Outlined', serif;
+	position: absolute;
+	border-radius: 100%;
+	color: var(--bgl-white);
+	z-index: 9;
+	pointer-events: none;
+}
+
+.single-image-item-preview:hover img {
+	filter: brightness(70%);
+}
+
+.bgl_fill-image.single-image-item-preview {
+	height: 100%;
+}
+
+.bgl_fill-image.single-image-item-preview .single-preview {
+	border-radius: unset;
+	object-fit: cover;
+	box-shadow: unset;
+	width: 100%;
+	height: auto;
+}
+
+.single-image-item-preview .pie {
+	transform-origin: top;
+	transform: scale(1.4);
+	position: absolute;
+	text-align: center;
+	inset: 0;
+	margin: auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: transparent;
+	border: none !important;
+	padding: 0 !important;
+}
+
+.bgl_oval-upload {
+	border-radius: 100% !important;
+	overflow: hidden;
+}
+
+.bgl_oval-upload p {
+	padding: 0.75rem !important;
+	font-size: 12px;
+}
+
+.bgl_oval-upload .fileUploadPlaceHolder {
+	top: 0;
+}
+
+.bgl_oval-upload .pie {
+	transform: scale(1);
+}
+
+.bgl_oval-upload span.bgl_icon-font.color-primary {
+	transform: scale(0.4) !important;
+}
+
+.bgl_oval-upload .single-image-item-preview {
+	height: 100%;
+}
+
+.bgl_oval-upload .single-preview {
+	margin: 0;
+	height: 100% !important;
+}
+
+.pie {
+	width: 30px;
+	height: 30px;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.pie:before {
+	content: '';
+	position: absolute;
+	border-radius: 50%;
+	inset: 0;
+	transition: all 0.2s ease-in-out;
+	background: conic-gradient(var(--bgl-primary) calc(var(--p) * 1%), #0000 0);
+	-webkit-mask: radial-gradient(
+		farthest-side,
+		#0000 calc(99% - var(--b)),
+		#000 calc(100% - var(--b))
+	);
+	mask: radial-gradient(
+		farthest-side,
+		#0000 calc(99% - var(--b)),
+		#000 calc(100% - var(--b))
+	);
+}
+
+.pie .success {
+	transform: scale(0);
+	opacity: 0;
+	transition: all 0.3s ease-in-out;
+}
+
+.pie .progress {
+	position: absolute;
+	font-size: 10px;
+}
+
+.pie.complete .progress {
+	display: none;
+}
+
+.pie.complete .success {
+	transform: scale(1.3);
+	opacity: 1;
+}
+
+.pie.complete:before {
+	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
+}
+
+.pie.complete {
+	color: var(--bgl-green);
+}

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

@@ -0,0 +1,22 @@
+import type { AxiosResponse } from 'axios'
+import type { BglFile, BglFilePatch, UploadOptions } from './upload.types.d.ts'
+import axios from 'axios'
+
+export const files = {
+	setBaseUrl: (baseUrl?: string) => {
+		if (!baseUrl) return
+		baseUrl = baseUrl.replace(/\/$/, '')
+		axios.defaults.baseURL = baseUrl
+	},
+	get: async (pathKey?: string): Promise<AxiosResponse<BglFile>> => { return axios.get('/files/', { params: { path_key: pathKey } }) },
+	put: async (bglFilePatch: BglFilePatch, pathKey?: string): Promise<AxiosResponse<BglFile>> => { return axios.put('/files/', bglFilePatch, { params: { path_key: pathKey } }) },
+	delete: async (pathKey?: string) => { return axios.delete('/files/', { params: { path_key: pathKey } }) },
+	upload: async (file: File, options?: UploadOptions & { dirPath?: string, tags?: string[] }): Promise<AxiosResponse<BglFile>> => {
+		const formData = new FormData()
+		formData.append('upload', file)
+		return axios.post('/files/upload', formData, {
+			headers: { 'Content-Type': 'multipart/form-data' },
+			onUploadProgress: options?.onUploadProgress,
+			params: { dir_path: options?.dirPath, tags: options?.tags },
+		}) }
+}

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

@@ -0,0 +1,43 @@
+export interface BglFile {
+	created_at?: string
+	updated_at?: string
+	path_key: string
+	base_url: string
+	name: string
+	mimetype?: string
+	size?: number
+	extension?: string
+	tags: string[]
+	url: string
+}
+
+export interface BglFilePatch {
+	name?: string
+	tags: string[]
+	mimetype?: string
+	extension?: string
+	size?: number
+	base_url?: string
+}
+
+export interface UploadFilesBglStaticFilesUpload {
+	upload: string
+}
+
+export interface UploadFilesS3FilesUpload {
+	upload: string
+}
+
+export interface UploadOptions {
+	onUploadProgress?: (progress: any) => void
+	dirPath?: string
+	tags?: string[]
+}
+
+interface QueueFile {
+	file: File
+	progress: number
+	uploading?: boolean
+	name?: string
+	uploaded?: boolean
+}

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

@@ -19,3 +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'

package/src/components/index.ts

@@ -32,5 +32,7 @@ export { default as Pill } from './Pill.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
 export { default as TableSchema } from './TableSchema.vue'
 export { default as Title } from './Title.vue'
+export { default as ToolBar } from './ToolBar.vue'
 export { default as TopBar } from './TopBar.vue'
+
 export { default as Zoomer } from './Zoomer.vue'

package/src/plugins/bagel.ts

@@ -29,14 +29,14 @@ export interface BagelOptions {
 	defaultLang?: string
 	language?: string
 	host?: string
-
+	fileBaseUrl?: string
 	onError?: (err: Error) => void
 
 	i18nT?: (key: string) => string
 }
 export const BagelVue: Plugin = {
 	install: (app, options: BagelOptions) => {
-		const bagel = new Bagel({ host: options.host, onError: options.onError })
+		const bagel = new Bagel({ host: options.host, fileBaseUrl: options.fileBaseUrl, onError: options.onError })
 		app.directive('click-outside', clickOutside)
 		app.directive('ripple', ripple)
 		app.directive('pattern', pattern)