covcharts/src/components/ChartConfig.vue

<template>
    <div>

        <v-list dense >

            <v-list-item>
                <v-list-item-action>Scale</v-list-item-action>
                <v-list-item-content>
                    <v-select
                            class="vselect"
                            :items="configLists.scaleList"
                            v-model="configs.scaleSelected"
                            single-line
                            hide-details
                    ></v-select>
                </v-list-item-content>
            </v-list-item>



            <v-list-item>
                <v-list-item-action>Type</v-list-item-action>
                <v-list-item-content>
                    <v-select
                            class="vselect"
                            :items="configLists.typesList"
                            v-model="configs.typeSelected"
                            single-line
                            hide-details
                    ></v-select>
                </v-list-item-content>
            </v-list-item>


            <v-list-item>
                <v-list-item-action>Day Start</v-list-item-action>
                <v-list-item-content>
                    <Counter
                            v-model="configs.dayStart"
                            :input="configs.dayStart"
                            classname="themeGrey"
                            :max="100"
                    ></Counter>
                </v-list-item-content>
            </v-list-item>

            <v-list-item>
                <v-list-item-action>Day End</v-list-item-action>
                <v-list-item-content>
                    <Counter
                            v-model="configs.dayEnd"
                            :input="configs.dayEnd"
                            classname="themeGrey"
                            :max="100"
                    ></Counter>
                </v-list-item-content>
            </v-list-item>

            <v-list-item>
                <v-list-item-action>Sync X </v-list-item-action>
                <v-list-item-content>
                    <v-text-field
                            class="numField"
                            v-model="configs.syncSince"
                            label="syncSince"
                            solo
                            hide-details
                            single-line

                    />
                </v-list-item-content>
            </v-list-item>


            <v-list-item>
                <v-list-item-action>Limit Y </v-list-item-action>
                <v-list-item-content>
                    <v-text-field
                            class="numField"
                            v-model="configs.ymax"
                            label="ymaxx"
                            solo
                            hide-details
                            single-line
                    />
                </v-list-item-content>
            </v-list-item>


            <v-list-item>
                <v-list-item-action></v-list-item-action>
                <v-list-item-content>
                    <v-btn @click="resetConfig()"
                           x-small
                    >Reset
                    </v-btn>
                </v-list-item-content>
            </v-list-item>
        </v-list>
    </div>
</template>

<script>

    import Counter from './html/Counter'

    export default {
        name: "ChartConfig",
        props: ['configs', 'configLists'],
        components: {Counter},
        data() {
            return {
            }
        },
        watch:{
            'configs.syncSince': function(value){
                if ( ! (value > 0 ) ){
                    this.configs.syncSince = 0
                }
            }
        },
        methods: {
            resetConfig() {
                this.configs.resetConfig = true
            }
        },
        computed: { }
    }
</script>

<style scoped>

    .vselect {
        padding: 0px;
        margin: 0px;
    }

    .numField {
        max-width: 50%;
    }

</style>