trashposs/src/client/app/common/views/widgets/analog-clock.vue

34 lines
663 B
Vue
Raw Normal View History

2018-05-29 16:13:39 +02:00
<template>
<div class="mkw-analog-clock">
2018-09-06 18:20:23 +02:00
<mk-widget-container :naked="props.style % 2 === 0" :show-header="false">
2018-05-29 16:13:39 +02:00
<div class="mkw-analog-clock--body">
2018-09-06 18:20:23 +02:00
<mk-analog-clock :dark="$store.state.device.darkmode" :smooth="props.style < 2"/>
2018-05-29 16:13:39 +02:00
</div>
</mk-widget-container>
</div>
</template>
<script lang="ts">
import define from '../../../common/define-widget';
export default define({
name: 'analog-clock',
props: () => ({
2018-09-06 18:20:23 +02:00
style: 0
2018-05-29 16:13:39 +02:00
})
}).extend({
methods: {
func() {
2018-09-06 18:20:23 +02:00
this.props.style = (this.props.style + 1) % 4;
2018-05-29 16:13:39 +02:00
this.save();
}
}
});
</script>
<style lang="stylus" scoped>
2018-09-28 12:59:19 +02:00
.mkw-analog-clock
2018-05-29 16:13:39 +02:00
.mkw-analog-clock--body
padding 8px
</style>