@bagelink/vue 0.0.164 → 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,14 +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);
-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,
@@ -28,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/styles/dark.css

@@ -1,12 +1,15 @@
 [theme="dark"] {
-  --bgl-blue-20: rgba(46, 91, 255, 20%);
-  --bgl-blue-dark: #191c30;
-  --bgl-blue-light: #20262f;
+  --bgl-primary: #1c4fe1;
+  --bgl-primary-tint: #1c4fe180;
+
+  /* --bgl-blue-20: rgba(46, 91, 255, 20%); */
+  /* --bgl-blue-dark: #191c30; */
+  --bgl-blue-light: #34363b;
   --bgl-black: #dbdcdc;
-  --bgl-black-tint: #686868;
-  --bgl-white: #212121;
-  --bgl-gray: #606060;
-  --bgl-gray-light: #252729;
+  --bgl-black-tint: #7a7a7a;
+  --bgl-white: rgb(41, 42, 45);
+  --bgl-gray: #7f7d7d;
+  --bgl-gray-light: #191b1c;
   --bgl-gray-80: #e8ecef;
   --bgl-gray-20: rgba(183, 183, 183, 0.2);
   --bgl-pink: #f1416c;
@@ -15,32 +18,87 @@
   --bgl-yellow: #ffbb00;
   --bgl-yellow-light: #fff6d5;
   --bgl-green: #52875b;
-  --border-color: #292b2e;
-  --bgl-bg: #24252a;
+  --border-color: #383a3f;
+  --bgl-bg: #121317;
   --bgl-shadow: #4c577d26;
-  --input-bg: #252729;
-  --input-color: #929394;
-  --label-color: #92939480;
-  --placeholder-color: #92939440;
-  --input-height: 40px;
-  --bgl-hover-filter: brightness(120%);
-  --bgl-active-filter: brightness(100%);
+  --input-bg: #1d2023;
+  --input-color: #d3d4d4;
+  --label-color: #d3d4d480;
+  --placeholder-color: #ccd4dd60;
+
+  --bgl-hover-filter: brightness(130%);
+  --bgl-active-filter: brightness(110%);
 }
 
 [theme="dark"] .formkit-outer input:focus-visible,
 [theme="dark"] .formkit-outer select:focus-visible,
 [theme="dark"] .formkit-outer textarea:focus-visible,
-.input.active {
+[theme="dark"] .input.active,
+[theme="dark"] .bagel-input input:focus-visible,
+[theme="dark"] .bagel-input select:focus-visible,
+[theme="dark"] .bagel-input textarea:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 10px #181212;
+  box-shadow: inset 0 0 10px var(--bgl-bg);
+}
+
+[theme="dark"] .formkit-outer select {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
 }
 
 /* use this is to override the nav color */
 [theme="dark"] .nav {
-  --bgl-white: var(--bgl-black) !important;
-  /* --bgl-primary: #081851; */
+  color: var(--bgl-black) !important;
+  background: transparent;
+  border-radius: 0 !important;
+  border-inline-end: 1px solid var(--bgl-gray-20);
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  margin-inline-start: 0 !important;
+}
+
+[theme="dark"] .nav * {
+  color: var(--bgl-black) !important;
+
+}
+
+[theme="dark"] .dropdown-project-head {
+  background: var(--bgl-bg) !important;
+  color: var(--bgl-white) !important;
 }
 
-[theme="dark"]input::-webkit-calendar-picker-indicator {
+[theme="dark"] .dropdown-project-body {
+  color: var(--bgl-black-tint) !important;
+}
+
+/* until here */
+
+
+[theme="dark"] input::-webkit-calendar-picker-indicator {
   filter: invert(48%);
+}
+
+[theme="dark"] ::selection {
+  color: var(--bgl-black);
+  background: var(--bgl-primary-tint);
+}
+
+[theme="dark"] .whatsapp-msg {
+  color: var(--bgl-gray-light);
+}
+
+[theme="dark"] button.formkit-input,
+[theme="dark"] .btn,
+[theme="dark"] .btn-icon,
+[theme="dark"] .primary-checkbox input:checked+span,
+[theme="dark"] .btn.light {
+  color: var(--bgl-black);
+}
+
+
+[theme="dark"] .bagel-input.checkbox.check .slider:before {
+  color: var(--bgl-black) !important;
+}
+
+[theme="dark"] .nav-expend {
+  top: 67px;
 }

package/src/styles/inputs.css

@@ -91,14 +91,6 @@ select {
     width: fit-content;
 }
 
-.bagel-input input:focus-visible,
-.bagel-input select:focus-visible,
-.bagel-input textarea:focus-visible,
-.input.active {
-    outline: none;
-    box-shadow: inset 0 0 10px #00000012;
-}
-
 .bagel-input:focus-within label {
     color: var(--bgl-primary);
 }
@@ -262,7 +254,10 @@ button.formkit-input:active {
 .formkit-outer input:focus-visible,
 .formkit-outer select:focus-visible,
 .formkit-outer textarea:focus-visible,
-.input.active {
+.input.active,
+.bagel-input input:focus-visible,
+.bagel-input select:focus-visible,
+.bagel-input textarea:focus-visible {
     outline: none;
     box-shadow: inset 0 0 10px #00000012;
 }

package/src/styles/theme.css

@@ -85,6 +85,7 @@
   margin-top: 0;
   margin-bottom: 20px;
   width: 100%;
+  padding-inline-end: 40px;
 }
 
 .modal-footer {
@@ -450,6 +451,11 @@ body {
   inset-inline-start: 0;
 }
 
+.DonationsDashbored .tabs {
+  border-bottom: 1px solid var(--border-color);
+  border-top: none;
+}
+
 .copy-url {
   background-color: var(--bgl-gray-light);
   border-radius: var(--btn-border-radius);

package/src/components/FileUploader.vue

@@ -1,345 +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>