@bagelink/vue 0.0.384 → 0.0.392

package/src/components/TableSchema.vue

@@ -2,21 +2,44 @@
 	<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.label || keyToLabel(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 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" />
+				<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>
-							<BglField :field="field" :modelValue="row" />
+							<BglField
+								class="embedded-field"
+								:field="field"
+								:modelValue="row"
+								label="" />
 						</div>
 					</td>
 				</tr>
@@ -38,8 +61,8 @@ const slots = useSlots();
 const loading = $ref(true);
 
 const props = defineProps<{
-  data: any[];
-  schema: BglFormSchemaT | (() => BglFormSchemaT);
+	data: any[];
+	schema: BglFormSchemaT | (() => BglFormSchemaT);
 }>();
 
 const computedSchema = $computed(() => {
@@ -70,126 +93,131 @@ const sort = (fieldname: string) => {
 
 <style scoped>
 .list-arrows {
-  opacity: 0;
+	opacity: 0;
 }
 
 .list-arrows .bgl_icon-font {
-  transition: all ease-in-out 0.2s;
+	transition: all ease-in-out 0.2s;
 }
 
 .list-arrows.sorted {
-  opacity: 1;
+	opacity: 1;
 }
 
 .col img {
-  height: 35px;
-  margin-top: -14px;
-  margin-bottom: -14px;
-  border-radius: 5px;
+	height: 35px;
+	margin-top: -14px;
+	margin-bottom: -14px;
+	border-radius: 5px;
 }
 
 .list-arrows.sorted .desc {
-  transform: rotate(180deg);
+	transform: rotate(180deg);
 }
 
 table {
-  border-collapse: separate;
-  border-spacing: 0 15px;
-  border-collapse: collapse;
+	border-collapse: separate;
+	border-spacing: 0 15px;
+	border-collapse: collapse;
 }
 
 th {
-  font-weight: 400;
+	font-weight: 400;
+}
+
+.embedded-field {
+	margin-bottom: -0.2rem;
+	margin-top: -0.2rem;
 }
 
 .row {
-  border-bottom: 1px solid var(--border-color);
-  cursor: pointer;
+	border-bottom: 1px solid var(--border-color);
+	cursor: pointer;
 }
 
 .row.first-row {
-  font-size: 0.8rem;
-  color: var(--bgl-black-tint);
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  background: var(--bgl-white);
-  height: 50px;
-  vertical-align: bottom;
+	font-size: 0.8rem;
+	color: var(--bgl-black-tint);
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background: var(--bgl-white);
+	height: 50px;
+	vertical-align: bottom;
 }
 
 .row.first-row::after {
-  content: "";
-  border-bottom: 1px solid var(--border-color);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
+	content: '';
+	border-bottom: 1px solid var(--border-color);
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: -1px;
 }
 
 .first-row .col {
-  cursor: pointer;
-  background: var(--bgl-white);
+	cursor: pointer;
+	background: var(--bgl-white);
 }
 
 .col {
-  white-space: nowrap;
-padding: 0.75rem 0.5rem;
-  transition: var(--bgl-transition);
-  line-height: 1;
-  align-items: center;
+	white-space: nowrap;
+	padding: 0.75rem 0.5rem;
+	transition: var(--bgl-transition);
+	line-height: 1;
+	align-items: center;
 }
 
-.col>div {
-  display: flex;
-  gap: 0.5rem;
+.col > div {
+	display: flex;
+	gap: 0.5rem;
 }
 
 .max-col-width {
-  max-width: 30vw;
-  overflow: hidden;
-  text-overflow: ellipsis;
+	max-width: 30vw;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .col.check .bgl_icon-font {
-  border-radius: 100%;
-  background: var(--bgl-blue-20);
-  color: var(--bgl-primary);
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: -2px;
+	border-radius: 100%;
+	background: var(--bgl-blue-20);
+	color: var(--bgl-primary);
+	width: 20px;
+	height: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: -2px;
 }
 
 .rows {
-  font-size: 0.8125em;
+	font-size: 0.8125em;
 }
 
 .table-list {
-  height: 100%;
-  position: relative;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  overflow: auto;
+	height: 100%;
+	position: relative;
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+	overflow: auto;
 }
 
 .BagelTable .table-list {
-  overflow: unset;
+	overflow: unset;
 }
 
 .row-item {
-  height: 50px;
-  transition: all 200ms ease;
+	height: 50px;
+	transition: all 200ms ease;
 }
 
 .row-item:hover {
-  background: var(--bgl-gray-light);
+	background: var(--bgl-gray-light);
 }
 
 .infinite-wrapper {
-  overflow-y: auto;
-  width: 100%;
+	overflow-y: auto;
+	width: 100%;
 }
 </style>

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

@@ -1,19 +1,18 @@
 <template>
 	<div class="bagel-input">
-		<label class="pb-025" >
-			{{ label  }}
+		<label class="pb-025">
+			{{ label }}
 		</label>
 		<div class="flex gap-05 flex-wrap">
-			<div class="radio-pill" v-for="({optioId,label,value}, index) in cumputedOptions" :key="index">
+			<div class="radio-pill" v-for="(option, index) in options" :key="index">
 				<input
 					type="radio"
-					:id="optioId"
+					:id="getValue(option)"
 					:name="id"
-					:value="value"
-					:checked="selectedValue === value"
-					@change="handleSelect"
-				>
-				<label :for="optioId">{{ label }}</label>
+					:value="getValue(option)"
+					:checked="selectedValue === getValue(option)"
+					@change="handleSelect" />
+				<label :for="getValue(option)">{{ getLabel(option) }}</label>
 			</div>
 		</div>
 	</div>
@@ -22,27 +21,33 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue';
 
-interface RadioOption {
-	optioId: string;
-	label: string;
-	value: any;
-}
+type Option =
+	| string
+	| number
+	| Record<string, any>
+	| { label: string; value: string | number };
+
 const emits = defineEmits(['update:modelValue']);
 
+const getLabel = (option: Option) => {
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return `${option}`;
+	return option.label;
+};
+
+const getValue = (option: Option) => {
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return option;
+	return option.value;
+};
+
 const props = defineProps<{
-	options?: RadioOption[],
-	stringOptions: string[],
-	modelValue: any,
-	id?: string,
-	label?: string,
+	options?: Option[];
+	modelValue: any;
+	id?: string;
+	label?: string;
 }>();
 
-const cumputedOptions = $computed(() => props.options || props.stringOptions.map((v) => ({
-	optioId: v,
-	label: v,
-	value: v,
-})));
-
 let selectedValue = $ref('');
 
 function handleSelect(e: Event) {
@@ -56,7 +61,7 @@ watch(
 		if (newVal === oldVal || oldVal === undefined) return;
 		if (selectedValue !== newVal) selectedValue = newVal;
 	},
-	{ immediate: true },
+	{ immediate: true }
 );
 
 onMounted(() => {
@@ -66,30 +71,30 @@ onMounted(() => {
 
 <style scoped>
 .radio-pill label {
-  color: var(--bgl-primary);
-  white-space: nowrap;
-  border-radius: calc(var(--btn-border-radius) * 2);
-  outline: 1px solid var(--bgl-primary);
-  padding-left: calc(var(--btn-padding) / 2);
-  padding-right: calc(var(--btn-padding) / 2);
-  padding-top: calc(var(--btn-padding) / 6);
-  padding-bottom: calc(var(--btn-padding) / 6);
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  background: var(--bgl-white);
-  user-select: none;
+	color: var(--bgl-primary);
+	white-space: nowrap;
+	border-radius: calc(var(--btn-border-radius) * 2);
+	outline: 1px solid var(--bgl-primary);
+	padding-left: calc(var(--btn-padding) / 2);
+	padding-right: calc(var(--btn-padding) / 2);
+	padding-top: calc(var(--btn-padding) / 6);
+	padding-bottom: calc(var(--btn-padding) / 6);
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	background: var(--bgl-white);
+	user-select: none;
 }
 
 .radio-pill label:hover {
-  filter: var(--bgl-hover-filter);
+	filter: var(--bgl-hover-filter);
 }
 
 .radio-pill input {
-  display: none;
+	display: none;
 }
 
-.radio-pill input:checked~label {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
+.radio-pill input:checked ~ label {
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 </style>

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

@@ -173,12 +173,16 @@ watch(
 	(newVal: Option | Option[]) => {
 		if (!newVal) return;
 		if (!props.multiselect) {
-			if (!isSelected(newVal))
-				selectedItems.splice(0, selectedItems.length, newVal);
+			const newOption =
+				props.options.find((o) => getValue(o) === newVal) || newVal;
+			if (!isSelected(newOption)) {
+				selectedItems.splice(0, selectedItems.length, newOption);
+			}
 		} else {
 			const isSame = compareArrays([newVal].flat(), selectedItems);
-			if (!isSame)
+			if (!isSame) {
 				selectedItems.splice(0, selectedItems.length, [newVal].flat());
+			}
 		}
 	},
 	{ immediate: true }
@@ -187,15 +191,14 @@ watch(
 watch(
 	() => props.options,
 	() => {
-		const original = JSON.stringify(selectedItems);
+		const original = JSON.stringify(props.options.map(getValue));
 		[...selectedItems].forEach((option, i) => {
 			const exists = props.options.find(
 				(o) => getValue(o) === getValue(option)
 			);
-			if (!exists) selectedItems.splice(i, 1);
-			else selectedItems.splice(i, 1, exists);
+			selectedItems.splice(i, 1, exists);
 		});
-		const newSelection = JSON.stringify(selectedItems);
+		const newSelection = JSON.stringify(selectedItems.map(getValue));
 		if (original !== newSelection) emitUpdate();
 	}
 );

package/src/styles/modal.css

@@ -13,7 +13,6 @@
 	overflow: auto;
 	margin: 0 auto;
 	width: 100%;
-	text-align: center;
 	display: grid;
 	align-items: center;
 }
@@ -25,9 +24,9 @@
 .modal {
 	width: 96%;
 	max-width: 720px;
-	transform: scale(0.5);
-	opacity: 0;
-	transition: all ease-in-out 0.15s;
+	/* transform: scale(0.5); */
+	/* opacity: 0; */
+	transition: all ease-in-out 0.18s;
 	margin-left: auto;
 	margin-right: auto;
 	height: fit-content;
@@ -55,7 +54,7 @@
 }
 
 .is-side .modal {
-	inset-inline-end: -600px;
+	inset-inline-end: -1720px;
 	transform: scale(1);
 	opacity: 1;
 	/* position: fixed; */
@@ -87,7 +86,7 @@
 }
 
 .is-active.is-side .modal {
-	inset-inline-end: 20px;
+	inset-inline-end: 0px;
 	transform: translateX(0%);
 }