mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-06-14 09:05:00 +02:00
Code Releases Activity

refactor(frontend): MkRadioをMkRadiosに統合

Browse Source
This commit is contained in:
syuilo
2026-01-14 14:21:51 +09:00
parent b941c896aa
commit d8318c02a1
4 changed files with 119 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
packages/frontend/src/components/MkRadios.vue
View File

@@ -8,15 +8,27 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.label">
<slot name="label"></slot>
</div>
<div :class="$style.body">
<MkRadio
<div
v-for="option in options"
:key="getKey(option.value)"
v-model="model"
:disabled="option.disabled"
:value="option.value"
v-adaptive-border
:class="[$style.optionRoot, { [$style.disabled]: option.disabled, [$style.checked]: model === option.value }]"
:aria-checked="model === option.value"
:aria-disabled="option.disabled"
role="checkbox"
@click="toggle(option)"
>
<div :class="[$style.optionContent, { [$style.checked]: model === option.value }]">
<input
type="radio"
:disabled="option.disabled"
:class="$style.optionInput"
>
<span :class="$style.optionButton">
<span></span>
</span>
<div :class="$style.optionContent">
<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>
@@ -26,8 +38,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</div>
</div>
</MkRadio>
</div>
</div>
<div :class="$style.caption">
<slot name="caption"></slot>
</div>
@@ -51,8 +64,6 @@ export type MkRadiosOption<T = OptionValue, S = string> = {
</script>
<script setup lang="ts" generic="const T extends MkRadiosOption">
import MkRadio from './MkRadio.vue';
defineProps<{
options: T[];
vertical?: boolean;
@@ -61,18 +72,23 @@ defineProps<{
type SlotNames = NonNullable<T extends MkRadiosOption<any, infer U> ? U : never>;
defineSlots<{
label?: () => any;
caption?: () => any;
label?: () => void;
caption?: () => void;
} & {
[K in `option-${SlotNames}`]: () => any;
[K in `option-${SlotNames}`]: () => void;
}>();
const model = defineModel<T['value']>({ required: true });
function getKey(value: OptionValue): PropertyKey {
if (value === null) return 'null';
if (value === null) return '___null___';
return value;
}
function toggle(o: MkRadiosOption): void {
if (o.disabled) return;
model.value = o.value;
}
</script>
<style lang="scss" module>
@@ -102,29 +118,110 @@ function getKey(value: OptionValue): PropertyKey {
}
}
.vertical > .body {
flex-direction: column;
}
.optionRoot {
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;
.optionButton {
border-color: var(--MI_THEME-accent);
&::after {
background-color: var(--MI_THEME-accent);
transform: scale(1);
opacity: 1;
}
}
.optionCaption {
color: color(from var(--MI_THEME-accent) srgb r g b / 0.75);
}
}
}
.optionInput {
position: absolute;
width: 0;
height: 0;
opacity: 0;
margin: 0;
}
.optionButton {
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);
}
}
.optionContent {
display: flex;
align-items: center;
gap: 6px;
margin-left: 8px;
}
.optionCaption {
font-size: 0.85em;
padding: 2px 0 0 0;
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
}
.optionContent.checked {
.optionCaption {
color: color(from var(--MI_THEME-accent) srgb r g b / 0.75);
}
transition: all 0.2s;
}
.optionIcon {
flex-shrink: 0;
}
.vertical > .body {
flex-direction: column;
}
</style>