@bagelink/vue 0.0.260 → 0.0.262

package/src/components/ModalForm.vue

@@ -1,24 +1,52 @@
 <template>
-	<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">
+	<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>
 
 <script lang="ts" setup>
 import {
-	Modal,
-	Btn,
-	BagelForm, type BglFormSchemaT, type BtnOptions,
+	Modal, Btn, BagelForm, type BglFormSchemaT, type BtnOptions, useBagel,
 } from '@bagelink/vue';
 
+const bagel = useBagel();
+
 const props = defineProps<{
 	side?: boolean;
 	title?: string;
@@ -31,6 +59,8 @@ const props = defineProps<{
 	onDelete?: ((id: string) => void);
 	// eslint-disable-next-line no-unused-vars
 	'onUpdate:isModalVisible'?: ((visible: boolean) => void);
+	// eslint-disable-next-line no-unused-vars
+	onError?: ((err: any) => void);
 }>();
 
 const modal = $ref<InstanceType<typeof Modal>>();
@@ -49,8 +79,9 @@ const runSubmit = async () => {
 	try {
 		await props.onSubmit?.(formData.value);
 		closeModal();
-	} catch (err) {
-		console.error(err);
+	} catch (err: any) {
+		if (props.onError) props.onError(err);
+		else bagel?.onError?.(err);
 	}
 };
 

package/src/components/TableSchema.vue

@@ -2,7 +2,11 @@
 	<div class="table-list-wrap h-100">
 		<table class="infinite-wrapper">
 			<thead class="row first-row">
-				<th class="col" v-for="field in computedSchema" :key="field.id" @click="sort(field?.id || '')">
+				<th
+					class="col"
+					v-for="field in computedSchema"
+					:key="field.id" @click="sort(field?.id || '')"
+				>
 					<div class="flex">
 						{{ field.id }}
 						<div class="list-arrows" :class="{ sorted: sortField === field.id }">
@@ -12,7 +16,12 @@
 				</th>
 			</thead>
 			<tbody ref="infinite" class="rows infinite" :class="{ loading }">
-				<tr v-for="row in data" :key="row.id" @click="selectElement(row)" class="row row-item position-relative">
+				<tr
+					v-for="row in data"
+					:key="row.id"
+					@click="selectElement(row)"
+					class="row row-item position-relative"
+				>
 					<td class="col" v-for="field in computedSchema" :key="`${field.id}-${row.id}`">
 						<slot v-if="field.id && slots[field.id]" :name="field.id" :row="row" :field="field" />
 						<div v-else>
@@ -22,7 +31,6 @@
 				</tr>
 			</tbody>
 		</table>
-		<!-- </Transition> -->
 	</div>
 </template>
 

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

@@ -11,10 +11,18 @@
 				label="label"
 				trackBy="value"
 				:options="optionList"
-				:required="required"
-				:placeholder="placeholder"
+				:required
+				:placeholder
 				v-model="seletValue"
+				v-bind="extraProps"
 			/>
+			<input
+				v-model="seletValue"
+				type="hidden"
+				:name="id"
+				:required
+				v-bind="extraProps"
+			>
 		</label>
 	</div>
 </template>
@@ -37,6 +45,7 @@ const props = defineProps<{
 	placeholder?: string,
 	defaultValue?: string | number,
 	options: RawOption[] | string
+	extraProps?: Record<string, any>
 }>();
 
 let dataValue = $ref<string | number | undefined>(props.modelValue || props.defaultValue);
@@ -194,7 +203,7 @@ fieldset[disabled] .multiselect {
 }
 
 .multiselect--active .multiselect__input {
-	margin-top: -0.5rem;
+		margin-top: -0.6rem;
 }
 
 .multiselect__input::placeholder {

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

@@ -19,6 +19,7 @@
 			@input="handleInput"
 			:class="{ 'no-edit': !editMode }"
 			v-bind="nativeInputAttrs"
+			:required
 		/>
 	</div>
 </template>
@@ -38,6 +39,7 @@ withDefaults(
 		small?: boolean;
 		nativeInputAttrs?: Record<string, any>;
 		showCharacterLimit?: boolean;
+		required?: boolean;
 	}>(),
 	{
 		description: '',

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

@@ -1,23 +1,63 @@
 <template>
-	<div class="bagel-input text-input"
-		:class="{ dense, small, shrink, toggleEdit, editMode, textInputIconWrap: icon, txtInputIconStart: iconStart, code }"
-		:title="title">
-		<label :for="id">
+	<div
+		class="bagel-input text-input"
+		:class="{
+			dense, small, shrink, toggleEdit, editMode,	code,
+			textInputIconWrap: icon,
+			txtInputIconStart: iconStart,
+		}"
+		:title="title"
+	>
+		<label
+			:for="id"
+		>
 			{{ label }}
-			<input :title="title" :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 :title="title" 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
+				v-if="!multiline && !autoheight && !code"
+				:title="title"
+				:autocomplete="autocomplete"
+				: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
+				:title="title"
+				: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>
 

package/src/plugins/modal.ts

@@ -21,6 +21,7 @@ interface ModalFormOptions {
 	modelValue?: Record<string, any>;
 	onSubmit?: (formData: any) => Promise<any>;
 	onDelete?: (id: string) => Promise<void>;
+	onError?: ((err: any) => void);
 }
 
 interface ModalApi {