81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
/** 검색 입력 표시값 */
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** 검색 입력 placeholder */
|
|
placeholder: {
|
|
type: String,
|
|
default: '검색'
|
|
},
|
|
/** 스크린 리더용 입력 라벨 */
|
|
label: {
|
|
type: String,
|
|
default: '검색'
|
|
},
|
|
/** label 루트에 추가할 화면별 클래스 */
|
|
rootClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** input에 추가할 화면별 클래스 */
|
|
inputClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** input 너비 클래스 */
|
|
widthClass: {
|
|
type: String,
|
|
default: 'w-52'
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['input', 'compositionupdate', 'compositionend'])
|
|
const inputRef = ref(null)
|
|
|
|
/**
|
|
* 검색 입력에 포커스를 이동한다.
|
|
* @returns {void}
|
|
*/
|
|
const focus = () => {
|
|
inputRef.value?.focus()
|
|
}
|
|
|
|
/**
|
|
* 검색 입력 텍스트를 선택한다.
|
|
* @returns {void}
|
|
*/
|
|
const select = () => {
|
|
inputRef.value?.select()
|
|
}
|
|
|
|
defineExpose({
|
|
focus,
|
|
select
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<label class="admin-search-input relative block" :class="rootClass">
|
|
<span class="sr-only">{{ label }}</span>
|
|
<svg class="admin-search-input__icon pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[#8e9cac]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="m21 21-4.34-4.34" />
|
|
<circle cx="11" cy="11" r="8" />
|
|
</svg>
|
|
<input
|
|
ref="inputRef"
|
|
:value="props.value"
|
|
class="admin-search-input__field h-10 rounded border border-line bg-white pl-9 pr-3 text-sm text-[#394047] outline-none transition-colors placeholder:text-[#8e9cac] hover:border-[#c8ced3] focus:border-[#8e9cac]"
|
|
:class="[widthClass, inputClass]"
|
|
type="search"
|
|
:placeholder="placeholder"
|
|
:aria-label="label"
|
|
@input="emit('input', $event)"
|
|
@compositionupdate="emit('compositionupdate', $event)"
|
|
@compositionend="emit('compositionend', $event)"
|
|
>
|
|
</label>
|
|
</template>
|