@onereach/ui-components 2.69.1-beta.2089.0 → 2.69.1-beta.2095.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 (142) hide show
  1. package/dist/bundled/v2/{OrButton-0e91a808.js → OrButton-66d37aff.js} +14 -1
  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/{OrConfirm-18c534df.js → OrConfirm-e1ca1422.js} +1 -1
  5. package/dist/bundled/v2/OrPagination-354e9abd.js +296 -0
  6. package/dist/bundled/v2/{OrSearch-19f43fe5.js → OrSearch-9d402f56.js} +2 -2
  7. package/dist/bundled/v2/{OrSelect-759b4410.js → OrSelect-1c9421ad.js} +3 -3
  8. package/dist/bundled/v2/{OrSortHeader-9932d28f.js → OrSortHeader-396e6a7c.js} +2 -2
  9. package/dist/bundled/v2/components/index.d.ts +1 -0
  10. package/dist/bundled/v2/components/index.js +8 -7
  11. package/dist/bundled/v2/components/or-button-v3/OrButton.vue.d.ts +11 -0
  12. package/dist/bundled/v2/components/or-button-v3/index.js +1 -1
  13. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -4
  14. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +37 -61
  15. package/dist/bundled/v2/components/or-card-collection-v3/index.js +4 -7
  16. package/dist/bundled/v2/components/or-card-collection-v3/types.d.ts +4 -5
  17. package/dist/bundled/v2/components/or-card-v3/index.js +1 -1
  18. package/dist/bundled/v2/components/or-confirm-v3/index.js +2 -2
  19. package/dist/bundled/v2/components/or-pagination-v3/OrPagination.stories3.d.ts +12 -0
  20. package/dist/bundled/v2/components/or-pagination-v3/OrPagination.vue.d.ts +110 -0
  21. package/dist/bundled/v2/components/or-pagination-v3/index.d.ts +2 -0
  22. package/dist/bundled/v2/components/or-pagination-v3/index.js +20 -0
  23. package/dist/bundled/v2/components/or-pagination-v3/styles.d.ts +3 -0
  24. package/dist/bundled/v2/components/or-pagination-v3/types.d.ts +4 -0
  25. package/dist/bundled/v2/components/or-search-v3/index.js +1 -1
  26. package/dist/bundled/v2/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  27. package/dist/bundled/v2/components/or-select-v3/index.d.ts +1 -0
  28. package/dist/bundled/v2/components/or-select-v3/index.js +1 -1
  29. package/dist/bundled/v2/components/or-select-v3/types.d.ts +1 -1
  30. package/dist/bundled/v2/components/or-sort-header-v3/index.js +1 -1
  31. package/dist/bundled/v2/index.js +9 -8
  32. package/dist/bundled/v3/{OrButton-8ab33d9d.js → OrButton-9640286b.js} +3 -2
  33. package/dist/bundled/v3/{OrButton.vue_vue_type_script_lang-3718b300.js → OrButton.vue_vue_type_script_lang-06d8ead1.js} +13 -1
  34. package/dist/bundled/v3/OrCardCollection.vue_vue_type_script_lang-3993a015.js +164 -0
  35. package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-85472b12.js → OrConfirm.vue_vue_type_script_lang-f1b81f00.js} +2 -2
  36. package/dist/bundled/v3/OrPagination.vue_vue_type_script_lang-ff22b11c.js +180 -0
  37. package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-cb2d6612.js → OrSearch.vue_vue_type_script_lang-ed78b21f.js} +1 -1
  38. package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-dfadd12f.js → OrSelect.vue_vue_type_script_lang-d0626539.js} +2 -2
  39. package/dist/bundled/v3/components/index.d.ts +1 -0
  40. package/dist/bundled/v3/components/index.js +11 -10
  41. package/dist/bundled/v3/components/or-button-v3/OrButton.vue.d.ts +11 -0
  42. package/dist/bundled/v3/components/or-button-v3/index.js +1 -1
  43. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -4
  44. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +37 -61
  45. package/dist/bundled/v3/components/or-card-collection-v3/index.js +4 -11
  46. package/dist/bundled/v3/components/or-card-collection-v3/types.d.ts +4 -5
  47. package/dist/bundled/v3/components/or-confirm-v3/index.js +3 -3
  48. package/dist/bundled/v3/components/or-pagination-v3/OrPagination.stories3.d.ts +12 -0
  49. package/dist/bundled/v3/components/or-pagination-v3/OrPagination.vue.d.ts +110 -0
  50. package/dist/bundled/v3/components/or-pagination-v3/index.d.ts +2 -0
  51. package/dist/bundled/v3/components/or-pagination-v3/index.js +22 -0
  52. package/dist/bundled/v3/components/or-pagination-v3/styles.d.ts +3 -0
  53. package/dist/bundled/v3/components/or-pagination-v3/types.d.ts +4 -0
  54. package/dist/bundled/v3/components/or-search-v3/index.js +1 -1
  55. package/dist/bundled/v3/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  56. package/dist/bundled/v3/components/or-select-v3/index.d.ts +1 -0
  57. package/dist/bundled/v3/components/or-select-v3/index.js +1 -1
  58. package/dist/bundled/v3/components/or-select-v3/types.d.ts +1 -1
  59. package/dist/bundled/v3/index.js +354 -292
  60. package/dist/esm/v2/{OrButton-357a5756.js → OrButton-3d4fc9da.js} +14 -1
  61. package/dist/esm/v2/OrCardCollection-4f001551.js +227 -0
  62. package/dist/esm/v2/{OrConfirm-b0b2e43c.js → OrConfirm-ba3f8c45.js} +1 -1
  63. package/dist/esm/v2/OrPagination-a56eb93b.js +296 -0
  64. package/dist/esm/v2/{OrSelect-ac382aa6.js → OrSelect-ca2510cd.js} +3 -3
  65. package/dist/esm/v2/components/index.d.ts +1 -0
  66. package/dist/esm/v2/components/index.js +5 -4
  67. package/dist/esm/v2/components/or-button-v3/OrButton.vue.d.ts +11 -0
  68. package/dist/esm/v2/components/or-button-v3/index.js +1 -1
  69. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -4
  70. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +37 -61
  71. package/dist/esm/v2/components/or-card-collection-v3/index.js +4 -7
  72. package/dist/esm/v2/components/or-card-collection-v3/types.d.ts +4 -5
  73. package/dist/esm/v2/components/or-confirm-v3/index.js +2 -2
  74. package/dist/esm/v2/components/or-pagination-v3/OrPagination.stories3.d.ts +12 -0
  75. package/dist/esm/v2/components/or-pagination-v3/OrPagination.vue.d.ts +110 -0
  76. package/dist/esm/v2/components/or-pagination-v3/index.d.ts +2 -0
  77. package/dist/esm/v2/components/or-pagination-v3/index.js +18 -0
  78. package/dist/esm/v2/components/or-pagination-v3/styles.d.ts +3 -0
  79. package/dist/esm/v2/components/or-pagination-v3/types.d.ts +4 -0
  80. package/dist/esm/v2/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  81. package/dist/esm/v2/components/or-select-v3/index.d.ts +1 -0
  82. package/dist/esm/v2/components/or-select-v3/index.js +1 -1
  83. package/dist/esm/v2/components/or-select-v3/types.d.ts +1 -1
  84. package/dist/esm/v2/index.js +5 -4
  85. package/dist/esm/v3/{OrButton-f4b9ee51.js → OrButton-970ae320.js} +15 -2
  86. package/dist/esm/v3/OrCardCollection-5a0febaf.js +198 -0
  87. package/dist/esm/v3/{OrConfirm-906427ef.js → OrConfirm-7cb2f36b.js} +1 -1
  88. package/dist/esm/v3/OrPagination-d351a13b.js +257 -0
  89. package/dist/esm/v3/{OrSelect-fee9c099.js → OrSelect-bff22c7f.js} +3 -3
  90. package/dist/esm/v3/components/index.d.ts +1 -0
  91. package/dist/esm/v3/components/index.js +5 -4
  92. package/dist/esm/v3/components/or-button-v3/OrButton.vue.d.ts +11 -0
  93. package/dist/esm/v3/components/or-button-v3/index.js +1 -1
  94. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -4
  95. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +37 -61
  96. package/dist/esm/v3/components/or-card-collection-v3/index.js +4 -7
  97. package/dist/esm/v3/components/or-card-collection-v3/types.d.ts +4 -5
  98. package/dist/esm/v3/components/or-confirm-v3/index.js +2 -2
  99. package/dist/esm/v3/components/or-pagination-v3/OrPagination.stories3.d.ts +12 -0
  100. package/dist/esm/v3/components/or-pagination-v3/OrPagination.vue.d.ts +110 -0
  101. package/dist/esm/v3/components/or-pagination-v3/index.d.ts +2 -0
  102. package/dist/esm/v3/components/or-pagination-v3/index.js +17 -0
  103. package/dist/esm/v3/components/or-pagination-v3/styles.d.ts +3 -0
  104. package/dist/esm/v3/components/or-pagination-v3/types.d.ts +4 -0
  105. package/dist/esm/v3/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  106. package/dist/esm/v3/components/or-select-v3/index.d.ts +1 -0
  107. package/dist/esm/v3/components/or-select-v3/index.js +1 -1
  108. package/dist/esm/v3/components/or-select-v3/types.d.ts +1 -1
  109. package/dist/esm/v3/index.js +5 -4
  110. package/package.json +1 -1
  111. package/src/components/index.ts +1 -0
  112. package/src/components/or-button-v3/OrButton.stories3.ts +4 -0
  113. package/src/components/or-button-v3/OrButton.vue +6 -0
  114. package/src/components/or-button-v3/styles.ts +15 -1
  115. package/src/components/or-card-collection-v3/OrCardCollection.stories3.ts +19 -160
  116. package/src/components/or-card-collection-v3/OrCardCollection.vue +74 -99
  117. package/src/components/or-card-collection-v3/styles.ts +1 -1
  118. package/src/components/or-card-collection-v3/types.ts +4 -5
  119. package/src/components/or-pagination-v3/OrPagination.docs.mdx +7 -0
  120. package/src/components/or-pagination-v3/OrPagination.stories3.ts +87 -0
  121. package/src/components/or-pagination-v3/OrPagination.vue +260 -0
  122. package/src/components/or-pagination-v3/index.ts +2 -0
  123. package/src/components/or-pagination-v3/styles.ts +30 -0
  124. package/src/components/or-pagination-v3/types.ts +4 -0
  125. package/src/components/or-select-v3/OrSelect.vue +3 -3
  126. package/src/components/or-select-v3/index.ts +1 -0
  127. package/src/components/or-select-v3/types.ts +1 -1
  128. package/dist/bundled/v2/OrCardCollection-a8d5ce32.js +0 -328
  129. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollectionView.vue2.vue.d.ts +0 -35
  130. package/dist/bundled/v2/components/or-card-collection-v3/constatnts.d.ts +0 -4
  131. package/dist/bundled/v3/OrCardCollection.vue_vue_type_script_lang-f9f329a2.js +0 -224
  132. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts +0 -35
  133. package/dist/bundled/v3/components/or-card-collection-v3/constatnts.d.ts +0 -4
  134. package/dist/esm/v2/OrCardCollection-95b051e1.js +0 -328
  135. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollectionView.vue2.vue.d.ts +0 -35
  136. package/dist/esm/v2/components/or-card-collection-v3/constatnts.d.ts +0 -4
  137. package/dist/esm/v3/OrCardCollection-afd863fc.js +0 -274
  138. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts +0 -35
  139. package/dist/esm/v3/components/or-card-collection-v3/constatnts.d.ts +0 -4
  140. package/src/components/or-card-collection-v3/OrCardCollectionView.vue2.vue +0 -41
  141. package/src/components/or-card-collection-v3/OrCardCollectionView.vue3.vue +0 -42
  142. package/src/components/or-card-collection-v3/constatnts.ts +0 -12
@@ -1,224 +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-cb2d6612.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
- var CardCollectionView;
16
- (function (CardCollectionView) {
17
- CardCollectionView["Grid"] = "grid";
18
- CardCollectionView["List"] = "list";
19
- })(CardCollectionView || (CardCollectionView = {}));
20
-
21
- const CardCollectionRoot = [
22
- // Layout
23
- 'layout-column',
24
- // Spacing
25
- 'gap-md'];
26
- const CardCollectionToolbar = [
27
- // Layout
28
- 'layout-row justify-between',
29
- // Typography
30
- 'typography-body-2-regular',
31
- // Theme
32
- 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
33
- const CardCollectionToolbarPanel = [
34
- // Layout
35
- 'layout-row',
36
- // Spacing
37
- 'gap-lg+'];
38
- const CardCollectionContent = [
39
- // Layout
40
- 'grid',
41
- // Spacing
42
- 'gap-sm md:gap-md'];
43
- const CardCollectionContentViews = {
44
- 'grid': [
45
- // Layout
46
- 'sm:grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-4', 'xl:grid-cols-6'],
47
- 'list': []
48
- };
49
-
50
- var script$1 = defineComponent({
51
- name: 'OrCardCollectionView',
52
- props: {
53
- items: {
54
- type: Array,
55
- default: []
56
- },
57
- mode: {
58
- type: String,
59
- required: true
60
- }
61
- },
62
- setup(props) {
63
- const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[props.mode]]);
64
- return {
65
- contentStyles
66
- };
67
- }
68
- });
69
-
70
- function render$1(_ctx, _cache, $props, $setup, $data, $options) {
71
- return openBlock(), createElementBlock("div", {
72
- class: normalizeClass(_ctx.contentStyles)
73
- }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
74
- return renderSlot(_ctx.$slots, "item", mergeProps({
75
- key: item.key || index
76
- }, {
77
- item,
78
- mode: _ctx.mode
79
- }), () => [createTextVNode(toDisplayString(item.key), 1 /* TEXT */)]);
80
- }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */);
81
- }
82
-
83
- script$1.render = render$1;
84
- script$1.__file = "src/components/or-card-collection-v3/OrCardCollectionView.vue3.vue";
85
-
86
- function render(_ctx, _cache, $props, $setup, $data, $options) {
87
- const _component_OrInput = resolveComponent("OrInput");
88
- return openBlock(), createBlock(_component_OrInput, mergeProps({
89
- ref: "root"
90
- }, _ctx.$attrs, {
91
- modelValue: _ctx.localModelValue,
92
- "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.localModelValue = $event),
93
- modelModifiers: {
94
- trim: true
95
- },
96
- class: _ctx.rootStyles,
97
- type: 'search',
98
- size: _ctx.size,
99
- placeholder: _ctx.placeholder,
100
- debounce: _ctx.debounce,
101
- disabled: _ctx.disabled,
102
- "disable-default-styles": _ctx.disableDefaultStyles,
103
- onInput: _cache[1] || (_cache[1] = $event => _ctx.$emit('input', $event)),
104
- onKeydown: _cache[2] || (_cache[2] = $event => _ctx.$emit('keydown', $event)),
105
- onKeyup: _cache[3] || (_cache[3] = $event => _ctx.$emit('keyup', $event)),
106
- onFocus: _cache[4] || (_cache[4] = $event => _ctx.$emit('focus', $event)),
107
- onBlur: _cache[5] || (_cache[5] = $event => _ctx.$emit('blur', $event))
108
- }), null, 16 /* FULL_PROPS */, ["modelValue", "class", "size", "placeholder", "debounce", "disabled", "disable-default-styles"]);
109
- }
110
-
111
- script$2.render = render;
112
- script$2.__file = "src/components/or-search-v3/OrSearch.vue";
113
-
114
- const gridView = {
115
- view: 'grid',
116
- icon: 'grid_view'
117
- };
118
- const listView = {
119
- view: 'list',
120
- icon: 'view_agenda'
121
- };
122
- const defaultViewModes = [gridView, listView];
123
-
124
- var script = defineComponent({
125
- name: 'OrCardCollection',
126
- components: {
127
- OrCardCollectionView: script$1,
128
- OrIconButton: script$3,
129
- OrButton: script$4,
130
- OrMenu: script$5,
131
- OrMenuItem: script$6,
132
- OrIcon: script$7,
133
- OrSearch: script$2
134
- },
135
- inheritAttrs: false,
136
- props: {
137
- items: {
138
- type: Array,
139
- default: []
140
- },
141
- view: {
142
- type: String,
143
- default: CardCollectionView.Grid
144
- },
145
- viewModes: {
146
- type: Array,
147
- default: () => defaultViewModes
148
- },
149
- sort: {
150
- type: String,
151
- default: undefined
152
- },
153
- sortOptions: {
154
- type: Array,
155
- default: () => []
156
- },
157
- search: {
158
- type: String,
159
- default: undefined
160
- }
161
- },
162
- emits: ['viewChange', 'sortChange', 'searchChange'],
163
- expose: ['root'],
164
- setup(props, context) {
165
- // Refs
166
- const root = ref();
167
- const sortMenu = ref();
168
- const sortButton = ref();
169
- // Styles
170
- const classAttribute = useClassAttribute();
171
- const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
172
- const toolbarStyles = computed(() => [...CardCollectionToolbar]);
173
- const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
174
- // State
175
- const proxyView = ref(props.view);
176
- const proxySort = ref(props.sort);
177
- const proxySearch = ref(props.search);
178
- // Methods
179
- function switchView(view) {
180
- proxyView.value = view;
181
- }
182
- function handleSort(sort) {
183
- proxySort.value = sort;
184
- }
185
- function handleSearch(search) {
186
- proxySearch.value = search;
187
- }
188
- // Effects
189
- watch(() => props.view, value => {
190
- proxyView.value = value;
191
- });
192
- watch(proxyView, value => {
193
- context.emit('viewChange', value);
194
- });
195
- watch(() => props.sort, value => {
196
- proxySort.value = value;
197
- });
198
- watch(proxySort, value => {
199
- context.emit('sortChange', value);
200
- });
201
- watch(() => props.search, value => {
202
- proxySearch.value = value;
203
- });
204
- watch(proxySearch, value => {
205
- context.emit('searchChange', value);
206
- });
207
- return {
208
- root,
209
- sortMenu,
210
- sortButton,
211
- rootStyles,
212
- toolbarStyles,
213
- toolbarPanelStyles,
214
- proxyView,
215
- proxySort,
216
- proxySearch,
217
- switchView,
218
- handleSort,
219
- handleSearch
220
- };
221
- }
222
- });
223
-
224
- 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,4 +0,0 @@
1
- import { ViewMode } from './types';
2
- export declare const gridView: ViewMode;
3
- export declare const listView: ViewMode;
4
- export declare const defaultViewModes: ViewMode[];
@@ -1,328 +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-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 _ };
@@ -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,4 +0,0 @@
1
- import { ViewMode } from './types';
2
- export declare const gridView: ViewMode;
3
- export declare const listView: ViewMode;
4
- export declare const defaultViewModes: ViewMode[];