message: fix(ui): show custom values and better read-only style
  * fix(ui): show custom values in select too
  Fixes
  * fix: read only values style
  * fix: move to scoped styles
diff: <v-subheader class="valueid-label">{{ label }} </v-subheader>
  <div v-if="!value.writeable">
  - <v-text-field
  - readonly
  - :suffix="value.unit"
  - :hint="help"
  - persistent-hint
  - v-model="parsedValue"
  - ></v-text-field>
  + <div class="readonly mt-5">
  + {{ parsedValue + (value.unit ? ' ' + value.unit : '') }}
  + </div>
  +
  + <div v-if="help" class="caption mt-1">
  + {{ help }}
  + </div>
  </div>
  <div v-else>
  <v-select
  v-if="value.list && !value.allowManualEntry"
  - :items="value.states"
  + :items="items"
  :style="{
  'max-width': $vuetify.breakpoint.smAndDown
  ? '280px'
  :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'
  padding-left: 0;
  margin-bottom: -10px;
  }
  +
  +.readonly {
  + font-size: x-large;
  + font-weight: bold;
  +}
  </style>
  <script>
  @@ -239,6 +250,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
  },
  