@bagelink/vue 0.0.190 → 0.0.192

package/src/components/formkit/ContactArrayFormKit.vue

@@ -1,185 +1,202 @@
 <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">
-            {{ formPlaceholders?.sure }}
-          </p>
-          <Btn thin color="red" @click="deleteContact(contact.id)">
-            {{ formPlaceholders?.delete }}
-          </Btn>
-          <Btn thin @click="deleteCandidate = -1">
-            {{ formPlaceholders?.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="formPlaceholders?.label"
-        />
-
-        <input
-          v-model="contact.email"
-          :placeholder="formPlaceholders?.email"
-          v-if="context?.id === 'email'"
-          type="email"
-        />
-        <input
-          v-model="contact.phone"
-          :placeholder="formPlaceholders?.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({})">
-        {{ formPlaceholders?.add }} {{ context?.label }}
-      </Btn>
-    </div>
-  </div>
+	<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">
+						{{ formPlaceholders?.sure }}
+					</p>
+					<Btn
+						thin
+						color="red"
+						@click="deleteContact(contact.id)"
+					>
+						{{ formPlaceholders?.delete }}
+					</Btn>
+					<Btn
+						thin
+						@click="deleteCandidate = -1"
+					>
+						{{ formPlaceholders?.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="formPlaceholders?.label"
+				>
+
+				<input
+					v-model="contact.email"
+					:placeholder="formPlaceholders?.email"
+					v-if="context?.id === 'email'"
+					type="email"
+				>
+				<input
+					v-model="contact.phone"
+					:placeholder="formPlaceholders?.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"
+				flat
+				thin
+				@click="val.push({})"
+			>
+				{{ formPlaceholders?.add }} {{ context?.label }}
+			</Btn>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { watch } from "vue";
+import { watch } from 'vue';
 // import type { BagelField } from '@bagelink/vue';
 
-import { Btn, useBagel } from "@bagelink/vue";
-import Checkbox from "../form/inputs/Checkbox.vue";
+import { Btn, useBagel } from '@bagelink/vue';
+import Checkbox from '../form/inputs/Checkbox.vue';
 
 export interface ContactArrContext {
-  label?: string;
-  id?: string;
-  value: any[];
-  node: Record<string, any>;
-  attrs: {
-    formPlaceholders?: {
-      sure?: string;
-      delete?: string;
-      cancel?: string;
-      label?: string;
-      email?: string;
-      phone?: string;
-      add?: string;
-    };
-  };
+	label?: string;
+	id?: string;
+	value: any[];
+	node: Record<string, any>;
+	attrs: {
+		formPlaceholders?: {
+			sure?: string;
+			delete?: string;
+			cancel?: string;
+			label?: string;
+			email?: string;
+			phone?: string;
+			add?: string;
+		};
+	};
 }
 const bagel = useBagel();
 
 const props = defineProps<{
-  context: ContactArrContext;
+	context: ContactArrContext;
 }>();
 
 const formPlaceholders = $computed(
-  () => props.context?.attrs?.formPlaceholders
+	() => props.context?.attrs?.formPlaceholders,
 );
 
 let val = $ref<any[]>([]);
 let deleteCandidate = $ref<number>(-1);
 
 const del = (i: number) => {
-  val.splice(i, 1);
+	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;
+	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;
-  });
+	if (!isPrimary) return;
+	val.forEach((contact, index) => {
+		if (index !== i) contact.primary = false;
+	});
 };
 
 watch(
-  () => props.context?.value,
-  () => {
-    val = props.context?.value;
-  },
-  { immediate: true }
+	() => props.context?.value,
+	() => {
+		val = props.context?.value;
+	},
+	{ immediate: true },
 );
 
 watch(
-  () => val,
-  () => {
-    props.context?.node.input(val);
-  }
+	() => val,
+	() => {
+		props.context?.node.input(val);
+	},
 );
 </script>
 
 <style scoped>
 .bglform-contact {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  max-width: 700px;
-  position: relative;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	max-width: 700px;
+	position: relative;
 }
 
 .bglform-contact-label {
-  flex-basis: 140px;
+	flex-basis: 140px;
 }
 
 .bglform-contact input[type="checkbox"] {
-  width: 30px;
-  min-width: 0;
+	width: 30px;
+	min-width: 0;
 }
 
 .light.thin.btn-txt.btn {
-  padding-left: calc(var(--btn-padding) / 4);
-  padding-right: calc(var(--btn-padding) / 4);
+	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;
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	margin-inline-start: 1rem;
 }
 
 .add-btn:active {
-  background: none !important;
+	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-primary);
+	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-primary);
 }
 
 .add-btn:hover::before {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
 @media screen and (max-width: 910px) {
-  .bglform-contact-label {
-    min-width: 0;
-  }
-}
-</style>
+	.bglform-contact-label {
+		min-width: 0;
+	}
+}</style>

package/src/styles/layout.css

@@ -47,6 +47,10 @@
     row-gap: 1rem;
 }
 
+.align-items-end {
+    align-items: end;
+}
+
 .fit-content {
     width: fit-content;
     height: fit-content;
@@ -124,6 +128,10 @@
     right: 0px;
 }
 
+.position-absolute {
+    position: absolute;
+}
+
 .position-relative {
     position: relative;
 }
@@ -156,6 +164,56 @@
     width: 100%;
 }
 
+.w300,
+.w350,
+.w400,
+.w450,
+.w500,
+.w550,
+.w600,
+.w650,
+.w700 {
+    margin-left: auto;
+    margin-right: auto;
+    width: 98%;
+}
+
+.w300 {
+    max-width: 300px;
+}
+
+.w350 {
+    max-width: 350px;
+}
+
+.w400 {
+    max-width: 400px;
+}
+
+.w450 {
+    max-width: 450px;
+}
+
+.w500 {
+    max-width: 500px;
+}
+
+.w550 {
+    max-width: 550px;
+}
+
+.w600 {
+    max-width: 600px;
+}
+
+.w650 {
+    max-width: 650px;
+}
+
+.w650 {
+    max-width: 700px;
+}
+
 .gap-1 {
     gap: 0.25rem;
 }
@@ -279,6 +337,14 @@
     padding-bottom: 2rem;
 }
 
+.pb-3 {
+    padding-bottom: 3rem;
+}
+
+.pb-025 {
+    padding-bottom: 0.25rem;
+}
+
 .pt-1 {
     padding-top: 1rem;
 }
@@ -287,6 +353,14 @@
     padding-top: 2rem;
 }
 
+.pt-3 {
+    padding-top: 3rem;
+}
+
+.pt-025 {
+    padding-top: 0.25rem;
+}
+
 
 .flex {
     display: flex;
@@ -308,4 +382,13 @@
 
 .space-between {
     justify-content: space-between;
+}
+
+label,
+.label {
+    display: block;
+    font-size: var(--input-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
+    color: var(--label-color);
 }

package/src/styles/theme.css

@@ -7,6 +7,7 @@
 :root {
   --bgl-primary: #2E5BFF;
   --bgl-primary-tint: #2E5BFF80;
+  --bgl-primary-light: #eef6ff;
 
   --bgl-blue-20: rgba(46, 91, 255, 20%);
   --bgl-blue-dark: #191c30;
@@ -62,6 +63,11 @@
   line-height: 1rem;
 }
 
+::-moz-selection {
+  color: var(--bgl-white);
+  background: var(--bgl-blue-dark);
+}
+
 ::selection {
   color: var(--bgl-white);
   background: var(--bgl-blue-dark);
@@ -82,16 +88,17 @@
   text-align: center;
   font-weight: 600;
   font-size: 20px;
-  margin-top: 0;
+  margin-top: 0.5rem;
   margin-bottom: 20px;
   width: 100%;
-  padding-inline-end: 40px;
+  -webkit-padding-end: 40px;
+          padding-inline-end: 40px;
 }
 
 .modal-footer {
   gap: 1rem;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
 }
 
 .formkit-actions .formkit-wrapper {
@@ -170,7 +177,8 @@ body {
 }
 
 .login-card .forgot-password:active {
-  filter: brightness(70%);
+  -webkit-filter: brightness(70%);
+          filter: brightness(70%);
   color: var(--bgl-primary);
 }
 
@@ -191,13 +199,16 @@ body {
 }
 
 .tabs {
-  column-gap: 1rem;
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
   margin-top: 20px;
   margin-bottom: -2rem;
   border-top: 1px solid var(--border-color);
   width: calc(100% + 4rem);
-  margin-inline-start: -2rem;
-  padding-inline-start: 2rem;
+  -webkit-margin-start: -2rem;
+          margin-inline-start: -2rem;
+  -webkit-padding-start: 2rem;
+          padding-inline-start: 2rem;
   overflow: auto;
   display: flex;
 }
@@ -233,7 +244,8 @@ body {
 }
 
 .tab:active {
-  filter: brightness(70%);
+  -webkit-filter: brightness(70%);
+          filter: brightness(70%);
 }
 
 .router-tab {
@@ -259,7 +271,8 @@ body {
 }
 
 .router-tab:active {
-  filter: brightness(70%);
+  -webkit-filter: brightness(70%);
+          filter: brightness(70%);
 }
 
 .pill {
@@ -317,6 +330,8 @@ body {
 
 .list-item {
   padding: 0.5rem 1rem;
+  min-height: -webkit-fit-content;
+  min-height: -moz-fit-content;
   min-height: fit-content;
   margin: 0.25rem 0;
   border-radius: 10px;
@@ -342,7 +357,8 @@ body {
 }
 
 .list-item:active {
-  filter: var(--bgl-hover-filter);
+  -webkit-filter: var(--bgl-hover-filter);
+          filter: var(--bgl-hover-filter);
 }
 
 .entity-container {
@@ -351,10 +367,12 @@ body {
   /* grid-template-columns: 2fr 0fr; */
   grid-template-columns: minmax(300px, 1fr) 3fr;
   grid-gap: 1rem;
-  column-gap: 1rem;
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
   grid-template-rows: 1fr;
   grid-template-areas: "list-view detail-view";
   transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+  transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99), -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
   transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
 }
 
@@ -407,6 +425,7 @@ body {
   display: grid;
   height: 100%;
   overflow: hidden;
+  grid-template-rows: -webkit-max-content 1fr;
   grid-template-rows: max-content 1fr;
   gap: 1rem;
 }
@@ -428,11 +447,13 @@ body {
 .list-logo {
   width: 50px;
   aspect-ratio: 1;
-  object-fit: contain;
+  -o-object-fit: contain;
+     object-fit: contain;
   line-height: 1;
 }
 
 .list-content {
+  grid-auto-rows: -webkit-max-content;
   grid-auto-rows: max-content;
   overflow-y: auto;
 }
@@ -446,6 +467,7 @@ body {
 }
 
 .DonationsDashbored .tabs-top {
+  position: -webkit-sticky;
   position: sticky;
   padding-top: 1rem;
   inset-inline-start: 0;
@@ -480,6 +502,7 @@ body {
   grid-template-areas: "list-header""list-content";
   grid-template-columns: 1fr;
   overflow-y: auto;
+  grid-template-rows: -webkit-max-content 1fr;
   grid-template-rows: max-content 1fr;
   transition: var(--transition);
 }
@@ -558,12 +581,15 @@ body {
   }
 
   .tabs {
-    column-gap: 10px;
+    -moz-column-gap: 10px;
+         column-gap: 10px;
     margin-top: 10px;
     margin-bottom: -15px;
     box-sizing: border-box;
-    margin-inline-start: -1rem;
-    padding-inline-start: 1rem;
+    -webkit-margin-start: -1rem;
+            margin-inline-start: -1rem;
+    -webkit-padding-start: 1rem;
+            padding-inline-start: 1rem;
     max-width: calc(100vw - 2rem);
   }
 
@@ -593,6 +619,8 @@ body {
   }
 
   .detail-section {
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
     height: fit-content;
   }
 
@@ -607,6 +635,7 @@ body {
     font-size: 1.25em;
     margin-bottom: 1rem;
     font-weight: 400;
-    margin-inline-start: 0.5rem;
+    -webkit-margin-start: 0.5rem;
+            margin-inline-start: 0.5rem;
   }
 }