diff options
34 files changed, 499 insertions, 278 deletions
diff --git a/packages/backend/src/core/entities/ReversiGameEntityService.ts b/packages/backend/src/core/entities/ReversiGameEntityService.ts index df042e75c1..21099bad3e 100644 --- a/packages/backend/src/core/entities/ReversiGameEntityService.ts +++ b/packages/backend/src/core/entities/ReversiGameEntityService.ts @@ -14,6 +14,10 @@ import { bindThis } from '@/decorators.js'; import { IdService } from '@/core/IdService.js'; import { UserEntityService } from './UserEntityService.js'; +function assertBw(bw: string): bw is Packed<'ReversiGameDetailed'>['bw'] { + return ['random', '1', '2'].includes(bw); +} + @Injectable() export class ReversiGameEntityService { constructor( @@ -58,7 +62,7 @@ export class ReversiGameEntityService { surrenderedUserId: game.surrenderedUserId, timeoutUserId: game.timeoutUserId, black: game.black, - bw: game.bw, + bw: assertBw(game.bw) ? game.bw : 'random', isLlotheo: game.isLlotheo, canPutEverywhere: game.canPutEverywhere, loopedBoard: game.loopedBoard, @@ -116,7 +120,7 @@ export class ReversiGameEntityService { surrenderedUserId: game.surrenderedUserId, timeoutUserId: game.timeoutUserId, black: game.black, - bw: game.bw, + bw: assertBw(game.bw) ? game.bw : 'random', isLlotheo: game.isLlotheo, canPutEverywhere: game.canPutEverywhere, loopedBoard: game.loopedBoard, diff --git a/packages/backend/src/models/json-schema/reversi-game.ts b/packages/backend/src/models/json-schema/reversi-game.ts index cb37200384..378ae41cb5 100644 --- a/packages/backend/src/models/json-schema/reversi-game.ts +++ b/packages/backend/src/models/json-schema/reversi-game.ts @@ -81,6 +81,7 @@ export const packedReversiGameLiteSchema = { bw: { type: 'string', optional: false, nullable: false, + enum: ['random', '1', '2'], }, noIrregularRules: { type: 'boolean', @@ -199,6 +200,7 @@ export const packedReversiGameDetailedSchema = { bw: { type: 'string', optional: false, nullable: false, + enum: ['random', '1', '2'], }, noIrregularRules: { type: 'boolean', diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue index bea0392d2d..4801b412f8 100644 --- a/packages/frontend/src/components/MkDialog.vue +++ b/packages/frontend/src/components/MkDialog.vue @@ -52,7 +52,8 @@ import MkModal from '@/components/MkModal.vue'; import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/MkInput.vue'; import MkSelect from '@/components/MkSelect.vue'; -import type { MkSelectItem, OptionValue } from '@/components/MkSelect.vue'; +import type { MkSelectItem } from '@/components/MkSelect.vue'; +import type { OptionValue } from '@/types/option-value.js'; import { useMkSelect } from '@/composables/use-mkselect.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/components/MkForm.vue b/packages/frontend/src/components/MkForm.vue index 3d4724e6b7..1ece0ad4c3 100644 --- a/packages/frontend/src/components/MkForm.vue +++ b/packages/frontend/src/components/MkForm.vue @@ -26,9 +26,8 @@ SPDX-License-Identifier: AGPL-3.0-only <MkSelect v-else-if="v.type === 'enum'" v-model="values[k]" :items="getMkSelectDef(v)"> <template #label><span v-text="v.label || k"></span><span v-if="v.required === false"> ({{ i18n.ts.optional }})</span></template> </MkSelect> - <MkRadios v-else-if="v.type === 'radio'" v-model="values[k]"> + <MkRadios v-else-if="v.type === 'radio'" v-model="values[k]" :options="getRadioOptionsDef(v)"> <template #label><span v-text="v.label || k"></span><span v-if="v.required === false"> ({{ i18n.ts.optional }})</span></template> - <option v-for="option in v.options" :key="getRadioKey(option)" :value="option.value">{{ option.label }}</option> </MkRadios> <MkRange v-else-if="v.type === 'range'" v-model="values[k]" :min="v.min" :max="v.max" :step="v.step" :textConverter="v.textConverter"> <template #label><span v-text="v.label || k"></span><span v-if="v.required === false"> ({{ i18n.ts.optional }})</span></template> @@ -60,6 +59,7 @@ import MkButton from '@/components/MkButton.vue'; import MkRadios from '@/components/MkRadios.vue'; import { i18n } from '@/i18n.js'; import type { MkSelectItem } from '@/components/MkSelect.vue'; +import type { MkRadiosOption } from '@/components/MkRadios.vue'; import type { Form, EnumFormItem, RadioFormItem } from '@/utility/form.js'; const props = defineProps<{ @@ -113,7 +113,13 @@ function getMkSelectDef(def: EnumFormItem): MkSelectItem[] { }); } -function getRadioKey(e: RadioFormItem['options'][number]) { - return typeof e.value === 'string' ? e.value : JSON.stringify(e.value); +function getRadioOptionsDef(def: RadioFormItem): MkRadiosOption[] { + return def.options.map<MkRadiosOption>((v) => { + if (typeof v === 'string') { + return { value: v, label: v }; + } else { + return { value: v.value, label: v.label }; + } + }); } </script> diff --git a/packages/frontend/src/components/MkImageEffectorFxForm.vue b/packages/frontend/src/components/MkImageEffectorFxForm.vue index 51485977a9..723b5f093e 100644 --- a/packages/frontend/src/components/MkImageEffectorFxForm.vue +++ b/packages/frontend/src/components/MkImageEffectorFxForm.vue @@ -28,13 +28,9 @@ SPDX-License-Identifier: AGPL-3.0-only <template #label>{{ v.label ?? k }}</template> <template v-if="v.caption != null" #caption>{{ v.caption }}</template> </MkRange> - <MkRadios v-else-if="v.type === 'number:enum'" v-model="params[k]"> + <MkRadios v-else-if="v.type === 'number:enum'" v-model="params[k]" :options="v.enum"> <template #label>{{ v.label ?? k }}</template> <template v-if="v.caption != null" #caption>{{ v.caption }}</template> - <option v-for="item in v.enum" :value="item.value"> - <i v-if="item.icon" :class="item.icon"></i> - <template v-else>{{ item.label }}</template> - </option> </MkRadios> <div v-else-if="v.type === 'seed'"> <MkRange v-model="params[k]" continuousUpdate type="number" :min="0" :max="10000" :step="1"> diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue index 22d5802596..b618dab6b2 100644 --- a/packages/frontend/src/components/MkMenu.vue +++ b/packages/frontend/src/components/MkMenu.vue @@ -323,9 +323,20 @@ async function showRadioOptions(item: MenuRadio, ev: MouseEvent | PointerEvent | type: 'radioOption', text: key, action: () => { - item.ref = value; + if ('value' in item.ref) { + item.ref.value = value; + } else { + // @ts-expect-error リアクティビティは保たれる + item.ref = value; + } }, - active: computed(() => item.ref === value), + active: computed(() => { + if ('value' in item.ref) { + return item.ref.value === value; + } else { + return item.ref === value; + } + }), }; }); diff --git a/packages/frontend/src/components/MkRadio.vue b/packages/frontend/src/components/MkRadio.vue index a7d77dd118..19ba90052c 100644 --- a/packages/frontend/src/components/MkRadio.vue +++ b/packages/frontend/src/components/MkRadio.vue @@ -24,8 +24,9 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </template> -<script lang="ts" setup generic="T extends unknown"> +<script lang="ts" setup generic="T extends OptionValue | null"> import { computed } from 'vue'; +import type { OptionValue } from '@/types/option-value.js'; const props = defineProps<{ modelValue: T; @@ -52,7 +53,7 @@ function toggle(): void { align-items: center; text-align: left; cursor: pointer; - padding: 7px 10px; + padding: 8px 10px; min-width: 60px; background-color: var(--MI_THEME-panel); background-clip: padding-box !important; @@ -130,7 +131,6 @@ function toggle(): void { .label { margin-left: 8px; display: block; - line-height: 20px; cursor: pointer; } </style> diff --git a/packages/frontend/src/components/MkRadios.vue b/packages/frontend/src/components/MkRadios.vue index 426a1d2c2b..43957a0673 100644 --- a/packages/frontend/src/components/MkRadios.vue +++ b/packages/frontend/src/components/MkRadios.vue @@ -3,99 +3,128 @@ SPDX-FileCopyrightText: syuilo and misskey-project SPDX-License-Identifier: AGPL-3.0-only --> +<template> +<div :class="{ [$style.vertical]: vertical }"> + <div :class="$style.label"> + <slot name="label"></slot> + </div> + <div :class="$style.body"> + <MkRadio + v-for="option in options" + :key="getKey(option.value)" + v-model="model" + :disabled="option.disabled" + :value="option.value" + > + <div :class="[$style.optionContent, { [$style.checked]: model === option.value }]"> + <i v-if="option.icon" :class="[$style.optionIcon, option.icon]" :style="option.iconStyle"></i> + <div> + <slot v-if="option.slotId != null" :name="`option-${option.slotId as SlotNames}`"></slot> + <template v-else> + <div :style="option.labelStyle">{{ option.label ?? option.value }}</div> + <div v-if="option.caption" :class="$style.optionCaption">{{ option.caption }}</div> + </template> + </div> + </div> + </MkRadio> + </div> + <div :class="$style.caption"> + <slot name="caption"></slot> + </div> +</div> +</template> + <script lang="ts"> -import { Comment, defineComponent, h, ref, watch } from 'vue'; +import type { StyleValue } from 'vue'; +import type { OptionValue } from '@/types/option-value.js'; + +export type MkRadiosOption<T = OptionValue, S = string> = { + value: T; + slotId?: S; + label?: string; + labelStyle?: StyleValue; + icon?: string; + iconStyle?: StyleValue; + caption?: string; + disabled?: boolean; +}; +</script> + +<script setup lang="ts" generic="const T extends MkRadiosOption"> import MkRadio from './MkRadio.vue'; -import type { VNode } from 'vue'; -export default defineComponent({ - props: { - modelValue: { - required: false, - }, - vertical: { - type: Boolean, - default: false, - }, - }, - setup(props, context) { - const value = ref(props.modelValue); - watch(value, () => { - context.emit('update:modelValue', value.value); - }); - watch(() => props.modelValue, v => { - value.value = v; - }); - if (!context.slots.default) return null; - let options = context.slots.default(); - const label = context.slots.label && context.slots.label(); - const caption = context.slots.caption && context.slots.caption(); +defineProps<{ + options: T[]; + vertical?: boolean; +}>(); + +type SlotNames = NonNullable<T extends MkRadiosOption<any, infer U> ? U : never>; - // なぜかFragmentになることがあるため - if (options.length === 1 && options[0].props == null) options = options[0].children as VNode[]; +defineSlots<{ + label?: () => any; + caption?: () => any; +} & { + [K in `option-${SlotNames}`]: () => any; +}>(); - // vnodeのうちv-if=falseなものを除外する(trueになるものはoptionなど他typeになる) - options = options.filter(vnode => vnode.type !== Comment); +const model = defineModel<T['value']>({ required: true }); - return () => h('div', { - class: [ - 'novjtcto', - ...(props.vertical ? ['vertical'] : []), - ], - }, [ - ...(label ? [h('div', { - class: 'label', - }, label)] : []), - h('div', { - class: 'body', - }, options.map(option => h(MkRadio, { - key: option.key as string, - value: option.props?.value, - disabled: option.props?.disabled, - modelValue: value.value, - 'onUpdate:modelValue': _v => value.value = _v, - }, () => option.children)), - ), - ...(caption ? [h('div', { - class: 'caption', - }, caption)] : []), - ]); - }, -}); +function getKey(value: OptionValue): PropertyKey { + if (value === null) return 'null'; + return value; +} </script> -<style lang="scss"> -.novjtcto { - > .label { - font-size: 0.85em; - padding: 0 0 8px 0; - user-select: none; +<style lang="scss" module> +.label { + font-size: 0.85em; + padding: 0 0 8px 0; + user-select: none; - &:empty { - display: none; - } + &:empty { + display: none; } +} - > .body { - display: flex; - gap: 10px; - flex-wrap: wrap; - } +.body { + display: flex; + gap: 10px; + flex-wrap: wrap; +} - > .caption { - font-size: 0.85em; - padding: 8px 0 0 0; - color: color(from var(--MI_THEME-fg) srgb r g b / 0.75); +.caption { + font-size: 0.85em; + padding: 8px 0 0 0; + color: color(from var(--MI_THEME-fg) srgb r g b / 0.75); - &:empty { - display: none; - } + &:empty { + display: none; } +} + +.optionContent { + display: flex; + align-items: center; + gap: 6px; +} + +.optionCaption { + font-size: 0.85em; + padding: 2px 0 0 0; + color: color(from var(--MI_THEME-fg) srgb r g b / 0.75); +} - &.vertical { - > .body { - flex-direction: column; - } +.optionContent.checked { + .optionCaption { + color: color(from var(--MI_THEME-accent) srgb r g b / 0.75); } } + +.optionIcon { + flex-shrink: 0; +} + +.vertical > .body { + flex-direction: column; +} </style> diff --git a/packages/frontend/src/components/MkSelect.vue b/packages/frontend/src/components/MkSelect.vue index f130145e36..6f6957d504 100644 --- a/packages/frontend/src/components/MkSelect.vue +++ b/packages/frontend/src/components/MkSelect.vue @@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts"> -export type OptionValue = string | number | null; +import type { OptionValue } from '@/types/option-value.js'; export type ItemOption<T extends OptionValue = OptionValue> = { type?: 'option'; diff --git a/packages/frontend/src/components/MkServerSetupWizard.vue b/packages/frontend/src/components/MkServerSetupWizard.vue index 20cb48fe1c..796c909be9 100644 --- a/packages/frontend/src/components/MkServerSetupWizard.vue +++ b/packages/frontend/src/components/MkServerSetupWizard.vue @@ -14,19 +14,15 @@ SPDX-License-Identifier: AGPL-3.0-only <template #icon><i class="ti ti-settings-question"></i></template> <div class="_gaps_s"> - <MkRadios v-model="q_use" :vertical="true"> - <option value="single"> - <div><i class="ti ti-user"></i> <b>{{ i18n.ts._serverSetupWizard._use.single }}</b></div> - <div>{{ i18n.ts._serverSetupWizard._use.single_description }}</div> - </option> - <option value="group"> - <div><i class="ti ti-lock"></i> <b>{{ i18n.ts._serverSetupWizard._use.group }}</b></div> - <div>{{ i18n.ts._serverSetupWizard._use.group_description }}</div> - </option> - <option value="open"> - <div><i class="ti ti-world"></i> <b>{{ i18n.ts._serverSetupWizard._use.open }}</b></div> - <div>{{ i18n.ts._serverSetupWizard._use.open_description }}</div> - </option> + <MkRadios + v-model="q_use" + :options="[ + { value: 'single', label: i18n.ts._serverSetupWizard._use.single, icon: 'ti ti-user', caption: i18n.ts._serverSetupWizard._use.single_description }, + { value: 'group', label: i18n.ts._serverSetupWizard._use.group, icon: 'ti ti-lock', caption: i18n.ts._serverSetupWizard._use.group_description }, + { value: 'open', label: i18n.ts._serverSetupWizard._use.open, icon: 'ti ti-world', caption: i18n.ts._serverSetupWizard._use.open_description }, + ]" + vertical + > </MkRadios> <MkInfo v-if="q_use === 'single'">{{ i18n.ts._serverSetupWizard._use.single_youCanCreateMultipleAccounts }}</MkInfo> @@ -40,10 +36,15 @@ SPDX-License-Identifier: AGPL-3.0-only <template #icon><i class="ti ti-users"></i></template> <div class="_gaps_s"> - <MkRadios v-model="q_scale" :vertical="true"> - <option value="small"><i class="ti ti-user"></i> {{ i18n.ts._serverSetupWizard._scale.small }}</option> - <option value="medium"><i class="ti ti-users"></i> {{ i18n.ts._serverSetupWizard._scale.medium }}</option> - <option value="large"><i class="ti ti-users-group"></i> {{ i18n.ts._serverSetupWizard._scale.large }}</option> + <MkRadios + v-model="q_scale" + :options="[ + { value: 'small', label: i18n.ts._serverSetupWizard._scale.small, icon: 'ti ti-user' }, + { value: 'medium', label: i18n.ts._serverSetupWizard._scale.medium, icon: 'ti ti-users' }, + { value: 'large', label: i18n.ts._serverSetupWizard._scale.large, icon: 'ti ti-users-group' }, + ]" + vertical + > </MkRadios> <MkInfo v-if="q_scale === 'large'"><b>{{ i18n.ts.advice }}:</b> {{ i18n.ts._serverSetupWizard.largeScaleServerAdvice }}</MkInfo> @@ -57,9 +58,14 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_gaps_s"> <div>{{ i18n.ts._serverSetupWizard.doYouConnectToFediverse_description1 }}<br>{{ i18n.ts._serverSetupWizard.doYouConnectToFediverse_description2 }}<br><MkLink target="_blank" url="https://wikipedia.org/wiki/Fediverse">{{ i18n.ts.learnMore }}</MkLink></div> - <MkRadios v-model="q_federation" :vertical="true"> - <option value="yes">{{ i18n.ts.yes }}</option> - <option value="no">{{ i18n.ts.no }}</option> + <MkRadios + v-model="q_federation" + :options="[ + { value: 'yes', label: i18n.ts.yes }, + { value: 'no', label: i18n.ts.no }, + ]" + vertical + > </MkRadios> <MkInfo v-if="q_federation === 'yes'">{{ i18n.ts._serverSetupWizard.youCanConfigureMoreFederationSettingsLater }}</MkInfo> @@ -212,9 +218,9 @@ const props = withDefaults(defineProps<{ }); const q_name = ref(''); -const q_use = ref('single'); -const q_scale = ref('small'); -const q_federation = ref('yes'); +const q_use = ref<'single' | 'group' | 'open'>('single'); +const q_scale = ref<'small' | 'medium' | 'large'>('small'); +const q_federation = ref<'yes' | 'no'>('no'); const q_remoteContentsCleaning = ref(true); const q_adminName = ref(''); const q_adminEmail = ref(''); diff --git a/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue b/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue index 8ec48dcc3f..5e16460104 100644 --- a/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue +++ b/packages/frontend/src/components/MkUserAnnouncementEditDialog.vue @@ -22,18 +22,26 @@ SPDX-License-Identifier: AGPL-3.0-only <MkTextarea v-model="text"> <template #label>{{ i18n.ts.text }}</template> </MkTextarea> - <MkRadios v-model="icon"> + <MkRadios + v-model="icon" + :options="[ + { value: 'info', icon: 'ti ti-info-circle' }, + { value: 'warning', icon: 'ti ti-alert-triangle', iconStyle: 'color: var(--MI_THEME-warn);' }, + { value: 'error', icon: 'ti ti-circle-x', iconStyle: 'color: var(--MI_THEME-error);' }, + { value: 'success', icon: 'ti ti-check', iconStyle: 'color: var(--MI_THEME-success);' }, + ]" + > <template #label>{{ i18n.ts.icon }}</template> - <option value="info"><i class="ti ti-info-circle"></i></option> - <option value="warning"><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i></option> - <option value="error"><i class="ti ti-circle-x" style="color: var(--MI_THEME-error);"></i></option> - <option value="success"><i class="ti ti-check" style="color: var(--MI_THEME-success);"></i></option> </MkRadios> - <MkRadios v-model="display"> + <MkRadios + v-model="display" + :options="[ + { value: 'normal', label: i18n.ts.normal }, + { value: 'banner', label: i18n.ts.banner }, + { value: 'dialog', label: i18n.ts.dialog }, + ]" + > <template #label>{{ i18n.ts.display }}</template> - <option value="normal">{{ i18n.ts.normal }}</option> - <option value="banner">{{ i18n.ts.banner }}</option> - <option value="dialog">{{ i18n.ts.dialog }}</option> </MkRadios> <MkSwitch v-model="needConfirmationToRead"> {{ i18n.ts._announcement.needConfirmationToRead }} diff --git a/packages/frontend/src/composables/use-mkselect.ts b/packages/frontend/src/composables/use-mkselect.ts index 7cb470d169..97cbeffa8b 100644 --- a/packages/frontend/src/composables/use-mkselect.ts +++ b/packages/frontend/src/composables/use-mkselect.ts @@ -5,7 +5,8 @@ import { ref } from 'vue'; import type { Ref, MaybeRefOrGetter } from 'vue'; -import type { MkSelectItem, OptionValue, GetMkSelectValueTypesFromDef } from '@/components/MkSelect.vue'; +import type { MkSelectItem, GetMkSelectValueTypesFromDef } from '@/components/MkSelect.vue'; +import type { OptionValue } from '@/types/option-value.js'; type UnwrapReadonlyItems<T> = T extends readonly (infer U)[] ? U[] : T; diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts index 2e2d0a814e..f7b59612c4 100644 --- a/packages/frontend/src/os.ts +++ b/packages/frontend/src/os.ts @@ -14,7 +14,8 @@ import type { Form, GetFormResultType } from '@/utility/form.js'; import type { MenuItem } from '@/types/menu.js'; import type { PostFormProps } from '@/types/post-form.js'; import type { UploaderFeatures } from '@/composables/use-uploader.js'; -import type { MkSelectItem, OptionValue } from '@/components/MkSelect.vue'; +import type { MkSelectItem } from '@/components/MkSelect.vue'; +import type { OptionValue } from '@/types/option-value.js'; import type { MkDialogReturnType } from '@/components/MkDialog.vue'; import type { OverloadToUnion } from '@/types/overload-to-union.js'; import type MkRoleSelectDialog_TypeReferenceOnly from '@/components/MkRoleSelectDialog.vue'; diff --git a/packages/frontend/src/pages/admin/ads.vue b/packages/frontend/src/pages/admin/ads.vue index 94940a84ae..e06ea50453 100644 --- a/packages/frontend/src/pages/admin/ads.vue +++ b/packages/frontend/src/pages/admin/ads.vue @@ -22,11 +22,15 @@ SPDX-License-Identifier: AGPL-3.0-only <template #label>{{ i18n.ts.imageUrl }}</template> </MkInput> - <MkRadios v-model="ad.place"> + <MkRadios + v-model="ad.place" + :options="[ + { value: 'square' }, + { value: 'horizontal' }, + { value: 'horizontal-big' }, + ]" + > <template #label>Form</template> - <option value="square">square</option> - <option value="horizontal">horizontal</option> - <option value="horizontal-big">horizontal-big</option> </MkRadios> <!-- @@ -109,7 +113,11 @@ import { i18n } from '@/i18n.js'; import { definePage } from '@/page.js'; import { useMkSelect } from '@/composables/use-mkselect.js'; -const ads = ref<Misskey.entities.Ad[]>([]); +type Ad = Misskey.entities.Ad & { + place: 'square' | 'horizontal' | 'horizontal-big'; +}; + +const ads = ref<Ad[]>([]); // ISO形式はTZがUTCになってしまうので、TZ分ずらして時間を初期化 const localTime = new Date(); @@ -136,7 +144,7 @@ misskeyApi('admin/ad/list', { publishing: publishing }).then(adsResponse => { exdate.setMilliseconds(exdate.getMilliseconds() - localTimeDiff); stdate.setMilliseconds(stdate.getMilliseconds() - localTimeDiff); return { - ...r, + ...(r as Ad), expiresAt: exdate.toISOString().slice(0, 16), startsAt: stdate.toISOString().slice(0, 16), }; @@ -239,7 +247,7 @@ function more() { exdate.setMilliseconds(exdate.getMilliseconds() - localTimeDiff); stdate.setMilliseconds(stdate.getMilliseconds() - localTimeDiff); return { - ...r, + ...(r as Ad), expiresAt: exdate.toISOString().slice(0, 16), startsAt: stdate.toISOString().slice(0, 16), }; @@ -256,7 +264,7 @@ function refresh() { exdate.setMilliseconds(exdate.getMilliseconds() - localTimeDiff); stdate.setMilliseconds(stdate.getMilliseconds() - localTimeDiff); return { - ...r, + ...(r as Ad), expiresAt: exdate.toISOString().slice(0, 16), startsAt: stdate.toISOString().slice(0, 16), }; diff --git a/packages/frontend/src/pages/admin/announcements.vue b/packages/frontend/src/pages/admin/announcements.vue index ddf458b268..87fc6e70f4 100644 --- a/packages/frontend/src/pages/admin/announcements.vue +++ b/packages/frontend/src/pages/admin/announcements.vue @@ -45,18 +45,26 @@ SPDX-License-Identifier: AGPL-3.0-only <MkInput v-model="announcement.imageUrl" type="url"> <template #label>{{ i18n.ts.imageUrl }}</template> </MkInput> - <MkRadios v-model="announcement.icon"> + <MkRadios + v-model="announcement.icon" + :options="[ + { value: 'info', icon: 'ti ti-info-circle' }, + { value: 'warning', icon: 'ti ti-alert-triangle', iconStyle: 'color: var(--MI_THEME-warn);' }, + { value: 'error', icon: 'ti ti-circle-x', iconStyle: 'color: var(--MI_THEME-error);' }, + { value: 'success', icon: 'ti ti-check', iconStyle: 'color: var(--MI_THEME-success);' }, + ]" + > <template #label>{{ i18n.ts.icon }}</template> - <option value="info"><i class="ti ti-info-circle"></i></option> - <option value="warning"><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i></option> - <option value="error"><i class="ti ti-circle-x" style="color: var(--MI_THEME-error);"></i></option> - <option value="success"><i class="ti ti-check" style="color: var(--MI_THEME-success);"></i></option> </MkRadios> - <MkRadios v-model="announcement.display"> + <MkRadios + v-model="announcement.display" + :options="[ + { value: 'normal', label: i18n.ts.normal }, + { value: 'banner', label: i18n.ts.banner }, + { value: 'dialog', label: i18n.ts.dialog }, + ]" + > <template #label>{{ i18n.ts.display }}</template> - <option value="normal">{{ i18n.ts.normal }}</option> - <option value="banner">{{ i18n.ts.banner }}</option> - <option value="dialog">{{ i18n.ts.dialog }}</option> </MkRadios> <MkInfo v-if="announcement.display === 'dialog'" warn>{{ i18n.ts._announcement.dialogAnnouncementUxWarn }}</MkInfo> <MkSwitch v-model="announcement.forExistingUsers" :helpText="i18n.ts._announcement.forExistingUsersDescription"> diff --git a/packages/frontend/src/pages/admin/bot-protection.vue b/packages/frontend/src/pages/admin/bot-protection.vue index 7ed280358a..481969e1a3 100644 --- a/packages/frontend/src/pages/admin/bot-protection.vue +++ b/packages/frontend/src/pages/admin/bot-protection.vue @@ -19,13 +19,17 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <div class="_gaps_m"> - <MkRadios v-model="botProtectionForm.state.provider"> - <option value="none">{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</option> - <option value="hcaptcha">hCaptcha</option> - <option value="mcaptcha">mCaptcha</option> - <option value="recaptcha">reCAPTCHA</option> - <option value="turnstile">Turnstile</option> - <option value="testcaptcha">testCaptcha</option> + <MkRadios + v-model="botProtectionForm.state.provider" + :options="[ + { value: 'none', label: `${i18n.ts.none} (${i18n.ts.notRecommended})` }, + { value: 'hcaptcha', label: 'hCaptcha' }, + { value: 'mcaptcha', label: 'mCaptcha' }, + { value: 'recaptcha', label: 'reCAPTCHA' }, + { value: 'turnstile', label: 'Turnstile' }, + { value: 'testcaptcha', label: 'testCaptcha' }, + ]" + > </MkRadios> <template v-if="botProtectionForm.state.provider === 'hcaptcha'"> diff --git a/packages/frontend/src/pages/admin/branding.vue b/packages/frontend/src/pages/admin/branding.vue index e5e0f087e1..957526b073 100644 --- a/packages/frontend/src/pages/admin/branding.vue +++ b/packages/frontend/src/pages/admin/branding.vue @@ -9,10 +9,14 @@ SPDX-License-Identifier: AGPL-3.0-only <SearchMarker path="/admin/branding" :label="i18n.ts.branding" :keywords="['branding']" icon="ti ti-paint"> <div class="_gaps_m"> <SearchMarker :keywords="['entrance', 'welcome', 'landing', 'front', 'home', 'page', 'style']"> - <MkRadios v-model="entrancePageStyle"> + <MkRadios + v-model="entrancePageStyle" + :options="[ + { value: 'classic' }, + { value: 'simple' }, + ]" + > <template #label><SearchLabel>{{ i18n.ts._serverSettings.entrancePageStyle }}</SearchLabel></template> - <option value="classic">Classic</option> - <option value="simple">Simple</option> </MkRadios> </SearchMarker> diff --git a/packages/frontend/src/pages/admin/security.vue b/packages/frontend/src/pages/admin/security.vue index fa93124daa..f310f26107 100644 --- a/packages/frontend/src/pages/admin/security.vue +++ b/packages/frontend/src/pages/admin/security.vue @@ -25,11 +25,15 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_gaps_m"> <div><SearchText>{{ i18n.ts._sensitiveMediaDetection.description }}</SearchText></div> - <MkRadios v-model="sensitiveMediaDetectionForm.state.sensitiveMediaDetection"> - <option value="none">{{ i18n.ts.none }}</option> - <option value="all">{{ i18n.ts.all }}</option> - <option value="local">{{ i18n.ts.localOnly }}</option> - <option value="remote">{{ i18n.ts.remoteOnly }}</option> + <MkRadios + v-model="sensitiveMediaDetectionForm.state.sensitiveMediaDetection" + :options="[ + { value: 'none', label: i18n.ts.none }, + { value: 'all', label: i18n.ts.all }, + { value: 'local', label: i18n.ts.localOnly }, + { value: 'remote', label: i18n.ts.remoteOnly }, + ]" + > </MkRadios> <SearchMarker :keywords="['sensitivity']"> diff --git a/packages/frontend/src/pages/admin/settings.vue b/packages/frontend/src/pages/admin/settings.vue index 541ee7c0cd..99d4455939 100644 --- a/packages/frontend/src/pages/admin/settings.vue +++ b/packages/frontend/src/pages/admin/settings.vue @@ -258,11 +258,15 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_gaps"> <SearchMarker> - <MkRadios v-model="federationForm.state.federation"> + <MkRadios + v-model="federationForm.state.federation" + :options="[ + { value: 'all', label: i18n.ts.all }, + { value: 'specified', label: i18n.ts.specifyHost }, + { value: 'none', label: i18n.ts.none }, + ]" + > <template #label><SearchLabel>{{ i18n.ts.behavior }}</SearchLabel><span v-if="federationForm.modifiedStates.federation" class="_modified">{{ i18n.ts.modified }}</span></template> - <option value="all">{{ i18n.ts.all }}</option> - <option value="specified">{{ i18n.ts.specifyHost }}</option> - <option value="none">{{ i18n.ts.none }}</option> </MkRadios> </SearchMarker> diff --git a/packages/frontend/src/pages/channels.vue b/packages/frontend/src/pages/channels.vue index f77034e318..26dc5b80df 100644 --- a/packages/frontend/src/pages/channels.vue +++ b/packages/frontend/src/pages/channels.vue @@ -11,9 +11,14 @@ SPDX-License-Identifier: AGPL-3.0-only <MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter="search"> <template #prefix><i class="ti ti-search"></i></template> </MkInput> - <MkRadios v-model="searchType" @update:modelValue="search()"> - <option value="nameAndDescription">{{ i18n.ts._channel.nameAndDescription }}</option> - <option value="nameOnly">{{ i18n.ts._channel.nameOnly }}</option> + <MkRadios + v-model="searchType" + :options="[ + { value: 'nameAndDescription', label: i18n.ts._channel.nameAndDescription }, + { value: 'nameOnly', label: i18n.ts._channel.nameOnly }, + ]" + @update:modelValue="search()" + > </MkRadios> <MkButton large primary gradate rounded @click="search">{{ i18n.ts.search }}</MkButton> </div> @@ -72,15 +77,17 @@ import { Paginator } from '@/utility/paginator.js'; const router = useRouter(); +type SearchType = 'nameAndDescription' | 'nameOnly'; + const props = defineProps<{ query: string; - type?: string; + type?: SearchType; }>(); const key = ref(''); const tab = ref('featured'); const searchQuery = ref(''); -const searchType = ref('nameAndDescription'); +const searchType = ref<SearchType>('nameAndDescription'); const channelPaginator = shallowRef(); onMounted(() => { diff --git a/packages/frontend/src/pages/reversi/game.setting.vue b/packages/frontend/src/pages/reversi/game.setting.vue index b987a8e911..2344a166f9 100644 --- a/packages/frontend/src/pages/reversi/game.setting.vue +++ b/packages/frontend/src/pages/reversi/game.setting.vue @@ -35,22 +35,28 @@ SPDX-License-Identifier: AGPL-3.0-only <MkFolder :defaultOpen="true"> <template #label>{{ i18n.ts._reversi.blackOrWhite }}</template> - <MkRadios v-model="game.bw"> - <option value="random">{{ i18n.ts.random }}</option> - <option :value="'1'"> + <MkRadios + v-model="game.bw" + :options="[ + { value: 'random', label: i18n.ts.random }, + { value: '1', slotId: 'user1' }, + { value: '2', slotId: 'user2' }, + ]" + > + <template #option-user1> <I18n :src="i18n.ts._reversi.blackIs" tag="span"> <template #name> <b><MkUserName :user="game.user1"/></b> </template> </I18n> - </option> - <option :value="'2'"> + </template> + <template #option-user2> <I18n :src="i18n.ts._reversi.blackIs" tag="span"> <template #name> <b><MkUserName :user="game.user2"/></b> </template> </I18n> - </option> + </template> </MkRadios> </MkFolder> @@ -58,15 +64,10 @@ SPDX-License-Identifier: AGPL-3.0-only <template #label>{{ i18n.ts._reversi.timeLimitForEachTurn }}</template> <template #suffix>{{ game.timeLimitForEachTurn }}{{ i18n.ts._time.second }}</template> - <MkRadios v-model="game.timeLimitForEachTurn"> - <option :value="5">5{{ i18n.ts._time.second }}</option> - <option :value="10">10{{ i18n.ts._time.second }}</option> - <option :value="30">30{{ i18n.ts._time.second }}</option> - <option :value="60">60{{ i18n.ts._time.second }}</option> - <option :value="90">90{{ i18n.ts._time.second }}</option> - <option :value="120">120{{ i18n.ts._time.second }}</option> - <option :value="180">180{{ i18n.ts._time.second }}</option> - <option :value="3600">3600{{ i18n.ts._time.second }}</option> + <MkRadios + v-model="game.timeLimitForEachTurn" + :options="gameTurnOptionsDef" + > </MkRadios> </MkFolder> @@ -110,7 +111,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { computed, watch, ref, onMounted, shallowRef, onUnmounted } from 'vue'; +import { computed, watch, ref, onUnmounted } from 'vue'; import * as Misskey from 'misskey-js'; import * as Reversi from 'misskey-reversi'; import type { MenuItem } from '@/types/menu.js'; @@ -122,6 +123,7 @@ import MkRadios from '@/components/MkRadios.vue'; import MkSwitch from '@/components/MkSwitch.vue'; import MkFolder from '@/components/MkFolder.vue'; import * as os from '@/os.js'; +import type { MkRadiosOption } from '@/components/MkRadios.vue'; import { useRouter } from '@/router.js'; const $i = ensureSignin(); @@ -139,6 +141,17 @@ const shareWhenStart = defineModel<boolean>('shareWhenStart', { default: false } const game = ref<Misskey.entities.ReversiGameDetailed>(deepClone(props.game)); +const gameTurnOptionsDef = [ + { value: 5, label: '5' + i18n.ts._time.second }, + { value: 10, label: '10' + i18n.ts._time.second }, + { value: 30, label: '30' + i18n.ts._time.second }, + { value: 60, label: '60' + i18n.ts._time.second }, + { value: 90, label: '90' + i18n.ts._time.second }, + { value: 120, label: '120' + i18n.ts._time.second }, + { value: 180, label: '180' + i18n.ts._time.second }, + { value: 3600, label: '3600' + i18n.ts._time.second }, +] as MkRadiosOption<number>[]; + const mapName = computed(() => { if (game.value.map == null) return 'Random'; const found = Object.values(Reversi.maps).find(x => x.data.join('') === game.value.map.join('')); diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue index 3af1bef278..ab36f2e6c5 100644 --- a/packages/frontend/src/pages/search.note.vue +++ b/packages/frontend/src/pages/search.note.vue @@ -19,11 +19,10 @@ SPDX-License-Identifier: AGPL-3.0-only <template #header>{{ i18n.ts.options }}</template> <div class="_gaps_m"> - <MkRadios v-model="searchScope"> - <option v-if="instance.federation !== 'none' && noteSearchableScope === 'global'" value="all">{{ i18n.ts._search.searchScopeAll }}</option> - <option value="local">{{ instance.federation === 'none' ? i18n.ts._search.searchScopeAll : i18n.ts._search.searchScopeLocal }}</option> - <option v-if="instance.federation !== 'none' && noteSearchableScope === 'global'" value="server">{{ i18n.ts._search.searchScopeServer }}</option> - <option value="user">{{ i18n.ts._search.searchScopeUser }}</option> + <MkRadios + v-model="searchScope" + :options="searchScopeDef" + > </MkRadios> <div v-if="instance.federation !== 'none' && searchScope === 'server'" :class="$style.subOptionRoot"> @@ -127,6 +126,7 @@ import MkNotesTimeline from '@/components/MkNotesTimeline.vue'; import MkRadios from '@/components/MkRadios.vue'; import MkUserCardMini from '@/components/MkUserCardMini.vue'; import { Paginator } from '@/utility/paginator.js'; +import type { MkRadiosOption } from '@/components/MkRadios.vue'; const props = withDefaults(defineProps<{ query?: string; @@ -183,6 +183,24 @@ const searchScope = ref<'all' | 'local' | 'server' | 'user'>((() => { return 'all'; })()); +const searchScopeDef = computed<MkRadiosOption[]>(() => { + const options: MkRadiosOption[] = []; + + if (instance.federation !== 'none' && noteSearchableScope === 'global') { + options.push({ value: 'all', label: i18n.ts._search.searchScopeAll }); + } + + options.push({ value: 'local', label: instance.federation === 'none' ? i18n.ts._search.searchScopeAll : i18n.ts._search.searchScopeLocal }); + + if (instance.federation !== 'none' && noteSearchableScope === 'global') { + options.push({ value: 'server', label: i18n.ts._search.searchScopeServer }); + } + + options.push({ value: 'user', label: i18n.ts._search.searchScopeUser }); + + return options; +}); + type SearchParams = { readonly query: string; readonly host?: string; diff --git a/packages/frontend/src/pages/search.user.vue b/packages/frontend/src/pages/search.user.vue index 5110fca10c..cc91adb63d 100644 --- a/packages/frontend/src/pages/search.user.vue +++ b/packages/frontend/src/pages/search.user.vue @@ -9,10 +9,16 @@ SPDX-License-Identifier: AGPL-3.0-only <MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter.prevent="search"> <template #prefix><i class="ti ti-search"></i></template> </MkInput> - <MkRadios v-if="instance.federation !== 'none'" v-model="searchOrigin" @update:modelValue="search()"> - <option value="combined">{{ i18n.ts.all }}</option> - <option value="local">{{ i18n.ts.local }}</option> - <option value="remote">{{ i18n.ts.remote }}</option> + <MkRadios + v-if="instance.federation !== 'none'" + v-model="searchOrigin" + :options="[ + { value: 'combined', label: i18n.ts.all }, + { value: 'local', label: i18n.ts.local }, + { value: 'remote', label: i18n.ts.remote }, + ]" + @update:modelValue="search()" + > </MkRadios> <MkButton large primary gradate rounded @click="search">{{ i18n.ts.search }}</MkButton> </div> diff --git a/packages/frontend/src/pages/settings/deck.vue b/packages/frontend/src/pages/settings/deck.vue index 6ff08b5499..40fee6caaf 100644 --- a/packages/frontend/src/pages/settings/deck.vue +++ b/packages/frontend/src/pages/settings/deck.vue @@ -40,31 +40,43 @@ SPDX-License-Identifier: AGPL-3.0-only <SearchMarker :keywords="['column', 'align']"> <MkPreferenceContainer k="deck.columnAlign"> - <MkRadios v-model="columnAlign"> + <MkRadios + v-model="columnAlign" + :options="[ + { value: 'left', label: i18n.ts.left }, + { value: 'center', label: i18n.ts.center }, + ]" + > <template #label><SearchLabel>{{ i18n.ts._deck.columnAlign }}</SearchLabel></template> - <option value="left">{{ i18n.ts.left }}</option> - <option value="center">{{ i18n.ts.center }}</option> </MkRadios> </MkPreferenceContainer> </SearchMarker> <SearchMarker :keywords="['menu', 'position']"> <MkPreferenceContainer k="deck.menuPosition"> - <MkRadios v-model="menuPosition"> + <MkRadios + v-model="menuPosition" + :options="[ + { value: 'right', label: i18n.ts.right }, + { value: 'bottom', label: i18n.ts.bottom }, + ]" + > <template #label><SearchLabel>{{ i18n.ts._deck.deckMenuPosition }}</SearchLabel></template> - <option value="right">{{ i18n.ts.right }}</option> - <option value="bottom">{{ i18n.ts.bottom }}</option> </MkRadios> </MkPreferenceContainer> </SearchMarker> <SearchMarker :keywords="['navbar', 'position']"> <MkPreferenceContainer k="deck.navbarPosition"> - <MkRadios v-model="navbarPosition"> + <MkRadios + v-model="navbarPosition" + :options="[ + { value: 'left', label: i18n.ts.left }, + { value: 'top', label: i18n.ts.top }, + { value: 'bottom', label: i18n.ts.bottom }, + ]" + > <template #label><SearchLabel>{{ i18n.ts._deck.navbarPosition }}</SearchLabel></template> - <option value="left">{{ i18n.ts.left }}</option> - <option value="top">{{ i18n.ts.top }}</option> - <option value="bottom">{{ i18n.ts.bottom }}</option> </MkRadios> </MkPreferenceContainer> </SearchMarker> diff --git a/packages/frontend/src/pages/settings/emoji-palette.vue b/packages/frontend/src/pages/settings/emoji-palette.vue index 0f41d9b777..cb665554cd 100644 --- a/packages/frontend/src/pages/settings/emoji-palette.vue +++ b/packages/frontend/src/pages/settings/emoji-palette.vue @@ -63,38 +63,33 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_gaps_m"> <SearchMarker :keywords="['emoji', 'picker', 'scale', 'size']"> <MkPreferenceContainer k="emojiPickerScale"> - <MkRadios v-model="emojiPickerScale"> + <MkRadios + v-model="emojiPickerScale" + :options="emojiPickerScaleDef" + > <template #label><SearchLabel>{{ i18n.ts.size }}</SearchLabel></template> - <option :value="1">{{ i18n.ts.small }}</option> - <option :value="2">{{ i18n.ts.medium }}</option> - <option :value="3">{{ i18n.ts.large }}</option> - <option :value="4">{{ i18n.ts.large }}+</option> - <option :value="5">{{ i18n.ts.large }}++</option> </MkRadios> </MkPreferenceContainer> </SearchMarker> <SearchMarker :keywords="['emoji', 'picker', 'width', 'column', 'size']"> <MkPreferenceContainer k="emojiPickerWidth"> - <MkRadios v-model="emojiPickerWidth"> + <MkRadios + v-model="emojiPickerWidth" + :options="emojiPickerWidthDef" + > <template #label><SearchLabel>{{ i18n.ts.numberOfColumn }}</SearchLabel></template> - <option :value="1">5</option> - <option :value="2">6</option> - <option :value="3">7</option> - <option :value="4">8</option> - <option :value="5">9</option> </MkRadios> </MkPreferenceContainer> </SearchMarker> <SearchMarker :keywords="['emoji', 'picker', 'height', 'size']"> <MkPreferenceContainer k="emojiPickerHeight"> - <MkRadios v-model="emojiPickerHeight"> + <MkRadios + v-model="emojiPickerHeight" + :options="emojiPickerHeightDef" + > <template #label><SearchLabel>{{ i18n.ts.height }}</SearchLabel></template> - <option :value="1">{{ i18n.ts.small }}</option> - <option :value="2">{{ i18n.ts.medium }}</option> - <option :value="3">{{ i18n.ts.large }}</option> - <option :value="4">{{ i18n.ts.large }}+</option> </MkRadios> </MkPreferenceContainer> </SearchMarker> @@ -126,6 +121,7 @@ SPDX-License-Identifier: AGPL-3.0-only import { computed, ref, watch } from 'vue'; import XPalette from './emoji-palette.palette.vue'; import type { MkSelectItem } from '@/components/MkSelect.vue'; +import type { MkRadiosOption } from '@/components/MkRadios.vue'; import { genId } from '@/utility/id.js'; import MkFeatureBanner from '@/components/MkFeatureBanner.vue'; import MkRadios from '@/components/MkRadios.vue'; @@ -158,8 +154,31 @@ const emojiPaletteForMainDef = computed<MkSelectItem[]>(() => [ })), ]); const emojiPickerScale = prefer.model('emojiPickerScale'); +const emojiPickerScaleDef = [ + { label: i18n.ts.small, value: 1 }, + { label: i18n.ts.medium, value: 2 }, + { label: i18n.ts.large, value: 3 }, + { label: i18n.ts.large + '+', value: 4 }, + { label: i18n.ts.large + '++', value: 5 }, +] as MkRadiosOption<number>[]; + const emojiPickerWidth = prefer.model('emojiPickerWidth'); +const emojiPickerWidthDef = [ + { label: '5', value: 1 }, + { label: '6', value: 2 }, + { label: '7', value: 3 }, + { label: '8', value: 4 }, + { label: '9', value: 5 }, +] as MkRadiosOption<number>[]; + const emojiPickerHeight = prefer.model('emojiPickerHeight'); +const emojiPickerHeightDef = [ + { label: i18n.ts.small, value: 1 }, + { label: i18n.ts.medium, value: 2 }, + { label: i18n.ts.large, value: 3 }, + { label: i18n.ts.large + '+', value: 4 }, +] as MkRadiosOption<number>[]; + const emojiPickerStyle = prefer.model('emojiPickerStyle'); const palettesSyncEnabled = ref(prefer.isSyncEnabled('emojiPalettes')); diff --git a/packages/frontend/src/pages/settings/navbar.vue b/packages/frontend/src/pages/settings/navbar.vue index 880e4321ed..997a9f00c2 100644 --- a/packages/frontend/src/pages/settings/navbar.vue +++ b/packages/frontend/src/pages/settings/navbar.vue @@ -32,10 +32,14 @@ SPDX-License-Identifier: AGPL-3.0-only <MkButton primary class="save" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> </div> - <MkRadios v-model="menuDisplay"> + <MkRadios + v-model="menuDisplay" + :options="[ + { value: 'sideFull', label: i18n.ts._menuDisplay.sideFull }, + { value: 'sideIcon', label: i18n.ts._menuDisplay.sideIcon }, + ]" + > <template #label>{{ i18n.ts.display }}</template> - <option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option> - <option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option> </MkRadios> <SearchMarker :keywords="['navbar', 'sidebar', 'toggle', 'button', 'sub']"> diff --git a/packages/frontend/src/pages/settings/preferences.vue b/packages/frontend/src/pages/settings/preferences.vue index 13f76fac98..7d85565ced 100644 --- a/packages/frontend/src/pages/settings/preferences.vue +++ b/packages/frontend/src/pages/settings/preferences.vue @@ -31,12 +31,16 @@ SPDX-License-Identifier: AGPL-3.0-only </SearchMarker> <SearchMarker :keywords="['device', 'type', 'kind', 'smartphone', 'tablet', 'desktop']"> - <MkRadios v-model="overridedDeviceKind"> + <MkRadios + v-model="overridedDeviceKind" + :options="[ + { value: null, label: i18n.ts.auto }, + { value: 'smartphone', label: i18n.ts.smartphone, icon: 'ti ti-device-mobile' }, + { value: 'tablet', label: i18n.ts.tablet, icon: 'ti ti-device-tablet' }, + { value: 'desktop', label: i18n.ts.desktop, icon: 'ti ti-device-desktop' }, + ]" + > <template #label><SearchLabel>{{ i18n.ts.overridedDeviceKind }}</SearchLabel></template> - <option :value="null">{{ i18n.ts.auto }}</option> - <option value="smartphone"><i class="ti ti-device-mobile"/> {{ i18n.ts.smartphone }}</option> - <option value="tablet"><i class="ti ti-device-tablet"/> {{ i18n.ts.tablet }}</option> - <option value="desktop"><i class="ti ti-device-desktop"/> {{ i18n.ts.desktop }}</option> </MkRadios> </SearchMarker> @@ -121,11 +125,15 @@ SPDX-License-Identifier: AGPL-3.0-only <SearchMarker :keywords="['emoji', 'style', 'native', 'system', 'fluent', 'twemoji']"> <MkPreferenceContainer k="emojiStyle"> <div> - <MkRadios v-model="emojiStyle"> + <MkRadios + v-model="emojiStyle" + :options="[ + { value: 'native', label: i18n.ts.native }, + { value: 'fluentEmoji', label: 'Fluent Emoji' }, + { value: 'twemoji', label: 'Twemoji' }, + ]" + > <template #label><SearchLabel>{{ i18n.ts.emojiStyle }}</SearchLabel></template> - <option value="native">{{ i18n.ts.native }}</option> - <option value="fluentEmoji">Fluent Emoji</option> - <option value="twemoji">Twemoji</option> </MkRadios> <div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div> </div> @@ -240,11 +248,15 @@ SPDX-License-Identifier: AGPL-3.0-only <SearchMarker :keywords="['reaction', 'size', 'scale', 'display']"> <MkPreferenceContainer k="reactionsDisplaySize"> - <MkRadios v-model="reactionsDisplaySize"> + <MkRadios + v-model="reactionsDisplaySize" + :options="[ + { value: 'small', label: i18n.ts.small }, + { value: 'medium', label: i18n.ts.medium }, + { value: 'large', label: i18n.ts.large }, + ]" + > <template #label><SearchLabel>{{ i18n.ts.reactionsDisplaySize }}</SearchLabel></template> - <option value="small">{{ i18n.ts.small }}</option> - <option value="medium">{{ i18n.ts.medium }}</option> - <option value="large">{{ i18n.ts.large }}</option> </MkRadios> </MkPreferenceContainer> </SearchMarker> @@ -259,12 +271,16 @@ SPDX-License-Identifier: AGPL-3.0-only <SearchMarker :keywords="['attachment', 'image', 'photo', 'picture', 'media', 'thumbnail', 'list', 'size', 'height']"> <MkPreferenceContainer k="mediaListWithOneImageAppearance"> - <MkRadios v-model="mediaListWithOneImageAppearance"> + <MkRadios + v-model="mediaListWithOneImageAppearance" + :options="[ + { value: 'expand', label: i18n.ts.default }, + { value: '16_9', label: i18n.tsx.limitTo({ x: '16:9' }) }, + { value: '1_1', label: i18n.tsx.limitTo({ x: '1:1' }) }, + { value: '2_3', label: i18n.tsx.limitTo({ x: '2:3' }) }, + ]" + > <template #label><SearchLabel>{{ i18n.ts.mediaListWithOneImageAppearance }}</SearchLabel></template> - <option value="expand">{{ i18n.ts.default }}</option> - <option value="16_9">{{ i18n.tsx.limitTo({ x: '16:9' }) }}</option> - <option value="1_1">{{ i18n.tsx.limitTo({ x: '1:1' }) }}</option> - <option value="2_3">{{ i18n.tsx.limitTo({ x: '2:3' }) }}</option> </MkRadios> </MkPreferenceContainer> </SearchMarker> @@ -394,22 +410,30 @@ SPDX-License-Identifier: AGPL-3.0-only <SearchMarker :keywords="['position']"> <MkPreferenceContainer k="notificationPosition"> - <MkRadios v-model="notificationPosition"> + <MkRadios + v-model="notificationPosition" + :options="[ + { value: 'leftTop', label: i18n.ts.leftTop, icon: 'ti ti-align-box-left-top' }, + { value: 'rightTop', label: i18n.ts.rightTop, icon: 'ti ti-align-box-right-top' }, + { value: 'leftBottom', label: i18n.ts.leftBottom, icon: 'ti ti-align-box-left-bottom' }, + { value: 'rightBottom', label: i18n.ts.rightBottom, icon: 'ti ti-align-box-right-bottom' }, + ]" + > <template #label><SearchLabel>{{ i18n.ts.position }}</SearchLabel></template> - <option value="leftTop"><i class="ti ti-align-box-left-top"></i> {{ i18n.ts.leftTop }}</option> - <option value="rightTop"><i class="ti ti-align-box-right-top"></i> {{ i18n.ts.rightTop }}</option> - <option value="leftBottom"><i class="ti ti-align-box-left-bottom"></i> {{ i18n.ts.leftBottom }}</option> - <option value="rightBottom"><i class="ti ti-align-box-right-bottom"></i> {{ i18n.ts.rightBottom }}</option> </MkRadios> </MkPreferenceContainer> </SearchMarker> <SearchMarker :keywords="['stack', 'axis', 'direction']"> <MkPreferenceContainer k="notificationStackAxis"> - <MkRadios v-model="notificationStackAxis"> + <MkRadios + v-model="notificationStackAxis" + :options="[ + { value: 'vertical', label: i18n.ts.vertical, icon: 'ti ti-carousel-vertical' }, + { value: 'horizontal', label: i18n.ts.horizontal, icon: 'ti ti-carousel-horizontal' }, + ]" + > <template #label><SearchLabel>{{ i18n.ts.stackAxis }}</SearchLabel></template> - <option value="vertical"><i class="ti ti-carousel-vertical"></i> {{ i18n.ts.vertical }}</option> - <option value="horizontal"><i class="ti ti-carousel-horizontal"></i> {{ i18n.ts.horizontal }}</option> </MkRadios> </MkPreferenceContainer> </SearchMarker> @@ -578,12 +602,16 @@ SPDX-License-Identifier: AGPL-3.0-only </SearchMarker> <SearchMarker :keywords="['font', 'size']"> - <MkRadios v-model="fontSize"> + <MkRadios + v-model="fontSize" + :options="[ + { value: null, label: 'Aa', labelStyle: 'font-size: 14px;' }, + { value: '1', label: 'Aa', labelStyle: 'font-size: 15px;' }, + { value: '2', label: 'Aa', labelStyle: 'font-size: 16px;' }, + { value: '3', label: 'Aa', labelStyle: 'font-size: 17px;' }, + ]" + > <template #label><SearchLabel>{{ i18n.ts.fontSize }}</SearchLabel></template> - <option :value="null"><span style="font-size: 14px;">Aa</span></option> - <option value="1"><span style="font-size: 15px;">Aa</span></option> - <option value="2"><span style="font-size: 16px;">Aa</span></option> - <option value="3"><span style="font-size: 17px;">Aa</span></option> </MkRadios> </SearchMarker> @@ -792,10 +820,14 @@ SPDX-License-Identifier: AGPL-3.0-only <SearchMarker> <MkPreferenceContainer k="hemisphere"> - <MkRadios v-model="hemisphere"> + <MkRadios + v-model="hemisphere" + :options="[ + { value: 'N', label: i18n.ts._hemisphere.N }, + { value: 'S', label: i18n.ts._hemisphere.S }, + ]" + > <template #label><SearchLabel>{{ i18n.ts.hemisphere }}</SearchLabel></template> - <option value="N">{{ i18n.ts._hemisphere.N }}</option> - <option value="S">{{ i18n.ts._hemisphere.S }}</option> <template #caption>{{ i18n.ts._hemisphere.caption }}</template> </MkRadios> </MkPreferenceContainer> @@ -925,7 +957,7 @@ const contextMenu = prefer.model('contextMenu'); const menuStyle = prefer.model('menuStyle'); const makeEveryTextElementsSelectable = prefer.model('makeEveryTextElementsSelectable'); -const fontSize = ref(miLocalStorage.getItem('fontSize')); +const fontSize = ref(miLocalStorage.getItem('fontSize') as '1' | '2' | '3' | null); const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null); watch(lang, () => { diff --git a/packages/frontend/src/pages/settings/statusbar.statusbar.vue b/packages/frontend/src/pages/settings/statusbar.statusbar.vue index b69fd2596d..83c8a7b9a7 100644 --- a/packages/frontend/src/pages/settings/statusbar.statusbar.vue +++ b/packages/frontend/src/pages/settings/statusbar.statusbar.vue @@ -17,13 +17,17 @@ SPDX-License-Identifier: AGPL-3.0-only <template #label>Black</template> </MkSwitch> - <MkRadios v-model="statusbar.size"> + <MkRadios + v-model="statusbar.size" + :options="[ + { value: 'verySmall', label: i18n.ts.small + '+' }, + { value: 'small', label: i18n.ts.small }, + { value: 'medium', label: i18n.ts.medium }, + { value: 'large', label: i18n.ts.large }, + { value: 'veryLarge', label: i18n.ts.large + '+' }, + ]" + > <template #label>{{ i18n.ts.size }}</template> - <option value="verySmall">{{ i18n.ts.small }}+</option> - <option value="small">{{ i18n.ts.small }}</option> - <option value="medium">{{ i18n.ts.medium }}</option> - <option value="large">{{ i18n.ts.large }}</option> - <option value="veryLarge">{{ i18n.ts.large }}+</option> </MkRadios> <template v-if="statusbar.type === 'rss'"> diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts index 62e888e023..b33b53b83c 100644 --- a/packages/frontend/src/preferences/def.ts +++ b/packages/frontend/src/preferences/def.ts @@ -237,7 +237,7 @@ export const PREF_DEF = definePreferences({ default: false, }, emojiStyle: { - default: 'twemoji', // twemoji / fluentEmoji / native + default: 'twemoji' as 'native' | 'fluentEmoji' | 'twemoji', }, menuStyle: { default: 'auto' as 'auto' | 'popup' | 'drawer', @@ -503,7 +503,7 @@ export const PREF_DEF = definePreferences({ default: true, }, 'deck.columnAlign': { - default: 'center' as 'left' | 'right' | 'center', + default: 'center' as 'left' | 'center', }, 'deck.columnGap': { default: 6, diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 44d8ed7293..4674293254 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -83,7 +83,7 @@ export const store = markRaw(new Pizzax('base', { }, menuDisplay: { where: 'device', - default: 'sideFull' as 'sideFull' | 'sideIcon' | 'top', + default: 'sideFull' as 'sideFull' | 'sideIcon'/* | 'top' */, }, postFormWithHashtags: { where: 'device', @@ -257,7 +257,7 @@ export const store = markRaw(new Pizzax('base', { }, emojiStyle: { where: 'device', - default: 'twemoji', // twemoji / fluentEmoji / native + default: 'twemoji' as 'twemoji' | 'fluentEmoji' | 'native', }, menuStyle: { where: 'device', diff --git a/packages/frontend/src/types/menu.ts b/packages/frontend/src/types/menu.ts index b1e271e245..05fb3034f0 100644 --- a/packages/frontend/src/types/menu.ts +++ b/packages/frontend/src/types/menu.ts @@ -6,10 +6,11 @@ import * as Misskey from 'misskey-js'; import type { Component, ComputedRef, Ref, MaybeRef } from 'vue'; import type { ComponentProps as CP } from 'vue-component-type-helpers'; +import type { OptionValue } from '@/types/option-value.js'; type ComponentProps<T extends Component> = { [K in keyof CP<T>]: MaybeRef<CP<T>[K]> }; -type MenuRadioOptionsDef = Record<string, any>; +type MenuRadioOptionsDef = Record<string, OptionValue>; type Text = string | ComputedRef<string>; diff --git a/packages/frontend/src/types/option-value.ts b/packages/frontend/src/types/option-value.ts new file mode 100644 index 0000000000..98d0fb5faa --- /dev/null +++ b/packages/frontend/src/types/option-value.ts @@ -0,0 +1,6 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +export type OptionValue = string | number | null; diff --git a/packages/frontend/src/utility/form.ts b/packages/frontend/src/utility/form.ts index a86ae1d1c4..43dee37a0e 100644 --- a/packages/frontend/src/utility/form.ts +++ b/packages/frontend/src/utility/form.ts @@ -4,7 +4,7 @@ */ import * as Misskey from 'misskey-js'; -import type { OptionValue } from '@/components/MkSelect.vue'; +import type { OptionValue } from '@/types/option-value.js'; export type EnumItem = string | { label: string; @@ -45,18 +45,18 @@ export interface BooleanFormItem extends FormItemBase { export interface EnumFormItem extends FormItemBase { type: 'enum'; - default?: string | null; + default?: OptionValue | null; required?: boolean; enum: EnumItem[]; } export interface RadioFormItem extends FormItemBase { type: 'radio'; - default?: unknown | null; + default?: OptionValue | null; required?: boolean; options: { label: string; - value: unknown; + value: OptionValue; }[]; } diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts index 5d14facfb3..dde55e06a0 100644 --- a/packages/misskey-js/src/autogen/types.ts +++ b/packages/misskey-js/src/autogen/types.ts @@ -5373,7 +5373,8 @@ export type components = { /** Format: id */ timeoutUserId: string | null; black: number | null; - bw: string; + /** @enum {string} */ + bw: 'random' | '1' | '2'; noIrregularRules: boolean; isLlotheo: boolean; canPutEverywhere: boolean; @@ -5409,7 +5410,8 @@ export type components = { /** Format: id */ timeoutUserId: string | null; black: number | null; - bw: string; + /** @enum {string} */ + bw: 'random' | '1' | '2'; noIrregularRules: boolean; isLlotheo: boolean; canPutEverywhere: boolean; |