@bagelink/vue 0.0.237 → 0.0.239

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 {
@@ -521,11 +521,11 @@
   }
 }
 
-.modal-title[data-v-6badff9e] {
+.modal-title[data-v-6b6bbb1b] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-6badff9e] {
+.modal-title[data-v-6b6bbb1b] {
 		margin-top: 1rem;
 }
 }
@@ -716,37 +716,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 +756,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 +764,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 +777,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 +797,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%;
 }
@@ -2870,6 +2870,12 @@ h6 {}
   justify-content: space-between;
   align-items: center;
 }
+.modal-footer>div {
+  gap: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 * {
   box-sizing: border-box;
 }
@@ -3180,7 +3186,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 +3210,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.239",
   "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

@@ -3,8 +3,8 @@
 		<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()" />
 		</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/styles/theme.css

@@ -100,6 +100,13 @@
   align-items: center;
 }
 
+.modal-footer>div {
+  gap: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -468,7 +475,7 @@
 
 .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;
@@ -498,7 +505,7 @@
   opacity: 0;
 }
 
-.grid > * {
+.grid>* {
   min-height: 0;
 }
 
@@ -606,4 +613,4 @@
     -webkit-margin-start: 0.5rem;
     margin-inline-start: 0.5rem;
   }
-}
+}

package/tsconfig.json

@@ -1,8 +1,9 @@
 {
+
 	"compilerOptions": {
 		"target": "ESNext",
 		"baseUrl": ".",
-		"rootDir": ".",
+		"rootDir": "..",
 		"module": "ESNext",
 		"strict": true,
 		"jsx": "preserve",
@@ -29,6 +30,9 @@
 			"@vue-macros/reactivity-transform/macros-global"
 		],
 		"paths": {
+			"@bagelink/sdk": [
+				"../sdk/src/index.ts"
+			],
 			"@bagelink/vue": [
 				"./src/index.ts"
 			],
@@ -41,6 +45,6 @@
 		"**/**/*.ts",
 		"**/**/*.vue",
 		"**/**/*.d.ts",
-		"./vite.config.ts",
-	]
+		"./vite.config.ts"
+	],
 }