@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.
Files changed (108) hide show
  1. package/dist/@appbaseio/reactivesearch-vue.umd.js +17405 -25231
  2. package/dist/@appbaseio/reactivesearch-vue.umd.js.map +1 -1
  3. package/dist/@appbaseio/reactivesearch-vue.umd.min.js +6 -15
  4. package/dist/@appbaseio/reactivesearch-vue.umd.min.js.map +1 -1
  5. package/dist/cjs/Button-ad042719.js +59 -0
  6. package/dist/cjs/Card-f5ab024a.js +27 -0
  7. package/dist/cjs/{ComponentWrapper-ad3dad02.js → ComponentWrapper-75f88599.js} +42 -56
  8. package/dist/cjs/Container-29f049b2.js +12 -0
  9. package/dist/cjs/DropDown-6cf84c47.js +698 -0
  10. package/dist/cjs/DynamicRangeSlider.js +103 -155
  11. package/dist/cjs/Flex-d5675ea6.js +48 -0
  12. package/dist/cjs/FormControlList-fadd792f.js +42 -0
  13. package/dist/cjs/Input-4b434436.js +74 -0
  14. package/dist/cjs/ListItem-d57d648d.js +42 -0
  15. package/dist/cjs/MultiDropdownList.js +124 -240
  16. package/dist/cjs/MultiList.js +123 -261
  17. package/dist/cjs/MultiRange.js +87 -133
  18. package/dist/cjs/{Pagination-71e85fa9.js → Pagination-b5ddc906.js} +70 -83
  19. package/dist/cjs/PreferencesConsumer-eb265924.js +75 -0
  20. package/dist/cjs/RangeInput.js +163 -171
  21. package/dist/cjs/RangeSlider.js +81 -109
  22. package/dist/cjs/ReactiveBase.js +139 -157
  23. package/dist/cjs/ReactiveComponent-eb8db4c1.js +2189 -0
  24. package/dist/cjs/ReactiveComponent.js +46 -340
  25. package/dist/cjs/ReactiveGoogleMap.js +445 -655
  26. package/dist/cjs/ReactiveList.js +179 -304
  27. package/dist/cjs/ResultCard.js +36 -36
  28. package/dist/cjs/ResultList.js +48 -56
  29. package/dist/cjs/SelectedFilters.js +62 -69
  30. package/dist/cjs/SingleDropdownList.js +117 -177
  31. package/dist/cjs/SingleList.js +121 -205
  32. package/dist/cjs/SingleRange.js +78 -105
  33. package/dist/cjs/StateProvider.js +74 -47
  34. package/dist/cjs/Title-8802a218.js +12 -0
  35. package/dist/cjs/ToggleButton.js +72 -119
  36. package/dist/cjs/{_rollupPluginBabelHelpers-c705cbe6.js → _rollupPluginBabelHelpers-f8b843f8.js} +0 -15
  37. package/dist/cjs/{index-6a167fe0.js → index-d8d8f291.js} +38 -108
  38. package/dist/cjs/index.js +44 -41
  39. package/dist/cjs/initReactivesearch.js +69 -152
  40. package/dist/cjs/install.js +47 -43
  41. package/dist/cjs/ssr-6907ada3.js +66 -0
  42. package/dist/cjs/{utils-d6a52588.js → utils-83fd01e9.js} +7 -16
  43. package/dist/cjs/version.js +1 -1
  44. package/dist/cjs/{vueTypes-727b7c63.js → vueTypes-1bf00978.js} +8 -19
  45. package/dist/es/Button-474510e3.js +53 -0
  46. package/dist/es/{Card-450683f1.js → Card-38cbe652.js} +3 -3
  47. package/dist/es/{ComponentWrapper-424e86fd.js → ComponentWrapper-5166c76a.js} +42 -56
  48. package/dist/es/{Container-ba826e96.js → Container-d00219f7.js} +2 -2
  49. package/dist/es/DropDown-8764360c.js +688 -0
  50. package/dist/es/DynamicRangeSlider.js +103 -155
  51. package/dist/es/Flex-a08e22d7.js +46 -0
  52. package/dist/es/FormControlList-fe6eaee4.js +38 -0
  53. package/dist/es/Input-4a8ef1f3.js +69 -0
  54. package/dist/es/{ListItem-cad14c5e.js → ListItem-16756c02.js} +7 -8
  55. package/dist/es/MultiDropdownList.js +124 -240
  56. package/dist/es/MultiList.js +123 -261
  57. package/dist/es/MultiRange.js +87 -133
  58. package/dist/es/{Pagination-784bf143.js → Pagination-72bd1d9e.js} +70 -83
  59. package/dist/es/PreferencesConsumer-c276709c.js +73 -0
  60. package/dist/es/RangeInput.js +163 -170
  61. package/dist/es/RangeSlider.js +81 -109
  62. package/dist/es/ReactiveBase.js +138 -155
  63. package/dist/es/ReactiveComponent-f9fa5780.js +2183 -0
  64. package/dist/es/ReactiveComponent.js +42 -337
  65. package/dist/es/ReactiveGoogleMap.js +440 -649
  66. package/dist/es/ReactiveList.js +177 -301
  67. package/dist/es/ResultCard.js +36 -36
  68. package/dist/es/ResultList.js +48 -56
  69. package/dist/es/SelectedFilters.js +62 -69
  70. package/dist/es/SingleDropdownList.js +117 -177
  71. package/dist/es/SingleList.js +121 -205
  72. package/dist/es/SingleRange.js +78 -105
  73. package/dist/es/StateProvider.js +75 -48
  74. package/dist/es/{Title-3342664a.js → Title-863dfa42.js} +2 -2
  75. package/dist/es/ToggleButton.js +72 -119
  76. package/dist/es/{_rollupPluginBabelHelpers-76660dab.js → _rollupPluginBabelHelpers-ded08042.js} +0 -15
  77. package/dist/es/{index-7788a843.js → index-4520a598.js} +39 -107
  78. package/dist/es/index.js +30 -32
  79. package/dist/es/initReactivesearch.js +69 -152
  80. package/dist/es/install.js +49 -41
  81. package/dist/es/{ssr-b2c0b401.js → ssr-af398f0c.js} +36 -7
  82. package/dist/es/{utils-9e68acee.js → utils-9e5a16a1.js} +7 -16
  83. package/dist/es/version.js +1 -1
  84. package/dist/es/{vueTypes-b8146772.js → vueTypes-f1923c72.js} +8 -19
  85. package/package.json +10 -9
  86. package/dist/cjs/Button-446f819e.js +0 -68
  87. package/dist/cjs/CancelSvg-9f258f4f.js +0 -449
  88. package/dist/cjs/Card-642547a8.js +0 -30
  89. package/dist/cjs/Container-daf30918.js +0 -15
  90. package/dist/cjs/DataSearch-6cf29cf0.js +0 -2323
  91. package/dist/cjs/DataSearch.js +0 -30
  92. package/dist/cjs/DropDown-c479bbb0.js +0 -328
  93. package/dist/cjs/Flex-aa517a13.js +0 -52
  94. package/dist/cjs/FormControlList-c195a592.js +0 -47
  95. package/dist/cjs/Input-e6603a7e.js +0 -79
  96. package/dist/cjs/ListItem-8c9e0d68.js +0 -46
  97. package/dist/cjs/Title-1de7d0f4.js +0 -15
  98. package/dist/cjs/install-42ba1d44.js +0 -1409
  99. package/dist/cjs/ssr-3027b848.js +0 -39
  100. package/dist/es/Button-d8bc15ea.js +0 -59
  101. package/dist/es/CancelSvg-4cfae5fd.js +0 -440
  102. package/dist/es/DataSearch-4888aa43.js +0 -2308
  103. package/dist/es/DataSearch.js +0 -22
  104. package/dist/es/DropDown-05a644a5.js +0 -322
  105. package/dist/es/Flex-1f0795c3.js +0 -47
  106. package/dist/es/FormControlList-c22d64f6.js +0 -40
  107. package/dist/es/Input-7a2a9fac.js +0 -71
  108. package/dist/es/install-80bc2764.js +0 -1402
@@ -1,22 +0,0 @@
1
- import '@appbaseio/reactivecore';
2
- import './_rollupPluginBabelHelpers-76660dab.js';
3
- import 'vue-types';
4
- import '@appbaseio/reactivecore/lib/utils/constants';
5
- import '@appbaseio/reactivecore/lib/utils/helper';
6
- import 'emotion';
7
- import '@appbaseio/vue-emotion';
8
- import 'polished';
9
- import './vueTypes-b8146772.js';
10
- import '@appbaseio/reactivecore/lib/utils/transform';
11
- import 'redux';
12
- import './index-7788a843.js';
13
- import './ComponentWrapper-424e86fd.js';
14
- import './Title-3342664a.js';
15
- import './Flex-1f0795c3.js';
16
- import 'hotkeys-js';
17
- export { D as default } from './DataSearch-4888aa43.js';
18
- import './CancelSvg-4cfae5fd.js';
19
- import './Input-7a2a9fac.js';
20
- import 'compute-scroll-into-view';
21
- import './Container-ba826e96.js';
22
- import 'vue-highlight-words';
@@ -1,322 +0,0 @@
1
- import { helper } from '@appbaseio/reactivecore';
2
- import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
3
- import VueTypes from 'vue-types';
4
- import { css } from 'emotion';
5
- import styled from '@appbaseio/vue-emotion';
6
- import { t as types } from './vueTypes-b8146772.js';
7
- import { a as isFunction } from './index-7788a843.js';
8
- import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
9
- import { D as Downshift, b as InputWrapper, a as IconGroup, I as IconWrapper, C as CancelSvg } from './CancelSvg-4cfae5fd.js';
10
- import { s as suggestionsContainer, a as suggestions, I as Input } from './Input-7a2a9fac.js';
11
- import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
12
-
13
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
14
- var small = css(_templateObject || (_templateObject = _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"])));
15
-
16
- var dark = function dark(_ref) {
17
- var theme = _ref.theme;
18
- return css(_templateObject2 || (_templateObject2 = _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);
19
- };
20
-
21
- var Select = styled('button')(_templateObject3 || (_templateObject3 = _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) {
22
- return props.small ? small : null;
23
- }, function (_ref2) {
24
- var themePreset = _ref2.themePreset;
25
- return themePreset === 'dark' && dark;
26
- });
27
- var Tick = styled('span')(_templateObject4 || (_templateObject4 = _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) {
28
- var theme = _ref3.theme;
29
- return theme.colors.primaryColor;
30
- });
31
-
32
- var _templateObject$1, _templateObject2$1;
33
- var open = css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n\ttop: 0.55em;\n\ttransform: rotate(-45deg);\n"])));
34
- var Chevron = styled('span')(_templateObject2$1 || (_templateObject2$1 = _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) {
35
- return props.open ? open : null;
36
- });
37
-
38
- var getClassName = helper.getClassName;
39
- var Dropdown = {
40
- data: function data() {
41
- this.__state = {
42
- isOpen: false,
43
- searchTerm: ''
44
- };
45
- return this.__state;
46
- },
47
- inject: {
48
- theme: {
49
- from: 'theme_reactivesearch'
50
- }
51
- },
52
- props: {
53
- innerClass: types.style,
54
- items: types.data,
55
- keyField: VueTypes.string.def('key'),
56
- labelField: VueTypes.string.def('label'),
57
- multi: VueTypes.bool,
58
- // change event
59
- placeholder: types.string,
60
- returnsObject: VueTypes.bool,
61
- customLabelRenderer: types.func,
62
- hasCustomRenderer: VueTypes.bool,
63
- customRenderer: types.func,
64
- renderItem: types.func,
65
- renderNoResults: VueTypes.any,
66
- handleChange: types.func,
67
- transformData: types.func,
68
- selectedItem: types.selectedValue,
69
- showCount: VueTypes.bool,
70
- single: VueTypes.bool,
71
- small: VueTypes.bool.def(false),
72
- themePreset: types.themePreset,
73
- showSearch: VueTypes.bool,
74
- showClear: VueTypes.bool,
75
- searchPlaceholder: VueTypes.string.def('Type here to search...')
76
- },
77
- render: function render() {
78
- var _this = this;
79
-
80
- var h = arguments[0];
81
- var _this$$props = this.$props,
82
- items = _this$$props.items,
83
- selectedItem = _this$$props.selectedItem,
84
- placeholder = _this$$props.placeholder,
85
- labelField = _this$$props.labelField,
86
- keyField = _this$$props.keyField,
87
- themePreset = _this$$props.themePreset,
88
- renderItem = _this$$props.renderItem,
89
- transformData = _this$$props.transformData,
90
- footer = _this$$props.footer,
91
- customLabelRenderer = _this$$props.customLabelRenderer,
92
- hasCustomRenderer = _this$$props.hasCustomRenderer,
93
- customRenderer = _this$$props.customRenderer;
94
- var itemsToRender = items;
95
-
96
- if (transformData) {
97
- itemsToRender = transformData(itemsToRender);
98
- }
99
-
100
- var filteredItemsToRender = itemsToRender.filter(function (item) {
101
- if (String(item[labelField]).length) {
102
- if (_this.$props.showSearch && _this.$data.searchTerm) {
103
- return replaceDiacritics(String(item[labelField])).toLowerCase().includes(replaceDiacritics(_this.$data.searchTerm.toLowerCase()));
104
- }
105
-
106
- return true;
107
- }
108
-
109
- return false;
110
- });
111
- return h(Downshift, {
112
- "attrs": {
113
- "isOpen": this.$data.isOpen,
114
- "selectedItem": selectedItem,
115
- "handleChange": this.onChange,
116
- "handleMouseup": this.handleStateChange
117
- },
118
- "scopedSlots": {
119
- "default": function _default(_ref) {
120
- var getItemProps = _ref.getItemProps,
121
- isOpen = _ref.isOpen,
122
- highlightedIndex = _ref.highlightedIndex,
123
- getButtonProps = _ref.getButtonProps,
124
- getItemEvents = _ref.getItemEvents,
125
- getInputEvents = _ref.getInputEvents;
126
- return h("div", {
127
- "class": suggestionsContainer
128
- }, [h(Select, {
129
- "on": _extends({}, _extends({}, getButtonProps({
130
- onClick: _this.toggle
131
- }))),
132
- "class": getClassName(_this.$props.innerClass, 'select') || '',
133
- "attrs": {
134
- "title": selectedItem ? _this.renderToString(selectedItem) : placeholder,
135
- "small": _this.$props.small,
136
- "themePreset": _this.$props.themePreset
137
- }
138
- }, [customLabelRenderer ? customLabelRenderer(selectedItem) : h("div", [selectedItem ? _this.renderToString(selectedItem) : placeholder]), h(Chevron, {
139
- "attrs": {
140
- "open": isOpen
141
- }
142
- })]), hasCustomRenderer ? customRenderer(itemsToRender, {
143
- getItemProps: getItemProps,
144
- isOpen: isOpen,
145
- highlightedIndex: highlightedIndex,
146
- getButtonProps: getButtonProps,
147
- getItemEvents: getItemEvents
148
- }) : isOpen && itemsToRender.length ? h("ul", {
149
- "class": suggestions(themePreset, _this.theme) + " " + (_this.$props.small ? 'small' : '') + " " + getClassName(_this.$props.innerClass, 'list')
150
- }, [_this.$props.showSearch ? _this.renderSearchbox({
151
- on: {
152
- input: getInputEvents({
153
- onInput: _this.handleInputChange
154
- }).input
155
- }
156
- }) : null, !hasCustomRenderer && filteredItemsToRender.length === 0 ? _this.renderNoResult() : filteredItemsToRender.map(function (item, index) {
157
- var selected = _this.$props.multi // MultiDropdownList
158
- && (selectedItem && !!selectedItem[item[keyField]] // MultiDropdownRange
159
- || Array.isArray(selectedItem) && selectedItem.find(function (value) {
160
- return value[labelField] === item[labelField];
161
- }));
162
- if (!_this.$props.multi) selected = item.key === selectedItem;
163
- return h("li", {
164
- "domProps": _extends({}, getItemProps({
165
- item: item
166
- })),
167
- "on": _extends({}, getItemEvents({
168
- item: item
169
- })),
170
- "key": item[keyField],
171
- "class": "" + (selected ? 'active' : ''),
172
- "style": {
173
- backgroundColor: _this.getBackgroundColor(highlightedIndex === index, selected)
174
- }
175
- }, [renderItem ? renderItem({
176
- label: item[labelField],
177
- count: item.doc_count,
178
- isChecked: selected && _this.$props.multi
179
- }) : h("div", [typeof item[labelField] === 'string' ? h("span", {
180
- "domProps": {
181
- "innerHTML": item[labelField]
182
- }
183
- }) : item[labelField], _this.$props.showCount && item.doc_count && h("span", {
184
- "class": getClassName(_this.$props.innerClass, 'count') || ''
185
- }, ["\xA0(", item.doc_count, ")"])]), selected && _this.$props.multi ? h(Tick, {
186
- "class": getClassName(_this.$props.innerClass, 'icon') || ''
187
- }) : null]);
188
- }), footer]) : null]);
189
- }
190
- }
191
- });
192
- },
193
- methods: {
194
- toggle: function toggle() {
195
- this.isOpen = !this.$data.isOpen;
196
- },
197
- close: function close() {
198
- this.isOpen = false;
199
- },
200
- onChange: function onChange(item) {
201
- if (this.$props.returnsObject) {
202
- this.$props.handleChange(item);
203
- } else {
204
- this.$props.handleChange(item[this.$props.keyField]);
205
- }
206
-
207
- if (!this.$props.multi) {
208
- this.isOpen = false;
209
- this.searchTerm = '';
210
- }
211
- },
212
- handleStateChange: function handleStateChange(_ref2) {
213
- var isOpen = _ref2.isOpen;
214
- this.isOpen = isOpen;
215
- },
216
- getBackgroundColor: function getBackgroundColor(highlighted, selected) {
217
- var isDark = this.$props.themePreset === 'dark';
218
-
219
- if (highlighted) {
220
- return isDark ? '#555' : '#eee';
221
- }
222
-
223
- if (selected) {
224
- return isDark ? '#686868' : '#fafafa';
225
- }
226
-
227
- return isDark ? '#424242' : '#fff';
228
- },
229
- handleInputChange: function handleInputChange(e) {
230
- var value = e.target.value;
231
- this.searchTerm = value;
232
- },
233
- clearSearchTerm: function clearSearchTerm() {
234
- this.searchTerm = '';
235
- },
236
- renderToString: function renderToString(value) {
237
- var _this2 = this;
238
-
239
- var customLabelRenderer = this.$props.customLabelRenderer;
240
-
241
- if (customLabelRenderer) {
242
- var customLabel = customLabelRenderer(value);
243
-
244
- if (typeof customLabel === 'string') {
245
- return customLabel;
246
- }
247
- }
248
-
249
- if (Array.isArray(value) && value.length) {
250
- var arrayToRender = value.map(function (item) {
251
- return _this2.renderToString(item);
252
- });
253
- return arrayToRender.join(', ');
254
- }
255
-
256
- if (value && typeof value === 'object') {
257
- if (value[this.$props.labelField]) {
258
- return value[this.$props.labelField];
259
- }
260
-
261
- if (Object.keys(value).length) {
262
- return this.renderToString(Object.keys(value));
263
- }
264
-
265
- return this.$props.placeholder;
266
- }
267
-
268
- return value;
269
- },
270
- renderNoResult: function renderNoResult() {
271
- var h = this.$createElement;
272
- var renderNoResults = this.$scopedSlots.renderNoResults || this.$props.renderNoResults;
273
- return h("p", {
274
- "class": getClassName(this.$props.innerClass, 'noResults') || null
275
- }, [isFunction(renderNoResults) ? renderNoResults() : renderNoResults]);
276
- },
277
- renderSearchbox: function renderSearchbox(eventObject) {
278
- var h = this.$createElement;
279
- var _this$$props2 = this.$props,
280
- componentId = _this$$props2.componentId,
281
- searchPlaceholder = _this$$props2.searchPlaceholder,
282
- showClear = _this$$props2.showClear,
283
- themePreset = _this$$props2.themePreset,
284
- innerClass = _this$$props2.innerClass;
285
- var InputComponent = h(Input, _mergeJSXProps([{
286
- "attrs": {
287
- "id": componentId + "-input",
288
- "showIcon": false,
289
- "showClear": showClear,
290
- "placeholder": searchPlaceholder,
291
- "value": this.$data.searchTerm,
292
- "themePreset": themePreset
293
- },
294
- "style": {
295
- border: 0,
296
- borderBottom: '1px solid #ddd'
297
- },
298
- "class": getClassName(innerClass, 'input')
299
- }, eventObject]));
300
-
301
- if (showClear) {
302
- return h(InputWrapper, [InputComponent, this.searchTerm && h(IconGroup, {
303
- "attrs": {
304
- "groupPosition": "right",
305
- "positionType": "absolute"
306
- }
307
- }, [h(IconWrapper, {
308
- "on": {
309
- "click": this.clearSearchTerm
310
- },
311
- "attrs": {
312
- "isClearIcon": true
313
- }
314
- }, [h(CancelSvg)])])]);
315
- }
316
-
317
- return InputComponent;
318
- }
319
- }
320
- };
321
-
322
- export { Dropdown as D };
@@ -1,47 +0,0 @@
1
- import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-76660dab.js';
2
- import { css } from 'emotion';
3
- import styled from '@appbaseio/vue-emotion';
4
- import { lighten } from 'polished';
5
-
6
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
7
- var leftLabel = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tflex-direction: row;\n\talign-items: center;\n"])));
8
- var rightLabel = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tflex-direction: row-reverse;\n\talign-items: center;\n"])));
9
- var topLabel = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\tflex-direction: column;\n"])));
10
- var bottomLabel = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\tflex-direction: column-reverse;\n"])));
11
-
12
- var border = function border(_ref) {
13
- var colors = _ref.theme.colors;
14
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n\tborder: 1px solid ", ";\n"])), colors.borderColor || '#ccc');
15
- };
16
-
17
- var Flex = styled('div')(_templateObject6 || (_templateObject6 = _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) {
18
- return props.inline ? 'inline-flex' : 'flex';
19
- }, function (props) {
20
- return (props.labelPosition === 'left' || props.iconPosition === 'right') && leftLabel;
21
- }, function (props) {
22
- return (props.labelPosition === 'right' || props.iconPosition === 'left') && rightLabel;
23
- }, function (props) {
24
- return props.labelPosition === 'top' && topLabel;
25
- }, function (props) {
26
- return props.labelPosition === 'bottom' && bottomLabel;
27
- }, function (props) {
28
- return props.showBorder && border;
29
- }, function (props) {
30
- return props.justifyContent && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n\t\t\tjustify-content: ", ";\n\t\t"])), props.justifyContent);
31
- }, function (props) {
32
- return props.alignItems && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n\t\t\talign-items: ", ";\n\t\t"])), props.alignItems);
33
- }, function (props) {
34
- return props.flex && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n\t\t\tflex: ", ";\n\t\t"])), props.flex);
35
- }, function (props) {
36
- return props.direction && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n\t\t\tflex-direction: ", ";\n\t\t"])), props.direction);
37
- }, function (props) {
38
- return props.basis && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n\t\t\tflex-basis: ", ";\n\t\t"])), props.basis);
39
- }, function (_ref2) {
40
- var colors = _ref2.theme.colors;
41
- return colors.borderColor || lighten(0.3, colors.textColor);
42
- }, function (_ref3) {
43
- var theme = _ref3.theme;
44
- return theme.colors.textColor;
45
- });
46
-
47
- export { Flex as F };
@@ -1,40 +0,0 @@
1
- import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-76660dab.js';
2
- import { css } from 'emotion';
3
- import styled from '@appbaseio/vue-emotion';
4
- import { lighten } from 'polished';
5
-
6
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
7
- var item = {
8
- width: '15px',
9
- height: '15px',
10
- scale: '4px'
11
- };
12
- var vh = css(_templateObject || (_templateObject = _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"])));
13
- var hideInputControl = css(_templateObject2 || (_templateObject2 = _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"])));
14
-
15
- var formItem = function formItem(_ref) {
16
- var theme = _ref.theme;
17
- return css(_templateObject3 || (_templateObject3 = _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, lighten(0.4, theme.colors.primaryColor), theme.colors.primaryColor, theme.colors.borderColor || 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);
18
- };
19
-
20
- var Radio = styled('input')(_templateObject4 || (_templateObject4 = _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) {
21
- return props.show ? null : hideInputControl;
22
- }, function (_ref2) {
23
- var theme = _ref2.theme;
24
- return theme.colors.primaryColor;
25
- }, function (_ref3) {
26
- var theme = _ref3.theme;
27
- return theme.colors.primaryColor;
28
- });
29
- var Checkbox = styled('input')(_templateObject5 || (_templateObject5 = _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) {
30
- return props.show ? null : hideInputControl;
31
- }, item.width, item.width, item.width, item.height, function (_ref4) {
32
- var theme = _ref4.theme;
33
- return theme.colors.primaryColor;
34
- }, function (_ref5) {
35
- var theme = _ref5.theme;
36
- return theme.colors.primaryColor;
37
- });
38
- var UL = styled('ul')(_templateObject6 || (_templateObject6 = _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"])));
39
-
40
- export { Checkbox as C, Radio as R, UL as U };
@@ -1,71 +0,0 @@
1
- import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-76660dab.js';
2
- import { css } from 'emotion';
3
- import styled from '@appbaseio/vue-emotion';
4
-
5
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
6
-
7
- var alertBorder = function alertBorder(_ref) {
8
- var theme = _ref.theme;
9
- return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tborder: 1px solid ", ";\n"])), theme.colors.alertColor);
10
- };
11
-
12
- var input = css(_templateObject2 || (_templateObject2 = _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"])));
13
-
14
- var dark = function dark(theme) {
15
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\tborder-color: ", ";\n"])), theme.colors.borderColor);
16
- };
17
-
18
- var darkInput = function darkInput(_ref2) {
19
- var theme = _ref2.theme;
20
- return css(_templateObject4 || (_templateObject4 = _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);
21
- };
22
-
23
- var Input = styled('input')(_templateObject5 || (_templateObject5 = _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' && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n\t\t\tpadding-left: 36px;\n\t\t"])));
31
- }, function (props) {
32
- return props.showIcon && props.iconPosition === 'right' && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 36px;\n\t\t"])));
33
- }, function (props) {
34
- return (// for clear icon
35
- props.showClear && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 36px;\n\t\t"])))
36
- );
37
- }, function (props) {
38
- return (// for voice search icon
39
- props.showVoiceSearch && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 36px;\n\t\t"])))
40
- );
41
- }, function (props) {
42
- return (// for clear icon with search icon
43
- props.showClear && props.showIcon && props.iconPosition === 'right' && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 66px;\n\t\t"])))
44
- );
45
- }, function (props) {
46
- return (// for voice search icon with search icon
47
- props.showVoiceSearch && props.showIcon && props.iconPosition === 'right' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 66px;\n\t\t"])))
48
- );
49
- }, function (props) {
50
- return (// for voice search icon with clear icon
51
- props.showVoiceSearch && props.showIcon && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 66px;\n\t\t"])))
52
- );
53
- }, function (props) {
54
- return (// for clear icon with search icon and voice search
55
- props.showClear && props.showIcon && props.showVoiceSearch && props.iconPosition === 'right' && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n\t\t\tpadding-right: 90px;\n\t\t"])))
56
- );
57
- }, function (props) {
58
- return props.alert && alertBorder;
59
- });
60
-
61
- var suggestions = function suggestions(themePreset, theme) {
62
- return css(_templateObject14 || (_templateObject14 = _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));
63
- };
64
-
65
- var suggestionsContainer = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n\tposition: relative;\n\t.cancel-icon {\n\t\tcursor: pointer;\n\t}\n"])));
66
-
67
- var noSuggestions = function noSuggestions(themePreset, theme) {
68
- return css(_templateObject16 || (_templateObject16 = _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));
69
- };
70
-
71
- export { Input as I, suggestions as a, noSuggestions as n, suggestionsContainer as s };