@bagelink/vue 0.0.374 → 0.0.384

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()),
 	});
@@ -242,10 +282,10 @@ onBeforeUnmount(() => editor?.destroy());
 }
 
 .tiptap {
-	min-height: 500px;
+	min-height: 200px;
 	background: var(--input-bg);
 	overflow: auto;
-	max-height: 600px;
+	max-height: 500px;
 	padding: 0.7rem;
 	color: var(--input-color);
 	border-radius: var(--input-border-radius);

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;

package/src/styles/modal.css

@@ -1,119 +1,119 @@
 .bg-dark {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 999;
-  pointer-events: none;
-  opacity: 0;
-  transition: all ease-in-out 0.3s;
-  max-height: 100vh;
-  overflow: auto;
-  margin: 0 auto;
-  width: 100%;
-  text-align: center;
-  display: grid;
-  align-items: center;
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.7);
+	z-index: 999;
+	pointer-events: none;
+	opacity: 0;
+	transition: all ease-in-out 0.3s;
+	max-height: 100vh;
+	overflow: auto;
+	margin: 0 auto;
+	width: 100%;
+	text-align: center;
+	display: grid;
+	align-items: center;
 }
 
 .bg-lignt {
-  background-color: var(--bgl-white);
+	background-color: var(--bgl-white);
 }
 
 .modal {
-  width: 96%;
-  max-width: 680px;
-  transform: scale(0.5);
-  opacity: 0;
-  transition: all ease-in-out 0.15s;
-  margin-left: auto;
-  margin-right: auto;
-  height: fit-content;
+	width: 96%;
+	max-width: 720px;
+	transform: scale(0.5);
+	opacity: 0;
+	transition: all ease-in-out 0.15s;
+	margin-left: auto;
+	margin-right: auto;
+	height: fit-content;
 }
 
 .small-modal .modal {
-  max-width: 300px;
-  text-align: center;
+	max-width: 300px;
+	text-align: center;
 }
 
 .tool-bar {
-  margin: -2rem -1rem 1rem;
-  display: flex;
-  justify-content: space-between;
-  position: -webkit-sticky;
-  position: sticky;
-  padding-top: 1rem;
-  top: 0rem;
-  z-index: 3;
-  background: var(--bgl-white);
+	margin: -2rem -1rem 1rem;
+	display: flex;
+	justify-content: space-between;
+	position: -webkit-sticky;
+	position: sticky;
+	padding-top: 1rem;
+	top: 0rem;
+	z-index: 3;
+	background: var(--bgl-white);
 }
 
 .modal-size {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .is-side .modal {
-  inset-inline-end: -600px;
-  transform: scale(1);
-  opacity: 1;
-  /* position: fixed; */
-  /* top: 20px; */
-  /* bottom: 20px; */
-  max-width: 600px;
-  width: 90%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  margin-inline-start: auto;
-  margin-inline-end: 20px;
-  min-height: calc(100vh - 40px);
-  transform: translateX(100%);
+	inset-inline-end: -600px;
+	transform: scale(1);
+	opacity: 1;
+	/* position: fixed; */
+	/* top: 20px; */
+	/* bottom: 20px; */
+	max-width: 600px;
+	width: 90%;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	margin-inline-start: auto;
+	margin-inline-end: 20px;
+	min-height: calc(100vh - 40px);
+	transform: translateX(100%);
 }
 
 .is-active .modal {
-  transform: scale(1);
-  opacity: 1;
-  box-shadow: 6px 6px 20px 20px #0000001c;
+	transform: scale(1);
+	opacity: 1;
+	box-shadow: 6px 6px 20px 20px #0000001c;
 }
 
 .bg-lignt .modal {
-  transform: scale(1);
-  border: 1px solid var(--border-color);
+	transform: scale(1);
+	border: 1px solid var(--border-color);
 }
 
 .bg-lignt.is-active .modal {
-  box-shadow: none;
+	box-shadow: none;
 }
 
 .is-active.is-side .modal {
-  inset-inline-end: 20px;
-  transform: translateX(0%);
+	inset-inline-end: 20px;
+	transform: translateX(0%);
 }
 
 .bg-dark.is-active {
-  opacity: 1;
-  pointer-events: all;
+	opacity: 1;
+	pointer-events: all;
 }
 
 .is-side.bg-dark.is-active {
-  opacity: 1;
-  align-items: stretch;
+	opacity: 1;
+	align-items: stretch;
 }
 
 .is-side.is-active .modal {
-  pointer-events: all;
+	pointer-events: all;
 }
 
 @media screen and (max-width: 910px) {
-  .tool-bar {
-    margin: -1rem 0rem 1rem;
-    padding-bottom: 1rem;
-    align-items: center;
-  }
+	.tool-bar {
+		margin: -1rem 0rem 1rem;
+		padding-bottom: 1rem;
+		align-items: center;
+	}
 
-  .is-active.is-side .modal {
-    margin-inline-end: 5%;
-    margin-inline-start: 5%;
-  }
+	.is-active.is-side .modal {
+		margin-inline-end: 5%;
+		margin-inline-start: 5%;
+	}
 }