@appbaseio/reactivesearch-vue 1.34.0-alpha.2 → 1.34.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 +10874 -8633
- package/dist/@appbaseio/reactivesearch-vue.umd.js.map +1 -1
- package/dist/@appbaseio/reactivesearch-vue.umd.min.js +12 -11
- package/dist/@appbaseio/reactivesearch-vue.umd.min.js.map +1 -1
- package/dist/cjs/Button-841fd06d.js +62 -0
- package/dist/cjs/{CancelSvg-062a42f0.js → CancelSvg-220a7cc3.js} +40 -32
- package/dist/cjs/Card-240f283d.js +30 -0
- package/dist/cjs/{ComponentWrapper-db45cc6d.js → ComponentWrapper-94c50228.js} +7 -7
- package/dist/cjs/Container-e699ea95.js +15 -0
- package/dist/cjs/DataSearch.js +1312 -20
- package/dist/cjs/{DropDown-3b899b20.js → DropDown-7a52c661.js} +79 -78
- package/dist/cjs/DynamicRangeSlider.js +46 -56
- package/dist/cjs/Flex-ddd7cb6b.js +50 -0
- package/dist/cjs/FormControlList-bbb5cd24.js +45 -0
- package/dist/cjs/Input-ead4cd84.js +77 -0
- package/dist/cjs/ListItem-5088bd6a.js +45 -0
- package/dist/cjs/MultiDropdownList.js +68 -74
- package/dist/cjs/MultiList.js +94 -89
- package/dist/cjs/MultiRange.js +44 -54
- package/dist/cjs/{Pagination-a468f960.js → Pagination-e56a5b79.js} +53 -56
- package/dist/cjs/{PreferencesConsumer-034c55e3.js → PreferencesConsumer-5e6e84a2.js} +5 -6
- package/dist/cjs/RangeInput.js +107 -115
- package/dist/cjs/RangeSlider.js +39 -50
- package/dist/cjs/ReactiveBase.js +55 -69
- package/dist/cjs/ReactiveComponent.js +316 -46
- package/dist/cjs/{ReactiveComponent-f0f486ca.js → ReactiveComponentPrivate-244c6055.js} +321 -618
- package/dist/cjs/ReactiveComponentPrivate.js +55 -0
- package/dist/cjs/ReactiveGoogleMap.js +439 -384
- package/dist/cjs/ReactiveList.js +128 -100
- package/dist/cjs/ResultCard.js +19 -26
- package/dist/cjs/ResultList.js +27 -31
- package/dist/cjs/SelectedFilters.js +34 -49
- package/dist/cjs/SingleDropdownList.js +66 -73
- package/dist/cjs/SingleList.js +96 -90
- package/dist/cjs/SingleRange.js +42 -48
- package/dist/cjs/StateProvider.js +2 -2
- package/dist/cjs/Tags-4ec43831.js +883 -0
- package/dist/cjs/Title-16042ea0.js +15 -0
- package/dist/cjs/ToggleButton.js +34 -39
- package/dist/cjs/{index-dc25b706.js → index-de136c17.js} +8 -6
- package/dist/cjs/index.js +27 -25
- package/dist/cjs/initReactivesearch.js +0 -3
- package/dist/cjs/install.js +23 -22
- package/dist/cjs/ssr-f2fc1bf6.js +36 -0
- package/dist/cjs/version.js +1 -1
- package/dist/cjs/{vueTypes-621a8143.js → vueTypes-b7007f5f.js} +3 -2
- package/dist/es/Button-153cd885.js +53 -0
- package/dist/es/{CancelSvg-14ebc9a1.js → CancelSvg-e40552a5.js} +37 -30
- package/dist/es/{Card-1951569e.js → Card-19ad6d90.js} +6 -5
- package/dist/es/{ComponentWrapper-bf443c0b.js → ComponentWrapper-edaeaceb.js} +6 -6
- package/dist/es/Container-d00219f7.js +1 -1
- package/dist/es/DataSearch.js +1312 -18
- package/dist/es/{DropDown-35e232b7.js → DropDown-2c0dd714.js} +78 -78
- package/dist/es/DynamicRangeSlider.js +43 -53
- package/dist/es/Flex-7c177a10.js +45 -0
- package/dist/es/FormControlList-99797d0a.js +38 -0
- package/dist/es/Input-c09c0b56.js +69 -0
- package/dist/es/{ListItem-47a6345a.js → ListItem-07888a65.js} +7 -6
- package/dist/es/MultiDropdownList.js +66 -72
- package/dist/es/MultiList.js +93 -88
- package/dist/es/MultiRange.js +42 -52
- package/dist/es/{Pagination-145b4ff2.js → Pagination-edeb7dbe.js} +53 -56
- package/dist/es/{PreferencesConsumer-7ea7313a.js → PreferencesConsumer-86a676c8.js} +4 -5
- package/dist/es/RangeInput.js +103 -112
- package/dist/es/RangeSlider.js +36 -47
- package/dist/es/ReactiveBase.js +53 -68
- package/dist/es/ReactiveComponent.js +316 -45
- package/dist/es/{ReactiveComponent-e2fb9eb4.js → ReactiveComponentPrivate-6f16e1b7.js} +316 -614
- package/dist/es/ReactiveComponentPrivate.js +47 -0
- package/dist/es/ReactiveGoogleMap.js +434 -380
- package/dist/es/ReactiveList.js +125 -98
- package/dist/es/ResultCard.js +18 -25
- package/dist/es/ResultList.js +26 -30
- package/dist/es/SelectedFilters.js +32 -47
- package/dist/es/SingleDropdownList.js +64 -71
- package/dist/es/SingleList.js +94 -88
- package/dist/es/SingleRange.js +40 -46
- package/dist/es/StateProvider.js +2 -2
- package/dist/es/Tags-1c2d6c4d.js +869 -0
- package/dist/es/Title-863dfa42.js +1 -1
- package/dist/es/ToggleButton.js +32 -37
- package/dist/es/{index-285a43a6.js → index-5509c0bc.js} +8 -6
- package/dist/es/index.js +20 -19
- package/dist/es/initReactivesearch.js +0 -3
- package/dist/es/install.js +20 -19
- package/dist/es/ssr-03607d84.js +1 -1
- package/dist/es/version.js +1 -1
- package/dist/es/{vueTypes-e4af6fe2.js → vueTypes-66ebc93e.js} +3 -2
- package/package.json +10 -10
- package/dist/cjs/Button-626c5e8e.js +0 -58
- package/dist/cjs/Card-c381ded3.js +0 -26
- package/dist/cjs/Container-29f049b2.js +0 -12
- package/dist/cjs/DataSearch-7c71ec9f.js +0 -2043
- package/dist/cjs/Flex-d5675ea6.js +0 -48
- package/dist/cjs/FormControlList-cf1ff2ca.js +0 -42
- package/dist/cjs/Input-4d278ca0.js +0 -74
- package/dist/cjs/ListItem-c067bc07.js +0 -41
- package/dist/cjs/Title-8802a218.js +0 -12
- package/dist/cjs/ssr-eb901d09.js +0 -35
- package/dist/es/Button-ebafa3d6.js +0 -52
- package/dist/es/DataSearch-4f9a4e46.js +0 -2028
- package/dist/es/Flex-a08e22d7.js +0 -46
- package/dist/es/FormControlList-fa5cf78b.js +0 -38
- package/dist/es/Input-3b8408a6.js +0 -69
|
@@ -5,35 +5,37 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
|
|
|
5
5
|
var configureStore = require('@appbaseio/reactivecore');
|
|
6
6
|
var configureStore__default = _interopDefault(configureStore);
|
|
7
7
|
var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
|
|
8
|
-
var vue = require('vue');
|
|
9
8
|
var VueTypes = _interopDefault(require('vue-types'));
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
9
|
+
var emotion = require('emotion');
|
|
10
|
+
var styled = require('@appbaseio/vue-emotion');
|
|
11
|
+
var styled__default = _interopDefault(styled);
|
|
12
|
+
var vueTypes = require('./vueTypes-b7007f5f.js');
|
|
13
|
+
var index = require('./index-de136c17.js');
|
|
14
|
+
var _mergeJSXProps = _interopDefault(require('@vue/babel-helper-vue-jsx-merge-props'));
|
|
15
|
+
var CancelSvg = require('./CancelSvg-220a7cc3.js');
|
|
16
|
+
var Input = require('./Input-ead4cd84.js');
|
|
15
17
|
var suggestions = require('@appbaseio/reactivecore/lib/utils/suggestions');
|
|
16
18
|
|
|
17
|
-
var _templateObject, _templateObject2;
|
|
18
|
-
var small = "\n\tmin-height: 0;\n\theight: 30px;\n\tborder: 0;\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n\tborder-radius: 2px;\n";
|
|
19
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
20
|
+
var small = emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tmin-height: 0;\n\theight: 30px;\n\tborder: 0;\n\tbox-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n\tborder-radius: 2px;\n"])));
|
|
19
21
|
var dark = function dark(_ref) {
|
|
20
22
|
var theme = _ref.theme;
|
|
21
|
-
return "\n\tbackground-color: "
|
|
23
|
+
return emotion.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tborder-color: ", ";\n\tcolor: ", ";\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n"])), theme.colors.backgroundColor, theme.colors.borderColor, theme.colors.textColor, theme.colors.backgroundColor);
|
|
22
24
|
};
|
|
23
|
-
var Select =
|
|
25
|
+
var Select = styled__default('button')(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 42px;\n\tborder-radius: 0;\n\toutline: none;\n\tpadding: 5px 12px;\n\tfont-size: 0.9rem;\n\tline-height: 1.2rem;\n\tbackground-color: #fff;\n\tborder: 1px solid #ccc;\n\tcolor: #424242;\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: all 0.3s ease;\n\n\t", ";\n\n\t& > div {\n\t\twidth: calc(100% - 24px);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-align: left;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: #fcfcfc;\n\t}\n\n\t", ";\n"])), function (props) {
|
|
24
26
|
return props.small ? small : null;
|
|
25
27
|
}, function (_ref2) {
|
|
26
28
|
var themePreset = _ref2.themePreset;
|
|
27
29
|
return themePreset === 'dark' && dark;
|
|
28
30
|
});
|
|
29
|
-
var Tick =
|
|
31
|
+
var Tick = styled__default('span')(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: inline-block;\n\tposition: relative;\n\tuser-select: none;\n\talign-items: center;\n\n\t&::after {\n\t\tbox-sizing: content-box;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbackground-color: transparent;\n\t\ttop: 50%;\n\t\tleft: 0;\n\t\twidth: 8px;\n\t\theight: 4px;\n\t\tmargin-top: -4px;\n\t\tborder-style: solid;\n\t\tborder-color: ", ";\n\t\tborder-width: 0 0 2px 2px;\n\t\tborder-radius: 0;\n\t\tborder-image: none;\n\t\ttransform: rotate(-45deg) scale(1);\n\t\ttransition: all 200ms ease-out;\n\t}\n"])), function (_ref3) {
|
|
30
32
|
var theme = _ref3.theme;
|
|
31
33
|
return theme.colors.primaryColor;
|
|
32
34
|
});
|
|
33
35
|
|
|
34
|
-
var _templateObject$1;
|
|
35
|
-
var open = "\n\ttop: 0.55em;\n\ttransform: rotate(-45deg);\n";
|
|
36
|
-
var Chevron =
|
|
36
|
+
var _templateObject$1, _templateObject2$1;
|
|
37
|
+
var open = emotion.css(_templateObject$1 || (_templateObject$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\ttop: 0.55em;\n\ttransform: rotate(-45deg);\n"])));
|
|
38
|
+
var Chevron = styled__default('span')(_templateObject2$1 || (_templateObject2$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t&::before {\n\t\tcontent: '';\n\t\tborder-style: solid;\n\t\tborder-width: 0.15em 0.15em 0 0;\n\t\tdisplay: inline-block;\n\t\theight: 0.45em;\n\t\tposition: relative;\n\t\ttop: 0.35em;\n\t\tleft: 0;\n\t\ttransform: rotate(135deg);\n\t\tvertical-align: top;\n\t\twidth: 0.45em;\n\n\t\t", ";\n\t}\n"])), function (props) {
|
|
37
39
|
return props.open ? open : null;
|
|
38
40
|
});
|
|
39
41
|
|
|
@@ -78,6 +80,7 @@ var Dropdown = {
|
|
|
78
80
|
},
|
|
79
81
|
render: function render() {
|
|
80
82
|
var _this = this;
|
|
83
|
+
var h = arguments[0];
|
|
81
84
|
var _this$$props = this.$props,
|
|
82
85
|
items = _this$$props.items,
|
|
83
86
|
selectedItem = _this$$props.selectedItem,
|
|
@@ -104,11 +107,13 @@ var Dropdown = {
|
|
|
104
107
|
}
|
|
105
108
|
return false;
|
|
106
109
|
});
|
|
107
|
-
return
|
|
108
|
-
"
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
110
|
+
return h(CancelSvg.Downshift, {
|
|
111
|
+
"attrs": {
|
|
112
|
+
"isOpen": this.$data.isOpen,
|
|
113
|
+
"selectedItem": selectedItem,
|
|
114
|
+
"handleChange": this.onChange,
|
|
115
|
+
"handleMouseup": this.handleStateChange
|
|
116
|
+
},
|
|
112
117
|
"scopedSlots": {
|
|
113
118
|
"default": function _default(_ref) {
|
|
114
119
|
var getItemProps = _ref.getItemProps,
|
|
@@ -117,30 +122,29 @@ var Dropdown = {
|
|
|
117
122
|
getButtonProps = _ref.getButtonProps,
|
|
118
123
|
getItemEvents = _ref.getItemEvents,
|
|
119
124
|
getInputEvents = _ref.getInputEvents;
|
|
120
|
-
return
|
|
125
|
+
return h("div", {
|
|
121
126
|
"class": Input.suggestionsContainer
|
|
122
|
-
}, [
|
|
123
|
-
on: _rollupPluginBabelHelpers._extends({}, getButtonProps({
|
|
127
|
+
}, [h(Select, {
|
|
128
|
+
"on": _rollupPluginBabelHelpers._extends({}, _rollupPluginBabelHelpers._extends({}, getButtonProps({
|
|
124
129
|
onClick: _this.toggle
|
|
125
|
-
}))
|
|
126
|
-
}, {
|
|
130
|
+
}))),
|
|
127
131
|
"class": getClassName(_this.$props.innerClass, 'select') || '',
|
|
128
|
-
"
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
"default": function _default() {
|
|
133
|
-
return [customLabelRenderer ? customLabelRenderer(selectedItem) : vue.createVNode("div", null, [selectedItem ? _this.renderToString(selectedItem) : placeholder]), vue.createVNode(Chevron, {
|
|
134
|
-
"open": isOpen
|
|
135
|
-
}, null)];
|
|
132
|
+
"attrs": {
|
|
133
|
+
"title": selectedItem ? _this.renderToString(selectedItem) : placeholder,
|
|
134
|
+
"small": _this.$props.small,
|
|
135
|
+
"themePreset": _this.$props.themePreset
|
|
136
136
|
}
|
|
137
|
-
}),
|
|
137
|
+
}, [customLabelRenderer ? customLabelRenderer(selectedItem) : h("div", [selectedItem ? _this.renderToString(selectedItem) : placeholder]), h(Chevron, {
|
|
138
|
+
"attrs": {
|
|
139
|
+
"open": isOpen
|
|
140
|
+
}
|
|
141
|
+
})]), hasCustomRenderer ? customRenderer(itemsToRender, {
|
|
138
142
|
getItemProps: getItemProps,
|
|
139
143
|
isOpen: isOpen,
|
|
140
144
|
highlightedIndex: highlightedIndex,
|
|
141
145
|
getButtonProps: getButtonProps,
|
|
142
146
|
getItemEvents: getItemEvents
|
|
143
|
-
}) : isOpen && itemsToRender.length ?
|
|
147
|
+
}) : isOpen && itemsToRender.length ? h("ul", {
|
|
144
148
|
"class": Input.suggestions(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName(_this.$props.innerClass, 'list')
|
|
145
149
|
}, [_this.$props.showSearch ? _this.renderSearchbox({
|
|
146
150
|
on: {
|
|
@@ -155,35 +159,35 @@ var Dropdown = {
|
|
|
155
159
|
return value[labelField] === item[labelField];
|
|
156
160
|
}));
|
|
157
161
|
if (!_this.$props.multi) selected = item.key === selectedItem;
|
|
158
|
-
return
|
|
159
|
-
domProps: getItemProps({
|
|
162
|
+
return h("li", {
|
|
163
|
+
"domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
|
|
160
164
|
item: item
|
|
161
|
-
})
|
|
162
|
-
|
|
163
|
-
on: getItemEvents({
|
|
165
|
+
})),
|
|
166
|
+
"on": _rollupPluginBabelHelpers._extends({}, getItemEvents({
|
|
164
167
|
item: item
|
|
165
|
-
})
|
|
166
|
-
}, {
|
|
168
|
+
})),
|
|
167
169
|
"key": item[keyField],
|
|
168
170
|
"class": "" + (selected ? 'active' : ''),
|
|
169
171
|
"style": {
|
|
170
172
|
backgroundColor: _this.getBackgroundColor(highlightedIndex === index, selected)
|
|
171
173
|
}
|
|
172
|
-
}
|
|
174
|
+
}, [renderItem ? renderItem({
|
|
173
175
|
label: item[labelField],
|
|
174
176
|
count: item.doc_count,
|
|
175
177
|
isChecked: selected && _this.$props.multi
|
|
176
|
-
}) :
|
|
177
|
-
"
|
|
178
|
-
|
|
178
|
+
}) : h("div", [typeof item[labelField] === 'string' ? h("span", {
|
|
179
|
+
"domProps": {
|
|
180
|
+
"innerHTML": item[labelField]
|
|
181
|
+
}
|
|
182
|
+
}) : item[labelField], _this.$props.showCount && item.doc_count && h("span", {
|
|
179
183
|
"class": getClassName(_this.$props.innerClass, 'count') || ''
|
|
180
|
-
}, [
|
|
184
|
+
}, ["\xA0(", item.doc_count, ")"])]), selected && _this.$props.multi ? h(Tick, {
|
|
181
185
|
"class": getClassName(_this.$props.innerClass, 'icon') || ''
|
|
182
|
-
}
|
|
186
|
+
}) : null]);
|
|
183
187
|
}), footer]) : null]);
|
|
184
188
|
}
|
|
185
189
|
}
|
|
186
|
-
}
|
|
190
|
+
});
|
|
187
191
|
},
|
|
188
192
|
methods: {
|
|
189
193
|
toggle: function toggle() {
|
|
@@ -251,52 +255,49 @@ var Dropdown = {
|
|
|
251
255
|
return value;
|
|
252
256
|
},
|
|
253
257
|
renderNoResult: function renderNoResult() {
|
|
254
|
-
var
|
|
255
|
-
|
|
258
|
+
var h = this.$createElement;
|
|
259
|
+
var renderNoResults = this.$scopedSlots.renderNoResults || this.$props.renderNoResults;
|
|
260
|
+
return h("p", {
|
|
256
261
|
"class": getClassName(this.$props.innerClass, 'noResults') || null
|
|
257
262
|
}, [index.isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
|
|
258
263
|
},
|
|
259
264
|
renderSearchbox: function renderSearchbox(eventObject) {
|
|
260
|
-
var
|
|
265
|
+
var h = this.$createElement;
|
|
261
266
|
var _this$$props2 = this.$props,
|
|
262
267
|
componentId = _this$$props2.componentId,
|
|
263
268
|
searchPlaceholder = _this$$props2.searchPlaceholder,
|
|
264
269
|
showClear = _this$$props2.showClear,
|
|
265
270
|
themePreset = _this$$props2.themePreset,
|
|
266
271
|
innerClass = _this$$props2.innerClass;
|
|
267
|
-
var InputComponent =
|
|
268
|
-
"
|
|
272
|
+
var InputComponent = h(Input.Input, _mergeJSXProps([{
|
|
273
|
+
"attrs": {
|
|
274
|
+
"id": componentId + "-input",
|
|
275
|
+
"showIcon": false,
|
|
276
|
+
"showClear": showClear,
|
|
277
|
+
"placeholder": searchPlaceholder,
|
|
278
|
+
"value": this.$data.searchTerm,
|
|
279
|
+
"themePreset": themePreset
|
|
280
|
+
},
|
|
269
281
|
"style": {
|
|
270
282
|
border: 0,
|
|
271
283
|
borderBottom: '1px solid #ddd'
|
|
272
284
|
},
|
|
273
|
-
"
|
|
274
|
-
|
|
275
|
-
"class": getClassName(innerClass, 'input'),
|
|
276
|
-
"placeholder": searchPlaceholder,
|
|
277
|
-
"value": this.$data.searchTerm,
|
|
278
|
-
"themePreset": themePreset
|
|
279
|
-
}, eventObject), null);
|
|
285
|
+
"class": getClassName(innerClass, 'input')
|
|
286
|
+
}, eventObject]));
|
|
280
287
|
if (showClear) {
|
|
281
|
-
return
|
|
282
|
-
"
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
"positionType": "absolute"
|
|
286
|
-
}, {
|
|
287
|
-
"default": function _default() {
|
|
288
|
-
return [vue.createVNode(CancelSvg.IconWrapper, {
|
|
289
|
-
"onClick": _this3.clearSearchTerm,
|
|
290
|
-
"isClearIcon": true
|
|
291
|
-
}, {
|
|
292
|
-
"default": function _default() {
|
|
293
|
-
return [vue.createVNode(CancelSvg.CancelSvg, null, null)];
|
|
294
|
-
}
|
|
295
|
-
})];
|
|
296
|
-
}
|
|
297
|
-
})];
|
|
288
|
+
return h(CancelSvg.InputWrapper, [InputComponent, this.searchTerm && h(CancelSvg.IconGroup, {
|
|
289
|
+
"attrs": {
|
|
290
|
+
"groupPosition": "right",
|
|
291
|
+
"positionType": "absolute"
|
|
298
292
|
}
|
|
299
|
-
}
|
|
293
|
+
}, [h(CancelSvg.IconWrapper, {
|
|
294
|
+
"on": {
|
|
295
|
+
"click": this.clearSearchTerm
|
|
296
|
+
},
|
|
297
|
+
"attrs": {
|
|
298
|
+
"isClearIcon": true
|
|
299
|
+
}
|
|
300
|
+
}, [h(CancelSvg.CancelSvg)])])]);
|
|
300
301
|
}
|
|
301
302
|
return InputComponent;
|
|
302
303
|
}
|
|
@@ -7,18 +7,17 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
|
|
|
7
7
|
var configureStore = require('@appbaseio/reactivecore');
|
|
8
8
|
var configureStore__default = _interopDefault(configureStore);
|
|
9
9
|
var constants = require('@appbaseio/reactivecore/lib/utils/constants');
|
|
10
|
-
require('./_rollupPluginBabelHelpers-f8b843f8.js');
|
|
11
|
-
var vue = require('vue');
|
|
10
|
+
var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
|
|
12
11
|
var VueTypes = _interopDefault(require('vue-types'));
|
|
13
12
|
require('@appbaseio/vue-emotion');
|
|
14
|
-
var vueTypes = require('./vueTypes-
|
|
13
|
+
var vueTypes = require('./vueTypes-b7007f5f.js');
|
|
15
14
|
require('redux');
|
|
16
|
-
var index = require('./index-
|
|
17
|
-
var PreferencesConsumer = require('./PreferencesConsumer-
|
|
18
|
-
var Title = require('./Title-
|
|
19
|
-
var Container = require('./Container-
|
|
15
|
+
var index = require('./index-de136c17.js');
|
|
16
|
+
var PreferencesConsumer = require('./PreferencesConsumer-5e6e84a2.js');
|
|
17
|
+
var Title = require('./Title-16042ea0.js');
|
|
18
|
+
var Container = require('./Container-e699ea95.js');
|
|
20
19
|
var NoSSR = _interopDefault(require('vue-no-ssr'));
|
|
21
|
-
var ssr = require('./ssr-
|
|
20
|
+
var ssr = require('./ssr-f2fc1bf6.js');
|
|
22
21
|
|
|
23
22
|
var addComponent = configureStore.Actions.addComponent,
|
|
24
23
|
removeComponent = configureStore.Actions.removeComponent,
|
|
@@ -70,6 +69,7 @@ var DynamicRangeSlider = {
|
|
|
70
69
|
},
|
|
71
70
|
created: function created() {
|
|
72
71
|
var _this = this;
|
|
72
|
+
this.$timestamp = new Date().getTime();
|
|
73
73
|
var onQueryChange = function onQueryChange() {
|
|
74
74
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
75
75
|
args[_key] = arguments[_key];
|
|
@@ -98,8 +98,8 @@ var DynamicRangeSlider = {
|
|
|
98
98
|
}
|
|
99
99
|
var value = this.$props.value;
|
|
100
100
|
if (this.destroyOnUnmount || components.indexOf(this.componentId) === -1) {
|
|
101
|
-
this.addComponent(this.componentId);
|
|
102
|
-
this.addComponent(this.internalRangeComponent);
|
|
101
|
+
this.addComponent(this.componentId, this.$timestamp);
|
|
102
|
+
this.addComponent(this.internalRangeComponent, this.$timestamp);
|
|
103
103
|
if (Array.isArray(this.selectedValue)) {
|
|
104
104
|
this.handleChange(this.selectedValue);
|
|
105
105
|
} else if (this.selectedValue) {
|
|
@@ -117,7 +117,7 @@ var DynamicRangeSlider = {
|
|
|
117
117
|
this.setDefaultValue(this.range);
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
|
-
|
|
120
|
+
beforeDestroy: function beforeDestroy() {
|
|
121
121
|
if (this.destroyOnUnmount) {
|
|
122
122
|
this.removeComponent(this.$props.componentId);
|
|
123
123
|
this.removeComponent(this.internalRangeComponent);
|
|
@@ -125,7 +125,7 @@ var DynamicRangeSlider = {
|
|
|
125
125
|
},
|
|
126
126
|
methods: {
|
|
127
127
|
isControlled: function isControlled() {
|
|
128
|
-
if (this.$props.value && this.$
|
|
128
|
+
if (this.$props.value && this.$listeners) {
|
|
129
129
|
return true;
|
|
130
130
|
}
|
|
131
131
|
return false;
|
|
@@ -304,54 +304,41 @@ var DynamicRangeSlider = {
|
|
|
304
304
|
}
|
|
305
305
|
},
|
|
306
306
|
render: function render() {
|
|
307
|
-
var
|
|
307
|
+
var h = arguments[0];
|
|
308
308
|
if (!this.range || !this.currentValue) {
|
|
309
309
|
return null;
|
|
310
310
|
}
|
|
311
311
|
var _this$range = this.range,
|
|
312
312
|
start = _this$range.start,
|
|
313
313
|
end = _this$range.end;
|
|
314
|
-
return
|
|
314
|
+
return h(Container.Container, {
|
|
315
315
|
"class": this.$props.className
|
|
316
|
-
}, {
|
|
317
|
-
"
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
}), null), _this4.labels ? vue.createVNode("div", {
|
|
343
|
-
"class": "label-container"
|
|
344
|
-
}, [vue.createVNode("label", {
|
|
345
|
-
"class": getClassName(_this4.$props.innerClass, 'label') || 'range-label-left'
|
|
346
|
-
}, [_this4.labels.start]), vue.createVNode("label", {
|
|
347
|
-
"class": getClassName(_this4.$props.innerClass, 'label') || 'range-label-right'
|
|
348
|
-
}, [_this4.labels.end])]) : null];
|
|
349
|
-
}
|
|
350
|
-
})];
|
|
351
|
-
}
|
|
352
|
-
})];
|
|
353
|
-
}
|
|
354
|
-
});
|
|
316
|
+
}, [this.$props.title && h(Title.Title, {
|
|
317
|
+
"class": getClassName(this.$props.innerClass, 'title')
|
|
318
|
+
}, [this.$props.title]), h(NoSSR, [h(ssr.Slider, {
|
|
319
|
+
"class": getClassName(this.$props.innerClass, 'slider')
|
|
320
|
+
}, [h("vue-slider-component", {
|
|
321
|
+
"ref": "slider",
|
|
322
|
+
"attrs": {
|
|
323
|
+
"value": [Math.floor(Math.max(start, this.currentValue[0])), Math.ceil(Math.min(end, this.currentValue[1]))],
|
|
324
|
+
"min": Math.floor(Math.min(start, this.currentValue[0])),
|
|
325
|
+
"max": Math.ceil(Math.max(end, this.currentValue[1])),
|
|
326
|
+
"dotSize": 20,
|
|
327
|
+
"height": 4,
|
|
328
|
+
"enable-cross": false,
|
|
329
|
+
"tooltip": "always"
|
|
330
|
+
},
|
|
331
|
+
"on": {
|
|
332
|
+
"drag-end": this.handleSlider
|
|
333
|
+
},
|
|
334
|
+
"props": _rollupPluginBabelHelpers._extends({}, this.$props.sliderOptions)
|
|
335
|
+
}), this.labels ? h("div", {
|
|
336
|
+
"class": "label-container"
|
|
337
|
+
}, [h("label", {
|
|
338
|
+
"class": getClassName(this.$props.innerClass, 'label') || 'range-label-left'
|
|
339
|
+
}, [this.labels.start]), h("label", {
|
|
340
|
+
"class": getClassName(this.$props.innerClass, 'label') || 'range-label-right'
|
|
341
|
+
}, [this.labels.end])]) : null])])]);
|
|
355
342
|
}
|
|
356
343
|
};
|
|
357
344
|
DynamicRangeSlider.defaultQuery = function (values, props) {
|
|
@@ -425,13 +412,16 @@ var mapDispatchtoProps = {
|
|
|
425
412
|
updateComponentProps: updateComponentProps
|
|
426
413
|
};
|
|
427
414
|
var RangeConnected = PreferencesConsumer.PreferencesConsumer(index.connect(mapStateToProps, mapDispatchtoProps)(DynamicRangeSlider));
|
|
415
|
+
RangeConnected.defaultQuery = DynamicRangeSlider.defaultQuery;
|
|
416
|
+
RangeConnected.parseValue = DynamicRangeSlider.parseValue;
|
|
417
|
+
RangeConnected.hasInternalComponent = DynamicRangeSlider.hasInternalComponent;
|
|
428
418
|
RangeConnected.name = DynamicRangeSlider.name;
|
|
429
|
-
RangeConnected.install = function (Vue) {
|
|
430
|
-
Vue.component(RangeConnected.name, RangeConnected);
|
|
431
|
-
};
|
|
432
419
|
|
|
433
420
|
// Add componentType for SSR
|
|
434
421
|
RangeConnected.componentType = constants.componentTypes.dynamicRangeSlider;
|
|
422
|
+
RangeConnected.install = function (Vue) {
|
|
423
|
+
Vue.component(RangeConnected.name, RangeConnected);
|
|
424
|
+
};
|
|
435
425
|
|
|
436
426
|
exports.RangeConnected = RangeConnected;
|
|
437
427
|
exports.default = RangeConnected;
|
|
@@ -0,0 +1,50 @@
|
|
|
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-f8b843f8.js');
|
|
6
|
+
var emotion = require('emotion');
|
|
7
|
+
var styled = require('@appbaseio/vue-emotion');
|
|
8
|
+
var styled__default = _interopDefault(styled);
|
|
9
|
+
var polished = require('polished');
|
|
10
|
+
|
|
11
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
12
|
+
var leftLabel = emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tflex-direction: row;\n\talign-items: center;\n"])));
|
|
13
|
+
var rightLabel = emotion.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tflex-direction: row-reverse;\n\talign-items: center;\n"])));
|
|
14
|
+
var topLabel = emotion.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tflex-direction: column;\n"])));
|
|
15
|
+
var bottomLabel = emotion.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tflex-direction: column-reverse;\n"])));
|
|
16
|
+
var border = function border(_ref) {
|
|
17
|
+
var colors = _ref.theme.colors;
|
|
18
|
+
return emotion.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tborder: 1px solid ", ";\n"])), colors.borderColor || '#ccc');
|
|
19
|
+
};
|
|
20
|
+
var Flex = styled__default('div')(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: ", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\n\tsvg.cancel-icon {\n\t\tcursor: pointer;\n\t\tfill: ", ";\n\t\tflex-basis: 30px;\n\n\t\t&:hover {\n\t\t\tfill: ", ";\n\t\t}\n\t}\n"])), function (props) {
|
|
21
|
+
return props.inline ? 'inline-flex' : 'flex';
|
|
22
|
+
}, function (props) {
|
|
23
|
+
return (props.labelPosition === 'left' || props.iconPosition === 'right') && leftLabel;
|
|
24
|
+
}, function (props) {
|
|
25
|
+
return (props.labelPosition === 'right' || props.iconPosition === 'left') && rightLabel;
|
|
26
|
+
}, function (props) {
|
|
27
|
+
return props.labelPosition === 'top' && topLabel;
|
|
28
|
+
}, function (props) {
|
|
29
|
+
return props.labelPosition === 'bottom' && bottomLabel;
|
|
30
|
+
}, function (props) {
|
|
31
|
+
return props.showBorder && border;
|
|
32
|
+
}, function (props) {
|
|
33
|
+
return props.justifyContent && emotion.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tjustify-content: ", ";\n\t\t"])), props.justifyContent);
|
|
34
|
+
}, function (props) {
|
|
35
|
+
return props.alignItems && emotion.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\talign-items: ", ";\n\t\t"])), props.alignItems);
|
|
36
|
+
}, function (props) {
|
|
37
|
+
return props.flex && emotion.css(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tflex: ", ";\n\t\t"])), props.flex);
|
|
38
|
+
}, function (props) {
|
|
39
|
+
return props.direction && emotion.css(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tflex-direction: ", ";\n\t\t"])), props.direction);
|
|
40
|
+
}, function (props) {
|
|
41
|
+
return props.basis && emotion.css(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tflex-basis: ", ";\n\t\t"])), props.basis);
|
|
42
|
+
}, function (_ref2) {
|
|
43
|
+
var colors = _ref2.theme.colors;
|
|
44
|
+
return colors.borderColor || polished.lighten(0.3, colors.textColor);
|
|
45
|
+
}, function (_ref3) {
|
|
46
|
+
var theme = _ref3.theme;
|
|
47
|
+
return theme.colors.textColor;
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
exports.Flex = Flex;
|
|
@@ -0,0 +1,45 @@
|
|
|
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-f8b843f8.js');
|
|
6
|
+
var emotion = require('emotion');
|
|
7
|
+
var styled = require('@appbaseio/vue-emotion');
|
|
8
|
+
var styled__default = _interopDefault(styled);
|
|
9
|
+
var polished = require('polished');
|
|
10
|
+
|
|
11
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
12
|
+
var item = {
|
|
13
|
+
width: '15px',
|
|
14
|
+
height: '15px',
|
|
15
|
+
scale: '4px'
|
|
16
|
+
};
|
|
17
|
+
var vh = emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tborder: 0;\n\tclip: rect(1px, 1px, 1px, 1px);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twidth: 1px;\n\twhite-space: nowrap;\n"])));
|
|
18
|
+
var hideInputControl = emotion.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t+ label {\n\t\tpadding-left: 0;\n\n\t\t&::before,\n\t\t&::after {\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder: 0;\n\t\t\tmargin: 0;\n\t\t\tvisibility: hidden;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t+ label {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n"])));
|
|
19
|
+
var formItem = function formItem(_ref) {
|
|
20
|
+
var theme = _ref.theme;
|
|
21
|
+
return emotion.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\n\t&:focus {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tbox-shadow: 0 0 0 2px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t&:hover {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t&:active {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\ttransition-duration: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t+ label {\n\t\tposition: relative;\n\t\tuser-select: none;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t&::before {\n\t\t\tbackground-color: #fff;\n\t\t\tborder: 1px solid ", ";\n\t\t\tbox-sizing: content-box;\n\t\t\tcontent: '';\n\t\t\tcolor: ", ";\n\t\t\tmargin-right: calc(", " * 0.5);\n\t\t\ttop: 50%;\n\t\t\tleft: 0;\n\t\t\twidth: ", ";\n\t\t\theight: ", ";\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: middle;\n\t\t}\n\n\t\t&::after {\n\t\t\tbox-sizing: content-box;\n\t\t\tcontent: '';\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tleft: calc(1px + ", " / 2);\n\t\t\twidth: calc(", " - ", ");\n\t\t\theight: calc(", " - ", ");\n\t\t\tmargin-top: calc(", " / -2 - ", " / -2);\n\t\t\ttransform: scale(0);\n\t\t\ttransform-origin: 50%;\n\t\t\ttransition: transform 200ms ease-out;\n\t\t}\n\t}\n"])), vh, polished.lighten(0.4, theme.colors.primaryColor), theme.colors.primaryColor, theme.colors.borderColor || polished.lighten(0.1, theme.colors.textColor), theme.colors.primaryColor, item.width, item.width, item.height, theme.colors.primaryColor, item.scale, item.width, item.scale, item.height, item.scale, item.height, item.scale);
|
|
22
|
+
};
|
|
23
|
+
var Radio = styled__default('input')(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t+ label {\n\t\t&::before,\n\t\t&::after {\n\t\t\tborder-radius: 50%;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t&:active,\n\t\t&:focus {\n\t\t\t+ label {\n\t\t\t\tcolor: ", ";\n\n\t\t\t\t&::before {\n\t\t\t\t\tanimation: none;\n\t\t\t\t\tfilter: none;\n\t\t\t\t\ttransition: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tanimation: none;\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tborder-color: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n"])), formItem, function (props) {
|
|
24
|
+
return props.show ? null : hideInputControl;
|
|
25
|
+
}, function (_ref2) {
|
|
26
|
+
var theme = _ref2.theme;
|
|
27
|
+
return theme.colors.primaryColor;
|
|
28
|
+
}, function (_ref3) {
|
|
29
|
+
var theme = _ref3.theme;
|
|
30
|
+
return theme.colors.primaryColor;
|
|
31
|
+
});
|
|
32
|
+
var Checkbox = styled__default('input')(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t+ label {\n\t\t&::before,\n\t\t&::after {\n\t\t\tborder-radius: 0;\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\ttop: 50%;\n\t\t\tleft: calc(1px + ", " / 5);\n\t\t\twidth: calc(", " / 2);\n\t\t\theight: calc(", " / 5);\n\t\t\tmargin-top: calc(", " / -2 / 2 * 0.8);\n\t\t\tborder-style: solid;\n\t\t\tborder-color: ", ";\n\t\t\tborder-width: 0 0 2px 2px;\n\t\t\tborder-radius: 0;\n\t\t\tborder-image: none;\n\t\t\ttransform: rotate(-45deg) scale(0);\n\t\t\ttransition: none;\n\t\t}\n\t}\n\n\t&:checked {\n\t\t+ label {\n\t\t\t&::before {\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\ttransform: rotate(-45deg) scale(1);\n\t\t\t\ttransition: transform 200ms ease-out;\n\t\t\t}\n\t\t}\n\t}\n"])), formItem, function (props) {
|
|
33
|
+
return props.show ? null : hideInputControl;
|
|
34
|
+
}, item.width, item.width, item.width, item.height, function (_ref4) {
|
|
35
|
+
var theme = _ref4.theme;
|
|
36
|
+
return theme.colors.primaryColor;
|
|
37
|
+
}, function (_ref5) {
|
|
38
|
+
var theme = _ref5.theme;
|
|
39
|
+
return theme.colors.primaryColor;
|
|
40
|
+
});
|
|
41
|
+
var UL = styled__default('ul')(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tmax-height: 240px;\n\tposition: relative;\n\toverflow-y: auto;\n\tpadding-bottom: 12px;\n\n\tli {\n\t\theight 30px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding-left: 2px;\n\t}\n"])));
|
|
42
|
+
|
|
43
|
+
exports.Checkbox = Checkbox;
|
|
44
|
+
exports.Radio = Radio;
|
|
45
|
+
exports.UL = UL;
|
|
@@ -0,0 +1,77 @@
|
|
|
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-f8b843f8.js');
|
|
6
|
+
var emotion = require('emotion');
|
|
7
|
+
var styled = require('@appbaseio/vue-emotion');
|
|
8
|
+
var styled__default = _interopDefault(styled);
|
|
9
|
+
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
|
11
|
+
var alertBorder = function alertBorder(_ref) {
|
|
12
|
+
var theme = _ref.theme;
|
|
13
|
+
return emotion.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tborder: 1px solid ", ";\n"])), theme.colors.alertColor);
|
|
14
|
+
};
|
|
15
|
+
var input = emotion.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\twidth: 100%;\n\tline-height: 1.5;\n\tmin-height: 42px;\n\tpadding: 8px 12px;\n\tborder: 1px solid #ccc;\n\tbackground-color: #fafafa;\n\tfont-size: 0.9rem;\n\toutline: none;\n\theight: 100%;\n\n\t&:focus {\n\t\tbackground-color: #fff;\n\t}\n"])));
|
|
16
|
+
var dark = function dark(theme) {
|
|
17
|
+
return emotion.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tborder-color: ", ";\n"])), theme.colors.borderColor);
|
|
18
|
+
};
|
|
19
|
+
var darkInput = function darkInput(_ref2) {
|
|
20
|
+
var theme = _ref2.theme;
|
|
21
|
+
return emotion.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tbackground-color: ", ";\n\tcolor: ", ";\n\t", ";\n\n\t&:focus {\n\t\tbackground-color: ", ";\n\t}\n"])), theme.colors.backgroundColor, theme.colors.textColor, dark(theme), theme.colors.backgroundColor);
|
|
22
|
+
};
|
|
23
|
+
var Input = styled__default('input')(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t", ";\n\n\t", ";\n\n\t", ";\n\t", ";\n\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n"])), input, function (_ref3) {
|
|
24
|
+
var themePreset = _ref3.themePreset,
|
|
25
|
+
theme = _ref3.theme;
|
|
26
|
+
return themePreset === 'dark' && darkInput({
|
|
27
|
+
theme: theme
|
|
28
|
+
});
|
|
29
|
+
}, function (props) {
|
|
30
|
+
return props.showIcon && props.iconPosition === 'left' && emotion.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-left: 36px;\n\t\t"])));
|
|
31
|
+
}, function (props) {
|
|
32
|
+
return props.showIcon && props.iconPosition === 'right' && emotion.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 36px;\n\t\t"])));
|
|
33
|
+
}, function (props) {
|
|
34
|
+
return (
|
|
35
|
+
// for clear icon
|
|
36
|
+
props.showClear && emotion.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 36px;\n\t\t"])))
|
|
37
|
+
);
|
|
38
|
+
}, function (props) {
|
|
39
|
+
return (
|
|
40
|
+
// for voice search icon
|
|
41
|
+
props.showVoiceSearch && emotion.css(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 36px;\n\t\t"])))
|
|
42
|
+
);
|
|
43
|
+
}, function (props) {
|
|
44
|
+
return (
|
|
45
|
+
// for clear icon with search icon
|
|
46
|
+
props.showClear && props.showIcon && props.iconPosition === 'right' && emotion.css(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 66px;\n\t\t"])))
|
|
47
|
+
);
|
|
48
|
+
}, function (props) {
|
|
49
|
+
return (
|
|
50
|
+
// for voice search icon with search icon
|
|
51
|
+
props.showVoiceSearch && props.showIcon && props.iconPosition === 'right' && emotion.css(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 66px;\n\t\t"])))
|
|
52
|
+
);
|
|
53
|
+
}, function (props) {
|
|
54
|
+
return (
|
|
55
|
+
// for voice search icon with clear icon
|
|
56
|
+
props.showVoiceSearch && props.showIcon && emotion.css(_templateObject12 || (_templateObject12 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 66px;\n\t\t"])))
|
|
57
|
+
);
|
|
58
|
+
}, function (props) {
|
|
59
|
+
return (
|
|
60
|
+
// for clear icon with search icon and voice search
|
|
61
|
+
props.showClear && props.showIcon && props.showVoiceSearch && props.iconPosition === 'right' && emotion.css(_templateObject13 || (_templateObject13 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 90px;\n\t\t"])))
|
|
62
|
+
);
|
|
63
|
+
}, function (props) {
|
|
64
|
+
return props.alert && alertBorder;
|
|
65
|
+
});
|
|
66
|
+
var suggestions = function suggestions(themePreset, theme) {
|
|
67
|
+
return emotion.css(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder: 1px solid #ccc;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: min(100vh, 402px);\n\toverflow-y: auto;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tcursor: pointer;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: #eee;\n\t\t}\n\t}\n\n\t", ";\n"])), themePreset === 'dark' && theme && dark(theme));
|
|
68
|
+
};
|
|
69
|
+
var suggestionsContainer = emotion.css(_templateObject15 || (_templateObject15 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tposition: relative;\n\t.cancel-icon {\n\t\tcursor: pointer;\n\t}\n"])));
|
|
70
|
+
var noSuggestions = function noSuggestions(themePreset, theme) {
|
|
71
|
+
return emotion.css(_templateObject16 || (_templateObject16 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder: 1px solid #ccc;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: 260px;\n\toverflow-y: auto;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n\n\t", "\n"])), themePreset === 'dark' && theme && dark(theme));
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
exports.Input = Input;
|
|
75
|
+
exports.noSuggestions = noSuggestions;
|
|
76
|
+
exports.suggestions = suggestions;
|
|
77
|
+
exports.suggestionsContainer = suggestionsContainer;
|