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

34 lines
663 B
Vue
Raw Normal View History

2018-05-29 23:13:39 +09:00
<template>
<div class="mkw-analog-clock">
2018-09-07 01:20:23 +09:00
<mk-widget-container :naked="props.style % 2 === 0" :show-header="false">
2018-05-29 23:13:39 +09:00
<div class="mkw-analog-clock--body">
2018-09-07 01:20:23 +09:00
<mk-analog-clock :dark="$store.state.device.darkmode" :smooth="props.style < 2"/>
2018-05-29 23:13:39 +09: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-07 01:20:23 +09:00
style: 0
2018-05-29 23:13:39 +09:00
})
}).extend({
methods: {
func() {
2018-09-07 01:20:23 +09:00
this.props.style = (this.props.style + 1) % 4;
2018-05-29 23:13:39 +09:00
this.save();
}
}
});
</script>
<style lang="stylus" scoped>
2018-09-28 19:59:19 +09:00
.mkw-analog-clock
2018-05-29 23:13:39 +09:00
.mkw-analog-clock--body
padding 8px
</style>