@bagelink/vue 0.0.316 → 0.0.322

package/src/components/Modal.vue

@@ -1,25 +1,27 @@
 <template>
-  <div class="bg-dark" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
-    @click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
-    <Card class="modal" @click.stop>
-      <header class="tool-bar">
-        <slot name="toolbar" />
-        <Btn :style="{ float: side ? 'left' : 'right' }" flat icon="close" @click="closeModal" />
-        <Title class="modal-title" tag="h3" v-if="title" :label="title" />
-      </header>
-      <slot />
-      <footer class="modal-footer mt-3">
-        <Btn v-for="(action, i) in actions" :key="i" @click="closeModal" color="gray" v-bind="action" />
-        <slot name="footer" />
-      </footer>
-    </Card>
-  </div>
+	<div
+		class="bg-dark" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
+		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
+	>
+		<Card class="modal" @click.stop>
+			<header class="tool-bar">
+				<slot name="toolbar" />
+				<Btn :style="{ float: side ? 'left' : 'right' }" flat icon="close" @click="closeModal" />
+				<Title class="modal-title" tag="h3" v-if="title" :label="title" />
+			</header>
+			<slot />
+			<footer class="modal-footer mt-3">
+				<Btn v-for="(action, i) in actions" :key="i" @click="closeModal" color="gray" v-bind="action" />
+				<slot name="footer" />
+			</footer>
+		</Card>
+	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, watch } from 'vue';
 import {
-  type BtnOptions, Btn, useEscape, Title, Card,
+	type BtnOptions, Btn, useEscape, Title, Card,
 } from '@bagelink/vue';
 import '../styles/modal.css';
 
@@ -34,16 +36,16 @@ const props = defineProps<{
 let isVisible = $ref<boolean>(false);
 
 watch(() => props.visible, (val) => {
-  if (val === isVisible || val === undefined) return;
-  if (val) openModal();
-  else closeModal();
+	if (val === isVisible || val === undefined) return;
+	if (val) openModal();
+	else closeModal();
 }, { immediate: true });
 
 const emit = defineEmits(['update:visible']);
 
 const closeModal = () => {
-  isVisible = false;
-  setTimeout(() => emit('update:visible', false), 200);
+	isVisible = false;
+	setTimeout(() => emit('update:visible', false), 200);
 };
 
 defineExpose({ closeModal });
@@ -51,13 +53,13 @@ defineExpose({ closeModal });
 const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
 
 function openModal() {
-  setTimeout(() => isVisible = true, 1);
+	setTimeout(() => isVisible = true, 1);
 }
 
 onMounted(() => document.addEventListener('keydown', escapeKeyClose));
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', escapeKeyClose);
+	document.removeEventListener('keydown', escapeKeyClose);
 });
 </script>
 

package/src/components/NavBar.vue

@@ -1,36 +1,42 @@
 <template>
-  <div :class="{ open: isOpen, closed: !isOpen }">
-    <slot name="top" />
-    <div class="nav-expend" @click="isOpen = !isOpen" @keypress.enter="isOpen = !isOpen" role="button"
-      aria-label="Toggle Navigation" tabindex="0">
-      <MaterialIcon icon="chevron_right" class="top-arrow" />
-    </div>
-
-    <div class="full-nav">
-      <div class="nav-scroll">
-        <div class="nav-links-wrapper">
-          <component :is="link.to?'router-link':'div'" v-for="link in links" class="nav-button" :to="link.to"
-            :key="link.label" @click="link.onClick?.()">
-            <MaterialIcon :icon="link.materialIcon" />
-            <div class="tooltip">
-              {{ link.label }}
-            </div>
-          </component>
-        </div>
-      </div>
-
-      <div class="bot-buttons-wrapper">
-        <component :is="link.to?'router-link':'div'" v-for="link in footerLinks" class="nav-button" :to="link.to"
-          @click="link.onClick?.()" :key="link.label">
-          <MaterialIcon :icon="link.materialIcon" />
-          <div class="tooltip">
-            {{ link.label }}
-          </div>
-        </component>
-        <slot name="floor" />
-      </div>
-    </div>
-  </div>
+	<div :class="{ open: isOpen, closed: !isOpen }">
+		<slot name="top" />
+		<div
+			class="nav-expend" @click="isOpen = !isOpen" @keypress.enter="isOpen = !isOpen" role="button"
+			aria-label="Toggle Navigation" tabindex="0"
+		>
+			<MaterialIcon icon="chevron_right" class="top-arrow" />
+		</div>
+
+		<div class="full-nav">
+			<div class="nav-scroll">
+				<div class="nav-links-wrapper">
+					<component
+						:is="link.to?'router-link':'div'" v-for="link in links" class="nav-button" :to="link.to"
+						:key="link.label" @click="link.onClick?.()"
+					>
+						<MaterialIcon :icon="link.icon" />
+						<div class="tooltip">
+							{{ link.label }}
+						</div>
+					</component>
+				</div>
+			</div>
+
+			<div class="bot-buttons-wrapper">
+				<component
+					:is="link.to?'router-link':'div'" v-for="link in footerLinks" class="nav-button" :to="link.to"
+					@click="link.onClick?.()" :key="link.label"
+				>
+					<MaterialIcon :icon="link.icon" />
+					<div class="tooltip">
+						{{ link.label }}
+					</div>
+				</component>
+				<slot name="floor" />
+			</div>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -40,20 +46,20 @@ import { MaterialIcon } from '@bagelink/vue';
 const isOpen = $ref(true);
 
 withDefaults(
-  defineProps<{
+	defineProps<{
     footerLinks?: NavLink[];
     links?: NavLink[];
     homeIcon?: MaterialIcons;
     homeLabel?: string;
     homeTo?: string;
   }>(),
-  {
-    homeIcon: 'home',
-    homeLabel: 'Home',
-    homeTo: '/',
-    links: () => [],
-    footerLinks: () => [],
-  },
+	{
+		homeIcon: 'home',
+		homeLabel: 'Home',
+		homeTo: '/',
+		links: () => [],
+		footerLinks: () => [],
+	},
 );
 </script>
 

package/src/components/form/BglField.vue

@@ -1,73 +1,58 @@
 <template>
-	<component
-		:required="field.required"
-		v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
-		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)"
-		v-if="vIf"
-		:is="is"
-		:label="field.label"
-		:id="field.id"
-		:placeholder="field.placeholder || field.label"
-		v-model="fieldData"
-		:defaultValue="field.defaultValue"
-		:options="field.options"
-		:helptext="field.helptext"
-		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData)"
-	>
-		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
-		<BglField
-			v-model="formData"
-			v-for="(child, ii) in field.children"
-			:key="child.id || ii"
-			:field="child"
-		/>
-	</component>
+  <component :required="field.required" v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
+    :class="classify(fieldData, modelValue, field.class, field.attrs?.class)" v-if="vIf" :is="is" :label="field.label"
+    :id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData"
+    :defaultValue="field.defaultValue" :options="bindAttrs({ options: field.options }, fieldData, modelValue).options"
+    :helptext="field.helptext" @update:modelValue="($event: any) => field?.onUpdate?.($event, formData)">
+    {{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
+    <BglField v-model="formData" v-for="(child, ii) in field.children" :key="child.id || ii" :field="child" />
+  </component>
 </template>
 
 <script lang="ts" setup>
 import {
-	type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput,
+  type Field, bindAttrs, classify, ComboBox, TextInput, ToggleInput, CheckInput,
 } from '@bagelink/vue';
 
 const props = withDefaults(defineProps<{
-	field: Field
-	modelValue: Record<string, any>
+  field: Field
+  modelValue: Record<string, any>
 }>(), {
-	modelValue: () => ({}),
+  modelValue: () => ({}),
 });
 
 const is = $computed(() => {
-	if (props.field.$el === 'text') return TextInput;
-	if (props.field.$el === 'select') return SelectInput;
-	if (props.field.$el === 'toggle') return ToggleInput;
-	if (props.field.$el === 'check') return CheckInput;
-	return props.field.$el || 'div';
+  if (props.field.$el === 'text') return TextInput;
+  if (props.field.$el === 'select') return ComboBox;
+  if (props.field.$el === 'toggle') return ToggleInput;
+  if (props.field.$el === 'check') return CheckInput;
+  return props.field.$el || 'div';
 });
 
 const emit = defineEmits(['update:modelValue']);
 
 const formData = $computed({
-	get: () => props.modelValue,
-	set: (val: any) => emit('update:modelValue', val),
+  get: () => props.modelValue,
+  set: (val: any) => emit('update:modelValue', val),
 });
 
 const fieldData = $computed({
-	set: (val: any) => {
-		if (!props.field.id) return;
-		const data = { ...props.modelValue } || {};
-		data[props.field.id] = val;
-		emit('update:modelValue', data);
-	},
-	get: () => (props.field.id ? props.modelValue[props.field.id] : props.field.defaultValue || ''),
+  set: (val: any) => {
+    if (!props.field.id) return;
+    const data = { ...props.modelValue } || {};
+    data[props.field.id] = val;
+    emit('update:modelValue', data);
+  },
+  get: () => (props.field.id ? props.modelValue[props.field.id] : props.field.defaultValue || ''),
 });
 
 const vIf = $computed(() => {
-	if (props.field['v-if'] === undefined) return true;
-	if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
-	if (typeof props.field['v-if'] === 'string') return true;
-	if (typeof props.field['v-if'] === 'function') {
-		return props.field['v-if']?.(fieldData, formData);
-	}
-	return true;
+  if (props.field['v-if'] === undefined) return true;
+  if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
+  if (typeof props.field['v-if'] === 'string') return true;
+  if (typeof props.field['v-if'] === 'function') {
+    return props.field['v-if']?.(fieldData, formData);
+  }
+  return true;
 });
 </script>

package/src/components/form/BglForm.vue

@@ -2,32 +2,39 @@
 	<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 ref="form" @submit.prevent="runSubmit">
+	<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" />
-		<input type="submit" hidden v-if="onSubmit" />
+		<button @click="runSubmit">
+			Click
+		</button>
 	</form>
+	<slot  v-if="formStatus === 'success'" name="success" />
+	<slot v-if="formStatus === 'error'" name="error" :message="error" />
 </template>
 
 <script lang="ts" setup>
+import { useSlots } from 'vue';
 import {
 	useModal, BglField, Title,
 } from '@bagelink/vue';
 
 import { type BglFormSchemaT } from '@bagelink/vue';
 
+const slots = useSlots();
+
 const { showModal } = useModal();
 
 const props = withDefaults(
 	defineProps<{
-		label?: string;
-		id?: string;
-		schema: BglFormSchemaT<any>;
-		modelValue?: Record<string, any>;
-		onDelete?: ((id: string) => void);
-		onSubmit?: ((data: any) => void);
-	}>(),
+    label?: string;
+    id?: string;
+    schema: BglFormSchemaT<any>;
+    modelValue?: Record<string, any>;
+    onDelete?: ((id: string) => void);
+    onSubmit?: ((data: any) => void);
+  }>(),
 	{
 		modelValue: () => ({}),
 	},
@@ -35,7 +42,7 @@ const props = withDefaults(
 
 const instAt = new Date();
 const timeSinceInst = () => new Date().getTime() - instAt.getTime();
-
+let formData = $ref(props.modelValue);
 const emit = defineEmits(['update:modelValue', 'submit', 'dirty']);
 let isDirty = $ref(false);
 const data = $computed({
@@ -44,9 +51,10 @@ const data = $computed({
 			emit('dirty');
 			isDirty = true;
 		}
+		formData = val;
 		emit('update:modelValue', val);
 	},
-	get: () => props.modelValue || {},
+	get: () => props.modelValue || formData,
 });
 const form = $ref<HTMLFormElement>();
 
@@ -54,10 +62,21 @@ const validateForm = () => form?.reportValidity?.();
 
 const clearForm = () => Object.assign(data, {});
 
+type FormStatus = 'idle' | 'loading' | 'success' | 'error' ;
+
+let formStatus = $ref<FormStatus>('idle');
+
 const runSubmit = () => {
-	validateForm();
-	emit('submit', data);
-	clearForm();
+	console.log('runSubmit');
+	try {
+		validateForm();
+		props.onSubmit(data);
+		// emit('submit', data);
+		clearForm();
+		formStatus = 'success';
+	} catch (e) {
+		formStatus = 'error';
+	}
 };
 
 const i18nT = (val: string) => val;
@@ -85,6 +104,6 @@ defineExpose({ validateForm, deleteItem, isDirty });
 
 <style>
 .del-top {
-	transform: translateY(-2.6rem);
+  transform: translateY(-2.6rem);
 }
 </style>