@appbaseio/reactivesearch-vue 1.16.0-alpha.28 → 1.16.0-alpha.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,33 @@
1
- import { a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
1
+ import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ecf6c03c.js';
2
+ import styled, { css } from '@appbaseio/vue-emotion';
2
3
  import computeScrollIntoView from 'compute-scroll-into-view';
3
4
 
5
+ var _templateObject;
6
+ var InputWrapper = styled('span')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n flex: 1;\n position: relative;\n"])));
7
+
8
+ var _templateObject$1, _templateObject2, _templateObject3, _templateObject4;
9
+ var IconGroup = styled('div')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgrid-gap: 6px;\n\tmargin: 0 10px;\n\theight: 100%;\n\n\t", ";\n\n\t", ";\n"])), function (_ref) {
10
+ var positionType = _ref.positionType;
11
+
12
+ if (positionType === 'absolute') {
13
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\ttransform: translateY(-50%);\n\t\t\t"])));
14
+ }
15
+
16
+ return null;
17
+ }, function (_ref2) {
18
+ var groupPosition = _ref2.groupPosition;
19
+ return groupPosition === 'right' ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\t\t\t\t\tright: 0;\n\t\t\t "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\t\t\t\t\tleft: 0;\n\t\t\t "])));
20
+ });
21
+
22
+ var _templateObject$2;
23
+ var IconWrapper = styled('div')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmax-width: 23px;\n\twidth: max-content;\n\tcursor: pointer;\n\theight: 100%;min-width:20px;\n\n\tsvg.search-icon {\n\t\tfill: ", ";\n\t\ttransform:scale(1.5);\n\t}\n\n\tsvg.cancel-icon {\n\t\tfill: ", ";\n\t}\n"])), function (_ref) {
24
+ var theme = _ref.theme;
25
+ return theme.colors.primaryColor;
26
+ }, function (_ref2) {
27
+ var theme = _ref2.theme;
28
+ return theme.colors.borderColor || '#000';
29
+ });
30
+
4
31
  /**
5
32
  * Scroll node into view if necessary
6
33
  * @param {HTMLElement} node the element that should scroll into view
@@ -398,4 +425,29 @@ var Downshift = {
398
425
  }
399
426
  };
400
427
 
401
- export { Downshift as D };
428
+ var CancelSvg = {
429
+ functional: true,
430
+ render: function render(h) {
431
+ return h("svg", {
432
+ "attrs": {
433
+ "alt": "Clear",
434
+ "xmlns": "http://www.w3.org/2000/svg",
435
+ "height": "20px",
436
+ "viewBox": "0 0 24 24",
437
+ "width": "20px"
438
+ },
439
+ "class": "cancel-icon"
440
+ }, [h("title", ["Clear"]), h("path", {
441
+ "attrs": {
442
+ "d": "M0 0h24v24H0V0z",
443
+ "fill": "none"
444
+ }
445
+ }), h("path", {
446
+ "attrs": {
447
+ "d": "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
448
+ }
449
+ })]);
450
+ }
451
+ };
452
+
453
+ export { CancelSvg as C, Downshift as D, IconWrapper as I, IconGroup as a, InputWrapper as b };
@@ -14,9 +14,9 @@ import { C as ComponentWrapper } from './ComponentWrapper-459505fd.js';
14
14
  import { T as Title } from './Title-579f8d6c.js';
15
15
  import { F as Flex } from './Flex-aac91505.js';
16
16
  import hotkeys from 'hotkeys-js';
17
+ import { I as IconWrapper, C as CancelSvg, a as IconGroup, D as Downshift, b as InputWrapper } from './CancelSvg-282ae799.js';
17
18
  import { n as noSuggestions, s as suggestionsContainer, I as Input, a as suggestions } from './Input-d8519224.js';
18
19
  import 'compute-scroll-into-view';
19
- import { D as Downshift } from './DownShift-e7ccf2a7.js';
20
20
  import { C as Container } from './Container-4383c6f0.js';
21
21
  import Highlight from 'vue-highlight-words';
22
22
 
@@ -27,37 +27,11 @@ InputGroup.defaultProps = {
27
27
  };
28
28
 
29
29
  var _templateObject$1;
30
- var InputWrapper = styled('span')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n flex: 1;\n position: relative;\n"])));
31
-
32
- var _templateObject$2;
33
- var InputAddon = styled('span')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #fafafa;\n border: 1px solid #ccc;\n border-radius: 2px;\n color: rgba(0, 0, 0, 0.85);\n font-size: 14px;\n font-weight: 400;\n padding: 0 11px;\n position: relative;\n transition: all 0.3s;\n box-sizing: border-box;\n overflow: hidden;\n\n &:first-of-type {\n border-right: none;\n }\n &:last-of-type {\n border-left: none;\n }\n"])));
30
+ var InputAddon = styled('span')(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #fafafa;\n border: 1px solid #ccc;\n border-radius: 2px;\n color: rgba(0, 0, 0, 0.85);\n font-size: 14px;\n font-weight: 400;\n padding: 0 11px;\n position: relative;\n transition: all 0.3s;\n box-sizing: border-box;\n overflow: hidden;\n\n &:first-of-type {\n border-right: none;\n }\n &:last-of-type {\n border-left: none;\n }\n"])));
34
31
  InputAddon.defaultProps = {
35
32
  className: 'input-addon'
36
33
  };
37
34
 
38
- var _templateObject$3, _templateObject2, _templateObject3, _templateObject4;
39
- var IconGroup = styled('div')(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgrid-gap: 6px;\n\tmargin: 0 10px;\n\theight: 100%;\n\n\t", ";\n\n\t", ";\n"])), function (_ref) {
40
- var positionType = _ref.positionType;
41
-
42
- if (positionType === 'absolute') {
43
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\ttransform: translateY(-50%);\n\t\t\t"])));
44
- }
45
-
46
- return null;
47
- }, function (_ref2) {
48
- var groupPosition = _ref2.groupPosition;
49
- return groupPosition === 'right' ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\t\t\t\t\tright: 0;\n\t\t\t "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\t\t\t\t\tleft: 0;\n\t\t\t "])));
50
- });
51
-
52
- var _templateObject$4;
53
- var IconWrapper = styled('div')(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmax-width: 23px;\n\twidth: max-content;\n\tcursor: pointer;\n\theight: 100%;min-width:20px;\n\n\tsvg.search-icon {\n\t\tfill: ", ";\n\t\ttransform:scale(1.5);\n\t}\n\n\tsvg.cancel-icon {\n\t\tfill: ", ";\n\t}\n"])), function (_ref) {
54
- var theme = _ref.theme;
55
- return theme.colors.primaryColor;
56
- }, function (_ref2) {
57
- var theme = _ref2.theme;
58
- return theme.colors.borderColor || '#000';
59
- });
60
-
61
35
  var getClassName = helper.getClassName;
62
36
  var SuggestionWrapper = {
63
37
  name: 'SuggestionWrapper',
@@ -78,14 +52,14 @@ var SuggestionWrapper = {
78
52
  }
79
53
  };
80
54
 
81
- var _templateObject$5;
55
+ var _templateObject$2;
82
56
  var highlightStyle = {
83
57
  fontWeight: 600,
84
58
  padding: 0,
85
59
  backgroundColor: 'transparent',
86
60
  color: 'inherit'
87
61
  };
88
- var PredictiveSuggestion = styled('span')(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n\t.highlight {\n\t\tbackground: transparent;\n\t\tcolor: inherit;\n\t\tfont-weight: 600;\n\t\tpadding: 0;\n\t}\n"])));
62
+ var PredictiveSuggestion = styled('span')(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n\t.highlight {\n\t\tbackground: transparent;\n\t\tcolor: inherit;\n\t\tfont-weight: 600;\n\t\tpadding: 0;\n\t}\n"])));
89
63
  var SuggestionItem = {
90
64
  name: 'SuggestionItem',
91
65
  props: {
@@ -200,34 +174,9 @@ var SearchSvg = {
200
174
  }
201
175
  };
202
176
 
203
- var CancelSvg = {
204
- functional: true,
205
- render: function render(h) {
206
- return h("svg", {
207
- "attrs": {
208
- "alt": "Clear",
209
- "xmlns": "http://www.w3.org/2000/svg",
210
- "height": "20px",
211
- "viewBox": "0 0 24 24",
212
- "width": "20px"
213
- },
214
- "class": "cancel-icon"
215
- }, [h("title", ["Clear"]), h("path", {
216
- "attrs": {
217
- "d": "M0 0h24v24H0V0z",
218
- "fill": "none"
219
- }
220
- }), h("path", {
221
- "attrs": {
222
- "d": "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
223
- }
224
- })]);
225
- }
226
- };
177
+ var _templateObject$3;
227
178
 
228
- var _templateObject$6;
229
-
230
- injectGlobal(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n\t#el_TvxDfTAtKp {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_D93PK3GbmJ {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t\tfill: #d8d8d8;\n\t}\n"])));
179
+ injectGlobal(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n\t#el_TvxDfTAtKp {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_D93PK3GbmJ {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t\tfill: #d8d8d8;\n\t}\n"])));
231
180
  var MicSvg = {
232
181
  name: 'MicSvg',
233
182
  props: ['className'],
@@ -272,9 +221,9 @@ var MicSvg = {
272
221
  }
273
222
  };
274
223
 
275
- var _templateObject$7;
224
+ var _templateObject$4;
276
225
 
277
- injectGlobal(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n\t#el_X81iT9kZYo {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_gMpyalCphp {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t}\n\t#el_c7H-3u-D4l {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_qhFcdAAFwo {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_M8X8g37WOI {\n\t\tstroke: #e83137;\n\t\tstroke-width: 21;\n\t}\n"])));
226
+ injectGlobal(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n\t#el_X81iT9kZYo {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_gMpyalCphp {\n\t\t-webkit-transform: translate(163px, 131px);\n\t\ttransform: translate(163px, 131px);\n\t}\n\t#el_c7H-3u-D4l {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_qhFcdAAFwo {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_M8X8g37WOI {\n\t\tstroke: #e83137;\n\t\tstroke-width: 21;\n\t}\n"])));
278
227
  var MuteSvg = {
279
228
  name: 'MuteSvg',
280
229
  props: ['className'],
@@ -330,9 +279,9 @@ var MuteSvg = {
330
279
  }
331
280
  };
332
281
 
333
- var _templateObject$8;
282
+ var _templateObject$5;
334
283
 
335
- injectGlobal(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n\t@-webkit-keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t#el_hiibMG0x- * {\n\t\t-webkit-animation-duration: 1.2s;\n\t\tanimation-duration: 1.2s;\n\t\t-webkit-animation-iteration-count: infinite;\n\t\tanimation-iteration-count: infinite;\n\t\t-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t}\n\t#el_QJeJ_2CDw5 {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_UYYCfubTRf {\n\t\t-webkit-transform: translate(163px, 123px);\n\t\ttransform: translate(163px, 123px);\n\t}\n\t#el_uzZNtK32Zi {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_EYKQ2N9Kgy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6SDP2LAgKC {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t}\n\t#el_-Vm65Ltfy7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_q04iZcSim4 {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6WKby7wXqV {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\tanimation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_9bggsfQOtU {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_NKxqi9eIym {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_Wi-my975tM {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\tanimation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_zclQ34fvf7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_1OsvRT8HkeZ {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DkfFFTaFxy8 {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\tanimation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_aa9sjx4H0vA {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_tea114vWg0J {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_34IgwiMB5rf {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\tanimation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_z5u6RAFhx7d {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_7nfuWmA5Uhy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DeebuCsPTGA {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\tanimation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el__ZcqlS20zcw {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_8DnEQnD7VWV {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_ZOjjrPTvyrv {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\tanimation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_FYYKCI_u24e {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_XZty4MnTp5Y {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_2FATegVmf0K {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\tanimation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_RMT1KUfbdF8 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_RgLcovvFiO1 {\n\t\tfill: #d8d8d8;\n\t}\n"])));
284
+ injectGlobal(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n\t@-webkit-keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_6WKby7wXqV_an_qqO-rxbNc {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t13.89% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_Wi-my975tM_an_XhXP1epXB {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t27.78% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DkfFFTaFxy8_an_T2XxzvIaA {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t41.67% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_34IgwiMB5rf_an_TPom3H2LI {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t55.56% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_DeebuCsPTGA_an_aYTRBE7Na {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t69.44% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_ZOjjrPTvyrv_an_l_BjBNzXw {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t83.33% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@-webkit-keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t@keyframes kf_el_2FATegVmf0K_an_wLg4ofuFx {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t97.22% {\n\t\t\topacity: 1;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t#el_hiibMG0x- * {\n\t\t-webkit-animation-duration: 1.2s;\n\t\tanimation-duration: 1.2s;\n\t\t-webkit-animation-iteration-count: infinite;\n\t\tanimation-iteration-count: infinite;\n\t\t-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0, 0, 1, 1);\n\t}\n\t#el_QJeJ_2CDw5 {\n\t\tstroke: none;\n\t\tstroke-width: 1;\n\t\tfill: none;\n\t}\n\t#el_UYYCfubTRf {\n\t\t-webkit-transform: translate(163px, 123px);\n\t\ttransform: translate(163px, 123px);\n\t}\n\t#el_uzZNtK32Zi {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_EYKQ2N9Kgy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6SDP2LAgKC {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t}\n\t#el_-Vm65Ltfy7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_q04iZcSim4 {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_6WKby7wXqV {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\tanimation-name: kf_el_6WKby7wXqV_an_qqO-rxbNc;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_9bggsfQOtU {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_NKxqi9eIym {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_Wi-my975tM {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\tanimation-name: kf_el_Wi-my975tM_an_XhXP1epXB;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_zclQ34fvf7 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_1OsvRT8HkeZ {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DkfFFTaFxy8 {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\tanimation-name: kf_el_DkfFFTaFxy8_an_T2XxzvIaA;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_aa9sjx4H0vA {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_tea114vWg0J {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_34IgwiMB5rf {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\tanimation-name: kf_el_34IgwiMB5rf_an_TPom3H2LI;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_z5u6RAFhx7d {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_7nfuWmA5Uhy {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_DeebuCsPTGA {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\tanimation-name: kf_el_DeebuCsPTGA_an_aYTRBE7Na;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el__ZcqlS20zcw {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_8DnEQnD7VWV {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_ZOjjrPTvyrv {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\tanimation-name: kf_el_ZOjjrPTvyrv_an_l_BjBNzXw;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_FYYKCI_u24e {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_XZty4MnTp5Y {\n\t\tfill: #d8d8d8;\n\t}\n\t#el_2FATegVmf0K {\n\t\t-webkit-transform: translate(37.846924px, 0px);\n\t\ttransform: translate(37.846924px, 0px);\n\t\t-webkit-animation-fill-mode: backwards;\n\t\tanimation-fill-mode: backwards;\n\t\topacity: 0;\n\t\t-webkit-animation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\tanimation-name: kf_el_2FATegVmf0K_an_wLg4ofuFx;\n\t\t-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t\tanimation-timing-function: cubic-bezier(0.42, 0, 1, 1);\n\t}\n\t#el_RMT1KUfbdF8 {\n\t\tfill: #0B6AFF;\n\t}\n\t#el_RgLcovvFiO1 {\n\t\tfill: #d8d8d8;\n\t}\n"])));
336
285
  var ListenSvg = {
337
286
  name: 'ListenSvg',
338
287
  props: ['className'],
@@ -5,8 +5,8 @@ import { css } from 'emotion';
5
5
  import styled from '@appbaseio/vue-emotion';
6
6
  import { t as types } from './vueTypes-98819a12.js';
7
7
  import { a as isFunction } from './index-4755c9a0.js';
8
+ import { D as Downshift, b as InputWrapper, a as IconGroup, I as IconWrapper, C as CancelSvg } from './CancelSvg-282ae799.js';
8
9
  import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-d8519224.js';
9
- import { D as Downshift } from './DownShift-e7ccf2a7.js';
10
10
  import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
11
11
 
12
12
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -69,7 +69,9 @@ var Dropdown = {
69
69
  single: VueTypes.bool,
70
70
  small: VueTypes.bool.def(false),
71
71
  themePreset: types.themePreset,
72
- showSearch: VueTypes.bool
72
+ showSearch: VueTypes.bool,
73
+ showClear: VueTypes.bool,
74
+ searchPlaceholder: VueTypes.string.def('Type here to search...')
73
75
  },
74
76
  render: function render() {
75
77
  var _this = this;
@@ -143,23 +145,7 @@ var Dropdown = {
143
145
  getItemEvents: getItemEvents
144
146
  }) : isOpen && itemsToRender.length ? h("ul", {
145
147
  "class": suggestions(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName(_this.$props.innerClass, 'list')
146
- }, [_this.$props.showSearch ? h(Input, {
147
- "attrs": {
148
- "id": _this.$props.componentId + "-input",
149
- "showIcon": false,
150
- "placeholder": "Type here to search...",
151
- "value": _this.$data.searchTerm,
152
- "themePreset": themePreset
153
- },
154
- "style": {
155
- border: 0,
156
- borderBottom: '1px solid #ddd'
157
- },
158
- "class": getClassName(_this.$props.innerClass, 'input'),
159
- "on": {
160
- "change": _this.handleInputChange
161
- }
162
- }) : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
148
+ }, [_this.$props.showSearch ? _this.renderSearchbox() : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
163
149
  var selected = _this.$props.multi // MultiDropdownList
164
150
  && (selectedItem && !!selectedItem[item[keyField]] // MultiDropdownRange
165
151
  || Array.isArray(selectedItem) && selectedItem.find(function (value) {
@@ -212,6 +198,7 @@ var Dropdown = {
212
198
 
213
199
  if (!this.$props.multi) {
214
200
  this.isOpen = false;
201
+ this.searchTerm = '';
215
202
  }
216
203
  },
217
204
  handleStateChange: function handleStateChange(_ref2) {
@@ -235,6 +222,9 @@ var Dropdown = {
235
222
  var value = e.target.value;
236
223
  this.searchTerm = value;
237
224
  },
225
+ clearSearchTerm: function clearSearchTerm() {
226
+ this.searchTerm = '';
227
+ },
238
228
  renderToString: function renderToString(value) {
239
229
  var _this2 = this;
240
230
 
@@ -275,6 +265,51 @@ var Dropdown = {
275
265
  return h("p", {
276
266
  "class": getClassName(this.$props.innerClass, 'noResults') || null
277
267
  }, [isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
268
+ },
269
+ renderSearchbox: function renderSearchbox() {
270
+ var h = this.$createElement;
271
+ var _this$$props2 = this.$props,
272
+ componentId = _this$$props2.componentId,
273
+ searchPlaceholder = _this$$props2.searchPlaceholder,
274
+ showClear = _this$$props2.showClear,
275
+ themePreset = _this$$props2.themePreset,
276
+ innerClass = _this$$props2.innerClass;
277
+ var InputComponent = h(Input, {
278
+ "attrs": {
279
+ "id": componentId + "-input",
280
+ "showIcon": false,
281
+ "showClear": showClear,
282
+ "placeholder": searchPlaceholder,
283
+ "value": this.$data.searchTerm,
284
+ "themePreset": themePreset
285
+ },
286
+ "style": {
287
+ border: 0,
288
+ borderBottom: '1px solid #ddd'
289
+ },
290
+ "class": getClassName(innerClass, 'input'),
291
+ "on": {
292
+ "change": this.handleInputChange
293
+ }
294
+ });
295
+
296
+ if (showClear) {
297
+ return h(InputWrapper, [InputComponent, this.searchTerm && h(IconGroup, {
298
+ "attrs": {
299
+ "groupPosition": "right",
300
+ "positionType": "absolute"
301
+ }
302
+ }, [h(IconWrapper, {
303
+ "on": {
304
+ "click": this.clearSearchTerm
305
+ },
306
+ "attrs": {
307
+ "isClearIcon": true
308
+ }
309
+ }, [h(CancelSvg)])])]);
310
+ }
311
+
312
+ return InputComponent;
278
313
  }
279
314
  }
280
315
  };
@@ -12,13 +12,13 @@ import 'redux';
12
12
  import { f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, a as isFunction, o as parseValueArray, g as getComponent, h as hasCustomRenderer, c as connect } from './index-4755c9a0.js';
13
13
  import { C as ComponentWrapper } from './ComponentWrapper-459505fd.js';
14
14
  import { T as Title } from './Title-579f8d6c.js';
15
+ import './CancelSvg-282ae799.js';
15
16
  import './Input-d8519224.js';
16
17
  import 'compute-scroll-into-view';
17
- import './DownShift-e7ccf2a7.js';
18
18
  import { C as Container } from './Container-4383c6f0.js';
19
19
  import '@appbaseio/reactivecore/lib/utils/suggestions';
20
20
  import { g as getAggsQuery } from './utils-3a32e13f.js';
21
- import { D as Dropdown } from './DropDown-c5ab660f.js';
21
+ import { D as Dropdown } from './DropDown-d9686568.js';
22
22
 
23
23
  var updateQuery = Actions.updateQuery,
24
24
  setQueryOptions = Actions.setQueryOptions,
@@ -75,10 +75,12 @@ var MultiDropdownList = {
75
75
  showMissing: VueTypes.bool.def(false),
76
76
  missingLabel: VueTypes.string.def('N/A'),
77
77
  showSearch: VueTypes.bool.def(false),
78
+ showClear: VueTypes.bool.def(false),
78
79
  showLoadMore: VueTypes.bool.def(false),
79
80
  loadMoreLabel: VueTypes.oneOfType([VueTypes.string, VueTypes.any]).def('Load More'),
80
81
  nestedField: types.string,
81
- index: VueTypes.string
82
+ index: VueTypes.string,
83
+ searchPlaceholder: VueTypes.string.def('Type here to search...')
82
84
  },
83
85
  created: function created() {
84
86
  if (!this.enableAppbase && this.$props.index) {
@@ -206,7 +208,9 @@ var MultiDropdownList = {
206
208
  if (!this.hasCustomRenderer && this.$data.modifiedOptions.length === 0 && !this.isLoading) {
207
209
  if (renderNoResults && isFunction(renderNoResults)) {
208
210
  return h("div", [renderNoResults()]);
209
- } else if (renderNoResults && !isFunction(renderNoResults)) {
211
+ }
212
+
213
+ if (renderNoResults && !isFunction(renderNoResults)) {
210
214
  return renderNoResults;
211
215
  }
212
216
 
@@ -245,6 +249,8 @@ var MultiDropdownList = {
245
249
  "renderItem": renderItemCalc,
246
250
  "renderNoResults": this.$scopedSlots.renderNoResults || this.$props.renderNoResults,
247
251
  "showSearch": this.$props.showSearch,
252
+ "showClear": this.$props.showClear,
253
+ "searchPlaceholder": this.$props.searchPlaceholder,
248
254
  "transformData": this.$props.transformData,
249
255
  "footer": showLoadMore && !isLastBucket && h("div", {
250
256
  "attrs": {
@@ -12,13 +12,13 @@ import 'redux';
12
12
  import { f as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, a as isFunction, g as getComponent, h as hasCustomRenderer, c as connect } from './index-4755c9a0.js';
13
13
  import { C as ComponentWrapper } from './ComponentWrapper-459505fd.js';
14
14
  import { T as Title } from './Title-579f8d6c.js';
15
+ import './CancelSvg-282ae799.js';
15
16
  import './Input-d8519224.js';
16
17
  import 'compute-scroll-into-view';
17
- import './DownShift-e7ccf2a7.js';
18
18
  import { C as Container } from './Container-4383c6f0.js';
19
19
  import '@appbaseio/reactivecore/lib/utils/suggestions';
20
20
  import { g as getAggsQuery } from './utils-3a32e13f.js';
21
- import { D as Dropdown } from './DropDown-c5ab660f.js';
21
+ import { D as Dropdown } from './DropDown-d9686568.js';
22
22
 
23
23
  var updateQuery = Actions.updateQuery,
24
24
  setQueryOptions = Actions.setQueryOptions,
@@ -74,10 +74,12 @@ var SingleDropdownList = {
74
74
  showMissing: VueTypes.bool.def(false),
75
75
  missingLabel: VueTypes.string.def('N/A'),
76
76
  showSearch: VueTypes.bool.def(false),
77
+ showClear: VueTypes.bool.def(false),
77
78
  showLoadMore: VueTypes.bool.def(false),
78
79
  loadMoreLabel: VueTypes.oneOfType([VueTypes.string, VueTypes.any]).def('Load More'),
79
80
  nestedField: types.string,
80
- index: VueTypes.string
81
+ index: VueTypes.string,
82
+ searchPlaceholder: VueTypes.string.def('Type here to search...')
81
83
  },
82
84
  created: function created() {
83
85
  if (!this.enableAppbase && this.$props.index) {
@@ -231,6 +233,8 @@ var SingleDropdownList = {
231
233
  "renderNoResults": this.$scopedSlots.renderNoResults || this.$props.renderNoResults,
232
234
  "themePreset": this.themePreset,
233
235
  "showSearch": this.$props.showSearch,
236
+ "showClear": this.$props.showClear,
237
+ "searchPlaceholder": this.$props.searchPlaceholder,
234
238
  "transformData": this.$props.transformData,
235
239
  "footer": showLoadMore && !isLastBucket && h("div", {
236
240
  "attrs": {
@@ -9,6 +9,10 @@ var getSearchState = helper.getSearchState;
9
9
  var defaultKeys = ['hits', 'value', 'aggregations', 'error'];
10
10
 
11
11
  var filterProps = function filterProps(props) {
12
+ if (props === void 0) {
13
+ props = {};
14
+ }
15
+
12
16
  return _extends({}, props, {
13
17
  props: props.componentProps
14
18
  });
@@ -28,7 +32,7 @@ var filterByComponentIds = function filterByComponentIds(state, props) {
28
32
  return _ref = {}, _ref[componentIds] = state[componentIds], _ref;
29
33
  }
30
34
 
31
- if (componentIds instanceof Array) {
35
+ if (Array.isArray(componentIds)) {
32
36
  var filteredState = {};
33
37
  componentIds.forEach(function (componentId) {
34
38
  filteredState[componentId] = state[componentId];
@@ -67,7 +71,7 @@ var StateProvider = {
67
71
  };
68
72
  return this.__state;
69
73
  },
70
- mounted: function mounted() {
74
+ created: function created() {
71
75
  this.searchState = filterByKeys(getSearchState(filterProps(this.searchStateProps)), this.includeKeys);
72
76
  },
73
77
  computed: {
package/dist/es/index.js CHANGED
@@ -25,9 +25,9 @@ import 'url-search-params-polyfill';
25
25
  export { default as ReactiveBase } from './ReactiveBase.js';
26
26
  import 'hotkeys-js';
27
27
  export { default as DataSearch } from './DataSearch.js';
28
+ import './CancelSvg-282ae799.js';
28
29
  import './Input-d8519224.js';
29
30
  import 'compute-scroll-into-view';
30
- import './DownShift-e7ccf2a7.js';
31
31
  import './Container-4383c6f0.js';
32
32
  import 'vue-highlight-words';
33
33
  import '@appbaseio/reactivecore/lib/utils/suggestions';
@@ -35,7 +35,7 @@ import './FormControlList-fe389a2e.js';
35
35
  import './utils-3a32e13f.js';
36
36
  export { default as SingleList } from './SingleList.js';
37
37
  export { default as MultiList } from './MultiList.js';
38
- import './DropDown-c5ab660f.js';
38
+ import './DropDown-d9686568.js';
39
39
  export { default as SingleDropdownList } from './SingleDropdownList.js';
40
40
  export { default as MultiDropdownList } from './MultiDropdownList.js';
41
41
  export { default as ToggleButton } from './ToggleButton.js';
@@ -25,9 +25,9 @@ import 'url-search-params-polyfill';
25
25
  import ReactiveBase from './ReactiveBase.js';
26
26
  import 'hotkeys-js';
27
27
  import DataSearch from './DataSearch.js';
28
+ import './CancelSvg-282ae799.js';
28
29
  import './Input-d8519224.js';
29
30
  import 'compute-scroll-into-view';
30
- import './DownShift-e7ccf2a7.js';
31
31
  import './Container-4383c6f0.js';
32
32
  import 'vue-highlight-words';
33
33
  import '@appbaseio/reactivecore/lib/utils/suggestions';
@@ -35,7 +35,7 @@ import './FormControlList-fe389a2e.js';
35
35
  import './utils-3a32e13f.js';
36
36
  import SingleList from './SingleList.js';
37
37
  import MultiList from './MultiList.js';
38
- import './DropDown-c5ab660f.js';
38
+ import './DropDown-d9686568.js';
39
39
  import SingleDropdownList from './SingleDropdownList.js';
40
40
  import MultiDropdownList from './MultiDropdownList.js';
41
41
  import ToggleButton from './ToggleButton.js';
@@ -1,3 +1,3 @@
1
- var version = "1.16.0-alpha.28";
1
+ var version = "1.16.0-alpha.29";
2
2
 
3
3
  export default version;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appbaseio/reactivesearch-vue",
3
- "version": "1.16.0-alpha.28",
3
+ "version": "1.16.0-alpha.29",
4
4
  "private": false,
5
5
  "main": "dist/cjs/index.js",
6
6
  "jsnext:main": "dist/es/index.js",
@@ -34,7 +34,7 @@
34
34
  ],
35
35
  "sideEffects": false,
36
36
  "dependencies": {
37
- "@appbaseio/reactivecore": "9.13.2",
37
+ "@appbaseio/reactivecore": "9.13.3",
38
38
  "@appbaseio/vue-emotion": "0.4.4",
39
39
  "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
40
40
  "appbase-js": "^4.5.1",