@bagelink/vue 0.0.374 → 0.0.384

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

@@ -9,21 +9,13 @@
 			@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=""
-					>
+			: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
@@ -31,8 +23,7 @@
 						v-if="multiple"
 						class="preview"
 						:src="file.url"
-						alt=""
-					>
+						alt="" />
 					<p class="no-margin">
 						{{ file.name }}
 					</p>
@@ -41,23 +32,12 @@
 						@click.stop="removeFile(file)"
 						flat
 						icon="delete"
-						color="red"
-					/>
+						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=""
-					>
+			<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
@@ -65,8 +45,7 @@
 						v-if="multiple"
 						class="preview"
 						:src="fileToUrl(fileQ.file)"
-						alt=""
-					>
+						alt="" />
 					<p class="no-margin">
 						{{ fileQ.name }}
 					</p>
@@ -74,18 +53,11 @@
 						class="pie"
 						:style="`--p:${fileQ.progress}`"
 						style="--b: 2px"
-						:class="{ complete: fileQ.progress === 100 }"
-					>
-						<span
-							class="progress"
-							v-if="fileQ.progress < 100"
-						>
+						:class="{ complete: fileQ.progress === 100 }">
+						<span class="progress" v-if="fileQ.progress < 100">
 							{{ `${fileQ.progress.toFixed(0)}` }}
 						</span>
-						<MaterialIcon
-							class="success"
-							icon="check"
-						/>
+						<MaterialIcon class="success" icon="check" />
 					</div>
 				</div>
 			</template>
@@ -95,9 +67,7 @@
 
 <script setup lang="ts">
 import { watch } from 'vue';
-import {
-	Btn, type StorageFile, useBagel, MaterialIcon,
-} from '@bagelink/vue';
+import { Btn, type StorageFile, useBagel, MaterialIcon } from '@bagelink/vue';
 
 const bagel = useBagel();
 
@@ -109,28 +79,48 @@ type QueueFile = {
 	uploaded?: boolean;
 };
 
+type StrKey = keyof StorageFile;
+
+type FSValue = string[] | string | number;
+
 const props = defineProps<{
-	label: string,
-	multiple?: boolean,
-	files?: StorageFile | StorageFile[],
+	label: string;
+	multiple?: boolean;
+	files?: StorageFile | StorageFile[];
 	deleteEndpoint?: string;
+	bindkey?: StrKey;
 }>();
 
-const file_ids = defineModel<string[] | string>('modelValue');
-const storageFiles = $ref<StorageFile[]>([]);
-
-const compareIds = (v1?: string[] | string, v2?: string[] | string) => [v1].flat().join(',') === [v2].flat().join(',');
+const bindKey: StrKey = props.bindkey || 'id';
 
-watch(() => props.files, (newFiles) => {
-	if (newFiles) storageFiles.push(...[newFiles].flat());
-}, { immediate: true });
+const file_bindkeys = defineModel<FSValue>('modelValue');
+const storageFiles = $ref<StorageFile[]>([]);
 
-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;
-}, { deep: true });
+const compareIds = (v1?: FSValue, v2?: FSValue) =>
+	[v1].flat().join(',') === [v2].flat().join(',');
+
+watch(
+	() => props.files,
+	(newFiles) => {
+		if (newFiles) storageFiles.push(...[newFiles].flat());
+	},
+	{ immediate: true }
+);
+
+watch(
+	() => storageFiles,
+	(newFiles) => {
+		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 }
+);
 
 const fileQueue = $ref<QueueFile[]>([]);
 let isDragOver = $ref(false);
@@ -145,20 +135,20 @@ const removeFile = (file: StorageFile) => {
 	const index = storageFiles.indexOf(file);
 	storageFiles.splice(index, 1);
 
-	if (props.deleteEndpoint) void bagel.delete(`${props.deleteEndpoint}/${file.id}`);
+	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);
-		},
-	);
+	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 = () => {
@@ -168,7 +158,9 @@ const browse = () => {
 	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 }));
+			Array.from(target.files).forEach((file: File) =>
+				fileQueue.push({ name: file.name, file, progress: 0 })
+			);
 		}
 		flushQueue();
 	};
@@ -190,13 +182,9 @@ const dragover = (e: DragEvent) => {
 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 })
-				),
-			);
+		Array.from(e.dataTransfer.files).forEach((file: File) =>
+			fileQueue.push({ name: file.name, file, progress: 0 })
+		);
 	}
 	isDragOver = false;
 	flushQueue();
@@ -222,7 +210,7 @@ const drop = (e: DragEvent) => {
 	display: grid;
 	grid-template-columns: 1fr 22px;
 	align-items: center;
-
+	padding-inline: 14px;
 }
 
 .previewName p {
@@ -258,7 +246,7 @@ img.preview {
 }
 
 .bagel-input .fileUploadWrap.fileDropZone:after {
-	content: "Drop files here or click to upload";
+	content: 'Drop files here or click to upload';
 }
 
 .pie {
@@ -271,18 +259,22 @@ img.preview {
 }
 
 .pie:before {
-	content: "";
+	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)));
+	-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 {