@bagelink/vue 0.0.241 → 0.0.245

package/src/components/ModalForm.vue

@@ -1,39 +1,13 @@
 <template>
-	<Modal
-		:side="side"
-		ref="modal"
-		:dismissable="dismissable"
-		:title="title"
-	>
-		<BagelForm
-			v-model="formData"
-			:schema="computedFormSchema"
-		/>
-		<template
-			#footer
-			v-if="onDelete || onSubmit"
-		>
+	<Modal @onUpdate:isModalVisible="props['onUpdate:isModalVisible']" :side="side" ref="modal" :dismissable="dismissable"
+		:title="title">
+		<BagelForm ref="form" v-model="formData" :schema="computedFormSchema" />
+		<template #footer v-if="onDelete || onSubmit">
 			<div>
-				<Btn
-					thin
-					flat
-					value="Cancel"
-					@click="closeModal()"
-				/>
-				<Btn
-					thin
-					icon="delete"
-					v-if="onDelete"
-					flat
-					value="Delete"
-					@click="runDelete()"
-					color="red"
-				/>
+				<Btn thin flat value="Cancel" @click="closeModal()" />
+				<Btn thin icon="delete" v-if="onDelete" flat value="Delete" @click="runDelete()" color="red" />
 			</div>
-			<Btn
-				value="Submit"
-				@click="runSubmit()"
-			/>
+			<Btn value="Submit" @click="runSubmit()" />
 		</template>
 	</Modal>
 </template>
@@ -55,6 +29,8 @@ const props = defineProps<{
 	onSubmit?: ((formData: any) => Promise<void>);
 	// eslint-disable-next-line no-unused-vars
 	onDelete?: ((id: string) => void);
+	// eslint-disable-next-line no-unused-vars
+	'onUpdate:isModalVisible'?: ((visible: boolean) => void);
 }>();
 
 const modal = $ref<InstanceType<typeof Modal>>();
@@ -65,10 +41,11 @@ const computedFormSchema = $computed(() => {
 });
 
 const formData = defineModel<Record<string, any>>('modelValue', { default: {} });
-
+const form = $ref<InstanceType<typeof BagelForm>>();
 const closeModal = () => modal?.closeModal();
 
 const runSubmit = async () => {
+	if (form?.validateForm?.() === false) return;
 	try {
 		await props.onSubmit?.(formData.value);
 		closeModal();

package/src/components/form/BglField.vue

@@ -1,32 +1,17 @@
 <template>
-	<component
-		:required="field.required"
-		v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
-		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)"
-		v-if="iffer(field, fieldData)"
-		:is="is"
-		:label="field.label"
-		:id="field.id"
-		:placeholder="field.placeholder || field.label"
-		v-model="fieldData"
-		:defaultValue="field.defaultValue"
-		:options="field.options"
-		:hint="field.hint"
-		@update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(fieldData, field.id), formData)"
-	>
+	<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, denullify(fieldData, field.id), formData)">
 		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
-		<BglField
-			v-model="formData"
-			v-for="(child, ii) in field.children"
-			:key="child.id || ii"
-			:field="child"
-		/>
+		<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, iffer, denullify,
+	type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput, denullify,
 } from '@bagelink/vue';
 
 const props = withDefaults(defineProps<{
@@ -58,6 +43,16 @@ const fieldData = $computed({
 		data[props.field.id] = val;
 		emit('update:modelValue', data);
 	},
-	get: () => (props.field.id ? props.modelValue[props.field.id] : ''),
+	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;
 });
 </script>

package/src/components/form/BglForm.vue

@@ -1,46 +1,19 @@
 <template>
-	<component
-		:is="id?'div':'form'"
-		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"
-		/>
-		<Btn
-			class="del-top"
-			v-if="data?.id && onDelete"
-			@click="runDelete"
-			value="Delete"
-			flat
-			icon="delete"
-			color="red"
-			thin
-		/>
-		<Btn
-			v-if="!$slots.submit && onSubmit"
-			value="Submit"
-			type="submit"
-			thin
-		/>
-		<div v-else>
-			<slot name="submit" />
-		</div>
-	</component>
+	<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">
+		<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>
 </template>
 
 <script lang="ts" setup>
 import {
-	Btn, useModal, BglField, Title,
+	useModal, BglField, Title,
 } from '@bagelink/vue';
+
 import { type BglFormSchemaT } from '@bagelink/vue';
 
 const { showModal } = useModal();
@@ -59,10 +32,17 @@ const props = withDefaults(
 	},
 );
 
-const emit = defineEmits(['update:modelValue', 'submit']);
+const timeSinceInst = () => new Date().getTime() - instAt.getTime();
 
+const emit = defineEmits(['update:modelValue', 'submit', 'dirty']);
+const instAt = new Date();
+let isDirty = $ref(false);
 const data = $computed({
 	set: (val: any) => {
+		if (timeSinceInst() > 100) {
+			emit('dirty');
+			isDirty = true;
+		}
 		emit('update:modelValue', val);
 	},
 	get: () => props.modelValue || {},
@@ -71,8 +51,6 @@ const form = $ref<HTMLFormElement>();
 
 const validateForm = () => form?.reportValidity?.();
 
-defineExpose({ validateForm });
-
 const clearForm = () => Object.assign(data, {});
 
 const runSubmit = () => {
@@ -83,7 +61,7 @@ const runSubmit = () => {
 
 const i18nT = (val: string) => val;
 
-const runDelete = () => {
+const deleteItem = () => {
 	showModal(
 		{
 			class: 'small-modal',
@@ -100,6 +78,8 @@ const runDelete = () => {
 		{ default: i18nT('form.deleteMessage') },
 	);
 };
+
+defineExpose({ validateForm, deleteItem, isDirty });
 </script>
 
 <style>

package/src/components/form/inputs/TextInput.vue

@@ -1,59 +1,22 @@
 <template>
-	<div
-		class="bagel-input text-input"
+	<div class="bagel-input text-input"
 		:class="{ small, shrink, toggleEdit, editMode, textInputIconWrap: icon, txtInputIconStart: iconStart, code }"
-		:title="title"
-	>
+		:title="title">
 		<label :for="id">
 			{{ label }}
-			<input
-				:autocomplete="autocomplete"
-				v-if="!multiline && !autoheight && !code"
-				:id="id"
-				v-model="inputVal"
-				:type="type"
-				:rows="1"
-				ref="input"
-				:placeholder="placeholder || label"
-				:disabled="!editMode"
-				:required="required"
-				:pattern="pattern"
-				v-bind="nativeInputAttrs"
-				@dblclick="toggleEditAction"
-			>
-			<textarea
-				v-else
-				:id="id"
-				v-model="inputVal"
-				:type="type"
-				:rows="rows"
-				ref="input"
-				:placeholder="placeholder || label"
-				:disabled="!editMode"
-				:required="required"
-				:pattern="pattern"
-				v-bind="nativeInputAttrs"
-				@dblclick="toggleEditAction"
-			/>
+			<input :autocomplete="autocomplete" v-if="!multiline && !autoheight && !code" :id="id" v-model="inputVal"
+				:type="type" :rows="1" ref="input" :placeholder="placeholder || label" :disabled="!editMode"
+				:required="required" :pattern="pattern" v-bind="nativeInputAttrs" @dblclick="toggleEditAction">
+			<textarea v-else :id="id" v-model="inputVal" :type="type" :rows="rows" ref="input"
+				:placeholder="placeholder || label" :disabled="!editMode" :required="required" :pattern="pattern"
+				v-bind="nativeInputAttrs" @dblclick="toggleEditAction" />
+			<p v-if="helptext">{{ helptext }}</p>
 		</label>
 
-		<MaterialIcon
-			class="iconStart"
-			v-if="iconStart"
-			:icon="iconStart"
-		/>
-		<MaterialIcon
-			v-if="icon"
-			:icon="icon"
-		/>
-		<Btn
-			class="toggleEditBtn"
-			v-if="toggleEdit"
-			thin
-			@click="toggleEditAction"
-			:icon="editMode ? 'check' : 'edit'"
-			flat
-		/>
+		<MaterialIcon class="iconStart" v-if="iconStart" :icon="iconStart" />
+		<MaterialIcon v-if="icon" :icon="icon" />
+		<Btn class="toggleEditBtn" v-if="toggleEdit" thin @click="toggleEditAction" :icon="editMode ? 'check' : 'edit'"
+			flat />
 	</div>
 </template>
 
@@ -68,6 +31,7 @@ const props = withDefaults(
 	defineProps<{
 		id?: string;
 		title?: string;
+		helptext?: string;
 		placeholder?: string;
 		modelValue?: string | number;
 		label?: string;
@@ -80,8 +44,8 @@ const props = withDefaults(
 		nativeInputAttrs?: Record<string, any>;
 		icon?: MaterialIcons;
 		iconStart?: MaterialIcons;
-    multiline?: boolean;
-    autoheight?: boolean;
+		multiline?: boolean;
+		autoheight?: boolean;
 		code?: boolean;
 		lines?: number;
 		autocomplete?: string;
@@ -144,17 +108,20 @@ watch(
 </style>
 
 <style scoped>
-.bagel-input textarea{
-  min-height: unset;
+.bagel-input textarea {
+	min-height: unset;
 }
-.bagel-input.text-input textarea{
-  resize: none;
+
+.bagel-input.text-input textarea {
+	resize: none;
 }
-.code textarea{
-  font-family: 'Inconsolata', monospace;
-  background: var(--bgl-black) !important;
-  color: var(--bgl-white) !important;
+
+.code textarea {
+	font-family: 'Inconsolata', monospace;
+	background: var(--bgl-black) !important;
+	color: var(--bgl-white) !important;
 }
+
 .bagel-input.toggleEdit:hover {
 	background-color: var(--input-bg);
 }

package/src/components/form/inputs/ToggleInput.vue

@@ -1,59 +1,48 @@
 <template>
-	<div
-		class="bagel-input bgl-checkbox"
-		:title="title"
-		:class="{ small: small, 'no-edit': !editMode }"
-	>
-		<div class="switch">
-			<input
-				:id="id"
-				type="checkbox"
-				v-model="inputVal"
-				:class="{ 'no-edit': !editMode }"
-			>
-			<span class="slider round" />
-		</div>
-		<label :for="id">
-			{{ label }}
-		</label>
-	</div>
+  <div class="bagel-input bgl-checkbox justify-content-center gap-3" :title="title" :class="{ small: small }">
+    <div class="switch" :class="{ checked }">
+      <span class="slider round" />
+    </div>
+    <label>
+      {{ label }}
+      <input :id="id" type="checkbox" v-model="checked">
+    </label>
+  </div>
 </template>
 
 <script setup lang="ts">
-withDefaults(
-	defineProps<{
-    label: string;
-    id?: string;
-    title?: string;
-    editMode?: boolean;
-    small?: boolean;
-  }>(),
-	{
-		editMode: true,
-		id: Math.random().toString(36).substring(7),
-	},
-);
+defineProps<{
+  label: string;
+  id?: string;
+  title?: string;
+  small?: boolean;
+}>();
 
-const inputVal = defineModel<boolean>('modelValue', { default: false });
+const checked = defineModel<boolean>('modelValue', { default: false });
 </script>
 
 <style scoped>
-.bgl-checkbox{
+.bgl-checkbox {
   position: relative;
 }
-.bgl-checkbox input[type=checkbox]{
+
+.bgl-checkbox input[type=checkbox] {
   display: none;
 }
-.bgl-checkbox label{
+
+.bgl-checkbox label {
   padding-inline-start: calc(var(--input-height) + 0.25rem);
   transition: var(--bgl-transition);
   cursor: pointer;
   user-select: none;
+  line-height: var(--input-height);
 }
-.bgl-checkbox:hover{
+
+.bgl-checkbox:hover {
   filter: brightness(90%);
 }
-.bgl-checkbox:active{
+
+.bgl-checkbox:active {
   filter: var(--bgl-active-filter);
 }
 
@@ -64,7 +53,7 @@ const inputVal = defineModel<boolean>('modelValue', { default: false });
   width: var(--input-height);
   border-radius: var(--input-height);
   background: var(--bgl-gray);
-  outline: 1px solid var(--bgl-black);
+  outline: 1px solid var(--border-color);
   margin-top: 0.15rem;
   pointer-events: none;
 }
@@ -102,11 +91,11 @@ const inputVal = defineModel<boolean>('modelValue', { default: false });
   transition: 0.4s;
 }
 
-input:checked + .slider {
+.checked .slider {
   background: var(--bgl-primary);
 }
 
-input:checked + .slider:before {
+.checked .slider:before {
   transform: translateX(calc(var(--input-height) / 2));
 }
 </style>

package/src/plugins/modal.ts

@@ -13,26 +13,20 @@ interface ModalOptions {
 	class?: string;
 }
 
-interface ModalFormOptions extends ModalOptions {
-	modelValue?: any;
-	// eslint-disable-next-line no-unused-vars
-	'onUpdate:modelValue'?: (val: any) => void;
-	// eslint-disable-next-line no-unused-vars
-	onSubmit: (val: any) => void;
-	// eslint-disable-next-line no-unused-vars
-	onDelete?: (id: string) => void;
-	schema: BglFormSchemaT<any> | (() => BglFormSchemaT<any>);
-
+interface ModalFormOptions {
+	side?: boolean;
+	title?: string;
+	dismissable?: boolean;
+	schema: BglFormSchemaT<any> | (() => BglFormSchemaT);
+	modelValue?: Record<string, any>;
+	onSubmit?: (formData: any) => Promise<any>;
+	onDelete?: (id: string) => Promise<void>;
 }
 
 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
 	hideModal: (index?: number) => void;
-	// modalOptions: Ref<ModalOptions | ModalFormOptions>;
 }
 
 export const ModalSymbol: InjectionKey<ModalApi> = Symbol('modal');
@@ -77,22 +71,12 @@ export const ModalPlugin: Plugin = {
 		});
 
 		const ModalComponent = defineComponent({
-			data() {
-				return {
-					modalStack,
-				};
-			},
+			data: () => ({ modalStack }),
 			render() {
 				return modalStack.map((modal, index) => {
-					const renderComponent = modal.modalType === 'modalForm' ? ModalForm : Modal;
-					return h(
-						renderComponent,
-						{
-							...modal.modalOptions,
-							'onUpdate:isModalVisible': () => hideModal(index),
-						},
-						modal.componentSlots,
-					);
+					const props = { ...modal.modalOptions, 'onUpdate:isModalVisible': () => hideModal(index) };
+					if (modal.modalType === 'modalForm') return h(ModalForm, props as ModalFormOptions, modal.componentSlots);
+					return h(Modal, props, modal.componentSlots);
 				});
 			},
 		});