@bagelink/vue 0.0.160 → 0.0.162

package/src/components/formkit/BankDetailsArray.vue

@@ -1,273 +1,250 @@
 <template>
-	<div class="bagel-input">
-		<div class="mt-1">
-			<div
-				class="bglform-contact mb-3"
-				v-for="(bank_account, 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(bank_account.id)"
-					>
-						{{ formPlaceholders?.delete }}
-					</Btn>
-					<Btn
-						thin
-						@click="deleteCandidate = -1"
-					>
-						{{ formPlaceholders?.cancel }}
-					</Btn>
-				</div>
-				<Checkbox
-					v-model="bank_account.primary"
-					@update:model-value="($event) => primaryHandler(i, $event)"
-				/>
-				<input
-					class="bglform-contact-label"
-					v-model="bank_account.label"
-					type="text"
-					:placeholder="formPlaceholders?.label"
-				>
-				<div class="bglform-contact-address">
-					<input
-						v-model="bank_account.bank_name"
-						:placeholder="formPlaceholders?.bankName"
-						type="text"
-						required
-					>
-					<div class="bglform-contact-address-flex">
-						<input
-							v-model="bank_account.branch"
-							:placeholder="formPlaceholders?.bankBranch"
-							type="text"
-							required
-						>
-						<input
-							v-model="bank_account.account_number"
-							:placeholder="formPlaceholders?.bankAccount"
-							type="text"
-							required
-						>
-					</div>
-					<div class="grid gap-2">
-						<input
-							v-model="bank_account.bank_account_holder"
-							:placeholder="formPlaceholders?.bankAccountHolder"
-							type="text"
-							required
-						>
-						<input
-							v-model="bank_account.bank_account_holder_id"
-							:placeholder="formPlaceholders?.bankAccountHolderID"
-							type="text"
-						>
-						<input
-							v-model="bank_account.iban"
-							placeholder="IBAN"
-							type="text"
-						>
-						<input
-							v-model="bank_account.swift"
-							placeholder="SWIFT"
-							type="text"
-						>
-						<input
-							v-model="bank_account.bank_address"
-							:placeholder="formPlaceholders?.bankAddress"
-							type="text"
-						>
-					</div>
-				</div>
-				<div class="bglform-address-del">
-					<Btn
-						thin
-						@click="deleteCandidate = i"
-						icon="delete"
-						color="gray"
-					/>
-				</div>
-			</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-3"
+        v-for="(bank_account, 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(bank_account.id)">
+            {{ formPlaceholders?.delete }}
+          </Btn>
+          <Btn thin @click="deleteCandidate = -1">
+            {{ formPlaceholders?.cancel }}
+          </Btn>
+        </div>
+        <Checkbox
+          v-model="bank_account.primary"
+          @update:model-value="($event) => primaryHandler(i, $event)"
+        />
+        <input
+          class="bglform-contact-label"
+          v-model="bank_account.label"
+          type="text"
+          :placeholder="formPlaceholders?.label"
+        />
+        <div class="bglform-contact-address">
+          <input
+            v-model="bank_account.bank_name"
+            :placeholder="formPlaceholders?.bankName"
+            type="text"
+            required
+          />
+          <div class="bglform-contact-address-flex">
+            <input
+              v-model="bank_account.branch"
+              :placeholder="formPlaceholders?.bankBranch"
+              type="text"
+              required
+            />
+            <input
+              v-model="bank_account.account_number"
+              :placeholder="formPlaceholders?.bankAccount"
+              type="text"
+              required
+            />
+          </div>
+          <div class="grid gap-2">
+            <input
+              v-model="bank_account.bank_account_holder"
+              :placeholder="formPlaceholders?.bankAccountHolder"
+              type="text"
+              required
+            />
+            <input
+              v-model="bank_account.bank_account_holder_id"
+              :placeholder="formPlaceholders?.bankAccountHolderID"
+              type="text"
+            />
+            <input v-model="bank_account.iban" placeholder="IBAN" type="text" />
+            <input
+              v-model="bank_account.swift"
+              placeholder="SWIFT"
+              type="text"
+            />
+            <input
+              v-model="bank_account.bank_address"
+              :placeholder="formPlaceholders?.bankAddress"
+              type="text"
+            />
+          </div>
+        </div>
+        <div class="bglform-address-del">
+          <Btn thin @click="deleteCandidate = i" icon="delete" color="gray" />
+        </div>
+      </div>
+      <Btn class="add-btn" color="blue" 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 BankDetailsContext {
-	label?: string;
-	id?: string;
-	value: any[];
-	node: Record<string, any>;
-	attrs: {
-		formPlaceholders?: {
-			sure?: string;
-			delete?: string;
-			cancel?: string;
-			label?: string;
-			bankName?: string;
-			bankBranch?: string;
-			bankAccount?: string;
-			bankAccountHolder?: string;
-			bankAccountHolderID?: string;
-			bankAddress?: string;
-			add?: string;
-		};
-	};
+  label?: string;
+  id?: string;
+  value: any[];
+  node: Record<string, any>;
+  attrs: {
+    formPlaceholders?: {
+      sure?: string;
+      delete?: string;
+      cancel?: string;
+      label?: string;
+      bankName?: string;
+      bankBranch?: string;
+      bankAccount?: string;
+      bankAccountHolder?: string;
+      bankAccountHolderID?: string;
+      bankAddress?: string;
+      add?: string;
+    };
+  };
 }
 const bagel = useBagel();
 
 const props = defineProps<{
-	context: BankDetailsContext;
+  context: BankDetailsContext;
 }>();
-const formPlaceholders = $computed(() => props.context?.attrs?.formPlaceholders);
+const formPlaceholders = $computed(
+  () => 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) => {
-	await bagel.delete(`/person/contact/${id}`);
-	const index = val.findIndex((v) => v.id === id);
-	deleteCandidate = -1;
-	del(index);
+  await bagel.delete(`/person/contact/${id}`);
+  const index = val.findIndex((v) => v.id === id);
+  deleteCandidate = -1;
+  del(index);
 };
 
 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>
 .bglform-contact-confirm {
-	position: absolute;
-	background: rgba(255, 255, 255, 0.5);
-	height: 100%;
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 0.5rem;
-	backdrop-filter: blur(1px);
+  position: absolute;
+  background: rgba(255, 255, 255, 0.5);
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  backdrop-filter: blur(1px);
 }
 </style>
 <style scoped>
 .bglform-contact {
-	display: flex;
-	gap: 0.5rem;
-	max-width: 700px;
-	position: relative;
+  display: flex;
+  gap: 0.5rem;
+  max-width: 700px;
+  position: relative;
 }
 
 .bglform-contact-label {
-	flex-basis: 140px;
+  flex-basis: 140px;
 }
 
 .bglform-contact-address {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
-.bglform-contact input[type='checkbox'] {
-	width: 30px;
-	min-width: 0;
+.bglform-contact input[type="checkbox"] {
+  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);
 }
 
 .bglform-address-del {
-	margin-top: 6px;
+  margin-top: 6px;
 }
 
 .bglform-contact-address-flex {
-	display: flex;
-	gap: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
 }
 
 .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-blue);
+  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-blue);
-	color: var(--bgl-white);
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
 }
 
 @media screen and (max-width: 910px) {
-	.bglform-contact-address-flex {
-		flex-wrap: wrap;
-	}
+  .bglform-contact-address-flex {
+    flex-wrap: wrap;
+  }
 
-	.bglform-contact-label {
-		min-width: 0;
-	}
+  .bglform-contact-label {
+    min-width: 0;
+  }
 }
 </style>