@onereach/ui-components 2.69.2-beta.2133.0 → 2.69.2-beta.2142.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 (147) hide show
  1. package/dist/bundled/v2/{OrAvatar-ae61bfb9.js → OrAvatar-2fa559e1.js} +15 -41
  2. package/dist/bundled/v2/{OrButton-0e91a808.js → OrButton-66d37aff.js} +14 -1
  3. package/dist/bundled/v2/{OrConfirm-18c534df.js → OrConfirm-e1ca1422.js} +1 -1
  4. package/dist/bundled/v2/OrPagination-734cb415.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-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  9. package/dist/bundled/v2/components/or-avatar-v3/OrAvatar.vue.d.ts +0 -11
  10. package/dist/bundled/v2/components/or-avatar-v3/index.js +1 -2
  11. package/dist/bundled/v2/components/or-avatar-v3/props.d.ts +1 -2
  12. package/dist/bundled/v2/components/or-avatar-v3/styles.d.ts +0 -2
  13. package/dist/bundled/v2/components/or-button-v3/OrButton.vue.d.ts +11 -0
  14. package/dist/bundled/v2/components/or-button-v3/index.js +1 -1
  15. package/dist/bundled/v2/components/or-confirm-v3/index.js +2 -2
  16. package/dist/bundled/v2/components/or-pagination-v3/OrPagination.stories3.d.ts +12 -0
  17. package/dist/bundled/v2/components/or-pagination-v3/OrPagination.vue.d.ts +110 -0
  18. package/dist/bundled/v2/components/or-pagination-v3/index.d.ts +2 -0
  19. package/dist/bundled/v2/components/or-pagination-v3/index.js +20 -0
  20. package/dist/bundled/v2/components/or-pagination-v3/styles.d.ts +3 -0
  21. package/dist/bundled/v2/components/or-pagination-v3/types.d.ts +4 -0
  22. package/dist/bundled/v2/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  23. package/dist/bundled/v2/components/or-select-v3/index.d.ts +1 -0
  24. package/dist/bundled/v2/components/or-select-v3/index.js +1 -1
  25. package/dist/bundled/v2/components/or-select-v3/types.d.ts +1 -1
  26. package/dist/bundled/v2/index.js +6 -5
  27. package/dist/bundled/v3/{OrAvatar.vue_vue_type_script_lang-0426862b.js → OrAvatar.vue_vue_type_script_lang-22e46ce1.js} +13 -35
  28. package/dist/bundled/v3/OrButton-9640286b.js +34 -0
  29. package/dist/bundled/v3/{OrButton.vue_vue_type_script_lang-3718b300.js → OrButton.vue_vue_type_script_lang-06d8ead1.js} +13 -1
  30. package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-861158b5.js → OrCardCollection.vue_vue_type_script_lang-3993a015.js} +2 -2
  31. package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-289b5600.js → OrConfirm.vue_vue_type_script_lang-f1b81f00.js} +6 -36
  32. package/dist/bundled/v3/{OrIconButton-1581013c.js → OrIconButton-4bd33e3c.js} +1 -1
  33. package/dist/bundled/v3/{OrIconButton.vue_vue_type_script_lang-f6f801ff.js → OrIconButton.vue_vue_type_script_lang-641f6e06.js} +1 -1
  34. package/dist/bundled/v3/{OrInlineInput.vue_vue_type_script_lang-f29483f4.js → OrInlineInput.vue_vue_type_script_lang-3a8189f4.js} +2 -2
  35. package/dist/bundled/v3/{OrInlineTextarea.vue_vue_type_script_lang-cc40af48.js → OrInlineTextarea.vue_vue_type_script_lang-890b97ab.js} +2 -2
  36. package/dist/bundled/v3/OrInput.vue_vue_type_script_lang-f6d793d3.js +2 -2
  37. package/dist/bundled/v3/OrMenu-f26e8e55.js +29 -0
  38. package/dist/bundled/v3/{OrModal.vue_vue_type_script_lang-80a7b906.js → OrModal.vue_vue_type_script_lang-00a477f0.js} +2 -2
  39. package/dist/bundled/v3/OrNotification.vue_vue_type_script_lang-fbb35355.js +2 -2
  40. package/dist/bundled/v3/OrPagination.vue_vue_type_script_lang-d852d8af.js +180 -0
  41. package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-15285ce4.js → OrSelect.vue_vue_type_script_lang-05b03858.js} +3 -3
  42. package/dist/bundled/v3/{OrTabs.vue_vue_type_script_lang-919b2021.js → OrTabs.vue_vue_type_script_lang-61b79a5a.js} +10 -36
  43. package/dist/bundled/v3/{OrTag.vue_vue_type_script_lang-dc6a4011.js → OrTag.vue_vue_type_script_lang-92d9fb12.js} +2 -2
  44. package/dist/bundled/v3/{OrToastContainer-7c3c0b12.js → OrToastContainer-afb51e5d.js} +1 -1
  45. package/dist/bundled/v3/components/index.d.ts +1 -0
  46. package/dist/bundled/v3/components/index.js +17 -14
  47. package/dist/bundled/v3/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  48. package/dist/bundled/v3/components/or-avatar-v3/OrAvatar.vue.d.ts +0 -11
  49. package/dist/bundled/v3/components/or-avatar-v3/index.js +1 -3
  50. package/dist/bundled/v3/components/or-avatar-v3/props.d.ts +1 -2
  51. package/dist/bundled/v3/components/or-avatar-v3/styles.d.ts +0 -2
  52. package/dist/bundled/v3/components/or-button-v3/OrButton.vue.d.ts +11 -0
  53. package/dist/bundled/v3/components/or-button-v3/index.js +1 -1
  54. package/dist/bundled/v3/components/or-card-collection-v3/index.js +3 -3
  55. package/dist/bundled/v3/components/or-confirm-v3/index.js +5 -4
  56. package/dist/bundled/v3/components/or-icon-button-v3/index.js +1 -1
  57. package/dist/bundled/v3/components/or-inline-input-v3/index.js +3 -3
  58. package/dist/bundled/v3/components/or-inline-textarea-v3/index.js +3 -3
  59. package/dist/bundled/v3/components/or-input-v3/index.js +2 -2
  60. package/dist/bundled/v3/components/or-modal-v3/index.js +3 -3
  61. package/dist/bundled/v3/components/or-notification-v3/index.js +2 -2
  62. package/dist/bundled/v3/components/or-pagination-v3/OrPagination.stories3.d.ts +12 -0
  63. package/dist/bundled/v3/components/or-pagination-v3/OrPagination.vue.d.ts +110 -0
  64. package/dist/bundled/v3/components/or-pagination-v3/index.d.ts +2 -0
  65. package/dist/bundled/v3/components/or-pagination-v3/index.js +22 -0
  66. package/dist/bundled/v3/components/or-pagination-v3/styles.d.ts +3 -0
  67. package/dist/bundled/v3/components/or-pagination-v3/types.d.ts +4 -0
  68. package/dist/bundled/v3/components/or-search-v3/index.js +2 -2
  69. package/dist/bundled/v3/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  70. package/dist/bundled/v3/components/or-select-v3/index.d.ts +1 -0
  71. package/dist/bundled/v3/components/or-select-v3/index.js +4 -4
  72. package/dist/bundled/v3/components/or-select-v3/types.d.ts +1 -1
  73. package/dist/bundled/v3/components/or-tabs-v3/index.js +2 -1
  74. package/dist/bundled/v3/components/or-tag-v3/index.js +3 -3
  75. package/dist/bundled/v3/components/or-toast-v3/index.js +4 -4
  76. package/dist/bundled/v3/index.js +254 -177
  77. package/dist/bundled/v3/{types-dcc78caa.js → types-6c5eee23.js} +2 -2
  78. package/dist/esm/v2/{OrAvatar-3d155af3.js → OrAvatar-0afdef36.js} +15 -41
  79. package/dist/esm/v2/{OrButton-357a5756.js → OrButton-3d4fc9da.js} +14 -1
  80. package/dist/esm/v2/{OrConfirm-b0b2e43c.js → OrConfirm-ba3f8c45.js} +1 -1
  81. package/dist/esm/v2/OrPagination-07246e59.js +297 -0
  82. package/dist/esm/v2/{OrSelect-f0ff5a85.js → OrSelect-651bb83e.js} +3 -3
  83. package/dist/esm/v2/components/index.d.ts +1 -0
  84. package/dist/esm/v2/components/index.js +5 -4
  85. package/dist/esm/v2/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  86. package/dist/esm/v2/components/or-avatar-v3/OrAvatar.vue.d.ts +0 -11
  87. package/dist/esm/v2/components/or-avatar-v3/index.js +1 -2
  88. package/dist/esm/v2/components/or-avatar-v3/props.d.ts +1 -2
  89. package/dist/esm/v2/components/or-avatar-v3/styles.d.ts +0 -2
  90. package/dist/esm/v2/components/or-button-v3/OrButton.vue.d.ts +11 -0
  91. package/dist/esm/v2/components/or-button-v3/index.js +1 -1
  92. package/dist/esm/v2/components/or-confirm-v3/index.js +2 -2
  93. package/dist/esm/v2/components/or-pagination-v3/OrPagination.stories3.d.ts +12 -0
  94. package/dist/esm/v2/components/or-pagination-v3/OrPagination.vue.d.ts +110 -0
  95. package/dist/esm/v2/components/or-pagination-v3/index.d.ts +2 -0
  96. package/dist/esm/v2/components/or-pagination-v3/index.js +18 -0
  97. package/dist/esm/v2/components/or-pagination-v3/styles.d.ts +3 -0
  98. package/dist/esm/v2/components/or-pagination-v3/types.d.ts +4 -0
  99. package/dist/esm/v2/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  100. package/dist/esm/v2/components/or-select-v3/index.d.ts +1 -0
  101. package/dist/esm/v2/components/or-select-v3/index.js +1 -1
  102. package/dist/esm/v2/components/or-select-v3/types.d.ts +1 -1
  103. package/dist/esm/v2/index.js +5 -4
  104. package/dist/esm/v3/{OrAvatar-53a4429d.js → OrAvatar-ef88d31c.js} +16 -43
  105. package/dist/esm/v3/{OrButton-f4b9ee51.js → OrButton-970ae320.js} +15 -2
  106. package/dist/esm/v3/{OrConfirm-906427ef.js → OrConfirm-7cb2f36b.js} +1 -1
  107. package/dist/esm/v3/OrPagination-e1122a8e.js +258 -0
  108. package/dist/esm/v3/{OrSelect-7e813982.js → OrSelect-28a175dc.js} +3 -3
  109. package/dist/esm/v3/components/index.d.ts +1 -0
  110. package/dist/esm/v3/components/index.js +5 -4
  111. package/dist/esm/v3/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  112. package/dist/esm/v3/components/or-avatar-v3/OrAvatar.vue.d.ts +0 -11
  113. package/dist/esm/v3/components/or-avatar-v3/index.js +1 -2
  114. package/dist/esm/v3/components/or-avatar-v3/props.d.ts +1 -2
  115. package/dist/esm/v3/components/or-avatar-v3/styles.d.ts +0 -2
  116. package/dist/esm/v3/components/or-button-v3/OrButton.vue.d.ts +11 -0
  117. package/dist/esm/v3/components/or-button-v3/index.js +1 -1
  118. package/dist/esm/v3/components/or-confirm-v3/index.js +2 -2
  119. package/dist/esm/v3/components/or-pagination-v3/OrPagination.stories3.d.ts +12 -0
  120. package/dist/esm/v3/components/or-pagination-v3/OrPagination.vue.d.ts +110 -0
  121. package/dist/esm/v3/components/or-pagination-v3/index.d.ts +2 -0
  122. package/dist/esm/v3/components/or-pagination-v3/index.js +17 -0
  123. package/dist/esm/v3/components/or-pagination-v3/styles.d.ts +3 -0
  124. package/dist/esm/v3/components/or-pagination-v3/types.d.ts +4 -0
  125. package/dist/esm/v3/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  126. package/dist/esm/v3/components/or-select-v3/index.d.ts +1 -0
  127. package/dist/esm/v3/components/or-select-v3/index.js +1 -1
  128. package/dist/esm/v3/components/or-select-v3/types.d.ts +1 -1
  129. package/dist/esm/v3/index.js +5 -4
  130. package/package.json +1 -1
  131. package/src/components/index.ts +1 -0
  132. package/src/components/or-avatar-v3/OrAvatar.stories3.ts +7 -9
  133. package/src/components/or-avatar-v3/OrAvatar.vue +2 -22
  134. package/src/components/or-avatar-v3/props.ts +0 -1
  135. package/src/components/or-avatar-v3/styles.ts +11 -49
  136. package/src/components/or-button-v3/OrButton.stories3.ts +4 -0
  137. package/src/components/or-button-v3/OrButton.vue +6 -0
  138. package/src/components/or-button-v3/styles.ts +15 -1
  139. package/src/components/or-pagination-v3/OrPagination.docs.mdx +7 -0
  140. package/src/components/or-pagination-v3/OrPagination.stories3.ts +87 -0
  141. package/src/components/or-pagination-v3/OrPagination.vue +261 -0
  142. package/src/components/or-pagination-v3/index.ts +2 -0
  143. package/src/components/or-pagination-v3/styles.ts +30 -0
  144. package/src/components/or-pagination-v3/types.ts +4 -0
  145. package/src/components/or-select-v3/OrSelect.vue +3 -3
  146. package/src/components/or-select-v3/index.ts +1 -0
  147. package/src/components/or-select-v3/types.ts +1 -1
@@ -1,9 +1,9 @@
1
1
  import { useToggle } from '@vueuse/core';
2
2
  import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, createElementVNode, toDisplayString, withModifiers, onBeforeMount, onBeforeUnmount, nextTick } from 'vue';
3
3
  import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-4d4329cd.js';
4
- import './OrIconButton-1581013c.js';
4
+ import './OrIconButton-4bd33e3c.js';
5
5
  import './OrLoader-c4bbef2f.js';
6
- import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-f6f801ff.js';
6
+ import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-641f6e06.js';
7
7
  import { s as script$3 } from './OrLoader.vue_vue_type_script_lang-5405040c.js';
8
8
  import { s as styleInject } from './style-inject.es-4c6f2515.js';
9
9
  import './OrOverlay.vue_vue_type_script_lang-cb3aad0c.js';
@@ -2,7 +2,6 @@ import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
2
2
  import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
3
3
  import '@vueuse/core';
4
4
  import { h as hslToColorString, g as generateHslFromString } from './color-1f348774.js';
5
- import { _ as __vue_component__$1 } from './OrIcon-5e394c62.js';
6
5
  import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
7
6
 
8
7
  var AvatarSize;
@@ -11,7 +10,6 @@ var AvatarSize;
11
10
  AvatarSize["L"] = "l";
12
11
  AvatarSize["M"] = "m";
13
12
  AvatarSize["S"] = "s";
14
- AvatarSize["XS"] = "xs";
15
13
  })(AvatarSize || (AvatarSize = {}));
16
14
  var AvatarColor;
17
15
  (function (AvatarColor) {
@@ -36,19 +34,24 @@ const AvatarImage = [
36
34
  const AvatarRootSizes = {
37
35
  'xl': [
38
36
  // Box
39
- 'w-[80px]', 'h-[80px]'],
37
+ 'w-[80px]', 'h-[80px]',
38
+ // Typography
39
+ 'text-[32px]'],
40
40
  'l': [
41
41
  // Box
42
- 'w-[64px]', 'h-[64px]'],
42
+ 'w-[64px]', 'h-[64px]',
43
+ // Typography
44
+ 'text-[24px]'],
43
45
  'm': [
44
46
  // Box
45
- 'w-[40px]', 'h-[40px]'],
47
+ 'w-[40px]', 'h-[40px]',
48
+ // Typography
49
+ 'text-[16px]'],
46
50
  's': [
47
51
  // Box
48
- 'w-[32px]', 'h-[32px]'],
49
- 'xs': [
50
- // Box
51
- 'w-[24px]', 'h-[24px]']
52
+ 'w-[32px]', 'h-[32px]',
53
+ // Typography
54
+ 'text-[16px]']
52
55
  };
53
56
  const AvatarRootColors = {
54
57
  [AvatarColor.blue]: [
@@ -70,26 +73,9 @@ const AvatarRootColors = {
70
73
  // Theme
71
74
  'text-white', 'dark:text-overlay-dark']
72
75
  };
73
- const AvatarRootAbbreviationSizes = {
74
- 'xl': ['typography-headline-1'],
75
- 'l': ['typography-headline-1'],
76
- 'm': ['typography-body-1-bold'],
77
- 's': ['typography-body-1-bold'],
78
- 'xs': ['typography-caption-semibold']
79
- };
80
- const AvatarRootIconSizes = {
81
- 'xl': ['text-[40px]'],
82
- 'l': ['text-[32px]'],
83
- 'm': ['text-[20px]'],
84
- 's': ['text-[16px]'],
85
- 'xs': ['text-[16px]']
86
- };
87
76
 
88
77
  var script = defineComponent({
89
78
  name: 'OrAvatar',
90
- components: {
91
- OrIcon: __vue_component__$1
92
- },
93
79
  inheritAttrs: false,
94
80
  props: {
95
81
  src: {
@@ -100,10 +86,6 @@ var script = defineComponent({
100
86
  type: String,
101
87
  default: AvatarSize.M
102
88
  },
103
- icon: {
104
- type: String,
105
- default: undefined
106
- },
107
89
  color: {
108
90
  type: String,
109
91
  default: AvatarColor.auto,
@@ -119,12 +101,9 @@ var script = defineComponent({
119
101
  setup(props) {
120
102
  // Refs
121
103
  const root = ref();
122
- const isIcon = computed(() => {
123
- return !props.icon;
124
- });
125
104
  // Styles
126
105
  const classAttribute = useClassAttribute();
127
- const rootStyles = computed(() => ['or-avatar', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], ...(isIcon.value ? AvatarRootAbbreviationSizes[props.size] : AvatarRootIconSizes[props.size]), classAttribute.value]);
106
+ const rootStyles = computed(() => ['or-avatar', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], classAttribute.value]);
128
107
  const imageStyles = computed(() => [...AvatarImage]);
129
108
  // Effects
130
109
  watchPostEffect(() => {
@@ -157,18 +136,13 @@ var __vue_render__ = function () {
157
136
  ref: "root",
158
137
  class: _vm.rootStyles
159
138
  }, 'div', _vm.$attrs, false), [_vm._t("default", function () {
160
- return [_vm.src ? _c('img', {
139
+ return [_c('img', {
161
140
  class: _vm.imageStyles,
162
141
  attrs: {
163
142
  "src": _vm.src,
164
143
  "alt": ''
165
144
  }
166
- }) : _vm.icon ? _c('or-icon', {
167
- attrs: {
168
- "icon": _vm.icon,
169
- "size": "inherit"
170
- }
171
- }) : _vm._e()];
145
+ })];
172
146
  })], 2);
173
147
  };
174
148
  var __vue_staticRenderFns__ = [];
@@ -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: {
@@ -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,297 @@
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: 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
+ /* 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
+ "placement": 'top'
263
+ }
264
+ }, _vm._l(_vm.pageSizeOptions, function (pageSize) {
265
+ return _c('OrMenuItem', {
266
+ key: pageSize,
267
+ on: {
268
+ "click": function ($event) {
269
+ $event.stopPropagation();
270
+ _vm.currentLimit = pageSize;
271
+ }
272
+ }
273
+ }, [_vm._v("\n " + _vm._s(pageSize) + "\n ")]);
274
+ }), 1)], 1)]);
275
+ };
276
+ var __vue_staticRenderFns__ = [];
277
+
278
+ /* style */
279
+ const __vue_inject_styles__ = undefined;
280
+ /* scoped */
281
+ const __vue_scope_id__ = undefined;
282
+ /* module identifier */
283
+ const __vue_module_identifier__ = undefined;
284
+ /* functional template */
285
+ const __vue_is_functional_template__ = false;
286
+ /* style inject */
287
+
288
+ /* style inject SSR */
289
+
290
+ /* style inject shadow dom */
291
+
292
+ const __vue_component__ = /*#__PURE__*/normalizeComponent({
293
+ render: __vue_render__,
294
+ staticRenderFns: __vue_staticRenderFns__
295
+ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
296
+
297
+ 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';
@@ -1,11 +1,11 @@
1
1
  export { O as OR_AVATAR_SIZE, _ as OrAvatar } from '../OrAvatar-4824c57f.js';
2
- export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../OrAvatar-3d155af3.js';
2
+ export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../OrAvatar-0afdef36.js';
3
3
  export { _ as OrBottomSheetV3 } from '../OrBottomSheet-16c2e610.js';
4
4
  export { _ as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from '../OrButton-2ca1c3d6.js';
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
11
  export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-4f001551.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-07246e59.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-f0ff5a85.js';
70
+ export { _ as OrSelectV3 } from '../OrSelect-651bb83e.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';
@@ -20,7 +20,7 @@ export declare const WithTextInSlot: StoryFn<import("vue").ComponentOptions<impo
20
20
  } | string[], {} & {}, {
21
21
  [x: number]: string;
22
22
  } | {}, true>)>;
23
- export declare const WithIcon: 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, {
23
+ export declare const WithIconInSlot: 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, {
24
24
  [x: string]: ((...args: any[]) => any) | null;
25
25
  } | string[], {} & {}, {
26
26
  [x: number]: string;
@@ -13,10 +13,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
13
13
  type: PropType<AvatarSize>;
14
14
  default: AvatarSize;
15
15
  };
16
- icon: {
17
- type: StringConstructor;
18
- default: undefined;
19
- };
20
16
  color: {
21
17
  type: PropType<AvatarColor>;
22
18
  default: AvatarColor;
@@ -36,10 +32,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
36
32
  type: PropType<AvatarSize>;
37
33
  default: AvatarSize;
38
34
  };
39
- icon: {
40
- type: StringConstructor;
41
- default: undefined;
42
- };
43
35
  color: {
44
36
  type: PropType<AvatarColor>;
45
37
  default: AvatarColor;
@@ -53,7 +45,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
53
45
  }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
54
46
  src: string;
55
47
  size: AvatarSize;
56
- icon: string;
57
48
  color: AvatarColor;
58
49
  colorSalt: string;
59
50
  } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -63,13 +54,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
63
54
  }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
64
55
  src: string;
65
56
  size: AvatarSize;
66
- icon: string;
67
57
  color: AvatarColor;
68
58
  colorSalt: string;
69
59
  } & {}, {
70
60
  src: string;
71
61
  size: AvatarSize;
72
- icon: string;
73
62
  color: AvatarColor;
74
63
  colorSalt: string;
75
64
  }, true>);
@@ -1,7 +1,6 @@
1
- export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../../OrAvatar-3d155af3.js';
1
+ export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../../OrAvatar-0afdef36.js';
2
2
  import 'vue-demi';
3
3
  import '../../useClassAttribute-47fdb016.js';
4
4
  import '@vueuse/core';
5
5
  import '../../color-1f348774.js';
6
- import '../../OrIcon-5e394c62.js';
7
6
  import '../../normalize-component-6e8e3d80.js';
@@ -2,8 +2,7 @@ export declare enum AvatarSize {
2
2
  XL = "xl",
3
3
  L = "l",
4
4
  M = "m",
5
- S = "s",
6
- XS = "xs"
5
+ S = "s"
7
6
  }
8
7
  export declare enum AvatarColor {
9
8
  blue = "blue",
@@ -3,5 +3,3 @@ export declare const AvatarRoot: string[];
3
3
  export declare const AvatarImage: string[];
4
4
  export declare const AvatarRootSizes: Record<AvatarSize, string[]>;
5
5
  export declare const AvatarRootColors: Record<AvatarColor, string[]>;
6
- export declare const AvatarRootAbbreviationSizes: Record<AvatarSize, string[]>;
7
- export declare const AvatarRootIconSizes: Record<AvatarSize, string[]>;
@@ -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;