evcc-io/assets/js/components/Config/PropertyEntry.vue

72 lines
1.4 KiB
Vue

<template>
<FormRow
:id="id"
:optional="!Required"
:deprecated="Deprecated"
:label="label"
:help="help"
:example="example"
>
<PropertyField
:id="id"
v-model="value"
:masked="Mask"
:property="Name"
:type="Type"
:unit="Unit"
:required="Required"
:pattern="Pattern"
:choice="Choice"
:service-values="serviceValues"
:label="label"
/>
</FormRow>
</template>
<script>
/* eslint-disable vue/prop-name-casing */
import FormRow from "./FormRow.vue";
import PropertyField from "./PropertyField.vue";
export default {
name: "PropertyEntry",
components: { FormRow, PropertyField },
props: {
id: String,
Name: String,
Required: Boolean,
Deprecated: Boolean,
Description: String,
Help: String,
Example: String,
Type: String,
Unit: String,
Mask: Boolean,
Pattern: { type: Object, default: () => ({}) },
Choice: Array,
serviceValues: Array,
modelValue: [String, Number, Boolean, Object],
},
emits: ["update:modelValue"],
computed: {
value: {
get() {
return this.modelValue;
},
set(value) {
this.$emit("update:modelValue", value);
},
},
label() {
return this.Description || `[${this.Name}]`;
},
help() {
return this.Description === this.Help ? undefined : this.Help;
},
example() {
// hide example text since config ui doesnt use go duration format (e.g. 5m)
return this.Type === "Duration" ? undefined : this.Example;
},
},
};
</script>