@bagelink/vue 0.0.378 → 0.0.384

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>

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

@@ -2,6 +2,7 @@
 	<div class="RichText">
 		<div class="RichText-tools" v-if="editor">
 			<Btn
+				tabindex="-1"
 				:flat="!editor.isActive(item.name, item.option)"
 				@click="item.command"
 				thin
@@ -16,12 +17,21 @@
 </template>
 
 <script setup lang="ts">
-import { Btn } from '@bagelink/vue';
+import {
+	Btn,
+	useModal,
+	FileUpload as $el,
+	bagelFormUtils,
+	BglVideo,
+} from '@bagelink/vue';
 import { onMounted, onBeforeUnmount, watch } from 'vue';
 import StarterKit from '@tiptap/starter-kit';
 import { Editor, EditorContent } from '@tiptap/vue-3';
+import Image from '@tiptap/extension-image';
+import YouTube from '@tiptap/extension-youtube';
 import type { MaterialIcons } from '@bagelink/vue';
-
+// import $el from './FileUploadURL.vue';
+const { txtField } = bagelFormUtils;
 let editor = $ref<Editor>();
 
 const props = defineProps<{ modelValue: string }>();
@@ -30,6 +40,19 @@ const focus = () => {
 	if (!editor) throw new Error('editor is not defined');
 	return editor.chain().focus();
 };
+const { showModalForm } = useModal();
+
+function addImage() {
+	showModalForm({
+		title: 'Add Image',
+		schema: [
+			txtField('title', 'Title'),
+			{ $el, id: 'src', attrs: { bindkey: 'url' } },
+			txtField('alt', 'Alt Text'),
+		],
+		onSubmit: (imgObj) => focus().setImage(imgObj).run(),
+	});
+}
 
 const config: {
 	name: string;
@@ -61,11 +84,28 @@ const config: {
 		command: () => focus().toggleCode().run(),
 		icon: 'code',
 	},
-	// {
-	// 	name: 'clearMarks',
-	// 	command: () => focus().unsetAllMarks(),
-	// 	icon: 'clear',
-	// },
+	{
+		name: 'Image',
+		command: addImage,
+		icon: 'image',
+	},
+	{
+		name: 'YouTube',
+		command: () => {
+			showModalForm({
+				title: 'Add YouTube Video',
+				schema: [
+					txtField('src', 'YouTube URL'),
+					{
+						$el: BglVideo,
+						attrs: { src: (_, { src }: { src: string }) => src || '' },
+					},
+				],
+				onSubmit: (videoObj) => editor?.commands.setYoutubeVideo(videoObj),
+			});
+		},
+		icon: 'youtube_activity',
+	},
 	{
 		name: 'Clear',
 		command: () => focus().clearNodes().run(),
@@ -160,7 +200,7 @@ const emit = defineEmits(['update:modelValue']);
 
 function initEditor() {
 	editor = new Editor({
-		extensions: [StarterKit],
+		extensions: [StarterKit, Image, YouTube],
 		content: props.modelValue,
 		onUpdate: ({ editor }) => emit('update:modelValue', editor.getHTML()),
 	});

package/src/plugins/modal.ts

@@ -9,6 +9,7 @@ export interface ModalOptions {
 	title?: string;
 	dismissable?: boolean;
 	side?: boolean;
+	width?: string;
 	actions?: BtnOptions[];
 	class?: string;
 	visible?: boolean;
@@ -18,6 +19,7 @@ export interface ModalFormOptions {
 	side?: boolean;
 	title?: string;
 	visible?: boolean;
+	width?: string;
 	dismissable?: boolean;
 	schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
 	onSubmit?: (formData: any) => any;