summaryrefslogtreecommitdiff
path: root/packages/frontend/src/components/MkRadio.vue
diff options
context:
space:
mode:
authorsyuilo <4439005+syuilo@users.noreply.github.com>2026-01-14 14:21:51 +0900
committersyuilo <4439005+syuilo@users.noreply.github.com>2026-01-14 14:21:51 +0900
commitd8318c02a18065892fc9e373b97b56becd355467 (patch)
tree912ddf123fa6ad17ca68c616e04353e07ec5790b /packages/frontend/src/components/MkRadio.vue
parentrefactor(frontend): MkRadiosの指定をpropsから行うように (#16597) (diff)
downloadmisskey-d8318c02a18065892fc9e373b97b56becd355467.tar.gz
misskey-d8318c02a18065892fc9e373b97b56becd355467.tar.bz2
misskey-d8318c02a18065892fc9e373b97b56becd355467.zip
refactor(frontend): MkRadioをMkRadiosに統合
Diffstat (limited to 'packages/frontend/src/components/MkRadio.vue')
-rw-r--r--packages/frontend/src/components/MkRadio.vue136
1 files changed, 0 insertions, 136 deletions
diff --git a/packages/frontend/src/components/MkRadio.vue b/packages/frontend/src/components/MkRadio.vue
deleted file mode 100644
index 19ba90052c..0000000000
--- a/packages/frontend/src/components/MkRadio.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div
- v-adaptive-border
- :class="[$style.root, { [$style.disabled]: disabled, [$style.checked]: checked }]"
- :aria-checked="checked"
- :aria-disabled="disabled"
- role="checkbox"
- @click="toggle"
->
- <input
- type="radio"
- :disabled="disabled"
- :class="$style.input"
- >
- <span :class="$style.button">
- <span></span>
- </span>
- <span :class="$style.label"><slot></slot></span>
-</div>
-</template>
-
-<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;
- value: T;
- disabled?: boolean;
-}>();
-
-const emit = defineEmits<{
- (ev: 'update:modelValue', value: T): void;
-}>();
-
-const checked = computed(() => props.modelValue === props.value);
-
-function toggle(): void {
- if (props.disabled) return;
- emit('update:modelValue', props.value);
-}
-</script>
-
-<style lang="scss" module>
-.root {
- position: relative;
- display: inline-flex;
- align-items: center;
- text-align: left;
- cursor: pointer;
- padding: 8px 10px;
- min-width: 60px;
- background-color: var(--MI_THEME-panel);
- background-clip: padding-box !important;
- border: solid 1px var(--MI_THEME-panel);
- border-radius: 6px;
- font-size: 90%;
- transition: all 0.2s;
- user-select: none;
-
- &.disabled {
- opacity: 0.6;
- cursor: not-allowed !important;
- }
-
- &:hover {
- border-color: var(--MI_THEME-inputBorderHover) !important;
- }
-
- &:focus-within {
- outline: none;
- box-shadow: 0 0 0 2px var(--MI_THEME-focus);
- }
-
- &.checked {
- background-color: var(--MI_THEME-accentedBg) !important;
- border-color: var(--MI_THEME-accentedBg) !important;
- color: var(--MI_THEME-accent);
- cursor: default !important;
-
- > .button {
- border-color: var(--MI_THEME-accent);
-
- &::after {
- background-color: var(--MI_THEME-accent);
- transform: scale(1);
- opacity: 1;
- }
- }
- }
-}
-
-.input {
- position: absolute;
- width: 0;
- height: 0;
- opacity: 0;
- margin: 0;
-}
-
-.button {
- position: relative;
- display: inline-block;
- width: 14px;
- height: 14px;
- background: none;
- border: solid 2px var(--MI_THEME-inputBorder);
- border-radius: 100%;
- transition: inherit;
-
- &::after {
- content: '';
- display: block;
- position: absolute;
- top: 3px;
- right: 3px;
- bottom: 3px;
- left: 3px;
- border-radius: 100%;
- opacity: 0;
- transform: scale(0);
- transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
- }
-}
-
-.label {
- margin-left: 8px;
- display: block;
- cursor: pointer;
-}
-</style>