1 | <div
|
2 | class="select-wrapper"
|
3 | :class="wrapperClasses"
|
4 | :id="name"
|
5 | :name="name"
|
6 | ref="wrapper"
|
7 | role="combobox"
|
8 | aria-haspopup="listbox"
|
9 | :aria-owns="`${name}-options`"
|
10 | :aria-expanded="visible ? 'true' : 'false'"
|
11 | v-click-outside="onClickOutside"
|
12 | @keyup.esc="onEscape"
|
13 | >
|
14 | <i-input
|
15 | v-model="inputValue"
|
16 | ref="trigger"
|
17 | autocomplete="off"
|
18 | aria-autocomplete="both"
|
19 | :aria-controls="`${name}-options`"
|
20 | :disabled="isDisabled"
|
21 | :readonly="isReadonly"
|
22 | :tabindex="tabIndex"
|
23 | :plaintext="!autocomplete"
|
24 | :placeholder="inputPlaceholder"
|
25 | :clearable="isClearable"
|
26 | :color="color"
|
27 | :size="size"
|
28 | :name="`${name}-input`"
|
29 | @click="onClick"
|
30 | @focus="onFocus"
|
31 | @blur="onBlur"
|
32 | @clear="onClear"
|
33 | @keydown="onTriggerKeyDown"
|
34 | >
|
35 | <template v-if="$slots.prepend" #prepend>
|
36 | <slot name="prepend" />
|
37 | </template>
|
38 | <template v-if="$slots.prefix" #prefix>
|
39 | <slot name="prefix" />
|
40 | </template>
|
41 | <template #suffix>
|
42 | <slot name="suffix" />
|
43 | <button class="select-caret" aria-hidden="true" @click="onCaretClick" />
|
44 | </template>
|
45 | <template v-if="$slots.append" #append>
|
46 | <slot name="append" />
|
47 | </template>
|
48 | </i-input>
|
49 |
|
50 | <transition
|
51 | name="zoom-in-top-transition"
|
52 | @after-leave="destroyPopper"
|
53 | >
|
54 | <div
|
55 | class="select"
|
56 | :class="popupClasses"
|
57 | :id="`${name}-options`"
|
58 | role="listbox"
|
59 | ref="popup"
|
60 | :aria-hidden="visible ? 'false' : 'true'"
|
61 | v-show="visible"
|
62 | >
|
63 | <span data-popper-arrow v-if="arrow" />
|
64 | <div class="select-header" v-if="$slots.header">
|
65 | <slot name="header" />
|
66 | </div>
|
67 | <div class="select-body" ref="body" @scroll="onScroll">
|
68 | <div class="select-no-results" v-if="!$slots.default && options.length === 0">
|
69 | <slot name="no-results">
|
70 | There are no results for your query.
|
71 | </slot>
|
72 | </div>
|
73 | <div class="select-options" ref="options">
|
74 | <slot />
|
75 | <i-select-option
|
76 | v-for="option in options"
|
77 | :key="option[idField]"
|
78 | :active="value && value[idField] === option[idField]"
|
79 | :disabled="option.disabled"
|
80 | :value="option"
|
81 | @keydown="onItemKeyDown"
|
82 | >
|
83 | <slot name="option" :option="option">
|
84 | <i-mark
|
85 | v-if="autocomplete && inputValue !== computeLabel(option)"
|
86 | :text="computeLabel(option)"
|
87 | :query="inputValue"
|
88 | />
|
89 | <template v-else>
|
90 | {{ computeLabel(option) }}
|
91 | </template>
|
92 | </slot>
|
93 | </i-select-option>
|
94 | </div>
|
95 | </div>
|
96 | <div class="select-footer" v-if="$slots.footer">
|
97 | <slot name="footer" />
|
98 | </div>
|
99 | </div>
|
100 | </transition>
|
101 | </div>
|