@bagelink/vue 0.0.162 → 0.0.168

package/dist/components/FileUploader.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.vue.d.ts","sourceRoot":"","sources":["../../src/components/FileUploader.vue"],"names":[],"mappings":"AAyCA;;;;;0BA4YyB,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;;;;0BAAZ,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;QAJ5B,MAAM;aAED,CAAC,GAAG,CAAC;kBAEA,MAAM,QAAQ,GAAG,CAAC;mBACjB,MAAM;iBACR,MAAM;;AARxB,wBAeG;AAGH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"FileUploader.vue.d.ts","sourceRoot":"","sources":["../../src/components/FileUploader.vue"],"names":[],"mappings":"AAiDA;;;;;0BA6YuB,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;;;;0BAAZ,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;QAJ5B,MAAM;aAED,CAAC,GAAG,CAAC;kBAEA,MAAM,QAAQ,GAAG,CAAC;mBACjB,MAAM;iBACR,MAAM;;AARtB,wBAeG;AAGH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/TabbedLayout.vue.d.ts

@@ -1,4 +1,4 @@
-import type { Router } from 'vue-router';
+import type { Router } from "vue-router";
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     title?: string | undefined;
     tabs: string[];

package/dist/components/TabbedLayout.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabbedLayout.vue.d.ts","sourceRoot":"","sources":["../../src/components/TabbedLayout.vue"],"names":[],"mappings":"AAiCA;AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;AA+LzC,wBAAwG;AAGxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"TabbedLayout.vue.d.ts","sourceRoot":"","sources":["../../src/components/TabbedLayout.vue"],"names":[],"mappings":"AA8BA;AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;AAkMzC,wBAAwG;AAGxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/components/formkit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/formkit/index.ts"],"names":[],"mappings":"AAUA,QAAA,MAAM,iBAAiB,+CAAmC,CAAC;AAC3D,QAAA,MAAM,YAAY,+CAA4B,CAAC;AAC/C,QAAA,MAAM,gBAAgB,+CAAgC,CAAC;AACvD,QAAA,MAAM,eAAe,+CAA8B,CAAC;AACpD,QAAA,MAAM,iBAAiB,+CAAsB,CAAC;AAC9C,QAAA,MAAM,eAAe,+CAA4B,CAAC;AAClD,QAAA,MAAM,kBAAkB,+CAAoC,CAAC;AAC7D,QAAA,MAAM,kBAAkB,+CAAmB,CAAC;AAE5C,OAAO,EACN,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,eAAe,GACf,CAAC;AAEF,YAAY,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/formkit/index.ts"],"names":[],"mappings":"AAUA,QAAA,MAAM,iBAAiB,+CAAmC,CAAC;AAC3D,QAAA,MAAM,YAAY,+CAA4B,CAAC;AAC/C,QAAA,MAAM,gBAAgB,+CAAgC,CAAC;AACvD,QAAA,MAAM,eAAe,+CAA8B,CAAC;AACpD,QAAA,MAAM,iBAAiB,+CAAsB,CAAC;AAC9C,QAAA,MAAM,eAAe,+CAEnB,CAAC;AACH,QAAA,MAAM,kBAAkB,+CAAoC,CAAC;AAC7D,QAAA,MAAM,kBAAkB,+CAAmB,CAAC;AAE5C,OAAO,EACN,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,eAAe,GACf,CAAC;AAEF,YAAY,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.cjs

@@ -14982,7 +14982,7 @@ const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-4ac29f1d"]]);
+const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-3941cced"]]);
 const _hoisted_1$R = { class: "comments-wrap" };
 const _hoisted_2$J = { class: "comment-list" };
 const _hoisted_3$D = { class: "comment-top" };
@@ -17220,7 +17220,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-5d0f75db"]]);
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-fe72d553"]]);
 const _hoisted_1$G = { class: "bagel-input" };
 const _hoisted_2$B = { class: "mt-1" };
 const _hoisted_3$x = {
@@ -18286,7 +18286,9 @@ const AddressInput = createInput(AddressArray);
 const BankDetailsInput = createInput(BankDetailsArray);
 const MiscFieldsInput = createInput(MiscFieldsBtns);
 const ToggleSwitchInput = createInput(Toggle);
-const FileUploadInput = createInput(_sfc_main$s);
+const FileUploadInput = createInput(_sfc_main$s, {
+  props: ["dragDropLabel", "browseLabel"]
+});
 const TextVariablesInput = createInput(_sfc_main$q);
 const PersonPreviewInput = createInput(_sfc_main$r);
 const _hoisted_1$z = {

package/dist/index.mjs

@@ -14980,7 +14980,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-4ac29f1d"]]);
+const TabbedLayout = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-3941cced"]]);
 const _hoisted_1$R = { class: "comments-wrap" };
 const _hoisted_2$J = { class: "comment-list" };
 const _hoisted_3$D = { class: "comment-top" };
@@ -17218,7 +17218,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-5d0f75db"]]);
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-fe72d553"]]);
 const _hoisted_1$G = { class: "bagel-input" };
 const _hoisted_2$B = { class: "mt-1" };
 const _hoisted_3$x = {
@@ -18284,7 +18284,9 @@ const AddressInput = createInput(AddressArray);
 const BankDetailsInput = createInput(BankDetailsArray);
 const MiscFieldsInput = createInput(MiscFieldsBtns);
 const ToggleSwitchInput = createInput(Toggle);
-const FileUploadInput = createInput(_sfc_main$s);
+const FileUploadInput = createInput(_sfc_main$s, {
+  props: ["dragDropLabel", "browseLabel"]
+});
 const TextVariablesInput = createInput(_sfc_main$q);
 const PersonPreviewInput = createInput(_sfc_main$r);
 const _hoisted_1$z = {

package/dist/style.css

@@ -604,20 +604,11 @@
 	flex-grow: 1;
 }
 
-.tab[data-v-4ac29f1d] {
-	text-transform: capitalize;
+.tab[data-v-3941cced] {
+  text-transform: capitalize;
 }
-
-/* .top-section {
-	grid-area: top-section;
-	font-size: 10px;
-}
-
-.detail-section {
-	grid-area: detail-section;
-} */
-.card.tabs-top[data-v-4ac29f1d] {
-	width: 99%;
+.card.tabs-top[data-v-3941cced] {
+  /* width: 99%; */
 }
 
 .comments-wrap[data-v-2eead7c8] {
@@ -989,14 +980,14 @@ th[data-v-fb5b163a] {
 	display: none;
 } */
 .files-wrapper {
-  /* flex-direction: column;
+	/* flex-direction: column;
 	border-radius: 10px; */
-  /*overflow: hidden;*/
-  /* min-height: 100px;
+	/*overflow: hidden;*/
+	/* min-height: 100px;
 	font-size: var(--input-font-size); */
 }
 .drop-zone {
-  /* background-color: var(--bgl-bg);
+	/* background-color: var(--bgl-bg);
 	height: 100%;
 	width: 100%;
 	flex-grow: 1;
@@ -1014,11 +1005,11 @@ th[data-v-fb5b163a] {
 	color: var(--input-color); */
 }
 .drop-zone:hover {
-  /* color: var(--bgl-primary);
+	/* color: var(--bgl-primary);
 	outline: dashed 1px var(--bgl-primary-tint); */
 }
 .drop-circle {
-  /* pointer-events: none;
+	/* pointer-events: none;
 	position: absolute;
 	width: 100px;
 	height: 100px;
@@ -1038,7 +1029,7 @@ th[data-v-fb5b163a] {
     transition: transform 0.2s ease-in-out;
 } */
 .load-file-bar {
-  /* display: flex;
+	/* display: flex;
 	align-items: center;
 	justify-content: space-between;
 	background: var(--bgl-white);
@@ -1051,15 +1042,15 @@ th[data-v-fb5b163a] {
 	white-space: nowrap; */
 }
 .load-file-bar p {
-  /* width: calc(100% - 40px);
+	/* width: calc(100% - 40px);
 	overflow: hidden;
 	text-overflow: ellipsis; */
 }
 .load-file-bar span {
-  /* font-size: 10px; */
+	/* font-size: 10px; */
 }
 .pie {
-  /* width: 30px;
+	/* width: 30px;
 	height: 30px;
 	position: relative;
 	display: flex;
@@ -1097,7 +1088,6 @@ th[data-v-fb5b163a] {
 .pop-leave-to {
 	scale: 0;
 } */
-
 /* .group-wrap * {
   outline: 1px solid red;
 } */
@@ -1258,13 +1248,13 @@ th[data-v-fb5b163a] {
 }
 }
 
-.primary-checkbox input[data-v-5d0f75db] {
+.primary-checkbox input[data-v-fe72d553] {
   display: none;
 }
-.primary-checkbox[data-v-5d0f75db] {
+.primary-checkbox[data-v-fe72d553] {
   margin-top: 8px;
 }
-.primary-checkbox span[data-v-5d0f75db] {
+.primary-checkbox span[data-v-fe72d553] {
   display: flex;
   padding-top: 1px;
   align-items: center;
@@ -1273,19 +1263,19 @@ th[data-v-fb5b163a] {
   border-radius: 100%;
   width: 26px;
   height: 26px;
-  background: white;
+  background: var(--bgl-white);
   border: 4px solid var(--bgl-gray-light);
   cursor: pointer;
   transition: var(--bgl-transition);
   user-select: none;
 }
-.primary-checkbox span[data-v-5d0f75db]:hover {
+.primary-checkbox span[data-v-fe72d553]:hover {
   filter: brightness(90%);
 }
-.primary-checkbox span[data-v-5d0f75db]:active {
+.primary-checkbox span[data-v-fe72d553]:active {
   filter: brightness(80%);
 }
-.primary-checkbox input:checked + span[data-v-5d0f75db] {
+.primary-checkbox input:checked + span[data-v-fe72d553] {
   background: var(--bgl-primary);
   border: none;
 }
@@ -2771,13 +2761,6 @@ select {
     padding: 0;
     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);
 }
@@ -2916,7 +2899,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;
 }
@@ -3221,6 +3207,7 @@ h6 {}
   margin-top: 0;
   margin-bottom: 20px;
   width: 100%;
+  padding-inline-end: 40px;
 }
 .modal-footer {
   gap: 1rem;
@@ -3525,6 +3512,10 @@ body {
   padding-top: 1rem;
   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);
@@ -3668,14 +3659,17 @@ body {
   }
 }
 [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;
@@ -3684,32 +3678,75 @@ body {
   --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"] .dropdown-project-body {
+  color: var(--bgl-black-tint) !important;
 }
-[theme="dark"]input::-webkit-calendar-picker-indicator {
+/* 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;
+}
 :root {
     --transition-ease-in: cubic-bezier(0.1, 0.5, 0.33, 1);
     --transition-ease-out: cubic-bezier(1, 0.33, 0.5, 0.1);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.162",
+  "version": "0.0.168",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -51,7 +51,7 @@
     "./vite.config.ts"
   ],
   "dependencies": {
-    "vue": "^3.3.10"
+    "vue": "^3.3.11"
   },
   "devDependencies": {
     "@vue-macros/reactivity-transform": "^0.4.0"

package/src/components/FileUploader.vue

@@ -1,43 +1,51 @@
 <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>
+	<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">
@@ -53,89 +61,90 @@ const fileInputEl = ref<HTMLInputElement>();
 const circleTop = ref("0");
 const circleLeft = ref("0");
 const files = ref<
-  {
-    progress: string;
-    uploading: boolean;
-    uid: string;
-    file: File;
-  }[]
+	{
+		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",
-  }
+	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();
+	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;
-  }
+	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);
+	const filesToAdd: FileList = (e.target as any).files;
+	addFiles(filesToAdd);
 }
 
 function preventDefaults(e: Event) {
-  e.preventDefault();
+	e.preventDefault();
 }
 
 function hideCircle(e: DragEvent) {
-  console.log({ e });
+	console.log({ e });
 
-  draggingOver.value = false;
+	draggingOver.value = false;
 }
 
 const events = ["dragenter", "dragover", "dragleave", "drop"];
 
 onMounted(() => {
-  events.forEach((event) => {
-    document.addEventListener(event, preventDefaults);
-  });
-  document.addEventListener("dragover", onDragOver);
+	events.forEach((event) => {
+		document.addEventListener(event, preventDefaults);
+	});
+	document.addEventListener("dragover", onDragOver);
 });
 
 onUnmounted(() => {
-  document.removeEventListener("dragover", onDragOver);
-  events.forEach((event) => {
-    document.removeEventListener(event, preventDefaults);
-  });
+	document.removeEventListener("dragover", onDragOver);
+	events.forEach((event) => {
+		document.removeEventListener(event, preventDefaults);
+	});
 });
 
 /**
@@ -143,16 +152,16 @@ onUnmounted(() => {
  */
 
 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();
+	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();
 }
 
 /**
@@ -167,10 +176,10 @@ const emit = defineEmits(["complete", "done"]);
  */
 
 function uploadFiles() {
-  files.value.forEach((item) => {
-    item.uploading = true;
-    /// TODO upload file
-  });
+	files.value.forEach((item) => {
+		item.uploading = true;
+		/// TODO upload file
+	});
 }
 
 // function updateProgress(e: ProgressEvent, uid: string) {
@@ -194,14 +203,14 @@ function uploadFiles() {
 // }
 
 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);
-  }
+	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>
@@ -227,15 +236,15 @@ async function onDrop(e: DragEvent) {
 } */
 
 .files-wrapper {
-  /* flex-direction: column;
+	/* flex-direction: column;
 	border-radius: 10px; */
-  /*overflow: hidden;*/
-  /* min-height: 100px;
+	/*overflow: hidden;*/
+	/* min-height: 100px;
 	font-size: var(--input-font-size); */
 }
 
 .drop-zone {
-  /* background-color: var(--bgl-bg);
+	/* background-color: var(--bgl-bg);
 	height: 100%;
 	width: 100%;
 	flex-grow: 1;
@@ -254,12 +263,12 @@ async function onDrop(e: DragEvent) {
 }
 
 .drop-zone:hover {
-  /* color: var(--bgl-primary);
+	/* color: var(--bgl-primary);
 	outline: dashed 1px var(--bgl-primary-tint); */
 }
 
 .drop-circle {
-  /* pointer-events: none;
+	/* pointer-events: none;
 	position: absolute;
 	width: 100px;
 	height: 100px;
@@ -279,7 +288,7 @@ async function onDrop(e: DragEvent) {
     transition: transform 0.2s ease-in-out;
 } */
 .load-file-bar {
-  /* display: flex;
+	/* display: flex;
 	align-items: center;
 	justify-content: space-between;
 	background: var(--bgl-white);
@@ -293,17 +302,17 @@ async function onDrop(e: DragEvent) {
 }
 
 .load-file-bar p {
-  /* width: calc(100% - 40px);
+	/* width: calc(100% - 40px);
 	overflow: hidden;
 	text-overflow: ellipsis; */
 }
 
 .load-file-bar span {
-  /* font-size: 10px; */
+	/* font-size: 10px; */
 }
 
 .pie {
-  /* width: 30px;
+	/* width: 30px;
 	height: 30px;
 	position: relative;
 	display: flex;
@@ -341,5 +350,4 @@ async function onDrop(e: DragEvent) {
 .pop-enter-from,
 .pop-leave-to {
 	scale: 0;
-} */
-</style>
+} */</style>

package/src/components/TabbedLayout.vue

@@ -1,83 +1,74 @@
 <template>
-	<div class="h-100 grid list-view gap-3">
-		<div class="card tabs-top">
-			<slot name="top-section" />
-			<div class="tabs grid auto-flow-columns fit-content">
-				<div
-					v-for="tab in tabs"
-					:class="{
-						active:
-							tab === activeTab ||
-							tab === router.currentRoute.value.path.split('/').slice(-1)[0],
-					}"
-					class="tab"
-					:key="tab"
-					@click="changeTab(tab)"
-				>
-					{{ tab }}
-				</div>
-			</div>
-		</div>
-		<!-- <TransitionRouterView v-if="baseRoute" /> -->
-		<div
-			class="list-content"
-			v-for="tab in tabs.filter((item) => item === activeTab)"
-			:key="tab"
-		>
-			<slot
-				:name="tab"
-				:key="tab"
-			/>
-		</div>
-	</div>
+  <div class="h-100 grid list-view gap-3">
+    <div class="card tabs-top">
+      <slot name="top-section" />
+      <div class="tabs grid auto-flow-columns fit-content">
+        <div
+          v-for="tab in tabs"
+          :class="{
+            active:
+              tab === activeTab ||
+              tab === router.currentRoute.value.path.split('/').slice(-1)[0],
+          }"
+          class="tab"
+          :key="tab"
+          @click="changeTab(tab)"
+        >
+          {{ tab }}
+        </div>
+      </div>
+    </div>
+    <!-- <TransitionRouterView v-if="baseRoute" /> -->
+    <div
+      class="list-content"
+      v-for="tab in tabs.filter((item) => item === activeTab)"
+      :key="tab"
+    >
+      <slot :name="tab" :key="tab" />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue';
-import type { Router } from 'vue-router';
+import { onMounted } from "vue";
+import type { Router } from "vue-router";
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);
 
 let activeTab = $ref<string>();
 const props = defineProps<{
-	title?: string;
-	tabs: string[];
-	modelValue?: string;
-	router: Router
+  title?: string;
+  tabs: string[];
+  modelValue?: string;
+  router: Router;
 }>();
 
 function changeTab(tab: string) {
-	const { router } = props;
-	activeTab = tab;
-	void router.push({
-		path: router.currentRoute.value.path,
-		query: { ...router.currentRoute.value.query, t: tab },
-		hash: router.currentRoute.value.hash,
-	});
-	emit('update:modelValue', activeTab);
+  const { router } = props;
+  activeTab = tab;
+  void router.push({
+    path: router.currentRoute.value.path,
+    query: { ...router.currentRoute.value.query, t: tab },
+    hash: router.currentRoute.value.hash,
+  });
+  emit("update:modelValue", activeTab);
 }
 
 onMounted(() => {
-	const firstTab = props.modelValue || props.router.currentRoute.value.query.t || props.tabs[0];
-	activeTab = firstTab as string;
+  const firstTab =
+    props.modelValue ||
+    props.router.currentRoute.value.query.t ||
+    props.tabs[0];
+  activeTab = firstTab as string;
 });
 </script>
 
 <style scoped>
 .tab {
-	text-transform: capitalize;
+  text-transform: capitalize;
 }
 
-/* .top-section {
-	grid-area: top-section;
-	font-size: 10px;
-}
-
-.detail-section {
-	grid-area: detail-section;
-} */
 .card.tabs-top {
-	width: 99%;
-
+  /* width: 99%; */
 }
 </style>

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

@@ -52,7 +52,7 @@ watch(
   border-radius: 100%;
   width: 26px;
   height: 26px;
-  background: white;
+  background: var(--bgl-white);
   border: 4px solid var(--bgl-gray-light);
   cursor: pointer;
   transition: var(--bgl-transition);

package/src/components/formkit/index.ts

@@ -13,7 +13,9 @@ const AddressInput = createInput(AddressArray);
 const BankDetailsInput = createInput(BankDetailsArray);
 const MiscFieldsInput = createInput(MiscFieldsBtns);
 const ToggleSwitchInput = createInput(Toggle);
-const FileUploadInput = createInput(FileUploader);
+const FileUploadInput = createInput(FileUploader, {
+	props:	['dragDropLabel', 'browseLabel'],
+});
 const TextVariablesInput = createInput(TextVariableExamples);
 const PersonPreviewInput = createInput(PPV);
 

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);