@bagelink/vue 0.0.237 → 0.0.241

package/dist/plugins/bagel.d.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey, Plugin } from 'vue';
-import { Bagel } from '@bagelink/sdk';
+import { Bagel } from '../../../sdk/src/index.ts';
 export declare const bagelInjectionKey: InjectionKey<Bagel>;
 export declare const i18nTInjectionKey: InjectionKey<(key: string) => string>;
 export declare function useBagel(): Bagel;

package/dist/style.css

@@ -306,16 +306,16 @@
 }
 }
 
-.loading[data-v-593b2146] {
+.loading[data-v-1a7bde1e] {
 	border: 1px solid var(--bgl-white);
 	border-bottom: 2px solid var(--bgl-white);
-	animation: spin-593b2146 1s linear infinite;
+	animation: spin-1a7bde1e 1s linear infinite;
 	border-radius: 100px;
 	width: 1rem;
 	height: 1rem;
 	margin: auto;
 }
-@keyframes spin-593b2146 {
+@keyframes spin-1a7bde1e {
 0% {
 		transform: rotate(0deg);
 }
@@ -323,7 +323,7 @@
 		transform: rotate(360deg);
 }
 }
-.btn-icon[data-v-593b2146] {
+.btn-icon[data-v-1a7bde1e] {
 	height: var(--btn-height);
 	width: var(--btn-height);
 	border-radius: 100%;
@@ -333,97 +333,97 @@
 	flex-shrink: 0;
 	transition: var(--bgl-transition);
 }
-.btn[data-v-593b2146] {
+.btn[data-v-1a7bde1e] {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	transition: var(--bgl-transition);
 	text-decoration: none;
 }
-.btn[disabled="true"][data-v-593b2146] {
+.btn[disabled="true"][data-v-1a7bde1e] {
 	opacity: 0.5;
 	cursor: not-allowed;
 }
-.btn-flex[data-v-593b2146] {
+.btn-flex[data-v-1a7bde1e] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 	justify-content: center;
 }
-.btn .icon-font[data-v-593b2146] {
+.btn .icon-font[data-v-1a7bde1e] {
 	font-size: calc(var(--input-font-size) * 1.3);
 }
-.btn[data-v-593b2146],
-.btn-icon[data-v-593b2146] {
-	background-color: var(--bfb3f9c4);
-	color: var(--5ae19879);
+.btn[data-v-1a7bde1e],
+.btn-icon[data-v-1a7bde1e] {
+	background-color: var(--566fc0e2);
+	color: var(--03adf93d);
 }
-.btn[data-v-593b2146]:hover,
-.btn-icon[data-v-593b2146]:hover {
+.btn[data-v-1a7bde1e]:hover,
+.btn-icon[data-v-1a7bde1e]:hover {
 	filter: var(--bgl-hover-filter);
 }
-.btn[data-v-593b2146]:active,
-.btn-icon[data-v-593b2146]:active {
+.btn[data-v-1a7bde1e]:active,
+.btn-icon[data-v-1a7bde1e]:active {
 	filter: var(--bgl-active-filter);
 }
-.btn.flatBtn[data-v-593b2146] {
+.btn.flatBtn[data-v-1a7bde1e] {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	background: transparent;
 }
-.btn-icon.flatBtn[data-v-593b2146] {
+.btn-icon.flatBtn[data-v-1a7bde1e] {
 	background: transparent;
 }
-.btn.flatBtn[data-v-593b2146]:hover,
-.btn-icon.flatBtn[data-v-593b2146]:hover {
+.btn.flatBtn[data-v-1a7bde1e]:hover,
+.btn-icon.flatBtn[data-v-1a7bde1e]:hover {
 	filter: var(--bgl-active-filter);
 }
-.btn.flatBtn[data-v-593b2146]:active,
-.btn-icon.flatBtn[data-v-593b2146]:active {
+.btn.flatBtn[data-v-1a7bde1e]:active,
+.btn-icon.flatBtn[data-v-1a7bde1e]:active {
 	background: var(--bgl-white);
 	filter: var(--bgl-hover-filter);
 }
-.btn.flatBtn.red[data-v-593b2146],
-.btn-icon.flatBtn.red[data-v-593b2146] {
+.btn.flatBtn.red[data-v-1a7bde1e],
+.btn-icon.flatBtn.red[data-v-1a7bde1e] {
 	color: var(--bgl-red);
 }
-.btn.flatBtn.light[data-v-593b2146],
-.btn-icon.flatBtn.light[data-v-593b2146] {
+.btn.flatBtn.light[data-v-1a7bde1e],
+.btn-icon.flatBtn.light[data-v-1a7bde1e] {
 	color: var(--bgl-primary-tint);
 }
-.btn.flatBtn.black[data-v-593b2146],
-.btn-icon.flatBtn.black[data-v-593b2146] {
+.btn.flatBtn.black[data-v-1a7bde1e],
+.btn-icon.flatBtn.black[data-v-1a7bde1e] {
 	color: var(--bgl-black);
 }
-.btn.flatBtn.gray[data-v-593b2146],
-.btn-icon.flatBtn.gray[data-v-593b2146] {
+.btn.flatBtn.gray[data-v-1a7bde1e],
+.btn-icon.flatBtn.gray[data-v-1a7bde1e] {
 	color: var(--bgl-gray);
 }
-.btn.thin[data-v-593b2146] {
+.btn.thin[data-v-1a7bde1e] {
 	padding-left: calc(var(--btn-padding) / 2);
 	padding-right: calc(var(--btn-padding) / 2);
 }
-.btn.round[data-v-593b2146] {
+.btn.round[data-v-1a7bde1e] {
 	border-radius: calc(var(--btn-border-radius) * 2);
 }
-.btn-icon.thin[data-v-593b2146] {
+.btn-icon.thin[data-v-1a7bde1e] {
 	height: calc(var(--btn-height) / 1.5);
 	width: calc(var(--btn-height) / 1.5);
 	line-height: 1;
 }
-[dir="rtl"] .icon-font[data-v-593b2146] {
+[dir="rtl"] .icon-font[data-v-1a7bde1e] {
 	transform: rotateY(180deg);
 }
-.btn-border[data-v-593b2146] {
-	outline: 1px solid var(--bfb3f9c4);
-	color: var(--bfb3f9c4);
+.btn-border[data-v-1a7bde1e] {
+	outline: 1px solid var(--566fc0e2);
+	color: var(--566fc0e2);
 	background: transparent;
 }
-.btn-border[data-v-593b2146]:hover {
+.btn-border[data-v-1a7bde1e]:hover {
 	color: var(--bgl-white);
-	background: var(--bfb3f9c4);
+	background: var(--566fc0e2);
 	filter: brightness(100%);
 }
-.btn-border[data-v-593b2146]:active {
+.btn-border[data-v-1a7bde1e]:active {
 	filter: brightness(80%);
 }
 .bg-dark {
@@ -434,23 +434,28 @@
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.7);
   z-index: 999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   pointer-events: none;
   opacity: 0;
   transition: all ease-in-out 0.3s;
+  max-height: 100vh;
   overflow: auto;
+  margin: 0 auto;
+  width: 100%;
+  text-align: center;
+  display: grid;
+  align-items: center;
 }
 
+
 .modal {
   width: 96%;
   max-width: 680px;
   transform: scale(0.5);
   opacity: 0;
   transition: all ease-in-out 0.15s;
-  margin-top: 6rem;
-  margin-bottom: 4rem;
+  margin-left: auto;
+  margin-right: auto;
+  height: fit-content;
 }
 
 .small-modal .modal {
@@ -465,7 +470,7 @@
   position: -webkit-sticky;
   position: sticky;
   padding-top: 1rem;
-  top: -2rem;
+  top: 0rem;
   z-index: 3;
   background: var(--bgl-white);
 }
@@ -478,13 +483,17 @@
   inset-inline-end: -600px;
   transform: scale(1);
   opacity: 1;
-  position: fixed;
-  top: 20px;
-  bottom: 20px;
+  /* position: fixed; */
+  /* top: 20px; */
+  /* bottom: 20px; */
   max-width: 600px;
   width: 90%;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-inline-start: auto;
+  margin-inline-end: 20px;
+  min-height: calc(100vh - 40px);
+
 }
 
 .is-active .modal {
@@ -504,6 +513,7 @@
 
 .is-side.bg-dark.is-active {
   opacity: 1;
+  align-items: stretch;
 }
 
 .is-side.is-active .modal {
@@ -512,20 +522,21 @@
 
 @media screen and (max-width: 910px) {
   .tool-bar {
-    margin: -2rem 0 1rem;
+    margin: -1rem 0rem 1rem;
+    padding-bottom: 1rem;
     align-items: center;
   }
 
   .is-active.is-side .modal {
-    inset-inline-end: 5%;
+    margin-inline-end: 5%;
+    margin-inline-start: 5%;
   }
 }
-
-.modal-title[data-v-6badff9e] {
+.modal-title[data-v-766bb68f] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-6badff9e] {
+.modal-title[data-v-766bb68f] {
 		margin-top: 1rem;
 }
 }
@@ -716,37 +727,37 @@
   border-radius: var(--btn-border-radius);
 }
 
-.list-arrows[data-v-a167604a] {
+.list-arrows[data-v-56ec9012] {
 	opacity: 0;
 }
-.list-arrows .icon-font[data-v-a167604a] {
+.list-arrows .icon-font[data-v-56ec9012] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-a167604a] {
+.list-arrows.sorted[data-v-56ec9012] {
 	opacity: 1;
 }
-.col img[data-v-a167604a] {
+.col img[data-v-56ec9012] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-a167604a] {
+.list-arrows.sorted .desc[data-v-56ec9012] {
 	transform: rotate(180deg);
 }
-table[data-v-a167604a] {
+table[data-v-56ec9012] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 }
-th[data-v-a167604a] {
+th[data-v-56ec9012] {
 	font-weight: 400;
 }
-.row[data-v-a167604a] {
+.row[data-v-56ec9012] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-a167604a] {
+.row.first-row[data-v-56ec9012] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -756,7 +767,7 @@ th[data-v-a167604a] {
 	height: 50px;
 	vertical-align: bottom;
 }
-.row.first-row[data-v-a167604a]::after {
+.row.first-row[data-v-56ec9012]::after {
 	content: "";
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -764,11 +775,11 @@ th[data-v-a167604a] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-a167604a] {
+.first-row .col[data-v-56ec9012] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-a167604a] {
+.col[data-v-56ec9012] {
 	white-space: nowrap;
 	padding: 14px;
 	transition: var(--bgl-transition);
@@ -777,16 +788,16 @@ th[data-v-a167604a] {
 	padding-right: 1rem;
 	align-items: center;
 }
-.col>div[data-v-a167604a] {
+.col>div[data-v-56ec9012] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-a167604a] {
+.max-col-width[data-v-56ec9012] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .icon-font[data-v-a167604a] {
+.col.check .icon-font[data-v-56ec9012] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -797,27 +808,27 @@ th[data-v-a167604a] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-a167604a] {
+.rows[data-v-56ec9012] {
 	font-size: 0.8125em;
 }
-.table-list[data-v-a167604a] {
+.table-list[data-v-56ec9012] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-a167604a] {
+.BagelTable .table-list[data-v-56ec9012] {
 	overflow: unset;
 }
-.row-item[data-v-a167604a] {
+.row-item[data-v-56ec9012] {
 	height: 50px;
 	transition: all 200ms ease;
 }
-.row-item[data-v-a167604a]:hover {
+.row-item[data-v-56ec9012]:hover {
 	background: var(--bgl-gray-light);
 }
-.infinite-wrapper[data-v-a167604a] {
+.infinite-wrapper[data-v-56ec9012] {
 	overflow-y: auto;
 	width: 100%;
 }
@@ -2859,10 +2870,17 @@ h6 {}
   font-weight: 600;
   font-size: 20px;
   margin-top: 0.5rem;
-  margin-bottom: 20px;
+  margin-bottom: 0 !important;
   width: 100%;
   -webkit-padding-end: 40px;
   padding-inline-end: 40px;
+  line-height: 2;
+  display: -webkit-box;
+  max-width: 100%;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .modal-footer {
   gap: 1rem;
@@ -2870,6 +2888,13 @@ h6 {}
   justify-content: space-between;
   align-items: center;
 }
+.modal-footer>div {
+  gap: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0;
+}
 * {
   box-sizing: border-box;
 }
@@ -3180,7 +3205,7 @@ h6 {}
 }
 .list-view {
   grid-area: list-view;
-  grid-template-areas: "list-header" "list-content";
+  grid-template-areas: "list-header""list-content";
   grid-template-columns: 1fr;
   overflow-y: auto;
   grid-template-rows: -webkit-max-content 1fr;
@@ -3204,7 +3229,7 @@ h6 {}
   transform: translateX(-20px);
   opacity: 0;
 }
-.grid > * {
+.grid>* {
   min-height: 0;
 }
 .view-wrapper {

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export type { MaterialIcons } from './materialIcons';
-export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
+export type { Tables, TableToTypeMapping } from '../../../sdk/src/index.ts';
 export type { StorageFile } from './file';
 export type { NavLink } from '../components/NavBar.vue';
 export * from './BtnOptions';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.237",
+  "version": "0.0.241",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -51,8 +51,8 @@
     "./vite.config.ts"
   ],
   "devDependencies": {
-    "@vue-macros/reactivity-transform": "^0.4.1",
-    "vue": "^3.4.3"
+    "@vue-macros/reactivity-transform": "^0.4.3",
+    "vue": "^3.4.15"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
@@ -113,7 +113,7 @@
     "access": "public"
   },
   "dependencies": {
-    "type-fest": "^4.10.1",
+    "type-fest": "^4.10.2",
     "vue-multiselect": "3.0.0-beta.3"
   },
   "scripts": {

package/src/components/Btn.vue

@@ -59,7 +59,10 @@ const props = withDefaults(
 );
 
 const computedTheme = $computed(
-	() => (props?.color || props?.theme),
+	() => {
+		if (props.disabled) return 'gray-light';
+		return (props?.color || props?.theme);
+	},
 );
 
 const computedDefaultColors = $computed(

package/src/components/Modal.vue

@@ -1,6 +1,8 @@
 <template>
-	<div class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
+	<div
+		class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive }"
+		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
+	>
 		<Card class="modal" @click.stop>
 			<header class="tool-bar">
 				<slot name="toolbar" />

package/src/components/ModalForm.vue

@@ -1,12 +1,39 @@
 <template>
-	<Modal :side="side" ref="modal" :dismissable="dismissable" :title="title">
-		<BagelForm v-model="formData" :schema="computedFormSchema" />
-		<template #footer v-if="onDelete || onSubmit">
+	<Modal
+		:side="side"
+		ref="modal"
+		:dismissable="dismissable"
+		:title="title"
+	>
+		<BagelForm
+			v-model="formData"
+			:schema="computedFormSchema"
+		/>
+		<template
+			#footer
+			v-if="onDelete || onSubmit"
+		>
 			<div>
-				<Btn flat value="Cancel" @click="closeModal()" />
-				<Btn 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>

package/src/components/TableSchema.vue

@@ -2,62 +2,21 @@
 	<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 }"
-						>
-							<MaterialIcon
-								:class="{ desc: sortDirection === 'DESC' }"
-								icon="keyboard_arrow_up"
-							/>
+						<div class="list-arrows" :class="{ sorted: sortField === field.id }">
+							<MaterialIcon :class="{ desc: sortDirection === 'DESC' }" icon="keyboard_arrow_up" />
 						</div>
 					</div>
 				</th>
 			</thead>
-			<tbody
-				ref="infinite"
-				class="rows infinite"
-				:class="{ loading }"
-			>
-				<tr
-					@click="selectElement(row)"
-					class="row row-item position-relative"
-					v-for="row in data"
-					:key="row.id"
-				>
-					<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"
-						/>
+			<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">
+					<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>
-							<component
-								:is="field.$el || 'div'"
-								v-if="iffer(field, row)"
-								v-bind="bindAttrs(field.attrs, denullify(row, field.id), row)"
-								:class="classify(denullify(row, field.id), row, field.class, field.attrs?.class)"
-								:src="field.$el === 'img' && field.id ? row[field.id]?.url : ''"
-								:modelValue="field.id ? row[field.id] : ''"
-								@update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(row, field.id), row)"
-							>
-								{{
-									field?.transform?.(denullify(row, field.id), row) || denullify(row, field.id) || ""
-								}}
-							</component>
+							<BglField :field="field" :modelValue="row" />
 						</div>
 					</td>
 				</tr>
@@ -71,11 +30,8 @@
 import { useSlots } from 'vue';
 import {
 	type BglFormSchemaT,
-	bindAttrs,
-	classify,
-	denullify,
 	MaterialIcon,
-	iffer,
+	BglField,
 } from '@bagelink/vue';
 
 const slots = useSlots();
@@ -93,7 +49,7 @@ const computedSchema = $computed(() => {
 	return props.schema;
 });
 
-const emit = defineEmits(['select']);
+const emit = defineEmits(['select', 'orderBy']);
 
 const selectElement = (data: Record<string, any>) => emit('select', data);
 
@@ -108,6 +64,7 @@ const sort = (fieldname: string) => {
 		sortField = fieldname;
 		sortDirection = 'ASC';
 	}
+	emit('orderBy', `${fieldname} ${sortDirection}`.trim());
 };
 </script>
 

package/src/components/form/BglField.vue

@@ -1,11 +1,26 @@
 <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="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)"
+	>
 		{{ 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>