@bagelink/vue 0.0.160 → 0.0.164

package/src/components/FileUploader.vue

@@ -1,56 +1,48 @@
 <template>
-	<div class="files-wrapper flex">
-		<div
-			ref="dropZoneEl"
-			class="drop-zone flex-grow"
-			@click="openFileDialog"
-			@dragenter="draggingOver = true"
-			@drop.prevent.stop="onDrop"
-		>
-			<Transition name="pop">
-				<div
-					ref="dropCircle"
-					v-if="draggingOver"
-					class="drop-circle"
-				/>
-			</Transition>
-			<div class="img-label">
-				<p>
-					{{ dragDropLabel }} <span>{{ browseLabel }}</span>
-				</p>
-			</div>
-			<div class="uploading-wrap">
-				<div
-					v-for="(item, index) in files"
-					:class="{ uploading: item.uploading }"
-					:key="index"
-				>
-					<div class="load-file-bar">
-						<p>{{ item.file.name }}</p>
-						<div
-							class="pie"
-							:style="`--p:${item.progress}`"
-							style="--b: 2px"
-						>
-							<span>{{ `${item.progress}` }}</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<input
-			class="file-input"
-			type="file"
-			@change="handleFileInput"
-			ref="fileInputEl"
-			:multiple="!singleFile"
-		>
-	</div>
+  <div class="files-wrapper flex">
+    <div
+      ref="dropZoneEl"
+      class="drop-zone flex-grow"
+      @click="openFileDialog"
+      @dragenter="draggingOver = true"
+      @drop.prevent.stop="onDrop"
+    >
+      <Transition name="pop">
+        <div ref="dropCircle" v-if="draggingOver" class="drop-circle" />
+      </Transition>
+      <div class="img-label">
+        <p>
+          {{ dragDropLabel }} <span>{{ browseLabel }}</span>
+        </p>
+      </div>
+      <div class="uploading-wrap">
+        <div
+          v-for="(item, index) in files"
+          :class="{ uploading: item.uploading }"
+          :key="index"
+        >
+          <div class="load-file-bar">
+            <p>{{ item.file.name }}</p>
+            <div class="pie" :style="`--p:${item.progress}`" style="--b: 2px">
+              <span>{{ `${item.progress}` }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <input
+      class="file-input"
+      type="file"
+      @change="handleFileInput"
+      ref="fileInputEl"
+      :multiple="!singleFile"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { useBagel } from '..';
+import { ref, onMounted, onUnmounted } from "vue";
+import { useBagel } from "..";
 
 const bagel = useBagel();
 
@@ -58,34 +50,34 @@ const draggingOver = ref(false);
 const dropCircle = ref<HTMLElement>();
 const dropZoneEl = ref<HTMLElement>();
 const fileInputEl = ref<HTMLInputElement>();
-const circleTop = ref('0');
-const circleLeft = ref('0');
+const circleTop = ref("0");
+const circleLeft = ref("0");
 const files = ref<
-	{
-		progress: string;
-		uploading: boolean;
-		uid: string;
-		file: File;
-	}[]
+  {
+    progress: string;
+    uploading: boolean;
+    uid: string;
+    file: File;
+  }[]
 >([]);
 const props = withDefaults(
-	defineProps<{
-		id?: string;
-		// folder?: string,
-		private?: 1 | 0;
-		singleFile?: boolean;
-		beforeUpload?: () => Promise<any>;
-		dragDropLabel?: string;
-		browseLabel?: string;
-	}>(),
-	{
-		private: 0,
-		entity: '',
-		id: '',
-		beforeUpload: async () => { },
-		dragDropLabel: 'Drag and drop your files here',
-		browseLabel: 'Browse',
-	},
+  defineProps<{
+    id?: string;
+    // folder?: string,
+    private?: 1 | 0;
+    singleFile?: boolean;
+    beforeUpload?: () => Promise<any>;
+    dragDropLabel?: string;
+    browseLabel?: string;
+  }>(),
+  {
+    private: 0,
+    entity: "",
+    id: "",
+    beforeUpload: async () => {},
+    dragDropLabel: "Drag and drop your files here",
+    browseLabel: "Browse",
+  }
 );
 
 /**
@@ -93,57 +85,57 @@ const props = withDefaults(
  */
 
 function openFileDialog() {
-	fileInputEl.value?.click();
+  fileInputEl.value?.click();
 }
 
 function onDragOver(e: DragEvent) {
-	if (!draggingOver.value) return;
-	// set the position of the circle to the cursor
-	const parentEl = dropZoneEl.value?.getBoundingClientRect?.() || {
-		left: 0,
-		top: 0,
-		width: 0,
-		height: 0,
-	};
-	const x = e.clientX - parentEl.left;
-	const y = e.clientY - parentEl.top;
-	circleLeft.value = `${x}px`;
-	circleTop.value = `${y}px`;
-	// if the cursor is outside the dropzone, hide the circle
-	if (x < 0 || x > parentEl.width || y < 0 || y > parentEl.height) {
-		draggingOver.value = false;
-	}
+  if (!draggingOver.value) return;
+  // set the position of the circle to the cursor
+  const parentEl = dropZoneEl.value?.getBoundingClientRect?.() || {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+  };
+  const x = e.clientX - parentEl.left;
+  const y = e.clientY - parentEl.top;
+  circleLeft.value = `${x}px`;
+  circleTop.value = `${y}px`;
+  // if the cursor is outside the dropzone, hide the circle
+  if (x < 0 || x > parentEl.width || y < 0 || y > parentEl.height) {
+    draggingOver.value = false;
+  }
 }
 
 function handleFileInput(e: Event) {
-	const filesToAdd: FileList = (e.target as any).files;
-	addFiles(filesToAdd);
+  const filesToAdd: FileList = (e.target as any).files;
+  addFiles(filesToAdd);
 }
 
 function preventDefaults(e: Event) {
-	e.preventDefault();
+  e.preventDefault();
 }
 
 function hideCircle(e: DragEvent) {
-	console.log({ e });
+  console.log({ e });
 
-	draggingOver.value = false;
+  draggingOver.value = false;
 }
 
-const events = ['dragenter', 'dragover', 'dragleave', 'drop'];
+const events = ["dragenter", "dragover", "dragleave", "drop"];
 
 onMounted(() => {
-	events.forEach((event) => {
-		document.addEventListener(event, preventDefaults);
-	});
-	document.addEventListener('dragover', onDragOver);
+  events.forEach((event) => {
+    document.addEventListener(event, preventDefaults);
+  });
+  document.addEventListener("dragover", onDragOver);
 });
 
 onUnmounted(() => {
-	document.removeEventListener('dragover', onDragOver);
-	events.forEach((event) => {
-		document.removeEventListener(event, preventDefaults);
-	});
+  document.removeEventListener("dragover", onDragOver);
+  events.forEach((event) => {
+    document.removeEventListener(event, preventDefaults);
+  });
 });
 
 /**
@@ -151,23 +143,23 @@ onUnmounted(() => {
  */
 
 function addFiles(addedFiles: FileList) {
-	if (props.singleFile && files.value.length > 1) return;
-	for (let i = 0; i < addedFiles.length; i++) {
-		files.value.push({
-			file: addedFiles[i],
-			uid: Math.random().toString(36).substring(2, 9),
-			progress: '',
-			uploading: false,
-		});
-	}
-	uploadFiles();
+  if (props.singleFile && files.value.length > 1) return;
+  for (let i = 0; i < addedFiles.length; i++) {
+    files.value.push({
+      file: addedFiles[i],
+      uid: Math.random().toString(36).substring(2, 9),
+      progress: "",
+      uploading: false,
+    });
+  }
+  uploadFiles();
 }
 
 /**
  *
  *
  */
-const emit = defineEmits(['complete', 'done']);
+const emit = defineEmits(["complete", "done"]);
 
 /**
  *
@@ -175,10 +167,10 @@ const emit = defineEmits(['complete', 'done']);
  */
 
 function uploadFiles() {
-	files.value.forEach((item) => {
-		item.uploading = true;
-		/// TODO upload file
-	});
+  files.value.forEach((item) => {
+    item.uploading = true;
+    /// TODO upload file
+  });
 }
 
 // function updateProgress(e: ProgressEvent, uid: string) {
@@ -202,14 +194,14 @@ function uploadFiles() {
 // }
 
 async function onDrop(e: DragEvent) {
-	hideCircle(e);
-	preventDefaults(e);
-	const filesToAdd = e.dataTransfer?.files;
-	if (filesToAdd) {
-		addFiles(filesToAdd);
-		const file = await bagel.uploadFile(filesToAdd[0]);
-		emit('complete', file);
-	}
+  hideCircle(e);
+  preventDefaults(e);
+  const filesToAdd = e.dataTransfer?.files;
+  if (filesToAdd) {
+    addFiles(filesToAdd);
+    const file = await bagel.uploadFile(filesToAdd[0]);
+    emit("complete", file);
+  }
 }
 </script>
 <style>
@@ -235,15 +227,15 @@ async function onDrop(e: DragEvent) {
 } */
 
 .files-wrapper {
-	/* flex-direction: column;
+  /* flex-direction: column;
 	border-radius: 10px; */
-	/*overflow: hidden;*/
-	/* min-height: 100px;
+  /*overflow: hidden;*/
+  /* min-height: 100px;
 	font-size: var(--input-font-size); */
 }
 
 .drop-zone {
-	/* background-color: var(--bgl-bg);
+  /* background-color: var(--bgl-bg);
 	height: 100%;
 	width: 100%;
 	flex-grow: 1;
@@ -262,17 +254,17 @@ async function onDrop(e: DragEvent) {
 }
 
 .drop-zone:hover {
-	/* color: var(--bgl-blue);
-	outline: dashed 1px var(--bgl-blue-tint); */
+  /* color: var(--bgl-primary);
+	outline: dashed 1px var(--bgl-primary-tint); */
 }
 
 .drop-circle {
-	/* pointer-events: none;
+  /* pointer-events: none;
 	position: absolute;
 	width: 100px;
 	height: 100px;
 	border-radius: 50%;
-	background-color: var(--bgl-blue-tint);
+	background-color: var(--bgl-primary-tint);
 	display: flex;
 	top: v-bind(circleTop);
 	left: v-bind(circleLeft);
@@ -287,7 +279,7 @@ async function onDrop(e: DragEvent) {
     transition: transform 0.2s ease-in-out;
 } */
 .load-file-bar {
-	/* display: flex;
+  /* display: flex;
 	align-items: center;
 	justify-content: space-between;
 	background: var(--bgl-white);
@@ -301,17 +293,17 @@ async function onDrop(e: DragEvent) {
 }
 
 .load-file-bar p {
-	/* width: calc(100% - 40px);
+  /* width: calc(100% - 40px);
 	overflow: hidden;
 	text-overflow: ellipsis; */
 }
 
 .load-file-bar span {
-	/* font-size: 10px; */
+  /* font-size: 10px; */
 }
 
 .pie {
-	/* width: 30px;
+  /* width: 30px;
 	height: 30px;
 	position: relative;
 	display: flex;
@@ -324,7 +316,7 @@ async function onDrop(e: DragEvent) {
 	position: absolute;
 	border-radius: 50%;
 	inset: 0;
-	background: conic-gradient(var(--bgl-blue) calc(var(--p) * 1%), #0000 0);
+	background: conic-gradient(var(--bgl-primary) calc(var(--p) * 1%), #0000 0);
 	-webkit-mask: radial-gradient(
 		farthest-side,
 		#0000 calc(99% - var(--b)),