mirror of
https://activitypub.software/TransFem-org/Sharkey
synced 2024-12-02 10:47:28 +00:00
ae5d052274
to keep things manageable i merged a lot of one off values into just a handful of common sizes, so some parts of the ui will look different than upstream even with the "Misskey" rounding mode
128 lines
2.3 KiB
Vue
128 lines
2.3 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
|
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"
|
|
@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>
|
|
import { } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
modelValue: any;
|
|
value: any;
|
|
disabled?: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(ev: 'update:modelValue', value: any): void;
|
|
}>();
|
|
|
|
let 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-block;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
padding: 7px 10px;
|
|
min-width: 60px;
|
|
background-color: var(--panel);
|
|
background-clip: padding-box !important;
|
|
border: solid 1px var(--panel);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 90%;
|
|
transition: all 0.2s;
|
|
user-select: none;
|
|
|
|
&.disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed !important;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: var(--inputBorderHover) !important;
|
|
}
|
|
|
|
&.checked {
|
|
background-color: var(--accentedBg) !important;
|
|
border-color: var(--accentedBg) !important;
|
|
color: var(--accent);
|
|
cursor: default !important;
|
|
|
|
> .button {
|
|
border-color: var(--accent);
|
|
|
|
&:after {
|
|
background-color: var(--accent);
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.input {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.button {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
background: none;
|
|
border: solid 2px var(--inputBorder);
|
|
border-radius: var(--radius-full);
|
|
transition: inherit;
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 3px;
|
|
bottom: 3px;
|
|
left: 3px;
|
|
border-radius: var(--radius-full);
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
}
|
|
}
|
|
|
|
.label {
|
|
margin-left: 28px;
|
|
display: block;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|