@bagelink/vue 0.0.413 → 0.0.419

package/src/components/NavBar.vue

@@ -2,9 +2,12 @@
 	<div :class="{ open: isOpen, closed: !isOpen }">
 		<slot name="top" />
 		<div
-			class="nav-expend" @click="isOpen = !isOpen" @keypress.enter="isOpen = !isOpen" role="button"
-			aria-label="Toggle Navigation" tabindex="0"
-		>
+			class="nav-expend"
+			@click="isOpen = !isOpen"
+			@keypress.enter="isOpen = !isOpen"
+			role="button"
+			aria-label="Toggle Navigation"
+			tabindex="0">
 			<MaterialIcon icon="chevron_right" class="top-arrow" />
 		</div>
 
@@ -12,9 +15,12 @@
 			<div class="nav-scroll">
 				<div class="nav-links-wrapper">
 					<component
-						:is="link.to?'router-link':'div'" v-for="link in links" class="nav-button" :to="link.to"
-						:key="link.label" @click="link.onClick?.()"
-					>
+						:is="link.to ? 'router-link' : 'div'"
+						v-for="link in links"
+						class="nav-button"
+						:to="link.to"
+						:key="link.label"
+						@click="link.onClick?.()">
 						<MaterialIcon :icon="link.icon" />
 						<div class="tooltip">
 							{{ link.label }}
@@ -25,9 +31,12 @@
 
 			<div class="bot-buttons-wrapper">
 				<component
-					:is="link.to?'router-link':'div'" v-for="link in footerLinks" class="nav-button" :to="link.to"
-					@click="link.onClick?.()" :key="link.label"
-				>
+					:is="link.to ? 'router-link' : 'div'"
+					v-for="link in footerLinks"
+					class="nav-button"
+					:to="link.to"
+					@click="link.onClick?.()"
+					:key="link.label">
 					<MaterialIcon :icon="link.icon" />
 					<div class="tooltip">
 						{{ link.label }}
@@ -47,46 +56,46 @@ const isOpen = $ref(true);
 
 withDefaults(
 	defineProps<{
-    footerLinks?: NavLink[];
-    links?: NavLink[];
-    homeIcon?: MaterialIcons;
-    homeLabel?: string;
-    homeTo?: string;
-  }>(),
+		footerLinks?: NavLink[];
+		links?: NavLink[];
+		homeIcon?: MaterialIcons;
+		homeLabel?: string;
+		homeTo?: string;
+	}>(),
 	{
 		homeIcon: 'home',
 		homeLabel: 'Home',
 		homeTo: '/',
 		links: () => [],
 		footerLinks: () => [],
-	},
+	}
 );
 </script>
 
 <style scoped>
-[dir="rtl"] .top-arrow {
-  transform: rotate(180deg);
+[dir='rtl'] .top-arrow {
+	transform: rotate(180deg);
 }
 
 .nav-expend {
-  text-align: center;
-  cursor: pointer;
-  background: var(--bgl-white);
-  color: var(--bgl-primary);
-  display: flex;
-  border-radius: 100%;
-  font-size: 13px;
-  box-shadow: 0 0 50px 0 var(--bgl-shadow);
-  height: 22px;
-  width: 22px;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 82px;
-  box-sizing: border-box;
-  padding-inline-start: 2px;
-  margin-inline-start: 55px;
-  transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
+	text-align: center;
+	cursor: pointer;
+	background: var(--bgl-white);
+	color: var(--bgl-primary);
+	display: flex;
+	border-radius: 100%;
+	font-size: 13px;
+	box-shadow: 0 0 50px 0 var(--bgl-shadow);
+	height: 22px;
+	width: 22px;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	top: 82px;
+	box-sizing: border-box;
+	padding-inline-start: 2px;
+	margin-inline-start: 55px;
+	transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
 }
 
 /*
@@ -96,260 +105,260 @@ withDefaults(
 */
 
 .nav-expend {
-  background: var(--bgl-white);
+	background: var(--bgl-white);
 }
 
 .nav-expend:hover {
-  filter: brightness(95%);
-  box-shadow: 0 0 20px 0 var(--bgl-primary-tint);
+	filter: brightness(95%);
+	box-shadow: 0 0 20px 0 var(--bgl-primary-tint);
 }
 
 .nav-expend:active {
-  filter: var(--bgl-active-filter);
+	filter: var(--bgl-active-filter);
 }
 
 .nav {
-  color: var(--bgl-white);
-  background: var(--bgl-primary);
-  z-index: 100;
-  width: 70px;
-  transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
-  display: flex;
-  flex-direction: column;
+	color: var(--bgl-white);
+	background: var(--bgl-primary);
+	z-index: 100;
+	width: 70px;
+	transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
+	display: flex;
+	flex-direction: column;
 }
 
 .nav * {
-  user-select: none;
+	user-select: none;
 }
 
 .nav-button {
-  text-decoration: none;
-  cursor: pointer;
-  display: flex;
-  text-align: start;
-  align-items: center;
-  position: relative;
-  color: var(--bgl-white);
-  transition: all 0.2s ease;
-  pointer-events: none;
+	text-decoration: none;
+	cursor: pointer;
+	display: flex;
+	text-align: start;
+	align-items: center;
+	position: relative;
+	color: var(--bgl-white);
+	transition: all 0.2s ease;
+	pointer-events: none;
 }
 
 .nav-button:hover {
-  width: fit-content;
-  pointer-events: all;
+	width: fit-content;
+	pointer-events: all;
 }
 
 .nav-button .bgl_icon-font {
-  font-size: 22px;
-  margin: 0.25rem 10px;
-  padding: 10px;
-  width: 50px;
-  text-align: center;
-  height: 45px;
-  flex-grow: 0;
-  flex-shrink: 0;
-  border-radius: 10px;
-  transition: all 0.2s ease;
-  pointer-events: all;
+	font-size: 22px;
+	margin: 0.25rem 10px;
+	padding: 10px;
+	width: 50px;
+	text-align: center;
+	height: 45px;
+	flex-grow: 0;
+	flex-shrink: 0;
+	border-radius: 10px;
+	transition: all 0.2s ease;
+	pointer-events: all;
 }
 
 .nav-button:hover .bgl_icon-font,
 .nav-button.router-link-active .bgl_icon-font {
-  background: var(--bgl-white);
-  color: var(--bgl-primary);
+	background: var(--bgl-white);
+	color: var(--bgl-primary);
 }
 
 .nav-button:hover .tooltip {
-  opacity: 1;
-  pointer-events: all;
+	opacity: 1;
+	pointer-events: all;
 }
 
 .tooltip {
-  background-color: var(--bgl-white);
-  color: var(--bgl-primary);
-  line-height: 1;
-  padding: 0.5rem;
-  border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-  transition: all 0.2s ease;
-  border: 5px solid transparent;
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  margin-inline-start: 1rem;
+	background-color: var(--bgl-white);
+	color: var(--bgl-primary);
+	line-height: 1;
+	padding: 0.5rem;
+	border-radius: 10px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+	transition: all 0.2s ease;
+	border: 5px solid transparent;
+	white-space: nowrap;
+	pointer-events: none;
+	opacity: 0;
+	margin-inline-start: 1rem;
 }
 
 .tooltip:hover {
-  filter: brightness(95%);
+	filter: brightness(95%);
 }
 
 .tooltip:active {
-  filter: brightness(90%);
+	filter: brightness(90%);
 }
 
 .bot-buttons-wrapper {
-  margin-top: auto;
-  width: 100%;
+	margin-top: auto;
+	width: 100%;
 }
 
 .nav-links-wrapper {
-  direction: ltr;
+	direction: ltr;
 }
 
-[dir="rtl"] .nav-links-wrapper {
-  direction: rtl;
+[dir='rtl'] .nav-links-wrapper {
+	direction: rtl;
 }
 
 .nav-scroll {
-  overflow-y: scroll;
-  width: 50vw;
-  direction: rtl;
-  text-align: end;
-  margin-inline-end: -7px;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
+	overflow-y: scroll;
+	width: 50vw;
+	direction: rtl;
+	text-align: end;
+	margin-inline-end: -7px;
+	pointer-events: none;
+	display: flex;
+	flex-direction: column;
 }
 
 .nav::-webkit-scrollbar-thumb {
-  background-color: transparent;
+	background-color: transparent;
 }
 
 .nav:hover::-webkit-scrollbar-thumb {
-  background-color: var(--bgl-gray);
+	background-color: var(--bgl-gray);
 }
 
-[dir="rtl"] .nav-scroll {
-  direction: ltr;
+[dir='rtl'] .nav-scroll {
+	direction: ltr;
 }
 
 .full-nav {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
 }
 
 @media screen and (min-width: 910px) {
-  .nav.open .nav-expend {
-    margin-inline-start: 189px;
-    transform: rotate(180deg);
-  }
-
-  .nav.open {
-    width: 200px;
-    text-align: start;
-  }
-
-  .nav.open .tooltip {
-    background-color: transparent;
-    color: var(--bgl-white);
-    padding: 0;
-    box-shadow: none;
-    pointer-events: all;
-    opacity: 1;
-    margin-inline-start: 0rem;
-  }
-
-  .nav.open .nav-button .bgl_icon-font {
-    margin: 0;
-    background: transparent;
-  }
-
-  .nav.open .nav-button {
-    width: 180px;
-    border-radius: 10px;
-    margin-inline-start: 10px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
-
-  .nav.open .nav-button:hover,
-  .nav.open .nav-button.router-link-active {
-    background: var(--bgl-white);
-    color: var(--bgl-primary);
-  }
-
-  .nav.open .nav-button:hover,
-  .nav.open .nav-button:hover .tooltip,
-  .nav.open .nav-button.router-link-active .tooltip {
-    color: var(--bgl-primary);
-  }
+	.nav.open .nav-expend {
+		margin-inline-start: 189px;
+		transform: rotate(180deg);
+	}
+
+	.nav.open {
+		width: 200px;
+		text-align: start;
+	}
+
+	.nav.open .tooltip {
+		background-color: transparent;
+		color: var(--bgl-white);
+		padding: 0;
+		box-shadow: none;
+		pointer-events: all;
+		opacity: 1;
+		margin-inline-start: 0rem;
+	}
+
+	.nav.open .nav-button .bgl_icon-font {
+		margin: 0;
+		background: transparent;
+	}
+
+	.nav.open .nav-button {
+		width: 180px;
+		border-radius: 10px;
+		margin-inline-start: 10px;
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
+
+	.nav.open .nav-button:hover,
+	.nav.open .nav-button.router-link-active {
+		background: var(--bgl-white);
+		color: var(--bgl-primary);
+	}
+
+	.nav.open .nav-button:hover,
+	.nav.open .nav-button:hover .tooltip,
+	.nav.open .nav-button.router-link-active .tooltip {
+		color: var(--bgl-primary);
+	}
 }
 
 @media screen and (max-width: 910px) {
-  .full-nav {
-    height: auto;
-    display: flex;
-    flex-direction: row;
-    width: calc(100vw - 70px);
-    position: absolute;
-    inset-inline-end: 0;
-    overflow-x: auto;
-  }
-
-  .nav.open {
-    width: initial;
-  }
-
-  .nav {
-    width: auto;
-    display: flex;
-    flex-direction: row;
-    margin: 0;
-    overflow-x: auto;
-    justify-content: flex-start;
-  }
-
-  .tooltip {
-    opacity: 1;
-    background: transparent;
-    color: var(--bgl-white);
-    box-shadow: none;
-    font-size: 10px;
-    padding: 0;
-    margin: 0;
-  }
-
-  .nav-button {
-    flex-direction: column;
-    margin: 12px 0.25rem;
-  }
-
-  .nav-button .bgl_icon-font {
-    padding: 2px 0 0 0;
-    margin: 0;
-    height: 30px;
-    width: 30px;
-  }
-
-  .nav-links-wrapper {
-    display: flex;
-  }
-
-  .bot-buttons-wrapper {
-    margin-top: 0;
-    width: auto;
-    display: flex;
-  }
-
-  .nav-scroll {
-    overflow-y: visible;
-    width: auto;
-    direction: auto;
-    text-align: start;
-    margin-inline-end: 0px;
-    pointer-events: all;
-    display: flex;
-    flex-direction: row;
-    margin-inline-end: auto;
-  }
-
-  .nav::-webkit-scrollbar {
-    display: none;
-  }
-
-  .nav-expend {
-    display: none;
-  }
+	.full-nav {
+		height: auto;
+		display: flex;
+		flex-direction: row;
+		width: calc(100vw - 70px);
+		position: absolute;
+		inset-inline-end: 0;
+		overflow-x: auto;
+	}
+
+	.nav.open {
+		width: initial;
+	}
+
+	.nav {
+		width: auto;
+		display: flex;
+		flex-direction: row;
+		margin: 0;
+		overflow-x: auto;
+		justify-content: flex-start;
+	}
+
+	.tooltip {
+		opacity: 1;
+		background: transparent;
+		color: var(--bgl-white);
+		box-shadow: none;
+		font-size: 10px;
+		padding: 0;
+		margin: 0;
+	}
+
+	.nav-button {
+		flex-direction: column;
+		margin: 12px 0.25rem;
+	}
+
+	.nav-button .bgl_icon-font {
+		padding: 2px 0 0 0;
+		margin: 0;
+		height: 30px;
+		width: 30px;
+	}
+
+	.nav-links-wrapper {
+		display: flex;
+	}
+
+	.bot-buttons-wrapper {
+		margin-top: 0;
+		width: auto;
+		display: flex;
+	}
+
+	.nav-scroll {
+		overflow-y: visible;
+		width: auto;
+		direction: auto;
+		text-align: start;
+		margin-inline-end: 0px;
+		pointer-events: all;
+		display: flex;
+		flex-direction: row;
+		margin-inline-end: auto;
+	}
+
+	.nav::-webkit-scrollbar {
+		display: none;
+	}
+
+	.nav-expend {
+		display: none;
+	}
 }
 </style>

package/src/components/TableSchema.vue

@@ -21,13 +21,16 @@
 			</thead>
 			<tbody ref="infinite" class="rows infinite" :class="{ loading }">
 				<tr
-					v-for="row in data"
+					v-for="row in computedData"
 					:key="row.id"
 					@click="selectElement(row)"
 					class="row row-item position-relative">
 					<td
 						class="col"
-						v-for="field in computedSchema"
+						v-for="field in computedSchema.map((c) => ({
+							...c,
+							transform: undefined,
+						}))"
 						:key="`${field.id}-${row.id}`">
 						<slot
 							v-if="field.id && slots[field.id]"
@@ -74,9 +77,9 @@ const computedSchema = $computed(() => {
 
 const emit = defineEmits(['select', 'orderBy']);
 
-const selectElement = (data: Record<string, any>) => emit('select', data);
+const selectElement = (item: Record<string, any>) => emit('select', item);
 
-let sortDirection = $ref('');
+let sortDirection = $ref('ASC');
 let sortField = $ref('');
 
 const sort = (fieldname: string) => {
@@ -89,6 +92,33 @@ const sort = (fieldname: string) => {
 	}
 	emit('orderBy', `${fieldname} ${sortDirection}`.trim());
 };
+
+const transform = (rowData: any) => {
+	const obj: Record<string, any> = { ...rowData };
+	for (const field of computedSchema.filter((f) => f.id)) {
+		const fieldData = rowData[field.id as string];
+		obj[field.id as string] =
+			field.transform?.(fieldData, rowData) || fieldData || '';
+	}
+	return obj;
+};
+
+const computedData = $computed(() => {
+	const dta = [...props.data].map(transform);
+	if (sortField) {
+		return dta.sort((a, b) => {
+			const aValue = a[sortField];
+			const bValue = b[sortField];
+			if (typeof aValue === 'string') {
+				if (sortDirection === 'ASC') return aValue.localeCompare(bValue);
+				return bValue.localeCompare(aValue);
+			}
+			if (sortDirection === 'ASC') return aValue < bValue ? -1 : 1;
+			return aValue < bValue ? 1 : -1;
+		});
+	}
+	return dta;
+});
 </script>
 
 <style scoped>

package/src/components/form/BglForm.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useSlots } from 'vue';
+import { useSlots, watch } from 'vue';
 import { useModal, BglField, Title } from '@bagelink/vue';
 
 import { type BglFormSchemaT } from '@bagelink/vue';
@@ -61,7 +61,7 @@ let data = $computed({
 		formData = val;
 		emit('update:modelValue', val);
 	},
-	get: () => formData,
+	get: () => props.modelValue || formData,
 });
 const form = $ref<HTMLFormElement>();
 
@@ -71,12 +71,22 @@ const clearForm = () => (data = {});
 
 type FormStatus = 'idle' | 'loading' | 'success' | 'error';
 
+watch(
+	() => props.status,
+	(status) => {
+		if (status === 'success') {
+			isDirty = false;
+			clearForm();
+		}
+	},
+	{ immediate: true }
+);
+
 const runSubmit = () => {
 	const isValid = validateForm();
 	if (!isValid) return;
 	// props.onSubmit?.(data);
 	emit('submit', data);
-	clearForm();
 };
 
 const i18nT = (val: string) => val;

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

@@ -54,6 +54,7 @@ const checked = defineModel<boolean>('modelValue', { default: false });
   transition: var(--bgl-transition);
   cursor: pointer;
   user-select: none;
+  font-size: var(--input-font-size);
 }
 
 .bgl-checkbox:hover {