@onereach/ui-components 2.68.1-beta.2067.0 → 2.68.1-beta.2068.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 (76) hide show
  1. package/dist/bundled/v2/{OrCard-29116e1f.js → OrCard-58a1ba3e.js} +2 -2
  2. package/dist/bundled/v2/{OrCardCollection-94a30a19.js → OrCardCollection-dac9fd1e.js} +53 -144
  3. package/dist/bundled/v2/{OrSearch-3ece0ef6.js → OrSearch-e34afaee.js} +2 -2
  4. package/dist/bundled/v2/{OrSelect-68aacb62.js → OrSelect-5fef3ccd.js} +1 -1
  5. package/dist/bundled/v2/{OrSortHeader-9932d28f.js → OrSortHeader-396e6a7c.js} +2 -2
  6. package/dist/bundled/v2/components/index.js +6 -6
  7. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -3
  8. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +28 -42
  9. package/dist/bundled/v2/components/or-card-collection-v3/index.js +4 -7
  10. package/dist/bundled/v2/components/or-card-collection-v3/types.d.ts +1 -1
  11. package/dist/bundled/v2/components/or-card-v3/index.js +1 -1
  12. package/dist/bundled/v2/components/or-search-v3/index.js +1 -1
  13. package/dist/bundled/v2/components/or-select-v3/index.js +2 -2
  14. package/dist/bundled/v2/components/or-sort-header-v3/index.js +1 -1
  15. package/dist/bundled/v2/components/or-tag-v3/OrTag.stories3.d.ts +5 -0
  16. package/dist/bundled/v2/hooks/index.js +1 -1
  17. package/dist/bundled/v2/index.js +7 -7
  18. package/dist/bundled/v2/{useOverflow-43299d81.js → useOverflow-bfea931e.js} +7 -3
  19. package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-0e029303.js → OrCardCollection.vue_vue_type_script_lang-7a07be47.js} +48 -98
  20. package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-18997376.js → OrConfirm.vue_vue_type_script_lang-2e7fa659.js} +36 -6
  21. package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-147a1fb9.js → OrSearch.vue_vue_type_script_lang-1d2a20e0.js} +1 -1
  22. package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-58b92fb0.js → OrSelect.vue_vue_type_script_lang-6fd881cf.js} +1 -1
  23. package/dist/bundled/v3/{OrTabs.vue_vue_type_script_lang-61b79a5a.js → OrTabs.vue_vue_type_script_lang-919b2021.js} +36 -10
  24. package/dist/bundled/v3/components/index.js +9 -11
  25. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -3
  26. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +28 -42
  27. package/dist/bundled/v3/components/or-card-collection-v3/index.js +4 -11
  28. package/dist/bundled/v3/components/or-card-collection-v3/types.d.ts +1 -1
  29. package/dist/bundled/v3/components/or-confirm-v3/index.js +1 -2
  30. package/dist/bundled/v3/components/or-search-v3/index.js +1 -1
  31. package/dist/bundled/v3/components/or-select-v3/index.js +2 -2
  32. package/dist/bundled/v3/components/or-tabs-v3/index.js +1 -2
  33. package/dist/bundled/v3/components/or-tag-v3/OrTag.stories3.d.ts +5 -0
  34. package/dist/bundled/v3/hooks/index.js +1 -1
  35. package/dist/bundled/v3/index.js +301 -316
  36. package/dist/bundled/v3/{useOverflow-2468b718.js → useOverflow-f7916ce2.js} +7 -3
  37. package/dist/esm/v2/{OrCardCollection-54648673.js → OrCardCollection-e46b220e.js} +52 -144
  38. package/dist/esm/v2/{OrSelect-0e6e7868.js → OrSelect-81c1173a.js} +1 -1
  39. package/dist/esm/v2/components/index.js +3 -3
  40. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -3
  41. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +28 -42
  42. package/dist/esm/v2/components/or-card-collection-v3/index.js +4 -7
  43. package/dist/esm/v2/components/or-card-collection-v3/types.d.ts +1 -1
  44. package/dist/esm/v2/components/or-select-v3/index.js +2 -2
  45. package/dist/esm/v2/components/or-tag-v3/OrTag.stories3.d.ts +5 -0
  46. package/dist/esm/v2/hooks/index.js +1 -1
  47. package/dist/esm/v2/index.js +3 -3
  48. package/dist/esm/v2/{useOverflow-ac506c65.js → useOverflow-2f535f6c.js} +7 -3
  49. package/dist/esm/v3/OrCardCollection-5924d035.js +198 -0
  50. package/dist/esm/v3/{OrSelect-2e00d4c8.js → OrSelect-fe1566ac.js} +1 -1
  51. package/dist/esm/v3/components/index.js +3 -3
  52. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -3
  53. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +28 -42
  54. package/dist/esm/v3/components/or-card-collection-v3/index.js +4 -7
  55. package/dist/esm/v3/components/or-card-collection-v3/types.d.ts +1 -1
  56. package/dist/esm/v3/components/or-select-v3/index.js +2 -2
  57. package/dist/esm/v3/components/or-tag-v3/OrTag.stories3.d.ts +5 -0
  58. package/dist/esm/v3/hooks/index.js +1 -1
  59. package/dist/esm/v3/index.js +3 -3
  60. package/dist/esm/v3/{useOverflow-ac506c65.js → useOverflow-2f535f6c.js} +7 -3
  61. package/package.json +1 -1
  62. package/src/components/or-card-collection-v3/OrCardCollection.stories3.ts +19 -115
  63. package/src/components/or-card-collection-v3/OrCardCollection.vue +67 -93
  64. package/src/components/or-card-collection-v3/styles.ts +1 -1
  65. package/src/components/or-card-collection-v3/types.ts +1 -1
  66. package/src/components/or-tag-v3/OrTag.stories3.ts +112 -0
  67. package/src/hooks/useOverflow.ts +3 -2
  68. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollectionView.vue2.vue.d.ts +0 -35
  69. package/dist/bundled/v3/OrButton-8ab33d9d.js +0 -33
  70. package/dist/bundled/v3/OrMenu-f26e8e55.js +0 -29
  71. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts +0 -35
  72. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollectionView.vue2.vue.d.ts +0 -35
  73. package/dist/esm/v3/OrCardCollection-9d0036fa.js +0 -259
  74. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts +0 -35
  75. package/src/components/or-card-collection-v3/OrCardCollectionView.vue2.vue +0 -39
  76. package/src/components/or-card-collection-v3/OrCardCollectionView.vue3.vue +0 -40
@@ -1,35 +0,0 @@
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;
@@ -1,35 +0,0 @@
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;
@@ -1,259 +0,0 @@
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, resolveComponent, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, normalizeProps, guardReactiveProps } from 'vue';
10
- import { s as script$3 } from './OrButton-f4b9ee51.js';
11
- import { s as script$7 } from './OrSearch-01225d82.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
- }));
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
- var script = defineComponent({
86
- name: 'OrCardCollection',
87
- components: {
88
- OrCardCollectionView: script$1,
89
- OrIconButton: script$2,
90
- OrButton: script$3,
91
- OrMenu: script$4,
92
- OrMenuItem: script$5,
93
- OrIcon: script$6,
94
- OrSearch: script$7
95
- },
96
- inheritAttrs: false,
97
- props: {
98
- items: {
99
- type: Array,
100
- default: []
101
- },
102
- view: {
103
- type: String,
104
- default: CardCollectionView.Grid
105
- },
106
- sort: {
107
- type: String,
108
- required: true
109
- },
110
- sortOptions: {
111
- type: Array,
112
- default: () => []
113
- },
114
- search: {
115
- type: String,
116
- default: undefined
117
- }
118
- },
119
- emits: ['viewChange', 'sortChange', 'searchChange'],
120
- expose: ['root'],
121
- setup(props, context) {
122
- // Refs
123
- const root = ref();
124
- const sortMenu = ref();
125
- const sortButton = ref();
126
- // Styles
127
- const classAttribute = useClassAttribute();
128
- const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
129
- const toolbarStyles = computed(() => [...CardCollectionToolbar]);
130
- const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
131
- // State
132
- const proxyView = ref(props.view);
133
- const proxySort = ref(props.sort);
134
- const proxySearch = ref(props.search);
135
- // Methods
136
- function switchToGridView() {
137
- proxyView.value = CardCollectionView.Grid;
138
- }
139
- function switchToListView() {
140
- proxyView.value = CardCollectionView.List;
141
- }
142
- function handleSort(sort) {
143
- proxySort.value = sort;
144
- }
145
- function handleSearch(search) {
146
- proxySearch.value = search;
147
- }
148
- // Effects
149
- watch(() => props.view, value => {
150
- proxyView.value = value;
151
- });
152
- watch(proxyView, value => {
153
- context.emit('viewChange', value);
154
- });
155
- watch(() => props.sort, value => {
156
- proxySort.value = value;
157
- });
158
- watch(proxySort, value => {
159
- context.emit('sortChange', value);
160
- });
161
- watch(() => props.search, value => {
162
- proxySearch.value = value;
163
- });
164
- watch(proxySearch, value => {
165
- context.emit('searchChange', value);
166
- });
167
- return {
168
- root,
169
- sortMenu,
170
- sortButton,
171
- rootStyles,
172
- toolbarStyles,
173
- toolbarPanelStyles,
174
- proxyView,
175
- proxySort,
176
- proxySearch,
177
- switchToGridView,
178
- switchToListView,
179
- handleSort,
180
- handleSearch
181
- };
182
- }
183
- });
184
-
185
- const _hoisted_1 = {
186
- class: "layout-row gap-sm"
187
- };
188
- function render(_ctx, _cache, $props, $setup, $data, $options) {
189
- const _component_OrIcon = resolveComponent("OrIcon");
190
- const _component_OrButton = resolveComponent("OrButton");
191
- const _component_OrMenuItem = resolveComponent("OrMenuItem");
192
- const _component_OrMenu = resolveComponent("OrMenu");
193
- const _component_OrSearch = resolveComponent("OrSearch");
194
- const _component_OrIconButton = resolveComponent("OrIconButton");
195
- const _component_OrCardCollectionView = resolveComponent("OrCardCollectionView");
196
- return openBlock(), createElementBlock("div", mergeProps({
197
- ref: "root"
198
- }, _ctx.$attrs, {
199
- class: _ctx.rootStyles
200
- }), [createElementVNode("div", {
201
- class: normalizeClass(_ctx.toolbarStyles)
202
- }, [createElementVNode("div", {
203
- class: normalizeClass(_ctx.toolbarPanelStyles)
204
- }, [_ctx.sortOptions.length ? (openBlock(), createElementBlock(Fragment, {
205
- key: 0
206
- }, [createVNode(_component_OrButton, {
207
- ref: "sortButton",
208
- variant: "link",
209
- color: "inherit",
210
- onClick: _cache[0] || (_cache[0] = $event => _ctx.sortMenu.toggle())
211
- }, {
212
- default: withCtx(() => [createTextVNode(toDisplayString(_ctx.proxySort) + " ", 1 /* TEXT */), _ctx.sortMenu ? (openBlock(), createBlock(_component_OrIcon, {
213
- key: 0,
214
- icon: _ctx.sortMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
215
- }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)]),
216
- _: 1 /* STABLE */
217
- }, 512 /* NEED_PATCH */), createVNode(_component_OrMenu, {
218
- ref: "sortMenu",
219
- trigger: _ctx.sortButton && _ctx.sortButton.root
220
- }, {
221
- default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sortOptions, sortItem => {
222
- return openBlock(), createBlock(_component_OrMenuItem, {
223
- key: sortItem,
224
- onClick: $event => _ctx.handleSort(sortItem)
225
- }, {
226
- default: withCtx(() => [createTextVNode(toDisplayString(sortItem), 1 /* TEXT */)]),
227
-
228
- _: 2 /* DYNAMIC */
229
- }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
230
- }), 128 /* KEYED_FRAGMENT */))]),
231
-
232
- _: 1 /* STABLE */
233
- }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */), createElementVNode("div", {
234
- class: normalizeClass(_ctx.toolbarPanelStyles)
235
- }, [createVNode(_component_OrSearch, {
236
- class: "md:w-[350px]",
237
- size: "s",
238
- onSearch: _ctx.handleSearch
239
- }, null, 8 /* PROPS */, ["onSearch"]), createElementVNode("div", _hoisted_1, [createVNode(_component_OrIconButton, {
240
- icon: 'grid_view',
241
- onClick: _cache[1] || (_cache[1] = $event => _ctx.switchToGridView())
242
- }), createVNode(_component_OrIconButton, {
243
- icon: 'view_agenda',
244
- onClick: _cache[2] || (_cache[2] = $event => _ctx.switchToListView())
245
- }), renderSlot(_ctx.$slots, "addon")])], 2 /* CLASS */)], 2 /* CLASS */), renderSlot(_ctx.$slots, _ctx.proxyView, normalizeProps(guardReactiveProps({
246
- items: _ctx.items
247
- })), () => [createVNode(_component_OrCardCollectionView, {
248
- items: _ctx.items,
249
- mode: _ctx.proxyView
250
- }, {
251
- item: withCtx(props => [renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(props)))]),
252
- _: 3 /* FORWARDED */
253
- }, 8 /* PROPS */, ["items", "mode"])])], 16 /* FULL_PROPS */);
254
- }
255
-
256
- script.render = render;
257
- script.__file = "src/components/or-card-collection-v3/OrCardCollection.vue";
258
-
259
- export { CardCollectionView as C, script as s };
@@ -1,35 +0,0 @@
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;
@@ -1,39 +0,0 @@
1
- <template>
2
- <div :class="contentStyles">
3
- <slot
4
- v-for="(item) in items"
5
- name="item"
6
- v-bind="{
7
- item,
8
- mode,
9
- }"
10
- />
11
- </div>
12
- </template>
13
- <script lang="ts">
14
- import { defineComponent, computed, PropType } from 'vue-demi';
15
- import { CardCollectionContent, CardCollectionContentViews } from './styles';
16
- import { CardCollectionItem } from './types';
17
- import { CardCollectionView } from './props';
18
-
19
- export default defineComponent({
20
- name: 'OrCardCollectionView',
21
- props: {
22
- items: {
23
- type: Array as PropType<CardCollectionItem[]>,
24
- default: [] as CardCollectionItem[],
25
- },
26
- mode: {
27
- type: String as PropType<CardCollectionView>,
28
- required: true,
29
- },
30
- },
31
- setup(props) {
32
- const contentStyles = computed(() => [
33
- ...CardCollectionContent,
34
- ...CardCollectionContentViews[props.mode],
35
- ]);
36
- return { contentStyles };
37
- },
38
- });
39
- </script>
@@ -1,40 +0,0 @@
1
- <template>
2
- <div :class="contentStyles">
3
- <slot
4
- v-for="(item, index) in items"
5
- :key="item.key || index"
6
- name="item"
7
- v-bind="{
8
- item,
9
- mode,
10
- }"
11
- />
12
- </div>
13
- </template>
14
- <script lang="ts">
15
- import { defineComponent, computed, PropType } from 'vue-demi';
16
- import { CardCollectionContent, CardCollectionContentViews } from './styles';
17
- import { CardCollectionItem } from './types';
18
- import { CardCollectionView } from './props';
19
-
20
- export default defineComponent({
21
- name: 'OrCardCollectionView',
22
- props: {
23
- items: {
24
- type: Array as PropType<CardCollectionItem[]>,
25
- default: [] as CardCollectionItem[],
26
- },
27
- mode: {
28
- type: String as PropType<CardCollectionView>,
29
- required: true,
30
- },
31
- },
32
- setup(props) {
33
- const contentStyles = computed(() => [
34
- ...CardCollectionContent,
35
- ...CardCollectionContentViews[props.mode],
36
- ]);
37
- return { contentStyles };
38
- },
39
- });
40
- </script>