From 6176cca0a4de6891be4d75a15332d8a929a72082 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Mon, 27 Apr 2026 10:18:03 +0900 Subject: [PATCH] =?UTF-8?q?fix(frontend):=20MenuRadio=E3=81=AE=E6=8C=87?= =?UTF-8?q?=E5=AE=9A=E6=96=B9=E6=B3=95=E5=A4=89=E6=9B=B4=20(#17345)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(frontend): MenuRadioの指定方法変更 * fix indent --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> --- .../frontend/src/components/MkMediaAudio.vue | 31 +++++++++----- .../frontend/src/components/MkMediaVideo.vue | 31 +++++++++----- packages/frontend/src/components/MkMenu.vue | 22 +++++----- packages/frontend/src/types/menu.ts | 40 ++++++++----------- 4 files changed, 73 insertions(+), 51 deletions(-) diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue index efcbf26a29..c178b923ae 100644 --- a/packages/frontend/src/components/MkMediaAudio.vue +++ b/packages/frontend/src/components/MkMediaAudio.vue @@ -182,15 +182,28 @@ function showMenu(ev: MouseEvent) { text: i18n.ts._mediaControls.playbackRate, icon: 'ti ti-clock-play', ref: speed, - options: { - '0.25x': 0.25, - '0.5x': 0.5, - '0.75x': 0.75, - '1.0x': 1, - '1.25x': 1.25, - '1.5x': 1.5, - '2.0x': 2, - }, + options: [{ + label: '0.25x', + value: 0.25, + }, { + label: '0.5x', + value: 0.5, + }, { + label: '0.75x', + value: 0.75, + }, { + label: '1.0x', + value: 1, + }, { + label: '1.25x', + value: 1.25, + }, { + label: '1.5x', + value: 1.5, + }, { + label: '2.0x', + value: 2, + }], }, { type: 'divider', diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index 4d06e42c05..be3b3ad396 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -204,15 +204,28 @@ function showMenu(ev: PointerEvent) { text: i18n.ts._mediaControls.playbackRate, icon: 'ti ti-clock-play', ref: speed, - options: { - '0.25x': 0.25, - '0.5x': 0.5, - '0.75x': 0.75, - '1.0x': 1, - '1.25x': 1.25, - '1.5x': 1.5, - '2.0x': 2, - }, + options: [{ + label: '0.25x', + value: 0.25, + }, { + label: '0.5x', + value: 0.5, + }, { + label: '0.75x', + value: 0.75, + }, { + label: '1.0x', + value: 1, + }, { + label: '1.25x', + value: 1.25, + }, { + label: '1.5x', + value: 1.5, + }, { + label: '2.0x', + value: 2, + }], }, ...(window.document.pictureInPictureEnabled ? [{ text: i18n.ts._mediaControls.pip, diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue index 439a348233..bbe0c1c4df 100644 --- a/packages/frontend/src/components/MkMenu.vue +++ b/packages/frontend/src/components/MkMenu.vue @@ -339,24 +339,23 @@ function onItemMouseLeave() { } async function showRadioOptions(item: MenuRadio, ev: MouseEvent | PointerEvent | KeyboardEvent) { - const children: MenuItem[] = Object.keys(item.options).map(key => { - const value = item.options[key]; + const children: MenuItem[] = item.options.map(def => { return { type: 'radioOption', - text: key, + text: def.label, action: () => { if (isRef(item.ref)) { - item.ref.value = value; + item.ref.value = def.value; } else { // @ts-expect-error リアクティビティは保たれる - item.ref = value; + item.ref = def.value; } }, active: computed(() => { if (isRef(item.ref)) { - return item.ref.value === value; + return item.ref.value === def.value; } else { - return item.ref === value; + return item.ref === def.value; } }), }; @@ -421,9 +420,14 @@ function close(actioned = false) { }); } -function switchItem(item: MenuSwitch & { ref: any }) { +function switchItem(item: MenuSwitch) { if (item.disabled !== undefined && (typeof item.disabled === 'boolean' ? item.disabled : item.disabled.value)) return; - item.ref = !item.ref; + if (isRef(item.ref)) { + item.ref.value = !item.ref.value; + } else { + // @ts-expect-error リアクティビティは保たれる + item.ref = !item.ref; + } } function focusUp() { diff --git a/packages/frontend/src/types/menu.ts b/packages/frontend/src/types/menu.ts index 05fb3034f0..1c037d80d7 100644 --- a/packages/frontend/src/types/menu.ts +++ b/packages/frontend/src/types/menu.ts @@ -10,8 +10,6 @@ import type { OptionValue } from '@/types/option-value.js'; type ComponentProps = { [K in keyof CP]: MaybeRef[K]> }; -type MenuRadioOptionsDef = Record; - type Text = string | ComputedRef; export type MenuAction = (ev: PointerEvent) => void; @@ -32,6 +30,12 @@ interface MenuBase { type: string; } +interface TextMenuBase extends MenuBase { + text: Text; + caption?: Text | null | undefined | ComputedRef; + icon?: string; +} + export interface MenuDivider extends MenuBase { type: 'divider'; } @@ -42,24 +46,18 @@ export interface MenuLabel extends MenuBase { caption?: Text | null | undefined | ComputedRef; } -export interface MenuLink extends MenuBase { +export interface MenuLink extends TextMenuBase { type: 'link'; to: string; - text: Text; - caption?: Text | null | undefined | ComputedRef; - icon?: string; indicate?: boolean; avatar?: Misskey.entities.User; } -export interface MenuA extends MenuBase { +export interface MenuA extends TextMenuBase { type: 'a'; href: string; target?: string; download?: string; - text: Text; - caption?: Text | null | undefined | ComputedRef; - icon?: string; indicate?: boolean; } @@ -71,22 +69,19 @@ export interface MenuUser extends MenuBase { action: MenuAction; } -export interface MenuSwitch extends MenuBase { +export interface MenuSwitch extends TextMenuBase { type: 'switch'; ref: Ref; - text: Text; - caption?: Text | null | undefined | ComputedRef; - icon?: string; disabled?: boolean | Ref; } -export interface MenuRadio extends MenuBase { +export interface MenuRadio extends TextMenuBase { type: 'radio'; - text: Text; - caption?: Text | null | undefined | ComputedRef; - icon?: string; - ref: Ref; - options: MenuRadioOptionsDef; + ref: Ref; + options: { + label: string; + value: OptionValue; + }[]; disabled?: boolean | Ref; } @@ -104,11 +99,8 @@ export interface MenuComponent extends MenuBase { props?: ComponentProps; } -export interface MenuParent extends MenuBase { +export interface MenuParent extends TextMenuBase { type: 'parent'; - text: Text; - caption?: Text | null | undefined | ComputedRef; - icon?: string; children: MenuItem[] | (() => Promise | MenuItem[]); }