fix(ui): show custom values in select too

Fixes #844
zwave-js · Mar 9, 2021 · b4485c9 · b4485c9
1 parent 42b2826
commit b4485c9
Showing 1 changed file with 26 additions and 3 deletions.
diff --git a/src/components/ValueId.vue b/src/components/ValueId.vue
@@ -5,6 +5,7 @@
     <div v-if="!value.writeable">
       <v-text-field
         readonly
+        class="no-border"
         :suffix="value.unit"
         :hint="help"
         persistent-hint
@@ -106,7 +107,7 @@
 
       <v-select
         v-if="value.list && !value.allowManualEntry"
-        :items="value.states"
+        :items="items"
         :style="{
           'max-width': $vuetify.breakpoint.smAndDown
             ? '280px'
@@ -122,11 +123,17 @@
         :append-outer-icon="!disable_send ? 'send' : null"
         v-model="value.newValue"
         @click:append-outer="updateValue(value)"
-      ></v-select>
+      >
+        <template v-slot:selection="{ item }">
+          <span>
+            {{ itemText(selectedItem || item) }}
+          </span>
+        </template>
+      </v-select>
 
       <v-combobox
         v-if="value.list && value.allowManualEntry"
-        :items="value.states"
+        :items="items"
         :style="{
           'max-width': $vuetify.breakpoint.smAndDown
             ? '280px'
@@ -213,6 +220,12 @@
 }
 </style>
 
+<style>
+.no-border > .v-input__control > .v-input__slot:before {
+  content: none;
+}
+</style>
+
 <script>
 export default {
   props: {
@@ -239,6 +252,16 @@ export default {
       if (!this.value.states) return null
       else return this.value.states.find(s => s.value === value)
     },
+    items () {
+      if (this.selectedItem) {
+        return this.value.states
+      } else {
+        return [
+          { value: this.value.newValue, text: 'Custom' },
+          ...this.value.states
+        ]
+      }
+    },
     label () {
       return '[' + this.value.id + '] ' + this.value.label
     },