@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,274 @@
1
+ import { defineComponent, computed, ref, watch } from 'vue-demi';
2
+ import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
3
+ import '@vueuse/core';
4
+ import { s as script$2 } from './OrIconButton-1eebcafc.js';
5
+ import { s as script$4 } from './OrMenu-840038cd.js';
6
+ import './OrPopover-1075dd38.js';
7
+ import { s as script$5 } from './OrMenuItem-9da279f6.js';
8
+ import { s as script$6 } from './OrIcon-b195169c.js';
9
+ import { openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, mergeProps, createTextVNode, toDisplayString, resolveComponent, createElementVNode, createVNode, withCtx, createBlock, createCommentVNode, normalizeProps, guardReactiveProps } from 'vue';
10
+ import { s as script$3 } from './OrButton-f4b9ee51.js';
11
+ import { s as script$7 } from './OrSearch-cdde55ce.js';
12
+ import './OrInputBox-5247ab25.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
+ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
70
+ return openBlock(), createElementBlock("div", {
71
+ class: normalizeClass(_ctx.contentStyles)
72
+ }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
73
+ return renderSlot(_ctx.$slots, "item", mergeProps({
74
+ key: item.key || index
75
+ }, {
76
+ item,
77
+ mode: _ctx.mode
78
+ }), () => [createTextVNode(toDisplayString(item.key), 1 /* TEXT */)]);
79
+ }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */);
80
+ }
81
+
82
+ script$1.render = render$1;
83
+ script$1.__file = "src/components/or-card-collection-v3/OrCardCollectionView.vue3.vue";
84
+
85
+ const gridView = {
86
+ view: 'grid',
87
+ icon: 'grid_view'
88
+ };
89
+ const listView = {
90
+ view: 'list',
91
+ icon: 'view_agenda'
92
+ };
93
+ const defaultViewModes = [gridView, listView];
94
+
95
+ var script = defineComponent({
96
+ name: 'OrCardCollection',
97
+ components: {
98
+ OrCardCollectionView: script$1,
99
+ OrIconButton: script$2,
100
+ OrButton: script$3,
101
+ OrMenu: script$4,
102
+ OrMenuItem: script$5,
103
+ OrIcon: script$6,
104
+ OrSearch: script$7
105
+ },
106
+ inheritAttrs: false,
107
+ props: {
108
+ items: {
109
+ type: Array,
110
+ default: []
111
+ },
112
+ view: {
113
+ type: String,
114
+ default: CardCollectionView.Grid
115
+ },
116
+ viewModes: {
117
+ type: Array,
118
+ default: () => defaultViewModes
119
+ },
120
+ sort: {
121
+ type: String,
122
+ default: undefined
123
+ },
124
+ sortOptions: {
125
+ type: Array,
126
+ default: () => []
127
+ },
128
+ search: {
129
+ type: String,
130
+ default: undefined
131
+ }
132
+ },
133
+ emits: ['viewChange', 'sortChange', 'searchChange'],
134
+ expose: ['root'],
135
+ setup(props, context) {
136
+ // Refs
137
+ const root = ref();
138
+ const sortMenu = ref();
139
+ const sortButton = ref();
140
+ // Styles
141
+ const classAttribute = useClassAttribute();
142
+ const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
143
+ const toolbarStyles = computed(() => [...CardCollectionToolbar]);
144
+ const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
145
+ // State
146
+ const proxyView = ref(props.view);
147
+ const proxySort = ref(props.sort);
148
+ const proxySearch = ref(props.search);
149
+ // Methods
150
+ function switchView(view) {
151
+ proxyView.value = view;
152
+ }
153
+ function handleSort(sort) {
154
+ proxySort.value = sort;
155
+ }
156
+ function handleSearch(search) {
157
+ proxySearch.value = search;
158
+ }
159
+ // Effects
160
+ watch(() => props.view, value => {
161
+ proxyView.value = value;
162
+ });
163
+ watch(proxyView, value => {
164
+ context.emit('viewChange', value);
165
+ });
166
+ watch(() => props.sort, value => {
167
+ proxySort.value = value;
168
+ });
169
+ watch(proxySort, value => {
170
+ context.emit('sortChange', value);
171
+ });
172
+ watch(() => props.search, value => {
173
+ proxySearch.value = value;
174
+ });
175
+ watch(proxySearch, value => {
176
+ context.emit('searchChange', value);
177
+ });
178
+ return {
179
+ root,
180
+ sortMenu,
181
+ sortButton,
182
+ rootStyles,
183
+ toolbarStyles,
184
+ toolbarPanelStyles,
185
+ proxyView,
186
+ proxySort,
187
+ proxySearch,
188
+ switchView,
189
+ handleSort,
190
+ handleSearch
191
+ };
192
+ }
193
+ });
194
+
195
+ const _hoisted_1 = {
196
+ class: "layout-row gap-sm"
197
+ };
198
+ function render(_ctx, _cache, $props, $setup, $data, $options) {
199
+ const _component_OrIcon = resolveComponent("OrIcon");
200
+ const _component_OrButton = resolveComponent("OrButton");
201
+ const _component_OrMenuItem = resolveComponent("OrMenuItem");
202
+ const _component_OrMenu = resolveComponent("OrMenu");
203
+ const _component_OrSearch = resolveComponent("OrSearch");
204
+ const _component_OrIconButton = resolveComponent("OrIconButton");
205
+ const _component_OrCardCollectionView = resolveComponent("OrCardCollectionView");
206
+ return openBlock(), createElementBlock("div", mergeProps({
207
+ ref: "root"
208
+ }, _ctx.$attrs, {
209
+ class: _ctx.rootStyles
210
+ }), [createElementVNode("div", {
211
+ class: normalizeClass(_ctx.toolbarStyles)
212
+ }, [createElementVNode("div", {
213
+ class: normalizeClass(_ctx.toolbarPanelStyles)
214
+ }, [_ctx.sortOptions.length ? (openBlock(), createElementBlock(Fragment, {
215
+ key: 0
216
+ }, [createVNode(_component_OrButton, {
217
+ ref: "sortButton",
218
+ variant: "link",
219
+ color: "inherit",
220
+ onClick: _cache[0] || (_cache[0] = $event => _ctx.sortMenu.toggle())
221
+ }, {
222
+ default: withCtx(() => [createTextVNode(toDisplayString(_ctx.proxySort) + " ", 1 /* TEXT */), _ctx.sortMenu ? (openBlock(), createBlock(_component_OrIcon, {
223
+ key: 0,
224
+ icon: _ctx.sortMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
225
+ }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)]),
226
+ _: 1 /* STABLE */
227
+ }, 512 /* NEED_PATCH */), createVNode(_component_OrMenu, {
228
+ ref: "sortMenu",
229
+ trigger: _ctx.sortButton && _ctx.sortButton.root
230
+ }, {
231
+ default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sortOptions, sortItem => {
232
+ return openBlock(), createBlock(_component_OrMenuItem, {
233
+ key: sortItem,
234
+ onClick: $event => _ctx.handleSort(sortItem)
235
+ }, {
236
+ default: withCtx(() => [createTextVNode(toDisplayString(sortItem), 1 /* TEXT */)]),
237
+
238
+ _: 2 /* DYNAMIC */
239
+ }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
240
+ }), 128 /* KEYED_FRAGMENT */))]),
241
+
242
+ _: 1 /* STABLE */
243
+ }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */), createElementVNode("div", {
244
+ class: normalizeClass(_ctx.toolbarPanelStyles)
245
+ }, [createVNode(_component_OrSearch, {
246
+ class: "md:w-[350px]",
247
+ size: "s",
248
+ onSearch: _ctx.handleSearch
249
+ }, null, 8 /* PROPS */, ["onSearch"]), createElementVNode("div", _hoisted_1, [_ctx.viewModes.length > 1 ? (openBlock(true), createElementBlock(Fragment, {
250
+ key: 0
251
+ }, renderList(_ctx.viewModes, viewOption => {
252
+ return openBlock(), createBlock(_component_OrIconButton, {
253
+ key: viewOption.view,
254
+ icon: {
255
+ icon: viewOption.icon,
256
+ variant: viewOption.view === _ctx.proxyView ? 'filled' : 'outlined'
257
+ },
258
+ onClick: $event => _ctx.switchView(viewOption.view)
259
+ }, null, 8 /* PROPS */, ["icon", "onClick"]);
260
+ }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "addon")])], 2 /* CLASS */)], 2 /* CLASS */), renderSlot(_ctx.$slots, _ctx.proxyView, normalizeProps(guardReactiveProps({
261
+ items: _ctx.items
262
+ })), () => [createVNode(_component_OrCardCollectionView, {
263
+ items: _ctx.items,
264
+ mode: _ctx.proxyView
265
+ }, {
266
+ item: withCtx(props => [renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(props)))]),
267
+ _: 3 /* FORWARDED */
268
+ }, 8 /* PROPS */, ["items", "mode"])])], 16 /* FULL_PROPS */);
269
+ }
270
+
271
+ script.render = render;
272
+ script.__file = "src/components/or-card-collection-v3/OrCardCollection.vue";
273
+
274
+ export { CardCollectionView as C, script as s };
@@ -6,7 +6,7 @@ export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTT
6
6
  export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../OrButton-f4b9ee51.js';
7
7
  export { s as OrCard } from '../OrCard-e3a5aea4.js';
8
8
  export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from '../OrCardCollection-a5e326ef.js';
9
- export { C as CardCollectionView, s as OrCardCollectionV3 } from '../OrCardCollection-5a0febaf.js';
9
+ export { C as CardCollectionView, s as OrCardCollectionV3 } from '../OrCardCollection-afd863fc.js';
10
10
  export { s as OrCardV3 } from '../OrCard-fd92f7c8.js';
11
11
  export { a as OrCarousel, s as OrCarouselItem } from '../OrCarouselItem-636d99a1.js';
12
12
  export { s as OrCheckbox } from '../OrCheckbox-ed4a19cf.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, s as OrCardCollectionV3 } from '../../OrCardCollection-5a0febaf.js';
1
+ export { C as CardCollectionView, s as OrCardCollectionV3 } from '../../OrCardCollection-afd863fc.js';
2
2
  import 'vue-demi';
3
3
  import '../../useClassAttribute-47fdb016.js';
4
4
  import '@vueuse/core';
5
- import '../../OrCard-fd92f7c8.js';
6
- import 'vue';
7
5
  import '../../OrIconButton-1eebcafc.js';
8
6
  import '../../OrIcon-b195169c.js';
7
+ import 'vue';
9
8
  import '../../OrTooltip-50d27b4f.js';
10
9
  import '../../OrPopover-1075dd38.js';
11
10
  import '@floating-ui/dom';
@@ -14,10 +13,14 @@ import '../../useResponsive-a02e95b7.js';
14
13
  import '../../OrBottomSheet-62817aec.js';
15
14
  import '../../OrOverlay-738a44d5.js';
16
15
  import '../../OrTeleport.vue3-8099178c.js';
16
+ import '../../OrMenu-840038cd.js';
17
+ import '../../OrMenuItem-9da279f6.js';
18
+ import '../../OrButton-f4b9ee51.js';
19
+ import '../../OrLoader-b3cf4231.js';
20
+ import '../../OrSearch-cdde55ce.js';
17
21
  import '../../OrInput-41691fb3.js';
18
22
  import '../../OrError-ec8c709d.js';
19
23
  import '../../OrHint-74bb732d.js';
20
24
  import '../../OrInputBox-5247ab25.js';
21
25
  import '../../OrLabel-bdaec602.js';
22
26
  import '../../style-inject.es-4c6f2515.js';
23
- import '../../OrSortHeader-fe1a9cf8.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
  }
@@ -6,7 +6,7 @@ export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTT
6
6
  export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-f4b9ee51.js';
7
7
  export { s as OrCard } from './OrCard-e3a5aea4.js';
8
8
  export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-a5e326ef.js';
9
- export { C as CardCollectionView, s as OrCardCollectionV3 } from './OrCardCollection-5a0febaf.js';
9
+ export { C as CardCollectionView, s as OrCardCollectionV3 } from './OrCardCollection-afd863fc.js';
10
10
  export { s as OrCardV3 } from './OrCard-fd92f7c8.js';
11
11
  export { a as OrCarousel, s as OrCarouselItem } from './OrCarouselItem-636d99a1.js';
12
12
  export { s as OrCheckbox } from './OrCheckbox-ed4a19cf.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/ui-components",
3
- "version": "2.69.0",
3
+ "version": "2.69.1-beta.2089.0",
4
4
  "description": "Vue components library for v2/3",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/auto/index.js",
@@ -123,6 +123,5 @@
123
123
  "default": "./dist/bundled/v3/components/*/index.js"
124
124
  },
125
125
  "./package.json": "./package.json"
126
- },
127
- "gitHead": "90a21b61b8b152ffd466ba61d829d19c734942a7"
126
+ }
128
127
  }