@onereach/ui-components 2.69.2-beta.2106.0 → 2.69.2-beta.2108.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 (176) hide show
  1. package/dist/bundled/v2/{OrButton-66d37aff.js → OrButton-0e91a808.js} +1 -14
  2. package/dist/bundled/v2/{OrCardCollection-a9a779ea.js → OrCardCollection-3d1b3b9a.js} +1 -1
  3. package/dist/bundled/v2/{OrConfirm-e1ca1422.js → OrConfirm-43626f94.js} +2 -2
  4. package/dist/bundled/v2/{OrInput-8b90e08f.js → OrInput-0a3666aa.js} +18 -11
  5. package/dist/bundled/v2/{OrInputBox-79ec54ad.js → OrInputBox-dfdcbdce.js} +4 -14
  6. package/dist/bundled/v2/{OrSearch-9d402f56.js → OrSearch-847c1bab.js} +2 -2
  7. package/dist/bundled/v2/{OrSelect-ff9e4fbd.js → OrSelect-41c6588d.js} +11 -5
  8. package/dist/bundled/v2/{OrTextarea-5593fbe9.js → OrTextarea-ff2ba975.js} +2 -1
  9. package/dist/bundled/v2/components/index.d.ts +0 -1
  10. package/dist/bundled/v2/components/index.js +9 -9
  11. package/dist/bundled/v2/components/or-button-v3/OrButton.vue.d.ts +0 -11
  12. package/dist/bundled/v2/components/or-button-v3/index.js +1 -1
  13. package/dist/bundled/v2/components/or-card-collection-v3/index.js +4 -3
  14. package/dist/bundled/v2/components/or-combined-input-v3/OrCombinedInput.stories3.d.ts +27 -0
  15. package/dist/bundled/v2/components/or-combined-input-v3/OrCombinedInput.vue.d.ts +98 -0
  16. package/dist/bundled/v2/components/or-combined-input-v3/index.d.ts +2 -0
  17. package/dist/bundled/v2/components/or-combined-input-v3/index.js +149 -0
  18. package/dist/bundled/v2/components/or-combined-input-v3/props.d.ts +1 -0
  19. package/dist/bundled/v2/components/or-combined-input-v3/styles.d.ts +2 -0
  20. package/dist/bundled/v2/components/or-confirm-v3/index.js +5 -4
  21. package/dist/bundled/v2/components/or-input-box-v3/index.js +2 -1
  22. package/dist/bundled/v2/components/or-input-v3/index.js +3 -2
  23. package/dist/bundled/v2/components/or-search-v3/index.js +4 -3
  24. package/dist/bundled/v2/components/or-select-v3/OrSelect.vue.d.ts +25 -14
  25. package/dist/bundled/v2/components/or-select-v3/index.d.ts +0 -1
  26. package/dist/bundled/v2/components/or-select-v3/index.js +4 -3
  27. package/dist/bundled/v2/components/or-select-v3/types.d.ts +1 -1
  28. package/dist/bundled/v2/components/or-textarea-v3/index.js +3 -2
  29. package/dist/bundled/v2/index.js +10 -10
  30. package/dist/bundled/v2/props-78496a2d.js +12 -0
  31. package/dist/bundled/v3/{OrButton.vue_vue_type_script_lang-06d8ead1.js → OrButton.vue_vue_type_script_lang-3718b300.js} +1 -13
  32. package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-3993a015.js → OrCardCollection.vue_vue_type_script_lang-fd4d589f.js} +2 -2
  33. package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-f1b81f00.js → OrConfirm.vue_vue_type_script_lang-338631e0.js} +38 -8
  34. package/dist/bundled/v3/{OrInput-fa782fc1.js → OrInput-5efc4b9a.js} +17 -14
  35. package/dist/bundled/v3/{OrInput.vue_vue_type_script_lang-f6d793d3.js → OrInput.vue_vue_type_script_lang-a9f3e530.js} +3 -2
  36. package/dist/bundled/v3/{OrInputBox-eb54d73d.js → OrInputBox-1b143e00.js} +1 -1
  37. package/dist/{esm/v2/OrInputBox-4d5a318d.js → bundled/v3/OrInputBox.vue_vue_type_script_lang-70dec655.js} +6 -57
  38. package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-ed78b21f.js → OrSearch.vue_vue_type_script_lang-df09cad8.js} +3 -3
  39. package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-05b03858.js → OrSelect.vue_vue_type_script_lang-cf991ed8.js} +11 -6
  40. package/dist/bundled/v3/{OrTabs.vue_vue_type_script_lang-61b79a5a.js → OrTabs.vue_vue_type_script_lang-919b2021.js} +36 -10
  41. package/dist/bundled/v3/{OrTextarea.vue_vue_type_script_lang-8e3531cd.js → OrTextarea.vue_vue_type_script_lang-115a1244.js} +3 -2
  42. package/dist/bundled/v3/components/index.d.ts +0 -1
  43. package/dist/bundled/v3/components/index.js +12 -14
  44. package/dist/bundled/v3/components/or-button-v3/OrButton.vue.d.ts +0 -11
  45. package/dist/bundled/v3/components/or-button-v3/index.js +1 -1
  46. package/dist/bundled/v3/components/or-card-collection-v3/index.js +6 -5
  47. package/dist/bundled/v3/components/or-combined-input-v3/OrCombinedInput.stories3.d.ts +27 -0
  48. package/dist/bundled/v3/components/or-combined-input-v3/OrCombinedInput.vue.d.ts +98 -0
  49. package/dist/bundled/v3/components/or-combined-input-v3/index.d.ts +2 -0
  50. package/dist/bundled/v3/components/or-combined-input-v3/index.js +132 -0
  51. package/dist/bundled/v3/components/or-combined-input-v3/props.d.ts +1 -0
  52. package/dist/bundled/v3/components/or-combined-input-v3/styles.d.ts +2 -0
  53. package/dist/bundled/v3/components/or-confirm-v3/index.js +7 -7
  54. package/dist/bundled/v3/components/or-input-box-v3/index.js +2 -1
  55. package/dist/bundled/v3/components/or-input-v3/index.js +4 -3
  56. package/dist/bundled/v3/components/or-search-v3/index.js +6 -5
  57. package/dist/bundled/v3/components/or-select-v3/OrSelect.vue.d.ts +25 -14
  58. package/dist/bundled/v3/components/or-select-v3/index.d.ts +0 -1
  59. package/dist/bundled/v3/components/or-select-v3/index.js +6 -5
  60. package/dist/bundled/v3/components/or-select-v3/types.d.ts +1 -1
  61. package/dist/bundled/v3/components/or-tabs-v3/index.js +1 -2
  62. package/dist/bundled/v3/components/or-textarea-v3/index.js +4 -3
  63. package/dist/bundled/v3/index.js +162 -242
  64. package/dist/bundled/v3/props-78496a2d.js +12 -0
  65. package/dist/esm/v2/{OrButton-3d4fc9da.js → OrButton-357a5756.js} +1 -14
  66. package/dist/esm/v2/{OrCardCollection-4f001551.js → OrCardCollection-09e4cb8a.js} +1 -1
  67. package/dist/esm/v2/{OrConfirm-ba3f8c45.js → OrConfirm-93376443.js} +2 -2
  68. package/dist/esm/v2/{OrInput-2f16a7ac.js → OrInput-f92456ea.js} +18 -11
  69. package/dist/esm/v2/OrInputBox-ad7c1875.js +43 -0
  70. package/dist/{bundled/v3/OrInputBox.vue_vue_type_script_lang-5ee4ee45.js → esm/v2/OrInputBox.vue_rollup-plugin-vue_script-52a54a49.js} +5 -4
  71. package/dist/esm/v2/{OrSearch-ddb7c1fe.js → OrSearch-4296eecb.js} +2 -2
  72. package/dist/esm/v2/{OrSelect-651bb83e.js → OrSelect-633a9e09.js} +11 -5
  73. package/dist/esm/v2/{OrTextarea-6712a150.js → OrTextarea-823d0529.js} +2 -1
  74. package/dist/esm/v2/components/index.d.ts +0 -1
  75. package/dist/esm/v2/components/index.js +9 -9
  76. package/dist/esm/v2/components/or-button-v3/OrButton.vue.d.ts +0 -11
  77. package/dist/esm/v2/components/or-button-v3/index.js +1 -1
  78. package/dist/esm/v2/components/or-card-collection-v3/index.js +4 -3
  79. package/dist/esm/v2/components/or-combined-input-v3/OrCombinedInput.stories3.d.ts +27 -0
  80. package/dist/esm/v2/components/or-combined-input-v3/OrCombinedInput.vue.d.ts +98 -0
  81. package/dist/esm/v2/components/or-combined-input-v3/index.d.ts +2 -0
  82. package/dist/esm/v2/components/or-combined-input-v3/index.js +147 -0
  83. package/dist/esm/v2/components/or-combined-input-v3/props.d.ts +1 -0
  84. package/dist/esm/v2/components/or-combined-input-v3/styles.d.ts +2 -0
  85. package/dist/esm/v2/components/or-confirm-v3/index.js +5 -4
  86. package/dist/esm/v2/components/or-input-box-v3/index.js +3 -2
  87. package/dist/esm/v2/components/or-input-v3/index.js +3 -2
  88. package/dist/esm/v2/components/or-search-v3/index.js +4 -3
  89. package/dist/esm/v2/components/or-select-v3/OrSelect.vue.d.ts +25 -14
  90. package/dist/esm/v2/components/or-select-v3/index.d.ts +0 -1
  91. package/dist/esm/v2/components/or-select-v3/index.js +4 -3
  92. package/dist/esm/v2/components/or-select-v3/types.d.ts +1 -1
  93. package/dist/esm/v2/components/or-textarea-v3/index.js +3 -2
  94. package/dist/esm/v2/index.js +9 -9
  95. package/dist/esm/v3/{OrButton-970ae320.js → OrButton-f4b9ee51.js} +2 -15
  96. package/dist/esm/v3/{OrCardCollection-5a0febaf.js → OrCardCollection-37226d46.js} +1 -1
  97. package/dist/esm/v3/{OrConfirm-7cb2f36b.js → OrConfirm-b27e7221.js} +2 -2
  98. package/dist/esm/v3/{OrInput-41691fb3.js → OrInput-99776ffe.js} +17 -14
  99. package/dist/esm/v3/{OrInputBox-5247ab25.js → OrInputBox-36c102a4.js} +2 -2
  100. package/dist/esm/v3/{OrSearch-cdde55ce.js → OrSearch-188c643f.js} +2 -2
  101. package/dist/esm/v3/{OrSelect-28a175dc.js → OrSelect-cba3966c.js} +11 -6
  102. package/dist/esm/v3/{OrTextarea-bb9ef3f2.js → OrTextarea-b3ecc40d.js} +1 -1
  103. package/dist/esm/v3/components/index.d.ts +0 -1
  104. package/dist/esm/v3/components/index.js +8 -9
  105. package/dist/esm/v3/components/or-button-v3/OrButton.vue.d.ts +0 -11
  106. package/dist/esm/v3/components/or-button-v3/index.js +1 -1
  107. package/dist/esm/v3/components/or-card-collection-v3/index.js +3 -3
  108. package/dist/esm/v3/components/or-combined-input-v3/OrCombinedInput.stories3.d.ts +27 -0
  109. package/dist/esm/v3/components/or-combined-input-v3/OrCombinedInput.vue.d.ts +98 -0
  110. package/dist/esm/v3/components/or-combined-input-v3/index.d.ts +2 -0
  111. package/dist/esm/v3/components/or-combined-input-v3/index.js +132 -0
  112. package/dist/esm/v3/components/or-combined-input-v3/props.d.ts +1 -0
  113. package/dist/esm/v3/components/or-combined-input-v3/styles.d.ts +2 -0
  114. package/dist/esm/v3/components/or-confirm-v3/index.js +4 -4
  115. package/dist/esm/v3/components/or-input-box-v3/index.js +1 -1
  116. package/dist/esm/v3/components/or-input-v3/index.js +2 -2
  117. package/dist/esm/v3/components/or-search-v3/index.js +3 -3
  118. package/dist/esm/v3/components/or-select-v3/OrSelect.vue.d.ts +25 -14
  119. package/dist/esm/v3/components/or-select-v3/index.d.ts +0 -1
  120. package/dist/esm/v3/components/or-select-v3/index.js +3 -3
  121. package/dist/esm/v3/components/or-select-v3/types.d.ts +1 -1
  122. package/dist/esm/v3/components/or-textarea-v3/index.js +2 -2
  123. package/dist/esm/v3/index.js +8 -9
  124. package/package.json +2 -2
  125. package/src/components/index.ts +0 -1
  126. package/src/components/or-button-v3/OrButton.stories3.ts +0 -4
  127. package/src/components/or-button-v3/OrButton.vue +0 -6
  128. package/src/components/or-button-v3/styles.ts +1 -15
  129. package/src/components/or-combined-input-v3/OrCombinedInput.docs.mdx +7 -0
  130. package/src/components/or-combined-input-v3/OrCombinedInput.stories3.ts +202 -0
  131. package/src/components/or-combined-input-v3/OrCombinedInput.vue +134 -0
  132. package/src/components/or-combined-input-v3/index.ts +2 -0
  133. package/src/components/or-combined-input-v3/props.ts +1 -0
  134. package/src/components/or-combined-input-v3/styles.ts +25 -0
  135. package/src/components/or-input-box-v3/styles.ts +3 -3
  136. package/src/components/or-input-v3/OrInput.vue +28 -22
  137. package/src/components/or-select-v3/OrSelect.stories3.ts +4 -0
  138. package/src/components/or-select-v3/OrSelect.vue +9 -3
  139. package/src/components/or-select-v3/index.ts +0 -1
  140. package/src/components/or-select-v3/types.ts +1 -1
  141. package/dist/bundled/v2/OrPagination-354e9abd.js +0 -296
  142. package/dist/bundled/v2/components/or-pagination-v3/OrPagination.stories3.d.ts +0 -12
  143. package/dist/bundled/v2/components/or-pagination-v3/OrPagination.vue.d.ts +0 -110
  144. package/dist/bundled/v2/components/or-pagination-v3/index.d.ts +0 -2
  145. package/dist/bundled/v2/components/or-pagination-v3/index.js +0 -20
  146. package/dist/bundled/v2/components/or-pagination-v3/styles.d.ts +0 -3
  147. package/dist/bundled/v2/components/or-pagination-v3/types.d.ts +0 -4
  148. package/dist/bundled/v3/OrButton-9640286b.js +0 -34
  149. package/dist/bundled/v3/OrMenu-f26e8e55.js +0 -29
  150. package/dist/bundled/v3/OrPagination.vue_vue_type_script_lang-ff22b11c.js +0 -180
  151. package/dist/bundled/v3/components/or-pagination-v3/OrPagination.stories3.d.ts +0 -12
  152. package/dist/bundled/v3/components/or-pagination-v3/OrPagination.vue.d.ts +0 -110
  153. package/dist/bundled/v3/components/or-pagination-v3/index.d.ts +0 -2
  154. package/dist/bundled/v3/components/or-pagination-v3/index.js +0 -22
  155. package/dist/bundled/v3/components/or-pagination-v3/styles.d.ts +0 -3
  156. package/dist/bundled/v3/components/or-pagination-v3/types.d.ts +0 -4
  157. package/dist/esm/v2/OrPagination-a56eb93b.js +0 -296
  158. package/dist/esm/v2/components/or-pagination-v3/OrPagination.stories3.d.ts +0 -12
  159. package/dist/esm/v2/components/or-pagination-v3/OrPagination.vue.d.ts +0 -110
  160. package/dist/esm/v2/components/or-pagination-v3/index.d.ts +0 -2
  161. package/dist/esm/v2/components/or-pagination-v3/index.js +0 -18
  162. package/dist/esm/v2/components/or-pagination-v3/styles.d.ts +0 -3
  163. package/dist/esm/v2/components/or-pagination-v3/types.d.ts +0 -4
  164. package/dist/esm/v3/OrPagination-d351a13b.js +0 -257
  165. package/dist/esm/v3/components/or-pagination-v3/OrPagination.stories3.d.ts +0 -12
  166. package/dist/esm/v3/components/or-pagination-v3/OrPagination.vue.d.ts +0 -110
  167. package/dist/esm/v3/components/or-pagination-v3/index.d.ts +0 -2
  168. package/dist/esm/v3/components/or-pagination-v3/index.js +0 -17
  169. package/dist/esm/v3/components/or-pagination-v3/styles.d.ts +0 -3
  170. package/dist/esm/v3/components/or-pagination-v3/types.d.ts +0 -4
  171. package/src/components/or-pagination-v3/OrPagination.docs.mdx +0 -7
  172. package/src/components/or-pagination-v3/OrPagination.stories3.ts +0 -87
  173. package/src/components/or-pagination-v3/OrPagination.vue +0 -260
  174. package/src/components/or-pagination-v3/index.ts +0 -2
  175. package/src/components/or-pagination-v3/styles.ts +0 -30
  176. package/src/components/or-pagination-v3/types.ts +0 -4
@@ -0,0 +1,25 @@
1
+ export const CombinedInputRoot: string[] = [
2
+ // Layout
3
+ 'layout-column',
4
+
5
+ // Spacing
6
+ 'gap-xs',
7
+ ];
8
+
9
+ export const CombinedInputControlGroup: string[] = [
10
+ // Layout
11
+ 'layout-row',
12
+
13
+ // Box
14
+ 'w-full',
15
+
16
+ // Shape (.or-input-box)
17
+ '[&_.or-input-box]:first-child:rounded-r-none',
18
+ '[&_.or-input-box]:intermediate-child:rounded-none',
19
+ '[&_.or-input-box]:last-child:rounded-l-none',
20
+
21
+ // Spacing (.or-input-box)
22
+ '[&_.or-input-box]:first-child:mr-[-1px]',
23
+ '[&_.or-input-box]:intermediate-child:border-x-0',
24
+ '[&_.or-input-box]:last-child:ml-[-1px]',
25
+ ];
@@ -94,9 +94,9 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
94
94
 
95
95
  // Spacing
96
96
  'first-child:pl-md first-child:md:pl-sm+',
97
+ 'intermediate-child:pt-[11px] intermediate-child:md:pt-[7px]',
98
+ 'intermediate-child:pb-[11px] intermediate-child:md:pb-[6px]',
97
99
  'last-child:pr-md last-child:md:pr-sm+',
98
- 'children:pt-[11px] children:md:pt-[7px]',
99
- 'children:pb-[11px] children:md:pb-[6px]',
100
100
 
101
101
  'gap-sm+ md:gap-sm',
102
102
 
@@ -110,8 +110,8 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
110
110
 
111
111
  // Spacing
112
112
  'first-child:pl-sm',
113
+ 'intermediate-child:py-[6px]',
113
114
  'last-child:pr-sm',
114
- 'children:py-[6px]',
115
115
 
116
116
  'gap-[6px]',
117
117
 
@@ -1,6 +1,7 @@
1
1
  <template>
2
2
  <div
3
3
  ref="root"
4
+ v-bind="$attrs"
4
5
  :class="rootStyles"
5
6
  >
6
7
  <template v-if="label">
@@ -29,46 +30,51 @@
29
30
  :id="controlId"
30
31
  ref="input"
31
32
  v-model="proxyModelValue"
32
- v-bind="$attrs"
33
33
  :class="controlStyles"
34
34
  :type="type === 'password' && disclosed ? 'text' : type"
35
35
  :placeholder="placeholder"
36
36
  :required="required"
37
37
  :disabled="disabled"
38
+
39
+ :read-only="readonly"
40
+ :max-length="maxLength"
41
+
38
42
  @keydown="$emit('keydown', $event)"
39
43
  @keyup="$emit('keyup', $event)"
40
44
  @focus="$emit('focus', $event)"
41
45
  @blur="$emit('blur', $event)"
42
46
  >
43
47
 
44
- <div :class="['layout-row']">
45
- <template v-if="type === 'password'">
46
- <OrIconButton
47
- :icon="{ icon: disclosed ? 'visibility_off' : 'visibility', variant: 'filled' }"
48
- :color="'inherit'"
49
- :disabled="disabled"
50
- @click.stop="disclosed = !disclosed"
51
- />
52
- </template>
53
-
54
- <template v-if="type === 'search'">
55
- <template v-if="modelValue">
48
+ <template v-if="type !== 'text'">
49
+ <div :class="['layout-row']">
50
+ <template v-if="type === 'password'">
56
51
  <OrIconButton
57
- :icon="'close'"
52
+ :icon="{ icon: disclosed ? 'visibility_off' : 'visibility', variant: 'filled' }"
58
53
  :color="'inherit'"
59
54
  :disabled="disabled"
60
- @click.stop="$emit('update:modelValue', '')"
55
+ @click.stop="disclosed = !disclosed"
61
56
  />
62
57
  </template>
63
58
 
64
- <template v-else>
65
- <OrIcon
66
- :icon="'search'"
67
- :variant="'outlined'"
68
- />
59
+ <template v-if="type === 'search'">
60
+ <template v-if="modelValue">
61
+ <OrIconButton
62
+ :icon="'close'"
63
+ :color="'inherit'"
64
+ :disabled="disabled"
65
+ @click.stop="$emit('update:modelValue', '')"
66
+ />
67
+ </template>
68
+
69
+ <template v-else>
70
+ <OrIcon
71
+ :icon="'search'"
72
+ :variant="'outlined'"
73
+ />
74
+ </template>
69
75
  </template>
70
- </template>
71
- </div>
76
+ </div>
77
+ </template>
72
78
  </OrInputBox>
73
79
 
74
80
  <template v-if="!invalid">
@@ -108,6 +108,10 @@ export default {
108
108
  control: { type: 'boolean' },
109
109
  },
110
110
 
111
+ disableDefaultStyles: {
112
+ control: { type: 'boolean' },
113
+ },
114
+
111
115
  enableSearch: {
112
116
  control: { type: 'boolean' },
113
117
  },
@@ -24,6 +24,7 @@
24
24
  v-dropdown-open="toggle"
25
25
  v-dropdown-close="close"
26
26
  :class="[popoverState === 'open' && 'rounded-b-0']"
27
+ :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
27
28
  :size="size"
28
29
  :invalid="invalid"
29
30
  :readonly="readonly"
@@ -38,7 +39,7 @@
38
39
  @focus="$emit('focus', $event)"
39
40
  @blur="$emit('blur', $event)"
40
41
  >
41
- <template v-if="proxyModelValue !== undefined">
42
+ <template v-if="proxyModelValue && proxyModelValue.length > 0">
42
43
  <template v-if="multiple">
43
44
  <slot
44
45
  name="valueTemplate"
@@ -265,12 +266,12 @@ export default defineComponent({
265
266
  },
266
267
 
267
268
  modelValue: {
268
- type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
269
+ type: [String, Array] as PropType<string | string[]>,
269
270
  default: undefined,
270
271
  },
271
272
 
272
273
  value: { // TODO: Remove Vue 2 fallback
273
- type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
274
+ type: [String, Array] as PropType<string | string[]>,
274
275
  default: undefined,
275
276
  },
276
277
 
@@ -314,6 +315,11 @@ export default defineComponent({
314
315
  default: false,
315
316
  },
316
317
 
318
+ disableDefaultStyles: {
319
+ type: Boolean,
320
+ default: false,
321
+ },
322
+
317
323
  enableSearch: {
318
324
  type: Boolean,
319
325
  default: false,
@@ -1,3 +1,2 @@
1
1
  export { default as OrSelectV3 } from './OrSelect.vue';
2
2
  export * from './props';
3
- export * from './types';
@@ -1,5 +1,5 @@
1
1
  export interface SelectOption {
2
- value: string | number;
2
+ value: string;
3
3
  label: string;
4
4
  }
5
5
 
@@ -1,296 +0,0 @@
1
- import './index-fa6eb4ca.js';
2
- import { O as OrButton } from './OrButton-66d37aff.js';
3
- import { O as OrIcon } from './OrIcon-8625385f.js';
4
- import { O as OrMenu } from './OrMenu-fa47c888.js';
5
- import { O as OrMenuItem } from './OrMenuItem-26420908.js';
6
- import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
7
- import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
8
- import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
9
-
10
- const PaginationRoot = [
11
- // Layout
12
- 'layout-row',
13
- // Spacing
14
- 'gap-xl',
15
- // Typography
16
- 'typography-caption-regular',
17
- // Theme
18
- 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
19
- const PaginationOffsetControl = [
20
- // Layout
21
- 'layout-row',
22
- // Spacing
23
- 'gap-md'];
24
- const PaginationLimitControl = [
25
- // Layout
26
- 'layout-row',
27
- // Spacing
28
- 'gap-sm'];
29
-
30
- var script = defineComponent({
31
- name: 'OrPagination',
32
- components: {
33
- OrButton,
34
- OrIcon,
35
- OrMenu,
36
- OrMenuItem
37
- },
38
- inheritAttrs: false,
39
- props: {
40
- modelValue: {
41
- type: Object,
42
- default: {}
43
- },
44
- value: {
45
- type: Object,
46
- default: {}
47
- },
48
- length: {
49
- type: Number,
50
- required: true
51
- },
52
- pageSizeOptions: {
53
- type: Array,
54
- default: [50, 20, 10, 5]
55
- }
56
- },
57
- emits: ['update:modelValue', 'input'],
58
- expose: ['root'],
59
- setup(props, context) {
60
- // Refs
61
- const root = ref();
62
- const limitButton = ref();
63
- const limitButtonRoot = computed(() => {
64
- var _a;
65
- return (_a = limitButton.value) === null || _a === void 0 ? void 0 : _a.root;
66
- });
67
- const limitMenu = ref();
68
- const limitMenuRoot = computed(() => {
69
- var _a;
70
- return (_a = limitMenu.value) === null || _a === void 0 ? void 0 : _a.root;
71
- });
72
- // Styles
73
- const classAttribute = useClassAttribute();
74
- const rootStyles = computed(() => ['or-pagination', ...PaginationRoot, classAttribute.value]);
75
- const offsetControlStyles = computed(() => [...PaginationOffsetControl]);
76
- const limitControlStyles = computed(() => [...PaginationLimitControl]);
77
- // State
78
- const proxyModelValue = computed({
79
- get: () => {
80
- var _a;
81
- return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
82
- },
83
-
84
- set: value => {
85
- context.emit('input', value);
86
- context.emit('update:modelValue', value);
87
- }
88
- });
89
- const currentLimit = computed({
90
- get: () => {
91
- var _a;
92
- return (_a = proxyModelValue.value.limit) !== null && _a !== void 0 ? _a : props.pageSizeOptions[0];
93
- },
94
- set: value => {
95
- proxyModelValue.value = {
96
- limit: value,
97
- offset: currentOffset.value
98
- };
99
- }
100
- });
101
- const currentOffset = computed({
102
- get: () => {
103
- var _a;
104
- return (_a = proxyModelValue.value.offset) !== null && _a !== void 0 ? _a : 0;
105
- },
106
- set: value => {
107
- proxyModelValue.value = {
108
- limit: currentLimit.value,
109
- offset: value
110
- };
111
- }
112
- });
113
- const currentPage = computed({
114
- get: () => {
115
- return Math.floor(currentOffset.value / currentLimit.value) + 1;
116
- },
117
- set: value => {
118
- currentOffset.value = (value - 1) * currentLimit.value;
119
- }
120
- });
121
- const firstPage = computed(() => {
122
- return 1;
123
- });
124
- const lastPage = computed(() => {
125
- return Math.ceil(props.length / currentLimit.value);
126
- });
127
- const buttonGroup = computed(() => {
128
- return Array.from({
129
- length: lastPage.value
130
- }, (_, index) => index + 1).map(page => {
131
- switch (true) {
132
- case page > firstPage.value && page < currentPage.value - 1:
133
- case page > currentPage.value + 1 && page < lastPage.value:
134
- return '…';
135
- default:
136
- return page;
137
- }
138
- }).reduce((accumulator, page) => {
139
- if (accumulator[accumulator.length - 1] === page) {
140
- return accumulator;
141
- }
142
- return [...accumulator, page];
143
- }, []);
144
- });
145
- // Functions
146
- function toPreviousPage() {
147
- currentPage.value = currentPage.value - 1;
148
- }
149
- function toNextPage() {
150
- currentPage.value = currentPage.value + 1;
151
- }
152
- function toPage(page) {
153
- currentPage.value = page;
154
- }
155
- return {
156
- root,
157
- limitButton,
158
- limitButtonRoot,
159
- limitMenu,
160
- limitMenuRoot,
161
- rootStyles,
162
- offsetControlStyles,
163
- limitControlStyles,
164
- proxyModelValue,
165
- currentLimit,
166
- currentOffset,
167
- currentPage,
168
- firstPage,
169
- lastPage,
170
- buttonGroup,
171
- toPreviousPage,
172
- toNextPage,
173
- toPage
174
- };
175
- }
176
- });
177
-
178
- /* script */
179
- const __vue_script__ = script;
180
-
181
- /* template */
182
- var __vue_render__ = function () {
183
- var _vm = this;
184
- var _h = _vm.$createElement;
185
- var _c = _vm._self._c || _h;
186
- return _c('div', _vm._b({
187
- ref: "root",
188
- class: _vm.rootStyles
189
- }, 'div', _vm.$attrs, false), [_c('div', {
190
- class: _vm.offsetControlStyles
191
- }, [_c('OrButton', {
192
- attrs: {
193
- "variant": 'link',
194
- "color": 'inherit',
195
- "disabled": _vm.currentPage === _vm.firstPage
196
- },
197
- on: {
198
- "click": function ($event) {
199
- $event.stopPropagation();
200
- return _vm.toPreviousPage();
201
- }
202
- }
203
- }, [_c('OrIcon', {
204
- attrs: {
205
- "icon": 'keyboard_arrow_left'
206
- }
207
- })], 1), _vm._v(" "), _vm._l(_vm.buttonGroup, function (page, index) {
208
- return _c('OrButton', {
209
- key: index,
210
- attrs: {
211
- "variant": 'link',
212
- "color": 'inherit',
213
- "activated": _vm.currentPage === page
214
- },
215
- on: {
216
- "click": function ($event) {
217
- $event.stopPropagation();
218
- typeof page === 'number' && _vm.toPage(page);
219
- }
220
- }
221
- }, [_vm._v("\n " + _vm._s(page) + "\n ")]);
222
- }), _vm._v(" "), _c('OrButton', {
223
- attrs: {
224
- "variant": 'link',
225
- "color": 'inherit',
226
- "disabled": _vm.currentPage === _vm.lastPage
227
- },
228
- on: {
229
- "click": function ($event) {
230
- $event.stopPropagation();
231
- return _vm.toNextPage();
232
- }
233
- }
234
- }, [_c('OrIcon', {
235
- attrs: {
236
- "icon": 'keyboard_arrow_right'
237
- }
238
- })], 1)], 2), _vm._v(" "), _c('div', {
239
- class: _vm.limitControlStyles
240
- }, [_vm._v("\n Per page:\n\n "), _c('OrButton', {
241
- ref: "limitButton",
242
- attrs: {
243
- "variant": 'link',
244
- "color": 'inherit',
245
- "activated": true
246
- },
247
- on: {
248
- "click": function ($event) {
249
- $event.stopPropagation();
250
- return _vm.limitMenu.open();
251
- }
252
- }
253
- }, [_vm._v("\n " + _vm._s(_vm.currentLimit) + " "), _c('OrIcon', {
254
- attrs: {
255
- "icon": 'arrow_drop_down'
256
- }
257
- })], 1), _vm._v(" "), _c('OrMenu', {
258
- ref: "limitMenu",
259
- attrs: {
260
- "trigger": _vm.limitButtonRoot
261
- }
262
- }, _vm._l(_vm.pageSizeOptions, function (pageSize) {
263
- return _c('OrMenuItem', {
264
- key: pageSize,
265
- on: {
266
- "click": function ($event) {
267
- $event.stopPropagation();
268
- _vm.currentLimit = pageSize;
269
- }
270
- }
271
- }, [_vm._v("\n " + _vm._s(pageSize) + "\n ")]);
272
- }), 1)], 1)]);
273
- };
274
- var __vue_staticRenderFns__ = [];
275
-
276
- /* style */
277
- const __vue_inject_styles__ = undefined;
278
- /* scoped */
279
- const __vue_scope_id__ = undefined;
280
- /* module identifier */
281
- const __vue_module_identifier__ = undefined;
282
- /* functional template */
283
- const __vue_is_functional_template__ = false;
284
- /* style inject */
285
-
286
- /* style inject SSR */
287
-
288
- /* style inject shadow dom */
289
-
290
- const __vue_component__ = /*#__PURE__*/normalizeComponent({
291
- render: __vue_render__,
292
- staticRenderFns: __vue_staticRenderFns__
293
- }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
294
- var __vue_component__$1 = __vue_component__;
295
-
296
- export { __vue_component__$1 as _ };
@@ -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,20 +0,0 @@
1
- export { _ as OrPaginationV3 } from '../../OrPagination-354e9abd.js';
2
- import '../../index-fa6eb4ca.js';
3
- import 'vue';
4
- import '@vue/composition-api/dist/vue-composition-api.mjs';
5
- import '../../OrButton-66d37aff.js';
6
- import '../../OrLoader-6a1f937b.js';
7
- import '../../useClassAttribute-9bf33346.js';
8
- import '../../normalize-component-6e8e3d80.js';
9
- import '../../OrIcon-8625385f.js';
10
- import '../../OrMenu-fa47c888.js';
11
- import '../../OrPopover-5dc240f1.js';
12
- import '../../floating-ui.dom.esm-83eba816.js';
13
- import '@vueuse/core';
14
- import '../../OrBottomSheet-1cd1ab4c.js';
15
- import '../../OrOverlay-3c89d622.js';
16
- import '../../OrTeleport.vue2-e9ba3054.js';
17
- import 'portal-vue';
18
- import '../../useElevation-aac032f4.js';
19
- import '../../useResponsive-e13dfbb0.js';
20
- import '../../OrMenuItem-26420908.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
- }