@bagelink/vue 0.0.413 → 0.0.419

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/RadioPillsInput.vue

@@ -7,12 +7,12 @@
 			<div class="radio-pill" v-for="(option, index) in options" :key="index">
 				<input
 					type="radio"
-					:id="getValue(option)"
+					:id="`${id}-${getValue(option)}`"
 					:name="id"
 					:value="getValue(option)"
 					:checked="selectedValue === getValue(option)"
 					@change="handleSelect" />
-				<label :for="getValue(option)">{{ getLabel(option) }}</label>
+				<label :for="`${id}-${getValue(option)}`">{{ getLabel(option) }}</label>
 			</div>
 		</div>
 	</div>
@@ -41,12 +41,19 @@ const getValue = (option: Option) => {
 	return option.value;
 };
 
-const props = defineProps<{
-	options?: Option[];
-	modelValue?: any;
-	id?: string;
-	label?: string;
-}>();
+const props = withDefaults(
+	defineProps<{
+		options?: Option[];
+		modelValue?: any;
+		id?: string;
+		label?: string;
+	}>(),
+	{
+		modelValue: '',
+		id: () => `radio-pill-${Math.random().toString(36).substr(2, 9)}`,
+		label: '',
+	}
+);
 
 let selectedValue = $ref('');
 

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

@@ -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,9 +177,9 @@ 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;
 }
 
@@ -187,11 +189,11 @@ watch(
 		if (!props.multiselect) {
 			const newOption =
 				props.options.find((o) => getValue(o) === newVal) || newVal;
-			if (!isSelected(newOption)) selectedItems = [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());
 			}
 		}
 	},
@@ -201,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)
 			);