@bagelink/vue 0.0.138 → 0.0.142

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/formkit/FileUploader.vue

@@ -106,8 +106,8 @@ const files = $ref<UploadFile[]>([]);
 
 const props = withDefaults(defineProps<{
 	context: Record<string, any>;
-	dragDropLabel: string;
-	browseLabel: string;
+	dragDropLabel?: string;
+	browseLabel?: string;
 }>(), {
 	dragDropLabel: 'Drag and drop your files here',
 	browseLabel: 'or browse',

package/src/plugins/modal.ts

@@ -1,5 +1,5 @@
 import {
-	h, InjectionKey, ref, inject, defineComponent,
+	h, InjectionKey, inject, defineComponent,
 } from 'vue';
 import type { Plugin } from 'vue';
 import type { BtnOptions } from '@bagelink/vue';
@@ -51,30 +51,32 @@ interface ModalComponentProps {
 
 export const ModalPlugin: Plugin = {
 	install: (app) => {
-		const modalStack = ref<ModalComponentProps[]>([]);
+		const modalStack = $ref<ModalComponentProps[]>([]);
+
+		const hideModal = (index: number) => {
+			// console.log('hideModal', index);
+			modalStack.splice(index, 1);
+		};
+
 		const showModal = (
 			isForm: boolean,
 			options: ModalOptions | ModalFormOptions,
 			slots: Record<string, any> = {},
 		) => {
-			modalStack.value.push({
+			modalStack.push({
 				modalOptions: options,
 				isModalForm: isForm,
 				componentSlots: slots,
 			});
 		};
 
-		const hideModal = (index: number) => {
-			// console.log('hideModal', index);
-			modalStack.value.splice(index, 1);
-		};
-
 		app.provide(ModalSymbol, {
 			modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(true, options, slots),
 			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal(false, options, slots),
-			hideModal: (index = modalStack.value.length - 1) => hideModal(index),
+			hideModal: (index = modalStack.length - 1) => hideModal(index),
 			// modalOptions,
 		});
+
 		const ModalComponent = defineComponent({
 			data() {
 				return {
@@ -82,7 +84,7 @@ export const ModalPlugin: Plugin = {
 				};
 			},
 			render() {
-				return modalStack.value.map((modal, index) => {
+				return modalStack.map((modal, index) => {
 					const renderComponent = modal.isModalForm ? ModalForm : Modal;
 					return h(
 						renderComponent,

package/src/utils/index.ts

@@ -50,4 +50,10 @@ export const useFormkit = () => {
 
 export const initials = (...strArr: string[]) => strArr.map((str) => str?.charAt(0)).join('');
 
+export function useEscape(event: KeyboardEvent, closeModel: () => void) {
+	if (event.key === 'Escape') {
+		closeModel();
+	}
+}
+
 export { formatString } from './strings';