@bagelink/vue 0.0.168 → 0.0.170

package/src/components/formkit/index.ts

@@ -1,4 +1,5 @@
 import { createInput } from '@formkit/vue';
+import type { FormKitTypeDefinition } from '@formkit/core';
 import ContactArrayFormKit from './ContactArrayFormKit.vue';
 import AddressArray from './AddressArray.vue';
 import BankDetailsArray from './BankDetailsArray.vue';
@@ -8,16 +9,14 @@ import FileUploader from './FileUploader.vue';
 import PPV from '../PersonPreviewFormkit.vue';
 import TextVariableExamples from '../whatsapp/form/TextVariableExamples.vue';
 
-const ContactArrayInput = createInput(ContactArrayFormKit);
-const AddressInput = createInput(AddressArray);
-const BankDetailsInput = createInput(BankDetailsArray);
-const MiscFieldsInput = createInput(MiscFieldsBtns);
-const ToggleSwitchInput = createInput(Toggle);
-const FileUploadInput = createInput(FileUploader, {
-	props:	['dragDropLabel', 'browseLabel'],
-});
-const TextVariablesInput = createInput(TextVariableExamples);
-const PersonPreviewInput = createInput(PPV);
+const ContactArrayInput: FormKitTypeDefinition = createInput(ContactArrayFormKit);
+const AddressInput: FormKitTypeDefinition = createInput(AddressArray);
+const BankDetailsInput: FormKitTypeDefinition = createInput(BankDetailsArray);
+const MiscFieldsInput: FormKitTypeDefinition = createInput(MiscFieldsBtns);
+const ToggleSwitchInput: FormKitTypeDefinition = createInput(Toggle);
+const FileUploadInput: FormKitTypeDefinition = createInput(FileUploader);
+const TextVariablesInput: FormKitTypeDefinition = createInput(TextVariableExamples);
+const PersonPreviewInput: FormKitTypeDefinition = createInput(PPV);
 
 export {
 	TextVariablesInput,
@@ -30,6 +29,7 @@ export {
 	FileUploadInput,
 };
 
+export { default as FileUploader } from './FileUploader.vue';
 export type { BankDetailsContext } from './BankDetailsArray.vue';
 export type { AddressArrContext } from './AddressArray.vue';
 export type { ContactArrContext } from './ContactArrayFormKit.vue';

package/src/components/index.ts

@@ -18,7 +18,6 @@ export { default as RouterWrapper } from './RouterWrapper.vue';
 export { default as ContactSubmissions } from './ContactSubmissions.vue';
 export { default as PersonPreview } from './PersonPreview.vue';
 export { default as DataPreview } from './DataPreview.vue';
-export { default as FileUploader } from './FileUploader.vue';
 
 export * from './charts';
 export * from './formkit';

package/src/index.ts

@@ -1,5 +1,5 @@
 export {
-	BagelVue, type BagelOptions, bagelInjectionKey, useBagel,
+	BagelVue, type BagelOptions, bagelInjectionKey, useBagel, useI18nT, i18nTInjectionKey,
 } from './plugins/bagel';
 export { ModalPlugin, useModal } from './plugins/modal';
 export * from './utils';

package/src/plugins/bagel.ts

@@ -3,6 +3,10 @@ import type { InjectionKey, Plugin } from 'vue';
 import { Bagel } from '@bagelink/sdk';
 
 export const bagelInjectionKey = Symbol('bagel') as InjectionKey<Bagel>;
+export const i18nTInjectionKey = Symbol('bagel') as InjectionKey<
+  // eslint-disable-next-line no-unused-vars
+	(key: string) => string
+>;
 
 export function useBagel() {
 	const bagel = inject(bagelInjectionKey);
@@ -11,16 +15,28 @@ export function useBagel() {
 	return bagel;
 }
 
+export function useI18nT() {
+	const i18nT = inject(i18nTInjectionKey);
+	if (!i18nT) throw new Error('No i18nT provided');
+
+	return i18nT;
+}
+
 export interface BagelOptions {
   host: string
   // eslint-disable-next-line no-unused-vars
-  onError?: (err: Error) => void
+  onError?: (err: Error) => void,
+  // eslint-disable-next-line no-unused-vars
+	i18nT?: (key: string) => string
 }
 
 export const BagelVue: Plugin = {
 	install: (app, options: BagelOptions) => {
 		const bagel = new Bagel({ host: options.host, onError: options.onError });
+
 		app.config.globalProperties.$bagel = bagel;
 		app.provide(bagelInjectionKey, bagel);
+		app.config.globalProperties.$i18T = options?.i18nT || ((key: string) => key);
+		app.provide(i18nTInjectionKey, options?.i18nT || ((key: string) => key));
 	},
 };

package/src/components/FileUploader.vue

@@ -1,353 +0,0 @@
-<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>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
-import { useBagel } from "..";
-
-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>;
-		dragDropLabel?: string;
-		browseLabel?: string;
-	}>(),
-	{
-		private: 0,
-		entity: "",
-		id: "",
-		beforeUpload: async () => { },
-		dragDropLabel: "Drag and drop your files here",
-		browseLabel: "Browse",
-	}
-);
-
-/**
- * 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-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;
-	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-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))
-	);
-} */
-</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>