@onereach/ui-components 2.69.1-beta.2095.0 → 2.69.1-beta.2099.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 (151) hide show
  1. package/dist/bundled/v2/{OrButton-66d37aff.js → OrButton-0e91a808.js} +1 -14
  2. package/dist/bundled/v2/{OrCard-58a1ba3e.js → OrCard-29116e1f.js} +2 -2
  3. package/dist/bundled/v2/OrCardCollection-953657a7.js +347 -0
  4. package/dist/bundled/v2/{OrConfirm-e1ca1422.js → OrConfirm-18c534df.js} +1 -1
  5. package/dist/bundled/v2/{OrSearch-9d402f56.js → OrSearch-a11b3621.js} +9 -3
  6. package/dist/bundled/v2/{OrSelect-1c9421ad.js → OrSelect-759b4410.js} +3 -3
  7. package/dist/bundled/v2/{OrSortHeader-396e6a7c.js → OrSortHeader-9932d28f.js} +2 -2
  8. package/dist/bundled/v2/components/index.d.ts +0 -1
  9. package/dist/bundled/v2/components/index.js +7 -8
  10. package/dist/bundled/v2/components/or-button-v3/OrButton.vue.d.ts +0 -11
  11. package/dist/bundled/v2/components/or-button-v3/index.js +1 -1
  12. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +5 -0
  13. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +65 -39
  14. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollectionView.vue2.vue.d.ts +35 -0
  15. package/dist/bundled/v2/components/or-card-collection-v3/constatnts.d.ts +4 -0
  16. package/dist/bundled/v2/components/or-card-collection-v3/index.js +7 -4
  17. package/dist/bundled/v2/components/or-card-collection-v3/types.d.ts +8 -3
  18. package/dist/bundled/v2/components/or-card-v3/index.js +1 -1
  19. package/dist/bundled/v2/components/or-confirm-v3/index.js +2 -2
  20. package/dist/bundled/v2/components/or-search-v3/OrSearch.vue.d.ts +13 -0
  21. package/dist/bundled/v2/components/or-search-v3/index.js +1 -1
  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 +0 -1
  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/components/or-sort-header-v3/index.js +1 -1
  27. package/dist/bundled/v2/index.js +8 -9
  28. package/dist/bundled/v3/{OrButton-9640286b.js → OrButton-8ab33d9d.js} +2 -3
  29. package/dist/bundled/v3/{OrButton.vue_vue_type_script_lang-06d8ead1.js → OrButton.vue_vue_type_script_lang-3718b300.js} +1 -13
  30. package/dist/bundled/v3/OrCardCollection.vue_vue_type_script_lang-4debae8a.js +229 -0
  31. package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-f1b81f00.js → OrConfirm.vue_vue_type_script_lang-85472b12.js} +2 -2
  32. package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-ed78b21f.js → OrSearch.vue_vue_type_script_lang-0ae8a6dd.js} +8 -2
  33. package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-d0626539.js → OrSelect.vue_vue_type_script_lang-dfadd12f.js} +2 -2
  34. package/dist/bundled/v3/components/index.d.ts +0 -1
  35. package/dist/bundled/v3/components/index.js +10 -11
  36. package/dist/bundled/v3/components/or-button-v3/OrButton.vue.d.ts +0 -11
  37. package/dist/bundled/v3/components/or-button-v3/index.js +1 -1
  38. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +5 -0
  39. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +65 -39
  40. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts +35 -0
  41. package/dist/bundled/v3/components/or-card-collection-v3/constatnts.d.ts +4 -0
  42. package/dist/bundled/v3/components/or-card-collection-v3/index.js +11 -4
  43. package/dist/bundled/v3/components/or-card-collection-v3/types.d.ts +8 -3
  44. package/dist/bundled/v3/components/or-confirm-v3/index.js +3 -3
  45. package/dist/bundled/v3/components/or-search-v3/OrSearch.vue.d.ts +13 -0
  46. package/dist/bundled/v3/components/or-search-v3/index.js +1 -1
  47. package/dist/bundled/v3/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  48. package/dist/bundled/v3/components/or-select-v3/index.d.ts +0 -1
  49. package/dist/bundled/v3/components/or-select-v3/index.js +1 -1
  50. package/dist/bundled/v3/components/or-select-v3/types.d.ts +1 -1
  51. package/dist/bundled/v3/index.js +300 -351
  52. package/dist/esm/v2/{OrButton-3d4fc9da.js → OrButton-357a5756.js} +1 -14
  53. package/dist/esm/v2/OrCardCollection-55e282a7.js +347 -0
  54. package/dist/esm/v2/{OrConfirm-ba3f8c45.js → OrConfirm-b0b2e43c.js} +1 -1
  55. package/dist/esm/v2/{OrSearch-ddb7c1fe.js → OrSearch-62d91301.js} +7 -1
  56. package/dist/esm/v2/{OrSelect-ca2510cd.js → OrSelect-ac382aa6.js} +3 -3
  57. package/dist/esm/v2/components/index.d.ts +0 -1
  58. package/dist/esm/v2/components/index.js +5 -6
  59. package/dist/esm/v2/components/or-button-v3/OrButton.vue.d.ts +0 -11
  60. package/dist/esm/v2/components/or-button-v3/index.js +1 -1
  61. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +5 -0
  62. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +65 -39
  63. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollectionView.vue2.vue.d.ts +35 -0
  64. package/dist/esm/v2/components/or-card-collection-v3/constatnts.d.ts +4 -0
  65. package/dist/esm/v2/components/or-card-collection-v3/index.js +7 -4
  66. package/dist/esm/v2/components/or-card-collection-v3/types.d.ts +8 -3
  67. package/dist/esm/v2/components/or-confirm-v3/index.js +2 -2
  68. package/dist/esm/v2/components/or-search-v3/OrSearch.vue.d.ts +13 -0
  69. package/dist/esm/v2/components/or-search-v3/index.js +1 -1
  70. package/dist/esm/v2/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  71. package/dist/esm/v2/components/or-select-v3/index.d.ts +0 -1
  72. package/dist/esm/v2/components/or-select-v3/index.js +1 -1
  73. package/dist/esm/v2/components/or-select-v3/types.d.ts +1 -1
  74. package/dist/esm/v2/index.js +5 -6
  75. package/dist/esm/v3/{OrButton-970ae320.js → OrButton-f4b9ee51.js} +2 -15
  76. package/dist/esm/v3/OrCardCollection-0c6da4b8.js +290 -0
  77. package/dist/esm/v3/{OrConfirm-7cb2f36b.js → OrConfirm-906427ef.js} +1 -1
  78. package/dist/esm/v3/{OrSearch-cdde55ce.js → OrSearch-aafb93b4.js} +7 -1
  79. package/dist/esm/v3/{OrSelect-bff22c7f.js → OrSelect-fee9c099.js} +3 -3
  80. package/dist/esm/v3/components/index.d.ts +0 -1
  81. package/dist/esm/v3/components/index.js +5 -6
  82. package/dist/esm/v3/components/or-button-v3/OrButton.vue.d.ts +0 -11
  83. package/dist/esm/v3/components/or-button-v3/index.js +1 -1
  84. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +5 -0
  85. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +65 -39
  86. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts +35 -0
  87. package/dist/esm/v3/components/or-card-collection-v3/constatnts.d.ts +4 -0
  88. package/dist/esm/v3/components/or-card-collection-v3/index.js +7 -4
  89. package/dist/esm/v3/components/or-card-collection-v3/types.d.ts +8 -3
  90. package/dist/esm/v3/components/or-confirm-v3/index.js +2 -2
  91. package/dist/esm/v3/components/or-search-v3/OrSearch.vue.d.ts +13 -0
  92. package/dist/esm/v3/components/or-search-v3/index.js +1 -1
  93. package/dist/esm/v3/components/or-select-v3/OrSelect.vue.d.ts +14 -14
  94. package/dist/esm/v3/components/or-select-v3/index.d.ts +0 -1
  95. package/dist/esm/v3/components/or-select-v3/index.js +1 -1
  96. package/dist/esm/v3/components/or-select-v3/types.d.ts +1 -1
  97. package/dist/esm/v3/index.js +5 -6
  98. package/package.json +1 -1
  99. package/src/components/index.ts +0 -1
  100. package/src/components/or-button-v3/OrButton.stories3.ts +0 -4
  101. package/src/components/or-button-v3/OrButton.vue +0 -6
  102. package/src/components/or-button-v3/styles.ts +1 -15
  103. package/src/components/or-card-collection-v3/OrCardCollection.stories3.ts +229 -28
  104. package/src/components/or-card-collection-v3/OrCardCollection.vue +119 -76
  105. package/src/components/or-card-collection-v3/OrCardCollectionView.vue2.vue +41 -0
  106. package/src/components/or-card-collection-v3/OrCardCollectionView.vue3.vue +42 -0
  107. package/src/components/or-card-collection-v3/constatnts.ts +12 -0
  108. package/src/components/or-card-collection-v3/styles.ts +1 -1
  109. package/src/components/or-card-collection-v3/types.ts +9 -3
  110. package/src/components/or-search-v3/OrSearch.vue +7 -1
  111. package/src/components/or-select-v3/OrSelect.vue +3 -3
  112. package/src/components/or-select-v3/index.ts +0 -1
  113. package/src/components/or-select-v3/types.ts +1 -1
  114. package/dist/bundled/v2/OrCardCollection-a9a779ea.js +0 -228
  115. package/dist/bundled/v2/OrPagination-354e9abd.js +0 -296
  116. package/dist/bundled/v2/components/or-pagination-v3/OrPagination.stories3.d.ts +0 -12
  117. package/dist/bundled/v2/components/or-pagination-v3/OrPagination.vue.d.ts +0 -110
  118. package/dist/bundled/v2/components/or-pagination-v3/index.d.ts +0 -2
  119. package/dist/bundled/v2/components/or-pagination-v3/index.js +0 -20
  120. package/dist/bundled/v2/components/or-pagination-v3/styles.d.ts +0 -3
  121. package/dist/bundled/v2/components/or-pagination-v3/types.d.ts +0 -4
  122. package/dist/bundled/v3/OrCardCollection.vue_vue_type_script_lang-3993a015.js +0 -164
  123. package/dist/bundled/v3/OrPagination.vue_vue_type_script_lang-ff22b11c.js +0 -180
  124. package/dist/bundled/v3/components/or-pagination-v3/OrPagination.stories3.d.ts +0 -12
  125. package/dist/bundled/v3/components/or-pagination-v3/OrPagination.vue.d.ts +0 -110
  126. package/dist/bundled/v3/components/or-pagination-v3/index.d.ts +0 -2
  127. package/dist/bundled/v3/components/or-pagination-v3/index.js +0 -22
  128. package/dist/bundled/v3/components/or-pagination-v3/styles.d.ts +0 -3
  129. package/dist/bundled/v3/components/or-pagination-v3/types.d.ts +0 -4
  130. package/dist/esm/v2/OrCardCollection-4f001551.js +0 -227
  131. package/dist/esm/v2/OrPagination-a56eb93b.js +0 -296
  132. package/dist/esm/v2/components/or-pagination-v3/OrPagination.stories3.d.ts +0 -12
  133. package/dist/esm/v2/components/or-pagination-v3/OrPagination.vue.d.ts +0 -110
  134. package/dist/esm/v2/components/or-pagination-v3/index.d.ts +0 -2
  135. package/dist/esm/v2/components/or-pagination-v3/index.js +0 -18
  136. package/dist/esm/v2/components/or-pagination-v3/styles.d.ts +0 -3
  137. package/dist/esm/v2/components/or-pagination-v3/types.d.ts +0 -4
  138. package/dist/esm/v3/OrCardCollection-5a0febaf.js +0 -198
  139. package/dist/esm/v3/OrPagination-d351a13b.js +0 -257
  140. package/dist/esm/v3/components/or-pagination-v3/OrPagination.stories3.d.ts +0 -12
  141. package/dist/esm/v3/components/or-pagination-v3/OrPagination.vue.d.ts +0 -110
  142. package/dist/esm/v3/components/or-pagination-v3/index.d.ts +0 -2
  143. package/dist/esm/v3/components/or-pagination-v3/index.js +0 -17
  144. package/dist/esm/v3/components/or-pagination-v3/styles.d.ts +0 -3
  145. package/dist/esm/v3/components/or-pagination-v3/types.d.ts +0 -4
  146. package/src/components/or-pagination-v3/OrPagination.docs.mdx +0 -7
  147. package/src/components/or-pagination-v3/OrPagination.stories3.ts +0 -87
  148. package/src/components/or-pagination-v3/OrPagination.vue +0 -260
  149. package/src/components/or-pagination-v3/index.ts +0 -2
  150. package/src/components/or-pagination-v3/styles.ts +0 -30
  151. package/src/components/or-pagination-v3/types.ts +0 -4
@@ -1,198 +0,0 @@
1
- import { defineComponent, ref, computed, watch } from 'vue-demi';
2
- import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
3
- import '@vueuse/core';
4
- import { s as script$1 } from './OrCard-fd92f7c8.js';
5
- import { s as script$2 } from './OrIconButton-1eebcafc.js';
6
- import { s as script$3 } from './OrInput-41691fb3.js';
7
- import { s as script$4 } from './OrSortHeader-fe1a9cf8.js';
8
- import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, createVNode, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
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: script$1,
49
- OrIconButton: script$2,
50
- OrInput: script$3,
51
- OrSortHeader: script$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
- function render(_ctx, _cache, $props, $setup, $data, $options) {
133
- const _component_OrSortHeader = resolveComponent("OrSortHeader");
134
- const _component_OrInput = resolveComponent("OrInput");
135
- const _component_OrIconButton = resolveComponent("OrIconButton");
136
- const _component_OrCard = resolveComponent("OrCard");
137
- return openBlock(), createElementBlock("div", mergeProps({
138
- ref: "root"
139
- }, _ctx.$attrs, {
140
- class: _ctx.rootStyles
141
- }), [createElementVNode("div", {
142
- class: normalizeClass(_ctx.toolbarStyles)
143
- }, [createElementVNode("div", {
144
- class: normalizeClass(_ctx.toolbarPanelStyles)
145
- }, [_ctx.sortHeaders ? (openBlock(true), createElementBlock(Fragment, {
146
- key: 0
147
- }, renderList(_ctx.sortHeaders, header => {
148
- return openBlock(), createBlock(_component_OrSortHeader, {
149
- key: header.value,
150
- modelValue: _ctx.proxySort,
151
- "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.proxySort = $event),
152
- "input-value": header.value
153
- }, {
154
- default: withCtx(() => [createTextVNode(toDisplayString(header.label), 1 /* TEXT */)]),
155
-
156
- _: 2 /* DYNAMIC */
157
- }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "input-value"]);
158
- }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */), createElementVNode("div", {
159
- class: normalizeClass(_ctx.toolbarPanelStyles)
160
- }, [createVNode(_component_OrInput, {
161
- modelValue: _ctx.proxySearch,
162
- "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.proxySearch = $event),
163
- type: 'search',
164
- placeholder: 'Search',
165
- size: 's'
166
- }, null, 8 /* PROPS */, ["modelValue"]), createVNode(_component_OrIconButton, {
167
- icon: 'grid_view',
168
- onClick: _cache[2] || (_cache[2] = $event => _ctx.switchToGridView())
169
- }), createVNode(_component_OrIconButton, {
170
- icon: 'view_list',
171
- onClick: _cache[3] || (_cache[3] = $event => _ctx.switchToListView())
172
- }), renderSlot(_ctx.$slots, "addon")], 2 /* CLASS */)], 2 /* CLASS */), createElementVNode("div", {
173
- class: normalizeClass(_ctx.contentStyles)
174
- }, [_ctx.proxyView === 'grid' ? (openBlock(true), createElementBlock(Fragment, {
175
- key: 0
176
- }, renderList(_ctx.items, item => {
177
- return openBlock(), createBlock(_component_OrCard, {
178
- key: item.id
179
- }, {
180
- default: withCtx(() => [renderSlot(_ctx.$slots, "gridItem", normalizeProps(guardReactiveProps(item)))]),
181
- _: 2 /* DYNAMIC */
182
- }, 1024 /* DYNAMIC_SLOTS */);
183
- }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.proxyView === 'list' ? (openBlock(true), createElementBlock(Fragment, {
184
- key: 1
185
- }, renderList(_ctx.items, item => {
186
- return openBlock(), createBlock(_component_OrCard, {
187
- key: item.id
188
- }, {
189
- default: withCtx(() => [renderSlot(_ctx.$slots, "listItem", normalizeProps(guardReactiveProps(item)))]),
190
- _: 2 /* DYNAMIC */
191
- }, 1024 /* DYNAMIC_SLOTS */);
192
- }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */)], 16 /* FULL_PROPS */);
193
- }
194
-
195
- script.render = render;
196
- script.__file = "src/components/or-card-collection-v3/OrCardCollection.vue";
197
-
198
- export { CardCollectionView as C, script as s };
@@ -1,257 +0,0 @@
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-970ae320.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: {}
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
- 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
- }, {
239
- default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.pageSizeOptions, pageSize => {
240
- return openBlock(), createBlock(_component_OrMenuItem, {
241
- key: pageSize,
242
- onClick: withModifiers($event => _ctx.currentLimit = pageSize, ["stop"])
243
- }, {
244
- default: withCtx(() => [createTextVNode(toDisplayString(pageSize), 1 /* TEXT */)]),
245
-
246
- _: 2 /* DYNAMIC */
247
- }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
248
- }), 128 /* KEYED_FRAGMENT */))]),
249
-
250
- _: 1 /* STABLE */
251
- }, 8 /* PROPS */, ["trigger"])], 2 /* CLASS */)], 16 /* FULL_PROPS */);
252
- }
253
-
254
- script.render = render;
255
- script.__file = "src/components/or-pagination-v3/OrPagination.vue";
256
-
257
- export { script as s };
@@ -1,12 +0,0 @@
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>)>;
@@ -1,110 +0,0 @@
1
- import { PropType } from 'vue-demi';
2
- import { PaginationModel } from './types';
3
- declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
4
- root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
5
- limitButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
6
- [x: string]: ((...args: any[]) => any) | null;
7
- } | string[], {} & {}, {
8
- [x: number]: string;
9
- } | {}, true> | undefined>;
10
- limitButtonRoot: import("@vue/composition-api").ComputedRef<undefined>;
11
- limitMenu: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
12
- [x: string]: ((...args: any[]) => any) | null;
13
- } | string[], {} & {}, {
14
- [x: number]: string;
15
- } | {}, true> | undefined>;
16
- limitMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
17
- rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
18
- offsetControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
19
- limitControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
20
- proxyModelValue: import("@vue/composition-api").WritableComputedRef<PaginationModel>;
21
- currentLimit: import("@vue/composition-api").WritableComputedRef<number>;
22
- currentOffset: import("@vue/composition-api").WritableComputedRef<number>;
23
- currentPage: import("@vue/composition-api").WritableComputedRef<number>;
24
- firstPage: import("@vue/composition-api").ComputedRef<number>;
25
- lastPage: import("@vue/composition-api").ComputedRef<number>;
26
- buttonGroup: import("@vue/composition-api").ComputedRef<(string | number)[]>;
27
- toPreviousPage: () => void;
28
- toNextPage: () => void;
29
- toPage: (page: number) => void;
30
- }> & import("@vue/composition-api").Data, {}, {}, {
31
- modelValue: {
32
- type: PropType<PaginationModel>;
33
- default: PaginationModel;
34
- };
35
- value: {
36
- type: PropType<PaginationModel>;
37
- default: PaginationModel;
38
- };
39
- length: {
40
- type: NumberConstructor;
41
- required: true;
42
- };
43
- pageSizeOptions: {
44
- type: PropType<number[]>;
45
- default: number[];
46
- };
47
- }, import("@vue/composition-api").ExtractPropTypes<{
48
- modelValue: {
49
- type: PropType<PaginationModel>;
50
- default: PaginationModel;
51
- };
52
- value: {
53
- type: PropType<PaginationModel>;
54
- default: PaginationModel;
55
- };
56
- length: {
57
- type: NumberConstructor;
58
- required: true;
59
- };
60
- pageSizeOptions: {
61
- type: PropType<number[]>;
62
- default: number[];
63
- };
64
- }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
65
- length: number;
66
- modelValue: PaginationModel;
67
- value: PaginationModel;
68
- pageSizeOptions: number[];
69
- } & {} & {
70
- [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
71
- }, import("@vue/composition-api").ShallowUnwrapRef<{
72
- root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
73
- limitButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
74
- [x: string]: ((...args: any[]) => any) | null;
75
- } | string[], {} & {}, {
76
- [x: number]: string;
77
- } | {}, true> | undefined>;
78
- limitButtonRoot: import("@vue/composition-api").ComputedRef<undefined>;
79
- limitMenu: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
80
- [x: string]: ((...args: any[]) => any) | null;
81
- } | string[], {} & {}, {
82
- [x: number]: string;
83
- } | {}, true> | undefined>;
84
- limitMenuRoot: import("@vue/composition-api").ComputedRef<undefined>;
85
- rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
86
- offsetControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
87
- limitControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
88
- proxyModelValue: import("@vue/composition-api").WritableComputedRef<PaginationModel>;
89
- currentLimit: import("@vue/composition-api").WritableComputedRef<number>;
90
- currentOffset: import("@vue/composition-api").WritableComputedRef<number>;
91
- currentPage: import("@vue/composition-api").WritableComputedRef<number>;
92
- firstPage: import("@vue/composition-api").ComputedRef<number>;
93
- lastPage: import("@vue/composition-api").ComputedRef<number>;
94
- buttonGroup: import("@vue/composition-api").ComputedRef<(string | number)[]>;
95
- toPreviousPage: () => void;
96
- toNextPage: () => void;
97
- toPage: (page: number) => void;
98
- }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
99
- length: number;
100
- modelValue: PaginationModel;
101
- value: PaginationModel;
102
- pageSizeOptions: number[];
103
- } & {} & {
104
- [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
105
- }, {
106
- modelValue: PaginationModel;
107
- value: PaginationModel;
108
- pageSizeOptions: number[];
109
- }, true>);
110
- export default _default;
@@ -1,2 +0,0 @@
1
- export { default as OrPaginationV3 } from './OrPagination.vue';
2
- export * from './types';
@@ -1,17 +0,0 @@
1
- export { s as OrPaginationV3 } from '../../OrPagination-d351a13b.js';
2
- import 'vue-demi';
3
- import '../../useClassAttribute-47fdb016.js';
4
- import '@vueuse/core';
5
- import '../../OrButton-970ae320.js';
6
- import '../../OrLoader-b3cf4231.js';
7
- import 'vue';
8
- import '../../OrIcon-b195169c.js';
9
- import '../../OrMenuItem-9da279f6.js';
10
- import '../../OrMenu-840038cd.js';
11
- import '../../OrPopover-1075dd38.js';
12
- import '@floating-ui/dom';
13
- import '../../useElevation-31bfe1f6.js';
14
- import '../../useResponsive-a02e95b7.js';
15
- import '../../OrBottomSheet-62817aec.js';
16
- import '../../OrOverlay-738a44d5.js';
17
- import '../../OrTeleport.vue3-8099178c.js';
@@ -1,3 +0,0 @@
1
- export declare const PaginationRoot: string[];
2
- export declare const PaginationOffsetControl: string[];
3
- export declare const PaginationLimitControl: string[];
@@ -1,4 +0,0 @@
1
- export interface PaginationModel {
2
- limit: number;
3
- offset: number;
4
- }
@@ -1,7 +0,0 @@
1
- import { DocsPage } from '@storybook/addon-docs';
2
-
3
- ```ts
4
- import { OrPaginationV3 as OrPagination } from '@onereach/ui-components';
5
- ```
6
-
7
- <DocsPage />