@bagelink/vue 0.0.378 → 0.0.390

package/src/components/BglVideo.vue

@@ -1,57 +1,58 @@
 <template>
-	<div class="bgl_vid">
+	<div class="bgl_vid" :class="{ vid_empty: !src }">
 		<iframe
 			v-if="embedType"
 			:src="videoUrl"
 			:style="{ aspectRatio }"
 			frameborder="0"
 			allowfullscreen
-			title="Video"
-		/>
+			title="Video" />
 		<video
-			v-else
+			v-else-if="src"
 			:src="src"
 			:autoplay="autoplay"
 			:muted="mute"
 			:loop="loop"
 			:style="{ aspectRatio }"
 			:controls="controls"
-			playsinline
-		/>
+			playsinline />
 	</div>
 </template>
 
 <script setup lang="ts">
 type Props = {
-  src: string;
-  autoplay: boolean;
-  mute: boolean;
-  aspectRatio: string;
-  controls: boolean;
-  loop: boolean;
+	src?: string;
+	autoplay?: boolean;
+	mute?: boolean;
+	aspectRatio?: string;
+	controls?: boolean;
+	loop?: boolean;
 };
 
 const props = defineProps<Props>();
 
-const aspectRatio = $computed(() => props.aspectRatio.replace(':', '/'));
+const aspectRatio = $computed(
+	() => props.aspectRatio?.replace(':', '/') || '16/9'
+);
 
 const embedType = $computed<'YouTube' | 'Vimeo' | null>(() => {
 	const youtubeRegex = /youtube\.com|youtu\.be/;
-	if (youtubeRegex.test(props.src)) return 'YouTube';
+	if (youtubeRegex.test(props.src || '')) return 'YouTube';
 	const vimeoRegex = /vimeo\.com/;
-	if (vimeoRegex.test(props.src)) return 'Vimeo';
+	if (vimeoRegex.test(props.src || '')) return 'Vimeo';
 	return null;
 });
 
 const videoUrl = $computed(() => {
 	if (embedType) {
 		if (embedType === 'YouTube') {
-			const videoId = props.src.split(/v=|youtu\.be\//)?.[1]?.split('&')?.[0];
+			const videoId = props.src?.split(/v=|youtu\.be\//)?.[1]?.split('&')?.[0];
 			return `https://www.youtube.com/embed/${videoId}`;
 		}
 		if (embedType === 'Vimeo') {
-			const vimeoRegex = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/;
-			const videoId = props.src.match(vimeoRegex)?.[3];
+			const vimeoRegex =
+				/vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/;
+			const videoId = props.src?.match(vimeoRegex)?.[3];
 			return `https://player.vimeo.com/video/${videoId}`;
 		}
 	}
@@ -64,8 +65,13 @@ console.log('Video URL:', videoUrl);
 <style scoped>
 .bgl_vid iframe,
 .bgl_vid video {
-  width: 100%;
-  height: auto;
-  display: block
+	width: 100%;
+	height: auto;
+	display: block;
+}
+
+.bgl_vid.vid_empty {
+	padding-top: 56.25%;
+	background: #f0f0f0;
 }
 </style>

package/src/components/Modal.vue

@@ -1,17 +1,27 @@
 <template>
 	<div
-		class="bg-dark" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
-	>
-		<Card class="modal" @click.stop>
+		class="bg-dark"
+		:class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
+		@click="() => (dismissable ? closeModal() : '')"
+		@keydown.esc="closeModal">
+		<Card class="modal" @click.stop :style="{ ...maxWidth }">
 			<header class="tool-bar">
 				<slot name="toolbar" />
-				<Btn :style="{ float: side ? 'left' : 'right' }" flat icon="close" @click="closeModal" />
+				<Btn
+					:style="{ float: side ? 'left' : 'right' }"
+					flat
+					icon="close"
+					@click="closeModal" />
 				<Title class="modal-title" tag="h3" v-if="title" :label="title" />
 			</header>
 			<slot />
 			<footer class="modal-footer mt-3">
-				<Btn v-for="(action, i) in actions" :key="i" @click="closeModal" color="gray" v-bind="action" />
+				<Btn
+					v-for="(action, i) in actions"
+					:key="i"
+					@click="closeModal"
+					color="gray"
+					v-bind="action" />
 				<slot name="footer" />
 			</footer>
 		</Card>
@@ -20,26 +30,36 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, watch } from 'vue';
-import {
-	type BtnOptions, Btn, useEscape, Title, Card,
-} from '@bagelink/vue';
+import { type BtnOptions, Btn, useEscape, Title, Card } from '@bagelink/vue';
 import '../styles/modal.css';
 
 const props = defineProps<{
-  side?: boolean;
-  title?: string;
-  dismissable?: boolean;
-  actions?: BtnOptions[];
-  visible?: boolean;
+	side?: boolean;
+	title?: string;
+	width?: string;
+	dismissable?: boolean;
+	actions?: BtnOptions[];
+	visible?: boolean;
 }>();
 
 let isVisible = $ref<boolean>(false);
 
-watch(() => props.visible, (val) => {
-	if (val === isVisible || val === undefined) return;
-	if (val) openModal();
-	else closeModal();
-}, { immediate: true });
+watch(
+	() => props.visible,
+	(val) => {
+		if (val === isVisible || val === undefined) return;
+		if (val) openModal();
+		else closeModal();
+	},
+	{ immediate: true }
+);
+
+const maxWidth = $computed(() => {
+	const { width } = props;
+	if (width?.match(/px|em|rem|vw|vh|%/)) return { 'max-width': width };
+	if (width?.match(/\d+/)) return { 'max-width': `${width}px` };
+	return { 'max-width': '720px' };
+});
 
 const emit = defineEmits(['update:visible']);
 
@@ -50,10 +70,11 @@ const closeModal = () => {
 
 defineExpose({ closeModal });
 
-const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
+const escapeKeyClose = (e: KeyboardEvent) =>
+	props?.dismissable && useEscape(e, () => closeModal());
 
 function openModal() {
-	setTimeout(() => isVisible = true, 1);
+	setTimeout(() => (isVisible = true), 1);
 }
 
 onMounted(() => document.addEventListener('keydown', escapeKeyClose));
@@ -65,35 +86,35 @@ onUnmounted(() => {
 
 <style>
 .modal-title {
-  text-align: center;
-  font-weight: 600;
-  font-size: 20px;
-  margin-top: 0.5rem;
-  margin-bottom: 0 !important;
-  width: 100%;
-  -webkit-padding-end: 40px;
-  padding-inline-end: 40px;
-  line-height: 2;
-  display: -webkit-box;
-  max-width: 100%;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
+	text-align: center;
+	font-weight: 600;
+	font-size: 20px;
+	margin-top: 0.5rem;
+	margin-bottom: 0 !important;
+	width: 100%;
+	-webkit-padding-end: 40px;
+	padding-inline-end: 40px;
+	line-height: 2;
+	display: -webkit-box;
+	max-width: 100%;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .modal-footer {
-  gap: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+	gap: 1rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
 
-.modal-footer>div {
-  gap: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0;
+.modal-footer > div {
+	gap: 1rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 0;
 }
 </style>

package/src/components/ModalForm.vue

@@ -1,13 +1,27 @@
 <template>
 	<Modal
-		@onUpdate:isModalVisible="props['onUpdate:isModalVisible']" :side="side" ref="modal" :dismissable="dismissable"
-		:title="title"
-	>
-		<BagelForm @submit="runSubmit" ref="form" v-model="formData" :schema="computedFormSchema" />
+		@onUpdate:isModalVisible="props['onUpdate:isModalVisible']"
+		:side
+		ref="modal"
+		:width
+		:dismissable
+		:title="title">
+		<BagelForm
+			@submit="runSubmit"
+			ref="form"
+			v-model="formData"
+			:schema="computedFormSchema" />
 		<template #footer v-if="onDelete || onSubmit">
 			<div>
 				<Btn thin flat value="Cancel" @click="closeModal" />
-				<Btn thin icon="delete" v-if="onDelete" flat value="Delete" @click="runDelete" color="red" />
+				<Btn
+					thin
+					icon="delete"
+					v-if="onDelete"
+					flat
+					value="Delete"
+					@click="runDelete"
+					color="red" />
 			</div>
 			<Btn value="Submit" @click="runSubmit" />
 		</template>
@@ -16,28 +30,33 @@
 
 <script lang="ts" setup>
 import {
-	Modal, Btn, BagelForm, type BglFormSchemaT, type BtnOptions, useBagel,
+	Modal,
+	Btn,
+	BagelForm,
+	type BglFormSchemaT,
+	type BtnOptions,
+	useBagel,
 } from '@bagelink/vue';
 
 const bagel = useBagel();
 
 const props = defineProps<{
-	side?: boolean;
-	title?: string;
-	dismissable?: boolean;
-	actions?: BtnOptions[];
-	schema: BglFormSchemaT | (() => BglFormSchemaT);
+	'side'?: boolean;
+	'title'?: string;
+	'width'?: string;
+	'dismissable'?: boolean;
+	'actions'?: BtnOptions[];
+	'schema': BglFormSchemaT | (() => BglFormSchemaT);
 	// eslint-disable-next-line no-unused-vars
-	onSubmit?: ((formData: any) => Promise<void>);
+	'onSubmit'?: (formData: any) => Promise<void>;
 	// eslint-disable-next-line no-unused-vars
-	onDelete?: ((id: string) => void);
+	'onDelete'?: (id: string) => void;
 	// eslint-disable-next-line no-unused-vars
-	'onUpdate:isModalVisible'?: ((visible: boolean) => void);
+	'onUpdate:isModalVisible'?: (visible: boolean) => void;
 	// eslint-disable-next-line no-unused-vars
-	onError?: ((err: any) => void);
-
-	modelValue?: Record<string, any>;
+	'onError'?: (err: any) => void;
 
+	'modelValue'?: Record<string, any>;
 }>();
 
 const modal = $ref<InstanceType<typeof Modal>>();
@@ -47,7 +66,9 @@ const computedFormSchema = $computed(() => {
 	return props.schema;
 });
 
-const formData = defineModel<Record<string, any>>('modelValue', { default: {} });
+const formData = defineModel<Record<string, any>>('modelValue', {
+	default: {},
+});
 const form = $ref<InstanceType<typeof BagelForm>>();
 const closeModal = () => modal?.closeModal();
 

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

@@ -79,17 +79,24 @@ type QueueFile = {
 	uploaded?: boolean;
 };
 
+type StrKey = keyof StorageFile;
+
+type FSValue = string[] | string | number;
+
 const props = defineProps<{
 	label: string;
 	multiple?: boolean;
 	files?: StorageFile | StorageFile[];
 	deleteEndpoint?: string;
+	bindkey?: StrKey;
 }>();
 
-const file_ids = defineModel<string[] | string>('modelValue');
+const bindKey: StrKey = props.bindkey || 'id';
+
+const file_bindkeys = defineModel<FSValue>('modelValue');
 const storageFiles = $ref<StorageFile[]>([]);
 
-const compareIds = (v1?: string[] | string, v2?: string[] | string) =>
+const compareIds = (v1?: FSValue, v2?: FSValue) =>
 	[v1].flat().join(',') === [v2].flat().join(',');
 
 watch(
@@ -103,10 +110,14 @@ watch(
 watch(
 	() => storageFiles,
 	(newFiles) => {
-		let idValue: string[] | string = '';
-		if (props.multiple) idValue = newFiles.map((f) => f.id || '');
-		else idValue = newFiles[0]?.id || '';
-		if (!compareIds(file_ids?.value, idValue)) file_ids.value = idValue;
+		let idValue: FSValue;
+		if (props.multiple) idValue = newFiles.map((f) => f[bindKey]) as FSValue;
+		else {
+			idValue = (newFiles[0]?.[bindKey] as string) || '';
+		}
+		if (!compareIds(file_bindkeys?.value, idValue)) {
+			file_bindkeys.value = idValue;
+		}
 	},
 	{ deep: true }
 );

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

@@ -0,0 +1,296 @@
+<template>
+	<div class="bagel-input">
+		<label>
+			{{ label }}
+		</label>
+		<div
+			@click="browse"
+			@dragover="dragover"
+			@drop="drop"
+			@dragleave="dragleave"
+			class="fileUploadWrap"
+			:class="{
+				fileDropZone: !storageFiles.length && !fileQueue.length,
+				dragover: isDragOver,
+			}">
+			<template v-for="file in storageFiles" :key="file.id">
+				<div class="imagePreviewWrap" v-if="!multiple">
+					<img class="preview" :src="file.url" alt="" />
+				</div>
+				<div class="previewName">
+					<img
+						height="60"
+						v-if="multiple"
+						class="preview"
+						:src="file.url"
+						alt="" />
+					<p class="no-margin">
+						{{ file.name }}
+					</p>
+					<Btn
+						thin
+						@click.stop="removeFile(file)"
+						flat
+						icon="delete"
+						color="red" />
+				</div>
+			</template>
+			<template v-for="fileQ in fileQueue" :key="fileQ.file">
+				<div class="imagePreviewWrap" v-if="!multiple">
+					<img class="preview" :src="fileToUrl(fileQ.file)" alt="" />
+				</div>
+				<div class="previewName">
+					<img
+						height="60"
+						v-if="multiple"
+						class="preview"
+						:src="fileToUrl(fileQ.file)"
+						alt="" />
+					<p class="no-margin">
+						{{ fileQ.name }}
+					</p>
+					<div
+						class="pie"
+						:style="`--p:${fileQ.progress}`"
+						style="--b: 2px"
+						:class="{ complete: fileQ.progress === 100 }">
+						<span class="progress" v-if="fileQ.progress < 100">
+							{{ `${fileQ.progress.toFixed(0)}` }}
+						</span>
+						<MaterialIcon class="success" icon="check" />
+					</div>
+				</div>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import { Btn, type StorageFile, useBagel, MaterialIcon } from '@bagelink/vue';
+
+const bagel = useBagel();
+
+type QueueFile = {
+	file: File;
+	progress: number;
+	uploading?: boolean;
+	name?: string;
+	uploaded?: boolean;
+};
+
+const props = defineProps<{
+	label: string;
+	multiple?: boolean;
+	files?: StorageFile | StorageFile[];
+	deleteEndpoint?: string;
+}>();
+
+const fileURLs = defineModel<string[] | string>('modelValue');
+const storageFiles = $ref<StorageFile[]>([]);
+
+const compareIds = (v1?: string[] | string, v2?: string[] | string) =>
+	[v1].flat().join(',') === [v2].flat().join(',');
+
+watch(
+	() => props.files,
+	(newFiles) => {
+		if (newFiles) storageFiles.push(...[newFiles].flat());
+	},
+	{ immediate: true }
+);
+
+watch(
+	() => storageFiles,
+	(newFiles) => {
+		let idValue: string[] | string = '';
+		if (props.multiple) idValue = newFiles.map((f) => f.url || '');
+		else idValue = newFiles[0]?.url || '';
+		if (!compareIds(fileURLs?.value, idValue)) fileURLs.value = idValue;
+	},
+	{ deep: true }
+);
+
+const fileQueue = $ref<QueueFile[]>([]);
+let isDragOver = $ref(false);
+
+const preventDefault = (e: Event) => {
+	e.preventDefault();
+	e.stopPropagation();
+};
+
+const fileToUrl = (file: File) => URL.createObjectURL(file);
+const removeFile = (file: StorageFile) => {
+	const index = storageFiles.indexOf(file);
+	storageFiles.splice(index, 1);
+
+	if (props.deleteEndpoint) {
+		void bagel.delete(`${props.deleteEndpoint}/${file.id}`);
+	}
+};
+
+const flushQueue = () => {
+	fileQueue.forEach(async (file, i) => {
+		if (!props.multiple) storageFiles.splice(0, 1);
+		const serverFile = await bagel.uploadFile<StorageFile>(file.file, {
+			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
+		});
+		storageFiles.push(serverFile);
+		fileQueue.splice(i, 1);
+	});
+};
+
+const browse = () => {
+	const input = document.createElement('input');
+	input.type = 'file';
+	input.multiple = props.multiple;
+	input.onchange = (e: Event) => {
+		const target = e?.target as HTMLInputElement;
+		if (target?.files) {
+			Array.from(target.files).forEach((file: File) =>
+				fileQueue.push({ name: file.name, file, progress: 0 })
+			);
+		}
+		flushQueue();
+	};
+	input.click();
+};
+
+const dragleave = (e: DragEvent) => {
+	preventDefault(e);
+	if (e.dataTransfer) isDragOver = false;
+	else isDragOver = false;
+};
+
+const dragover = (e: DragEvent) => {
+	preventDefault(e);
+	if (e.dataTransfer) isDragOver = true;
+	else isDragOver = false;
+};
+
+const drop = (e: DragEvent) => {
+	preventDefault(e);
+	if (e.dataTransfer) {
+		Array.from(e.dataTransfer.files).forEach((file: File) =>
+			fileQueue.push({ name: file.name, file, progress: 0 })
+		);
+	}
+	isDragOver = false;
+	flushQueue();
+};
+</script>
+
+<style scoped>
+.bagel-input .fileUploadWrap {
+	outline: 1px solid var(--border-color);
+	border-radius: var(--input-border-radius);
+	text-align: center;
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	position: relative;
+	height: 132px;
+	font-size: var(--input-font-size);
+}
+
+.previewName {
+	padding: 0.5rem;
+	text-align: start;
+	color: var(--input-color);
+	display: grid;
+	grid-template-columns: 1fr 22px;
+	align-items: center;
+	padding-inline: 14px;
+}
+
+.previewName p {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.imagePreviewWrap {
+	background: var(--input-bg);
+	border-radius: var(--input-border-radius);
+	height: 90px;
+	padding: 5px;
+}
+
+img.preview {
+	height: 80px;
+	border-radius: var(--input-border-radius);
+	object-fit: contain;
+}
+
+.fileUploadWrap.dragover,
+.fileUploadWrap:hover {
+	box-shadow: inset 0 0 10px #00000012;
+}
+
+.bagel-input .fileUploadWrap.fileDropZone {
+	background: var(--input-bg);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-gray);
+}
+
+.bagel-input .fileUploadWrap.fileDropZone:after {
+	content: 'Drop files here or click to upload';
+}
+
+.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);
+}
+</style>