@inkline/inkline/src/components/ISelect/template.html

Inkline is the Vue.js UI/UX Library built for creating your next design system

<div
    class="select-wrapper"
    :class="wrapperClasses"
    :id="name"
    :name="name"
    ref="wrapper"
    role="combobox"
    aria-haspopup="listbox"
    :aria-owns="`${name}-options`"
    :aria-expanded="visible ? 'true' : 'false'"
    v-click-outside="onClickOutside"
    @keyup.esc="onEscape"
>
    <i-input
        v-model="inputValue"
        ref="trigger"
        autocomplete="off"
        aria-autocomplete="both"
        :aria-controls="`${name}-options`"
        :disabled="isDisabled"
        :readonly="isReadonly"
        :tabindex="tabIndex"
        :plaintext="!autocomplete"
        :placeholder="inputPlaceholder"
        :clearable="isClearable"
        :color="color"
        :size="size"
        :name="`${name}-input`"
        @click="onClick"
        @focus="onFocus"
        @blur="onBlur"
        @clear="onClear"
        @keydown="onTriggerKeyDown"
    >
        <template v-if="$slots.prepend" #prepend>
            <slot name="prepend" />
        </template>
        <template v-if="$slots.prefix" #prefix>
            <slot name="prefix" />
        </template>
        <template #suffix>
            <slot name="suffix" />
            <button class="select-caret" aria-hidden="true" @click="onCaretClick" />
        </template>
        <template v-if="$slots.append" #append>
            <slot name="append" />
        </template>
    </i-input>

    <transition
        name="zoom-in-top-transition"
        @after-leave="destroyPopper"
    >
        <div
            class="select"
            :class="popupClasses"
            :id="`${name}-options`"
            role="listbox"
            ref="popup"
            :aria-hidden="visible ? 'false' : 'true'"
            v-show="visible"
        >
            <span data-popper-arrow v-if="arrow" />
            <div class="select-header" v-if="$slots.header">
                <slot name="header" />
            </div>
            <div class="select-body" ref="body" @scroll="onScroll">
                <div class="select-no-results" v-if="!$slots.default && options.length === 0">
                    <slot name="no-results">
                        There are no results for your query.
                    </slot>
                </div>
                <div class="select-options" ref="options">
                    <slot />
                    <i-select-option
                        v-for="option in options"
                        :key="option[idField]"
                        :active="value && value[idField] === option[idField]"
                        :disabled="option.disabled"
                        :value="option"
                        @keydown="onItemKeyDown"
                    >
                        <slot name="option" :option="option">
                            <i-mark
                                v-if="autocomplete && inputValue !== computeLabel(option)"
                                :text="computeLabel(option)"
                                :query="inputValue"
                            />
                            <template v-else>
                                {{ computeLabel(option) }}
                            </template>
                        </slot>
                    </i-select-option>
                </div>
            </div>
            <div class="select-footer" v-if="$slots.footer">
                <slot name="footer" />
            </div>
        </div>
    </transition>
</div>