@bagelink/vue 0.0.136 → 0.0.140

package/src/components/formkit/AddressArray.vue

@@ -11,20 +11,20 @@
 					v-if="deleteCandidate === i"
 				>
 					<p class="txt14">
-						{{ context?.formPlaceholders?.sure }}
+						{{ formPlaceholders?.sure }}
 					</p>
 					<Btn
 						thin
 						color="red"
 						@click="deleteContact(address.id)"
 					>
-						{{ context?.formPlaceholders?.delete }}
+						{{ formPlaceholders?.delete }}
 					</Btn>
 					<Btn
 						thin
 						@click="deleteCandidate = -1"
 					>
-						{{ context?.formPlaceholders?.cancel }}
+						{{ formPlaceholders?.cancel }}
 					</Btn>
 				</div>
 				<Checkbox
@@ -35,29 +35,29 @@
 					class="bglform-contact-label"
 					v-model="address.label"
 					type="text"
-					:placeholder="context?.formPlaceholders?.label"
+					:placeholder="formPlaceholders?.label"
 				>
 				<div class="bglform-contact-address">
 					<input
 						v-model="address.street"
-						:placeholder="context?.formPlaceholders?.street"
+						:placeholder="formPlaceholders?.street"
 						type="text"
 					>
 					<div class="bglform-contact-address-flex">
 						<input
 							v-model="address.city"
-							:placeholder="context?.formPlaceholders?.city"
+							:placeholder="formPlaceholders?.city"
 							type="text"
 						>
 						<input
 							v-model="address.postal_code"
-							:placeholder="context?.formPlaceholders?.zip"
+							:placeholder="formPlaceholders?.zip"
 							type="text"
 						>
 					</div>
 					<input
 						v-model="address.country"
-						:placeholder="context?.formPlaceholders?.country"
+						:placeholder="formPlaceholders?.country"
 						type="text"
 					>
 				</div>
@@ -77,7 +77,7 @@
 				thin
 				@click="addNew"
 			>
-				{{ context?.formPlaceholders?.add }}
+				{{ formPlaceholders?.add }}
 				{{ context?.label }}
 			</Btn>
 		</div>
@@ -92,26 +92,29 @@ import { Btn, useBagel } from '@bagelink/vue';
 import Checkbox from '../form/inputs/Checkbox.vue';
 
 export interface AddressArrContext {
-
 	label?: string;
-	formPlaceholders?: {
-		add?: string;
-		cancel?: string;
-		city?: string;
-		country?: string;
-		delete?: string;
-		label?: string;
-		sure?: string;
-		zip?: string;
-		street?: string;
+	id?: string;
+	value: any[];
+	node: Record<string, any>;
+	attrs: {
+		formPlaceholders?: {
+			add?: string;
+			cancel?: string;
+			city?: string;
+			country?: string;
+			delete?: string;
+			label?: string;
+			sure?: string;
+			zip?: string;
+			street?: string;
+		};
 	};
-	[key: string]: any;
-
 }
 const bagel = useBagel();
 const props = defineProps<{
 	context: AddressArrContext
 }>();
+const formPlaceholders = $computed(() => props.context?.attrs?.formPlaceholders);
 
 let val = $ref<any[]>([]);
 const addNew = () => {

package/src/components/formkit/BankDetailsArray.vue

@@ -11,20 +11,20 @@
 					v-if="deleteCandidate === i"
 				>
 					<p class="txt14">
-						{{ context?.formPlaceholders?.sure }}
+						{{ formPlaceholders?.sure }}
 					</p>
 					<Btn
 						thin
 						color="red"
 						@click="deleteContact(bank_account.id)"
 					>
-						{{ context?.formPlaceholders?.delete }}
+						{{ formPlaceholders?.delete }}
 					</Btn>
 					<Btn
 						thin
 						@click="deleteCandidate = -1"
 					>
-						{{ context?.formPlaceholders?.cancel }}
+						{{ formPlaceholders?.cancel }}
 					</Btn>
 				</div>
 				<Checkbox
@@ -35,25 +35,25 @@
 					class="bglform-contact-label"
 					v-model="bank_account.label"
 					type="text"
-					:placeholder="context?.formPlaceholders?.label"
+					:placeholder="formPlaceholders?.label"
 				>
 				<div class="bglform-contact-address">
 					<input
 						v-model="bank_account.bank_name"
-						:placeholder="context?.formPlaceholders?.bankName"
+						:placeholder="formPlaceholders?.bankName"
 						type="text"
 						required
 					>
 					<div class="bglform-contact-address-flex">
 						<input
 							v-model="bank_account.branch"
-							:placeholder="context?.formPlaceholders?.bankBranch"
+							:placeholder="formPlaceholders?.bankBranch"
 							type="text"
 							required
 						>
 						<input
 							v-model="bank_account.account_number"
-							:placeholder="context?.formPlaceholders?.bankAccount"
+							:placeholder="formPlaceholders?.bankAccount"
 							type="text"
 							required
 						>
@@ -61,13 +61,13 @@
 					<div class="grid gap-2">
 						<input
 							v-model="bank_account.bank_account_holder"
-							:placeholder="context?.formPlaceholders?.bankAccountHolder"
+							:placeholder="formPlaceholders?.bankAccountHolder"
 							type="text"
 							required
 						>
 						<input
 							v-model="bank_account.bank_account_holder_id"
-							:placeholder="context?.formPlaceholders?.bankAccountHolderID"
+							:placeholder="formPlaceholders?.bankAccountHolderID"
 							type="text"
 						>
 						<input
@@ -82,7 +82,7 @@
 						>
 						<input
 							v-model="bank_account.bank_address"
-							:placeholder="context?.formPlaceholders?.bankAddress"
+							:placeholder="formPlaceholders?.bankAddress"
 							type="text"
 						>
 					</div>
@@ -103,7 +103,7 @@
 				thin
 				@click="val.push({})"
 			>
-				{{ context?.formPlaceholders?.add }} {{ context?.label }}
+				{{ formPlaceholders?.add }} {{ context?.label }}
 			</Btn>
 		</div>
 	</div>
@@ -118,26 +118,31 @@ import Checkbox from '../form/inputs/Checkbox.vue';
 
 export interface BankDetailsContext {
 	label?: string;
-	formPlaceholders?: {
-		sure?: string;
-		delete?: string;
-		cancel?: string;
-		label?: string;
-		bankName?: string;
-		bankBranch?: string;
-		bankAccount?: string;
-		bankAccountHolder?: string;
-		bankAccountHolderID?: string;
-		bankAddress?: string;
-		add?: 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;
+		};
 	};
-	[key: string]: any;
 }
 const bagel = useBagel();
 
 const props = defineProps<{
 	context: BankDetailsContext;
 }>();
+const formPlaceholders = $computed(() => props.context?.attrs?.formPlaceholders);
 
 let val = $ref<any[]>([]);
 

package/src/components/formkit/ContactArrayFormKit.vue

@@ -11,20 +11,20 @@
 					v-if="deleteCandidate === i"
 				>
 					<p class="txt14">
-						{{ context?.formPlaceholders?.sure }}
+						{{ formPlaceholders?.sure }}
 					</p>
 					<Btn
 						thin
 						color="red"
 						@click="deleteContact(contact.id)"
 					>
-						{{ context?.formPlaceholders?.delete }}
+						{{ formPlaceholders?.delete }}
 					</Btn>
 					<Btn
 						thin
 						@click="deleteCandidate = -1"
 					>
-						{{ context?.formPlaceholders?.cancel }}
+						{{ formPlaceholders?.cancel }}
 					</Btn>
 				</div>
 				<Checkbox
@@ -35,18 +35,18 @@
 					class="bglform-contact-label"
 					v-model="contact.label"
 					type="text"
-					:placeholder="context?.formPlaceholders?.label"
+					:placeholder="formPlaceholders?.label"
 				>
 
 				<input
 					v-model="contact.email"
-					:placeholder="context?.formPlaceholders?.email"
+					:placeholder="formPlaceholders?.email"
 					v-if="context?.id === 'email'"
 					type="email"
 				>
 				<input
 					v-model="contact.phone"
-					:placeholder="context?.formPlaceholders?.phone"
+					:placeholder="formPlaceholders?.phone"
 					v-if="context?.id === 'phone'"
 					type="tel"
 				>
@@ -68,7 +68,7 @@
 				thin
 				@click="val.push({})"
 			>
-				{{ context?.formPlaceholders?.add }} {{ context?.label }}
+				{{ formPlaceholders?.add }} {{ context?.label }}
 			</Btn>
 		</div>
 	</div>
@@ -83,16 +83,20 @@ import Checkbox from '../form/inputs/Checkbox.vue';
 
 export interface ContactArrContext {
 	label?: string;
-	formPlaceholders?: {
-		sure?: string
-		delete?: string
-		cancel?: string
-		label?: string
-		email?: string
-		phone?: string
-		add?: 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
+		};
 	};
-	[key: string]: any;
 }
 const bagel = useBagel();
 
@@ -100,6 +104,8 @@ const props = defineProps<{
 	context: ContactArrContext
 }>();
 
+const formPlaceholders = $computed(() => props.context?.attrs?.formPlaceholders);
+
 let val = $ref<any[]>([]);
 let deleteCandidate = $ref<number>(-1);
 

package/src/components/whatsapp/form/MsgTemplate.vue

@@ -14,7 +14,7 @@
 					class="whatsapp-preview"
 					:class="{ whatsappHebrew: localWhatsappData?.language === 'he' }"
 				>
-					Preview
+					{{ previewLabel }}
 					<div class="whatsapp-msg">
 						<b>{{
 							localWhatsappData?.headerText?.replace(regex, replaceHeader)
@@ -46,11 +46,15 @@ import {
 	FooterComponent,
 } from '../interfaces';
 
-const props = defineProps<{
-	whatsappTemplateSchema: () => FormKitSchemaDefinition;
-	router: Router;
-	route: RouteLocationNormalizedLoaded;
-}>();
+const props = withDefaults(
+	defineProps<{
+		whatsappTemplateSchema: () => FormKitSchemaDefinition;
+		router: Router;
+		route: RouteLocationNormalizedLoaded;
+		previewLabel?: string;
+	}>(),
+	{ previewLabel: 'Preview' },
+);
 
 const bagel = useBagel();