mirror of
https://github.com/hay-kot/homebox.git
synced 2024-11-16 13:48:44 +00:00
fix: auto-select bug (#59)
This commit is contained in:
parent
ae73b194c4
commit
889197994b
3 changed files with 26 additions and 38 deletions
|
@ -42,50 +42,31 @@
|
|||
default: null,
|
||||
required: false,
|
||||
},
|
||||
selectFirst: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
function syncSelect() {
|
||||
if (!props.modelValue) {
|
||||
if (props.selectFirst) {
|
||||
selectedIdx.value = 0;
|
||||
}
|
||||
return;
|
||||
}
|
||||
// Check if we're already synced
|
||||
if (props.value) {
|
||||
if (props.modelValue[props.value] === props.items[selectedIdx.value][props.value]) {
|
||||
return;
|
||||
}
|
||||
} else if (props.modelValue === props.items[selectedIdx.value]) {
|
||||
return;
|
||||
}
|
||||
const selectedIdx = ref(-1);
|
||||
const internalSelected = useVModel(props, "modelValue", emit);
|
||||
|
||||
const idx = props.items.findIndex(item => {
|
||||
if (props.value) {
|
||||
return item[props.value] === props.modelValue;
|
||||
}
|
||||
return item === props.modelValue;
|
||||
});
|
||||
watch(selectedIdx, newVal => {
|
||||
internalSelected.value = props.items[newVal];
|
||||
});
|
||||
|
||||
selectedIdx.value = idx;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
function compare(a: any, b: any): boolean {
|
||||
if (props.value != null) {
|
||||
return a[props.value] === b[props.value];
|
||||
}
|
||||
return a === b;
|
||||
}
|
||||
|
||||
watch(() => props.items, syncSelect);
|
||||
watch(() => props.modelValue, syncSelect);
|
||||
|
||||
const selectedIdx = ref(0);
|
||||
watch(
|
||||
() => selectedIdx.value,
|
||||
internalSelected,
|
||||
() => {
|
||||
if (props.value) {
|
||||
emit("update:modelValue", props.items[selectedIdx.value][props.value]);
|
||||
return;
|
||||
}
|
||||
emit("update:modelValue", props.items[selectedIdx.value]);
|
||||
const idx = props.items.findIndex(item => compare(item, internalSelected.value));
|
||||
selectedIdx.value = idx;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<BaseModal v-model="modal">
|
||||
<template #title> Create Item </template>
|
||||
<form @submit.prevent="create">
|
||||
<FormSelect v-model="form.location" label="Location" :items="locations ?? []" select-first />
|
||||
<FormSelect v-model="form.location" label="Location" :items="locations ?? []" />
|
||||
<FormTextField
|
||||
ref="locationNameRef"
|
||||
v-model="form.name"
|
||||
|
|
|
@ -30,6 +30,13 @@
|
|||
return;
|
||||
}
|
||||
|
||||
if (locations) {
|
||||
const location = locations.value.find(l => l.id === data.location.id);
|
||||
if (location) {
|
||||
data.location = location;
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
});
|
||||
onMounted(() => {
|
||||
|
@ -308,7 +315,7 @@
|
|||
</template>
|
||||
</BaseSectionHeader>
|
||||
<div class="px-5 mb-6 grid md:grid-cols-2 gap-4">
|
||||
<FormSelect v-model="item.location" label="Location" :items="locations ?? []" select-first />
|
||||
<FormSelect v-if="item" v-model="item.location" label="Location" :items="locations ?? []" />
|
||||
<FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" />
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in a new issue