jobdone-shared-files 1.0.42 → 1.0.44

package/autocompleteSelect.vue

@@ -1,466 +1,468 @@
-<template>
-    <div class="autocomplete-select-component-trigger-content" ref="componentContentInput">
-        <!-- preview input -->
-        <button type="button" class='form-control autocomplete-select-component-display-selecting' :disabled="disabled"
-            :class="[triggerClass, previewInput]">{{
-                selectedPreviewText
-            }}</button>
-        <!-- search input -->
-        <input class='form-control autocomplete-select-component-keyword-filter-input' :class="[triggerClass, searchInput]"
-            type="text" ref="keywordFilterInput" v-model="keyword"
-            :placeholder="searchPlaceholder == '' ? selectedPreviewText : searchPlaceholder" maxlength="50"
-            @keydown.enter="keyboardSelectConfirm($event)" @keydown.up="keyboardSwitch($event, -1)"
-            @keydown.down="keyboardSwitch($event, 1)" @change="keyboardSwitchIndexReset()">
-        <Teleport :to="listPut">
-            <div class="autocomplete-select-component-selector-content" :class="{ 'active': active }"
-                ref="componentContentList" :style="positionStyle">
-                <ul class="autocomplete-select-component-opt-list" ref="opt_list">
-                    <li v-if="!listIsOnTop && clearBtn" class="border-bottom" :title="clearPlaceholder">
-                        <button class="autocomplete-select-component-opt-item is-clear" type="button"
-                            @click.stop="clearSelected()">
-                            {{ clearPlaceholder }}
-                        </button>
-                    </li>
-                    <li v-if="filterList?.length == 0">
-                        <div class="autocomplete-select-component-opt-item is-nothing">
-                            沒有符合條件的選項
-                        </div>
-                    </li>
-                    <template v-if="active">
-                        <li v-for="(opt, idx) in filterList" :key="idx" @click.stop="selectConfirm(opt)" :title="opt.name"
-                            :id="`autocomplete-select-component-opt-item_${idx}`">
-                            <button class="autocomplete-select-component-opt-item" type="button"
-                                :class="`${idx == keyboardSwitchIndex ? 'active' : ''} ${optClass}`">
-                                <template v-if="htmlOption">
-                                    <slot name="option" :optData="opt"></slot>
-                                </template>
-                                <template v-else>
-                                    {{ previewAdjust(opt) }}
-                                </template>
-                            </button>
-                        </li>
-                    </template>
-                    <li v-if="listIsOnTop && clearBtn" class="border-top" :title="clearPlaceholder">
-                        <button class="autocomplete-select-component-opt-item is-clear" type="button"
-                            @click.stop="clearSelected()">
-                            {{ clearPlaceholder }}
-                        </button>
-                    </li>
-                </ul>
-            </div>
-        </Teleport>
-    </div>
-</template>
-<script setup>
-// enum Data & Functions
-
-// vue & bootstrap
-import { ref, onMounted, onUnmounted, computed, toRaw } from 'vue'
-
-// plugins
-
-// vue components
-
-const props = defineProps({
-    selectedData: {
-        required: true
-    },
-    opts: {
-        type: Array,
-        default: []
-    },
-    optClass: {
-        type: String,
-        default: '',
-    },
-    placeholder: {
-        type: String,
-        default: '請選擇'
-    },
-    searchPlaceholder: {
-        type: String,
-        default: ''
-    },
-    triggerClass: {
-        type: String,
-        default: ''
-    },
-    listPut: {
-        type: String,
-        default: 'body'
-    },
-
-    clearBtn: {
-        type: Boolean,
-        default: true
-    },
-    clearPlaceholder: {
-        type: String,
-        default: '清除選擇'
-    },
-    resetValue: {
-        default: ''
-    },
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-
-
-    previewKey: {
-        type: String,
-        default: '',
-    },
-    bindingKey: {
-        type: String,
-        default: '',
-    },
-    filterKeys: {
-        type: Array,
-        default: ['name'],
-    },
-    isUndefinedHint: {
-        type: String,
-        default: '⚠️ 未找到符合原選擇的選項，可能相關資料曾發生異動',
-    },
-    htmlOption: {
-        type: Boolean,
-        default: false
-    },
-
-
-});
-
-const emit = defineEmits(['select'])
-
-// Just DOM
-const componentContentInput = ref(null)
-const componentContentList = ref(null)
-const keywordFilterInput = ref(null)
-
-
-// 是否開啟下拉選單
-const active = ref(false)
-const domPosition = ref({ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, x: 0, y: 0 })
-function activeSelector() {
-    if (props.disabled) {
-        return
-    }
-    active.value = true
-    keywordFilterInput.value.focus()
-    domPosition.value = componentContentInput.value.getBoundingClientRect()
-}
-const listIsOnTop = ref(false)
-const positionStyle = computed(() => {
-    let screenHeight = window.innerHeight;
-    let info = toRaw(domPosition.value)
-    listIsOnTop.value = info.top >= (screenHeight - info.bottom)
-    let str = ''
-    if (listIsOnTop.value) {
-        str = `bottom:${screenHeight - info.top}px;max-height:calc(${info.top}px - 10%);`
-    } else {
-        str = `top:${info.bottom}px;max-height:calc(${screenHeight - info.bottom}px - 10%);`
-    }
-    return `${str}left:${info.x}px;max-width:calc(90% - ${info.x}px);min-width:${Math.abs(info.x - info.right)}px;`
-})
-
-function leave() {
-    listIsOnTop.value = false
-    active.value = false
-    keyword.value = ''
-    // TODO SCROLL CLOSE
-    keyboardSwitchIndexReset()
-    keywordFilterInput.value.blur()
-}
-
-// 確認傳入選單列表內的選項Type，只檢查第一個，請內容統一，不要傳奇怪的東西進來
-const allowOptItemType = ['string', 'number', 'object']
-const optItemType = computed(() => {
-    if (!Array.isArray(props.opts) || props.opts?.length < 1) {
-        return ''
-    }
-    let sampling = props.opts[0]
-    let type = typeof sampling
-    if (!allowOptItemType.includes(type)) {
-        return ''
-    }
-    if ((sampling instanceof Date) && (sampling instanceof RegExp) && Array.isArray(sampling)) {
-        return ''
-    }
-    return type?.toLowerCase()
-
-})
-
-//
-// 篩選
-const keyword = ref("")
-const filterList = computed(() => {
-    if (optItemType.value === '') {
-        return []
-    }
-    if (keyword.value == '') {
-        return props.opts
-    }
-    let kwReplace = keyword.value.replace(/[.*+?^${}()|[\]\\]/g, "");
-    let regex = new RegExp(kwReplace, "i");
-    if (optItemType.value === 'object') {
-        let final = props.opts.filter(i => {
-            for (var idx = 0; idx < props.filterKeys.length; idx++) {
-                if (regex.test(i[props.filterKeys[idx].toString()])) {
-                    return i
-                };
-            }
-        })
-        return final
-    }
-    return props.opts.filter(i => {
-        if (regex.test(i)) {
-            return i
-        }
-    })
-})
-
-// 從選項列表中挖出整個選中的item，因選中的值(可能是某個key)
-const selectedItem = computed(() => {
-    if (!props.selectedData) {
-        return
-    }
-
-    // 如果選中的值是某個Key，需自行指定bindingKey
-    if (props.bindingKey !== '') {
-        return props.opts.find(i => i[props.bindingKey.toString()] == props.selectedData) ?? props.selectedData
-    }
-    return props.selectedData
-})
-
-
-// 整理 選項與選中值 的顯示文字
-function previewAdjust(itemObj) {
-    if (props.previewKey !== '') {
-        let strAry = props.previewKey.split('+')
-        let isUndefined = false
-
-        let finalStr = strAry.reduce((acc, cur) => {
-            let v = cur.trim()
-            if (v.match(/'[^']+'/g)) {
-                return acc + v.substring(1, v.length - 1)
-            } else {
-                if (itemObj[v] === undefined) {
-                    isUndefined = true
-                }
-                return acc + itemObj[v]
-            }
-        }, '')
-        if (isUndefined) {
-            return props.isUndefinedHint
-        }
-        return finalStr ? finalStr : props.placeholder
-    }
-    return itemObj
-}
-
-
-// 選中的值的顯示
-const selectedPreviewText = computed(() => {
-
-
-    if (!selectedItem.value || Object.keys(selectedItem.value).length === 0) {
-        return props.placeholder
-    }
-    return previewAdjust(selectedItem.value)
-})
-
-// 清除選擇內容
-function clearSelected() {
-    emit('select', props.resetValue)
-    leave()
-}
-
-// 選擇送出
-function selectConfirm(v) {
-    if (!v) {
-        return
-    }
-    emit('select', JSON.parse(JSON.stringify(v)))
-    leave()
-    keyboardSwitchIndexReset()
-}
-
-// 鍵盤送出
-function keyboardSelectConfirm(event) {
-    if (event.isComposing) {
-        return
-    }
-    if (filterList.value?.length) {
-        selectConfirm(filterList.value[keyboardSwitchIndex.value])
-    }
-}
-
-// 鍵盤挑選
-const keyboardSwitchIndex = ref(0)
-function keyboardSwitch(event, v) {
-    if (event.isComposing) {
-        return
-    }
-    if (filterList.value?.length < 1) {
-        keyboardSwitchIndexReset()
-        return
-    }
-    let idx = Number(keyboardSwitchIndex.value) + v
-
-    if (idx < 0) {
-        keyboardSwitchIndex.value = filterList.value.length - 1
-        document.getElementById(`autocomplete-select-component-opt-item_${keyboardSwitchIndex.value}`)?.scrollIntoView()
-        return
-    }
-    if (idx > filterList.value.length - 1) {
-        keyboardSwitchIndexReset()
-        document.getElementById(`autocomplete-select-component-opt-item_${keyboardSwitchIndex.value}`)?.scrollIntoView()
-        return
-    }
-    keyboardSwitchIndex.value = idx
-    document.getElementById(`autocomplete-select-component-opt-item_${keyboardSwitchIndex.value}`)?.scrollIntoView()
-}
-
-function keyboardSwitchIndexReset() {
-    keyboardSwitchIndex.value = 0
-}
-
-// 樣式
-const previewInput = computed(() => {
-    if (selectedPreviewText.value == props.placeholder) {
-        return 'autocomplete-select-component-value-null'
-    }
-    return ''
-})
-const searchInput = computed(() => {
-    if (active.value) {
-        return 'active'
-    }
-    return ''
-})
-function initTrigger(event) {
-    if (componentContentInput.value.contains(event.target) || componentContentList.value.contains(event.target)) {
-        activeSelector()
-    } else {
-        leave()
-    }
-}
-onMounted(() => {
-    window.addEventListener("click", initTrigger);
-})
-
-onUnmounted(() => {
-    window.removeEventListener("click", initTrigger);
-})
-
-</script>
-<style lang="scss" scoped>
-* {
-    word-break: break-word;
-    overflow-wrap: break-word;
-}
-
-.autocomplete-select-component-trigger-content {
-    position: relative;
-    width: 100%;
-
-    .form-control {
-        background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%232D4155%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
-        background-repeat: no-repeat;
-        background-position: right 0.75rem center;
-        background-size: 16px 12px;
-        text-align: start;
-        width: 100%;
-    }
-
-    .autocomplete-select-component-value-null {
-        color: var(--bs-secondary-color);
-    }
-
-    .autocomplete-select-component-display-selecting {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 1;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .autocomplete-select-component-keyword-filter-input {
-        opacity: 0;
-        position: relative;
-
-        &.active {
-            opacity: 1;
-            z-index: 2;
-        }
-    }
-}
-
-.autocomplete-select-component-selector-content {
-    visibility: hidden;
-    display: none;
-    position: fixed;
-    z-index: 2000;
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-    max-height: 76vh;
-    overflow: auto;
-
-    ul.autocomplete-select-component-opt-list {
-        background: #fff;
-        list-style: none;
-        border: 1px solid var(--gray-400);
-        border-radius: var(--bs-border-radius);
-        margin: 0;
-        padding: 0;
-        overflow: auto;
-        padding: .25rem 0;
-
-        >li {
-            width: 100%;
-            overflow: auto;
-        }
-
-        .autocomplete-select-component-opt-item {
-            background-color: transparent;
-            border: none;
-            padding: .25rem .5rem;
-            word-break: break-word;
-            width: 100%;
-            overflow: hidden;
-            text-align: start;
-            text-overflow: ellipsis;
-            color: var(--gray-600);
-
-            &.is-nothing {
-                color: var(--bs-danger);
-            }
-
-            &.is-clear {
-                color: var(--gray-500);
-            }
-
-            &:hover,
-            &.is-clear:hover {
-                background: rgba(var(--bs-primary-rgb), 1) !important;
-                color: #fff !important;
-            }
-
-            &.active {
-                background: rgba(var(--bs-primary-rgb), .1);
-                color: var(--bs-primary);
-            }
-        }
-    }
-
-    &.active {
-        display: block;
-        box-shadow: var(--bs-box-shadow);
-        visibility: visible;
-        z-index: 2000;
-    }
-}
+<template>
+    <div class="autocomplete-select-component-trigger-content" ref="componentContentInput">
+        <!-- preview input -->
+        <button type="button" class='form-control autocomplete-select-component-display-selecting' :disabled="disabled"
+            :class="[triggerClass, previewInput]">{{
+                selectedPreviewText
+            }}</button>
+        <!-- search input -->
+        <input class='form-control autocomplete-select-component-keyword-filter-input' :class="[triggerClass, searchInput]"
+            type="text" ref="keywordFilterInput" v-model="keyword"
+            :placeholder="searchPlaceholder == '' ? selectedPreviewText : searchPlaceholder" maxlength="50"
+            @keydown.enter="keyboardSelectConfirm($event)" @keydown.up="keyboardSwitch($event, -1)"
+            @keydown.down="keyboardSwitch($event, 1)" @change="keyboardSwitchIndexReset()">
+        <Teleport :to="listPut">
+            <div class="autocomplete-select-component-selector-content" :class="{ 'active': active }"
+                ref="componentContentList" :style="positionStyle">
+                <ul class="autocomplete-select-component-opt-list" ref="opt_list">
+                    <li v-if="!listIsOnTop && clearBtn" class="border-bottom" :title="clearPlaceholder">
+                        <button class="autocomplete-select-component-opt-item is-clear" type="button"
+                            @click.stop="clearSelected()">
+                            {{ clearPlaceholder }}
+                        </button>
+                    </li>
+                    <li v-if="filterList?.length == 0">
+                        <div class="autocomplete-select-component-opt-item is-nothing">
+                            沒有符合條件的選項
+                        </div>
+                    </li>
+                    <template v-if="active">
+                        <li v-for="(opt, idx) in filterList" :key="idx" @click.stop="selectConfirm(opt)" :title="opt.name"
+                            :id="`autocomplete-select-component-opt-item_${idx}`">
+                            <button class="autocomplete-select-component-opt-item" type="button"
+                                :class="`${idx == keyboardSwitchIndex ? 'active' : ''} ${optClass}`">
+                                <template v-if="htmlOption">
+                                    <slot name="option" :optData="opt"></slot>
+                                </template>
+                                <template v-else>
+                                    {{ previewAdjust(opt) }}
+                                </template>
+                            </button>
+                        </li>
+                    </template>
+                    <li v-if="listIsOnTop && clearBtn" class="border-top" :title="clearPlaceholder">
+                        <button class="autocomplete-select-component-opt-item is-clear" type="button"
+                            @click.stop="clearSelected()">
+                            {{ clearPlaceholder }}
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </Teleport>
+    </div>
+</template>
+<script setup>
+// enum Data & Functions
+
+// vue & bootstrap
+import { ref, onMounted, onUnmounted, computed, toRaw } from 'vue'
+
+// plugins
+
+// vue components
+
+const props = defineProps({
+    selectedData: {
+        required: true
+    },
+    opts: {
+        type: Array,
+        default: []
+    },
+    optClass: {
+        type: String,
+        default: '',
+    },
+    placeholder: {
+        type: String,
+        default: '請選擇'
+    },
+    searchPlaceholder: {
+        type: String,
+        default: ''
+    },
+    triggerClass: {
+        type: String,
+        default: ''
+    },
+    listPut: {
+        type: String,
+        default: 'body'
+    },
+
+    clearBtn: {
+        type: Boolean,
+        default: true
+    },
+    clearPlaceholder: {
+        type: String,
+        default: '清除選擇'
+    },
+    resetValue: {
+        default: ''
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+
+
+    previewKey: {
+        type: String,
+        default: '',
+    },
+    bindingKey: {
+        type: String,
+        default: '',
+    },
+    filterKeys: {
+        type: Array,
+        default: ['name'],
+    },
+    isUndefinedHint: {
+        type: String,
+        default: '⚠️ 未找到符合原選擇的選項，可能相關資料曾發生異動',
+    },
+    htmlOption: {
+        type: Boolean,
+        default: false
+    },
+
+
+});
+
+const emit = defineEmits(['select'])
+
+// Just DOM
+const componentContentInput = ref(null)
+const componentContentList = ref(null)
+const keywordFilterInput = ref(null)
+
+
+// 是否開啟下拉選單
+const active = ref(false)
+const domPosition = ref({ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, x: 0, y: 0 })
+function activeSelector() {
+    if (props.disabled) {
+        return
+    }
+    active.value = true
+    keywordFilterInput.value.focus()
+    domPosition.value = componentContentInput.value.getBoundingClientRect()
+}
+const listIsOnTop = ref(false)
+const positionStyle = computed(() => {
+    let screenHeight = window.innerHeight;
+    let info = toRaw(domPosition.value)
+    listIsOnTop.value = info.top >= (screenHeight - info.bottom)
+    let str = ''
+    if (listIsOnTop.value) {
+        str = `bottom:${screenHeight - info.top}px;max-height:calc(${info.top}px - 10%);`
+    } else {
+        str = `top:${info.bottom}px;max-height:calc(${screenHeight - info.bottom}px - 10%);`
+    }
+    return `${str}left:${info.x}px;max-width:calc(90% - ${info.x}px);min-width:${Math.abs(info.x - info.right)}px;`
+})
+
+function leave() {
+    listIsOnTop.value = false
+    active.value = false
+    keyword.value = ''
+    // TODO SCROLL CLOSE
+    keyboardSwitchIndexReset()
+    keywordFilterInput.value.blur()
+}
+
+// 確認傳入選單列表內的選項Type，只檢查第一個，請內容統一，不要傳奇怪的東西進來
+const allowOptItemType = ['string', 'number', 'object']
+const optItemType = computed(() => {
+    if (!Array.isArray(props.opts) || props.opts?.length < 1) {
+        return ''
+    }
+    let sampling = props.opts[0]
+    let type = typeof sampling
+    if (!allowOptItemType.includes(type)) {
+        return ''
+    }
+    if ((sampling instanceof Date) && (sampling instanceof RegExp) && Array.isArray(sampling)) {
+        return ''
+    }
+    return type?.toLowerCase()
+
+})
+
+//
+// 篩選
+const keyword = ref("")
+const filterList = computed(() => {
+    if (optItemType.value === '') {
+        return []
+    }
+    if (keyword.value == '') {
+        return props.opts
+    }
+    let kwReplace = keyword.value.replace(/[.*+?^${}()|[\]\\]/g, "");
+    let regex = new RegExp(kwReplace, "i");
+    if (optItemType.value === 'object') {
+        let final = props.opts.filter(i => {
+            for (var idx = 0; idx < props.filterKeys.length; idx++) {
+                if (regex.test(i[props.filterKeys[idx].toString()])) {
+                    return i
+                };
+            }
+        })
+        return final
+    }
+    return props.opts.filter(i => {
+        if (regex.test(i)) {
+            return i
+        }
+    })
+})
+
+// 從選項列表中挖出整個選中的item，因選中的值(可能是某個key)
+const selectedItem = computed(() => {
+    if (!props.selectedData) {
+        return
+    }
+
+    // 如果選中的值是某個Key，需自行指定bindingKey
+    if (props.bindingKey !== '') {
+        return props.opts.find(i => i[props.bindingKey.toString()] == props.selectedData) ?? props.selectedData
+    }
+    return props.selectedData
+})
+
+
+// 整理 選項與選中值 的顯示文字
+function previewAdjust(itemObj) {
+    if (props.previewKey !== '') {
+        let strAry = props.previewKey.split('+')
+        let isUndefined = false
+
+        let finalStr = strAry.reduce((acc, cur) => {
+            let v = cur.trim()
+            if (v.match(/'[^']+'/g)) {
+                return acc + v.substring(1, v.length - 1)
+            } else {
+                if (itemObj[v] === undefined) {
+                    isUndefined = true
+                }
+                return acc + itemObj[v]
+            }
+        }, '')
+        if (isUndefined) {
+            return props.isUndefinedHint
+        }
+        return finalStr ? finalStr : props.placeholder
+    }
+    return itemObj
+}
+
+
+// 選中的值的顯示
+const selectedPreviewText = computed(() => {
+
+
+    if (!selectedItem.value || Object.keys(selectedItem.value).length === 0) {
+        return props.placeholder
+    }
+    return previewAdjust(selectedItem.value)
+})
+
+// 清除選擇內容
+function clearSelected() {
+    emit('select', props.resetValue)
+    leave()
+}
+
+// 選擇送出
+function selectConfirm(v) {
+    if (!v) {
+        return
+    }
+    emit('select', JSON.parse(JSON.stringify(v)))
+    leave()
+    keyboardSwitchIndexReset()
+}
+
+// 鍵盤送出
+function keyboardSelectConfirm(event) {
+    if (event.isComposing) {
+        return
+    }
+    if (filterList.value?.length) {
+        selectConfirm(filterList.value[keyboardSwitchIndex.value])
+    }
+}
+
+// 鍵盤挑選
+const keyboardSwitchIndex = ref(0)
+function keyboardSwitch(event, v) {
+    if (event.isComposing) {
+        return
+    }
+    if (filterList.value?.length < 1) {
+        keyboardSwitchIndexReset()
+        return
+    }
+    let idx = Number(keyboardSwitchIndex.value) + v
+
+    if (idx < 0) {
+        keyboardSwitchIndex.value = filterList.value.length - 1
+        document.getElementById(`autocomplete-select-component-opt-item_${keyboardSwitchIndex.value}`)?.scrollIntoView()
+        return
+    }
+    if (idx > filterList.value.length - 1) {
+        keyboardSwitchIndexReset()
+        document.getElementById(`autocomplete-select-component-opt-item_${keyboardSwitchIndex.value}`)?.scrollIntoView()
+        return
+    }
+    keyboardSwitchIndex.value = idx
+    document.getElementById(`autocomplete-select-component-opt-item_${keyboardSwitchIndex.value}`)?.scrollIntoView()
+}
+
+function keyboardSwitchIndexReset() {
+    keyboardSwitchIndex.value = 0
+}
+
+// 樣式
+const previewInput = computed(() => {
+    if (selectedPreviewText.value == props.placeholder) {
+        return 'autocomplete-select-component-value-null'
+    }
+    return ''
+})
+const searchInput = computed(() => {
+    if (active.value) {
+        return 'active'
+    }
+    return ''
+})
+function initTrigger(event) {
+    if (componentContentInput.value.contains(event.target) || componentContentList.value.contains(event.target)) {
+        activeSelector()
+    } else {
+        leave()
+    }
+}
+onMounted(() => {
+    window.addEventListener("click", initTrigger);
+})
+
+onUnmounted(() => {
+    window.removeEventListener("click", initTrigger);
+})
+
+</script>
+<style lang="scss" scoped>
+* {
+    word-break: break-word;
+    overflow-wrap: break-word;
+}
+
+.autocomplete-select-component-trigger-content {
+    position: relative;
+    width: 100%;
+
+    .form-control {
+        background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%232D4155%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
+        background-repeat: no-repeat;
+        background-position: right 0.75rem center;
+        background-size: 16px 12px;
+        text-align: start;
+        width: 100%;
+    }
+
+    .autocomplete-select-component-value-null {
+        color: var(--bs-secondary-color);
+    }
+
+    .autocomplete-select-component-display-selecting {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-right: 2rem;
+    }
+
+    .autocomplete-select-component-keyword-filter-input {
+        opacity: 0;
+        position: relative;
+        padding-right: 2rem;
+
+        &.active {
+            opacity: 1;
+            z-index: 2;
+        }
+    }
+}
+
+.autocomplete-select-component-selector-content {
+    visibility: hidden;
+    display: none;
+    position: fixed;
+    z-index: 2000;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+    max-height: 76vh;
+    overflow: auto;
+
+    ul.autocomplete-select-component-opt-list {
+        background: #fff;
+        list-style: none;
+        border: 1px solid var(--gray-400);
+        border-radius: var(--bs-border-radius);
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+        padding: .25rem 0;
+
+        >li {
+            width: 100%;
+            overflow: auto;
+        }
+
+        .autocomplete-select-component-opt-item {
+            background-color: transparent;
+            border: none;
+            padding: .25rem .5rem;
+            word-break: break-word;
+            width: 100%;
+            overflow: hidden;
+            text-align: start;
+            text-overflow: ellipsis;
+            color: var(--gray-600);
+
+            &.is-nothing {
+                color: var(--bs-danger);
+            }
+
+            &.is-clear {
+                color: var(--gray-500);
+            }
+
+            &:hover,
+            &.is-clear:hover {
+                background: rgba(var(--bs-primary-rgb), 1) !important;
+                color: #fff !important;
+            }
+
+            &.active {
+                background: rgba(var(--bs-primary-rgb), .1);
+                color: var(--bs-primary);
+            }
+        }
+    }
+
+    &.active {
+        display: block;
+        box-shadow: var(--bs-box-shadow);
+        visibility: visible;
+        z-index: 2000;
+    }
+}
 </style>