@bagelink/vue 0.0.168 → 0.0.172

package/src/components/formkit/FileUploader.vue

@@ -1,86 +1,99 @@
 <template>
-  <div class="files-wrapper flex">
-    <div
-      ref="dropZoneEl"
-      class="drop-zone flex-grow"
-      @click="openFileDialog"
-      @drop.prevent.stop="onDrop"
-      @dragleave="draggingOver = false"
-    >
-      <Transition name="pop">
-        <div ref="dropCircle" v-if="draggingOver" class="drop-circle" />
-      </Transition>
-      <div class="img-label" v-if="allowUpload">
-        <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">
-            <!-- Preview File if image -->
-            <img
-              width="40"
-              v-if="isImg(item)"
-              :src="item.dataUrl"
-              :alt="item.name"
-              style="margin-inline-end: 10px"
-            />
-            <p>
-              {{ item.name }}
-            </p>
-            <div class="flex">
-              <div
-                class="pie"
-                :style="`--p:${item.progress}`"
-                style="--b: 2px"
-                :class="{ complete: item.progress === 100 }"
-              >
-                <span class="progress" v-if="item.progress < 100">{{
-                  `${item.progress.toFixed(0)}`
-                }}</span>
-                <MaterialIcon class="success" icon="check" />
-              </div>
-              <Btn
-                thin
-                class="delete-btn"
-                @click.stop="deleteImg(item)"
-                icon="delete"
-                v-if="item.progress === 100"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <input
-      class="file-input"
-      type="file"
-      @change="handleFileInput"
-      ref="fileInputEl"
-      :multiple="context?.attrs.multiple || false"
-    />
-  </div>
+	<div class="files-wrapper flex">
+		<div
+			ref="dropZoneEl"
+			class="drop-zone flex-grow"
+			@click="openFileDialog"
+			@drop.prevent.stop="onDrop"
+			@dragleave="draggingOver = false"
+		>
+			<Transition name="pop">
+				<div
+					ref="dropCircle"
+					v-if="draggingOver"
+					class="drop-circle"
+				/>
+			</Transition>
+			<div
+				class="img-label"
+				v-if="allowUpload"
+			>
+				<p>
+					{{ computedDragDropLabel }} <span>{{ computedDrowseLabel }}</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">
+						<!-- Preview File if image -->
+						<img
+							width="40"
+							v-if="isImg(item)"
+							:src="item.dataUrl"
+							:alt="item.name"
+							style="margin-inline-end: 10px"
+						>
+						<p>
+							{{ item.name }}
+						</p>
+						<div class="flex">
+							<div
+								class="pie"
+								:style="`--p:${item.progress}`"
+								style="--b: 2px"
+								:class="{ complete: item.progress === 100 }"
+							>
+								<span
+									class="progress"
+									v-if="item.progress < 100"
+								>{{
+									`${item.progress.toFixed(0)}`
+								}}</span>
+								<MaterialIcon
+									class="success"
+									icon="check"
+								/>
+							</div>
+							<Btn
+								thin
+								class="delete-btn"
+								@click.stop="deleteImg(item)"
+								icon="delete"
+								v-if="item.progress === 100"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<input
+			class="file-input"
+			type="file"
+			@change="handleFileInput"
+			ref="fileInputEl"
+			:multiple="computedMultiple"
+		>
+	</div>
 </template>
 
 <script setup lang="ts">
 interface UploadFile {
-  dataUrl: string;
-  progress: number;
-  uploading: boolean;
-  file?: File;
-  name: string;
-  serverFile?: any;
-  uploaded: boolean;
+	dataUrl: string;
+	progress: number;
+	uploading: boolean;
+	file?: File;
+	name: string;
+	serverFile?: any;
+	uploaded: boolean;
 }
 
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted } from 'vue';
 
-import { MaterialIcon, Btn, useBagel } from "@bagelink/vue";
+import { MaterialIcon, Btn, useBagel } from '@bagelink/vue';
 
 const bagel = useBagel();
 
@@ -92,129 +105,133 @@ const fileInputEl = $ref<HTMLInputElement>();
 const files = $ref<UploadFile[]>([]);
 
 const props = withDefaults(
-  defineProps<{
-    context: Record<string, any>;
-    dragDropLabel?: string;
-    browseLabel?: string;
-  }>(),
-  {
-    dragDropLabel: "Drag and drop your files here",
-    browseLabel: "or browse",
-  }
+	defineProps<{
+		context: Record<string, any>;
+		dragDropLabel?: string;
+		browseLabel?: string;
+		multiple?: boolean;
+	}>(),
+	{
+		dragDropLabel: 'Drag and drop your files here',
+		browseLabel: 'or browse',
+		multiple: false,
+	},
 );
 
+const computedDragDropLabel = $computed(() => props?.context?.attrs?.dragDropLabel || props?.dragDropLabel);
+const computedDrowseLabel = $computed(() => props?.context?.attrs?.browseLabel || props?.browseLabel);
+const computedMultiple = $computed(() => !!(props?.context?.attrs?.multiple || props?.multiple));
+
 const allowUpload = $computed(() => {
-  const tooManyFiles = !props.context?.attrs.multiple && files.length > 0;
-  return !tooManyFiles;
+	const tooManyFiles = !computedMultiple && files.length > 0;
+	return !tooManyFiles;
 });
 
-const openFileDialog = () => (allowUpload ? fileInputEl?.click() : "");
+const openFileDialog = () => (allowUpload ? fileInputEl?.click() : '');
 
 function animateCircle(e: DragEvent) {
-  e.preventDefault();
-  const zoneRect = dropZoneEl?.getBoundingClientRect?.();
-  if (!zoneRect) return;
-  draggingOver = true;
-  const left = e.clientX - zoneRect.left;
-  const top = e.clientY - zoneRect.top;
-  dropCircle?.style?.setProperty?.("left", `${left}px`);
-  dropCircle?.style?.setProperty?.("top", `${top}px`);
+	e.preventDefault();
+	const zoneRect = dropZoneEl?.getBoundingClientRect?.();
+	if (!zoneRect) return;
+	draggingOver = true;
+	const left = e.clientX - zoneRect.left;
+	const top = e.clientY - zoneRect.top;
+	dropCircle?.style?.setProperty?.('left', `${left}px`);
+	dropCircle?.style?.setProperty?.('top', `${top}px`);
 }
 
 function emitValue() {
-  // const fileValues = files.map((f) => f.serverFile?.id);
-  // console.log({ files });
-  if (!props.context?.attrs.multiple)
-    props.context?.node.input(files[0].serverFile);
-  // eslint-disable-next-line no-alert
-  else alert("not implemented");
+	// const fileValues = files.map((f) => f.serverFile?.id);
+	// console.log({ files });
+	if (!computedMultiple) return props.context?.node.input(files[0].serverFile);
+	// eslint-disable-next-line no-alert
+	return alert('not implemented');
 }
 
-const isImg = (file: UploadFile) =>
-  file.file?.type.includes("image") ||
-  file.serverFile?.mimetype?.match(/image\/|jpg|png|gif|bmp|jpeg/i) ||
-  file.serverFile.extension?.match(/jpg|png|gif|bmp|jpeg/i);
+const isImg = (file: UploadFile) => file.file?.type.includes('image') ||
+	file.serverFile?.mimetype?.match(/image\/|jpg|png|gif|bmp|jpeg/i) ||
+	file.serverFile.extension?.match(/jpg|png|gif|bmp|jpeg/i);
 
 function uploadFiles() {
-  files.forEach(async (file) => {
-    if (file.uploaded || file.uploading || !file.file) return;
-    file.uploading = true;
-    file.serverFile = await bagel.uploadFile(file.file, {
-      onUploadProgress: (e) => (file.progress = e.progress * 100 - 1),
-    });
-    file.progress += 1;
-    emitValue();
-    file.uploaded = true;
-    file.uploading = false;
-  });
+	files.forEach(async (file) => {
+		if (file.uploaded || file.uploading || !file.file) return;
+		file.uploading = true;
+		file.serverFile = await bagel.uploadFile(file.file, {
+			onUploadProgress: (e) => (file.progress = e.progress * 100 - 1),
+		});
+		file.progress += 1;
+		emitValue();
+		file.uploaded = true;
+		file.uploading = false;
+	});
 }
 
 const deleteImg = async (file: UploadFile) => {
-  await bagel.delete(`files/${file.serverFile.id}`);
-  const index = files.indexOf(file);
-  files.splice(index, 1);
-  emitValue();
+	await bagel.delete(`files/${file.serverFile.id}`);
+	const index = files.indexOf(file);
+	files.splice(index, 1);
+	emitValue();
 };
 
 function readAsDataURL(file: File): Promise<any> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-  });
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(reader.result);
+		reader.onerror = reject;
+		reader.readAsDataURL(file);
+	});
 }
 
 async function addFiles(addedFiles: FileList) {
-  if (!allowUpload) return;
-  for (let i = 0; i < addedFiles.length; i++) {
-    const f = addedFiles[i];
-    const file: UploadFile = {
-      // eslint-disable-next-line no-await-in-loop
-      dataUrl: await readAsDataURL(f),
-      file: f,
-      name: f.name,
-      progress: 0,
-      uploading: false,
-      uploaded: false,
-    };
-    files.push(file);
-  }
-  uploadFiles();
+	if (!allowUpload) return;
+	for (let i = 0; i < addedFiles.length; i++) {
+		const f = addedFiles[i];
+		const file: UploadFile = {
+			// eslint-disable-next-line no-await-in-loop
+			dataUrl: await readAsDataURL(f),
+			file: f,
+			name: f.name,
+			progress: 0,
+			uploading: false,
+			uploaded: false,
+		};
+		files.push(file);
+	}
+	uploadFiles();
 }
 
 onMounted(() => {
-  dropZoneEl?.addEventListener("dragover", animateCircle);
-  if (!props.context?.attrs.multiple && props.context?.value) {
-    files.push({
-      serverFile: props.context?.value,
-      uploaded: true,
-      uploading: false,
-      progress: 100,
-      dataUrl: props.context?.value?.url,
-      name: props.context?.value?.name,
-    });
-  }
+	dropZoneEl?.addEventListener('dragover', animateCircle);
+	if (!computedMultiple && props.context?.value) {
+		files.push({
+			serverFile: props.context?.value,
+			uploaded: true,
+			uploading: false,
+			progress: 100,
+			dataUrl: props.context?.value?.url,
+			name: props.context?.value?.name,
+		});
+	}
 });
-onUnmounted(() => dropZoneEl?.removeEventListener("dragover", animateCircle));
+onUnmounted(() => dropZoneEl?.removeEventListener('dragover', animateCircle));
 
 function handleFileInput(e: Event) {
-  const filesToAdd: FileList = (e.target as any).files;
-  void addFiles(filesToAdd); // TODO: Nati: should be awaited?
+	const filesToAdd: FileList = (e.target as any).files;
+	void addFiles(filesToAdd); // TODO: Nati: should be awaited?
 }
 
 function onDrop(e: DragEvent) {
-  draggingOver = false;
-  e.preventDefault();
-  const filesToAdd = e.dataTransfer?.files;
-  if (filesToAdd) void addFiles(filesToAdd); // TODO: Nati: should be awaited?
+	draggingOver = false;
+	e.preventDefault();
+	const filesToAdd = e.dataTransfer?.files;
+	if (filesToAdd) void addFiles(filesToAdd); // TODO: Nati: should be awaited?
 }
 </script>
 <style>
 .uploading-wrap {
-  width: 100%;
-  padding-right: 5px;
-  padding-left: 5px;
+	width: 100%;
+	padding-right: 5px;
+	padding-left: 5px;
 }
 
 /*
@@ -222,166 +239,162 @@ function onDrop(e: DragEvent) {
 */
 
 .img-label .icon-font {
-  font-size: 30px;
-  margin-bottom: 10px;
+	font-size: 30px;
+	margin-bottom: 10px;
 }
 
 .img-label span {
-  text-decoration: underline;
+	text-decoration: underline;
 }
 
 .file-input {
-  display: none;
+	display: none;
 }
 
 .files-wrapper {
-  flex-direction: column;
-  border-radius: 10px;
-  /*overflow: hidden;*/
-  min-height: calc(var(--input-height) * 1.5);
+	flex-direction: column;
+	border-radius: 10px;
+	/*overflow: hidden;*/
+	min-height: calc(var(--input-height) * 1.5);
 
-  font-size: var(--input-font-size);
+	font-size: var(--input-font-size);
 }
 
 .drop-zone {
-  background-color: var(--input-bg);
-  height: 100%;
-  width: 100%;
-  flex-grow: 1;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  outline: dashed 1px var(--border-color);
-  border-radius: 10px;
-  padding: 1px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--input-color);
+	background-color: var(--input-bg);
+	height: 100%;
+	width: 100%;
+	flex-grow: 1;
+	position: relative;
+	overflow: hidden;
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	outline: dashed 1px var(--border-color);
+	border-radius: 10px;
+	padding: 1px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	color: var(--input-color);
 }
 
 .drop-zone:hover {
-  color: var(--bgl-primary);
-  outline: dashed 1px var(--bgl-primary-tint);
+	color: var(--bgl-primary);
+	outline: dashed 1px var(--bgl-primary-tint);
 }
 
 .drop-circle {
-  pointer-events: none;
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  background-color: var(--bgl-primary-tint);
-  display: flex;
-  transform: translate(-50%, -50%) scale(1);
-  transform-origin: left top;
+	pointer-events: none;
+	position: absolute;
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	background-color: var(--bgl-primary-tint);
+	display: flex;
+	transform: translate(-50%, -50%) scale(1);
+	transform-origin: left top;
 }
 
 .load-file-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--bgl-white);
-  border-radius: var(--btn-border-radius);
-  width: 100%;
-  color: var(--input-color);
-  height: var(--btn-height);
-  padding: 0.5rem;
-  height: 46px;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-  white-space: nowrap;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background: var(--bgl-white);
+	border-radius: var(--btn-border-radius);
+	width: 100%;
+	color: var(--input-color);
+	height: var(--btn-height);
+	padding: 0.5rem;
+	height: 46px;
+	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+	white-space: nowrap;
 }
 
 .load-file-bar p {
-  width: calc(100% - 40px);
-  overflow: hidden;
-  text-overflow: ellipsis;
+	width: calc(100% - 40px);
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .load-file-bar span {
-  font-size: 10px;
+	font-size: 10px;
 }
 
 .pie {
-  width: 30px;
-  height: 30px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	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))
-  );
+	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;
+	transform: scale(0);
+	opacity: 0;
+	transition: all 0.3s ease-in-out;
 }
 
 .pie .progress {
-  position: absolute;
-  font-size: 10px;
+	position: absolute;
+	font-size: 10px;
 }
 
 .pie.complete .progress {
-  display: none;
+	display: none;
 }
 
 .pie.complete .success {
-  transform: scale(1.3);
-  opacity: 1;
+	transform: scale(1.3);
+	opacity: 1;
 }
 
 .pie.complete:before {
-  background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
+	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
 
 .pie.complete {
-  color: var(--bgl-green);
+	color: var(--bgl-green);
 }
 </style>
 <style>
 .pop-enter-active {
-  transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
+	transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
 }
 
 .pop-leave-active {
-  transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
+	transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
 }
 
 .pop-enter-from,
 .pop-leave-to {
-  scale: 0;
+	scale: 0;
 }
 
 .delete-btn {
-  margin-inline-end: -30px;
-  opacity: 0;
-  margin-inline-start: 10px;
+	margin-inline-end: -30px;
+	opacity: 0;
+	margin-inline-start: 10px;
 }
 
 .uploading-wrap:hover .delete-btn {
-  opacity: 1;
-  margin-inline-end: 0;
+	opacity: 1;
+	margin-inline-end: 0;
 }
 </style>