@appbaseio/reactivesearch-vue 2.0.0-alpha.3 → 3.0.0-alpha.0
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 +17405 -25231
- package/dist/@appbaseio/reactivesearch-vue.umd.js.map +1 -1
- package/dist/@appbaseio/reactivesearch-vue.umd.min.js +6 -15
- package/dist/@appbaseio/reactivesearch-vue.umd.min.js.map +1 -1
- package/dist/cjs/Button-ad042719.js +59 -0
- package/dist/cjs/Card-f5ab024a.js +27 -0
- package/dist/cjs/{ComponentWrapper-ad3dad02.js → ComponentWrapper-75f88599.js} +42 -56
- package/dist/cjs/Container-29f049b2.js +12 -0
- package/dist/cjs/DropDown-6cf84c47.js +698 -0
- package/dist/cjs/DynamicRangeSlider.js +103 -155
- package/dist/cjs/Flex-d5675ea6.js +48 -0
- package/dist/cjs/FormControlList-fadd792f.js +42 -0
- package/dist/cjs/Input-4b434436.js +74 -0
- package/dist/cjs/ListItem-d57d648d.js +42 -0
- package/dist/cjs/MultiDropdownList.js +124 -240
- package/dist/cjs/MultiList.js +123 -261
- package/dist/cjs/MultiRange.js +87 -133
- package/dist/cjs/{Pagination-71e85fa9.js → Pagination-b5ddc906.js} +70 -83
- package/dist/cjs/PreferencesConsumer-eb265924.js +75 -0
- package/dist/cjs/RangeInput.js +163 -171
- package/dist/cjs/RangeSlider.js +81 -109
- package/dist/cjs/ReactiveBase.js +139 -157
- package/dist/cjs/ReactiveComponent-eb8db4c1.js +2189 -0
- package/dist/cjs/ReactiveComponent.js +46 -340
- package/dist/cjs/ReactiveGoogleMap.js +445 -655
- package/dist/cjs/ReactiveList.js +179 -304
- package/dist/cjs/ResultCard.js +36 -36
- package/dist/cjs/ResultList.js +48 -56
- package/dist/cjs/SelectedFilters.js +62 -69
- package/dist/cjs/SingleDropdownList.js +117 -177
- package/dist/cjs/SingleList.js +121 -205
- package/dist/cjs/SingleRange.js +78 -105
- package/dist/cjs/StateProvider.js +74 -47
- package/dist/cjs/Title-8802a218.js +12 -0
- package/dist/cjs/ToggleButton.js +72 -119
- package/dist/cjs/{_rollupPluginBabelHelpers-c705cbe6.js → _rollupPluginBabelHelpers-f8b843f8.js} +0 -15
- package/dist/cjs/{index-6a167fe0.js → index-d8d8f291.js} +38 -108
- package/dist/cjs/index.js +44 -41
- package/dist/cjs/initReactivesearch.js +69 -152
- package/dist/cjs/install.js +47 -43
- package/dist/cjs/ssr-6907ada3.js +66 -0
- package/dist/cjs/{utils-d6a52588.js → utils-83fd01e9.js} +7 -16
- package/dist/cjs/version.js +1 -1
- package/dist/cjs/{vueTypes-727b7c63.js → vueTypes-1bf00978.js} +8 -19
- package/dist/es/Button-474510e3.js +53 -0
- package/dist/es/{Card-450683f1.js → Card-38cbe652.js} +3 -3
- package/dist/es/{ComponentWrapper-424e86fd.js → ComponentWrapper-5166c76a.js} +42 -56
- package/dist/es/{Container-ba826e96.js → Container-d00219f7.js} +2 -2
- package/dist/es/DropDown-8764360c.js +688 -0
- package/dist/es/DynamicRangeSlider.js +103 -155
- package/dist/es/Flex-a08e22d7.js +46 -0
- package/dist/es/FormControlList-fe6eaee4.js +38 -0
- package/dist/es/Input-4a8ef1f3.js +69 -0
- package/dist/es/{ListItem-cad14c5e.js → ListItem-16756c02.js} +7 -8
- package/dist/es/MultiDropdownList.js +124 -240
- package/dist/es/MultiList.js +123 -261
- package/dist/es/MultiRange.js +87 -133
- package/dist/es/{Pagination-784bf143.js → Pagination-72bd1d9e.js} +70 -83
- package/dist/es/PreferencesConsumer-c276709c.js +73 -0
- package/dist/es/RangeInput.js +163 -170
- package/dist/es/RangeSlider.js +81 -109
- package/dist/es/ReactiveBase.js +138 -155
- package/dist/es/ReactiveComponent-f9fa5780.js +2183 -0
- package/dist/es/ReactiveComponent.js +42 -337
- package/dist/es/ReactiveGoogleMap.js +440 -649
- package/dist/es/ReactiveList.js +177 -301
- package/dist/es/ResultCard.js +36 -36
- package/dist/es/ResultList.js +48 -56
- package/dist/es/SelectedFilters.js +62 -69
- package/dist/es/SingleDropdownList.js +117 -177
- package/dist/es/SingleList.js +121 -205
- package/dist/es/SingleRange.js +78 -105
- package/dist/es/StateProvider.js +75 -48
- package/dist/es/{Title-3342664a.js → Title-863dfa42.js} +2 -2
- package/dist/es/ToggleButton.js +72 -119
- package/dist/es/{_rollupPluginBabelHelpers-76660dab.js → _rollupPluginBabelHelpers-ded08042.js} +0 -15
- package/dist/es/{index-7788a843.js → index-4520a598.js} +39 -107
- package/dist/es/index.js +30 -32
- package/dist/es/initReactivesearch.js +69 -152
- package/dist/es/install.js +49 -41
- package/dist/es/{ssr-b2c0b401.js → ssr-af398f0c.js} +36 -7
- package/dist/es/{utils-9e68acee.js → utils-9e5a16a1.js} +7 -16
- package/dist/es/version.js +1 -1
- package/dist/es/{vueTypes-b8146772.js → vueTypes-f1923c72.js} +8 -19
- package/package.json +10 -9
- package/dist/cjs/Button-446f819e.js +0 -68
- package/dist/cjs/CancelSvg-9f258f4f.js +0 -449
- package/dist/cjs/Card-642547a8.js +0 -30
- package/dist/cjs/Container-daf30918.js +0 -15
- package/dist/cjs/DataSearch-6cf29cf0.js +0 -2323
- package/dist/cjs/DataSearch.js +0 -30
- package/dist/cjs/DropDown-c479bbb0.js +0 -328
- package/dist/cjs/Flex-aa517a13.js +0 -52
- package/dist/cjs/FormControlList-c195a592.js +0 -47
- package/dist/cjs/Input-e6603a7e.js +0 -79
- package/dist/cjs/ListItem-8c9e0d68.js +0 -46
- package/dist/cjs/Title-1de7d0f4.js +0 -15
- package/dist/cjs/install-42ba1d44.js +0 -1409
- package/dist/cjs/ssr-3027b848.js +0 -39
- package/dist/es/Button-d8bc15ea.js +0 -59
- package/dist/es/CancelSvg-4cfae5fd.js +0 -440
- package/dist/es/DataSearch-4888aa43.js +0 -2308
- package/dist/es/DataSearch.js +0 -22
- package/dist/es/DropDown-05a644a5.js +0 -322
- package/dist/es/Flex-1f0795c3.js +0 -47
- package/dist/es/FormControlList-c22d64f6.js +0 -40
- package/dist/es/Input-7a2a9fac.js +0 -71
- package/dist/es/install-80bc2764.js +0 -1402
package/dist/cjs/ssr-3027b848.js
DELETED
|
@@ -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 };
|