@onereach/ui-components 2.69.0 → 2.69.1-beta.2089.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 (62) hide show
  1. package/dist/bundled/v2/{OrCard-58a1ba3e.js → OrCard-29116e1f.js} +2 -2
  2. package/dist/bundled/v2/OrCardCollection-a8d5ce32.js +328 -0
  3. package/dist/bundled/v2/{OrSearch-9d402f56.js → OrSearch-19f43fe5.js} +2 -2
  4. package/dist/bundled/v2/{OrSortHeader-396e6a7c.js → OrSortHeader-9932d28f.js} +2 -2
  5. package/dist/bundled/v2/components/index.js +4 -4
  6. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +4 -0
  7. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +61 -37
  8. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollectionView.vue2.vue.d.ts +35 -0
  9. package/dist/bundled/v2/components/or-card-collection-v3/constatnts.d.ts +4 -0
  10. package/dist/bundled/v2/components/or-card-collection-v3/index.js +7 -4
  11. package/dist/bundled/v2/components/or-card-collection-v3/types.d.ts +5 -4
  12. package/dist/bundled/v2/components/or-card-v3/index.js +1 -1
  13. package/dist/bundled/v2/components/or-search-v3/index.js +1 -1
  14. package/dist/bundled/v2/components/or-sort-header-v3/index.js +1 -1
  15. package/dist/bundled/v2/index.js +5 -5
  16. package/dist/bundled/v3/OrButton-8ab33d9d.js +33 -0
  17. package/dist/bundled/v3/OrCardCollection.vue_vue_type_script_lang-f9f329a2.js +224 -0
  18. package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-289b5600.js → OrConfirm.vue_vue_type_script_lang-85472b12.js} +6 -36
  19. package/dist/bundled/v3/OrMenu-f26e8e55.js +29 -0
  20. package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-ed78b21f.js → OrSearch.vue_vue_type_script_lang-cb2d6612.js} +1 -1
  21. package/dist/bundled/v3/{OrTabs.vue_vue_type_script_lang-919b2021.js → OrTabs.vue_vue_type_script_lang-61b79a5a.js} +10 -36
  22. package/dist/bundled/v3/components/index.js +9 -7
  23. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +4 -0
  24. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +61 -37
  25. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts +35 -0
  26. package/dist/bundled/v3/components/or-card-collection-v3/constatnts.d.ts +4 -0
  27. package/dist/bundled/v3/components/or-card-collection-v3/index.js +11 -4
  28. package/dist/bundled/v3/components/or-card-collection-v3/types.d.ts +5 -4
  29. package/dist/bundled/v3/components/or-confirm-v3/index.js +2 -1
  30. package/dist/bundled/v3/components/or-search-v3/index.js +1 -1
  31. package/dist/bundled/v3/components/or-tabs-v3/index.js +2 -1
  32. package/dist/bundled/v3/index.js +319 -299
  33. package/dist/esm/v2/OrCardCollection-95b051e1.js +328 -0
  34. package/dist/esm/v2/components/index.js +1 -1
  35. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +4 -0
  36. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +61 -37
  37. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollectionView.vue2.vue.d.ts +35 -0
  38. package/dist/esm/v2/components/or-card-collection-v3/constatnts.d.ts +4 -0
  39. package/dist/esm/v2/components/or-card-collection-v3/index.js +7 -4
  40. package/dist/esm/v2/components/or-card-collection-v3/types.d.ts +5 -4
  41. package/dist/esm/v2/index.js +1 -1
  42. package/dist/esm/v3/OrCardCollection-afd863fc.js +274 -0
  43. package/dist/esm/v3/components/index.js +1 -1
  44. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +4 -0
  45. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +61 -37
  46. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts +35 -0
  47. package/dist/esm/v3/components/or-card-collection-v3/constatnts.d.ts +4 -0
  48. package/dist/esm/v3/components/or-card-collection-v3/index.js +7 -4
  49. package/dist/esm/v3/components/or-card-collection-v3/types.d.ts +5 -4
  50. package/dist/esm/v3/index.js +1 -1
  51. package/package.json +2 -3
  52. package/src/components/or-card-collection-v3/OrCardCollection.stories3.ts +160 -19
  53. package/src/components/or-card-collection-v3/OrCardCollection.vue +99 -74
  54. package/src/components/or-card-collection-v3/OrCardCollectionView.vue2.vue +41 -0
  55. package/src/components/or-card-collection-v3/OrCardCollectionView.vue3.vue +42 -0
  56. package/src/components/or-card-collection-v3/constatnts.ts +12 -0
  57. package/src/components/or-card-collection-v3/styles.ts +1 -1
  58. package/src/components/or-card-collection-v3/types.ts +5 -4
  59. package/dist/bundled/v2/OrCardCollection-a9a779ea.js +0 -228
  60. package/dist/bundled/v3/OrCardCollection.vue_vue_type_script_lang-3993a015.js +0 -164
  61. package/dist/esm/v2/OrCardCollection-4f001551.js +0 -227
  62. package/dist/esm/v3/OrCardCollection-5a0febaf.js +0 -198
@@ -0,0 +1,328 @@
1
+ import { defineComponent, computed, ref, watch } from 'vue-demi';
2
+ import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
3
+ import '@vueuse/core';
4
+ import { _ as __vue_component__$2 } from './OrIconButton-e17e4944.js';
5
+ import { _ as __vue_component__$4 } from './OrMenu-df27d0ef.js';
6
+ import './OrPopover-9bafbdb4.js';
7
+ import { _ as __vue_component__$5 } from './OrMenuItem-c7f28480.js';
8
+ import { _ as __vue_component__$6 } from './OrIcon-5e394c62.js';
9
+ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
10
+ import { _ as __vue_component__$3 } from './OrButton-357a5756.js';
11
+ import { _ as __vue_component__$7 } from './OrSearch-ddb7c1fe.js';
12
+ import './OrInputBox-4d5a318d.js';
13
+
14
+ var CardCollectionView;
15
+ (function (CardCollectionView) {
16
+ CardCollectionView["Grid"] = "grid";
17
+ CardCollectionView["List"] = "list";
18
+ })(CardCollectionView || (CardCollectionView = {}));
19
+
20
+ const CardCollectionRoot = [
21
+ // Layout
22
+ 'layout-column',
23
+ // Spacing
24
+ 'gap-md'];
25
+ const CardCollectionToolbar = [
26
+ // Layout
27
+ 'layout-row justify-between',
28
+ // Typography
29
+ 'typography-body-2-regular',
30
+ // Theme
31
+ 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
32
+ const CardCollectionToolbarPanel = [
33
+ // Layout
34
+ 'layout-row',
35
+ // Spacing
36
+ 'gap-lg+'];
37
+ const CardCollectionContent = [
38
+ // Layout
39
+ 'grid',
40
+ // Spacing
41
+ 'gap-sm md:gap-md'];
42
+ const CardCollectionContentViews = {
43
+ 'grid': [
44
+ // Layout
45
+ 'sm:grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-4', 'xl:grid-cols-6'],
46
+ 'list': []
47
+ };
48
+
49
+ var script$1 = defineComponent({
50
+ name: 'OrCardCollectionView',
51
+ props: {
52
+ items: {
53
+ type: Array,
54
+ default: []
55
+ },
56
+ mode: {
57
+ type: String,
58
+ required: true
59
+ }
60
+ },
61
+ setup(props) {
62
+ const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[props.mode]]);
63
+ return {
64
+ contentStyles
65
+ };
66
+ }
67
+ });
68
+
69
+ /* script */
70
+ const __vue_script__$1 = script$1;
71
+
72
+ /* template */
73
+ var __vue_render__$1 = function () {
74
+ var _vm = this;
75
+ var _h = _vm.$createElement;
76
+ var _c = _vm._self._c || _h;
77
+ return _c('div', {
78
+ class: _vm.contentStyles
79
+ }, [_vm._l(_vm.items, function (item) {
80
+ return _vm._t("item", function () {
81
+ return [_vm._v("\n " + _vm._s(item.key) + "\n ")];
82
+ }, null, {
83
+ item: item,
84
+ mode: _vm.mode
85
+ });
86
+ })], 2);
87
+ };
88
+ var __vue_staticRenderFns__$1 = [];
89
+
90
+ /* style */
91
+ const __vue_inject_styles__$1 = undefined;
92
+ /* scoped */
93
+ const __vue_scope_id__$1 = undefined;
94
+ /* module identifier */
95
+ const __vue_module_identifier__$1 = undefined;
96
+ /* functional template */
97
+ const __vue_is_functional_template__$1 = false;
98
+ /* style inject */
99
+
100
+ /* style inject SSR */
101
+
102
+ /* style inject shadow dom */
103
+
104
+ const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
105
+ render: __vue_render__$1,
106
+ staticRenderFns: __vue_staticRenderFns__$1
107
+ }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
108
+
109
+ const gridView = {
110
+ view: 'grid',
111
+ icon: 'grid_view'
112
+ };
113
+ const listView = {
114
+ view: 'list',
115
+ icon: 'view_agenda'
116
+ };
117
+ const defaultViewModes = [gridView, listView];
118
+
119
+ var script = defineComponent({
120
+ name: 'OrCardCollection',
121
+ components: {
122
+ OrCardCollectionView: __vue_component__$1,
123
+ OrIconButton: __vue_component__$2,
124
+ OrButton: __vue_component__$3,
125
+ OrMenu: __vue_component__$4,
126
+ OrMenuItem: __vue_component__$5,
127
+ OrIcon: __vue_component__$6,
128
+ OrSearch: __vue_component__$7
129
+ },
130
+ inheritAttrs: false,
131
+ props: {
132
+ items: {
133
+ type: Array,
134
+ default: []
135
+ },
136
+ view: {
137
+ type: String,
138
+ default: CardCollectionView.Grid
139
+ },
140
+ viewModes: {
141
+ type: Array,
142
+ default: () => defaultViewModes
143
+ },
144
+ sort: {
145
+ type: String,
146
+ default: undefined
147
+ },
148
+ sortOptions: {
149
+ type: Array,
150
+ default: () => []
151
+ },
152
+ search: {
153
+ type: String,
154
+ default: undefined
155
+ }
156
+ },
157
+ emits: ['viewChange', 'sortChange', 'searchChange'],
158
+ expose: ['root'],
159
+ setup(props, context) {
160
+ // Refs
161
+ const root = ref();
162
+ const sortMenu = ref();
163
+ const sortButton = ref();
164
+ // Styles
165
+ const classAttribute = useClassAttribute();
166
+ const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
167
+ const toolbarStyles = computed(() => [...CardCollectionToolbar]);
168
+ const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
169
+ // State
170
+ const proxyView = ref(props.view);
171
+ const proxySort = ref(props.sort);
172
+ const proxySearch = ref(props.search);
173
+ // Methods
174
+ function switchView(view) {
175
+ proxyView.value = view;
176
+ }
177
+ function handleSort(sort) {
178
+ proxySort.value = sort;
179
+ }
180
+ function handleSearch(search) {
181
+ proxySearch.value = search;
182
+ }
183
+ // Effects
184
+ watch(() => props.view, value => {
185
+ proxyView.value = value;
186
+ });
187
+ watch(proxyView, value => {
188
+ context.emit('viewChange', value);
189
+ });
190
+ watch(() => props.sort, value => {
191
+ proxySort.value = value;
192
+ });
193
+ watch(proxySort, value => {
194
+ context.emit('sortChange', value);
195
+ });
196
+ watch(() => props.search, value => {
197
+ proxySearch.value = value;
198
+ });
199
+ watch(proxySearch, value => {
200
+ context.emit('searchChange', value);
201
+ });
202
+ return {
203
+ root,
204
+ sortMenu,
205
+ sortButton,
206
+ rootStyles,
207
+ toolbarStyles,
208
+ toolbarPanelStyles,
209
+ proxyView,
210
+ proxySort,
211
+ proxySearch,
212
+ switchView,
213
+ handleSort,
214
+ handleSearch
215
+ };
216
+ }
217
+ });
218
+
219
+ /* script */
220
+ const __vue_script__ = script;
221
+
222
+ /* template */
223
+ var __vue_render__ = function () {
224
+ var _vm = this;
225
+ var _h = _vm.$createElement;
226
+ var _c = _vm._self._c || _h;
227
+ return _c('div', _vm._b({
228
+ ref: "root",
229
+ class: _vm.rootStyles
230
+ }, 'div', _vm.$attrs, false), [_c('div', {
231
+ class: _vm.toolbarStyles
232
+ }, [_c('div', {
233
+ class: _vm.toolbarPanelStyles
234
+ }, [_vm.sortOptions.length ? [_c('OrButton', {
235
+ ref: "sortButton",
236
+ attrs: {
237
+ "variant": "link",
238
+ "color": "inherit"
239
+ },
240
+ on: {
241
+ "click": function ($event) {
242
+ return _vm.sortMenu.toggle();
243
+ }
244
+ }
245
+ }, [_vm._v("\n " + _vm._s(_vm.proxySort) + "\n "), _vm.sortMenu ? _c('OrIcon', {
246
+ attrs: {
247
+ "icon": _vm.sortMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
248
+ }
249
+ }) : _vm._e()], 1), _vm._v(" "), _c('OrMenu', {
250
+ ref: "sortMenu",
251
+ attrs: {
252
+ "trigger": _vm.sortButton && _vm.sortButton.root
253
+ }
254
+ }, _vm._l(_vm.sortOptions, function (sortItem) {
255
+ return _c('OrMenuItem', {
256
+ key: sortItem,
257
+ on: {
258
+ "click": function ($event) {
259
+ return _vm.handleSort(sortItem);
260
+ }
261
+ }
262
+ }, [_vm._v("\n " + _vm._s(sortItem) + "\n ")]);
263
+ }), 1)] : _vm._e()], 2), _vm._v(" "), _c('div', {
264
+ class: _vm.toolbarPanelStyles
265
+ }, [_c('OrSearch', {
266
+ staticClass: "md:w-[350px]",
267
+ attrs: {
268
+ "size": "s"
269
+ },
270
+ on: {
271
+ "search": _vm.handleSearch
272
+ }
273
+ }), _vm._v(" "), _c('div', {
274
+ staticClass: "layout-row gap-sm"
275
+ }, [_vm.viewModes.length > 1 ? _vm._l(_vm.viewModes, function (viewOption) {
276
+ return _c('OrIconButton', {
277
+ key: viewOption.view,
278
+ attrs: {
279
+ "icon": {
280
+ icon: viewOption.icon,
281
+ variant: viewOption.view === _vm.proxyView ? 'filled' : 'outlined'
282
+ }
283
+ },
284
+ on: {
285
+ "click": function ($event) {
286
+ return _vm.switchView(viewOption.view);
287
+ }
288
+ }
289
+ });
290
+ }) : _vm._e(), _vm._v(" "), _vm._t("addon")], 2)], 1)]), _vm._v(" "), _vm._t(_vm.proxyView, function () {
291
+ return [_c('OrCardCollectionView', {
292
+ attrs: {
293
+ "items": _vm.items,
294
+ "mode": _vm.proxyView
295
+ },
296
+ scopedSlots: _vm._u([{
297
+ key: "item",
298
+ fn: function (props) {
299
+ return [_vm._t("item", null, null, props)];
300
+ }
301
+ }], null, true)
302
+ })];
303
+ }, null, {
304
+ items: _vm.items
305
+ })], 2);
306
+ };
307
+ var __vue_staticRenderFns__ = [];
308
+
309
+ /* style */
310
+ const __vue_inject_styles__ = undefined;
311
+ /* scoped */
312
+ const __vue_scope_id__ = undefined;
313
+ /* module identifier */
314
+ const __vue_module_identifier__ = undefined;
315
+ /* functional template */
316
+ const __vue_is_functional_template__ = false;
317
+ /* style inject */
318
+
319
+ /* style inject SSR */
320
+
321
+ /* style inject shadow dom */
322
+
323
+ const __vue_component__ = /*#__PURE__*/normalizeComponent({
324
+ render: __vue_render__,
325
+ staticRenderFns: __vue_staticRenderFns__
326
+ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
327
+
328
+ export { CardCollectionView as C, __vue_component__ as _ };
@@ -8,7 +8,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
8
8
  export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from '../OrButton-357a5756.js';
9
9
  export { _ as OrCard } from '../OrCard-b7268256.js';
10
10
  export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from '../OrCardCollection-f6b07557.js';
11
- export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-4f001551.js';
11
+ export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-95b051e1.js';
12
12
  export { _ as OrCardV3 } from '../OrCard-de799db0.js';
13
13
  export { a as OrCarousel, _ as OrCarouselItem } from '../OrCarouselItem-4e2cf3d8.js';
14
14
  export { _ as OrCheckbox } from '../OrCheckbox-915f1f0a.js';
@@ -1,4 +1,5 @@
1
1
  import { Meta, StoryFn } from '@storybook/vue3';
2
+ import OrCardCollection from './OrCardCollection.vue';
2
3
  declare const _default: Meta<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
3
4
  [x: string]: ((...args: any[]) => any) | null;
4
5
  } | string[], {} & {}, {
@@ -15,3 +16,6 @@ export declare const WithSorting: StoryFn<import("vue").ComponentOptions<import(
15
16
  } | string[], {} & {}, {
16
17
  [x: number]: string;
17
18
  } | {}, true>)>;
19
+ export declare const OverrideViewContainer: StoryFn<typeof OrCardCollection>;
20
+ export declare const ExtraViewMode: StoryFn<typeof OrCardCollection>;
21
+ export declare const WithLink: StoryFn<typeof OrCardCollection>;
@@ -1,37 +1,47 @@
1
1
  import { PropType } from 'vue-demi';
2
- import { SortHeaderModel } from '../or-sort-header-v3';
3
2
  import { CardCollectionView } from './props';
4
- import { CardCollectionItem, CardCollectionSortHeader } from './types';
3
+ import { CardCollectionItem, ViewMode } from './types';
5
4
  declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
6
5
  root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
6
+ sortMenu: import("@vue/composition-api").Ref<(import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
7
+ [x: string]: ((...args: any[]) => any) | null;
8
+ } | string[], {} & {}, {
9
+ [x: number]: string;
10
+ } | {}, true>)) | undefined>;
11
+ sortButton: import("@vue/composition-api").Ref<(import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
12
+ [x: string]: ((...args: any[]) => any) | null;
13
+ } | string[], {} & {}, {
14
+ [x: number]: string;
15
+ } | {}, true>)) | undefined>;
7
16
  rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
8
17
  toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
9
18
  toolbarPanelStyles: import("@vue/composition-api").ComputedRef<string[]>;
10
- contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
11
- proxyView: import("@vue/composition-api").Ref<CardCollectionView>;
12
- proxySort: import("@vue/composition-api").Ref<{
13
- column: string;
14
- direction: "asc" | "desc";
15
- }>;
19
+ proxyView: import("@vue/composition-api").Ref<string>;
20
+ proxySort: import("@vue/composition-api").Ref<string>;
16
21
  proxySearch: import("@vue/composition-api").Ref<string>;
17
- switchToGridView: () => void;
18
- switchToListView: () => void;
22
+ switchView: (view: string) => void;
23
+ handleSort: (sort: string) => void;
24
+ handleSearch: (search: string) => void;
19
25
  }> & import("@vue/composition-api").Data, {}, {}, {
20
26
  items: {
21
27
  type: PropType<CardCollectionItem[]>;
22
28
  default: CardCollectionItem[];
23
29
  };
24
30
  view: {
25
- type: PropType<CardCollectionView>;
31
+ type: PropType<string>;
26
32
  default: CardCollectionView;
27
33
  };
34
+ viewModes: {
35
+ type: PropType<ViewMode[]>;
36
+ default: () => ViewMode[];
37
+ };
28
38
  sort: {
29
- type: PropType<SortHeaderModel>;
39
+ type: StringConstructor;
30
40
  default: undefined;
31
41
  };
32
- sortHeaders: {
33
- type: PropType<CardCollectionSortHeader[]>;
34
- default: undefined;
42
+ sortOptions: {
43
+ type: PropType<string[]>;
44
+ default: () => never[];
35
45
  };
36
46
  search: {
37
47
  type: StringConstructor;
@@ -43,16 +53,20 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
43
53
  default: CardCollectionItem[];
44
54
  };
45
55
  view: {
46
- type: PropType<CardCollectionView>;
56
+ type: PropType<string>;
47
57
  default: CardCollectionView;
48
58
  };
59
+ viewModes: {
60
+ type: PropType<ViewMode[]>;
61
+ default: () => ViewMode[];
62
+ };
49
63
  sort: {
50
- type: PropType<SortHeaderModel>;
64
+ type: StringConstructor;
51
65
  default: undefined;
52
66
  };
53
- sortHeaders: {
54
- type: PropType<CardCollectionSortHeader[]>;
55
- default: undefined;
67
+ sortOptions: {
68
+ type: PropType<string[]>;
69
+ default: () => never[];
56
70
  };
57
71
  search: {
58
72
  type: StringConstructor;
@@ -60,39 +74,49 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
60
74
  };
61
75
  }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
62
76
  search: string;
63
- sort: SortHeaderModel;
77
+ sort: string;
64
78
  items: CardCollectionItem[];
65
- view: CardCollectionView;
66
- sortHeaders: CardCollectionSortHeader[];
79
+ view: string;
80
+ viewModes: ViewMode[];
81
+ sortOptions: string[];
67
82
  } & {} & {
68
83
  [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
69
84
  }, import("@vue/composition-api").ShallowUnwrapRef<{
70
85
  root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
86
+ sortMenu: import("@vue/composition-api").Ref<(import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
87
+ [x: string]: ((...args: any[]) => any) | null;
88
+ } | string[], {} & {}, {
89
+ [x: number]: string;
90
+ } | {}, true>)) | undefined>;
91
+ sortButton: import("@vue/composition-api").Ref<(import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
92
+ [x: string]: ((...args: any[]) => any) | null;
93
+ } | string[], {} & {}, {
94
+ [x: number]: string;
95
+ } | {}, true>)) | undefined>;
71
96
  rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
72
97
  toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
73
98
  toolbarPanelStyles: import("@vue/composition-api").ComputedRef<string[]>;
74
- contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
75
- proxyView: import("@vue/composition-api").Ref<CardCollectionView>;
76
- proxySort: import("@vue/composition-api").Ref<{
77
- column: string;
78
- direction: "asc" | "desc";
79
- }>;
99
+ proxyView: import("@vue/composition-api").Ref<string>;
100
+ proxySort: import("@vue/composition-api").Ref<string>;
80
101
  proxySearch: import("@vue/composition-api").Ref<string>;
81
- switchToGridView: () => void;
82
- switchToListView: () => void;
102
+ switchView: (view: string) => void;
103
+ handleSort: (sort: string) => void;
104
+ handleSearch: (search: string) => void;
83
105
  }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
84
106
  search: string;
85
- sort: SortHeaderModel;
107
+ sort: string;
86
108
  items: CardCollectionItem[];
87
- view: CardCollectionView;
88
- sortHeaders: CardCollectionSortHeader[];
109
+ view: string;
110
+ viewModes: ViewMode[];
111
+ sortOptions: string[];
89
112
  } & {} & {
90
113
  [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
91
114
  }, {
92
115
  search: string;
93
- sort: SortHeaderModel;
116
+ sort: string;
94
117
  items: CardCollectionItem[];
95
- view: CardCollectionView;
96
- sortHeaders: CardCollectionSortHeader[];
118
+ view: string;
119
+ viewModes: ViewMode[];
120
+ sortOptions: string[];
97
121
  }, true>);
98
122
  export default _default;
@@ -0,0 +1,35 @@
1
+ import { PropType } from 'vue-demi';
2
+ import { CardCollectionItem } from './types';
3
+ import { CardCollectionView } from './props';
4
+ declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
5
+ contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
6
+ }> & import("@vue/composition-api").Data, {}, {}, {
7
+ items: {
8
+ type: PropType<CardCollectionItem[]>;
9
+ default: CardCollectionItem[];
10
+ };
11
+ mode: {
12
+ type: PropType<CardCollectionView>;
13
+ required: true;
14
+ };
15
+ }, import("@vue/composition-api").ExtractPropTypes<{
16
+ items: {
17
+ type: PropType<CardCollectionItem[]>;
18
+ default: CardCollectionItem[];
19
+ };
20
+ mode: {
21
+ type: PropType<CardCollectionView>;
22
+ required: true;
23
+ };
24
+ }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
25
+ items: CardCollectionItem[];
26
+ mode: CardCollectionView;
27
+ } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
28
+ contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
29
+ }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
30
+ items: CardCollectionItem[];
31
+ mode: CardCollectionView;
32
+ } & {}, {
33
+ items: CardCollectionItem[];
34
+ }, true>);
35
+ export default _default;
@@ -0,0 +1,4 @@
1
+ import { ViewMode } from './types';
2
+ export declare const gridView: ViewMode;
3
+ export declare const listView: ViewMode;
4
+ export declare const defaultViewModes: ViewMode[];
@@ -1,11 +1,10 @@
1
- export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../../OrCardCollection-4f001551.js';
1
+ export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../../OrCardCollection-95b051e1.js';
2
2
  import 'vue-demi';
3
3
  import '../../useClassAttribute-47fdb016.js';
4
4
  import '@vueuse/core';
5
- import '../../OrCard-de799db0.js';
6
- import '../../normalize-component-6e8e3d80.js';
7
5
  import '../../OrIconButton-e17e4944.js';
8
6
  import '../../OrIcon-5e394c62.js';
7
+ import '../../normalize-component-6e8e3d80.js';
9
8
  import '../../OrTooltip-513bee30.js';
10
9
  import '../../OrPopover-9bafbdb4.js';
11
10
  import '@floating-ui/dom';
@@ -15,10 +14,14 @@ import '../../OrBottomSheet-16c2e610.js';
15
14
  import '../../OrOverlay-18ba2dc6.js';
16
15
  import '../../OrTeleport.vue2-fb92f29f.js';
17
16
  import 'portal-vue';
17
+ import '../../OrMenu-df27d0ef.js';
18
+ import '../../OrMenuItem-c7f28480.js';
19
+ import '../../OrButton-357a5756.js';
20
+ import '../../OrLoader-f857d55b.js';
21
+ import '../../OrSearch-ddb7c1fe.js';
18
22
  import '../../OrInput-2f16a7ac.js';
19
23
  import '../../OrError-d267ee9a.js';
20
24
  import '../../OrHint-42dc9ebb.js';
21
25
  import '../../OrInputBox-4d5a318d.js';
22
26
  import '../../OrLabel-2a9f1477.js';
23
27
  import '../../browser-82dea9ed.js';
24
- import '../../OrSortHeader-19bf94ca.js';
@@ -1,7 +1,8 @@
1
1
  export interface CardCollectionItem {
2
- id: string;
2
+ key?: string;
3
+ [key: string | number]: any;
3
4
  }
4
- export interface CardCollectionSortHeader {
5
- value: string;
6
- label: string;
5
+ export interface ViewMode {
6
+ view: string;
7
+ icon: string;
7
8
  }
@@ -8,7 +8,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
8
8
  export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from './OrButton-357a5756.js';
9
9
  export { _ as OrCard } from './OrCard-b7268256.js';
10
10
  export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from './OrCardCollection-f6b07557.js';
11
- export { C as CardCollectionView, _ as OrCardCollectionV3 } from './OrCardCollection-4f001551.js';
11
+ export { C as CardCollectionView, _ as OrCardCollectionV3 } from './OrCardCollection-95b051e1.js';
12
12
  export { _ as OrCardV3 } from './OrCard-de799db0.js';
13
13
  export { a as OrCarousel, _ as OrCarouselItem } from './OrCarouselItem-4e2cf3d8.js';
14
14
  export { _ as OrCheckbox } from './OrCheckbox-915f1f0a.js';