@bagelink/vue 0.0.138 → 0.0.142

package/dist/style.css

@@ -748,11 +748,11 @@
 	border-radius: var(--btn-border-radius);
 }
 
-.modal-title[data-v-665350cb] {
+.modal-title[data-v-ca1b8501] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-665350cb] {
+.modal-title[data-v-ca1b8501] {
 		margin-top: 1rem;
 }
 }
@@ -1159,34 +1159,34 @@ th[data-v-fa7146ce] {
 	border: none;
 }
 
-.bglform-contact[data-v-33e63930] {
+.bglform-contact[data-v-0533667e] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 	max-width: 700px;
 	position: relative;
 }
-.bglform-contact-label[data-v-33e63930] {
+.bglform-contact-label[data-v-0533667e] {
 	flex-basis: 140px;
 }
-.bglform-contact input[type='checkbox'][data-v-33e63930] {
+.bglform-contact input[type='checkbox'][data-v-0533667e] {
 	width: 30px;
 	min-width: 0;
 }
-.light.thin.btn-txt.btn[data-v-33e63930] {
+.light.thin.btn-txt.btn[data-v-0533667e] {
 	padding-left: calc(var(--btn-padding) / 4);
 	padding-right: calc(var(--btn-padding) / 4);
 }
-.add-btn[data-v-33e63930] {
+.add-btn[data-v-0533667e] {
 	display: flex;
 	gap: 0.5rem;
 	align-items: center;
 	margin-inline-start: 1rem;
 }
-.add-btn[data-v-33e63930]:active {
+.add-btn[data-v-0533667e]:active {
 	background: none !important;
 }
-.add-btn[data-v-33e63930]::before {
+.add-btn[data-v-0533667e]::before {
 	content: '+';
 	font-size: 10px;
 	background: var(--bgl-blue-light);
@@ -1198,12 +1198,12 @@ th[data-v-fa7146ce] {
 	justify-content: center;
 	color: var(--bgl-blue);
 }
-.add-btn[data-v-33e63930]:hover::before {
+.add-btn[data-v-0533667e]:hover::before {
 	background: var(--bgl-blue);
 	color: var(--bgl-white);
 }
 @media screen and (max-width: 910px) {
-.bglform-contact-label[data-v-33e63930] {
+.bglform-contact-label[data-v-0533667e] {
 		min-width: 0;
 }
 }
@@ -1220,45 +1220,45 @@ th[data-v-fa7146ce] {
 	backdrop-filter: blur(1px);
 }
 
-.bglform-contact[data-v-0b835e6e] {
+.bglform-contact[data-v-98a4f943] {
 	display: flex;
 	gap: 0.5rem;
 	max-width: 700px;
 	position: relative;
 }
-.bglform-contact-label[data-v-0b835e6e] {
+.bglform-contact-label[data-v-98a4f943] {
 	flex-basis: 140px;
 }
-.bglform-contact-address[data-v-0b835e6e] {
+.bglform-contact-address[data-v-98a4f943] {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
-.bglform-contact input[type='checkbox'][data-v-0b835e6e] {
+.bglform-contact input[type='checkbox'][data-v-98a4f943] {
 	width: 30px;
 	min-width: 0;
 }
-.light.thin.btn-txt.btn[data-v-0b835e6e] {
+.light.thin.btn-txt.btn[data-v-98a4f943] {
 	padding-left: calc(var(--btn-padding) / 4);
 	padding-right: calc(var(--btn-padding) / 4);
 }
-.bglform-address-del[data-v-0b835e6e] {
+.bglform-address-del[data-v-98a4f943] {
 	margin-top: 6px;
 }
-.bglform-contact-address-flex[data-v-0b835e6e] {
+.bglform-contact-address-flex[data-v-98a4f943] {
 	display: flex;
 	gap: 0.5rem;
 }
-.add-btn[data-v-0b835e6e] {
+.add-btn[data-v-98a4f943] {
 	display: flex;
 	gap: 0.5rem;
 	align-items: center;
 	margin-inline-start: 1rem;
 }
-.add-btn[data-v-0b835e6e]:active {
+.add-btn[data-v-98a4f943]:active {
 	background: none !important;
 }
-.add-btn[data-v-0b835e6e]::before {
+.add-btn[data-v-98a4f943]::before {
 	content: '+';
 	font-size: 10px;
 	background: var(--bgl-blue-light);
@@ -1270,15 +1270,15 @@ th[data-v-fa7146ce] {
 	justify-content: center;
 	color: var(--bgl-blue);
 }
-.add-btn[data-v-0b835e6e]:hover::before {
+.add-btn[data-v-98a4f943]:hover::before {
 	background: var(--bgl-blue);
 	color: var(--bgl-white);
 }
 @media screen and (max-width: 910px) {
-.bglform-contact-address-flex[data-v-0b835e6e] {
+.bglform-contact-address-flex[data-v-98a4f943] {
 		flex-wrap: wrap;
 }
-.bglform-contact-label[data-v-0b835e6e] {
+.bglform-contact-label[data-v-98a4f943] {
 		min-width: 0;
 }
 }
@@ -1295,45 +1295,45 @@ th[data-v-fa7146ce] {
 	backdrop-filter: blur(1px);
 }
 
-.bglform-contact[data-v-60b0c498] {
+.bglform-contact[data-v-0928eb22] {
 	display: flex;
 	gap: 0.5rem;
 	max-width: 700px;
 	position: relative;
 }
-.bglform-contact-label[data-v-60b0c498] {
+.bglform-contact-label[data-v-0928eb22] {
 	flex-basis: 140px;
 }
-.bglform-contact-address[data-v-60b0c498] {
+.bglform-contact-address[data-v-0928eb22] {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
-.bglform-contact input[type='checkbox'][data-v-60b0c498] {
+.bglform-contact input[type='checkbox'][data-v-0928eb22] {
 	width: 30px;
 	min-width: 0;
 }
-.light.thin.btn-txt.btn[data-v-60b0c498] {
+.light.thin.btn-txt.btn[data-v-0928eb22] {
 	padding-left: calc(var(--btn-padding) / 4);
 	padding-right: calc(var(--btn-padding) / 4);
 }
-.bglform-address-del[data-v-60b0c498] {
+.bglform-address-del[data-v-0928eb22] {
 	margin-top: 6px;
 }
-.bglform-contact-address-flex[data-v-60b0c498] {
+.bglform-contact-address-flex[data-v-0928eb22] {
 	display: flex;
 	gap: 0.5rem;
 }
-.add-btn[data-v-60b0c498] {
+.add-btn[data-v-0928eb22] {
 	display: flex;
 	gap: 0.5rem;
 	align-items: center;
 	margin-inline-start: 1rem;
 }
-.add-btn[data-v-60b0c498]:active {
+.add-btn[data-v-0928eb22]:active {
 	background: none !important;
 }
-.add-btn[data-v-60b0c498]::before {
+.add-btn[data-v-0928eb22]::before {
 	content: '+';
 	font-size: 10px;
 	background: var(--bgl-blue-light);
@@ -1345,15 +1345,15 @@ th[data-v-fa7146ce] {
 	justify-content: center;
 	color: var(--bgl-blue);
 }
-.add-btn[data-v-60b0c498]:hover::before {
+.add-btn[data-v-0928eb22]:hover::before {
 	background: var(--bgl-blue);
 	color: var(--bgl-white);
 }
 @media screen and (max-width: 910px) {
-.bglform-contact-address-flex[data-v-60b0c498] {
+.bglform-contact-address-flex[data-v-0928eb22] {
 		flex-wrap: wrap;
 }
-.bglform-contact-label[data-v-60b0c498] {
+.bglform-contact-label[data-v-0928eb22] {
 		min-width: 0;
 }
 }

package/dist/utils/index.d.ts

@@ -5,5 +5,6 @@ export declare function computeFields(modelValue: Record<string, any>): BagelFie
 export declare const copyText: (text: string, cb?: ((msg: string) => void) | undefined) => Promise<void>;
 export declare const useFormkit: () => unknown;
 export declare const initials: (...strArr: string[]) => string;
+export declare function useEscape(event: KeyboardEvent, closeModel: () => void): void;
 export { formatString } from './strings';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,QAAS,MAAM,WAG3B,CAAC;AAEZ,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,UAAU,EAAE,CAmB3E;AAED,eAAO,MAAM,QAAQ,SACd,MAAM,cAED,MAAM,KAAK,IAAI,+BAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,eAGtB,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAAiD,CAAC;AAE9F,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,QAAS,MAAM,WAG3B,CAAC;AAEZ,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,UAAU,EAAE,CAmB3E;AAED,eAAO,MAAM,QAAQ,SACd,MAAM,cAED,MAAM,KAAK,IAAI,+BAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,eAGtB,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAAiD,CAAC;AAE9F,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.138",
+  "version": "0.0.142",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -51,7 +51,7 @@
     "./vite.config.ts"
   ],
   "dependencies": {
-    "vue": "^3.3.8"
+    "vue": "^3.3.9"
   },
   "devDependencies": {
     "@vue-macros/reactivity-transform": "^0.4.0"

package/src/components/FormSchema.vue

@@ -43,7 +43,7 @@ const props = withDefaults(defineProps<{
 	// eslint-disable-next-line no-unused-vars
 	onDelete?: ((id: string) => void);
 	// eslint-disable-next-line no-unused-vars
-	i18nT: (key: string) => string;
+	i18nT?: (key: string) => string;
 }>(), {
 	i18nT: (key: string) => key,
 });

package/src/components/Modal.vue

@@ -31,8 +31,8 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import { type BtnOptions, Btn } from '@bagelink/vue';
+import { onMounted, onUnmounted } from 'vue';
+import { type BtnOptions, Btn, useEscape } from '@bagelink/vue';
 import '../styles/modal.css';
 
 defineProps<{
@@ -44,12 +44,6 @@ defineProps<{
 
 let isActive = $ref<boolean>(false);
 
-onMounted(() => {
-	setTimeout(() => {
-		isActive = true;
-	}, 1);
-});
-
 const emit = defineEmits(['update:isModalVisible']);
 
 const closeModal = () => {
@@ -58,4 +52,23 @@ const closeModal = () => {
 		emit('update:isModalVisible', false);
 	}, 200);
 };
+
+const escapeKeyClose = (e: KeyboardEvent) => useEscape(e, () => closeModal());
+
+onMounted(() => {
+	setTimeout(() => {
+		isActive = true;
+	}, 1);
+
+	document.addEventListener(
+		'keydown',
+		escapeKeyClose,
+	);
+});
+onUnmounted(() => {
+	document.removeEventListener(
+		'keydown',
+		escapeKeyClose,
+	);
+});
 </script>

package/src/components/ModalForm.vue

@@ -34,8 +34,10 @@
 
 <script lang="ts" setup>
 import { type FormKitSchemaDefinition } from '@formkit/core';
-import { onMounted } from 'vue';
-import { Btn, FormSchema, BtnOptions } from '@bagelink/vue';
+import { onMounted, onUnmounted } from 'vue';
+import {
+	Btn, FormSchema, BtnOptions, useEscape,
+} from '@bagelink/vue';
 import '../styles/modal.css';
 
 // import { BagelField } from '@bagelink/vue';
@@ -62,12 +64,6 @@ const computedFormSchema = $computed(() => {
 
 let isActive = $ref<boolean>(false);
 
-onMounted(() => {
-	setTimeout(() => {
-		isActive = true;
-	}, 1);
-});
-
 const emit = defineEmits(['update:isModalVisible', 'update:modelValue']);
 const handleEmit = (value: any) => {
 	emit('update:modelValue', value);
@@ -93,6 +89,25 @@ const runDelete = () => {
 	props.onDelete?.(props.modelValue?.id);
 	closeModal();
 };
+
+const escapeKeyClose = (e: KeyboardEvent) => useEscape(e, () => closeModal());
+
+onMounted(() => {
+	setTimeout(() => {
+		isActive = true;
+	}, 1);
+
+	document.addEventListener(
+		'keydown',
+		escapeKeyClose,
+	);
+});
+onUnmounted(() => {
+	document.removeEventListener(
+		'keydown',
+		escapeKeyClose,
+	);
+});
 </script>
 
 <style scoped>

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[]>([]);