@onereach/ui-components 2.69.6 → 2.69.7-beta.2155.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 (103) hide show
  1. package/dist/bundled/v2/{OrButton-4b99c680.js → OrButton-ec551691.js} +14 -1
  2. package/dist/bundled/v2/{OrCardCollection-c4209a92.js → OrCardCollection-1b20a00f.js} +1 -1
  3. package/dist/bundled/v2/{OrConfirm-cab6535b.js → OrConfirm-0a34d7e9.js} +1 -1
  4. package/dist/bundled/v2/OrPagination-ccaef550.js +297 -0
  5. package/dist/bundled/v2/{OrSelect-b20a9be0.js → OrSelect-ff9e4fbd.js} +3 -3
  6. package/dist/bundled/v2/components/index.d.ts +1 -0
  7. package/dist/bundled/v2/components/index.js +5 -4
  8. package/dist/bundled/v2/components/or-button-v3/OrButton.vue.d.ts +11 -0
  9. package/dist/bundled/v2/components/or-button-v3/index.js +1 -1
  10. package/dist/bundled/v2/components/or-card-collection-v3/index.js +2 -2
  11. package/dist/bundled/v2/components/or-confirm-v3/index.js +2 -2
  12. package/dist/bundled/v2/components/or-pagination-v3/OrPagination.stories3.d.ts +12 -0
  13. package/dist/bundled/v2/components/or-pagination-v3/OrPagination.vue.d.ts +110 -0
  14. package/dist/bundled/v2/components/or-pagination-v3/index.d.ts +2 -0
  15. package/dist/bundled/v2/components/or-pagination-v3/index.js +20 -0
  16. package/dist/bundled/v2/components/or-pagination-v3/styles.d.ts +3 -0
  17. package/dist/bundled/v2/components/or-pagination-v3/types.d.ts +4 -0
  18. package/dist/bundled/v2/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  19. package/dist/bundled/v2/components/or-select-v3/index.d.ts +1 -0
  20. package/dist/bundled/v2/components/or-select-v3/index.js +1 -1
  21. package/dist/bundled/v2/components/or-select-v3/types.d.ts +1 -1
  22. package/dist/bundled/v2/index.js +6 -5
  23. package/dist/bundled/v3/{OrButton-a671b8a1.js → OrButton-e38644d0.js} +3 -2
  24. package/dist/bundled/v3/{OrButton.vue_vue_type_script_lang-b0dc31ca.js → OrButton.vue_vue_type_script_lang-08f0dea0.js} +13 -1
  25. package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-9a2ae9a3.js → OrCardCollection.vue_vue_type_script_lang-ff722f3f.js} +2 -2
  26. package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-f57ffa1a.js → OrConfirm.vue_vue_type_script_lang-ed99973c.js} +2 -2
  27. package/dist/bundled/v3/OrPagination.vue_vue_type_script_lang-5246de48.js +180 -0
  28. package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-15285ce4.js → OrSelect.vue_vue_type_script_lang-05b03858.js} +2 -2
  29. package/dist/bundled/v3/components/index.d.ts +1 -0
  30. package/dist/bundled/v3/components/index.js +6 -5
  31. package/dist/bundled/v3/components/or-button-v3/OrButton.vue.d.ts +11 -0
  32. package/dist/bundled/v3/components/or-button-v3/index.js +1 -1
  33. package/dist/bundled/v3/components/or-card-collection-v3/index.js +3 -3
  34. package/dist/bundled/v3/components/or-confirm-v3/index.js +3 -3
  35. package/dist/bundled/v3/components/or-pagination-v3/OrPagination.stories3.d.ts +12 -0
  36. package/dist/bundled/v3/components/or-pagination-v3/OrPagination.vue.d.ts +110 -0
  37. package/dist/bundled/v3/components/or-pagination-v3/index.d.ts +2 -0
  38. package/dist/bundled/v3/components/or-pagination-v3/index.js +22 -0
  39. package/dist/bundled/v3/components/or-pagination-v3/styles.d.ts +3 -0
  40. package/dist/bundled/v3/components/or-pagination-v3/types.d.ts +4 -0
  41. package/dist/bundled/v3/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  42. package/dist/bundled/v3/components/or-select-v3/index.d.ts +1 -0
  43. package/dist/bundled/v3/components/or-select-v3/index.js +1 -1
  44. package/dist/bundled/v3/components/or-select-v3/types.d.ts +1 -1
  45. package/dist/bundled/v3/index.js +237 -156
  46. package/dist/esm/v2/{OrButton-357e1e2c.js → OrButton-c02a6c26.js} +14 -1
  47. package/dist/esm/v2/{OrCardCollection-57d11adf.js → OrCardCollection-46a25600.js} +1 -1
  48. package/dist/esm/v2/{OrConfirm-ec7aef0e.js → OrConfirm-31dfa3e0.js} +1 -1
  49. package/dist/esm/v2/OrPagination-179098fb.js +297 -0
  50. package/dist/esm/v2/{OrSelect-f0ff5a85.js → OrSelect-651bb83e.js} +3 -3
  51. package/dist/esm/v2/components/index.d.ts +1 -0
  52. package/dist/esm/v2/components/index.js +5 -4
  53. package/dist/esm/v2/components/or-button-v3/OrButton.vue.d.ts +11 -0
  54. package/dist/esm/v2/components/or-button-v3/index.js +1 -1
  55. package/dist/esm/v2/components/or-card-collection-v3/index.js +2 -2
  56. package/dist/esm/v2/components/or-confirm-v3/index.js +2 -2
  57. package/dist/esm/v2/components/or-pagination-v3/OrPagination.stories3.d.ts +12 -0
  58. package/dist/esm/v2/components/or-pagination-v3/OrPagination.vue.d.ts +110 -0
  59. package/dist/esm/v2/components/or-pagination-v3/index.d.ts +2 -0
  60. package/dist/esm/v2/components/or-pagination-v3/index.js +18 -0
  61. package/dist/esm/v2/components/or-pagination-v3/styles.d.ts +3 -0
  62. package/dist/esm/v2/components/or-pagination-v3/types.d.ts +4 -0
  63. package/dist/esm/v2/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  64. package/dist/esm/v2/components/or-select-v3/index.d.ts +1 -0
  65. package/dist/esm/v2/components/or-select-v3/index.js +1 -1
  66. package/dist/esm/v2/components/or-select-v3/types.d.ts +1 -1
  67. package/dist/esm/v2/index.js +5 -4
  68. package/dist/esm/v3/{OrButton-bb6bf8a9.js → OrButton-2ca1996a.js} +15 -2
  69. package/dist/esm/v3/{OrCardCollection-2a6514f3.js → OrCardCollection-167ed657.js} +1 -1
  70. package/dist/esm/v3/{OrConfirm-5d56cbd3.js → OrConfirm-492012c6.js} +1 -1
  71. package/dist/esm/v3/OrPagination-a84ad212.js +258 -0
  72. package/dist/esm/v3/{OrSelect-7e813982.js → OrSelect-28a175dc.js} +3 -3
  73. package/dist/esm/v3/components/index.d.ts +1 -0
  74. package/dist/esm/v3/components/index.js +5 -4
  75. package/dist/esm/v3/components/or-button-v3/OrButton.vue.d.ts +11 -0
  76. package/dist/esm/v3/components/or-button-v3/index.js +1 -1
  77. package/dist/esm/v3/components/or-card-collection-v3/index.js +2 -2
  78. package/dist/esm/v3/components/or-confirm-v3/index.js +2 -2
  79. package/dist/esm/v3/components/or-pagination-v3/OrPagination.stories3.d.ts +12 -0
  80. package/dist/esm/v3/components/or-pagination-v3/OrPagination.vue.d.ts +110 -0
  81. package/dist/esm/v3/components/or-pagination-v3/index.d.ts +2 -0
  82. package/dist/esm/v3/components/or-pagination-v3/index.js +17 -0
  83. package/dist/esm/v3/components/or-pagination-v3/styles.d.ts +3 -0
  84. package/dist/esm/v3/components/or-pagination-v3/types.d.ts +4 -0
  85. package/dist/esm/v3/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  86. package/dist/esm/v3/components/or-select-v3/index.d.ts +1 -0
  87. package/dist/esm/v3/components/or-select-v3/index.js +1 -1
  88. package/dist/esm/v3/components/or-select-v3/types.d.ts +1 -1
  89. package/dist/esm/v3/index.js +5 -4
  90. package/package.json +2 -3
  91. package/src/components/index.ts +1 -0
  92. package/src/components/or-button-v3/OrButton.stories3.ts +4 -0
  93. package/src/components/or-button-v3/OrButton.vue +6 -0
  94. package/src/components/or-button-v3/styles.ts +15 -1
  95. package/src/components/or-pagination-v3/OrPagination.docs.mdx +7 -0
  96. package/src/components/or-pagination-v3/OrPagination.stories3.ts +87 -0
  97. package/src/components/or-pagination-v3/OrPagination.vue +261 -0
  98. package/src/components/or-pagination-v3/index.ts +2 -0
  99. package/src/components/or-pagination-v3/styles.ts +30 -0
  100. package/src/components/or-pagination-v3/types.ts +4 -0
  101. package/src/components/or-select-v3/OrSelect.vue +3 -3
  102. package/src/components/or-select-v3/index.ts +1 -0
  103. package/src/components/or-select-v3/types.ts +1 -1
@@ -23,13 +23,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
23
23
  dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
24
24
  noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
25
25
  controlId: import("@vue/composition-api").Ref<string>;
26
- proxyModelValue: import("@vue/composition-api").WritableComputedRef<string | string[]>;
26
+ proxyModelValue: import("@vue/composition-api").WritableComputedRef<string | number | (string | number)[]>;
27
27
  invalid: import("@vue/composition-api").ComputedRef<boolean>;
28
28
  readonly: import("@vue/composition-api").ComputedRef<boolean>;
29
29
  selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
30
30
  searchText: import("@vue/composition-api").Ref<string>;
31
31
  internalSearchOptions: import("@vue/composition-api").Ref<{
32
- value: string;
32
+ value: string | number;
33
33
  label: string;
34
34
  }[]>;
35
35
  resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
@@ -49,11 +49,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
49
49
  default: SelectOption[];
50
50
  };
51
51
  modelValue: {
52
- type: PropType<string | string[]>;
52
+ type: PropType<string | number | (string | number)[]>;
53
53
  default: undefined;
54
54
  };
55
55
  value: {
56
- type: PropType<string | string[]>;
56
+ type: PropType<string | number | (string | number)[]>;
57
57
  default: undefined;
58
58
  };
59
59
  multiple: {
@@ -114,11 +114,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
114
114
  default: SelectOption[];
115
115
  };
116
116
  modelValue: {
117
- type: PropType<string | string[]>;
117
+ type: PropType<string | number | (string | number)[]>;
118
118
  default: undefined;
119
119
  };
120
120
  value: {
121
- type: PropType<string | string[]>;
121
+ type: PropType<string | number | (string | number)[]>;
122
122
  default: undefined;
123
123
  };
124
124
  multiple: {
@@ -173,8 +173,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
173
173
  label: string;
174
174
  options: SelectOption[];
175
175
  searchOptions: SelectOption[];
176
- modelValue: string | string[];
177
- value: string | string[];
176
+ modelValue: string | number | (string | number)[];
177
+ value: string | number | (string | number)[];
178
178
  multiple: boolean;
179
179
  size: SelectSize;
180
180
  placeholder: string;
@@ -210,13 +210,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
210
210
  dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
211
211
  noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
212
212
  controlId: import("@vue/composition-api").Ref<string>;
213
- proxyModelValue: import("@vue/composition-api").WritableComputedRef<string | string[]>;
213
+ proxyModelValue: import("@vue/composition-api").WritableComputedRef<string | number | (string | number)[]>;
214
214
  invalid: import("@vue/composition-api").ComputedRef<boolean>;
215
215
  readonly: import("@vue/composition-api").ComputedRef<boolean>;
216
216
  selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
217
217
  searchText: import("@vue/composition-api").Ref<string>;
218
218
  internalSearchOptions: import("@vue/composition-api").Ref<{
219
- value: string;
219
+ value: string | number;
220
220
  label: string;
221
221
  }[]>;
222
222
  resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
@@ -230,8 +230,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
230
230
  label: string;
231
231
  options: SelectOption[];
232
232
  searchOptions: SelectOption[];
233
- modelValue: string | string[];
234
- value: string | string[];
233
+ modelValue: string | number | (string | number)[];
234
+ value: string | number | (string | number)[];
235
235
  multiple: boolean;
236
236
  size: SelectSize;
237
237
  placeholder: string;
@@ -249,8 +249,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
249
249
  label: string;
250
250
  options: SelectOption[];
251
251
  searchOptions: SelectOption[];
252
- modelValue: string | string[];
253
- value: string | string[];
252
+ modelValue: string | number | (string | number)[];
253
+ value: string | number | (string | number)[];
254
254
  multiple: boolean;
255
255
  size: SelectSize;
256
256
  placeholder: string;
@@ -1,2 +1,3 @@
1
1
  export { default as OrSelectV3 } from './OrSelect.vue';
2
2
  export * from './props';
3
+ export * from './types';
@@ -1,4 +1,4 @@
1
- export { _ as OrSelectV3 } from '../../OrSelect-f0ff5a85.js';
1
+ export { _ as OrSelectV3 } from '../../OrSelect-651bb83e.js';
2
2
  export { a as SelectSize } from '../../OrInputBox-4d5a318d.js';
3
3
  import 'vue-demi';
4
4
  import '../../dropdown-open-0d314aa4.js';
@@ -1,5 +1,5 @@
1
1
  export interface SelectOption {
2
- value: string;
2
+ value: string | number;
3
3
  label: string;
4
4
  }
5
5
  export interface SelectSearchFunction {
@@ -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-357e1e2c.js';
8
+ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from './OrButton-c02a6c26.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 { D as DefaultCardCollectionViews, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-57d11adf.js';
11
+ export { D as DefaultCardCollectionViews, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-46a25600.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-d4400b42.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-ec7aef0e.js';
22
+ export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-31dfa3e0.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';
@@ -59,6 +59,7 @@ export { N as NotificationVariant, _ as OrNotificationV3 } from './OrNotificatio
59
59
  export { _ as OrOverflowMenu } from './OrOverflowMenu-10a4166a.js';
60
60
  export { _ as OrOverlay } from './OrOverlay-3b52865d.js';
61
61
  export { _ as OrOverlayV3 } from './OrOverlay-18ba2dc6.js';
62
+ export { _ as OrPaginationV3 } from './OrPagination-179098fb.js';
62
63
  export { _ as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-4ee24824.js';
63
64
  export { _ as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-c27c8946.js';
64
65
  export { _ as OrRadio } from './OrRadio-e4198532.js';
@@ -67,7 +68,7 @@ export { _ as OrRadioV3 } from './OrRadio-848ce55d.js';
67
68
  export { _ as OrSearchV3 } from './OrSearch-2f260b09.js';
68
69
  export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-e8dce8f9.js';
69
70
  export { _ as OrSelect } from './OrSelect-dae2b069.js';
70
- export { _ as OrSelectV3 } from './OrSelect-f0ff5a85.js';
71
+ export { _ as OrSelectV3 } from './OrSelect-651bb83e.js';
71
72
  export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-7d6125bb.js';
72
73
  export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-fabc7bc9.js';
73
74
  export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-cc94bdc9.js';
@@ -81,7 +81,15 @@ const ButtonRootColors = {
81
81
  'danger-link': [
82
82
  // Theme
83
83
  'theme-preset-4-error', 'dark:theme-preset-4-error-dark'],
84
- 'inherit-link': []
84
+ 'inherit-link': [
85
+ // Typography
86
+ 'typography-caption-regular',
87
+ // Typography (activated)
88
+ 'activated:typography-caption-bold',
89
+ // Theme
90
+ 'theme-foreground-inherit', 'dark:theme-foreground-inherit',
91
+ // Theme (activated)
92
+ 'activated:theme-foreground-default', 'dark:activated:theme-foreground-default-dark']
85
93
  };
86
94
 
87
95
  var script = defineComponent({
@@ -103,6 +111,10 @@ var script = defineComponent({
103
111
  type: String,
104
112
  default: ButtonColor.Primary
105
113
  },
114
+ activated: {
115
+ type: Boolean,
116
+ default: false
117
+ },
106
118
  disabled: {
107
119
  type: Boolean,
108
120
  default: false
@@ -131,7 +143,7 @@ var script = defineComponent({
131
143
  }
132
144
  });
133
145
 
134
- const _hoisted_1 = ["type", "disabled"];
146
+ const _hoisted_1 = ["type", "activated", "disabled"];
135
147
  const _hoisted_2 = {
136
148
  key: 0,
137
149
  class: /*#__PURE__*/normalizeClass(['absolute'])
@@ -143,6 +155,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
143
155
  }, _ctx.$attrs, {
144
156
  class: _ctx.rootStyles,
145
157
  type: _ctx.type,
158
+ activated: _ctx.activated ? '' : null,
146
159
  disabled: _ctx.disabled,
147
160
  onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('click', $event)),
148
161
  onFocus: _cache[1] || (_cache[1] = $event => _ctx.$emit('focus', $event)),
@@ -7,7 +7,7 @@ import './OrPopover-1075dd38.js';
7
7
  import { s as script$5 } from './OrMenuItem-9da279f6.js';
8
8
  import { s as script$6 } from './OrIcon-b195169c.js';
9
9
  import { openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, mergeProps, createTextVNode, toDisplayString, resolveComponent, createElementVNode, createVNode, withCtx, createBlock, createCommentVNode, normalizeProps, guardReactiveProps } from 'vue';
10
- import { s as script$3 } from './OrButton-bb6bf8a9.js';
10
+ import { s as script$3 } from './OrButton-2ca1996a.js';
11
11
  import { s as script$7 } from './OrSearch-e5a2e93e.js';
12
12
  import './OrInputBox-6d1b6059.js';
13
13
 
@@ -1,5 +1,5 @@
1
1
  import { defineComponent, ref, computed, watch } from 'vue-demi';
2
- import { s as script$2, a as ButtonColor } from './OrButton-bb6bf8a9.js';
2
+ import { s as script$2, a as ButtonColor } from './OrButton-2ca1996a.js';
3
3
  import { s as script$1 } from './OrOverlay-738a44d5.js';
4
4
  import { s as script$3 } from './OrInput-41691fb3.js';
5
5
  import { useMagicKeys, whenever } from '@vueuse/core';
@@ -0,0 +1,258 @@
1
+ import { defineComponent, ref, computed } from 'vue-demi';
2
+ import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
3
+ import '@vueuse/core';
4
+ import { s as script$1 } from './OrButton-2ca1996a.js';
5
+ import { s as script$2 } from './OrIcon-b195169c.js';
6
+ import { s as script$4 } from './OrMenuItem-9da279f6.js';
7
+ import { s as script$3 } from './OrMenu-840038cd.js';
8
+ import './OrPopover-1075dd38.js';
9
+ import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createVNode, withModifiers, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from 'vue';
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: script$1,
35
+ OrIcon: script$2,
36
+ OrMenu: script$3,
37
+ OrMenuItem: script$4
38
+ },
39
+ inheritAttrs: false,
40
+ props: {
41
+ modelValue: {
42
+ type: Object,
43
+ default: undefined
44
+ },
45
+ value: {
46
+ type: Object,
47
+ default: undefined
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, _b;
93
+ return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.limit) !== null && _b !== void 0 ? _b : props.pageSizeOptions[0];
94
+ },
95
+ set: value => {
96
+ proxyModelValue.value = {
97
+ limit: value,
98
+ offset: 0
99
+ };
100
+ }
101
+ });
102
+ const currentOffset = computed({
103
+ get: () => {
104
+ var _a, _b;
105
+ return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : 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
+ function render(_ctx, _cache, $props, $setup, $data, $options) {
180
+ const _component_OrIcon = resolveComponent("OrIcon");
181
+ const _component_OrButton = resolveComponent("OrButton");
182
+ const _component_OrMenuItem = resolveComponent("OrMenuItem");
183
+ const _component_OrMenu = resolveComponent("OrMenu");
184
+ return openBlock(), createElementBlock("div", mergeProps({
185
+ ref: "root"
186
+ }, _ctx.$attrs, {
187
+ class: _ctx.rootStyles
188
+ }), [createElementVNode("div", {
189
+ class: normalizeClass(_ctx.offsetControlStyles)
190
+ }, [createVNode(_component_OrButton, {
191
+ variant: 'link',
192
+ color: 'inherit',
193
+ disabled: _ctx.currentPage === _ctx.firstPage,
194
+ onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.toPreviousPage(), ["stop"]))
195
+ }, {
196
+ default: withCtx(() => [createVNode(_component_OrIcon, {
197
+ icon: 'keyboard_arrow_left'
198
+ })]),
199
+ _: 1 /* STABLE */
200
+ }, 8 /* PROPS */, ["disabled"]), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.buttonGroup, (page, index) => {
201
+ return openBlock(), createBlock(_component_OrButton, {
202
+ key: index,
203
+ variant: 'link',
204
+ color: 'inherit',
205
+ activated: _ctx.currentPage === page,
206
+ onClick: withModifiers($event => typeof page === 'number' && _ctx.toPage(page), ["stop"])
207
+ }, {
208
+ default: withCtx(() => [createTextVNode(toDisplayString(page), 1 /* TEXT */)]),
209
+
210
+ _: 2 /* DYNAMIC */
211
+ }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["activated", "onClick"]);
212
+ }), 128 /* KEYED_FRAGMENT */)), createVNode(_component_OrButton, {
213
+ variant: 'link',
214
+ color: 'inherit',
215
+ disabled: _ctx.currentPage === _ctx.lastPage,
216
+ onClick: _cache[1] || (_cache[1] = withModifiers($event => _ctx.toNextPage(), ["stop"]))
217
+ }, {
218
+ default: withCtx(() => [createVNode(_component_OrIcon, {
219
+ icon: 'keyboard_arrow_right'
220
+ })]),
221
+ _: 1 /* STABLE */
222
+ }, 8 /* PROPS */, ["disabled"])], 2 /* CLASS */), createElementVNode("div", {
223
+ class: normalizeClass(_ctx.limitControlStyles)
224
+ }, [createTextVNode(" Per page: "), createVNode(_component_OrButton, {
225
+ ref: "limitButton",
226
+ variant: 'link',
227
+ color: 'inherit',
228
+ activated: true,
229
+ onClick: _cache[2] || (_cache[2] = withModifiers($event => _ctx.limitMenu.open(), ["stop"]))
230
+ }, {
231
+ default: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentLimit) + " ", 1 /* TEXT */), createVNode(_component_OrIcon, {
232
+ icon: 'arrow_drop_down'
233
+ })]),
234
+ _: 1 /* STABLE */
235
+ }, 512 /* NEED_PATCH */), createVNode(_component_OrMenu, {
236
+ ref: "limitMenu",
237
+ trigger: _ctx.limitButtonRoot,
238
+ placement: 'top'
239
+ }, {
240
+ default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.pageSizeOptions, pageSize => {
241
+ return openBlock(), createBlock(_component_OrMenuItem, {
242
+ key: pageSize,
243
+ onClick: withModifiers($event => _ctx.currentLimit = pageSize, ["stop"])
244
+ }, {
245
+ default: withCtx(() => [createTextVNode(toDisplayString(pageSize), 1 /* TEXT */)]),
246
+
247
+ _: 2 /* DYNAMIC */
248
+ }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
249
+ }), 128 /* KEYED_FRAGMENT */))]),
250
+
251
+ _: 1 /* STABLE */
252
+ }, 8 /* PROPS */, ["trigger"])], 2 /* CLASS */)], 16 /* FULL_PROPS */);
253
+ }
254
+
255
+ script.render = render;
256
+ script.__file = "src/components/or-pagination-v3/OrPagination.vue";
257
+
258
+ export { script as s };
@@ -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: {
@@ -335,7 +335,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
335
335
  disabled: _ctx.disabled,
336
336
  onFocus: _cache[0] || (_cache[0] = $event => _ctx.$emit('focus', $event)),
337
337
  onBlur: _cache[1] || (_cache[1] = $event => _ctx.$emit('blur', $event))
338
- }, [_ctx.proxyModelValue && _ctx.proxyModelValue.length > 0 ? (openBlock(), createElementBlock(Fragment, {
338
+ }, [_ctx.proxyModelValue !== undefined ? (openBlock(), createElementBlock(Fragment, {
339
339
  key: 0
340
340
  }, [_ctx.multiple ? renderSlot(_ctx.$slots, "valueTemplate", {
341
341
  key: 0,
@@ -53,6 +53,7 @@ export * from './or-notification-v3';
53
53
  export * from './or-overflow-menu';
54
54
  export * from './or-overlay';
55
55
  export * from './or-overlay-v3';
56
+ export * from './or-pagination-v3';
56
57
  export * from './or-popover-v3';
57
58
  export * from './or-progress';
58
59
  export * from './or-progress-v3';
@@ -3,10 +3,10 @@ export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from '../OrAvatar-
3
3
  export { s as OrBottomSheetV3 } from '../OrBottomSheet-62817aec.js';
4
4
  export { s as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from '../OrButton-fca9019a.js';
5
5
  export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE, s as OrButtonV2, a as OrIconButton } from '../OrIconButton-8be9c89f.js';
6
- export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../OrButton-bb6bf8a9.js';
6
+ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../OrButton-2ca1996a.js';
7
7
  export { s as OrCard } from '../OrCard-e3a5aea4.js';
8
8
  export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from '../OrCardCollection-a5e326ef.js';
9
- export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-2a6514f3.js';
9
+ export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-167ed657.js';
10
10
  export { s as OrCardV3 } from '../OrCard-fd92f7c8.js';
11
11
  export { a as OrCarousel, s as OrCarouselItem } from '../OrCarouselItem-636d99a1.js';
12
12
  export { s as OrCheckbox } from '../OrCheckbox-ed4a19cf.js';
@@ -16,7 +16,7 @@ export { s as OrCode, O as OrCodeLanguages } from '../OrCode-5ed69c23.js';
16
16
  export { s as OrCollapse } from '../OrCollapse-445141ab.js';
17
17
  export { s 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-189cb097.js';
18
18
  export { s as OrConfirm } from '../OrConfirm-f39bd784.js';
19
- export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-5d56cbd3.js';
19
+ export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-492012c6.js';
20
20
  export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-f2e08564.js';
21
21
  export { s as OrError } from '../OrError-f90296db.js';
22
22
  export { s as OrErrorTagV3 } from '../OrErrorTag-98252eef.js';
@@ -54,6 +54,7 @@ export { N as NotificationVariant, s as OrNotificationV3 } from '../OrNotificati
54
54
  export { s as OrOverflowMenu } from '../OrOverflowMenu-e82cbcbe.js';
55
55
  export { s as OrOverlay } from '../OrOverlay-451dce49.js';
56
56
  export { s as OrOverlayV3 } from '../OrOverlay-738a44d5.js';
57
+ export { s as OrPaginationV3 } from '../OrPagination-a84ad212.js';
57
58
  export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from '../OrProgress-d0d52c86.js';
58
59
  export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from '../OrProgress-407002e0.js';
59
60
  export { s as OrRadio } from '../OrRadio-c3ab11f2.js';
@@ -62,7 +63,7 @@ export { s as OrRadioV3 } from '../OrRadio-54b6d0de.js';
62
63
  export { s as OrSearchV3 } from '../OrSearch-e5a2e93e.js';
63
64
  export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-171cad78.js';
64
65
  export { s as OrSelect } from '../OrSelect-0821b907.js';
65
- export { s as OrSelectV3 } from '../OrSelect-7e813982.js';
66
+ export { s as OrSelectV3 } from '../OrSelect-28a175dc.js';
66
67
  export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-375c85a3.js';
67
68
  export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar-a62972f5.js';
68
69
  export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-2b1610ce.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, s as OrButtonV3 } from '../../OrButton-bb6bf8a9.js';
1
+ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../../OrButton-2ca1996a.js';
2
2
  import 'vue-demi';
3
3
  import '../../useClassAttribute-47fdb016.js';
4
4
  import '@vueuse/core';
@@ -1,4 +1,4 @@
1
- export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-2a6514f3.js';
1
+ export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-167ed657.js';
2
2
  import 'vue-demi';
3
3
  import '../../useClassAttribute-47fdb016.js';
4
4
  import '@vueuse/core';
@@ -15,7 +15,7 @@ import '../../OrOverlay-738a44d5.js';
15
15
  import '../../OrTeleport.vue3-8099178c.js';
16
16
  import '../../OrMenu-840038cd.js';
17
17
  import '../../OrMenuItem-9da279f6.js';
18
- import '../../OrButton-bb6bf8a9.js';
18
+ import '../../OrButton-2ca1996a.js';
19
19
  import '../../OrLoader-b3cf4231.js';
20
20
  import '../../OrSearch-e5a2e93e.js';
21
21
  import '../../OrInput-41691fb3.js';
@@ -1,6 +1,6 @@
1
- export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-5d56cbd3.js';
1
+ export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-492012c6.js';
2
2
  import 'vue-demi';
3
- import '../../OrButton-bb6bf8a9.js';
3
+ import '../../OrButton-2ca1996a.js';
4
4
  import '../../useClassAttribute-47fdb016.js';
5
5
  import '@vueuse/core';
6
6
  import '../../OrLoader-b3cf4231.js';
@@ -0,0 +1,12 @@
1
+ import { Meta, StoryFn } from '@storybook/vue3';
2
+ declare const _default: Meta<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
3
+ [x: string]: ((...args: any[]) => any) | null;
4
+ } | string[], {} & {}, {
5
+ [x: number]: string;
6
+ } | {}, true>)>;
7
+ export default _default;
8
+ export declare const Default: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
9
+ [x: string]: ((...args: any[]) => any) | null;
10
+ } | string[], {} & {}, {
11
+ [x: number]: string;
12
+ } | {}, true>)>;