diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2025-09-13 21:00:33 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-09-13 21:00:33 +0900 |
| commit | d4654dd7bd5bf1c7faa74ed89f592448c0076be8 (patch) | |
| tree | b4f51e86f174717fef469fbedca48faa2a55e841 /packages/frontend/src/components/MkEmbedCodeGenDialog.vue | |
| parent | fix(deps): update dependency vite [security] (#16535) (diff) | |
| download | misskey-d4654dd7bd5bf1c7faa74ed89f592448c0076be8.tar.gz misskey-d4654dd7bd5bf1c7faa74ed89f592448c0076be8.tar.bz2 misskey-d4654dd7bd5bf1c7faa74ed89f592448c0076be8.zip | |
refactor(frontend): os.select, MkSelectのitem指定をオブジェクトによる定義に統一し、型を狭める (#16475)
* refactor(frontend): MkSelectのitem指定をオブジェクトによる定義に統一
* fix
* spdx
* fix
* fix os.select
* fix lint
* add comment
* fix
* fix: os.select対応漏れを修正
* fix
* fix
* fix: MkSelectのmodelに対する型チェックを厳格化
* fix
* fix
* fix
* Update packages/frontend/src/components/MkEmbedCodeGenDialog.vue
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
* fix
* fix types
* fix
* fix
* Update packages/frontend/src/pages/admin/roles.editor.vue
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
* fix: MkSelectに直接配列を指定している場合に正常に型が解決されるように
---------
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
Diffstat (limited to 'packages/frontend/src/components/MkEmbedCodeGenDialog.vue')
| -rw-r--r-- | packages/frontend/src/components/MkEmbedCodeGenDialog.vue | 19 |
1 files changed, 14 insertions, 5 deletions
diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue index 17823deb85..0cb8499699 100644 --- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue +++ b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue @@ -52,11 +52,8 @@ SPDX-License-Identifier: AGPL-3.0-only <template #suffix>px</template> <template #caption>{{ i18n.ts._embedCodeGen.maxHeightDescription }}</template> </MkInput> - <MkSelect v-model="colorMode"> + <MkSelect v-model="colorMode" :items="colorModeDef"> <template #label>{{ i18n.ts.theme }}</template> - <option value="auto">{{ i18n.ts.syncDeviceDarkMode }}</option> - <option value="light">{{ i18n.ts.light }}</option> - <option value="dark">{{ i18n.ts.dark }}</option> </MkSelect> <MkSwitch v-if="isEmbedWithScrollbar" v-model="header">{{ i18n.ts._embedCodeGen.header }}</MkSwitch> <MkSwitch v-model="rounded">{{ i18n.ts._embedCodeGen.rounded }}</MkSwitch> @@ -105,6 +102,7 @@ import MkInfo from '@/components/MkInfo.vue'; import * as os from '@/os.js'; import { i18n } from '@/i18n.js'; +import { useMkSelect } from '@/composables/use-mkselect.js'; import { copyToClipboard } from '@/utility/copy-to-clipboard.js'; import { normalizeEmbedParams, getEmbedCode } from '@/utility/get-embed-code.js'; @@ -162,7 +160,18 @@ const isEmbedWithScrollbar = computed(() => embedRouteWithScrollbar.includes(pro const header = ref(props.params?.header ?? true); const maxHeight = ref(props.params?.maxHeight !== 0 ? props.params?.maxHeight ?? null : 500); -const colorMode = ref<'light' | 'dark' | 'auto'>(props.params?.colorMode ?? 'auto'); +const { + model: colorMode, + def: colorModeDef, +} = useMkSelect({ + items: [ + { value: 'auto', label: i18n.ts.syncDeviceDarkMode }, + { value: 'light', label: i18n.ts.light }, + { value: 'dark', label: i18n.ts.dark }, + ], + initialValue: props.params?.colorMode ?? 'auto', +}); + const rounded = ref(props.params?.rounded ?? true); const border = ref(props.params?.border ?? true); |