@bagelink/vue 0.0.206 → 0.0.211

package/src/components/ModalBglForm.vue

@@ -0,0 +1,121 @@
+<template>
+	<div
+		class="bg-dark"
+		:class="{ 'is-side': side, 'is-active': isActive }"
+		@click="() => (dismissable ? closeModal() : '')"
+		@keydown.esc="closeModal"
+	>
+		<div
+			class="card modal"
+			@click.stop
+		>
+			<header class="tool-bar">
+				<slot name="toolbar" />
+				<Btn
+					:style="{ float: side ? 'left' : 'right' }"
+					flat
+					icon="close"
+					@click="closeModal"
+				/>
+				<h3 class="modal-title">
+					{{ title }}
+				</h3>
+			</header>
+			<BagelForm
+				:onDelete="onDelete ? runDelete : undefined"
+				:modelValue="modelValue"
+				@update:modelValue="handleEmit"
+				@submit="runSubmit"
+				:schema="computedFormSchema"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
+import {
+	Btn, BtnOptions, useEscape, BagelForm,
+} from '@bagelink/vue';
+import '../styles/modal.css';
+import { BglFormSchemaT } from 'dist';
+
+const props = defineProps<{
+	side?: boolean;
+	title?: string;
+	dismissable?: boolean;
+	actions?: BtnOptions[];
+	schema: BglFormSchemaT | (() => BglFormSchemaT);
+	modelValue?: Record<string, any>;
+	// eslint-disable-next-line no-unused-vars
+	onSubmit?: ((formData: any) => Promise<void>);
+	// eslint-disable-next-line no-unused-vars
+	onDelete?: ((id: string) => void);
+}>();
+
+const computedFormSchema = $computed(() => {
+	if (typeof props.schema === 'function') {
+		return props.schema();
+	}
+	return props.schema;
+});
+
+let isActive = $ref<boolean>(false);
+
+const emit = defineEmits(['update:isModalVisible', 'update:modelValue']);
+const handleEmit = (value: any) => {
+	emit('update:modelValue', value);
+};
+
+const closeModal = () => {
+	isActive = false;
+	setTimeout(() => {
+		emit('update:isModalVisible', false);
+	}, 200);
+};
+
+const runSubmit = async (formData: any) => {
+	try {
+		await props.onSubmit?.(formData);
+		closeModal();
+	} catch (err) {
+		console.error(err);
+	}
+};
+
+const runDelete = () => {
+	props.onDelete?.(props.modelValue?.id);
+	closeModal();
+};
+
+const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
+
+onMounted(() => {
+	setTimeout(() => {
+		isActive = true;
+	}, 1);
+
+	document.addEventListener(
+		'keydown',
+		escapeKeyClose,
+	);
+});
+onUnmounted(() => {
+	document.removeEventListener(
+		'keydown',
+		escapeKeyClose,
+	);
+});
+</script>
+
+<style scoped>
+.modal-title {
+	margin-top: 0.5rem;
+}
+
+@media screen and (max-width: 910px) {
+	.modal-title {
+		margin-top: 1rem;
+	}
+}
+</style>

package/src/components/form/index.ts

@@ -2,5 +2,6 @@ export { default as ItemRef } from './ItemRef.vue';
 export { default as MaterialIcon } from './MaterialIcon.vue';
 export { default as PlainInputField } from './PlainInputField.vue';
 export { default as BglForm } from './BglForm.vue';
+export { default as BagelForm } from './BglForm.vue';
 export { default as BglField } from './BglField.vue';
 export * from './inputs';

package/src/components/index.ts

@@ -4,6 +4,7 @@ export { default as MaterialIcon } from './MaterialIcon.vue';
 export { default as NavBar } from './NavBar.vue';
 export { default as Btn } from './Btn.vue';
 export { default as Modal } from './Modal.vue';
+export { default as ModalBglForm } from './ModalBglForm.vue';
 export { default as DropDown } from './DropDown.vue';
 export { default as ListView } from './ListView.vue';
 export { default as ListItem } from './ListItem.vue';

package/src/plugins/modal.ts

@@ -3,8 +3,9 @@ import {
 } from 'vue';
 import type { Plugin } from 'vue';
 import type { BtnOptions } from '@bagelink/vue';
-import { Modal, ModalForm } from '@bagelink/vue';
+import { Modal, ModalForm, ModalBglForm } from '@bagelink/vue';
 import type { FormKitSchemaDefinition } from '@formkit/core';
+import { BglFormSchemaT } from 'dist/types';
 
 interface ModalOptions {
 	title?: string;
@@ -22,13 +23,15 @@ interface ModalFormOptions extends ModalOptions {
 	onSubmit: (val: any) => void;
 	// eslint-disable-next-line no-unused-vars
 	onDelete?: (id: string) => void;
-	schema: FormKitSchemaDefinition;
+	schema: FormKitSchemaDefinition | BglFormSchemaT;
 }
 
 interface ModalApi {
 	// eslint-disable-next-line no-unused-vars
 	showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
 	// eslint-disable-next-line no-unused-vars
+	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => void;
+	// eslint-disable-next-line no-unused-vars
 	modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => void;
 	// eslint-disable-next-line no-unused-vars
 	hideModal: (index?: number) => void;
@@ -45,7 +48,7 @@ export const useModal = (): ModalApi => {
 
 interface ModalComponentProps {
 	componentSlots: Record<string, any>,
-	isModalForm: boolean,
+	modalType: 0 | 1 | 2,
 	modalOptions: ModalOptions | ModalFormOptions
 }
 
@@ -59,20 +62,21 @@ export const ModalPlugin: Plugin = {
 		};
 
 		const showModal = (
-			isForm: boolean,
+			modalType: 0 | 1 | 2,
 			options: ModalOptions | ModalFormOptions,
 			slots: Record<string, any> = {},
 		) => {
 			modalStack.push({
 				modalOptions: options,
-				isModalForm: isForm,
+				modalType,
 				componentSlots: slots,
 			});
 		};
 
 		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),
+			modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(1, options, slots),
+			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal(0, options, slots),
+			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(2, options, slots),
 			hideModal: (index = modalStack.length - 1) => hideModal(index),
 			// modalOptions,
 		});
@@ -85,7 +89,11 @@ export const ModalPlugin: Plugin = {
 			},
 			render() {
 				return modalStack.map((modal, index) => {
-					const renderComponent = modal.isModalForm ? ModalForm : Modal;
+					let renderComponent;
+					if (modal.modalType === 1) renderComponent = ModalForm;
+					else if (modal.modalType === 2) renderComponent = ModalBglForm;
+					else renderComponent = Modal;
+
 					return h(
 						renderComponent,
 						{

package/src/types/BagelForm.ts

@@ -14,6 +14,8 @@ export type Field<T = Record<string, any>> = {
   children?: Field<T>[];
   attrs?: Attributes<T>;
   required?: boolean;
+  hint?: string;
+  'v-if'?: string | boolean | ((val: any, row: T) => boolean);
 }
 
 export interface SelectBagelField {

package/src/types/BtnOptions.ts

@@ -12,5 +12,5 @@ export interface BtnOptions {
 	loading?: boolean;
 	role?: string;
 	value?: string;
-
+	border?: boolean;
 }