@bagelink/vue 0.0.322 → 0.0.335

package/src/components/form/BglForm.vue

@@ -1,23 +1,20 @@
 <template>
-	<template v-if="id">
-		<BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
-	</template>
-	<form v-else-if="(!slots.success || formStatus !== 'success')" ref="form" @submit.prevent="runSubmit">
-		<Title tag="h4" :label="label" v-if="label" />
-		<BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
-		<slot name="submit" />
-		<button @click="runSubmit">
-			Click
-		</button>
-	</form>
-	<slot  v-if="formStatus === 'success'" name="success" />
-	<slot v-if="formStatus === 'error'" name="error" :message="error" />
+  <template v-if="id">
+    <BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
+  </template>
+  <form v-else-if="(!slots.success || formStatus !== 'success')" ref="form" @submit.prevent="runSubmit">
+    <Title tag="h4" :label="label" v-if="label" />
+    <BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
+    <slot name="submit" />
+  </form>
+  <slot v-if="formStatus === 'success'" name="success" />
+  <slot v-if="formStatus === 'error'" name="error" />
 </template>
 
 <script lang="ts" setup>
 import { useSlots } from 'vue';
 import {
-	useModal, BglField, Title,
+  useModal, BglField, Title,
 } from '@bagelink/vue';
 
 import { type BglFormSchemaT } from '@bagelink/vue';
@@ -27,7 +24,7 @@ const slots = useSlots();
 const { showModal } = useModal();
 
 const props = withDefaults(
-	defineProps<{
+  defineProps<{
     label?: string;
     id?: string;
     schema: BglFormSchemaT<any>;
@@ -35,9 +32,9 @@ const props = withDefaults(
     onDelete?: ((id: string) => void);
     onSubmit?: ((data: any) => void);
   }>(),
-	{
-		modelValue: () => ({}),
-	},
+  {
+    modelValue: () => ({}),
+  },
 );
 
 const instAt = new Date();
@@ -46,15 +43,15 @@ let formData = $ref(props.modelValue);
 const emit = defineEmits(['update:modelValue', 'submit', 'dirty']);
 let isDirty = $ref(false);
 const data = $computed({
-	set: (val: any) => {
-		if (timeSinceInst() > 100) {
-			emit('dirty');
-			isDirty = true;
-		}
-		formData = val;
-		emit('update:modelValue', val);
-	},
-	get: () => props.modelValue || formData,
+  set: (val: any) => {
+    if (timeSinceInst() > 100) {
+      emit('dirty');
+      isDirty = true;
+    }
+    formData = val;
+    emit('update:modelValue', val);
+  },
+  get: () => props.modelValue || formData,
 });
 const form = $ref<HTMLFormElement>();
 
@@ -62,41 +59,40 @@ const validateForm = () => form?.reportValidity?.();
 
 const clearForm = () => Object.assign(data, {});
 
-type FormStatus = 'idle' | 'loading' | 'success' | 'error' ;
+type FormStatus = 'idle' | 'loading' | 'success' | 'error';
 
 let formStatus = $ref<FormStatus>('idle');
 
 const runSubmit = () => {
-	console.log('runSubmit');
-	try {
-		validateForm();
-		props.onSubmit(data);
-		// emit('submit', data);
-		clearForm();
-		formStatus = 'success';
-	} catch (e) {
-		formStatus = 'error';
-	}
+  try {
+    validateForm();
+    props.onSubmit?.(data);
+    // emit('submit', data);
+    clearForm();
+    formStatus = 'success';
+  } catch (e) {
+    formStatus = 'error';
+  }
 };
 
 const i18nT = (val: string) => val;
 
 const deleteItem = () => {
-	showModal(
-		{
-			class: 'small-modal',
-			title: i18nT('Are you sure?'),
-			actions: [
-				{
-					value: 'Confirm',
-					color: 'red',
-					onClick: () => props.onDelete?.(data.value.id),
-				},
-				{ value: 'Cancel', color: 'gray' },
-			],
-		},
-		{ default: i18nT('form.deleteMessage') },
-	);
+  showModal(
+    {
+      class: 'small-modal',
+      title: i18nT('Are you sure?'),
+      actions: [
+        {
+          value: 'Confirm',
+          color: 'red',
+          onClick: () => props.onDelete?.(data.value.id),
+        },
+        { value: 'Cancel', color: 'gray' },
+      ],
+    },
+    { default: i18nT('form.deleteMessage') },
+  );
 };
 
 defineExpose({ validateForm, deleteItem, isDirty });