77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
/** 선택 입력 값 */
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
/** 선택 옵션 목록 */
|
|
options: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
/** 스크린 리더용 선택 라벨 */
|
|
label: {
|
|
type: String,
|
|
default: '선택'
|
|
},
|
|
/** label 루트에 추가할 화면별 클래스 */
|
|
rootClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** select에 추가할 화면별 클래스 */
|
|
selectClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** select 너비 클래스 */
|
|
widthClass: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
/**
|
|
* option에 전달할 실제 값을 반환한다.
|
|
* @param {Object} option - 선택 옵션
|
|
* @returns {string|number} 선택 값
|
|
*/
|
|
const getOptionValue = (option) => option.value
|
|
|
|
/**
|
|
* 선택 값을 상위 컴포넌트에 전달한다.
|
|
* @param {Event} event - 변경 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const updateValue = (event) => {
|
|
const selectedValue = event.target?.value || ''
|
|
const selectedOption = props.options.find((option) => String(option.value) === selectedValue)
|
|
emit('update:modelValue', selectedOption ? selectedOption.value : selectedValue)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<label class="admin-select-input" :class="rootClass">
|
|
<span class="sr-only">{{ label }}</span>
|
|
<span class="admin-select-input__wrap relative block">
|
|
<select
|
|
:value="props.modelValue"
|
|
class="admin-select-input__field h-10 appearance-none rounded border border-line bg-white pl-3 pr-9 text-sm text-[#394047] outline-none transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac]"
|
|
:class="[widthClass, selectClass]"
|
|
:aria-label="label"
|
|
@change="updateValue"
|
|
>
|
|
<option v-for="option in options" :key="option.value" :value="getOptionValue(option)">
|
|
{{ option.label }}
|
|
</option>
|
|
</select>
|
|
<svg class="admin-select-input__chevron pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="m6 9 6 6 6-6" />
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
</template>
|