@bagelink/vue 0.0.25 → 0.0.35

package/src/components/formkit/ContactArrayFormKit.vue

@@ -0,0 +1,192 @@
+<template>
+	<div class="bagel-input">
+		<div class="mt-1">
+			<div
+				class="bglform-contact mb-2"
+				v-for="(contact, i) in val"
+				:key="i"
+			>
+				<div
+					class="bglform-contact-confirm"
+					v-if="deleteCandidate === i"
+				>
+					<p class="txt14">
+						{{ form.sure }}
+					</p>
+					<Btn
+						thin
+						color="red"
+						@click="deleteContact(contact.id)"
+					>
+						{{ form.delete }}
+					</Btn>
+					<Btn
+						thin
+						@click="deleteCandidate = -1"
+					>
+						{{ form.cancel }}
+					</Btn>
+				</div>
+				<Checkbox
+					v-model="contact.primary"
+					@update:model-value="($event) => primaryHandler(i, $event)"
+				/>
+				<input
+					class="bglform-contact-label"
+					v-model="contact.label"
+					type="text"
+					:placeholder="form.label"
+				>
+
+				<input
+					v-model="contact.email"
+					:placeholder="form.email"
+					v-if="context?.id === 'email'"
+					type="email"
+				>
+				<input
+					v-model="contact.phone"
+					:placeholder="form.phone"
+					v-if="context?.id === 'phone'"
+					type="tel"
+				>
+				<!-- <MaterialIcon @click="del(i)" icon="delete" class="btn-float" /> -->
+				<Btn
+					thin
+					@click="deleteCandidate = i"
+					icon="delete"
+					color="gray"
+					:disabled="contact.primary || val.length === 1 || deleteCandidate !== -1
+						"
+				/>
+			</div>
+			<Btn
+				class="add-btn"
+				color="blue"
+				flat
+				thin
+				@click="val.push({})"
+			>
+				{{ form.add }} {{ context?.label }}
+			</Btn>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+// import type { BagelField } from '@/types/BagelField';
+import { useBagel } from 'src/plugins/bagel';
+import { Btn } from '@/components';
+import Checkbox from '../form/inputs/Checkbox.vue';
+
+const bagel = useBagel();
+
+const props = defineProps<{
+	context: Record<string, any>;
+	form: {
+		sure: string
+		delete: string
+		cancel: string
+		label: string
+		email: string
+		phone: string
+		add: string
+	}
+}>();
+
+let val = $ref<any[]>([]);
+let deleteCandidate = $ref<number>(-1);
+
+const del = (i: number) => {
+	val.splice(i, 1);
+};
+
+const deleteContact = async (id: string) => {
+	if (id) await bagel.delete(`/person/contact/${id}`);
+	const index = val.findIndex((v) => v.id === id);
+	del(index);
+	deleteCandidate = -1;
+};
+
+const primaryHandler = (i: number, isPrimary: boolean) => {
+	if (!isPrimary) return;
+	val.forEach((contact, index) => {
+		if (index !== i) contact.primary = false;
+	});
+};
+
+watch(
+	() => props.context?.value,
+	() => {
+		val = props.context?.value;
+	},
+	{ immediate: true },
+);
+
+watch(
+	() => val,
+	() => {
+		props.context?.node.input(val);
+	},
+);
+</script>
+
+<style scoped>
+.bglform-contact {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	max-width: 700px;
+	position: relative;
+}
+
+.bglform-contact-label {
+	flex-basis: 140px;
+}
+
+.bglform-contact input[type='checkbox'] {
+	width: 30px;
+	min-width: 0;
+}
+
+.light.thin.btn-txt.btn {
+	padding-left: calc(var(--btn-padding) / 4);
+	padding-right: calc(var(--btn-padding) / 4);
+}
+
+.add-btn {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	margin-inline-start: 1rem;
+}
+
+.add-btn:active {
+	background: none !important;
+}
+
+.add-btn::before {
+	content: '+';
+	font-size: 10px;
+	background: var(--bgl-blue-light);
+	border-radius: 100%;
+	height: 14px;
+	width: 14px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-blue);
+}
+
+.add-btn:hover::before {
+	background: var(--bgl-blue);
+	color: var(--bgl-white);
+}
+
+@media screen and (max-width: 910px) {
+	.bglform-contact-label {
+		min-width: 0;
+	}
+}
+</style>

package/src/components/formkit/FileUploader.vue

@@ -0,0 +1,391 @@
+<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>
+</template>
+
+<script setup lang="ts">
+interface UploadFile {
+	dataUrl: string;
+	progress: number;
+	uploading: boolean;
+	file?: File;
+	name: string;
+	serverFile?: any;
+	uploaded: boolean;
+}
+
+import { onMounted, onUnmounted } from 'vue';
+import { useBagel } from 'src/plugins/bagel';
+import { MaterialIcon, Btn } from '@/components';
+
+const bagel = useBagel();
+
+let draggingOver = $ref(false);
+const dropCircle = $ref<HTMLElement>();
+const dropZoneEl = $ref<HTMLElement>();
+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',
+});
+
+const allowUpload = $computed(() => {
+	const tooManyFiles = !props.context?.attrs.multiple && files.length > 0;
+	return !tooManyFiles;
+});
+
+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`);
+}
+
+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 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;
+	});
+}
+
+const deleteImg = async (file: UploadFile) => {
+	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);
+	});
+}
+
+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();
+}
+
+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,
+		});
+	}
+});
+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?
+}
+
+function onDrop(e: DragEvent) {
+	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;
+}
+
+/*
+.uploading {}
+*/
+
+.img-label .icon-font {
+	font-size: 30px;
+	margin-bottom: 10px;
+}
+
+.img-label span {
+	text-decoration: underline;
+}
+
+.file-input {
+	display: none;
+}
+
+.files-wrapper {
+	flex-direction: column;
+	border-radius: 10px;
+	/*overflow: hidden;*/
+	min-height: calc(var(--input-height) * 1.5);
+
+	font-size: var(--input-font-size);
+}
+
+.drop-zone {
+	background-color: var(--bgl-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-blue);
+	outline: dashed 1px var(--bgl-blue-tint);
+}
+
+.drop-circle {
+	pointer-events: none;
+	position: absolute;
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	background-color: var(--bgl-blue-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;
+}
+
+.load-file-bar p {
+	width: calc(100% - 40px);
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.load-file-bar span {
+	font-size: 10px;
+}
+
+.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-blue) 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>
+<style>
+.pop-enter-active {
+	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);
+}
+
+.pop-enter-from,
+.pop-leave-to {
+	scale: 0;
+}
+
+.delete-btn {
+	margin-inline-end: -30px;
+	opacity: 0;
+	margin-inline-start: 10px;
+}
+
+.uploading-wrap:hover .delete-btn {
+	opacity: 1;
+	margin-inline-end: 0;
+}
+</style>

package/src/components/formkit/MiscFields.vue

@@ -0,0 +1,74 @@
+<template>
+	<div class="misc-wrap">
+		<Btn
+			class="add-btn"
+			color="gray"
+			flat
+			@click="addToField(field)"
+			v-for="(field, i) in fields.filter(
+				(field: any) => field.value?.length === 0,
+			)"
+			:key="i"
+			thin
+		>
+			{{ addBtnLabel }} {{ field.context?.label }}
+		</Btn>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { Btn } from '@/components';
+
+const props = defineProps<{
+	context: Record<string, any>;
+	addBtnLabel: string
+}>();
+
+const fields = $computed(() => props.context?.node?.parent?.children || []);
+
+const addToField = (field: any) => {
+	field.input([{}]);
+	console.log(fields);
+};
+</script>
+
+<style scoped>
+.misc-wrap {
+	display: flex;
+	gap: 1rem;
+	border-top: 1px solid var(--border-color);
+	padding-top: 0.5rem;
+	margin-bottom: auto;
+}
+
+.gray.thin.btn-txt.btn.add-btn {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	padding-left: 0;
+	padding-right: 0;
+	transition: var(--bgl-transition);
+}
+
+.add-btn:active {
+	background: none !important;
+}
+
+.add-btn::before {
+	content: '+';
+	font-size: 10px;
+	background: var(--bgl-gray-light);
+	border-radius: 100%;
+	height: 14px;
+	width: 14px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-gray);
+}
+
+.add-btn:hover::before {
+	background: var(--bgl-blue);
+	color: var(--bgl-white);
+}
+</style>