Combobox, POI

src/components/inputs/ComboboxInput.vue

@@ -0,0 +1,89 @@
+<script setup>
+import {onMounted, ref, watch} from "vue";
+
+
+const props = defineProps({
+  modelValue: {
+    type: [Object, Array]
+  },
+  rules: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+  options: {
+    type: Array,
+    required: true,
+  },
+})
+
+let model = ref({});
+watch(() => props.modelValue, (newVal) => {
+  model.value = newVal;
+  console.log("zmena!", newVal);
+});
+
+onMounted(() => {
+  model.value = props.modelValue;
+})
+
+const emit = defineEmits(['update:modelValue']);
+watch(model, (val) => {
+  if (!val) return;
+  const value = val.name ? val : {name: val};
+  emit("update:modelValue", value);
+})
+
+let availableOptions = ref([]);
+const filterFn = (val, update, abort) => {
+  update(() => {
+    if (!val || val === "") {
+      availableOptions.value = props.options;
+    } else {
+      const needle = val.toLowerCase();
+      availableOptions.value = props.options.filter(v => {
+        return v.name.toLowerCase().indexOf(needle) > -1;
+      });
+    }
+
+    availableOptions.value = availableOptions.value.map(i => ({id: i.id, name: i.name}))
+  })
+}
+
+</script>
+
+<template>
+  <q-select
+    v-model="model"
+    use-input
+    input-debounce="100"
+    :display-value="`${model.name}`"
+    :rules="rules"
+    @filter="filterFn"
+    :options="availableOptions"
+    option-label="name"
+    option-value="id"
+    new-value-mode="add"
+  >
+    <template #before>
+      <slot name="before"/>
+    </template>
+    <template #after>
+      <slot name="after"/>
+    </template>
+    <template #append>
+      <slot name="append"/>
+    </template>
+
+<!--    <template>-->
+<!--    </template>-->
+
+    <template v-slot:no-option>
+      <q-item>
+        <q-item-section class="text-grey">
+          Add new option
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>