@appbaseio/reactivesearch-vue 2.0.0-alpha.4 → 3.0.0-alpha.1

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.
Files changed (109) hide show
  1. package/README.md +9 -9
  2. package/dist/@appbaseio/reactivesearch-vue.umd.js +21316 -29369
  3. package/dist/@appbaseio/reactivesearch-vue.umd.js.map +1 -1
  4. package/dist/@appbaseio/reactivesearch-vue.umd.min.js +5 -19
  5. package/dist/@appbaseio/reactivesearch-vue.umd.min.js.map +1 -1
  6. package/dist/cjs/Button-ad042719.js +59 -0
  7. package/dist/cjs/Card-f5ab024a.js +27 -0
  8. package/dist/cjs/{ComponentWrapper-ad3dad02.js → ComponentWrapper-611cf7f9.js} +44 -58
  9. package/dist/cjs/Container-29f049b2.js +12 -0
  10. package/dist/cjs/DropDown-dc184468.js +700 -0
  11. package/dist/cjs/DynamicRangeSlider.js +106 -157
  12. package/dist/cjs/Flex-d5675ea6.js +48 -0
  13. package/dist/cjs/FormControlList-fadd792f.js +42 -0
  14. package/dist/cjs/Input-088dfcb4.js +74 -0
  15. package/dist/cjs/ListItem-d57d648d.js +42 -0
  16. package/dist/cjs/MultiDropdownList.js +124 -240
  17. package/dist/cjs/MultiList.js +124 -262
  18. package/dist/cjs/MultiRange.js +87 -133
  19. package/dist/cjs/{Pagination-71e85fa9.js → Pagination-b5ddc906.js} +70 -83
  20. package/dist/cjs/PreferencesConsumer-22d1b49f.js +73 -0
  21. package/dist/cjs/RangeInput.js +163 -171
  22. package/dist/cjs/RangeSlider.js +81 -109
  23. package/dist/cjs/ReactiveBase.js +139 -156
  24. package/dist/cjs/ReactiveComponent-a6108189.js +2184 -0
  25. package/dist/cjs/ReactiveComponent.js +46 -340
  26. package/dist/cjs/ReactiveGoogleMap.js +451 -660
  27. package/dist/cjs/ReactiveList.js +180 -305
  28. package/dist/cjs/ResultCard.js +36 -36
  29. package/dist/cjs/ResultList.js +48 -56
  30. package/dist/cjs/SelectedFilters.js +62 -69
  31. package/dist/cjs/SingleDropdownList.js +117 -177
  32. package/dist/cjs/SingleList.js +122 -206
  33. package/dist/cjs/SingleRange.js +78 -105
  34. package/dist/cjs/StateProvider.js +35 -38
  35. package/dist/cjs/Title-8802a218.js +12 -0
  36. package/dist/cjs/ToggleButton.js +72 -119
  37. package/dist/cjs/{_rollupPluginBabelHelpers-c705cbe6.js → _rollupPluginBabelHelpers-f8b843f8.js} +0 -15
  38. package/dist/cjs/{index-6a167fe0.js → index-d8d8f291.js} +38 -108
  39. package/dist/cjs/index.js +44 -41
  40. package/dist/cjs/initReactivesearch.js +63 -150
  41. package/dist/cjs/install.js +47 -43
  42. package/dist/cjs/ssr-6c8a72e1.js +66 -0
  43. package/dist/cjs/{utils-d6a52588.js → utils-83fd01e9.js} +7 -16
  44. package/dist/cjs/version.js +1 -1
  45. package/dist/cjs/{vueTypes-727b7c63.js → vueTypes-1bf00978.js} +8 -19
  46. package/dist/es/Button-474510e3.js +53 -0
  47. package/dist/es/{Card-450683f1.js → Card-38cbe652.js} +3 -3
  48. package/dist/es/{ComponentWrapper-424e86fd.js → ComponentWrapper-3dfe6931.js} +44 -58
  49. package/dist/es/{Container-ba826e96.js → Container-d00219f7.js} +2 -2
  50. package/dist/es/DropDown-029ffd42.js +690 -0
  51. package/dist/es/DynamicRangeSlider.js +106 -157
  52. package/dist/es/Flex-a08e22d7.js +46 -0
  53. package/dist/es/FormControlList-fe6eaee4.js +38 -0
  54. package/dist/es/Input-ad474a55.js +69 -0
  55. package/dist/es/{ListItem-cad14c5e.js → ListItem-16756c02.js} +7 -8
  56. package/dist/es/MultiDropdownList.js +124 -240
  57. package/dist/es/MultiList.js +124 -262
  58. package/dist/es/MultiRange.js +87 -133
  59. package/dist/es/{Pagination-784bf143.js → Pagination-72bd1d9e.js} +70 -83
  60. package/dist/es/PreferencesConsumer-24e88f3b.js +71 -0
  61. package/dist/es/RangeInput.js +163 -170
  62. package/dist/es/RangeSlider.js +81 -109
  63. package/dist/es/ReactiveBase.js +138 -154
  64. package/dist/es/ReactiveComponent-0a97eb1e.js +2178 -0
  65. package/dist/es/ReactiveComponent.js +42 -337
  66. package/dist/es/ReactiveGoogleMap.js +446 -654
  67. package/dist/es/ReactiveList.js +178 -302
  68. package/dist/es/ResultCard.js +36 -36
  69. package/dist/es/ResultList.js +48 -56
  70. package/dist/es/SelectedFilters.js +62 -69
  71. package/dist/es/SingleDropdownList.js +117 -177
  72. package/dist/es/SingleList.js +122 -206
  73. package/dist/es/SingleRange.js +78 -105
  74. package/dist/es/StateProvider.js +36 -39
  75. package/dist/es/{Title-3342664a.js → Title-863dfa42.js} +2 -2
  76. package/dist/es/ToggleButton.js +72 -119
  77. package/dist/es/{_rollupPluginBabelHelpers-76660dab.js → _rollupPluginBabelHelpers-ded08042.js} +0 -15
  78. package/dist/es/{index-7788a843.js → index-4520a598.js} +39 -107
  79. package/dist/es/index.js +30 -32
  80. package/dist/es/initReactivesearch.js +63 -150
  81. package/dist/es/install.js +49 -41
  82. package/dist/es/{ssr-b2c0b401.js → ssr-584c278d.js} +37 -8
  83. package/dist/es/{utils-9e68acee.js → utils-9e5a16a1.js} +7 -16
  84. package/dist/es/version.js +1 -1
  85. package/dist/es/{vueTypes-b8146772.js → vueTypes-f1923c72.js} +8 -19
  86. package/package.json +10 -9
  87. package/dist/cjs/Button-446f819e.js +0 -68
  88. package/dist/cjs/CancelSvg-9f258f4f.js +0 -449
  89. package/dist/cjs/Card-642547a8.js +0 -30
  90. package/dist/cjs/Container-daf30918.js +0 -15
  91. package/dist/cjs/DataSearch-aa04dc6e.js +0 -2352
  92. package/dist/cjs/DataSearch.js +0 -30
  93. package/dist/cjs/DropDown-c479bbb0.js +0 -328
  94. package/dist/cjs/Flex-aa517a13.js +0 -52
  95. package/dist/cjs/FormControlList-c195a592.js +0 -47
  96. package/dist/cjs/Input-e6603a7e.js +0 -79
  97. package/dist/cjs/ListItem-8c9e0d68.js +0 -46
  98. package/dist/cjs/Title-1de7d0f4.js +0 -15
  99. package/dist/cjs/install-b97dbac4.js +0 -1409
  100. package/dist/cjs/ssr-3027b848.js +0 -39
  101. package/dist/es/Button-d8bc15ea.js +0 -59
  102. package/dist/es/CancelSvg-4cfae5fd.js +0 -440
  103. package/dist/es/DataSearch-b86a6675.js +0 -2337
  104. package/dist/es/DataSearch.js +0 -22
  105. package/dist/es/DropDown-05a644a5.js +0 -322
  106. package/dist/es/Flex-1f0795c3.js +0 -47
  107. package/dist/es/FormControlList-c22d64f6.js +0 -40
  108. package/dist/es/Input-7a2a9fac.js +0 -71
  109. package/dist/es/install-ac8a1edb.js +0 -1402
@@ -1,39 +0,0 @@
1
- 'use strict';
2
-
3
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
4
-
5
- var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
6
- var styled = require('@appbaseio/vue-emotion');
7
- var styled__default = _interopDefault(styled);
8
- var NoSSR = _interopDefault(require('vue-no-ssr'));
9
-
10
- var _templateObject;
11
- var Slider = styled__default('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmargin-top: 30px;\n\tpadding: 10px;\n\n\t/* component style */\n\t.vue-slider-disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n\n\t/* rail style */\n\t.vue-slider-rail {\n\t\tbackground-color: #ccc;\n\t\tborder-radius: 15px;\n\t\theight: 4px;\n\t}\n\n\t/* process style */\n\t.vue-slider-process {\n\t\tbackground-color: #0b6aff;\n\t\tborder-radius: 15px;\n\t}\n\n\t/* mark style */\n\t.vue-slider-mark {\n\t\tz-index: 4;\n\t}\n\n\t.vue-slider-mark:first-child .vue-slider-mark-step,\n\t.vue-slider-mark:last-child .vue-slider-mark-step {\n\t\tdisplay: none;\n\t}\n\n\t.vue-slider-mark-step {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: rgba(0, 0, 0, 0.16);\n\t}\n\n\t.vue-slider-mark-label {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* dot style */\n\t.vue-slider-dot {\n\t\tz-index: 2;\n\t}\n\n\t.vue-slider-dot-handle {\n\t\tcursor: pointer;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: #fff;\n\t\tbox-sizing: border-box;\n\t\tborder: 1px solid #9a9a9a;\n\t\tz-index: 2;\n\t\tbox-shadow: 0.5px 0.5px 2px 1px rgb(0 0 0 / 32%);\n\t}\n\n\t.vue-slider-dot-handle-disabled {\n\t\tcursor: not-allowed;\n\t\tbackground-color: #ccc;\n\t}\n\n\t.vue-slider-dot-tooltip-inner {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t\tpadding: 2px 5px;\n\t\tmin-width: 20px;\n\t\ttext-align: center;\n\t\tcolor: #fff;\n\t\tborder-radius: 5px;\n\t\tborder: 1px solid #3498db;\n\t\tbackground-color: #3498db;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.vue-slider-dot-tooltip-inner::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-top::after {\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-top-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-bottom::after {\n\t\tbottom: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-bottom-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-left::after {\n\t\tleft: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-left-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-right::after {\n\t\tright: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-right-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-wrapper {\n\t\topacity: 0;\n\t\ttransition: all 0.3s;\n\t}\n\t.vue-slider-dot-tooltip-wrapper-show {\n\t\topacity: 1;\n\t}\n\n\t.label-container {\n\t\tmargin: 10px 0;\n\t\twidth: 100%;\n\t}\n\n\t.range-label-right {\n\t\tfloat: right;\n\t}\n"])));
12
-
13
- /**
14
- * Caution: Please do not change this file without having a discussion with the Team.
15
- * Any change may break the umd build, we're directly replacing the line no: 14
16
- * `components['vue-slider-component'] = require('vue-slider-component');` in rollup umd build process with some script.
17
- */
18
- // eslint-disable-next-line
19
-
20
- var getComponents = function getComponents() {
21
- var components = {
22
- NoSSR: NoSSR
23
- };
24
-
25
- if (process.browser) {
26
- try {
27
- // in older versions of nuxt, it's process.BROWSER_BUILD
28
- // eslint-disable-next-line
29
- components['vue-slider-component'] = require('vue-slider-component');
30
- } catch (e) {
31
- console.error('Unable to load vue-slider', e);
32
- }
33
- }
34
-
35
- return components;
36
- };
37
-
38
- exports.Slider = Slider;
39
- exports.getComponents = getComponents;
@@ -1,59 +0,0 @@
1
- import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-76660dab.js';
2
- import { css } from 'emotion';
3
- import styled from '@appbaseio/vue-emotion';
4
- import { darken, rgba, lighten } from 'polished';
5
-
6
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
7
-
8
- var filters = function filters(_ref) {
9
- var borderColor = _ref.colors.borderColor;
10
- return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\ta {\n\t\tmargin: 2px 3px;\n\t\tpadding: 5px 8px;\n\t\tfont-size: 0.85rem;\n\t\tposition: relative;\n\n\t\tspan:first-child {\n\t\t\tmax-width: 260px;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tmargin-right: 26px;\n\t\t}\n\n\t\tspan:last-child {\n\t\t\tdisplay: flex;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: 8px;\n\t\t\tposition: absolute;\n\t\t\talign-items: center;\n\t\t\tborder-left: 1px solid ", ";\n\t\t\tpadding-left: 8px;\n\t\t\tmargin-left: 8px;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tspan:first-child {\n\t\t\t\ttext-decoration: line-through;\n\t\t\t}\n\t\t}\n\t}\n"])), borderColor || '#fff');
11
- };
12
-
13
- var pagination = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tmargin: 10px -3px;\n\tmax-width: 100%;\n\ttext-align: center;\n\n\ta {\n\t\tmargin: 0 3px;\n\t}\n"])));
14
- var toggleButtons = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\tmargin: 0 -3px;\n\tmax-width: 100%;\n\n\ta {\n\t\tmargin: 3px 3px;\n\t}\n"])));
15
- var numberBoxContainer = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\tmargin: 0 -5px;\n\ta {\n\t\tmargin: 5px;\n\t}\n\tspan {\n\t\tmargin: 0 5px;\n\t}\n"])));
16
-
17
- var primary = function primary(_ref2) {
18
- var theme = _ref2.theme;
19
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tcolor: ", ";\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n"])), theme.colors.primaryColor, theme.colors.primaryTextColor, darken(0.1, theme.colors.primaryColor));
20
- };
21
-
22
- var large = function large() {
23
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n\tmin-height: 40px;\n\tpadding: 10px 20px;\n"])));
24
- };
25
-
26
- var disabled = function disabled(_ref3) {
27
- var theme = _ref3.theme;
28
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tcolor: #ccc;\n\tcursor: not-allowed;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n"])), theme.colors.backgroundColor ? lighten(0.1, theme.colors.backgroundColor) : '#fafafa', theme.colors.backgroundColor ? lighten(0.2, theme.colors.backgroundColor) : '#fafafa');
29
- };
30
-
31
- var Button = styled('a')(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n\tdisplay: inline-flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 3px;\n\tborder: 1px solid transparent;\n\tmin-height: 30px;\n\tword-wrap: break-word;\n\tpadding: 5px 12px;\n\tline-height: 1.2rem;\n\tbackground-color: ", ";\n\tcolor: ", ";\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:focus {\n\t\toutline: 0;\n\t\tborder-color: ", ";\n\t\tbox-shadow: ", ";\n\t}\n\n\t", ";\n\t", ";\n\t", ";\n\n\t&.enter-btn {\n\t\tborder-top-left-radius: 0px;\n\t\tborder-bottom-left-radius: 0px;\n\t\theight: 100%;\n\t}\n"])), function (_ref4) {
32
- var theme = _ref4.theme;
33
- return theme.colors.backgroundColor || '#eee';
34
- }, function (_ref5) {
35
- var theme = _ref5.theme;
36
- return theme.colors.textColor;
37
- }, function (_ref6) {
38
- var theme = _ref6.theme;
39
- return theme.colors.backgroundColor ? darken(0.1, theme.colors.backgroundColor) : '#ccc';
40
- }, function (_ref7) {
41
- var theme = _ref7.theme;
42
- return rgba(theme.colors.primaryColor, 0.6);
43
- }, function (_ref8) {
44
- var theme = _ref8.theme;
45
- return "0 0 0 2px " + rgba(theme.colors.primaryColor, 0.3);
46
- }, function (props) {
47
- return props.primary ? primary : null;
48
- }, function (props) {
49
- return props.disabled ? disabled : null;
50
- }, function (props) {
51
- return props.large && large;
52
- });
53
- var loadMoreContainer = css({
54
- margin: '5px 0',
55
- display: 'flex',
56
- justifyContent: 'center'
57
- });
58
-
59
- export { Button as B, filters as f, loadMoreContainer as l, pagination as p, toggleButtons as t };
@@ -1,440 +0,0 @@
1
- import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
2
- import styled, { css } from '@appbaseio/vue-emotion';
3
- import computeScrollIntoView from 'compute-scroll-into-view';
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
-
31
- /**
32
- * Scroll node into view if necessary
33
- * @param {HTMLElement} node the element that should scroll into view
34
- * @param {HTMLElement} rootNode the root element of the component
35
- */
36
- // eslint-disable-next-line
37
-
38
- var scrollIntoView = function scrollIntoView(node, rootNode) {
39
- if (node === null) {
40
- return;
41
- }
42
-
43
- var actions = computeScrollIntoView(node, {
44
- boundary: rootNode,
45
- block: 'nearest',
46
- scrollMode: 'if-needed'
47
- });
48
- actions.forEach(function (_ref) {
49
- var el = _ref.el,
50
- top = _ref.top,
51
- left = _ref.left;
52
- el.scrollTop = top;
53
- el.scrollLeft = left;
54
- });
55
- };
56
-
57
- var Downshift = {
58
- // eslint-disable-next-line
59
- props: ['isOpen', 'inputValue', 'selectedItem', 'highlightedIndex', 'handleChange', 'itemToString', 'handleMouseup'],
60
- data: function data() {
61
- return {
62
- isMouseDown: false,
63
- internal_isOpen: false,
64
- internal_inputValue: '',
65
- internal_selectedItem: null,
66
- internal_highlightedIndex: null
67
- };
68
- },
69
- computed: {
70
- mergedState: function mergedState() {
71
- var _this = this;
72
-
73
- return Object.keys(this.$props).reduce(function (state, key) {
74
- var _extends2;
75
-
76
- return _extends({}, state, (_extends2 = {}, _extends2[key] = _this.isControlledProp(key) ? _this.$props[key] : _this["internal_" + key], _extends2));
77
- }, {});
78
- },
79
- internalItemCount: function internalItemCount() {
80
- return this.items.length;
81
- }
82
- },
83
- mounted: function mounted() {
84
- window.addEventListener('mousedown', this.handleWindowMousedown);
85
- window.addEventListener('mouseup', this.handleWindowMouseup);
86
- },
87
- beforeDestroy: function beforeDestroy() {
88
- window.removeEventListener('mousedown', this.handleWindowMousedown);
89
- window.removeEventListener('mouseup', this.handleWindowMouseup);
90
- },
91
- methods: {
92
- handleWindowMousedown: function handleWindowMousedown() {
93
- this.isMouseDown = true;
94
- },
95
- handleWindowMouseup: function handleWindowMouseup(event) {
96
- this.isMouseDown = false;
97
-
98
- if ((event.target === this.$refs.rootNode || !this.$refs.rootNode.contains(event.target)) && this.mergedState.isOpen) {
99
- // TODO: handle on outer click here
100
- if (!this.isMouseDown) {
101
- this.reset();
102
-
103
- if (this.$props.handleMouseup) {
104
- this.$props.handleMouseup({
105
- isOpen: false
106
- });
107
- }
108
- }
109
- }
110
- },
111
- keyDownArrowDown: function keyDownArrowDown(event) {
112
- event.preventDefault();
113
- var amount = event.shiftKey ? 5 : 1;
114
-
115
- if (this.mergedState.isOpen) {
116
- this.changeHighlightedIndex(amount);
117
- } else {
118
- this.setState({
119
- isOpen: true
120
- });
121
- this.setHighlightedIndex();
122
- }
123
- },
124
- keyDownArrowUp: function keyDownArrowUp(event) {
125
- event.preventDefault();
126
- var amount = event.shiftKey ? -5 : -1;
127
-
128
- if (this.mergedState.isOpen) {
129
- this.changeHighlightedIndex(amount);
130
- } else {
131
- this.setState({
132
- isOpen: true
133
- });
134
- this.setHighlightedIndex();
135
- }
136
- },
137
- keyDownEnter: function keyDownEnter(event) {
138
- if (this.mergedState.isOpen) {
139
- event.preventDefault();
140
- this.selectHighlightedItem();
141
- }
142
- },
143
- keyDownEscape: function keyDownEscape(event) {
144
- event.preventDefault();
145
- this.reset();
146
- },
147
- selectHighlightedItem: function selectHighlightedItem() {
148
- return this.selectItemAtIndex(this.mergedState.highlightedIndex);
149
- },
150
- selectItemAtIndex: function selectItemAtIndex(itemIndex) {
151
- var item = this.items[itemIndex];
152
-
153
- if (item == null) {
154
- return;
155
- }
156
-
157
- this.selectItem(item);
158
- },
159
- selectItem: function selectItem(item) {
160
- if (this.$props.handleChange) {
161
- this.$props.handleChange(item);
162
- }
163
-
164
- function getInputValue() {
165
- if (this.isControlledProp('selectedItem')) {
166
- return '';
167
- }
168
-
169
- return typeof item === 'object' ? item.label || '' : item;
170
- }
171
-
172
- this.setState({
173
- isOpen: false,
174
- highlightedIndex: null,
175
- selectedItem: item,
176
- inputValue: getInputValue.call(this)
177
- });
178
- },
179
- changeHighlightedIndex: function changeHighlightedIndex(moveAmount) {
180
- if (this.internalItemCount < 0) {
181
- return;
182
- }
183
-
184
- var highlightedIndex = this.mergedState.highlightedIndex;
185
- var baseIndex = highlightedIndex;
186
-
187
- if (baseIndex === null) {
188
- baseIndex = moveAmount > 0 ? -1 : this.internalItemCount + 1;
189
- }
190
-
191
- var newIndex = baseIndex + moveAmount;
192
-
193
- if (newIndex < 0) {
194
- newIndex = this.internalItemCount;
195
- } else if (newIndex > this.internalItemCount) {
196
- newIndex = 0;
197
- }
198
-
199
- this.setHighlightedIndex(newIndex);
200
- },
201
- setHighlightedIndex: function setHighlightedIndex(highlightedIndex) {
202
- if (highlightedIndex === void 0) {
203
- highlightedIndex = null;
204
- }
205
-
206
- this.setState({
207
- highlightedIndex: highlightedIndex
208
- });
209
- var element = document.getElementById("Downshift" + highlightedIndex);
210
- scrollIntoView(element, this.rootNode); // Implement scrollIntroView thingy
211
- },
212
- reset: function reset() {
213
- var selectedItem = this.mergedState.selectedItem;
214
- this.setState({
215
- isOpen: false,
216
- highlightedIndex: null,
217
- inputValue: selectedItem
218
- });
219
- },
220
- getItemProps: function getItemProps(_ref) {
221
- var index = _ref.index,
222
- item = _ref.item;
223
- var newIndex = index;
224
-
225
- if (index === undefined) {
226
- if (this.$props.itemToString) {
227
- this.items.push(this.$props.itemToString(item));
228
- } else {
229
- this.items.push(item);
230
- }
231
-
232
- newIndex = this.items.indexOf(item);
233
- } else {
234
- this.items[newIndex] = item;
235
- }
236
-
237
- return {
238
- id: "Downshift" + newIndex
239
- };
240
- },
241
- getItemEvents: function getItemEvents(_ref2) {
242
- var index = _ref2.index,
243
- item = _ref2.item;
244
- var newIndex = index;
245
-
246
- if (index === undefined) {
247
- newIndex = this.items.indexOf(item);
248
- }
249
-
250
- var vm = this;
251
- return {
252
- mouseenter: function mouseenter() {
253
- vm.setHighlightedIndex(newIndex);
254
- },
255
- click: function click(event) {
256
- event.stopPropagation();
257
- vm.selectItemAtIndex(newIndex);
258
- }
259
- };
260
- },
261
- getInputProps: function getInputProps(_ref3) {
262
- var value = _ref3.value;
263
- var inputValue = this.mergedState.inputValue;
264
-
265
- if (value !== inputValue) {
266
- this.setState({
267
- inputValue: value
268
- });
269
- }
270
-
271
- return {
272
- value: inputValue
273
- };
274
- },
275
- getButtonProps: function getButtonProps(_ref4) {
276
- var _this2 = this;
277
-
278
- var onClick = _ref4.onClick,
279
- onKeyDown = _ref4.onKeyDown,
280
- onKeyUp = _ref4.onKeyUp,
281
- onBlur = _ref4.onBlur;
282
- return {
283
- click: function click(event) {
284
- _this2.setState({
285
- isOpen: true,
286
- inputValue: event.target.value
287
- });
288
-
289
- if (onClick) {
290
- onClick(event);
291
- }
292
- },
293
- keydown: function keydown(event) {
294
- if (event.key && _this2["keyDown" + event.key]) {
295
- _this2["keyDown" + event.key].call(_this2, event);
296
- }
297
-
298
- if (onKeyDown) {
299
- onKeyDown(event);
300
- }
301
- },
302
- keyup: function keyup(event) {
303
- if (onKeyUp) {
304
- onKeyUp(event);
305
- }
306
- },
307
- blur: function blur(event) {
308
- if (onBlur) {
309
- onBlur(event);
310
- }
311
- }
312
- };
313
- },
314
- getInputEvents: function getInputEvents(_ref5) {
315
- var _this3 = this;
316
-
317
- var onInput = _ref5.onInput,
318
- onBlur = _ref5.onBlur,
319
- onFocus = _ref5.onFocus,
320
- onKeyPress = _ref5.onKeyPress,
321
- onKeyDown = _ref5.onKeyDown,
322
- onKeyUp = _ref5.onKeyUp,
323
- onClick = _ref5.onClick;
324
- return {
325
- input: function input(event) {
326
- _this3.setState({
327
- isOpen: true,
328
- inputValue: event.target.value
329
- });
330
-
331
- if (onInput) {
332
- onInput(event);
333
- }
334
- },
335
- focus: function focus(event) {
336
- if (onFocus) {
337
- onFocus(event);
338
- }
339
- },
340
- keydown: function keydown(event) {
341
- if (event.key && _this3["keyDown" + event.key]) {
342
- _this3["keyDown" + event.key].call(_this3, event);
343
- }
344
-
345
- if (onKeyDown) {
346
- onKeyDown(event);
347
- }
348
- },
349
- keypress: function keypress(event) {
350
- if (onKeyPress) {
351
- onKeyPress(event);
352
- }
353
- },
354
- keyup: function keyup(event) {
355
- if (onKeyUp) {
356
- onKeyUp(event);
357
- }
358
- },
359
- blur: function blur(event) {
360
- if (onBlur) {
361
- onBlur(event);
362
- } // TODO: implement isMouseDown
363
- // this.reset()
364
-
365
- },
366
- click: onClick
367
- };
368
- },
369
- getHelpersAndState: function getHelpersAndState() {
370
- var getItemProps = this.getItemProps,
371
- getItemEvents = this.getItemEvents,
372
- getInputProps = this.getInputProps,
373
- getInputEvents = this.getInputEvents,
374
- getButtonProps = this.getButtonProps,
375
- setHighlightedIndex = this.setHighlightedIndex;
376
- return _extends({
377
- getItemProps: getItemProps,
378
- getItemEvents: getItemEvents,
379
- getInputProps: getInputProps,
380
- getInputEvents: getInputEvents,
381
- getButtonProps: getButtonProps,
382
- setHighlightedIndex: setHighlightedIndex
383
- }, this.mergedState);
384
- },
385
- isControlledProp: function isControlledProp(prop) {
386
- return this.$props[prop] !== undefined;
387
- },
388
- setState: function setState(stateToSet) {
389
- var _this4 = this;
390
-
391
- // eslint-disable-next-line
392
- Object.keys(stateToSet).forEach(function (key) {
393
- // eslint-disable-next-line
394
- if (_this4.isControlledProp(key)) {
395
- _this4.$emit(key + "Change", stateToSet[key]);
396
-
397
- _this4.$emit(key + "-change", stateToSet[key]);
398
- } else {
399
- _this4["internal_" + key] = stateToSet[key];
400
- }
401
- });
402
- this.$emit('stateChange', this.mergedState);
403
- this.$emit('state-change', this.mergedState);
404
- }
405
- },
406
- render: function render() {
407
- var h = arguments[0];
408
- this.items = [];
409
- return h("div", {
410
- "ref": "rootNode"
411
- }, [this.$scopedSlots["default"] && this.$scopedSlots["default"](_extends({}, this.getHelpersAndState()))]);
412
- }
413
- };
414
-
415
- var CancelSvg = {
416
- functional: true,
417
- render: function render(h) {
418
- return h("svg", {
419
- "attrs": {
420
- "alt": "Clear",
421
- "xmlns": "http://www.w3.org/2000/svg",
422
- "height": "20px",
423
- "viewBox": "0 0 24 24",
424
- "width": "20px"
425
- },
426
- "class": "cancel-icon"
427
- }, [h("title", ["Clear"]), h("path", {
428
- "attrs": {
429
- "d": "M0 0h24v24H0V0z",
430
- "fill": "none"
431
- }
432
- }), h("path", {
433
- "attrs": {
434
- "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"
435
- }
436
- })]);
437
- }
438
- };
439
-
440
- export { CancelSvg as C, Downshift as D, IconWrapper as I, IconGroup as a, InputWrapper as b };