@bagelink/vue 0.0.232-beta.0 → 0.0.233-beta.0

package/src/components/formkit/BankDetailsArray.vue

@@ -1,274 +0,0 @@
-<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"
-				flat
-				thin
-				@click="val.push({})"
-			>
-				{{ formPlaceholders?.add }} {{ context?.label }}
-			</Btn>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { watch } from 'vue';
-// import type { BagelField } from '@bagelink/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;
-		};
-	};
-}
-const bagel = useBagel();
-
-const props = defineProps<{
-	context: BankDetailsContext;
-}>();
-const formPlaceholders = $computed(
-	() => props.context?.attrs?.formPlaceholders,
-);
-
-let val = $ref<any[]>([]);
-
-let deleteCandidate = $ref<number>(-1);
-
-const del = (i: number) => {
-	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);
-};
-
-const primaryHandler = (i: number, isPrimary: boolean) => {
-	if (!isPrimary) return;
-	val?.forEach((contact, index) => {
-		if (index !== i) contact.primary = false;
-	});
-};
-
-watch(
-	() => props.context?.value,
-	() => {
-		val = props.context?.value;
-	},
-	{ immediate: true },
-);
-
-watch(
-	() => 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);
-}
-</style>
-<style scoped>
-.bglform-contact {
-	display: flex;
-	gap: 0.5rem;
-	max-width: 700px;
-	position: relative;
-}
-
-.bglform-contact-label {
-	flex-basis: 140px;
-}
-
-.bglform-contact-address {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-
-.bglform-contact input[type="checkbox"] {
-	width: 30px;
-	min-width: 0;
-}
-
-.light.thin.flatBtn.btn {
-	padding-left: calc(var(--btn-padding) / 4);
-	padding-right: calc(var(--btn-padding) / 4);
-}
-
-.bglform-address-del {
-	margin-top: 6px;
-}
-
-.bglform-contact-address-flex {
-	display: flex;
-	gap: 0.5rem;
-}
-
-.add-btn {
-	display: flex;
-	gap: 0.5rem;
-	align-items: center;
-	margin-inline-start: 1rem;
-}
-
-.add-btn:active {
-	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);
-}
-
-.add-btn:hover::before {
-	background: var(--bgl-primary);
-	color: var(--bgl-white);
-}
-
-@media screen and (max-width: 910px) {
-	.bglform-contact-address-flex {
-		flex-wrap: wrap;
-	}
-
-	.bglform-contact-label {
-		min-width: 0;
-	}
-}
-</style>

package/src/components/formkit/ContactArrayFormKit.vue

@@ -1,203 +0,0 @@
-<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"
-				flat
-				thin
-				@click="val.push({})"
-			>
-				{{ formPlaceholders?.add }} {{ context?.label }}
-			</Btn>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { watch } from 'vue';
-// import type { BagelField } from '@bagelink/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;
-		};
-	};
-}
-const bagel = useBagel();
-
-const props = defineProps<{
-	context: ContactArrContext;
-}>();
-
-const formPlaceholders = $computed(
-	() => props.context?.attrs?.formPlaceholders,
-);
-
-let val = $ref<any[]>([]);
-let deleteCandidate = $ref<number>(-1);
-
-const del = (i: number) => {
-	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;
-};
-
-const primaryHandler = (i: number, isPrimary: boolean) => {
-	if (!isPrimary) return;
-	val.forEach((contact, index) => {
-		if (index !== i) contact.primary = false;
-	});
-};
-
-watch(
-	() => props.context?.value,
-	() => {
-		val = props.context?.value;
-	},
-	{ immediate: true },
-);
-
-watch(
-	() => val,
-	() => {
-		props.context?.node.input(val);
-	},
-);
-</script>
-
-<style scoped>
-.bglform-contact {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	max-width: 700px;
-	position: relative;
-}
-
-.bglform-contact-label {
-	flex-basis: 140px;
-}
-
-.bglform-contact input[type="checkbox"] {
-	width: 30px;
-	min-width: 0;
-}
-
-.light.thin.flatBtn.btn {
-	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;
-}
-
-.add-btn:active {
-	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);
-}
-
-.add-btn:hover::before {
-	background: var(--bgl-primary);
-	color: var(--bgl-white);
-}
-
-@media screen and (max-width: 910px) {
-	.bglform-contact-label {
-		min-width: 0;
-	}
-}
-</style>