parent
48178bdc53
commit
551b8f3690
@ -0,0 +1,37 @@
|
|||||||
|
import { get, set } from 'lodash'
|
||||||
|
import ModifiedIndicator from './modified_indicator.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ModifiedIndicator
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
path: String,
|
||||||
|
disabled: Boolean,
|
||||||
|
min: Number
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
pathDefault () {
|
||||||
|
const [firstSegment, ...rest] = this.path.split('.')
|
||||||
|
return [firstSegment + 'DefaultValue', ...rest].join('.')
|
||||||
|
},
|
||||||
|
state () {
|
||||||
|
const value = get(this.$parent, this.path)
|
||||||
|
if (value === undefined) {
|
||||||
|
return this.defaultState
|
||||||
|
} else {
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
defaultState () {
|
||||||
|
return get(this.$parent, this.pathDefault)
|
||||||
|
},
|
||||||
|
isChanged () {
|
||||||
|
return this.state !== this.defaultState
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
update (e) {
|
||||||
|
set(this.$parent, this.path, parseInt(e.target.value))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<span class="IntegerSetting">
|
||||||
|
<label :for="path">
|
||||||
|
<slot />
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
:id="path"
|
||||||
|
class="number-input"
|
||||||
|
type="number"
|
||||||
|
step="1"
|
||||||
|
:disabled="disabled"
|
||||||
|
:min="min || 0"
|
||||||
|
:value="state"
|
||||||
|
@change="update"
|
||||||
|
>
|
||||||
|
<ModifiedIndicator :changed="isChanged" />
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./integer_setting.js"></script>
|
Loading…
Reference in new issue