2019-04-07 02:14:43 +09:00
|
|
|
|
<template>
|
2019-10-07 06:05:21 +09:00
|
|
|
|
<label
|
|
|
|
|
class="checkbox"
|
|
|
|
|
:class="{ disabled, indeterminate }"
|
2019-10-29 16:35:42 +09:00
|
|
|
|
>
|
2019-07-05 16:17:44 +09:00
|
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
2023-02-10 11:35:56 +09:00
|
|
|
|
class="visible-for-screenreader-only"
|
2019-10-07 06:05:21 +09:00
|
|
|
|
:disabled="disabled"
|
2022-03-24 20:41:52 +09:00
|
|
|
|
:checked="modelValue"
|
2022-03-17 15:35:19 +09:00
|
|
|
|
:indeterminate="indeterminate"
|
2022-03-24 18:41:39 +09:00
|
|
|
|
@change="$emit('update:modelValue', $event.target.checked)"
|
2019-07-05 16:17:44 +09:00
|
|
|
|
>
|
2023-01-29 12:10:06 +09:00
|
|
|
|
<i
|
|
|
|
|
class="checkbox-indicator"
|
|
|
|
|
:aria-hidden="true"
|
|
|
|
|
/>
|
2019-10-07 06:05:21 +09:00
|
|
|
|
<span
|
2022-03-29 17:59:00 +09:00
|
|
|
|
v-if="!!$slots.default"
|
2019-11-09 01:14:01 +09:00
|
|
|
|
class="label"
|
2019-10-29 16:35:42 +09:00
|
|
|
|
>
|
2019-10-07 06:05:21 +09:00
|
|
|
|
<slot />
|
|
|
|
|
</span>
|
2019-04-07 02:14:43 +09:00
|
|
|
|
</label>
|
|
|
|
|
</template>
|
2019-04-04 10:13:25 +09:00
|
|
|
|
|
2019-04-07 02:14:43 +09:00
|
|
|
|
<script>
|
|
|
|
|
export default {
|
2019-10-07 06:05:21 +09:00
|
|
|
|
props: [
|
2022-03-24 18:41:39 +09:00
|
|
|
|
'modelValue',
|
2019-10-07 06:05:21 +09:00
|
|
|
|
'indeterminate',
|
|
|
|
|
'disabled'
|
2022-07-31 18:35:48 +09:00
|
|
|
|
],
|
|
|
|
|
emits: ['update:modelValue']
|
2019-04-07 02:14:43 +09:00
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
2023-01-10 03:02:16 +09:00
|
|
|
|
@import "../../variables";
|
2023-01-29 12:10:06 +09:00
|
|
|
|
@import "../../mixins";
|
2019-04-07 02:21:41 +09:00
|
|
|
|
|
2019-04-04 10:13:25 +09:00
|
|
|
|
.checkbox {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
2019-04-04 17:32:36 +09:00
|
|
|
|
min-height: 1.2em;
|
2019-04-04 10:13:25 +09:00
|
|
|
|
|
2019-10-08 02:43:23 +09:00
|
|
|
|
&-indicator {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding-left: 1.2em;
|
|
|
|
|
}
|
|
|
|
|
|
2019-04-04 10:13:25 +09:00
|
|
|
|
&-indicator::before {
|
|
|
|
|
position: absolute;
|
2019-10-08 02:43:23 +09:00
|
|
|
|
right: 0;
|
2019-04-04 10:13:25 +09:00
|
|
|
|
top: 0;
|
|
|
|
|
display: block;
|
2023-01-10 03:02:16 +09:00
|
|
|
|
content: "✓";
|
2019-04-04 10:13:25 +09:00
|
|
|
|
transition: color 200ms;
|
|
|
|
|
width: 1.1em;
|
|
|
|
|
height: 1.1em;
|
|
|
|
|
border-radius: $fallback--checkboxRadius;
|
|
|
|
|
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
|
2023-01-10 03:02:16 +09:00
|
|
|
|
box-shadow: 0 0 2px black inset;
|
2019-04-04 10:13:25 +09:00
|
|
|
|
box-shadow: var(--inputShadow);
|
|
|
|
|
background-color: $fallback--fg;
|
|
|
|
|
background-color: var(--input, $fallback--fg);
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 1.1em;
|
|
|
|
|
font-size: 1.1em;
|
|
|
|
|
color: transparent;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-07 06:05:21 +09:00
|
|
|
|
&.disabled {
|
|
|
|
|
.checkbox-indicator::before,
|
|
|
|
|
.label {
|
2023-01-10 03:02:16 +09:00
|
|
|
|
opacity: 0.5;
|
2019-10-07 06:05:21 +09:00
|
|
|
|
}
|
2023-01-10 03:02:16 +09:00
|
|
|
|
|
2019-10-07 06:05:21 +09:00
|
|
|
|
.label {
|
|
|
|
|
color: $fallback--faint;
|
|
|
|
|
color: var(--faint, $fallback--faint);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-10 03:02:16 +09:00
|
|
|
|
input[type="checkbox"] {
|
2019-04-04 10:13:25 +09:00
|
|
|
|
&:checked + .checkbox-indicator::before {
|
|
|
|
|
color: $fallback--text;
|
2020-02-07 08:25:26 +09:00
|
|
|
|
color: var(--inputText, $fallback--text);
|
2019-04-04 10:13:25 +09:00
|
|
|
|
}
|
|
|
|
|
|
2019-04-07 02:45:28 +09:00
|
|
|
|
&:indeterminate + .checkbox-indicator::before {
|
2023-01-10 03:02:16 +09:00
|
|
|
|
content: "–";
|
2019-04-07 02:45:28 +09:00
|
|
|
|
color: $fallback--text;
|
2020-02-07 08:25:26 +09:00
|
|
|
|
color: var(--inputText, $fallback--text);
|
2019-04-07 02:45:28 +09:00
|
|
|
|
}
|
2019-04-04 10:13:25 +09:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& > span {
|
2023-01-10 03:02:16 +09:00
|
|
|
|
margin-left: 0.5em;
|
2019-04-04 10:13:25 +09:00
|
|
|
|
}
|
|
|
|
|
}
|
2019-04-07 02:14:43 +09:00
|
|
|
|
</style>
|