Drobne upravy ve vizualu, oprava comboboxu, funkcni prakticky cela editace letu

src/components/inputs/ComboboxInput.vue

@@ -1,7 +1,6 @@
 <script setup>
 import {onMounted, ref, watch} from "vue";
 
-
 const props = defineProps({
   modelValue: {
     type: [Object, Array]
@@ -17,23 +16,42 @@ const props = defineProps({
   },
 })
 
-let model = ref({});
-watch(() => props.modelValue, (newVal) => {
-  model.value = newVal;
-  console.log("zmena!", newVal);
-});
-
+const model = ref({});
 onMounted(() => {
   model.value = props.modelValue;
 })
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'clear']);
 watch(model, (val) => {
   if (!val) return;
-  const value = val.name ? val : {name: val};
+
+  let value = val;
+  if (typeof val === 'string') value = {name: val};
   emit("update:modelValue", value);
 })
 
+const clearValue = () => {
+  model.value = {};
+  emit("clear");
+}
+
+const inputValue = ref("");
+const inputValueChanged = (value) => {
+  if (model.value?.name && value !== '') {
+    // reset model
+    delete model.value.id;
+    model.value.name = '';
+  }
+  inputValue.value = value;
+}
+
+const handleOnBlur = () => {
+  if (inputValue.value !== '') {
+    model.value = inputValue.value;
+    inputValue.value = "";
+  }
+}
+
 let availableOptions = ref([]);
 const filterFn = (val, update, abort) => {
   update(() => {
@@ -57,31 +75,26 @@ const filterFn = (val, update, abort) => {
     v-model="model"
     use-input
     input-debounce="100"
-    :display-value="`${model.name}`"
+    :display-value="`${model?.name || ''}`"
     :rules="rules"
     @filter="filterFn"
+    @input-value="inputValueChanged"
+    @blur="handleOnBlur"
+    @clear="clearValue"
     :options="availableOptions"
     option-label="name"
     option-value="id"
     new-value-mode="add"
+    clear-icon="clear"
+    :v-bind="$attrs"
   >
-    <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 avatar>
+          <q-avatar text-color="green" size="32px"  icon="add" />
+        </q-item-section>
         <q-item-section class="text-grey">
-          Add new option
+          <span>Vytvořit novou hodnotu <q-chip>{{ inputValue }}</q-chip></span>
         </q-item-section>
       </q-item>
     </template>