@bagelink/vue 0.0.160 → 0.0.162

package/src/components/formkit/ContactArrayFormKit.vue

@@ -1,203 +1,185 @@
 <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" 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 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);
+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) => {
-	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;
+.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);
 }
 
 .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-label {
-		min-width: 0;
-	}
+  .bglform-contact-label {
+    min-width: 0;
+  }
 }
 </style>