@bagelink/vue 0.0.260 → 0.0.264

package/dist/style.css

@@ -546,11 +546,11 @@
   }
 }
 
-.modal-title[data-v-753a1016] {
+.modal-title[data-v-5c602c4d] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-753a1016] {
+.modal-title[data-v-5c602c4d] {
 		margin-top: 1rem;
 }
 }
@@ -741,37 +741,37 @@
   border-radius: var(--btn-border-radius);
 }
 
-.list-arrows[data-v-555ad739] {
+.list-arrows[data-v-2137a7a8] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-555ad739] {
+.list-arrows .bgl_icon-font[data-v-2137a7a8] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-555ad739] {
+.list-arrows.sorted[data-v-2137a7a8] {
 	opacity: 1;
 }
-.col img[data-v-555ad739] {
+.col img[data-v-2137a7a8] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-555ad739] {
+.list-arrows.sorted .desc[data-v-2137a7a8] {
 	transform: rotate(180deg);
 }
-table[data-v-555ad739] {
+table[data-v-2137a7a8] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 }
-th[data-v-555ad739] {
+th[data-v-2137a7a8] {
 	font-weight: 400;
 }
-.row[data-v-555ad739] {
+.row[data-v-2137a7a8] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-555ad739] {
+.row.first-row[data-v-2137a7a8] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -781,7 +781,7 @@ th[data-v-555ad739] {
 	height: 50px;
 	vertical-align: bottom;
 }
-.row.first-row[data-v-555ad739]::after {
+.row.first-row[data-v-2137a7a8]::after {
 	content: "";
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -789,11 +789,11 @@ th[data-v-555ad739] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-555ad739] {
+.first-row .col[data-v-2137a7a8] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-555ad739] {
+.col[data-v-2137a7a8] {
 	white-space: nowrap;
 	padding: 14px;
 	transition: var(--bgl-transition);
@@ -802,16 +802,16 @@ th[data-v-555ad739] {
 	padding-right: 1rem;
 	align-items: center;
 }
-.col>div[data-v-555ad739] {
+.col>div[data-v-2137a7a8] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-555ad739] {
+.max-col-width[data-v-2137a7a8] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-555ad739] {
+.col.check .bgl_icon-font[data-v-2137a7a8] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -822,27 +822,27 @@ th[data-v-555ad739] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-555ad739] {
+.rows[data-v-2137a7a8] {
 	font-size: 0.8125em;
 }
-.table-list[data-v-555ad739] {
+.table-list[data-v-2137a7a8] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-555ad739] {
+.BagelTable .table-list[data-v-2137a7a8] {
 	overflow: unset;
 }
-.row-item[data-v-555ad739] {
+.row-item[data-v-2137a7a8] {
 	height: 50px;
 	transition: all 200ms ease;
 }
-.row-item[data-v-555ad739]:hover {
+.row-item[data-v-2137a7a8]:hover {
 	background: var(--bgl-gray-light);
 }
-.infinite-wrapper[data-v-555ad739] {
+.infinite-wrapper[data-v-2137a7a8] {
 	overflow-y: auto;
 	width: 100%;
 }
@@ -1230,7 +1230,7 @@ fieldset[disabled] .multiselect {
 	padding-inline-start: 0rem;
 }
 .multiselect--active .multiselect__input {
-	margin-top: -0.5rem;
+		margin-top: -0.6rem;
 }
 .multiselect__input::placeholder {
 	color: var(--input-color);
@@ -1676,77 +1676,77 @@ to {
 	/* width: auto; */
 }
 
-.bagel-input textarea[data-v-8c868409] {
+.bagel-input textarea[data-v-e116816b] {
 	min-height: unset;
 }
-.bagel-input.text-input textarea[data-v-8c868409] {
+.bagel-input.text-input textarea[data-v-e116816b] {
 	resize: none;
 }
-.code textarea[data-v-8c868409] {
+.code textarea[data-v-e116816b] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-black) !important;
 	color: var(--bgl-white) !important;
 }
-.bagel-input.toggleEdit[data-v-8c868409]:hover {
+.bagel-input.toggleEdit[data-v-e116816b]:hover {
 	background-color: var(--input-bg);
 }
-.bagel-input.small[data-v-8c868409] {
+.bagel-input.small[data-v-e116816b] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-8c868409] {
+.bagel-input.dense label[data-v-e116816b] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.toggleEditBtn[data-v-8c868409] {
+.toggleEditBtn[data-v-e116816b] {
 	position: absolute;
 	right: -24px;
 	top: 4;
 	opacity: 0;
 }
-.textInputIconWrap[data-v-8c868409] {
+.textInputIconWrap[data-v-e116816b] {
 	position: relative;
 }
-.textInputIconWrap .bgl_icon-font[data-v-8c868409] {
+.textInputIconWrap .bgl_icon-font[data-v-e116816b] {
 	position: absolute;
 	inset-inline-end: 0.7rem;
 	bottom: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart .iconStart[data-v-8c868409] {
+.txtInputIconStart .iconStart[data-v-e116816b] {
 	position: absolute;
 	inset-inline-start: 0.7rem;
 	top: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart textarea[data-v-8c868409] {
+.txtInputIconStart textarea[data-v-e116816b] {
 	padding-inline-start: 2rem;
 }
-.bagel-input:hover .toggleEditBtn[data-v-8c868409],
-.bagel-input.editMode .toggleEditBtn[data-v-8c868409] {
+.bagel-input:hover .toggleEditBtn[data-v-e116816b],
+.bagel-input.editMode .toggleEditBtn[data-v-e116816b] {
 	opacity: 1;
 }
-.bagel-input.small textarea[data-v-8c868409] {
+.bagel-input.small textarea[data-v-e116816b] {
 	height: 30px;
 }
 
-.bagel-input[data-v-a5b28c58] {
+.bagel-input[data-v-64dc9f53] {
 	height: 100%;
 	margin: 0;
 }
-.bagel-input label[data-v-a5b28c58] {
+.bagel-input label[data-v-64dc9f53] {
 	margin-bottom: 0;
 }
-.bagel-input textarea[data-v-a5b28c58] {
+.bagel-input textarea[data-v-64dc9f53] {
 	height: 100%;
 	resize: none;
 	background: var(--input-bg);
 	margin-bottom: 0.5rem;
 }
-.character-limit[data-v-a5b28c58] {
+.character-limit[data-v-64dc9f53] {
 	font-size: 0.6rem;
 	color: var(--input-color);
 	position: absolute;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.260",
+  "version": "0.0.264",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Modal.vue

@@ -1,15 +1,38 @@
 <template>
-	<div class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive, 'bg-lignt': false }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
-		<Card class="modal" @click.stop>
+	<div
+		class="bg-dark"
+		:class="{ 'is-side': side, 'is-active': isActive, '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" />
+				<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" />
+				<Btn
+					v-for="(action, i) in actions"
+					:key="i"
+					@click="closeModal"
+					color="gray"
+					v-bind="action"
+				/>
 				<slot name="footer" />
 			</footer>
 		</Card>

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,11 @@ 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);
+
+	modelValue?: Record<string, any>;
+
 }>();
 
 const modal = $ref<InstanceType<typeof Modal>>();
@@ -49,8 +82,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);
 	}
 };
 
@@ -58,6 +92,12 @@ const runDelete = () => {
 	props.onDelete?.(formData.value?.id);
 	closeModal();
 };
+
+function setFormValues(values: Record<string, any>) {
+	Object.assign(formData, values);
+}
+
+defineExpose({ setFormValues });
 </script>
 
 <style scoped>

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/BglForm.vue

@@ -50,10 +50,10 @@ const props = withDefaults(
 	},
 );
 
+const instAt = new Date();
 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) => {

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

@@ -5,7 +5,7 @@ import type { Plugin } from 'vue';
 import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue';
 import { Modal, ModalForm } from '@bagelink/vue';
 
-interface ModalOptions {
+export interface ModalOptions {
 	title?: string;
 	dismissable?: boolean;
 	side?: boolean;
@@ -13,19 +13,31 @@ interface ModalOptions {
 	class?: string;
 }
 
-interface ModalFormOptions {
+export 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>;
+	onError?: ((err: any) => void);
+	modelValue?: Record<string, any>;
+	'onUpdate:modelValue'?: (val: any) => void;
 }
 
-interface ModalApi {
+export interface ModalComponentProps {
+	componentSlots: Record<string, any>,
+	modalType: 'modal' | 'modalForm',
+	modalOptions: ModalOptions | ModalFormOptions
+}
+export interface ModalFormComponentProps {
+	componentSlots: Record<string, any>,
+	modalType: 'modalForm',
+	modalOptions: ModalFormOptions
+}
+export interface ModalApi {
 	showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
-	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => void;
+	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined;
 	hideModal: (index?: number) => void;
 }
 
@@ -37,12 +49,6 @@ export const useModal = (): ModalApi => {
 	return modalApi;
 };
 
-interface ModalComponentProps {
-	componentSlots: Record<string, any>,
-	modalType: 'modal' | 'modalForm',
-	modalOptions: ModalOptions | ModalFormOptions
-}
-
 export const ModalPlugin: Plugin = {
 	install: (app) => {
 		const modalStack = $ref<ModalComponentProps[]>([]);
@@ -61,11 +67,13 @@ export const ModalPlugin: Plugin = {
 				modalType,
 				componentSlots: slots,
 			});
+			if (modalType === 'modalForm') return modalStack.at(-1) as ModalFormComponentProps | undefined;
+			return modalStack.at(-1);
 		};
 
 		app.provide(ModalSymbol, {
 			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal('modal', options, slots),
-			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal('modalForm', options, slots),
+			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal('modalForm', options, slots) as ModalFormComponentProps,
 			hideModal: (index = modalStack.length - 1) => hideModal(index),
 			// modalOptions,
 		});