|
@@ -15,11 +15,13 @@
|
|
<v-remixicon name="riSearch2Line" />
|
|
<v-remixicon name="riSearch2Line" />
|
|
</button>
|
|
</button>
|
|
<ui-autocomplete
|
|
<ui-autocomplete
|
|
|
|
+ ref="autocompleteEl"
|
|
:model-value="state.query"
|
|
:model-value="state.query"
|
|
:items="state.autocompleteItems"
|
|
:items="state.autocompleteItems"
|
|
:custom-filter="searchNodes"
|
|
:custom-filter="searchNodes"
|
|
item-key="id"
|
|
item-key="id"
|
|
item-label="name"
|
|
item-label="name"
|
|
|
|
+ @cancel="blurInput"
|
|
@select="onSelectItem"
|
|
@select="onSelectItem"
|
|
@selected="onItemSelected"
|
|
@selected="onItemSelected"
|
|
>
|
|
>
|
|
@@ -51,7 +53,7 @@
|
|
</template>
|
|
</template>
|
|
<script setup>
|
|
<script setup>
|
|
/* eslint-disable vue/no-mutating-props */
|
|
/* eslint-disable vue/no-mutating-props */
|
|
-import { reactive } from 'vue';
|
|
|
|
|
|
+import { reactive, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useShortcut } from '@/composable/shortcut';
|
|
import { useShortcut } from '@/composable/shortcut';
|
|
|
|
|
|
@@ -71,6 +73,8 @@ const initialState = {
|
|
canvasX: 0,
|
|
canvasX: 0,
|
|
canvasY: 0,
|
|
canvasY: 0,
|
|
};
|
|
};
|
|
|
|
+
|
|
|
|
+const autocompleteEl = ref(null);
|
|
const state = reactive({
|
|
const state = reactive({
|
|
query: '',
|
|
query: '',
|
|
active: false,
|
|
active: false,
|
|
@@ -142,12 +146,16 @@ function clearState() {
|
|
canvasY: 0,
|
|
canvasY: 0,
|
|
});
|
|
});
|
|
|
|
|
|
|
|
+ autocompleteEl.value.state.showPopover = false;
|
|
clearHighlightedNodes();
|
|
clearHighlightedNodes();
|
|
|
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
props.editor.precanvas.style.transition = '';
|
|
props.editor.precanvas.style.transition = '';
|
|
}, 500);
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
+function blurInput() {
|
|
|
|
+ document.querySelector('#search-blocks')?.blur();
|
|
|
|
+}
|
|
function onSelectItem({ item }) {
|
|
function onSelectItem({ item }) {
|
|
if (props.editor.zoom !== 1) {
|
|
if (props.editor.zoom !== 1) {
|
|
/* eslint-disable-next-line */
|
|
/* eslint-disable-next-line */
|
|
@@ -170,6 +178,7 @@ function onSelectItem({ item }) {
|
|
function onItemSelected(event) {
|
|
function onItemSelected(event) {
|
|
state.selected = true;
|
|
state.selected = true;
|
|
onSelectItem(event);
|
|
onSelectItem(event);
|
|
|
|
+ blurInput();
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<style scoped>
|
|
<style scoped>
|