155 lines
3.6 KiB
Vue
155 lines
3.6 KiB
Vue
<template>
|
|
<div class="shared-select" :class="{ 'has-value': model, 'is-focused': focused, 'is-disabled': disabled, 'is-error': error }">
|
|
<label v-if="label" :for="id">{{ label }}</label>
|
|
<div class="select-wrap">
|
|
<select
|
|
:id="id"
|
|
:disabled="disabled"
|
|
v-model="model"
|
|
@focus="focused = true"
|
|
@blur="focused = false"
|
|
>
|
|
<option v-if="placeholder" value="" disabled hidden>{{ placeholder }}</option>
|
|
<option
|
|
v-for="option in options"
|
|
:key="option.value ?? option"
|
|
:value="option.value ?? option"
|
|
>
|
|
{{ option.label ?? option }}
|
|
</option>
|
|
</select>
|
|
<span class="arrow">↓</span>
|
|
<span class="underline" />
|
|
</div>
|
|
<span v-if="error" class="error-msg">{{ error }}</span>
|
|
<span v-else-if="hint" class="hint">{{ hint }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
id: String,
|
|
label: String,
|
|
placeholder: String,
|
|
options: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
error: String,
|
|
hint: String,
|
|
})
|
|
|
|
const model = defineModel()
|
|
const focused = ref(false)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.shared-select {
|
|
--t-duration: 250ms;
|
|
--t-ease: var(--ease-out-quad);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: rs(6px);
|
|
|
|
label {
|
|
@include label;
|
|
opacity: 0.45;
|
|
transition: opacity var(--t-duration) var(--t-ease);
|
|
}
|
|
|
|
.select-wrap {
|
|
position: relative;
|
|
|
|
select {
|
|
@include p;
|
|
width: 100%;
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: rs(1px) solid var(--grey-400);
|
|
padding: rs(8px) rs(24px) rs(8px) 0;
|
|
color: var(--theme-fg);
|
|
outline: none;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
|
|
option {
|
|
background: var(--theme-bg, #fff);
|
|
color: var(--theme-fg);
|
|
}
|
|
}
|
|
|
|
.arrow {
|
|
@include label;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
opacity: 0.45;
|
|
transition: transform var(--t-duration) var(--t-ease), opacity var(--t-duration) var(--t-ease);
|
|
}
|
|
|
|
.underline {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: rs(1px);
|
|
background: var(--theme-contrast);
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform var(--t-duration) var(--t-ease);
|
|
}
|
|
}
|
|
|
|
.error-msg,
|
|
.hint {
|
|
@include label;
|
|
font-size: rs(11px);
|
|
}
|
|
|
|
.hint {
|
|
opacity: 0.35;
|
|
}
|
|
|
|
&.is-focused {
|
|
label {
|
|
opacity: 1;
|
|
}
|
|
|
|
.underline {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.arrow {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.is-disabled {
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&.is-error {
|
|
.select-wrap select {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.underline {
|
|
background: currentColor;
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.error-msg {
|
|
opacity: 0.65;
|
|
}
|
|
}
|
|
}
|
|
</style>
|