blob: c2085df4f2c951a9cb084a73482ef35b9ff55757 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<div :class="$style.label"><slot name="label"></slot></div>
<div :class="[$style.input, { disabled }]">
<input
ref="inputEl"
v-model="v"
v-adaptive-border
:class="$style.inputCore"
type="color"
:disabled="disabled"
:required="required"
:readonly="readonly"
@input="onInput"
>
</div>
<MkButton @click="removeColor">{{ i18n.ts.reset }}</MkButton>
<div :class="$style.caption"><slot name="caption"></slot></div>
</div>
</template>
<script lang="ts" setup>
import { ref, useTemplateRef, toRefs } from 'vue';
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n.js';
const props = defineProps<{
modelValue: string | null;
required?: boolean;
readonly?: boolean;
disabled?: boolean;
}>();
const emit = defineEmits<{
(ev: 'update:modelValue', value: string): void;
}>();
const { modelValue } = toRefs(props);
const v = ref(modelValue.value);
const inputEl = useTemplateRef('inputEl');
const onInput = () => {
emit('update:modelValue', v.value ?? '');
};
const removeColor = () => {
v.value = null;
onInput();
};
</script>
<style lang="scss" module>
.label {
font-size: 0.85em;
padding: 0 0 8px 0;
user-select: none;
&:empty {
display: none;
}
}
.caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
&:empty {
display: none;
}
}
.input {
position: relative;
&.focused {
> .inputCore {
border-color: var(--MI_THEME-accent) !important;
//box-shadow: 0 0 0 4px var(--MI_THEME-focus);
}
}
&.disabled {
opacity: 0.7;
&,
> .inputCore {
cursor: not-allowed !important;
}
}
}
.inputCore {
appearance: none;
-webkit-appearance: none;
display: block;
height: 42px;
width: 100%;
margin: 0;
padding: 0 12px;
font: inherit;
font-weight: normal;
font-size: 1em;
color: var(--MI_THEME-fg);
background: var(--MI_THEME-panel);
border: solid 1px var(--MI_THEME-panel);
border-radius: var(--MI-radius-sm);
outline: none;
box-shadow: none;
box-sizing: border-box;
transition: border-color 0.1s ease-out;
&:hover {
border-color: var(--MI_THEME-inputBorderHover) !important;
}
}
</style>
|
