1
0
mirror of https://github.com/MisskeyIO/misskey synced 2024-12-17 16:18:23 +09:00
MisskeyIO/packages/client/src/components/form/switch.vue

139 lines
2.1 KiB
Vue
Raw Normal View History

<template>
2021-09-30 00:50:45 +09:00
<div
class="ziffeoms"
:class="{ disabled, checked }"
>
<input
ref="input"
2021-11-19 19:36:12 +09:00
type="checkbox"
2021-09-30 00:50:45 +09:00
:disabled="disabled"
@keydown.enter="toggle"
>
2021-12-26 01:42:50 +09:00
<span v-adaptive-border v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button" @click.prevent="toggle">
<i class="check fas fa-check"></i>
2021-09-30 00:50:45 +09:00
</span>
<span class="label">
2021-12-26 01:42:50 +09:00
<span @click="toggle"><slot></slot></span>
2021-11-28 20:07:37 +09:00
<p class="caption"><slot name="caption"></slot></p>
2021-09-30 00:50:45 +09:00
</span>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
2021-09-30 00:50:45 +09:00
modelValue: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
computed: {
checked(): boolean {
2021-09-30 00:50:45 +09:00
return this.modelValue;
}
},
methods: {
toggle() {
if (this.disabled) return;
2021-09-30 00:50:45 +09:00
this.$emit('update:modelValue', !this.checked);
}
}
});
</script>
<style lang="scss" scoped>
2021-09-30 00:50:45 +09:00
.ziffeoms {
position: relative;
display: flex;
2021-12-26 01:42:50 +09:00
transition: all 0.2s;
2021-09-30 00:50:45 +09:00
> * {
user-select: none;
}
> input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
margin: 0;
}
2021-09-30 00:50:45 +09:00
> .button {
position: relative;
2021-12-26 01:42:50 +09:00
display: inline-flex;
2021-09-30 00:50:45 +09:00
flex-shrink: 0;
margin: 0;
2021-12-26 01:42:50 +09:00
box-sizing: border-box;
width: 23px;
height: 23px;
2021-09-30 00:50:45 +09:00
outline: none;
2021-12-26 01:42:50 +09:00
background: var(--panel);
border: solid 1px var(--panel);
border-radius: 4px;
cursor: pointer;
2021-09-30 00:50:45 +09:00
transition: inherit;
2021-12-26 01:42:50 +09:00
> .check {
margin: auto;
opacity: 0;
color: var(--fgOnAccent);
font-size: 13px;
}
}
&:hover {
> .button {
border-color: var(--inputBorderHover) !important;
}
2021-09-30 00:50:45 +09:00
}
2021-09-30 00:50:45 +09:00
> .label {
margin-left: 16px;
margin-top: 2px;
display: block;
transition: inherit;
color: var(--fg);
2021-09-30 00:50:45 +09:00
> span {
display: block;
line-height: 20px;
2021-12-26 01:42:50 +09:00
cursor: pointer;
2021-09-30 00:50:45 +09:00
transition: inherit;
}
2021-11-28 20:07:37 +09:00
> .caption {
margin: 8px 0 0 0;
2021-09-30 00:50:45 +09:00
color: var(--fgTransparentWeak);
2021-11-28 20:07:37 +09:00
font-size: 0.85em;
&:empty {
display: none;
}
}
2021-09-30 00:50:45 +09:00
}
2021-09-30 00:50:45 +09:00
&.disabled {
opacity: 0.6;
cursor: not-allowed;
}
&.checked {
> .button {
2021-12-26 01:42:50 +09:00
background-color: var(--accent) !important;
border-color: var(--accent) !important;
2021-12-26 01:42:50 +09:00
> .check {
opacity: 1;
}
}
}
}
</style>