@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: {
@@ -0,0 +1,227 @@
1
+ import { defineComponent, ref, computed, watch } from 'vue-demi';
2
+ import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
3
+ import '@vueuse/core';
4
+ import { _ as __vue_component__$1 } from './OrCard-de799db0.js';
5
+ import { _ as __vue_component__$2 } from './OrIconButton-e17e4944.js';
6
+ import { _ as __vue_component__$3 } from './OrInput-2f16a7ac.js';
7
+ import { _ as __vue_component__$4 } from './OrSortHeader-19bf94ca.js';
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: __vue_component__$1,
49
+ OrIconButton: __vue_component__$2,
50
+ OrInput: __vue_component__$3,
51
+ OrSortHeader: __vue_component__$4
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
+
227
+ export { CardCollectionView as C, __vue_component__ as _ };
@@ -1,5 +1,5 @@
1
1
  import { defineComponent, ref, computed, watch } from 'vue-demi';
2
- import { _ as __vue_component__$2, a as ButtonColor } from './OrButton-357a5756.js';
2
+ import { _ as __vue_component__$2, a as ButtonColor } from './OrButton-3d4fc9da.js';
3
3
  import { _ as __vue_component__$1 } from './OrOverlay-18ba2dc6.js';
4
4
  import { _ as __vue_component__$3 } from './OrInput-2f16a7ac.js';
5
5
  import { useMagicKeys, whenever } from '@vueuse/core';
@@ -0,0 +1,296 @@
1
+ import { defineComponent, ref, computed } from 'vue-demi';
2
+ import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
3
+ import '@vueuse/core';
4
+ import { _ as __vue_component__$1 } from './OrButton-3d4fc9da.js';
5
+ import { _ as __vue_component__$2 } from './OrIcon-5e394c62.js';
6
+ import { _ as __vue_component__$4 } from './OrMenuItem-c7f28480.js';
7
+ import { _ as __vue_component__$3 } from './OrMenu-df27d0ef.js';
8
+ import './OrPopover-9bafbdb4.js';
9
+ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
10
+
11
+ const PaginationRoot = [
12
+ // Layout
13
+ 'layout-row',
14
+ // Spacing
15
+ 'gap-xl',
16
+ // Typography
17
+ 'typography-caption-regular',
18
+ // Theme
19
+ 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
20
+ const PaginationOffsetControl = [
21
+ // Layout
22
+ 'layout-row',
23
+ // Spacing
24
+ 'gap-md'];
25
+ const PaginationLimitControl = [
26
+ // Layout
27
+ 'layout-row',
28
+ // Spacing
29
+ 'gap-sm'];
30
+
31
+ var script = defineComponent({
32
+ name: 'OrPagination',
33
+ components: {
34
+ OrButton: __vue_component__$1,
35
+ OrIcon: __vue_component__$2,
36
+ OrMenu: __vue_component__$3,
37
+ OrMenuItem: __vue_component__$4
38
+ },
39
+ inheritAttrs: false,
40
+ props: {
41
+ modelValue: {
42
+ type: Object,
43
+ default: {}
44
+ },
45
+ value: {
46
+ type: Object,
47
+ default: {}
48
+ },
49
+ length: {
50
+ type: Number,
51
+ required: true
52
+ },
53
+ pageSizeOptions: {
54
+ type: Array,
55
+ default: [50, 20, 10, 5]
56
+ }
57
+ },
58
+ emits: ['update:modelValue', 'input'],
59
+ expose: ['root'],
60
+ setup(props, context) {
61
+ // Refs
62
+ const root = ref();
63
+ const limitButton = ref();
64
+ const limitButtonRoot = computed(() => {
65
+ var _a;
66
+ return (_a = limitButton.value) === null || _a === void 0 ? void 0 : _a.root;
67
+ });
68
+ const limitMenu = ref();
69
+ const limitMenuRoot = computed(() => {
70
+ var _a;
71
+ return (_a = limitMenu.value) === null || _a === void 0 ? void 0 : _a.root;
72
+ });
73
+ // Styles
74
+ const classAttribute = useClassAttribute();
75
+ const rootStyles = computed(() => ['or-pagination', ...PaginationRoot, classAttribute.value]);
76
+ const offsetControlStyles = computed(() => [...PaginationOffsetControl]);
77
+ const limitControlStyles = computed(() => [...PaginationLimitControl]);
78
+ // State
79
+ const proxyModelValue = computed({
80
+ get: () => {
81
+ var _a;
82
+ return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
83
+ },
84
+
85
+ set: value => {
86
+ context.emit('input', value);
87
+ context.emit('update:modelValue', value);
88
+ }
89
+ });
90
+ const currentLimit = computed({
91
+ get: () => {
92
+ var _a;
93
+ return (_a = proxyModelValue.value.limit) !== null && _a !== void 0 ? _a : props.pageSizeOptions[0];
94
+ },
95
+ set: value => {
96
+ proxyModelValue.value = {
97
+ limit: value,
98
+ offset: currentOffset.value
99
+ };
100
+ }
101
+ });
102
+ const currentOffset = computed({
103
+ get: () => {
104
+ var _a;
105
+ return (_a = proxyModelValue.value.offset) !== null && _a !== void 0 ? _a : 0;
106
+ },
107
+ set: value => {
108
+ proxyModelValue.value = {
109
+ limit: currentLimit.value,
110
+ offset: value
111
+ };
112
+ }
113
+ });
114
+ const currentPage = computed({
115
+ get: () => {
116
+ return Math.floor(currentOffset.value / currentLimit.value) + 1;
117
+ },
118
+ set: value => {
119
+ currentOffset.value = (value - 1) * currentLimit.value;
120
+ }
121
+ });
122
+ const firstPage = computed(() => {
123
+ return 1;
124
+ });
125
+ const lastPage = computed(() => {
126
+ return Math.ceil(props.length / currentLimit.value);
127
+ });
128
+ const buttonGroup = computed(() => {
129
+ return Array.from({
130
+ length: lastPage.value
131
+ }, (_, index) => index + 1).map(page => {
132
+ switch (true) {
133
+ case page > firstPage.value && page < currentPage.value - 1:
134
+ case page > currentPage.value + 1 && page < lastPage.value:
135
+ return '…';
136
+ default:
137
+ return page;
138
+ }
139
+ }).reduce((accumulator, page) => {
140
+ if (accumulator[accumulator.length - 1] === page) {
141
+ return accumulator;
142
+ }
143
+ return [...accumulator, page];
144
+ }, []);
145
+ });
146
+ // Functions
147
+ function toPreviousPage() {
148
+ currentPage.value = currentPage.value - 1;
149
+ }
150
+ function toNextPage() {
151
+ currentPage.value = currentPage.value + 1;
152
+ }
153
+ function toPage(page) {
154
+ currentPage.value = page;
155
+ }
156
+ return {
157
+ root,
158
+ limitButton,
159
+ limitButtonRoot,
160
+ limitMenu,
161
+ limitMenuRoot,
162
+ rootStyles,
163
+ offsetControlStyles,
164
+ limitControlStyles,
165
+ proxyModelValue,
166
+ currentLimit,
167
+ currentOffset,
168
+ currentPage,
169
+ firstPage,
170
+ lastPage,
171
+ buttonGroup,
172
+ toPreviousPage,
173
+ toNextPage,
174
+ toPage
175
+ };
176
+ }
177
+ });
178
+
179
+ /* script */
180
+ const __vue_script__ = script;
181
+
182
+ /* template */
183
+ var __vue_render__ = function () {
184
+ var _vm = this;
185
+ var _h = _vm.$createElement;
186
+ var _c = _vm._self._c || _h;
187
+ return _c('div', _vm._b({
188
+ ref: "root",
189
+ class: _vm.rootStyles
190
+ }, 'div', _vm.$attrs, false), [_c('div', {
191
+ class: _vm.offsetControlStyles
192
+ }, [_c('OrButton', {
193
+ attrs: {
194
+ "variant": 'link',
195
+ "color": 'inherit',
196
+ "disabled": _vm.currentPage === _vm.firstPage
197
+ },
198
+ on: {
199
+ "click": function ($event) {
200
+ $event.stopPropagation();
201
+ return _vm.toPreviousPage();
202
+ }
203
+ }
204
+ }, [_c('OrIcon', {
205
+ attrs: {
206
+ "icon": 'keyboard_arrow_left'
207
+ }
208
+ })], 1), _vm._v(" "), _vm._l(_vm.buttonGroup, function (page, index) {
209
+ return _c('OrButton', {
210
+ key: index,
211
+ attrs: {
212
+ "variant": 'link',
213
+ "color": 'inherit',
214
+ "activated": _vm.currentPage === page
215
+ },
216
+ on: {
217
+ "click": function ($event) {
218
+ $event.stopPropagation();
219
+ typeof page === 'number' && _vm.toPage(page);
220
+ }
221
+ }
222
+ }, [_vm._v("\n " + _vm._s(page) + "\n ")]);
223
+ }), _vm._v(" "), _c('OrButton', {
224
+ attrs: {
225
+ "variant": 'link',
226
+ "color": 'inherit',
227
+ "disabled": _vm.currentPage === _vm.lastPage
228
+ },
229
+ on: {
230
+ "click": function ($event) {
231
+ $event.stopPropagation();
232
+ return _vm.toNextPage();
233
+ }
234
+ }
235
+ }, [_c('OrIcon', {
236
+ attrs: {
237
+ "icon": 'keyboard_arrow_right'
238
+ }
239
+ })], 1)], 2), _vm._v(" "), _c('div', {
240
+ class: _vm.limitControlStyles
241
+ }, [_vm._v("\n Per page:\n\n "), _c('OrButton', {
242
+ ref: "limitButton",
243
+ attrs: {
244
+ "variant": 'link',
245
+ "color": 'inherit',
246
+ "activated": true
247
+ },
248
+ on: {
249
+ "click": function ($event) {
250
+ $event.stopPropagation();
251
+ return _vm.limitMenu.open();
252
+ }
253
+ }
254
+ }, [_vm._v("\n " + _vm._s(_vm.currentLimit) + " "), _c('OrIcon', {
255
+ attrs: {
256
+ "icon": 'arrow_drop_down'
257
+ }
258
+ })], 1), _vm._v(" "), _c('OrMenu', {
259
+ ref: "limitMenu",
260
+ attrs: {
261
+ "trigger": _vm.limitButtonRoot
262
+ }
263
+ }, _vm._l(_vm.pageSizeOptions, function (pageSize) {
264
+ return _c('OrMenuItem', {
265
+ key: pageSize,
266
+ on: {
267
+ "click": function ($event) {
268
+ $event.stopPropagation();
269
+ _vm.currentLimit = pageSize;
270
+ }
271
+ }
272
+ }, [_vm._v("\n " + _vm._s(pageSize) + "\n ")]);
273
+ }), 1)], 1)]);
274
+ };
275
+ var __vue_staticRenderFns__ = [];
276
+
277
+ /* style */
278
+ const __vue_inject_styles__ = undefined;
279
+ /* scoped */
280
+ const __vue_scope_id__ = undefined;
281
+ /* module identifier */
282
+ const __vue_module_identifier__ = undefined;
283
+ /* functional template */
284
+ const __vue_is_functional_template__ = false;
285
+ /* style inject */
286
+
287
+ /* style inject SSR */
288
+
289
+ /* style inject shadow dom */
290
+
291
+ const __vue_component__ = /*#__PURE__*/normalizeComponent({
292
+ render: __vue_render__,
293
+ staticRenderFns: __vue_staticRenderFns__
294
+ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
295
+
296
+ export { __vue_component__ 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,
@@ -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,10 +5,10 @@ export { _ as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonVi
5
5
  export { _ as OrButtonV2 } from '../OrButton-c4f9955b.js';
6
6
  export { _ as OrIconButton } from '../OrIconButton-014e86a7.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 '../OrIconButton.vue_rollup-plugin-vue_script-9fb7b7ab.js';
8
- export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from '../OrButton-357a5756.js';
8
+ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from '../OrButton-3d4fc9da.js';
9
9
  export { _ as OrCard } from '../OrCard-b7268256.js';
10
10
  export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from '../OrCardCollection-f6b07557.js';
11
- export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-95b051e1.js';
11
+ export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-4f001551.js';
12
12
  export { _ as OrCardV3 } from '../OrCard-de799db0.js';
13
13
  export { a as OrCarousel, _ as OrCarouselItem } from '../OrCarouselItem-4e2cf3d8.js';
14
14
  export { _ as OrCheckbox } from '../OrCheckbox-915f1f0a.js';
@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from '../OrCode-41dd5f9b.js';
19
19
  export { _ as OrCollapse } from '../OrCollapse-4d892ca3.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-75abefdd.js';
21
21
  export { _ as OrConfirm } from '../OrConfirm-d7112dd3.js';
22
- export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-b0b2e43c.js';
22
+ export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-ba3f8c45.js';
23
23
  export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-349df9b2.js';
24
24
  export { _ as OrError } from '../OrError-081130bb.js';
25
25
  export { _ as OrErrorTagV3 } from '../OrErrorTag-782dd714.js';
@@ -58,6 +58,7 @@ export { N as NotificationVariant, _ as OrNotificationV3 } from '../OrNotificati
58
58
  export { _ as OrOverflowMenu } from '../OrOverflowMenu-10a4166a.js';
59
59
  export { _ as OrOverlay } from '../OrOverlay-3b52865d.js';
60
60
  export { _ as OrOverlayV3 } from '../OrOverlay-18ba2dc6.js';
61
+ export { _ as OrPaginationV3 } from '../OrPagination-a56eb93b.js';
61
62
  export { _ as OrProgress, O as OrProgressColors, a as OrProgressTypes } from '../OrProgress-4ee24824.js';
62
63
  export { _ as OrProgressV3, P as ProgressColor, a as ProgressType } from '../OrProgress-c27c8946.js';
63
64
  export { _ as OrRadio } from '../OrRadio-e4198532.js';
@@ -66,7 +67,7 @@ export { _ as OrRadioV3 } from '../OrRadio-848ce55d.js';
66
67
  export { _ as OrSearchV3 } from '../OrSearch-ddb7c1fe.js';
67
68
  export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-e8dce8f9.js';
68
69
  export { _ as OrSelect } from '../OrSelect-dae2b069.js';
69
- export { _ as OrSelectV3 } from '../OrSelect-ac382aa6.js';
70
+ export { _ as OrSelectV3 } from '../OrSelect-ca2510cd.js';
70
71
  export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-7d6125bb.js';
71
72
  export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-fabc7bc9.js';
72
73
  export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-cc94bdc9.js';
@@ -16,6 +16,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
16
16
  type: PropType<ButtonColor>;
17
17
  default: ButtonColor;
18
18
  };
19
+ activated: {
20
+ type: BooleanConstructor;
21
+ default: boolean;
22
+ };
19
23
  disabled: {
20
24
  type: BooleanConstructor;
21
25
  default: boolean;
@@ -41,6 +45,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
41
45
  type: PropType<ButtonColor>;
42
46
  default: ButtonColor;
43
47
  };
48
+ activated: {
49
+ type: BooleanConstructor;
50
+ default: boolean;
51
+ };
44
52
  disabled: {
45
53
  type: BooleanConstructor;
46
54
  default: boolean;
@@ -54,6 +62,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
54
62
  default: string;
55
63
  };
56
64
  }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
65
+ activated: boolean;
57
66
  type: ButtonType;
58
67
  variant: ButtonVariant;
59
68
  color: ButtonColor;
@@ -66,6 +75,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
66
75
  root: import("@vue/composition-api").Ref<HTMLButtonElement | undefined>;
67
76
  rootStyles: import("@vue/composition-api").ComputedRef<(string | false | undefined)[]>;
68
77
  }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
78
+ activated: boolean;
69
79
  type: ButtonType;
70
80
  variant: ButtonVariant;
71
81
  color: ButtonColor;
@@ -75,6 +85,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
75
85
  } & {} & {
76
86
  [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
77
87
  }, {
88
+ activated: boolean;
78
89
  type: ButtonType;
79
90
  variant: ButtonVariant;
80
91
  color: ButtonColor;
@@ -1,4 +1,4 @@
1
- export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from '../../OrButton-357a5756.js';
1
+ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from '../../OrButton-3d4fc9da.js';
2
2
  import 'vue-demi';
3
3
  import '../../useClassAttribute-47fdb016.js';
4
4
  import '@vueuse/core';