@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
@@ -77,7 +77,15 @@ const ButtonRootColors = {
77
77
  'danger-link': [
78
78
  // Theme
79
79
  'theme-preset-4-error', 'dark:theme-preset-4-error-dark'],
80
- 'inherit-link': []
80
+ 'inherit-link': [
81
+ // Typography
82
+ 'typography-caption-regular',
83
+ // Typography (activated)
84
+ 'activated:typography-caption-bold',
85
+ // Theme
86
+ 'theme-foreground-inherit', 'dark:theme-foreground-inherit',
87
+ // Theme (activated)
88
+ 'activated:theme-foreground-default', 'dark:activated:theme-foreground-default-dark']
81
89
  };
82
90
 
83
91
  var script = defineComponent({
@@ -99,6 +107,10 @@ var script = defineComponent({
99
107
  type: String,
100
108
  default: ButtonColor.Primary
101
109
  },
110
+ activated: {
111
+ type: Boolean,
112
+ default: false
113
+ },
102
114
  disabled: {
103
115
  type: Boolean,
104
116
  default: false
@@ -140,6 +152,7 @@ var __vue_render__ = function () {
140
152
  class: _vm.rootStyles,
141
153
  attrs: {
142
154
  "type": _vm.type,
155
+ "activated": _vm.activated ? '' : null,
143
156
  "disabled": _vm.disabled
144
157
  },
145
158
  on: {
@@ -67,6 +67,6 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
67
67
  render: __vue_render__,
68
68
  staticRenderFns: __vue_staticRenderFns__
69
69
  }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
70
- var __vue_component__$1 = __vue_component__;
70
+ var OrCard = __vue_component__;
71
71
 
72
- export { __vue_component__$1 as _ };
72
+ export { OrCard as O };
@@ -0,0 +1,228 @@
1
+ import './index-fa6eb4ca.js';
2
+ import { O as OrCard } from './OrCard-58a1ba3e.js';
3
+ import { O as OrIconButton } from './OrIconButton-a215104c.js';
4
+ import { O as OrInput } from './OrInput-8b90e08f.js';
5
+ import { O as OrSortHeader } from './OrSortHeader-396e6a7c.js';
6
+ import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
7
+ import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
8
+ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
9
+
10
+ var CardCollectionView;
11
+ (function (CardCollectionView) {
12
+ CardCollectionView["Grid"] = "grid";
13
+ CardCollectionView["List"] = "list";
14
+ })(CardCollectionView || (CardCollectionView = {}));
15
+
16
+ const CardCollectionRoot = [
17
+ // Layout
18
+ 'layout-column',
19
+ // Spacing
20
+ 'gap-md'];
21
+ const CardCollectionToolbar = [
22
+ // Layout
23
+ 'layout-row justify-between',
24
+ // Typography
25
+ 'typography-body-2-regular',
26
+ // Theme
27
+ 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
28
+ const CardCollectionToolbarPanel = [
29
+ // Layout
30
+ 'layout-row',
31
+ // Spacing
32
+ 'gap-sm+'];
33
+ const CardCollectionContent = [
34
+ // Layout
35
+ 'grid',
36
+ // Spacing
37
+ 'gap-sm md:gap-md'];
38
+ const CardCollectionContentViews = {
39
+ 'grid': [
40
+ // Layout
41
+ 'sm:grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-4', 'xl:grid-cols-6'],
42
+ 'list': []
43
+ };
44
+
45
+ var script = defineComponent({
46
+ name: 'OrCardCollection',
47
+ components: {
48
+ OrCard,
49
+ OrIconButton,
50
+ OrInput,
51
+ OrSortHeader
52
+ },
53
+ inheritAttrs: false,
54
+ props: {
55
+ items: {
56
+ type: Array,
57
+ default: []
58
+ },
59
+ view: {
60
+ type: String,
61
+ default: CardCollectionView.Grid
62
+ },
63
+ sort: {
64
+ type: Object,
65
+ default: undefined
66
+ },
67
+ sortHeaders: {
68
+ type: Array,
69
+ default: undefined
70
+ },
71
+ search: {
72
+ type: String,
73
+ default: undefined
74
+ }
75
+ },
76
+ emits: ['viewChange', 'sortChange', 'searchChange'],
77
+ expose: ['root'],
78
+ setup(props, context) {
79
+ // Refs
80
+ const root = ref();
81
+ // Styles
82
+ const classAttribute = useClassAttribute();
83
+ const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
84
+ const toolbarStyles = computed(() => [...CardCollectionToolbar]);
85
+ const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
86
+ const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[proxyView.value]]);
87
+ // State
88
+ const proxyView = ref(props.view);
89
+ const proxySort = ref(props.sort);
90
+ const proxySearch = ref(props.search);
91
+ // Methods
92
+ function switchToGridView() {
93
+ proxyView.value = CardCollectionView.Grid;
94
+ }
95
+ function switchToListView() {
96
+ proxyView.value = CardCollectionView.List;
97
+ }
98
+ // Effects
99
+ watch(() => props.view, value => {
100
+ proxyView.value = value;
101
+ });
102
+ watch(proxyView, value => {
103
+ context.emit('viewChange', value);
104
+ });
105
+ watch(() => props.sort, value => {
106
+ proxySort.value = value;
107
+ });
108
+ watch(proxySort, value => {
109
+ context.emit('sortChange', value);
110
+ });
111
+ watch(() => props.search, value => {
112
+ proxySearch.value = value;
113
+ });
114
+ watch(proxySearch, value => {
115
+ context.emit('searchChange', value);
116
+ });
117
+ return {
118
+ root,
119
+ rootStyles,
120
+ toolbarStyles,
121
+ toolbarPanelStyles,
122
+ contentStyles,
123
+ proxyView,
124
+ proxySort,
125
+ proxySearch,
126
+ switchToGridView,
127
+ switchToListView
128
+ };
129
+ }
130
+ });
131
+
132
+ /* script */
133
+ const __vue_script__ = script;
134
+
135
+ /* template */
136
+ var __vue_render__ = function () {
137
+ var _vm = this;
138
+ var _h = _vm.$createElement;
139
+ var _c = _vm._self._c || _h;
140
+ return _c('div', _vm._b({
141
+ ref: "root",
142
+ class: _vm.rootStyles
143
+ }, 'div', _vm.$attrs, false), [_c('div', {
144
+ class: _vm.toolbarStyles
145
+ }, [_c('div', {
146
+ class: _vm.toolbarPanelStyles
147
+ }, [_vm.sortHeaders ? _vm._l(_vm.sortHeaders, function (header) {
148
+ return _c('OrSortHeader', {
149
+ key: header.value,
150
+ attrs: {
151
+ "input-value": header.value
152
+ },
153
+ model: {
154
+ value: _vm.proxySort,
155
+ callback: function ($$v) {
156
+ _vm.proxySort = $$v;
157
+ },
158
+ expression: "proxySort"
159
+ }
160
+ }, [_vm._v("\n " + _vm._s(header.label) + "\n ")]);
161
+ }) : _vm._e()], 2), _vm._v(" "), _c('div', {
162
+ class: _vm.toolbarPanelStyles
163
+ }, [_c('OrInput', {
164
+ attrs: {
165
+ "type": 'search',
166
+ "placeholder": 'Search',
167
+ "size": 's'
168
+ },
169
+ model: {
170
+ value: _vm.proxySearch,
171
+ callback: function ($$v) {
172
+ _vm.proxySearch = $$v;
173
+ },
174
+ expression: "proxySearch"
175
+ }
176
+ }), _vm._v(" "), _c('OrIconButton', {
177
+ attrs: {
178
+ "icon": 'grid_view'
179
+ },
180
+ on: {
181
+ "click": function ($event) {
182
+ return _vm.switchToGridView();
183
+ }
184
+ }
185
+ }), _vm._v(" "), _c('OrIconButton', {
186
+ attrs: {
187
+ "icon": 'view_list'
188
+ },
189
+ on: {
190
+ "click": function ($event) {
191
+ return _vm.switchToListView();
192
+ }
193
+ }
194
+ }), _vm._v(" "), _vm._t("addon")], 2)]), _vm._v(" "), _c('div', {
195
+ class: _vm.contentStyles
196
+ }, [_vm.proxyView === 'grid' ? _vm._l(_vm.items, function (item) {
197
+ return _c('OrCard', {
198
+ key: item.id
199
+ }, [_vm._t("gridItem", null, null, item)], 2);
200
+ }) : _vm._e(), _vm._v(" "), _vm.proxyView === 'list' ? _vm._l(_vm.items, function (item) {
201
+ return _c('OrCard', {
202
+ key: item.id
203
+ }, [_vm._t("listItem", null, null, item)], 2);
204
+ }) : _vm._e()], 2)]);
205
+ };
206
+ var __vue_staticRenderFns__ = [];
207
+
208
+ /* style */
209
+ const __vue_inject_styles__ = undefined;
210
+ /* scoped */
211
+ const __vue_scope_id__ = undefined;
212
+ /* module identifier */
213
+ const __vue_module_identifier__ = undefined;
214
+ /* functional template */
215
+ const __vue_is_functional_template__ = false;
216
+ /* style inject */
217
+
218
+ /* style inject SSR */
219
+
220
+ /* style inject shadow dom */
221
+
222
+ const __vue_component__ = /*#__PURE__*/normalizeComponent({
223
+ render: __vue_render__,
224
+ staticRenderFns: __vue_staticRenderFns__
225
+ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
226
+ var __vue_component__$1 = __vue_component__;
227
+
228
+ export { CardCollectionView as C, __vue_component__$1 as _ };
@@ -2,7 +2,7 @@ import './index-fa6eb4ca.js';
2
2
  import { useMagicKeys, whenever } from '@vueuse/core';
3
3
  import { l as logicAnd } from './index-17f264f9.js';
4
4
  import { O as OrOverlay } from './OrOverlay-3c89d622.js';
5
- import { O as OrButton, a as ButtonColor } from './OrButton-0e91a808.js';
5
+ import { O as OrButton, a as ButtonColor } from './OrButton-66d37aff.js';
6
6
  import { O as OrInput } from './OrInput-8b90e08f.js';
7
7
  import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
8
8
  import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -0,0 +1,296 @@
1
+ import './index-fa6eb4ca.js';
2
+ import { O as OrButton } from './OrButton-66d37aff.js';
3
+ import { O as OrIcon } from './OrIcon-8625385f.js';
4
+ import { O as OrMenu } from './OrMenu-fa47c888.js';
5
+ import { O as OrMenuItem } from './OrMenuItem-26420908.js';
6
+ import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
7
+ import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
8
+ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
9
+
10
+ const PaginationRoot = [
11
+ // Layout
12
+ 'layout-row',
13
+ // Spacing
14
+ 'gap-xl',
15
+ // Typography
16
+ 'typography-caption-regular',
17
+ // Theme
18
+ 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
19
+ const PaginationOffsetControl = [
20
+ // Layout
21
+ 'layout-row',
22
+ // Spacing
23
+ 'gap-md'];
24
+ const PaginationLimitControl = [
25
+ // Layout
26
+ 'layout-row',
27
+ // Spacing
28
+ 'gap-sm'];
29
+
30
+ var script = defineComponent({
31
+ name: 'OrPagination',
32
+ components: {
33
+ OrButton,
34
+ OrIcon,
35
+ OrMenu,
36
+ OrMenuItem
37
+ },
38
+ inheritAttrs: false,
39
+ props: {
40
+ modelValue: {
41
+ type: Object,
42
+ default: {}
43
+ },
44
+ value: {
45
+ type: Object,
46
+ default: {}
47
+ },
48
+ length: {
49
+ type: Number,
50
+ required: true
51
+ },
52
+ pageSizeOptions: {
53
+ type: Array,
54
+ default: [50, 20, 10, 5]
55
+ }
56
+ },
57
+ emits: ['update:modelValue', 'input'],
58
+ expose: ['root'],
59
+ setup(props, context) {
60
+ // Refs
61
+ const root = ref();
62
+ const limitButton = ref();
63
+ const limitButtonRoot = computed(() => {
64
+ var _a;
65
+ return (_a = limitButton.value) === null || _a === void 0 ? void 0 : _a.root;
66
+ });
67
+ const limitMenu = ref();
68
+ const limitMenuRoot = computed(() => {
69
+ var _a;
70
+ return (_a = limitMenu.value) === null || _a === void 0 ? void 0 : _a.root;
71
+ });
72
+ // Styles
73
+ const classAttribute = useClassAttribute();
74
+ const rootStyles = computed(() => ['or-pagination', ...PaginationRoot, classAttribute.value]);
75
+ const offsetControlStyles = computed(() => [...PaginationOffsetControl]);
76
+ const limitControlStyles = computed(() => [...PaginationLimitControl]);
77
+ // State
78
+ const proxyModelValue = computed({
79
+ get: () => {
80
+ var _a;
81
+ return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
82
+ },
83
+
84
+ set: value => {
85
+ context.emit('input', value);
86
+ context.emit('update:modelValue', value);
87
+ }
88
+ });
89
+ const currentLimit = computed({
90
+ get: () => {
91
+ var _a;
92
+ return (_a = proxyModelValue.value.limit) !== null && _a !== void 0 ? _a : props.pageSizeOptions[0];
93
+ },
94
+ set: value => {
95
+ proxyModelValue.value = {
96
+ limit: value,
97
+ offset: currentOffset.value
98
+ };
99
+ }
100
+ });
101
+ const currentOffset = computed({
102
+ get: () => {
103
+ var _a;
104
+ return (_a = proxyModelValue.value.offset) !== null && _a !== void 0 ? _a : 0;
105
+ },
106
+ set: value => {
107
+ proxyModelValue.value = {
108
+ limit: currentLimit.value,
109
+ offset: value
110
+ };
111
+ }
112
+ });
113
+ const currentPage = computed({
114
+ get: () => {
115
+ return Math.floor(currentOffset.value / currentLimit.value) + 1;
116
+ },
117
+ set: value => {
118
+ currentOffset.value = (value - 1) * currentLimit.value;
119
+ }
120
+ });
121
+ const firstPage = computed(() => {
122
+ return 1;
123
+ });
124
+ const lastPage = computed(() => {
125
+ return Math.ceil(props.length / currentLimit.value);
126
+ });
127
+ const buttonGroup = computed(() => {
128
+ return Array.from({
129
+ length: lastPage.value
130
+ }, (_, index) => index + 1).map(page => {
131
+ switch (true) {
132
+ case page > firstPage.value && page < currentPage.value - 1:
133
+ case page > currentPage.value + 1 && page < lastPage.value:
134
+ return '…';
135
+ default:
136
+ return page;
137
+ }
138
+ }).reduce((accumulator, page) => {
139
+ if (accumulator[accumulator.length - 1] === page) {
140
+ return accumulator;
141
+ }
142
+ return [...accumulator, page];
143
+ }, []);
144
+ });
145
+ // Functions
146
+ function toPreviousPage() {
147
+ currentPage.value = currentPage.value - 1;
148
+ }
149
+ function toNextPage() {
150
+ currentPage.value = currentPage.value + 1;
151
+ }
152
+ function toPage(page) {
153
+ currentPage.value = page;
154
+ }
155
+ return {
156
+ root,
157
+ limitButton,
158
+ limitButtonRoot,
159
+ limitMenu,
160
+ limitMenuRoot,
161
+ rootStyles,
162
+ offsetControlStyles,
163
+ limitControlStyles,
164
+ proxyModelValue,
165
+ currentLimit,
166
+ currentOffset,
167
+ currentPage,
168
+ firstPage,
169
+ lastPage,
170
+ buttonGroup,
171
+ toPreviousPage,
172
+ toNextPage,
173
+ toPage
174
+ };
175
+ }
176
+ });
177
+
178
+ /* script */
179
+ const __vue_script__ = script;
180
+
181
+ /* template */
182
+ var __vue_render__ = function () {
183
+ var _vm = this;
184
+ var _h = _vm.$createElement;
185
+ var _c = _vm._self._c || _h;
186
+ return _c('div', _vm._b({
187
+ ref: "root",
188
+ class: _vm.rootStyles
189
+ }, 'div', _vm.$attrs, false), [_c('div', {
190
+ class: _vm.offsetControlStyles
191
+ }, [_c('OrButton', {
192
+ attrs: {
193
+ "variant": 'link',
194
+ "color": 'inherit',
195
+ "disabled": _vm.currentPage === _vm.firstPage
196
+ },
197
+ on: {
198
+ "click": function ($event) {
199
+ $event.stopPropagation();
200
+ return _vm.toPreviousPage();
201
+ }
202
+ }
203
+ }, [_c('OrIcon', {
204
+ attrs: {
205
+ "icon": 'keyboard_arrow_left'
206
+ }
207
+ })], 1), _vm._v(" "), _vm._l(_vm.buttonGroup, function (page, index) {
208
+ return _c('OrButton', {
209
+ key: index,
210
+ attrs: {
211
+ "variant": 'link',
212
+ "color": 'inherit',
213
+ "activated": _vm.currentPage === page
214
+ },
215
+ on: {
216
+ "click": function ($event) {
217
+ $event.stopPropagation();
218
+ typeof page === 'number' && _vm.toPage(page);
219
+ }
220
+ }
221
+ }, [_vm._v("\n " + _vm._s(page) + "\n ")]);
222
+ }), _vm._v(" "), _c('OrButton', {
223
+ attrs: {
224
+ "variant": 'link',
225
+ "color": 'inherit',
226
+ "disabled": _vm.currentPage === _vm.lastPage
227
+ },
228
+ on: {
229
+ "click": function ($event) {
230
+ $event.stopPropagation();
231
+ return _vm.toNextPage();
232
+ }
233
+ }
234
+ }, [_c('OrIcon', {
235
+ attrs: {
236
+ "icon": 'keyboard_arrow_right'
237
+ }
238
+ })], 1)], 2), _vm._v(" "), _c('div', {
239
+ class: _vm.limitControlStyles
240
+ }, [_vm._v("\n Per page:\n\n "), _c('OrButton', {
241
+ ref: "limitButton",
242
+ attrs: {
243
+ "variant": 'link',
244
+ "color": 'inherit',
245
+ "activated": true
246
+ },
247
+ on: {
248
+ "click": function ($event) {
249
+ $event.stopPropagation();
250
+ return _vm.limitMenu.open();
251
+ }
252
+ }
253
+ }, [_vm._v("\n " + _vm._s(_vm.currentLimit) + " "), _c('OrIcon', {
254
+ attrs: {
255
+ "icon": 'arrow_drop_down'
256
+ }
257
+ })], 1), _vm._v(" "), _c('OrMenu', {
258
+ ref: "limitMenu",
259
+ attrs: {
260
+ "trigger": _vm.limitButtonRoot
261
+ }
262
+ }, _vm._l(_vm.pageSizeOptions, function (pageSize) {
263
+ return _c('OrMenuItem', {
264
+ key: pageSize,
265
+ on: {
266
+ "click": function ($event) {
267
+ $event.stopPropagation();
268
+ _vm.currentLimit = pageSize;
269
+ }
270
+ }
271
+ }, [_vm._v("\n " + _vm._s(pageSize) + "\n ")]);
272
+ }), 1)], 1)]);
273
+ };
274
+ var __vue_staticRenderFns__ = [];
275
+
276
+ /* style */
277
+ const __vue_inject_styles__ = undefined;
278
+ /* scoped */
279
+ const __vue_scope_id__ = undefined;
280
+ /* module identifier */
281
+ const __vue_module_identifier__ = undefined;
282
+ /* functional template */
283
+ const __vue_is_functional_template__ = false;
284
+ /* style inject */
285
+
286
+ /* style inject SSR */
287
+
288
+ /* style inject shadow dom */
289
+
290
+ const __vue_component__ = /*#__PURE__*/normalizeComponent({
291
+ render: __vue_render__,
292
+ staticRenderFns: __vue_staticRenderFns__
293
+ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
294
+ var __vue_component__$1 = __vue_component__;
295
+
296
+ export { __vue_component__$1 as _ };
@@ -137,6 +137,6 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
137
137
  render: __vue_render__,
138
138
  staticRenderFns: __vue_staticRenderFns__
139
139
  }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
140
- var OrSearch = __vue_component__;
140
+ var __vue_component__$1 = __vue_component__;
141
141
 
142
- export { OrSearch as O };
142
+ export { __vue_component__$1 as _ };
@@ -82,11 +82,11 @@ var script = defineComponent({
82
82
  default: []
83
83
  },
84
84
  modelValue: {
85
- type: [String, Array],
85
+ type: [String, Number, Array],
86
86
  default: undefined
87
87
  },
88
88
  value: {
89
- type: [String, Array],
89
+ type: [String, Number, Array],
90
90
  default: undefined
91
91
  },
92
92
  multiple: {
@@ -347,7 +347,7 @@ var __vue_render__ = function () {
347
347
  return _vm.$emit('blur', $event);
348
348
  }
349
349
  }
350
- }, [_vm.proxyModelValue && _vm.proxyModelValue.length > 0 ? [_vm.multiple ? [_vm._t("valueTemplate", function () {
350
+ }, [_vm.proxyModelValue !== undefined ? [_vm.multiple ? [_vm._t("valueTemplate", function () {
351
351
  return _vm._l(_vm.selection, function (option) {
352
352
  return _c('OrTag', {
353
353
  key: option.value,
@@ -129,6 +129,6 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
129
129
  render: __vue_render__,
130
130
  staticRenderFns: __vue_staticRenderFns__
131
131
  }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
132
- var __vue_component__$1 = __vue_component__;
132
+ var OrSortHeader = __vue_component__;
133
133
 
134
- export { __vue_component__$1 as _ };
134
+ export { OrSortHeader as O };
@@ -52,6 +52,7 @@ export * from './or-notification-v3';
52
52
  export * from './or-overflow-menu';
53
53
  export * from './or-overlay';
54
54
  export * from './or-overlay-v3';
55
+ export * from './or-pagination-v3';
55
56
  export * from './or-popover-v3';
56
57
  export * from './or-progress';
57
58
  export * from './or-progress-v3';
@@ -5,11 +5,11 @@ export { _ as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonVi
5
5
  export { O as OrButtonV2 } from '../OrButton-705cd0bd.js';
6
6
  export { O as OrIconButton } from '../OrIconButton-65962c1c.js';
7
7
  export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE } from '../constants-c5d1139f.js';
8
- export { a as ButtonColor, b as ButtonType, B as ButtonVariant, O as OrButtonV3 } from '../OrButton-0e91a808.js';
8
+ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, O as OrButtonV3 } from '../OrButton-66d37aff.js';
9
9
  export { O as OrCard } from '../OrCard-a6b30f8f.js';
10
10
  export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from '../OrCardCollection-89428bbf.js';
11
- export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-a8d5ce32.js';
12
- export { _ as OrCardV3 } from '../OrCard-29116e1f.js';
11
+ export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-a9a779ea.js';
12
+ export { O as OrCardV3 } from '../OrCard-58a1ba3e.js';
13
13
  export { a as OrCarousel, _ as OrCarouselItem } from '../OrCarouselItem-6da755c0.js';
14
14
  export { O as OrCheckbox } from '../OrCheckbox-4cbddd67.js';
15
15
  export { O as OrCheckboxV3 } from '../OrCheckbox-dbef9f9a.js';
@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from '../OrCode-edc7a1f5.js';
19
19
  export { O as OrCollapse } from '../OrCollapse-3aa9a9b7.js';
20
20
  export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker-a1a37e83.js';
21
21
  export { _ as OrConfirm } from '../OrConfirm-56d01cff.js';
22
- export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-18c534df.js';
22
+ export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-e1ca1422.js';
23
23
  export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-e212f892.js';
24
24
  export { O as OrError } from '../OrError-31503e4c.js';
25
25
  export { _ as OrErrorTagV3 } from '../OrErrorTag-d0c5bcf4.js';
@@ -58,21 +58,22 @@ export { N as NotificationVariant, _ as OrNotificationV3 } from '../OrNotificati
58
58
  export { _ as OrOverflowMenu } from '../OrOverflowMenu-711e460e.js';
59
59
  export { O as OrOverlay } from '../OrOverlay-47967a8b.js';
60
60
  export { O as OrOverlayV3 } from '../OrOverlay-3c89d622.js';
61
+ export { _ as OrPaginationV3 } from '../OrPagination-354e9abd.js';
61
62
  export { O as OrProgress, a as OrProgressColors, b as OrProgressTypes } from '../OrProgress-de947341.js';
62
63
  export { _ as OrProgressV3, P as ProgressColor, a as ProgressType } from '../OrProgress-cc397a38.js';
63
64
  export { _ as OrRadio } from '../OrRadio-187d6fc7.js';
64
65
  export { _ as OrRadioGroup } from '../OrRadioGroup-aa9f0757.js';
65
66
  export { _ as OrRadioV3 } from '../OrRadio-cd39b20b.js';
66
- export { O as OrSearchV3 } from '../OrSearch-19f43fe5.js';
67
+ export { _ as OrSearchV3 } from '../OrSearch-9d402f56.js';
67
68
  export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-21cc914e.js';
68
69
  export { _ as OrSelect } from '../OrSelect-a23d4210.js';
69
- export { _ as OrSelectV3 } from '../OrSelect-759b4410.js';
70
+ export { _ as OrSelectV3 } from '../OrSelect-1c9421ad.js';
70
71
  export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-e2b2c9ec.js';
71
72
  export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-c95ef614.js';
72
73
  export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-242d22f3.js';
73
74
  export { _ as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText-516993b4.js';
74
75
  export { _ as OrSlider } from '../OrSlider-59d05856.js';
75
- export { _ as OrSortHeaderV3 } from '../OrSortHeader-9932d28f.js';
76
+ export { O as OrSortHeaderV3 } from '../OrSortHeader-396e6a7c.js';
76
77
  export { _ as OrStepper } from '../OrStepper-3fc1a2b3.js';
77
78
  export { _ as OrSwitch } from '../OrSwitch-47670dbd.js';
78
79
  export { _ as OrSwitchV3 } from '../OrSwitch-237a2081.js';