/
SearchInput.vue
183 lines (179 loc) · 4.79 KB
/
SearchInput.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<template>
<form
action=""
role="search"
novalidate
:class="suit('form')"
@submit.prevent="onFormSubmit"
@reset.prevent="onFormReset"
>
<!-- :value/@input allows us to pass v-model to the component in v2 -->
<!-- :modelValue/@update:modelValue allows us to pass v-model to the component in v3 -->
<input
type="search"
autocorrect="off"
autocapitalize="off"
autocomplete="off"
spellcheck="false"
required
maxlength="512"
aria-label="Search"
:placeholder="placeholder"
:autofocus="autofocus"
:class="suit('input')"
:value="value || modelValue"
@focus="$emit('focus', $event)"
@blur="$emit('blur', $event)"
@input="
$emit('input', $event.target.value);
$emit('update:modelValue', $event.target.value);
"
ref="input"
/>
<button
type="submit"
:title="submitTitle"
:class="suit('submit')"
:hidden="showLoadingIndicator && shouldShowLoadingIndicator"
>
<slot name="submit-icon">
<svg
aria-hidden="true"
role="img"
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
viewBox="0 0 40 40"
:class="suit('submitIcon')"
>
<path
d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
fillRule="evenodd"
/>
</svg>
</slot>
</button>
<button
type="reset"
:title="resetTitle"
:class="suit('reset')"
:hidden="
(!value && !modelValue) ||
(showLoadingIndicator && shouldShowLoadingIndicator)
"
>
<slot name="reset-icon">
<svg
aria-hidden="true"
role="img"
xmlns="http://www.w3.org/2000/svg"
style="width: 1em; height: 1em"
viewBox="0 0 20 20"
:class="suit('resetIcon')"
>
<path
d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
fillRule="evenodd"
/>
</svg>
</slot>
</button>
<span
v-if="showLoadingIndicator"
:hidden="!shouldShowLoadingIndicator"
:class="suit('loadingIndicator')"
>
<slot name="loading-indicator">
<svg
role="img"
aria-label="Results are loading"
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg"
stroke="#444"
viewBox="0 0 38 38"
:class="suit('loadingIcon')"
>
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18" />
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"
/>
</path>
</g>
</g>
</svg>
</slot>
</span>
</form>
</template>
<script>
import { createSuitMixin } from '../mixins/suit';
export default {
name: 'SearchInput',
mixins: [createSuitMixin({ name: 'SearchBox' })],
props: {
placeholder: {
type: String,
default: 'Search here…',
},
autofocus: {
type: Boolean,
default: false,
},
showLoadingIndicator: {
type: Boolean,
default: false,
},
shouldShowLoadingIndicator: {
type: Boolean,
default: false,
},
submitTitle: {
type: String,
default: 'Search',
},
resetTitle: {
type: String,
default: 'Clear',
},
value: {
type: String,
required: false,
default: undefined,
},
modelValue: {
type: String,
required: false,
default: undefined,
},
},
emits: ['input', 'update:modelValue', 'blur', 'focus', 'reset'],
data() {
return {
query: '',
};
},
methods: {
isFocused() {
return document.activeElement === this.$refs.input;
},
onFormSubmit() {
const input = this.$refs.input;
input.blur();
},
onFormReset() {
this.$emit('input', '');
this.$emit('update:modelValue', '');
this.$emit('reset');
},
},
};
</script>