@onereach/ui-components 2.69.2-beta.2123.0 → 2.69.2-beta.2128.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 (123) hide show
  1. package/dist/bundled/v2/{OrAvatar-2fa559e1.js → OrAvatar-ae61bfb9.js} +41 -15
  2. package/dist/bundled/v2/{OrCard-29116e1f.js → OrCard-58a1ba3e.js} +2 -2
  3. package/dist/bundled/v2/OrCardCollection-a9a779ea.js +228 -0
  4. package/dist/bundled/v2/{OrSearch-a11b3621.js → OrSearch-9d402f56.js} +3 -9
  5. package/dist/bundled/v2/{OrSortHeader-9932d28f.js → OrSortHeader-396e6a7c.js} +2 -2
  6. package/dist/bundled/v2/components/index.js +5 -5
  7. package/dist/bundled/v2/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  8. package/dist/bundled/v2/components/or-avatar-v3/OrAvatar.vue.d.ts +11 -0
  9. package/dist/bundled/v2/components/or-avatar-v3/index.js +2 -1
  10. package/dist/bundled/v2/components/or-avatar-v3/props.d.ts +2 -1
  11. package/dist/bundled/v2/components/or-avatar-v3/styles.d.ts +2 -0
  12. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -5
  13. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +42 -67
  14. package/dist/bundled/v2/components/or-card-collection-v3/index.js +4 -7
  15. package/dist/bundled/v2/components/or-card-collection-v3/props.d.ts +1 -5
  16. package/dist/bundled/v2/components/or-card-collection-v3/styles.d.ts +2 -2
  17. package/dist/bundled/v2/components/or-card-collection-v3/types.d.ts +3 -8
  18. package/dist/bundled/v2/components/or-card-v3/index.js +1 -1
  19. package/dist/bundled/v2/components/or-search-v3/OrSearch.vue.d.ts +0 -13
  20. package/dist/bundled/v2/components/or-search-v3/index.js +1 -1
  21. package/dist/bundled/v2/components/or-sort-header-v3/index.js +1 -1
  22. package/dist/bundled/v2/index.js +6 -6
  23. package/dist/bundled/v3/{OrAvatar.vue_vue_type_script_lang-22e46ce1.js → OrAvatar.vue_vue_type_script_lang-0426862b.js} +35 -13
  24. package/dist/bundled/v3/OrCardCollection.vue_vue_type_script_lang-861158b5.js +164 -0
  25. package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-85472b12.js → OrConfirm.vue_vue_type_script_lang-289b5600.js} +36 -6
  26. package/dist/bundled/v3/{OrIconButton-4bd33e3c.js → OrIconButton-1581013c.js} +1 -1
  27. package/dist/bundled/v3/{OrIconButton.vue_vue_type_script_lang-641f6e06.js → OrIconButton.vue_vue_type_script_lang-f6f801ff.js} +1 -1
  28. package/dist/bundled/v3/{OrInlineInput.vue_vue_type_script_lang-3a8189f4.js → OrInlineInput.vue_vue_type_script_lang-f29483f4.js} +2 -2
  29. package/dist/bundled/v3/{OrInlineTextarea.vue_vue_type_script_lang-890b97ab.js → OrInlineTextarea.vue_vue_type_script_lang-cc40af48.js} +2 -2
  30. package/dist/bundled/v3/OrInput.vue_vue_type_script_lang-f6d793d3.js +2 -2
  31. package/dist/bundled/v3/{OrModal.vue_vue_type_script_lang-00a477f0.js → OrModal.vue_vue_type_script_lang-80a7b906.js} +2 -2
  32. package/dist/bundled/v3/OrNotification.vue_vue_type_script_lang-fbb35355.js +2 -2
  33. package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-0ae8a6dd.js → OrSearch.vue_vue_type_script_lang-ed78b21f.js} +2 -8
  34. package/dist/bundled/v3/OrSelect.vue_vue_type_script_lang-15285ce4.js +1 -1
  35. package/dist/bundled/v3/{OrTabs.vue_vue_type_script_lang-61b79a5a.js → OrTabs.vue_vue_type_script_lang-919b2021.js} +36 -10
  36. package/dist/bundled/v3/{OrTag.vue_vue_type_script_lang-92d9fb12.js → OrTag.vue_vue_type_script_lang-dc6a4011.js} +2 -2
  37. package/dist/bundled/v3/{OrToastContainer-afb51e5d.js → OrToastContainer-7c3c0b12.js} +1 -1
  38. package/dist/bundled/v3/components/index.js +15 -17
  39. package/dist/bundled/v3/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  40. package/dist/bundled/v3/components/or-avatar-v3/OrAvatar.vue.d.ts +11 -0
  41. package/dist/bundled/v3/components/or-avatar-v3/index.js +3 -1
  42. package/dist/bundled/v3/components/or-avatar-v3/props.d.ts +2 -1
  43. package/dist/bundled/v3/components/or-avatar-v3/styles.d.ts +2 -0
  44. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -5
  45. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +42 -67
  46. package/dist/bundled/v3/components/or-card-collection-v3/index.js +6 -13
  47. package/dist/bundled/v3/components/or-card-collection-v3/props.d.ts +1 -5
  48. package/dist/bundled/v3/components/or-card-collection-v3/styles.d.ts +2 -2
  49. package/dist/bundled/v3/components/or-card-collection-v3/types.d.ts +3 -8
  50. package/dist/bundled/v3/components/or-confirm-v3/index.js +3 -4
  51. package/dist/bundled/v3/components/or-icon-button-v3/index.js +1 -1
  52. package/dist/bundled/v3/components/or-inline-input-v3/index.js +3 -3
  53. package/dist/bundled/v3/components/or-inline-textarea-v3/index.js +3 -3
  54. package/dist/bundled/v3/components/or-input-v3/index.js +2 -2
  55. package/dist/bundled/v3/components/or-modal-v3/index.js +3 -3
  56. package/dist/bundled/v3/components/or-notification-v3/index.js +2 -2
  57. package/dist/bundled/v3/components/or-search-v3/OrSearch.vue.d.ts +0 -13
  58. package/dist/bundled/v3/components/or-search-v3/index.js +3 -3
  59. package/dist/bundled/v3/components/or-select-v3/index.js +3 -3
  60. package/dist/bundled/v3/components/or-tabs-v3/index.js +1 -2
  61. package/dist/bundled/v3/components/or-tag-v3/index.js +3 -3
  62. package/dist/bundled/v3/components/or-toast-v3/index.js +4 -4
  63. package/dist/bundled/v3/index.js +314 -339
  64. package/dist/bundled/v3/{types-6c5eee23.js → types-dcc78caa.js} +2 -2
  65. package/dist/esm/v2/{OrAvatar-0afdef36.js → OrAvatar-3d155af3.js} +41 -15
  66. package/dist/esm/v2/OrCardCollection-4f001551.js +227 -0
  67. package/dist/esm/v2/{OrSearch-62d91301.js → OrSearch-ddb7c1fe.js} +1 -7
  68. package/dist/esm/v2/components/index.js +3 -3
  69. package/dist/esm/v2/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  70. package/dist/esm/v2/components/or-avatar-v3/OrAvatar.vue.d.ts +11 -0
  71. package/dist/esm/v2/components/or-avatar-v3/index.js +2 -1
  72. package/dist/esm/v2/components/or-avatar-v3/props.d.ts +2 -1
  73. package/dist/esm/v2/components/or-avatar-v3/styles.d.ts +2 -0
  74. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -5
  75. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +42 -67
  76. package/dist/esm/v2/components/or-card-collection-v3/index.js +4 -7
  77. package/dist/esm/v2/components/or-card-collection-v3/props.d.ts +1 -5
  78. package/dist/esm/v2/components/or-card-collection-v3/styles.d.ts +2 -2
  79. package/dist/esm/v2/components/or-card-collection-v3/types.d.ts +3 -8
  80. package/dist/esm/v2/components/or-search-v3/OrSearch.vue.d.ts +0 -13
  81. package/dist/esm/v2/components/or-search-v3/index.js +1 -1
  82. package/dist/esm/v2/index.js +3 -3
  83. package/dist/esm/v3/{OrAvatar-ef88d31c.js → OrAvatar-53a4429d.js} +43 -16
  84. package/dist/esm/v3/OrCardCollection-5a0febaf.js +198 -0
  85. package/dist/esm/v3/{OrSearch-aafb93b4.js → OrSearch-cdde55ce.js} +1 -7
  86. package/dist/esm/v3/components/index.js +3 -3
  87. package/dist/esm/v3/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  88. package/dist/esm/v3/components/or-avatar-v3/OrAvatar.vue.d.ts +11 -0
  89. package/dist/esm/v3/components/or-avatar-v3/index.js +2 -1
  90. package/dist/esm/v3/components/or-avatar-v3/props.d.ts +2 -1
  91. package/dist/esm/v3/components/or-avatar-v3/styles.d.ts +2 -0
  92. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -5
  93. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +42 -67
  94. package/dist/esm/v3/components/or-card-collection-v3/index.js +4 -7
  95. package/dist/esm/v3/components/or-card-collection-v3/props.d.ts +1 -5
  96. package/dist/esm/v3/components/or-card-collection-v3/styles.d.ts +2 -2
  97. package/dist/esm/v3/components/or-card-collection-v3/types.d.ts +3 -8
  98. package/dist/esm/v3/components/or-search-v3/OrSearch.vue.d.ts +0 -13
  99. package/dist/esm/v3/components/or-search-v3/index.js +1 -1
  100. package/dist/esm/v3/index.js +3 -3
  101. package/package.json +1 -1
  102. package/src/components/or-avatar-v3/OrAvatar.stories3.ts +9 -7
  103. package/src/components/or-avatar-v3/OrAvatar.vue +22 -2
  104. package/src/components/or-avatar-v3/props.ts +1 -0
  105. package/src/components/or-avatar-v3/styles.ts +49 -11
  106. package/src/components/or-card-collection-v3/OrCardCollection.stories3.ts +30 -230
  107. package/src/components/or-card-collection-v3/OrCardCollection.vue +77 -120
  108. package/src/components/or-card-collection-v3/props.ts +1 -14
  109. package/src/components/or-card-collection-v3/styles.ts +3 -3
  110. package/src/components/or-card-collection-v3/types.ts +3 -9
  111. package/src/components/or-search-v3/OrSearch.vue +1 -7
  112. package/dist/bundled/v2/OrCardCollection-773ae0db.js +0 -346
  113. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollectionView.vue2.vue.d.ts +0 -35
  114. package/dist/bundled/v3/OrButton-8ab33d9d.js +0 -33
  115. package/dist/bundled/v3/OrCardCollection.vue_vue_type_script_lang-b983bda7.js +0 -228
  116. package/dist/bundled/v3/OrMenu-f26e8e55.js +0 -29
  117. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts +0 -35
  118. package/dist/esm/v2/OrCardCollection-61c86bfc.js +0 -346
  119. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollectionView.vue2.vue.d.ts +0 -35
  120. package/dist/esm/v3/OrCardCollection-fdc7848b.js +0 -289
  121. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts +0 -35
  122. package/src/components/or-card-collection-v3/OrCardCollectionView.vue2.vue +0 -41
  123. package/src/components/or-card-collection-v3/OrCardCollectionView.vue3.vue +0 -42
@@ -1,228 +0,0 @@
1
- import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, mergeProps, createTextVNode, toDisplayString, resolveComponent, createBlock, ref, watch } from 'vue';
2
- import './OrIconButton-4bd33e3c.js';
3
- import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-641f6e06.js';
4
- import './OrButton-8ab33d9d.js';
5
- import './OrMenu-f26e8e55.js';
6
- import { s as script$5 } from './OrMenu.vue_vue_type_script_lang-2446a69a.js';
7
- import './OrMenuItem-4feaba6c.js';
8
- import { s as script$6 } from './OrMenuItem.vue_vue_type_script_lang-0ffaef05.js';
9
- import './OrIcon-d878b768.js';
10
- import { s as script$2 } from './OrSearch.vue_vue_type_script_lang-0ae8a6dd.js';
11
- import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
12
- import { s as script$4 } from './OrButton.vue_vue_type_script_lang-3718b300.js';
13
- import { s as script$7 } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
14
-
15
- const CardCollectionRoot = [
16
- // Layout
17
- 'layout-column',
18
- // Spacing
19
- 'gap-md'];
20
- const CardCollectionToolbar = [
21
- // Layout
22
- 'layout-row justify-between',
23
- // Typography
24
- 'typography-body-2-regular',
25
- // Theme
26
- 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
27
- const CardCollectionToolbarPanel = [
28
- // Layout
29
- 'layout-row',
30
- // Spacing
31
- 'gap-lg+'];
32
- const CardCollectionContent = [
33
- // Layout
34
- 'grid',
35
- // Spacing
36
- 'gap-sm md:gap-md'];
37
- const CardCollectionContentViews = {
38
- 'grid': [
39
- // Layout
40
- 'sm:grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-4', 'xl:grid-cols-6'],
41
- 'list': []
42
- };
43
-
44
- var script$1 = defineComponent({
45
- name: 'OrCardCollectionView',
46
- props: {
47
- items: {
48
- type: Array,
49
- default: []
50
- },
51
- mode: {
52
- type: String,
53
- required: true
54
- }
55
- },
56
- setup(props) {
57
- const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[props.mode]]);
58
- return {
59
- contentStyles
60
- };
61
- }
62
- });
63
-
64
- function render$1(_ctx, _cache, $props, $setup, $data, $options) {
65
- return openBlock(), createElementBlock("div", {
66
- class: normalizeClass(_ctx.contentStyles)
67
- }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
68
- return renderSlot(_ctx.$slots, "item", mergeProps({
69
- key: item.key || index
70
- }, {
71
- item,
72
- mode: _ctx.mode
73
- }), () => [createTextVNode(toDisplayString(item.key), 1 /* TEXT */)]);
74
- }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */);
75
- }
76
-
77
- script$1.render = render$1;
78
- script$1.__file = "src/components/or-card-collection-v3/OrCardCollectionView.vue3.vue";
79
-
80
- function render(_ctx, _cache, $props, $setup, $data, $options) {
81
- const _component_OrInput = resolveComponent("OrInput");
82
- return openBlock(), createBlock(_component_OrInput, mergeProps({
83
- ref: "root"
84
- }, _ctx.$attrs, {
85
- modelValue: _ctx.localModelValue,
86
- "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.localModelValue = $event),
87
- modelModifiers: {
88
- trim: true
89
- },
90
- class: _ctx.rootStyles,
91
- type: 'search',
92
- size: _ctx.size,
93
- placeholder: _ctx.placeholder,
94
- debounce: _ctx.debounce,
95
- disabled: _ctx.disabled,
96
- "disable-default-styles": _ctx.disableDefaultStyles,
97
- onInput: _cache[1] || (_cache[1] = $event => _ctx.$emit('input', $event)),
98
- onKeydown: _cache[2] || (_cache[2] = $event => _ctx.$emit('keydown', $event)),
99
- onKeyup: _cache[3] || (_cache[3] = $event => _ctx.$emit('keyup', $event)),
100
- onFocus: _cache[4] || (_cache[4] = $event => _ctx.$emit('focus', $event)),
101
- onBlur: _cache[5] || (_cache[5] = $event => _ctx.$emit('blur', $event))
102
- }), null, 16 /* FULL_PROPS */, ["modelValue", "class", "size", "placeholder", "debounce", "disabled", "disable-default-styles"]);
103
- }
104
-
105
- script$2.render = render;
106
- script$2.__file = "src/components/or-search-v3/OrSearch.vue";
107
-
108
- var DefaultCardCollectionViews;
109
- (function (DefaultCardCollectionViews) {
110
- DefaultCardCollectionViews["Grid"] = "grid";
111
- DefaultCardCollectionViews["List"] = "list";
112
- })(DefaultCardCollectionViews || (DefaultCardCollectionViews = {}));
113
- const gridView = {
114
- view: DefaultCardCollectionViews.Grid,
115
- icon: 'grid_view'
116
- };
117
- const listView = {
118
- view: DefaultCardCollectionViews.List,
119
- icon: 'view_agenda'
120
- };
121
- const defaultViewModes = [gridView, listView];
122
-
123
- var script = defineComponent({
124
- name: 'OrCardCollection',
125
- components: {
126
- OrCardCollectionView: script$1,
127
- OrIconButton: script$3,
128
- OrButton: script$4,
129
- OrMenu: script$5,
130
- OrMenuItem: script$6,
131
- OrIcon: script$7,
132
- OrSearch: script$2
133
- },
134
- inheritAttrs: false,
135
- props: {
136
- items: {
137
- type: Array,
138
- default: []
139
- },
140
- view: {
141
- type: String,
142
- default: gridView.view
143
- },
144
- viewModes: {
145
- type: Array,
146
- default: () => defaultViewModes
147
- },
148
- sort: {
149
- type: String,
150
- default: undefined
151
- },
152
- sortOptions: {
153
- type: Array,
154
- default: () => []
155
- },
156
- search: {
157
- type: String,
158
- default: ''
159
- }
160
- },
161
- emits: ['viewChange', 'sortChange', 'searchChange'],
162
- expose: ['root'],
163
- setup(props, context) {
164
- // Refs
165
- const root = ref();
166
- const sortMenu = ref();
167
- const sortButton = ref();
168
- // Styles
169
- const classAttribute = useClassAttribute();
170
- const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
171
- const toolbarStyles = computed(() => [...CardCollectionToolbar]);
172
- const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
173
- const sortLabel = computed(() => {
174
- var _a;
175
- return (_a = props.sortOptions.find(item => item.value === props.sort)) === null || _a === void 0 ? void 0 : _a.label;
176
- });
177
- // State
178
- const proxyView = ref(props.view);
179
- const proxySort = ref(props.sort);
180
- const proxySearch = ref(props.search);
181
- // Methods
182
- function switchView(view) {
183
- proxyView.value = view;
184
- }
185
- function handleSort(sort) {
186
- proxySort.value = sort;
187
- }
188
- function handleSearch(search) {
189
- proxySearch.value = search;
190
- }
191
- // Effects
192
- watch(() => props.view, value => {
193
- proxyView.value = value;
194
- });
195
- watch(proxyView, value => {
196
- context.emit('viewChange', value);
197
- });
198
- watch(() => props.sort, value => {
199
- proxySort.value = value;
200
- });
201
- watch(proxySort, value => {
202
- context.emit('sortChange', value);
203
- });
204
- watch(() => props.search, value => {
205
- proxySearch.value = value;
206
- });
207
- watch(proxySearch, value => {
208
- context.emit('searchChange', value);
209
- });
210
- return {
211
- root,
212
- sortMenu,
213
- sortButton,
214
- rootStyles,
215
- toolbarStyles,
216
- toolbarPanelStyles,
217
- proxyView,
218
- proxySort,
219
- proxySearch,
220
- sortLabel,
221
- switchView,
222
- handleSort,
223
- handleSearch
224
- };
225
- }
226
- });
227
-
228
- export { DefaultCardCollectionViews as D, defaultViewModes as d, gridView as g, listView as l, script as s };
@@ -1,29 +0,0 @@
1
- import { s as script } from './OrMenu.vue_vue_type_script_lang-2446a69a.js';
2
- import { resolveComponent, openBlock, createElementBlock, mergeProps, createVNode, withCtx, createElementVNode, normalizeClass, withModifiers, renderSlot } from 'vue';
3
-
4
- function render(_ctx, _cache, $props, $setup, $data, $options) {
5
- const _component_OrPopover = resolveComponent("OrPopover");
6
- return openBlock(), createElementBlock("div", mergeProps({
7
- ref: "root"
8
- }, _ctx.$attrs, {
9
- class: _ctx.rootStyles
10
- }), [createVNode(_component_OrPopover, {
11
- ref: "popover",
12
- variant: 'auto',
13
- trigger: _ctx.trigger,
14
- placement: _ctx.placement,
15
- "full-width": false,
16
- "disable-default-styles": false,
17
- "onUpdate:state": _cache[1] || (_cache[1] = $event => _ctx.$emit('update:state', $event))
18
- }, {
19
- default: withCtx(() => [createElementVNode("div", {
20
- class: normalizeClass(_ctx.bodyStyles),
21
- onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.onClick && _ctx.onClick(...args), ["stop"]))
22
- }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)]),
23
-
24
- _: 3 /* FORWARDED */
25
- }, 8 /* PROPS */, ["trigger", "placement"])], 16 /* FULL_PROPS */);
26
- }
27
-
28
- script.render = render;
29
- script.__file = "src/components/or-menu-v3/OrMenu.vue";
@@ -1,35 +0,0 @@
1
- import { PropType } from 'vue-demi';
2
- import { CardCollectionItem } from './types';
3
- import { DefaultCardCollectionViews } 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<DefaultCardCollectionViews>;
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<DefaultCardCollectionViews>;
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: DefaultCardCollectionViews;
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: DefaultCardCollectionViews;
32
- } & {}, {
33
- items: CardCollectionItem[];
34
- }, true>);
35
- export default _default;
@@ -1,346 +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 { _ 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-62d91301.js';
12
- import './OrInputBox-4d5a318d.js';
13
-
14
- const CardCollectionRoot = [
15
- // Layout
16
- 'layout-column',
17
- // Spacing
18
- 'gap-md'];
19
- const CardCollectionToolbar = [
20
- // Layout
21
- 'layout-row justify-between',
22
- // Typography
23
- 'typography-body-2-regular',
24
- // Theme
25
- 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
26
- const CardCollectionToolbarPanel = [
27
- // Layout
28
- 'layout-row',
29
- // Spacing
30
- 'gap-lg+'];
31
- const CardCollectionContent = [
32
- // Layout
33
- 'grid',
34
- // Spacing
35
- 'gap-sm md:gap-md'];
36
- const CardCollectionContentViews = {
37
- 'grid': [
38
- // Layout
39
- 'sm:grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-4', 'xl:grid-cols-6'],
40
- 'list': []
41
- };
42
-
43
- var script$1 = defineComponent({
44
- name: 'OrCardCollectionView',
45
- props: {
46
- items: {
47
- type: Array,
48
- default: []
49
- },
50
- mode: {
51
- type: String,
52
- required: true
53
- }
54
- },
55
- setup(props) {
56
- const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[props.mode]]);
57
- return {
58
- contentStyles
59
- };
60
- }
61
- });
62
-
63
- /* script */
64
- const __vue_script__$1 = script$1;
65
-
66
- /* template */
67
- var __vue_render__$1 = function () {
68
- var _vm = this;
69
- var _h = _vm.$createElement;
70
- var _c = _vm._self._c || _h;
71
- return _c('div', {
72
- class: _vm.contentStyles
73
- }, [_vm._l(_vm.items, function (item) {
74
- return _vm._t("item", function () {
75
- return [_vm._v("\n " + _vm._s(item.key) + "\n ")];
76
- }, null, {
77
- item: item,
78
- mode: _vm.mode
79
- });
80
- })], 2);
81
- };
82
- var __vue_staticRenderFns__$1 = [];
83
-
84
- /* style */
85
- const __vue_inject_styles__$1 = undefined;
86
- /* scoped */
87
- const __vue_scope_id__$1 = undefined;
88
- /* module identifier */
89
- const __vue_module_identifier__$1 = undefined;
90
- /* functional template */
91
- const __vue_is_functional_template__$1 = false;
92
- /* style inject */
93
-
94
- /* style inject SSR */
95
-
96
- /* style inject shadow dom */
97
-
98
- const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
99
- render: __vue_render__$1,
100
- staticRenderFns: __vue_staticRenderFns__$1
101
- }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
102
-
103
- var DefaultCardCollectionViews;
104
- (function (DefaultCardCollectionViews) {
105
- DefaultCardCollectionViews["Grid"] = "grid";
106
- DefaultCardCollectionViews["List"] = "list";
107
- })(DefaultCardCollectionViews || (DefaultCardCollectionViews = {}));
108
- const gridView = {
109
- view: DefaultCardCollectionViews.Grid,
110
- icon: 'grid_view'
111
- };
112
- const listView = {
113
- view: DefaultCardCollectionViews.List,
114
- icon: 'view_agenda'
115
- };
116
- const defaultViewModes = [gridView, listView];
117
-
118
- var script = defineComponent({
119
- name: 'OrCardCollection',
120
- components: {
121
- OrCardCollectionView: __vue_component__$1,
122
- OrIconButton: __vue_component__$2,
123
- OrButton: __vue_component__$3,
124
- OrMenu: __vue_component__$4,
125
- OrMenuItem: __vue_component__$5,
126
- OrIcon: __vue_component__$6,
127
- OrSearch: __vue_component__$7
128
- },
129
- inheritAttrs: false,
130
- props: {
131
- items: {
132
- type: Array,
133
- default: []
134
- },
135
- view: {
136
- type: String,
137
- default: gridView.view
138
- },
139
- viewModes: {
140
- type: Array,
141
- default: () => defaultViewModes
142
- },
143
- sort: {
144
- type: String,
145
- default: undefined
146
- },
147
- sortOptions: {
148
- type: Array,
149
- default: () => []
150
- },
151
- search: {
152
- type: String,
153
- default: ''
154
- }
155
- },
156
- emits: ['viewChange', 'sortChange', 'searchChange'],
157
- expose: ['root'],
158
- setup(props, context) {
159
- // Refs
160
- const root = ref();
161
- const sortMenu = ref();
162
- const sortButton = ref();
163
- // Styles
164
- const classAttribute = useClassAttribute();
165
- const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
166
- const toolbarStyles = computed(() => [...CardCollectionToolbar]);
167
- const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
168
- const sortLabel = computed(() => {
169
- var _a;
170
- return (_a = props.sortOptions.find(item => item.value === props.sort)) === null || _a === void 0 ? void 0 : _a.label;
171
- });
172
- // State
173
- const proxyView = ref(props.view);
174
- const proxySort = ref(props.sort);
175
- const proxySearch = ref(props.search);
176
- // Methods
177
- function switchView(view) {
178
- proxyView.value = view;
179
- }
180
- function handleSort(sort) {
181
- proxySort.value = sort;
182
- }
183
- function handleSearch(search) {
184
- proxySearch.value = search;
185
- }
186
- // Effects
187
- watch(() => props.view, value => {
188
- proxyView.value = value;
189
- });
190
- watch(proxyView, value => {
191
- context.emit('viewChange', value);
192
- });
193
- watch(() => props.sort, value => {
194
- proxySort.value = value;
195
- });
196
- watch(proxySort, value => {
197
- context.emit('sortChange', value);
198
- });
199
- watch(() => props.search, value => {
200
- proxySearch.value = value;
201
- });
202
- watch(proxySearch, value => {
203
- context.emit('searchChange', value);
204
- });
205
- return {
206
- root,
207
- sortMenu,
208
- sortButton,
209
- rootStyles,
210
- toolbarStyles,
211
- toolbarPanelStyles,
212
- proxyView,
213
- proxySort,
214
- proxySearch,
215
- sortLabel,
216
- switchView,
217
- handleSort,
218
- handleSearch
219
- };
220
- }
221
- });
222
-
223
- /* script */
224
- const __vue_script__ = script;
225
-
226
- /* template */
227
- var __vue_render__ = function () {
228
- var _vm = this;
229
- var _h = _vm.$createElement;
230
- var _c = _vm._self._c || _h;
231
- return _c('div', _vm._b({
232
- ref: "root",
233
- class: _vm.rootStyles
234
- }, 'div', _vm.$attrs, false), [_c('div', {
235
- class: _vm.toolbarStyles
236
- }, [_c('div', {
237
- class: _vm.toolbarPanelStyles
238
- }, [_vm.sortOptions.length ? [_c('OrButton', {
239
- ref: "sortButton",
240
- attrs: {
241
- "variant": "link",
242
- "color": "inherit"
243
- },
244
- on: {
245
- "click": function ($event) {
246
- return _vm.sortMenu.toggle();
247
- }
248
- }
249
- }, [_vm._v("\n " + _vm._s(_vm.sortLabel) + "\n "), _vm.sortMenu ? _c('OrIcon', {
250
- attrs: {
251
- "icon": _vm.sortMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
252
- }
253
- }) : _vm._e()], 1), _vm._v(" "), _c('OrMenu', {
254
- ref: "sortMenu",
255
- attrs: {
256
- "trigger": _vm.sortButton && _vm.sortButton.root
257
- }
258
- }, _vm._l(_vm.sortOptions, function (sortItem) {
259
- return _c('OrMenuItem', {
260
- key: sortItem,
261
- on: {
262
- "click": function ($event) {
263
- return _vm.handleSort(sortItem.value);
264
- }
265
- }
266
- }, [_vm._v("\n " + _vm._s(sortItem.label) + "\n ")]);
267
- }), 1)] : _vm._e()], 2), _vm._v(" "), _c('div', {
268
- class: _vm.toolbarPanelStyles
269
- }, [_c('OrSearch', {
270
- staticClass: "md:w-[350px]",
271
- attrs: {
272
- "size": "s"
273
- },
274
- on: {
275
- "search": _vm.handleSearch
276
- },
277
- model: {
278
- value: _vm.proxySearch,
279
- callback: function ($$v) {
280
- _vm.proxySearch = $$v;
281
- },
282
- expression: "proxySearch"
283
- }
284
- }), _vm._v(" "), _c('div', {
285
- staticClass: "layout-row gap-sm"
286
- }, [_vm.viewModes.length > 1 ? _vm._l(_vm.viewModes, function (viewOption) {
287
- return _c('OrIconButton', {
288
- key: viewOption.view,
289
- attrs: {
290
- "icon": {
291
- icon: viewOption.icon,
292
- variant: viewOption.view === _vm.proxyView ? 'filled' : 'outlined'
293
- }
294
- },
295
- on: {
296
- "click": function ($event) {
297
- return _vm.switchView(viewOption.view);
298
- }
299
- }
300
- });
301
- }) : _vm._e(), _vm._v(" "), _vm._t("addon")], 2)], 1)]), _vm._v(" "), _vm._t("header", null, null, {
302
- items: _vm.items,
303
- mode: _vm.proxyView
304
- }), _vm._v(" "), _vm.items.length ? _vm._t(_vm.proxyView, function () {
305
- return [_c('OrCardCollectionView', {
306
- attrs: {
307
- "items": _vm.items,
308
- "mode": _vm.proxyView
309
- },
310
- scopedSlots: _vm._u([{
311
- key: "item",
312
- fn: function (props) {
313
- return [_vm._t("item", null, null, props)];
314
- }
315
- }], null, true)
316
- })];
317
- }, null, {
318
- items: _vm.items
319
- }) : _vm.items.length === 0 && _vm.proxySearch.length > 0 ? _vm._t("noSearchResults", function () {
320
- return [_vm._v("\n No results\n ")];
321
- }, null, {
322
- search: _vm.proxySearch
323
- }) : _vm._e()], 2);
324
- };
325
- var __vue_staticRenderFns__ = [];
326
-
327
- /* style */
328
- const __vue_inject_styles__ = undefined;
329
- /* scoped */
330
- const __vue_scope_id__ = undefined;
331
- /* module identifier */
332
- const __vue_module_identifier__ = undefined;
333
- /* functional template */
334
- const __vue_is_functional_template__ = false;
335
- /* style inject */
336
-
337
- /* style inject SSR */
338
-
339
- /* style inject shadow dom */
340
-
341
- const __vue_component__ = /*#__PURE__*/normalizeComponent({
342
- render: __vue_render__,
343
- staticRenderFns: __vue_staticRenderFns__
344
- }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
345
-
346
- export { DefaultCardCollectionViews as D, __vue_component__ as _, defaultViewModes as d, gridView as g, listView as l };
@@ -1,35 +0,0 @@
1
- import { PropType } from 'vue-demi';
2
- import { CardCollectionItem } from './types';
3
- import { DefaultCardCollectionViews } 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<DefaultCardCollectionViews>;
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<DefaultCardCollectionViews>;
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: DefaultCardCollectionViews;
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: DefaultCardCollectionViews;
32
- } & {}, {
33
- items: CardCollectionItem[];
34
- }, true>);
35
- export default _default;