@bagelink/vue 0.0.374 → 0.0.378

package/dist/components/form/inputs/FileUpload.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AA8FA;AAGA,OAAO,EACD,KAAK,WAAW,EACrB,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4ZvB,wBAcG"}
+{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AAkEA;AAGA,OAAO,EAAO,KAAK,WAAW,EAA0B,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAya9E,wBAcG"}

package/dist/index.cjs

@@ -4793,7 +4793,7 @@ class Bagel {
   async uploadFile(file, options) {
     const formData = new FormData();
     formData.append("file", file);
-    const { data: data2 } = await axios.post("/files/upload", formData, {
+    const { data: data2 } = await axios.post("/static_files/upload", formData, {
       headers: {
         "Content-Type": "multipart/form-data"
       },
@@ -18435,20 +18435,28 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     const file_ids = vue.useModel(__props, "modelValue");
     const storageFiles = vue.ref([]);
     const compareIds = (v1, v2) => [v1].flat().join(",") === [v2].flat().join(",");
-    vue.watch(() => props2.files, (newFiles) => {
-      if (newFiles)
-        storageFiles.value.push(...[newFiles].flat());
-    }, { immediate: true });
-    vue.watch(() => storageFiles.value, (newFiles) => {
-      var _a2;
-      let idValue = "";
-      if (props2.multiple)
-        idValue = newFiles.map((f2) => f2.id || "");
-      else
-        idValue = ((_a2 = newFiles[0]) == null ? void 0 : _a2.id) || "";
-      if (!compareIds(file_ids == null ? void 0 : file_ids.value, idValue))
-        file_ids.value = idValue;
-    }, { deep: true });
+    vue.watch(
+      () => props2.files,
+      (newFiles) => {
+        if (newFiles)
+          storageFiles.value.push(...[newFiles].flat());
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => storageFiles.value,
+      (newFiles) => {
+        var _a2;
+        let idValue = "";
+        if (props2.multiple)
+          idValue = newFiles.map((f2) => f2.id || "");
+        else
+          idValue = ((_a2 = newFiles[0]) == null ? void 0 : _a2.id) || "";
+        if (!compareIds(file_ids == null ? void 0 : file_ids.value, idValue))
+          file_ids.value = idValue;
+      },
+      { deep: true }
+    );
     const fileQueue = vue.ref([]);
     let isDragOver = vue.ref(false);
     const preventDefault = (e) => {
@@ -18459,21 +18467,20 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     const removeFile = (file) => {
       const index2 = storageFiles.value.indexOf(file);
       storageFiles.value.splice(index2, 1);
-      if (props2.deleteEndpoint)
+      if (props2.deleteEndpoint) {
         void bagel.delete(`${props2.deleteEndpoint}/${file.id}`);
+      }
     };
     const flushQueue = () => {
-      fileQueue.value.forEach(
-        async (file, i2) => {
-          if (!props2.multiple)
-            storageFiles.value.splice(0, 1);
-          const serverFile = await bagel.uploadFile(file.file, {
-            onUploadProgress: (e) => file.progress = e.progress * 100 - 1
-          });
-          storageFiles.value.push(serverFile);
-          fileQueue.value.splice(i2, 1);
-        }
-      );
+      fileQueue.value.forEach(async (file, i2) => {
+        if (!props2.multiple)
+          storageFiles.value.splice(0, 1);
+        const serverFile = await bagel.uploadFile(file.file, {
+          onUploadProgress: (e) => file.progress = e.progress * 100 - 1
+        });
+        storageFiles.value.push(serverFile);
+        fileQueue.value.splice(i2, 1);
+      });
     };
     const browse = () => {
       const input = document.createElement("input");
@@ -18482,7 +18489,9 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
       input.onchange = (e) => {
         const target = e == null ? void 0 : e.target;
         if (target == null ? void 0 : target.files) {
-          Array.from(target.files).forEach((file) => fileQueue.value.push({ name: file.name, file, progress: 0 }));
+          Array.from(target.files).forEach(
+            (file) => fileQueue.value.push({ name: file.name, file, progress: 0 })
+          );
         }
         flushQueue();
       };
@@ -18520,7 +18529,10 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
           onDragover: dragover,
           onDrop: drop3,
           onDragleave: dragleave,
-          class: vue.normalizeClass(["fileUploadWrap", { fileDropZone: !storageFiles.value.length && !fileQueue.value.length, dragover: vue.unref(isDragOver) }])
+          class: vue.normalizeClass(["fileUploadWrap", {
+            fileDropZone: !storageFiles.value.length && !fileQueue.value.length,
+            dragover: vue.unref(isDragOver)
+          }])
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(storageFiles.value, (file) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -18590,7 +18602,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-1be8d7b1"]]);
+const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-3bb24b0c"]]);
 const _withScopeId = (n2) => (vue.pushScopeId("data-v-b87221d6"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$e = ["title"];
 const _hoisted_2$b = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));

package/dist/index.mjs

@@ -4791,7 +4791,7 @@ class Bagel {
   async uploadFile(file, options) {
     const formData = new FormData();
     formData.append("file", file);
-    const { data: data2 } = await axios.post("/files/upload", formData, {
+    const { data: data2 } = await axios.post("/static_files/upload", formData, {
       headers: {
         "Content-Type": "multipart/form-data"
       },
@@ -18433,20 +18433,28 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const file_ids = useModel(__props, "modelValue");
     const storageFiles = ref([]);
     const compareIds = (v1, v2) => [v1].flat().join(",") === [v2].flat().join(",");
-    watch(() => props2.files, (newFiles) => {
-      if (newFiles)
-        storageFiles.value.push(...[newFiles].flat());
-    }, { immediate: true });
-    watch(() => storageFiles.value, (newFiles) => {
-      var _a2;
-      let idValue = "";
-      if (props2.multiple)
-        idValue = newFiles.map((f2) => f2.id || "");
-      else
-        idValue = ((_a2 = newFiles[0]) == null ? void 0 : _a2.id) || "";
-      if (!compareIds(file_ids == null ? void 0 : file_ids.value, idValue))
-        file_ids.value = idValue;
-    }, { deep: true });
+    watch(
+      () => props2.files,
+      (newFiles) => {
+        if (newFiles)
+          storageFiles.value.push(...[newFiles].flat());
+      },
+      { immediate: true }
+    );
+    watch(
+      () => storageFiles.value,
+      (newFiles) => {
+        var _a2;
+        let idValue = "";
+        if (props2.multiple)
+          idValue = newFiles.map((f2) => f2.id || "");
+        else
+          idValue = ((_a2 = newFiles[0]) == null ? void 0 : _a2.id) || "";
+        if (!compareIds(file_ids == null ? void 0 : file_ids.value, idValue))
+          file_ids.value = idValue;
+      },
+      { deep: true }
+    );
     const fileQueue = ref([]);
     let isDragOver = ref(false);
     const preventDefault = (e) => {
@@ -18457,21 +18465,20 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const removeFile = (file) => {
       const index2 = storageFiles.value.indexOf(file);
       storageFiles.value.splice(index2, 1);
-      if (props2.deleteEndpoint)
+      if (props2.deleteEndpoint) {
         void bagel.delete(`${props2.deleteEndpoint}/${file.id}`);
+      }
     };
     const flushQueue = () => {
-      fileQueue.value.forEach(
-        async (file, i2) => {
-          if (!props2.multiple)
-            storageFiles.value.splice(0, 1);
-          const serverFile = await bagel.uploadFile(file.file, {
-            onUploadProgress: (e) => file.progress = e.progress * 100 - 1
-          });
-          storageFiles.value.push(serverFile);
-          fileQueue.value.splice(i2, 1);
-        }
-      );
+      fileQueue.value.forEach(async (file, i2) => {
+        if (!props2.multiple)
+          storageFiles.value.splice(0, 1);
+        const serverFile = await bagel.uploadFile(file.file, {
+          onUploadProgress: (e) => file.progress = e.progress * 100 - 1
+        });
+        storageFiles.value.push(serverFile);
+        fileQueue.value.splice(i2, 1);
+      });
     };
     const browse = () => {
       const input = document.createElement("input");
@@ -18480,7 +18487,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       input.onchange = (e) => {
         const target = e == null ? void 0 : e.target;
         if (target == null ? void 0 : target.files) {
-          Array.from(target.files).forEach((file) => fileQueue.value.push({ name: file.name, file, progress: 0 }));
+          Array.from(target.files).forEach(
+            (file) => fileQueue.value.push({ name: file.name, file, progress: 0 })
+          );
         }
         flushQueue();
       };
@@ -18518,7 +18527,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           onDragover: dragover,
           onDrop: drop3,
           onDragleave: dragleave,
-          class: normalizeClass(["fileUploadWrap", { fileDropZone: !storageFiles.value.length && !fileQueue.value.length, dragover: unref(isDragOver) }])
+          class: normalizeClass(["fileUploadWrap", {
+            fileDropZone: !storageFiles.value.length && !fileQueue.value.length,
+            dragover: unref(isDragOver)
+          }])
         }, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(storageFiles.value, (file) => {
             return openBlock(), createElementBlock(Fragment$1, {
@@ -18588,7 +18600,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-1be8d7b1"]]);
+const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-3bb24b0c"]]);
 const _withScopeId = (n2) => (pushScopeId("data-v-b87221d6"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$e = ["title"];
 const _hoisted_2$b = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", { class: "slider round" }, null, -1));

package/dist/style.css

@@ -1477,7 +1477,7 @@ display: block;
   color: var(--bgl-white);
 }
 
-.bagel-input .fileUploadWrap[data-v-1be8d7b1] {
+.bagel-input .fileUploadWrap[data-v-3bb24b0c] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -1487,45 +1487,46 @@ display: block;
 	height: 132px;
 	font-size: var(--input-font-size);
 }
-.previewName[data-v-1be8d7b1] {
+.previewName[data-v-3bb24b0c] {
 	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[data-v-1be8d7b1] {
+.previewName p[data-v-3bb24b0c] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.imagePreviewWrap[data-v-1be8d7b1] {
+.imagePreviewWrap[data-v-3bb24b0c] {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 	height: 90px;
 	padding: 5px;
 }
-img.preview[data-v-1be8d7b1] {
+img.preview[data-v-3bb24b0c] {
 	height: 80px;
 	border-radius: var(--input-border-radius);
 	object-fit: contain;
 }
-.fileUploadWrap.dragover[data-v-1be8d7b1],
-.fileUploadWrap[data-v-1be8d7b1]:hover {
+.fileUploadWrap.dragover[data-v-3bb24b0c],
+.fileUploadWrap[data-v-3bb24b0c]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-1be8d7b1] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-3bb24b0c] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: var(--bgl-gray);
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-1be8d7b1]:after {
-	content: "Drop files here or click to upload";
+.bagel-input .fileUploadWrap.fileDropZone[data-v-3bb24b0c]:after {
+	content: 'Drop files here or click to upload';
 }
-.pie[data-v-1be8d7b1] {
+.pie[data-v-3bb24b0c] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1533,40 +1534,44 @@ img.preview[data-v-1be8d7b1] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-1be8d7b1]:before {
-	content: "";
+.pie[data-v-3bb24b0c]: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[data-v-1be8d7b1] {
+	-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[data-v-3bb24b0c] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-1be8d7b1] {
+.pie .progress[data-v-3bb24b0c] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-1be8d7b1] {
+.pie.complete .progress[data-v-3bb24b0c] {
 	display: none;
 }
-.pie.complete .success[data-v-1be8d7b1] {
+.pie.complete .success[data-v-3bb24b0c] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-1be8d7b1]:before {
+.pie.complete[data-v-3bb24b0c]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-1be8d7b1] {
+.pie.complete[data-v-3bb24b0c] {
 	color: var(--bgl-green);
 }
 
@@ -1688,10 +1693,10 @@ img.preview[data-v-1be8d7b1] {
 	margin: 1rem 0;
 }
 .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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.374",
+  "version": "0.0.378",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

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();
 
@@ -110,27 +80,36 @@ type QueueFile = {
 };
 
 const props = defineProps<{
-	label: string,
-	multiple?: boolean,
-	files?: StorageFile | StorageFile[],
+	label: string;
+	multiple?: boolean;
+	files?: StorageFile | StorageFile[];
 	deleteEndpoint?: string;
 }>();
 
 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(',');
-
-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.id || '');
-	else idValue = newFiles[0]?.id || '';
-	if (!compareIds(file_ids?.value, idValue)) file_ids.value = idValue;
-}, { deep: true });
+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.id || '');
+		else idValue = newFiles[0]?.id || '';
+		if (!compareIds(file_ids?.value, idValue)) file_ids.value = idValue;
+	},
+	{ deep: true }
+);
 
 const fileQueue = $ref<QueueFile[]>([]);
 let isDragOver = $ref(false);
@@ -145,20 +124,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 +147,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 +171,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 +199,7 @@ const drop = (e: DragEvent) => {
 	display: grid;
 	grid-template-columns: 1fr 22px;
 	align-items: center;
-
+	padding-inline: 14px;
 }
 
 .previewName p {
@@ -258,7 +235,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 +248,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 {

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

@@ -242,10 +242,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);