refactoring

Resolve #7779

packages/client/src/widgets/clock.vue

@@ -0,0 +1,55 @@
+<template>
+<MkContainer :naked="props.transparent" :show-header="false">
+	<div class="vubelbmv">
+		<MkAnalogClock class="clock" :thickness="props.thickness"/>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import define from './define';
+import MkContainer from '@/components/ui/container.vue';
+import MkAnalogClock from '@/components/analog-clock.vue';
+import * as os from '@/os';
+
+const widget = define({
+	name: 'clock',
+	props: () => ({
+		transparent: {
+			type: 'boolean',
+			default: false,
+		},
+		thickness: {
+			type: 'radio',
+			default: 0.1,
+			options: [{
+				value: 0.1, label: 'thin'
+			}, {
+				value: 0.2, label: 'medium'
+			}, {
+				value: 0.3, label: 'thick'
+			}]
+		}
+	})
+});
+
+export default defineComponent({
+	extends: widget,
+	components: {
+		MkContainer,
+		MkAnalogClock
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.vubelbmv {
+	padding: 8px;
+
+	> .clock {
+		height: 150px;
+		margin: auto;
+	}
+}
+</style>