@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.
- package/dist/@appbaseio/reactivesearch-vue.umd.js +143 -97
- package/dist/@appbaseio/reactivesearch-vue.umd.js.map +1 -1
- package/dist/@appbaseio/reactivesearch-vue.umd.min.js +4 -4
- package/dist/@appbaseio/reactivesearch-vue.umd.min.js.map +1 -1
- package/dist/cjs/{DownShift-d41f2442.js → CancelSvg-b14dd012.js} +57 -0
- package/dist/cjs/DataSearch.js +20 -71
- package/dist/cjs/{DropDown-3c343026.js → DropDown-dc042720.js} +55 -20
- package/dist/cjs/MultiDropdownList.js +10 -4
- package/dist/cjs/SingleDropdownList.js +7 -3
- package/dist/cjs/StateProvider.js +6 -2
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/install.js +2 -2
- package/dist/cjs/version.js +1 -1
- package/dist/es/{DownShift-e7ccf2a7.js → CancelSvg-282ae799.js} +54 -2
- package/dist/es/DataSearch.js +10 -61
- package/dist/es/{DropDown-c5ab660f.js → DropDown-d9686568.js} +54 -19
- package/dist/es/MultiDropdownList.js +10 -4
- package/dist/es/SingleDropdownList.js +7 -3
- package/dist/es/StateProvider.js +6 -2
- package/dist/es/index.js +2 -2
- package/dist/es/install.js +2 -2
- package/dist/es/version.js +1 -1
- package/package.json +2 -2
|
@@ -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
|
-
|
|
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 };
|
package/dist/es/DataSearch.js
CHANGED
|
@@ -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
|
|
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$
|
|
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$
|
|
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
|
|
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
|
-
|
|
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$
|
|
224
|
+
var _templateObject$4;
|
|
276
225
|
|
|
277
|
-
injectGlobal(_templateObject$
|
|
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$
|
|
282
|
+
var _templateObject$5;
|
|
334
283
|
|
|
335
|
-
injectGlobal(_templateObject$
|
|
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 ?
|
|
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-
|
|
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
|
-
}
|
|
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-
|
|
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": {
|
package/dist/es/StateProvider.js
CHANGED
|
@@ -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
|
|
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
|
-
|
|
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-
|
|
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';
|
package/dist/es/install.js
CHANGED
|
@@ -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-
|
|
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';
|
package/dist/es/version.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@appbaseio/reactivesearch-vue",
|
|
3
|
-
"version": "1.16.0-alpha.
|
|
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.
|
|
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",
|