@bagelink/vue 0.0.236-beta.0 → 0.0.237

package/src/components/ModalBglForm.vue

@@ -1,106 +0,0 @@
-<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"
-				v-model="formData"
-				@submit="runSubmit"
-				:schema="computedFormSchema"
-			/>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import {
-	Btn, BtnOptions, useEscape, BagelForm, type BglFormSchemaT,
-} from '@bagelink/vue';
-import '../styles/modal.css';
-
-const props = defineProps<{
-	side?: boolean;
-	title?: string;
-	dismissable?: boolean;
-	actions?: BtnOptions[];
-	schema: BglFormSchemaT | (() => BglFormSchemaT);
-	// 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 formData = defineModel<Record<string, any>>('modelValue', { default: {} });
-
-const emit = defineEmits(['update:isModalVisible']);
-
-const closeModal = () => {
-	isActive = false;
-	setTimeout(() => {
-		emit('update:isModalVisible', false);
-	}, 200);
-};
-
-const runSubmit = async () => {
-	try {
-		await props.onSubmit?.(formData.value);
-		closeModal();
-	} catch (err) {
-		console.error(err);
-	}
-};
-
-const runDelete = () => {
-	props.onDelete?.(formData.value?.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>