@bagelink/vue 0.0.218 → 0.0.226-beta.0

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

@@ -3,29 +3,89 @@
 		<label>
 			{{ label }}
 		</label>
-		<div @click="browse" @dragover="dragover" @drop="drop" @dragleave="dragleave" class="fileUploadWrap"
-			:class="{ fileDropZone: !files.length, dragover: isDragOver }">
-			<div v-if="files.length && !multiple">
-				<div class="imagePreviewWrap">
-					<img class="preview" :src="fileToUrl(files[0])" alt="">
+		<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">
-						{{ files[0].name }}
+						{{ file.name }}
 					</p>
-					<Btn thin @click.stop="removeFile(files[0])" flat icon="delete" color="red" />
+					<Btn thin @click.stop="removeFile(file)" flat icon="delete" color="red" />
 				</div>
-			</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 { Btn } from '@bagelink/vue';
+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[], }>();
 
-const props = defineProps<{ label: string, multiple?: boolean }>();
-const files = $ref<File[]>([]);
-const fileQueue = $ref<File[]>([]);
+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 fileQueue = $ref<QueueFile[]>([]);
 let isDragOver = $ref(false);
 
 const preventDefault = (e: Event) => {
@@ -34,13 +94,17 @@ const preventDefault = (e: Event) => {
 };
 
 const fileToUrl = (file: File) => URL.createObjectURL(file);
-const removeFile = (file: File) => {
-	const index = files.indexOf(file);
-	files.splice(index, 1);
+const removeFile = (file: StorageFile) => {
+	const index = storageFiles.indexOf(file);
+	storageFiles.splice(index, 1);
 };
 const flushQueue = () => {
-	fileQueue.forEach((file: File, i) => {
-		if (props.multiple) { if (!files.includes(file)) files.push(file); } else files.splice(0, 1, file);
+	fileQueue.forEach(async (file, i) => {
+		if (!props.multiple) storageFiles.splice(0, 1);
+		const serverFile = await bagel.uploadFile(file.file, {
+			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
+		});
+		storageFiles.push(serverFile);
 		fileQueue.splice(i, 1);
 	});
 };
@@ -51,7 +115,9 @@ const browse = () => {
 	input.multiple = props.multiple;
 	input.onchange = (e: Event) => {
 		const target = e?.target as HTMLInputElement;
-		if (target?.files) fileQueue.push(...Array.from(target.files));
+		if (target?.files) {
+			Array.from(target.files).forEach((file:File) => fileQueue.push({ name: file.name, file, progress: 0 }));
+		}
 		flushQueue();
 	};
 	input.click();
@@ -71,7 +137,9 @@ const dragover = (e: DragEvent) => {
 
 const drop = (e: DragEvent) => {
 	preventDefault(e);
-	if (e.dataTransfer) fileQueue.push(...Array.from(e.dataTransfer.files));
+	if (e.dataTransfer) {
+		Array.from(e.dataTransfer.files).forEach((file:File) => fileQueue.push({ name: file.name, file, progress: 0 }));
+	}
 	isDragOver = false;
 	flushQueue();
 };
@@ -134,4 +202,56 @@ img.preview {
 .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/SelectField.vue

@@ -1,42 +1,13 @@
 <template>
-	<div
-		class="bagel-input"
-		:class="{ 'no-edit': !editMode, small: small }"
-		:title="description"
-	>
-		<label
-			v-if="label"
-			for="label"
-			:class="{ active: showList }"
-		>
-			<LangText :input="label" />
-		</label>
-
-		<div
-			class="custom-select"
-			ref="selectEl"
-			:class="{ 'open-select': showList && editMode }"
-		>
-			<div
-				@click.stop="toggleShowList"
-				class="input"
-				name="select-input"
-				:class="{ active: showList }"
-			>
-				<LangText :input="displayValue" />
-			</div>
+	<div ref="selectInput" class="bagel-input" :title="label">
+		<label v-if="label" for="label" :class="{ active: showList }">{{ label }}</label>
+		<div class="custom-select" ref="selectEl" :class="{ 'open-select': showList }">
+			<TextInput @keydown.capture="handleKeydown" @click.stop="toggleShowList" :modelValue="displayValue"
+				:required="required" />
 			<Teleport to="#app">
-				<div
-					ref="dropdown"
-					class="custom-select-drop"
-					:class="{ 'open-select': showList && editMode }"
-				>
-					<div
-						v-for="option in optionsRef"
-						:key="option.value"
-						@click="handleSelect(option)"
-					>
-						<LangText :input="option.label" />
+				<div ref="dropdown" class="custom-select-drop" :class="{ 'open-select': showList }">
+					<div v-for="option in optionList" :key="option.value" @click="handleSelect(option)">
+						{{ option.label }}
 					</div>
 				</div>
 			</Teleport>
@@ -46,127 +17,102 @@
 
 <script lang="ts" setup>
 import {
-	onMounted, onUnmounted, ref, computed,
-	watch,
+	onMounted, onUnmounted,
 } from 'vue';
-import { LangText } from '@bagelink/vue';
-import { type SelectBagelField } from '@bagelink/vue';
+import { TextInput } from '.';
+
+type Option = {
+	label: string;
+	value: string | number;
+};
+
+type RawOption = Option | string | number;
+
+const selectEl = $ref<HTMLElement>();
+const dropdown = $ref<HTMLElement>();
+const selectInput = $ref<HTMLElement>();
+let focusedIndex = $ref(-1);
 
-const selectEl = ref<HTMLElement>();
-const dropdown = ref<HTMLElement>();
-const showList = ref(false);
+let showList = $ref(false);
+const selectedValue = defineModel<string | number>();
 const props = withDefaults(
-	defineProps<
-		Omit<SelectBagelField, 'key'> & {
-			editMode?: boolean;
-			field: SelectBagelField;
-			modelValue: any;
-			small?: boolean;
-			label?: string;
-			description?: string;
-		}
+	defineProps<{
+		options: RawOption[] | string;
+		label?: string;
+		placeholder?: string;
+		required?: boolean;
+		helptext?: string;
+	}
 	>(),
 	{
-		description: '',
-		editMode: true,
+		helptext: '',
 		label: '',
 		placeholder: '',
 	},
 );
-const left = ref('0');
-const top = ref(0);
-const width = ref('0');
-const selectedValue = ref('');
-const optionsRef = ref<{ label: string; value: string | number }[]>([]);
-const displayValue = computed(() => {
-	const option = optionsRef.value.find((o) => o.value === selectedValue.value);
-	return option?.label || '';
-});
-const emits = defineEmits(['update:modelValue', 'selected']);
 
-function handleSelect(option: any) {
-	emits('update:modelValue', option.value);
-	selectedValue.value = option.value;
-	showList.value = false;
+function handleKeydown(event: KeyboardEvent) {
+	if (event.key === 'Escape') {
+		showList = false;
+	}
+	// arrow down
+	if (event.key === 'ArrowDown') {
+		event.preventDefault();
+		focusedIndex++;
+	}
 }
 
-function handleClick(e: any) {
-	const { target } = e;
-	if (target.name !== 'select-input' && showList.value === true) {
-		showList.value = false;
-		emits('update:modelValue', selectedValue);
+function optnToValueLabel(option: RawOption): Option {
+	if (typeof option === 'string' || typeof option === 'number') {
+		return { label: `${option}`, value: option };
 	}
-	// showList.value = false
+	return option;
 }
 
-function setPosition(e?: WheelEvent) {
-	const elInfo = selectEl.value?.getBoundingClientRect() || {
-		top: 0,
-		left: 0,
-		width: 0,
-		bottom: 0,
-	};
-	if (e?.deltaY) {
-		// top.value = top.value + e.deltaY * -1
-	} else {
-		//
-	}
-	top.value = elInfo.bottom;
+const optionList = $computed<Option[]>(() => {
+	const optns = typeof props.options === 'string' ? props.options.split('\n|,') : props.options;
+	return optns.map(optnToValueLabel);
+});
+const displayValue = $computed(() => optionList.find((optn) => optn.value === selectedValue.value)?.label || '');
 
-	left.value = `${elInfo.left}px`;
-	width.value = `${elInfo.width}px`;
-	const dropRect = dropdown.value?.getBoundingClientRect?.() || {
-		height: 0,
-	};
+function handleSelect(option: Option) {
+	selectedValue.value = option.value;
+	showList = false;
+}
 
-	if (window.innerHeight - elInfo.bottom < dropRect.height) {
-		top.value = elInfo.top - dropRect.height;
+function closestScrollableParent(element?: HTMLElement | null) {
+	if (!element) return null;
+	while (element) {
+		const style = window.getComputedStyle(element);
+		if ((style.overflowY !== 'visible' && element.scrollHeight > element.clientHeight) ||
+			(style.overflowX !== 'visible' && element.scrollWidth > element.clientWidth)) {
+			return element;
+		}
+		element = element.parentElement;
 	}
+	return null;
 }
 
-function hideDrop(e: WheelEvent) {
-	const dropRect = dropdown.value?.getBoundingClientRect() || {
-		left: 0,
-		right: 0,
-	};
-	if (e.clientX < dropRect.left || e.clientX > dropRect.right) {
-		showList.value = false;
-	}
+function positionDropdown() {
+	if (!selectEl || !dropdown) return;
+	const { top, left, width } = selectEl.getBoundingClientRect();
+	dropdown.style.top = `${top + 40}px`;
+	dropdown.style.left = `${left}px`;
+	dropdown.style.width = `${width}px`;
 }
 
-watch(
-	() => props.modelValue,
-	() => {
-		if (selectedValue.value !== props.modelValue) selectedValue.value = props.modelValue;
-	},
-	{ immediate: true },
-);
+function toggleShowList() {
+	showList = !showList;
+	positionDropdown();
+}
 
 onMounted(() => {
-	// scroll event listener
-	window.addEventListener('wheel', hideDrop);
-
-	selectedValue.value = props.modelValue;
-	if (typeof props.field.options === 'string') {
-		props.field.options.split('\n').forEach((option) => {
-			optionsRef.value?.push({ label: option, value: option });
-		});
-	} else {
-		props.field.options.forEach((option) => {
-			optionsRef.value?.push(option);
-		});
-	}
-	document.addEventListener('click', handleClick);
+	const scrollable = closestScrollableParent(selectInput);
+	scrollable?.addEventListener('scroll', positionDropdown);
 });
 
-function toggleShowList() {
-	setPosition();
-	showList.value = !showList.value;
-}
-
 onUnmounted(() => {
-	document.removeEventListener('click', handleClick);
-	// window.removeEventListener('wheel', hideDrop);
+	closestScrollableParent(selectInput)?.removeEventListener('scroll', positionDropdown);
 });
 </script>
 
@@ -209,20 +155,16 @@ onUnmounted(() => {
 }
 
 [dir='rtl'] .custom-select-drop {
-	inset-inline-end: v-bind(left);
 	inset-inline-start: unset;
 }
 
 .custom-select-drop {
-	position: fixed;
-
+	position: absolute;
 	cursor: pointer;
 	font-size: 12px;
-	top: v-bind('`${top}px`');
-	inset-inline-start: v-bind(left);
 	box-sizing: border-box;
 	min-width: 220px;
-	width: v-bind(width);
+	width: 100%;
 	background: var(--bgl-white);
 	box-shadow: 0 0 10px 0 var(--bgl-shadow);
 	border-radius: 10px;
@@ -230,7 +172,7 @@ onUnmounted(() => {
 	overflow-y: auto;
 	opacity: 0;
 	pointer-events: none;
-	max-height: 0;
+	/* max-height: 0; */
 	/*transition: var(--bgl-transition);*/
 }