@bagelink/vue 0.0.25 → 0.0.32

package/src/components/DataPreview.vue

@@ -0,0 +1,72 @@
+<template>
+	<div v-if="data" class="data">
+		<h3 class="mb-3 mt-0" v-if="title">
+			{{ title }}
+		</h3>
+		<div v-for="field in schema || []" :key="field.id" class="data-row">
+			<div class="key">
+				{{ field.label ? parseLocale(field.label) : keyToLabel(field.id) }}
+			</div>
+			<component :is="field.$el || 'div'" class="vlue">
+				{{ data[field.id] || field.defaultValue }}
+			</component>
+		</div>
+		<div v-if="!schema?.length">
+			<div
+				class="data-row" v-for="[key, value] in Object.entries(data).filter(
+					([key]) => !keysToIgnore.includes(key),
+				)" :key="key"
+			>
+				<div class="key">
+					{{ $t(keyToLabel(key)) }}
+				</div>
+				<div class="vlue">
+					{{ value }}
+				</div>
+			</div>
+		</div>
+		<slot name="footer" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { keyToLabel } from '@/utils';
+
+import { parseLocale } from '@/utils';
+
+const keysToIgnore = ['id', 'person_id', 'person', 'created_at', 'updated_at'];
+
+const props = withDefaults(defineProps<{
+	data: Record<string, any>,
+	schema?: Record<string, any>[],
+	title?: string,
+	$t: (str: string) => string,
+}>(), {
+	$t: (str: string) => str,
+});
+</script>
+
+<style scoped>
+.data {
+	border: 1.1px solid var(--border-color);
+	padding: 20px;
+	border-radius: var(--input-border-radius);
+}
+
+.data-row {
+	display: flex;
+	justify-content: space-between;
+	padding-bottom: 0.5rem;
+	margin-bottom: 0.5rem;
+	opacity: 0.8;
+	border-bottom: 1px solid var(--border-color);
+}
+
+.data-link {
+	display: block;
+	font-size: var(--input-font-size);
+	margin-bottom: 2px;
+	line-height: 1.3;
+	color: var(--input-color);
+}
+</style>

package/src/components/DropDown.vue

@@ -0,0 +1,122 @@
+<template>
+	<div class="dropdown" @click="toggleDropdown" :class="{ opendrop: isOpen }">
+		<div class="dropdown-title">
+			{{ selectedOption || placeholder }}
+			<MaterialIcon icon="keyboard_arrow_down" />
+		</div>
+		<div class="dropdown-body">
+			<p
+				v-for="(option, index) in options"
+				:key="index"
+				@click.stop="selectOption(option as string, index as number)"
+			>
+				{{ option }}
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MaterialIcon } from '@/components';
+
+const props = defineProps({
+	modelValue: String,
+	options: Array,
+	placeholder: String,
+});
+const emit = defineEmits(['update:modelValue']);
+
+const isOpen = ref(false);
+const selectedOption = ref(props.modelValue);
+
+function toggleDropdown() {
+	isOpen.value = !isOpen.value;
+}
+
+function selectOption(option: string, index: number) {
+	selectedOption.value = option;
+	isOpen.value = false;
+	emit('update:modelValue', { option, index }); // Emit the selected option value with v-model
+}
+</script>
+
+<style>
+.dropdown {
+	position: relative;
+	font-size: calc(var(--input-font-size) * 1.3);
+	width: 50px;
+	/* color: var(--bgl-blue); */
+	z-index: 1;
+}
+
+.dropdown-title {
+	white-space: nowrap;
+	border-radius: var(--input-border-radius);
+	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+	padding-left: calc(var(--btn-padding) / 2);
+	padding-right: calc(var(--btn-padding) / 2);
+	display: flex;
+	align-items: center;
+	min-height: var(--input-height);
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	background: var(--bgl-white);
+	justify-content: space-between;
+	user-select: none;
+	position: relative;
+}
+
+.open .dropdown {
+	min-width: 120px;
+}
+
+.dropdown-title:hover {
+	filter: var(--bgl-hover-filter);
+	color: var(--bgl-blue);
+}
+
+.dropdown-title:active {
+	filter: var(--bgl-active-filter);
+}
+
+.dropdown-body {
+	border-radius: var(--input-border-radius);
+	position: absolute;
+	transition: var(--bgl-transition);
+	max-height: 0;
+	overflow: hidden;
+	background: var(--bgl-white);
+	inset-inline-start: 0;
+	inset-inline-end: 0;
+	overflow: auto;
+	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+}
+
+.dropdown-body * {
+	display: block;
+	cursor: pointer;
+	padding: calc(var(--btn-padding) / 2);
+	padding-bottom: calc(var(--btn-padding) / 4);
+	padding-top: calc(var(--btn-padding) / 4);
+	color: inherit;
+	text-decoration: none;
+	line-height: 1;
+	transition: var(--bgl-transition);
+	box-shadow: 0 -1px 0 0 rgb(0 0 0, 10%);
+	z-index: 99999999;
+}
+
+.dropdown-body *:hover {
+	filter: var(--bgl-hover-filter);
+	color: var(--bgl-blue);
+}
+
+.dropdown-body *:active {
+	filter: var(--bgl-active-filter);
+}
+
+.dropdown.opendrop .dropdown-body {
+	max-height: 150px;
+}
+</style>

package/src/components/FileUploader.vue

@@ -0,0 +1,344 @@
+<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>
+					{{ form.dragDrop }} <span>{{ form.browse }}</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 { useBagel } from 'src/plugins/bagel';
+import { ref, onMounted, onUnmounted } from 'vue';
+const bagel = useBagel();
+
+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 files = ref<
+	{
+		progress: string;
+		uploading: boolean;
+		uid: string;
+		file: File;
+	}[]
+>([]);
+const props = withDefaults(
+	defineProps<{
+		id?: string;
+		// folder?: string,
+		private?: 1 | 0;
+		singleFile?: boolean;
+		beforeUpload?:() => Promise<any>;
+			form: {
+				dragDrop: string
+				browse: string
+			}
+	}>(),
+	{
+		private: 0,
+		entity: '',
+		id: '',
+		beforeUpload: async () => {},
+	},
+);
+
+/**
+ * Drag and drop
+ */
+
+function openFileDialog() {
+	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;
+	}
+}
+
+function handleFileInput(e: Event) {
+	const filesToAdd: FileList = (e.target as any).files;
+	addFiles(filesToAdd);
+}
+
+function preventDefaults(e: Event) {
+	e.preventDefault();
+}
+
+function hideCircle(e: DragEvent) {
+	console.log({ e });
+
+	draggingOver.value = false;
+}
+
+const events = ['dragenter', 'dragover', 'dragleave', 'drop'];
+
+onMounted(() => {
+	events.forEach((event) => {
+		document.addEventListener(event, preventDefaults);
+	});
+	document.addEventListener('dragover', onDragOver);
+});
+
+onUnmounted(() => {
+	document.removeEventListener('dragover', onDragOver);
+	events.forEach((event) => {
+		document.removeEventListener(event, preventDefaults);
+	});
+});
+
+/**
+ * managing files
+ */
+
+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();
+}
+
+/**
+ *
+ *
+ */
+const emit = defineEmits(['complete', 'done']);
+
+/**
+ *
+ * server stuff
+ */
+
+function uploadFiles() {
+	files.value.forEach((item) => {
+		item.uploading = true;
+		/// TODO upload file
+	});
+}
+
+// function updateProgress(e: ProgressEvent, uid: string) {
+// 	files.value.find((item) => item.uid === uid).progress = (
+// 		(e.loaded / e.total)
+// 		* 100
+// 	).toFixed(0);
+// }
+
+// function uploadCompleteCallback(file: any, uid: string) {
+// 	files.value.forEach((item, index) => {
+// 		if (item.uid === uid) {
+// 			files.value.splice(index, 1);
+// 		}
+// 	});
+// 	emit('complete', file);
+// 	if (files.value.length === 0) {
+// 		fileInputEl.value.value = '';
+// 		emit('done');
+// 	}
+// }
+
+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);
+	}
+}
+</script>
+<style>
+/* .uploading-wrap {
+	width: 100%;
+} */
+
+/* .uploading {
+	margin: 0.5rem;
+} */
+
+/* .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: 100px;
+	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(--bgl-black-tint);
+	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;
+	top: v-bind(circleTop);
+	left: v-bind(circleLeft);
+	transform: translate(-50%, -50%) scale(1);
+	transform-origin: left top; */
+}
+
+/* .drop-circle.active {
+    color: red;
+    background-color: black;
+    transform: translate(-50%, -50%) scale(1);
+    transition: transform 0.2s ease-in-out;
+} */
+.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;
+	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;
+	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))
+	);
+} */
+</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;
+} */
+</style>