@bagelink/vue 0.0.258 → 0.0.262

package/dist/style.css

@@ -546,11 +546,11 @@
   }
 }
 
-.modal-title[data-v-753a1016] {
+.modal-title[data-v-82698669] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-753a1016] {
+.modal-title[data-v-82698669] {
 		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;
@@ -1913,7 +1913,7 @@ to {
   color: var(--bgl-white);
 }
 
-.bagel-input .fileUploadWrap[data-v-7deb423e] {
+.bagel-input .fileUploadWrap[data-v-1be8d7b1] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -1923,7 +1923,7 @@ to {
 	height: 132px;
 	font-size: var(--input-font-size);
 }
-.previewName[data-v-7deb423e] {
+.previewName[data-v-1be8d7b1] {
 	padding: 0.5rem;
 	text-align: start;
 	color: var(--input-color);
@@ -1931,37 +1931,37 @@ to {
 	grid-template-columns: 1fr 22px;
 	align-items: center;
 }
-.previewName p[data-v-7deb423e] {
+.previewName p[data-v-1be8d7b1] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.imagePreviewWrap[data-v-7deb423e] {
+.imagePreviewWrap[data-v-1be8d7b1] {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 	height: 90px;
 	padding: 5px;
 }
-img.preview[data-v-7deb423e] {
+img.preview[data-v-1be8d7b1] {
 	height: 80px;
 	border-radius: var(--input-border-radius);
 	object-fit: contain;
 }
-.fileUploadWrap.dragover[data-v-7deb423e],
-.fileUploadWrap[data-v-7deb423e]:hover {
+.fileUploadWrap.dragover[data-v-1be8d7b1],
+.fileUploadWrap[data-v-1be8d7b1]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-7deb423e] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-1be8d7b1] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: var(--bgl-gray);
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-7deb423e]:after {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-1be8d7b1]:after {
 	content: "Drop files here or click to upload";
 }
-.pie[data-v-7deb423e] {
+.pie[data-v-1be8d7b1] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1969,7 +1969,7 @@ img.preview[data-v-7deb423e] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-7deb423e]:before {
+.pie[data-v-1be8d7b1]:before {
 	content: "";
 	position: absolute;
 	border-radius: 50%;
@@ -1983,26 +1983,26 @@ img.preview[data-v-7deb423e] {
 			#0000 calc(99% - var(--b)),
 			#000 calc(100% - var(--b)));
 }
-.pie .success[data-v-7deb423e] {
+.pie .success[data-v-1be8d7b1] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-7deb423e] {
+.pie .progress[data-v-1be8d7b1] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-7deb423e] {
+.pie.complete .progress[data-v-1be8d7b1] {
 	display: none;
 }
-.pie.complete .success[data-v-7deb423e] {
+.pie.complete .success[data-v-1be8d7b1] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-7deb423e]:before {
+.pie.complete[data-v-1be8d7b1]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-7deb423e] {
+.pie.complete[data-v-1be8d7b1] {
 	color: var(--bgl-green);
 }
 

package/dist/types/file.d.ts

@@ -1,5 +1,5 @@
 export type StorageFile = {
-    organization: string[];
+    organization?: string[];
     name: string;
     url: string;
     mimetype?: string;

package/dist/types/file.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/types/file.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;CAC5B,CAAA"}
+{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/types/file.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;CAC5B,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.258",
+  "version": "0.0.262",
   "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,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/FileUpload.vue

@@ -109,7 +109,12 @@ type QueueFile = {
 	uploaded?: boolean;
 };
 
-const props = defineProps<{ label: string, multiple?: boolean, files?: StorageFile | StorageFile[], }>();
+const props = defineProps<{
+	label: string,
+	multiple?: boolean,
+	files?: StorageFile | StorageFile[],
+	deleteEndpoint?: string;
+}>();
 
 const file_ids = defineModel<string[] | string>('modelValue');
 const storageFiles = $ref<StorageFile[]>([]);
@@ -139,16 +144,21 @@ const fileToUrl = (file: File) => URL.createObjectURL(file);
 const removeFile = (file: StorageFile) => {
 	const index = storageFiles.indexOf(file);
 	storageFiles.splice(index, 1);
+
+	if (props.deleteEndpoint) void bagel.delete(`${props.deleteEndpoint}/${file.id}`);
 };
+
 const flushQueue = () => {
-	fileQueue.forEach(async (file, i) => {
-		if (!props.multiple) storageFiles.splice(0, 1);
-		const serverFile = await bagel.uploadFile(file.file, {
-			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
-		});
-		storageFiles.push(serverFile);
-		fileQueue.splice(i, 1);
-	});
+	fileQueue.forEach(
+		async (file, i) => {
+			if (!props.multiple) storageFiles.splice(0, 1);
+			const serverFile = await bagel.uploadFile<StorageFile>(file.file, {
+				onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
+			});
+			storageFiles.push(serverFile);
+			fileQueue.splice(i, 1);
+		},
+	);
 };
 
 const browse = () => {
@@ -180,7 +190,13 @@ const dragover = (e: DragEvent) => {
 const drop = (e: DragEvent) => {
 	preventDefault(e);
 	if (e.dataTransfer) {
-		Array.from(e.dataTransfer.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 }));
+		Array
+			.from(e.dataTransfer.files)
+			.forEach(
+				(file: File) => (
+					fileQueue.push({ name: file.name, file, progress: 0 })
+				),
+			);
 	}
 	isDragOver = false;
 	flushQueue();

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

@@ -1,11 +1,28 @@
 <template>
 	<div class="pb-1">
-		<label class="txt-start" :for="id">
+		<label
+			class="txt-start"
+			:for="id"
+		>
 			{{ label }}
 			<Multiselect
-				ref="multiselect" :id="id" label="label" trackBy="value" :options="optionList" :required="required"
-				:placeholder="placeholder" v-model="seletValue"
+				ref="multiselect"
+				:id="id"
+				label="label"
+				trackBy="value"
+				:options="optionList"
+				:required
+				:placeholder
+				v-model="seletValue"
+				v-bind="extraProps"
 			/>
+			<input
+				v-model="seletValue"
+				type="hidden"
+				:name="id"
+				:required
+				v-bind="extraProps"
+			>
 		</label>
 	</div>
 </template>
@@ -28,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);
@@ -183,8 +201,9 @@ fieldset[disabled] .multiselect {
 	font-size: var(--input-font-size);
 	padding-inline-start: 0rem;
 }
+
 .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: '',