@bagelink/vue 0.0.411 → 0.0.417

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 {

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

@@ -5,6 +5,7 @@
 				inline
 				week-start="0"
 				v-model="selectedDate"
+				:auto-apply="true"
 				:highlight-week-days="[6]"
 				:enable-time-picker="false"
 				:month-change-on-scroll="false"
@@ -31,13 +32,23 @@
 import VDatepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
-defineProps<{
+const props = defineProps<{
 	label?: string;
 	id?: string;
 	options?: Record<string, any>;
 	showTimeWrap?: boolean;
+	modelValue?: Date;
 }>();
-const selectedDate = $ref(null);
+
+const emit = defineEmits(['update:modelValue']);
+
+const selectedDate = $computed({
+	get: () => props.modelValue || new Date(),
+	set: (value: Date) => {
+		console.log(value);
+		emit('update:modelValue', value);
+	},
+});
 const selectedHour = $ref();
 
 const hours = Array.from({ length: 18 }, (_, index) => {

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

@@ -82,7 +82,7 @@ const props = defineProps<{
 	multiselect?: boolean;
 }>();
 
-const selectedItems = $ref<Option[]>([]);
+let selectedItems = $ref<Option[]>([]);
 let search = $ref('');
 
 const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null);
@@ -156,17 +156,19 @@ const select = (option: Option) => {
 	);
 	if (existingIndex > -1) selectedItems.splice(existingIndex, 1);
 	else if (props.multiselect) {
-		selectedItems.push(option);
-	} else {
-		selectedItems.splice(0, selectedItems.length, option);
-	}
+		const current = [...selectedItems];
+		current.push(option);
+
+		selectedItems = current;
+	} else selectedItems.splice(0, selectedItems.length, option);
+
 	if (!props.multiselect) dropdown?.hide();
 	emitUpdate();
 };
 
 function emitUpdate() {
 	if (props.multiselect) {
-		emit('update:modelValue', selectedItems.map(getValue));
+		emit('update:modelValue', selectedItems.map(getValue).filter(Boolean));
 	} else {
 		selectedItems.splice(1, selectedItems.length - 1);
 		const [item] = selectedItems;
@@ -175,26 +177,23 @@ function emitUpdate() {
 }
 
 function compareArrays(arr1: Option[], arr2: Option[]) {
-	const isSame = arr1.every((item: Option) =>
-		arr2.map((a) => getValue(a)).includes(getValue(item))
-	);
+	const arr1Values = [...arr1].map((a) => getValue(a)).filter(Boolean);
+	const arr2Values = [...arr2].map((a) => getValue(a)).filter(Boolean);
+	const isSame = arr1Values.every((item: Option) => arr2Values.includes(item));
 	return isSame;
 }
 
 watch(
 	() => props.modelValue,
 	(newVal: Option | Option[]) => {
-		console.log('watch');
 		if (!props.multiselect) {
 			const newOption =
 				props.options.find((o) => getValue(o) === newVal) || newVal;
-			if (isSelected(newOption)) {
-				selectedItems.splice(0, selectedItems.length, newOption);
-			}
+			if (newOption && !isSelected(newOption)) selectedItems = [newOption];
 		} else {
 			const isSame = compareArrays([newVal].flat(), selectedItems);
 			if (!isSame) {
-				selectedItems.splice(0, selectedItems.length, [newVal].flat());
+				selectedItems.splice(0, selectedItems.length, ...[newVal].flat());
 			}
 		}
 	},
@@ -204,7 +203,7 @@ watch(
 watch(
 	() => props.options,
 	() => {
-		[...selectedItems].forEach((option, i) => {
+		selectedItems.forEach((option, i) => {
 			const exists = props.options.find(
 				(o) => getValue(o) === getValue(option)
 			);