summaryrefslogtreecommitdiff
path: root/packages/client/src/widgets/digital-clock.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/widgets/digital-clock.vue')
-rw-r--r--packages/client/src/widgets/digital-clock.vue92
1 files changed, 0 insertions, 92 deletions
diff --git a/packages/client/src/widgets/digital-clock.vue b/packages/client/src/widgets/digital-clock.vue
deleted file mode 100644
index d2bfd523f3..0000000000
--- a/packages/client/src/widgets/digital-clock.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-<div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
- <div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
- <div class="time">
- <MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/>
- </div>
- <div v-if="widgetProps.showLabel" class="label">{{ tzOffsetLabel }}</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { timezones } from '@/scripts/timezones';
-import MkDigitalClock from '@/components/MkDigitalClock.vue';
-
-const name = 'digitalClock';
-
-const widgetPropsDef = {
- transparent: {
- type: 'boolean' as const,
- default: false,
- },
- fontSize: {
- type: 'number' as const,
- default: 1.5,
- step: 0.1,
- },
- showMs: {
- type: 'boolean' as const,
- default: true,
- },
- showLabel: {
- type: 'boolean' as const,
- default: true,
- },
- timezone: {
- type: 'enum' as const,
- default: null,
- enum: [...timezones.map((tz) => ({
- label: tz.name,
- value: tz.name.toLowerCase(),
- })), {
- label: '(auto)',
- value: null,
- }],
- },
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
- widgetPropsDef,
- props,
- emit,
-);
-
-const tzAbbrev = $computed(() => (widgetProps.timezone === null
- ? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
- : timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
-
-const tzOffset = $computed(() => widgetProps.timezone === null
- ? 0 - new Date().getTimezoneOffset()
- : timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
-
-const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
-
-defineExpose<WidgetComponentExpose>({
- name,
- configure,
- id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.mkw-digitalClock {
- padding: 16px 0;
- text-align: center;
-
- > .label {
- font-size: 65%;
- opacity: 0.7;
- }
-}
-</style>