diff options
| -rw-r--r-- | packages/frontend/src/components/MkColorInput.vue | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/packages/frontend/src/components/MkColorInput.vue b/packages/frontend/src/components/MkColorInput.vue new file mode 100644 index 0000000000..a96e1edf7a --- /dev/null +++ b/packages/frontend/src/components/MkColorInput.vue @@ -0,0 +1,110 @@ +<template> +<div> + <div :class="$style.label"><slot name="label"></slot></div> + <div :class="[$style.input, { disabled, focused }]"> + <input + ref="inputEl" + v-model="v" + v-adaptive-border + :class="$style.inputCore" + type="color" + :disabled="disabled" + :required="required" + :readonly="readonly" + @input="onInput" + > + </div> + <div :class="$style.caption"><slot name="caption"></slot></div> +</div> +</template> + +<script lang="ts" setup> +import { onMounted, nextTick, ref, shallowRef, watch, computed, toRefs } from 'vue'; +import { i18n } from '@/i18n'; + +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 = shallowRef<HTMLElement>(); + +const onInput = (ev: KeyboardEvent) => { + emit('update:modelValue', v.value); +}; +</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: var(--fgTransparentWeak); + + &:empty { + display: none; + } +} + +.input { + position: relative; + + &.focused { + > .inputCore { + border-color: var(--accent) !important; + //box-shadow: 0 0 0 4px var(--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(--fg); + background: var(--panel); + border: solid 1px var(--panel); + border-radius: 6px; + outline: none; + box-shadow: none; + box-sizing: border-box; + transition: border-color 0.1s ease-out; + + &:hover { + border-color: var(--inputBorderHover) !important; + } +} +</style> |