Merge branch 'develop' into sw-notification-action

src/client/components/analog-clock.vue

@@ -5,7 +5,8 @@
 					:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
 					:r="i % 5 == 0 ? 0.125 : 0.05"
 					:fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"
-					:key="i"/>
+					:key="i"
+	/>
 
 	<line
 		:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
@@ -13,7 +14,9 @@
 		:x2="5 + (Math.sin(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
 		:y2="5 - (Math.cos(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
 		:stroke="sHandColor"
-		stroke-width="0.05"/>
+		:stroke-width="thickness / 2"
+		stroke-linecap="round"
+	/>
 
 	<line
 		:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
@@ -21,7 +24,9 @@
 		:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
 		:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
 		:stroke="mHandColor"
-		stroke-width="0.1"/>
+		:stroke-width="thickness"
+		stroke-linecap="round"
+	/>
 
 	<line
 		:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
@@ -29,16 +34,24 @@
 		:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
 		:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
 		:stroke="hHandColor"
-		stroke-width="0.1"/>
+		:stroke-width="thickness"
+		stroke-linecap="round"
+	/>
 </svg>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import * as tinycolor from 'tinycolor2';
-import * as os from '@client/os';
 
 export default defineComponent({
+	props: {
+		thickness: {
+			type: Number,
+			default: 0.1
+		}
+	},
+
 	data() {
 		return {
 			now: new Date(),

src/client/components/form-dialog.vue

@@ -34,6 +34,10 @@
 				<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
 				<option v-for="item in form[item].enum" :value="item.value" :key="item.value">{{ item.label }}</option>
 			</FormSelect>
+			<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]">
+				<template #desc><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+				<option v-for="item in form[item].options" :value="item.value" :key="item.value">{{ item.label }}</option>
+			</FormRadios>
 			<FormRange v-else-if="form[item].type === 'range'" v-model:value="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step">
 				<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
@@ -56,6 +60,7 @@ import FormSwitch from './form/switch.vue';
 import FormSelect from './form/select.vue';
 import FormRange from './form/range.vue';
 import FormButton from './form/button.vue';
+import FormRadios from './form/radios.vue';
 
 export default defineComponent({
 	components: {
@@ -67,6 +72,7 @@ export default defineComponent({
 		FormSelect,
 		FormRange,
 		FormButton,
+		FormRadios,
 	},
 
 	props: {

src/client/components/form/radios.vue

@@ -27,7 +27,10 @@ export default defineComponent({
 	},
 	render() {
 		const label = this.$slots.desc();
-		const options = this.$slots.default();
+		let options = this.$slots.default();
+
+		// なぜかFragmentになることがあるため
+		if (options.length === 1 && options[0].props == null) options = options[0].children;
 
 		return h('div', {
 			class: 'cnklmpwm _formItem'
@@ -37,7 +40,7 @@ export default defineComponent({
 			}, label),
 			...options.map(option => h('button', {
 				class: '_button _formPanel _formClickable',
-				key: option.props.value,
+				key: option.key,
 				onClick: () => this.value = option.props.value,
 			}, [h('span', {
 				class: ['check', { checked: this.value === option.props.value }],

src/client/components/tab.vue

@@ -14,7 +14,7 @@ export default defineComponent({
 			class: 'pxhvhrfw',
 		}, options.map(option => withDirectives(h('button', {
 			class: ['_button', { active: this.value === option.props.value }],
-			key: option.props.value,
+			key: option.key,
 			disabled: this.value === option.props.value,
 			onClick: () => {
 				this.$emit('update:value', option.props.value);

src/client/components/ui/radios.vue

@@ -23,14 +23,17 @@ export default defineComponent({
 	},
 	render() {
 		const label = this.$slots.desc();
-		const options = this.$slots.default();
+		let options = this.$slots.default();
+
+		// なぜかFragmentになることがあるため
+		if (options.length === 1 && options[0].props == null) options = options[0].children;
 
 		return h('div', {
 			class: 'novjtcto'
 		}, [
 			h('div', label),
 			...options.map(option => h(MkRadio, {
-				key: option.props.value,
+				key: option.key,
 				value: option.props.value,
 				modelValue: this.value,
 				'onUpdate:modelValue': value => this.value = value,

src/client/ui/default.vue

@@ -230,7 +230,7 @@ export default defineComponent({
 	$widgets-hide-threshold: 1200px;
 	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
 
-	--panelShadow: none;
+	--panelShadow: 0 0 0 1px var(--divider);
 
 	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 	min-height: calc(var(--vh, 1vh) * 100);
@@ -342,14 +342,14 @@ export default defineComponent({
 			--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
 
 			> .main {
-				margin-top: 2px;
+				margin-top: 1px;
 				border-radius: var(--radius);
-				box-shadow: 0 0 0 2px var(--divider);
+				box-shadow: 0 0 0 1px var(--divider);
 			}
 
 			> .widgets {
 				--stickyTop: var(--globalHeaderHeight);
-				margin-top: 0px;
+				margin-top: 1px;
 			}
 		}
 

src/client/widgets/clock.vue

@@ -1,7 +1,7 @@
 <template>
 <MkContainer :naked="props.transparent" :show-header="false">
 	<div class="vubelbmv">
-		<MkAnalogClock class="clock"/>
+		<MkAnalogClock class="clock" :thickness="props.thickness"/>
 	</div>
 </MkContainer>
 </template>
@@ -20,6 +20,17 @@ const widget = define({
 			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'
+			}]
+		}
 	})
 });