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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/README.md +9 -9
  2. package/dist/@appbaseio/reactivesearch-vue.umd.js +21316 -29369
  3. package/dist/@appbaseio/reactivesearch-vue.umd.js.map +1 -1
  4. package/dist/@appbaseio/reactivesearch-vue.umd.min.js +5 -19
  5. package/dist/@appbaseio/reactivesearch-vue.umd.min.js.map +1 -1
  6. package/dist/cjs/Button-ad042719.js +59 -0
  7. package/dist/cjs/Card-f5ab024a.js +27 -0
  8. package/dist/cjs/{ComponentWrapper-ad3dad02.js → ComponentWrapper-611cf7f9.js} +44 -58
  9. package/dist/cjs/Container-29f049b2.js +12 -0
  10. package/dist/cjs/DropDown-dc184468.js +700 -0
  11. package/dist/cjs/DynamicRangeSlider.js +106 -157
  12. package/dist/cjs/Flex-d5675ea6.js +48 -0
  13. package/dist/cjs/FormControlList-fadd792f.js +42 -0
  14. package/dist/cjs/Input-088dfcb4.js +74 -0
  15. package/dist/cjs/ListItem-d57d648d.js +42 -0
  16. package/dist/cjs/MultiDropdownList.js +124 -240
  17. package/dist/cjs/MultiList.js +124 -262
  18. package/dist/cjs/MultiRange.js +87 -133
  19. package/dist/cjs/{Pagination-71e85fa9.js → Pagination-b5ddc906.js} +70 -83
  20. package/dist/cjs/PreferencesConsumer-22d1b49f.js +73 -0
  21. package/dist/cjs/RangeInput.js +163 -171
  22. package/dist/cjs/RangeSlider.js +81 -109
  23. package/dist/cjs/ReactiveBase.js +139 -156
  24. package/dist/cjs/ReactiveComponent-a6108189.js +2184 -0
  25. package/dist/cjs/ReactiveComponent.js +46 -340
  26. package/dist/cjs/ReactiveGoogleMap.js +451 -660
  27. package/dist/cjs/ReactiveList.js +180 -305
  28. package/dist/cjs/ResultCard.js +36 -36
  29. package/dist/cjs/ResultList.js +48 -56
  30. package/dist/cjs/SelectedFilters.js +62 -69
  31. package/dist/cjs/SingleDropdownList.js +117 -177
  32. package/dist/cjs/SingleList.js +122 -206
  33. package/dist/cjs/SingleRange.js +78 -105
  34. package/dist/cjs/StateProvider.js +35 -38
  35. package/dist/cjs/Title-8802a218.js +12 -0
  36. package/dist/cjs/ToggleButton.js +72 -119
  37. package/dist/cjs/{_rollupPluginBabelHelpers-c705cbe6.js → _rollupPluginBabelHelpers-f8b843f8.js} +0 -15
  38. package/dist/cjs/{index-6a167fe0.js → index-d8d8f291.js} +38 -108
  39. package/dist/cjs/index.js +44 -41
  40. package/dist/cjs/initReactivesearch.js +63 -150
  41. package/dist/cjs/install.js +47 -43
  42. package/dist/cjs/ssr-6c8a72e1.js +66 -0
  43. package/dist/cjs/{utils-d6a52588.js → utils-83fd01e9.js} +7 -16
  44. package/dist/cjs/version.js +1 -1
  45. package/dist/cjs/{vueTypes-727b7c63.js → vueTypes-1bf00978.js} +8 -19
  46. package/dist/es/Button-474510e3.js +53 -0
  47. package/dist/es/{Card-450683f1.js → Card-38cbe652.js} +3 -3
  48. package/dist/es/{ComponentWrapper-424e86fd.js → ComponentWrapper-3dfe6931.js} +44 -58
  49. package/dist/es/{Container-ba826e96.js → Container-d00219f7.js} +2 -2
  50. package/dist/es/DropDown-029ffd42.js +690 -0
  51. package/dist/es/DynamicRangeSlider.js +106 -157
  52. package/dist/es/Flex-a08e22d7.js +46 -0
  53. package/dist/es/FormControlList-fe6eaee4.js +38 -0
  54. package/dist/es/Input-ad474a55.js +69 -0
  55. package/dist/es/{ListItem-cad14c5e.js → ListItem-16756c02.js} +7 -8
  56. package/dist/es/MultiDropdownList.js +124 -240
  57. package/dist/es/MultiList.js +124 -262
  58. package/dist/es/MultiRange.js +87 -133
  59. package/dist/es/{Pagination-784bf143.js → Pagination-72bd1d9e.js} +70 -83
  60. package/dist/es/PreferencesConsumer-24e88f3b.js +71 -0
  61. package/dist/es/RangeInput.js +163 -170
  62. package/dist/es/RangeSlider.js +81 -109
  63. package/dist/es/ReactiveBase.js +138 -154
  64. package/dist/es/ReactiveComponent-0a97eb1e.js +2178 -0
  65. package/dist/es/ReactiveComponent.js +42 -337
  66. package/dist/es/ReactiveGoogleMap.js +446 -654
  67. package/dist/es/ReactiveList.js +178 -302
  68. package/dist/es/ResultCard.js +36 -36
  69. package/dist/es/ResultList.js +48 -56
  70. package/dist/es/SelectedFilters.js +62 -69
  71. package/dist/es/SingleDropdownList.js +117 -177
  72. package/dist/es/SingleList.js +122 -206
  73. package/dist/es/SingleRange.js +78 -105
  74. package/dist/es/StateProvider.js +36 -39
  75. package/dist/es/{Title-3342664a.js → Title-863dfa42.js} +2 -2
  76. package/dist/es/ToggleButton.js +72 -119
  77. package/dist/es/{_rollupPluginBabelHelpers-76660dab.js → _rollupPluginBabelHelpers-ded08042.js} +0 -15
  78. package/dist/es/{index-7788a843.js → index-4520a598.js} +39 -107
  79. package/dist/es/index.js +30 -32
  80. package/dist/es/initReactivesearch.js +63 -150
  81. package/dist/es/install.js +49 -41
  82. package/dist/es/{ssr-b2c0b401.js → ssr-584c278d.js} +37 -8
  83. package/dist/es/{utils-9e68acee.js → utils-9e5a16a1.js} +7 -16
  84. package/dist/es/version.js +1 -1
  85. package/dist/es/{vueTypes-b8146772.js → vueTypes-f1923c72.js} +8 -19
  86. package/package.json +10 -9
  87. package/dist/cjs/Button-446f819e.js +0 -68
  88. package/dist/cjs/CancelSvg-9f258f4f.js +0 -449
  89. package/dist/cjs/Card-642547a8.js +0 -30
  90. package/dist/cjs/Container-daf30918.js +0 -15
  91. package/dist/cjs/DataSearch-aa04dc6e.js +0 -2352
  92. package/dist/cjs/DataSearch.js +0 -30
  93. package/dist/cjs/DropDown-c479bbb0.js +0 -328
  94. package/dist/cjs/Flex-aa517a13.js +0 -52
  95. package/dist/cjs/FormControlList-c195a592.js +0 -47
  96. package/dist/cjs/Input-e6603a7e.js +0 -79
  97. package/dist/cjs/ListItem-8c9e0d68.js +0 -46
  98. package/dist/cjs/Title-1de7d0f4.js +0 -15
  99. package/dist/cjs/install-b97dbac4.js +0 -1409
  100. package/dist/cjs/ssr-3027b848.js +0 -39
  101. package/dist/es/Button-d8bc15ea.js +0 -59
  102. package/dist/es/CancelSvg-4cfae5fd.js +0 -440
  103. package/dist/es/DataSearch-b86a6675.js +0 -2337
  104. package/dist/es/DataSearch.js +0 -22
  105. package/dist/es/DropDown-05a644a5.js +0 -322
  106. package/dist/es/Flex-1f0795c3.js +0 -47
  107. package/dist/es/FormControlList-c22d64f6.js +0 -40
  108. package/dist/es/Input-7a2a9fac.js +0 -71
  109. package/dist/es/install-ac8a1edb.js +0 -1402
@@ -1,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-b86a6675.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 };