アナログ時計ウィジェットを移植 (#5944)

* アナログ時計ウィジェットを移植

* analog-clock -> clock

src/client/widgets/clock.vue

@@ -0,0 +1,42 @@
+<template>
+<div class="mkw-clock">
+	<mk-container :naked="props.style % 2 === 0" :show-header="false">
+		<div class="mkw-analog-clock--body">
+			<mk-analog-clock :dark="$store.state.device.darkmode" :smooth="props.style < 2"/>
+		</div>
+	</mk-container>
+</div>
+</template>
+
+<script lang="ts">
+import define from './define';
+
+import MkContainer from '../components/ui/container.vue';
+import MkAnalogClock from '../components/analog-clock.vue';
+
+export default define({
+	name: 'clock',
+	props: () => ({
+		style: 0
+	})
+}).extend({
+	components: {
+		MkContainer,
+		MkAnalogClock
+	},
+	methods: {
+		func() {
+			this.props.style = (this.props.style + 1) % 4;
+			this.save();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-analog-clock {
+	.mkw-analog-clock--body {
+		padding: 8px;
+	}
+}
+</style>

src/client/widgets/index.ts

@@ -6,3 +6,4 @@ Vue.component('mkw-timeline', () => import('./timeline.vue').then(m => m.default
 Vue.component('mkw-calendar', () => import('./calendar.vue').then(m => m.default));
 Vue.component('mkw-rss', () => import('./rss.vue').then(m => m.default));
 Vue.component('mkw-trends', () => import('./trends.vue').then(m => m.default));
+Vue.component('mkw-clock', () => import('./clock.vue').then(m => m.default));