@onereach/ui-components 2.62.3-beta.1904.0 → 2.62.3

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 (244) hide show
  1. package/dist/v2/{OrConfirm-3896bd11.js → OrConfirm-d561bf82.js} +1 -1
  2. package/dist/v2/{OrInlineInput-c1d6fb73.js → OrInlineInput-e754cb9f.js} +5 -5
  3. package/dist/v2/{OrInlineTextarea-7ec4c40d.js → OrInlineTextarea-7dc58bb1.js} +5 -5
  4. package/dist/v2/{OrInput-0508c3fb.js → OrInput-0dcfba2a.js} +5 -5
  5. package/dist/v2/{OrSearch-feca9f48.js → OrSearch-45ea8c33.js} +1 -1
  6. package/dist/v2/{OrSelect-bb539517.js → OrSelect-b44cac14.js} +14 -34
  7. package/dist/v2/{OrTextarea-cc70afc9.js → OrTextarea-8773d494.js} +5 -5
  8. package/dist/v2/components/index.d.ts +0 -2
  9. package/dist/v2/components/or-select-v3/OrSelect.vue.d.ts +2 -2
  10. package/dist/v2/directives/index.d.ts +2 -0
  11. package/dist/v2/dropdown-open-0d314aa4.js +28 -0
  12. package/dist/v2/index.d.ts +1 -0
  13. package/dist/v2/index.js +8 -9
  14. package/dist/v2/index11.js +1 -20
  15. package/dist/v2/index12.js +12 -3
  16. package/dist/v2/index13.js +2 -3
  17. package/dist/v2/index14.js +5 -11
  18. package/dist/v2/index15.js +14 -5
  19. package/dist/v2/index16.js +19 -4
  20. package/dist/v2/index17.js +4 -28
  21. package/dist/v2/index18.js +7 -3
  22. package/dist/v2/index19.js +23 -5
  23. package/dist/v2/index2.js +8 -9
  24. package/dist/v2/index20.js +21 -25
  25. package/dist/v2/index21.js +18 -21
  26. package/dist/v2/index22.js +2 -20
  27. package/dist/v2/index23.js +4 -2
  28. package/dist/v2/index24.js +1 -2
  29. package/dist/v2/index25.js +2 -1
  30. package/dist/v2/index26.js +2 -2
  31. package/dist/v2/index27.js +7 -4
  32. package/dist/v2/index28.js +2 -6
  33. package/dist/v2/index29.js +3 -3
  34. package/dist/v2/index30.js +10 -3
  35. package/dist/v2/index31.js +12 -9
  36. package/dist/v2/index32.js +1 -11
  37. package/dist/v2/index33.js +1 -1
  38. package/dist/v2/index34.js +16 -1
  39. package/dist/v2/index35.js +17 -17
  40. package/dist/v2/index36.js +17 -17
  41. package/dist/v2/index37.js +1 -16
  42. package/dist/v2/index38.js +17 -1
  43. package/dist/v2/index39.js +22 -18
  44. package/dist/v2/index40.js +2 -22
  45. package/dist/v2/index41.js +3 -3
  46. package/dist/v2/index42.js +1 -1
  47. package/dist/v2/index43.js +20 -3
  48. package/dist/v2/index44.js +7 -1
  49. package/dist/v2/index45.js +1 -24
  50. package/dist/v2/index46.js +3 -3
  51. package/dist/v2/index47.js +2 -1
  52. package/dist/v2/index48.js +9 -2
  53. package/dist/v2/index49.js +17 -10
  54. package/dist/v2/index50.js +13 -17
  55. package/dist/v2/index51.js +14 -13
  56. package/dist/v2/index52.js +13 -14
  57. package/dist/v2/index53.js +15 -12
  58. package/dist/v2/index54.js +1 -16
  59. package/dist/v2/index55.js +6 -2
  60. package/dist/v2/index56.js +5 -1
  61. package/dist/v2/index57.js +3 -10
  62. package/dist/v2/index58.js +4 -2
  63. package/dist/v2/index59.js +3 -5
  64. package/dist/v2/index60.js +1 -2
  65. package/dist/v2/index61.js +5 -2
  66. package/dist/v2/index62.js +18 -3
  67. package/dist/v2/index63.js +15 -18
  68. package/dist/v2/index64.js +24 -15
  69. package/dist/v2/index65.js +4 -25
  70. package/dist/v2/index66.js +1 -2
  71. package/dist/v2/index67.js +4 -3
  72. package/dist/v2/index68.js +4 -3
  73. package/dist/v2/index69.js +10 -3
  74. package/dist/v2/index70.js +6 -3
  75. package/dist/v2/index71.js +4 -4
  76. package/dist/v2/index72.js +6 -15
  77. package/dist/v2/index73.js +2 -2
  78. package/dist/v2/index74.js +3 -6
  79. package/dist/v2/index75.js +3 -4
  80. package/dist/v2/index76.js +2 -1
  81. package/dist/v2/index77.js +14 -2
  82. package/dist/v2/index78.js +10 -2
  83. package/dist/v2/index79.js +4 -5
  84. package/dist/v2/index80.js +2 -12
  85. package/dist/v2/index81.js +2 -14
  86. package/dist/v2/index82.js +3 -2
  87. package/dist/v2/index83.js +8 -2
  88. package/dist/v2/index84.js +20 -2
  89. package/dist/v2/index85.js +18 -8
  90. package/dist/v2/index86.js +1 -21
  91. package/dist/v2/index87.js +16 -17
  92. package/dist/v2/index88.js +1 -1
  93. package/dist/v2/index89.js +9 -17
  94. package/dist/v2/index90.js +12 -2
  95. package/dist/v2/index91.js +1 -10
  96. package/dist/v2/index92.js +6 -12
  97. package/dist/v2/index93.js +1 -5
  98. package/dist/v3/{OrConfirm-9990d64a.js → OrConfirm-a9d3f157.js} +1 -1
  99. package/dist/v3/{OrInlineInput-bc5fa87a.js → OrInlineInput-8f473205.js} +3 -5
  100. package/dist/v3/{OrInlineTextarea-c433b451.js → OrInlineTextarea-86f4506d.js} +3 -5
  101. package/dist/v3/{OrInput-2b05a69c.js → OrInput-f51916d4.js} +3 -5
  102. package/dist/v3/{OrSearch-1272c3df.js → OrSearch-e27cadbf.js} +1 -1
  103. package/dist/v3/{OrSelect-529b4567.js → OrSelect-9d821ef2.js} +13 -35
  104. package/dist/v3/{OrTextarea-98895b2a.js → OrTextarea-09aa33dc.js} +4 -6
  105. package/dist/v3/components/index.d.ts +0 -2
  106. package/dist/v3/components/or-select-v3/OrSelect.vue.d.ts +2 -2
  107. package/dist/v3/directives/index.d.ts +2 -0
  108. package/dist/v3/dropdown-open-0d314aa4.js +28 -0
  109. package/dist/v3/index.d.ts +1 -0
  110. package/dist/v3/index.js +8 -9
  111. package/dist/v3/index11.js +1 -19
  112. package/dist/v3/index12.js +11 -3
  113. package/dist/v3/index13.js +2 -3
  114. package/dist/v3/index14.js +4 -9
  115. package/dist/v3/index15.js +11 -4
  116. package/dist/v3/index16.js +17 -3
  117. package/dist/v3/index17.js +4 -25
  118. package/dist/v3/index18.js +6 -3
  119. package/dist/v3/index19.js +20 -5
  120. package/dist/v3/index2.js +8 -9
  121. package/dist/v3/index20.js +20 -21
  122. package/dist/v3/index21.js +15 -20
  123. package/dist/v3/index22.js +1 -16
  124. package/dist/v3/index23.js +4 -2
  125. package/dist/v3/index24.js +1 -2
  126. package/dist/v3/index25.js +2 -1
  127. package/dist/v3/index26.js +2 -2
  128. package/dist/v3/index27.js +6 -4
  129. package/dist/v3/index28.js +2 -5
  130. package/dist/v3/index29.js +3 -3
  131. package/dist/v3/index30.js +9 -3
  132. package/dist/v3/index31.js +11 -8
  133. package/dist/v3/index32.js +1 -10
  134. package/dist/v3/index33.js +1 -1
  135. package/dist/v3/index34.js +15 -1
  136. package/dist/v3/index35.js +14 -16
  137. package/dist/v3/index36.js +16 -14
  138. package/dist/v3/index37.js +2 -16
  139. package/dist/v3/index38.js +17 -2
  140. package/dist/v3/index39.js +17 -17
  141. package/dist/v3/index40.js +1 -16
  142. package/dist/v3/index41.js +3 -3
  143. package/dist/v3/index42.js +1 -1
  144. package/dist/v3/index43.js +16 -3
  145. package/dist/v3/index44.js +7 -1
  146. package/dist/v3/index45.js +1 -20
  147. package/dist/v3/index46.js +3 -3
  148. package/dist/v3/index47.js +2 -1
  149. package/dist/v3/index48.js +8 -2
  150. package/dist/v3/index49.js +14 -9
  151. package/dist/v3/index50.js +12 -14
  152. package/dist/v3/index51.js +11 -12
  153. package/dist/v3/index52.js +12 -11
  154. package/dist/v3/index53.js +11 -11
  155. package/dist/v3/index54.js +1 -12
  156. package/dist/v3/index55.js +5 -2
  157. package/dist/v3/index56.js +5 -1
  158. package/dist/v3/index57.js +3 -9
  159. package/dist/v3/index58.js +4 -2
  160. package/dist/v3/index59.js +3 -5
  161. package/dist/v3/index60.js +1 -2
  162. package/dist/v3/index61.js +4 -1
  163. package/dist/v3/index62.js +17 -3
  164. package/dist/v3/index63.js +14 -17
  165. package/dist/v3/index64.js +22 -13
  166. package/dist/v3/index65.js +3 -23
  167. package/dist/v3/index66.js +1 -2
  168. package/dist/v3/index67.js +4 -3
  169. package/dist/v3/index68.js +4 -3
  170. package/dist/v3/index69.js +9 -3
  171. package/dist/v3/index70.js +4 -3
  172. package/dist/v3/index71.js +4 -4
  173. package/dist/v3/index72.js +5 -11
  174. package/dist/v3/index73.js +2 -2
  175. package/dist/v3/index74.js +2 -5
  176. package/dist/v3/index75.js +3 -4
  177. package/dist/v3/index76.js +2 -1
  178. package/dist/v3/index77.js +13 -2
  179. package/dist/v3/index78.js +9 -2
  180. package/dist/v3/index79.js +4 -5
  181. package/dist/v3/index80.js +1 -11
  182. package/dist/v3/index81.js +1 -13
  183. package/dist/v3/index82.js +3 -1
  184. package/dist/v3/index83.js +8 -1
  185. package/dist/v3/index84.js +17 -2
  186. package/dist/v3/index85.js +14 -7
  187. package/dist/v3/index86.js +1 -18
  188. package/dist/v3/index87.js +15 -14
  189. package/dist/v3/index88.js +1 -1
  190. package/dist/v3/index89.js +6 -15
  191. package/dist/v3/index90.js +11 -2
  192. package/dist/v3/index91.js +1 -8
  193. package/dist/v3/index92.js +6 -11
  194. package/dist/v3/index93.js +1 -5
  195. package/package.json +3 -2
  196. package/src/components/index.ts +0 -2
  197. package/src/components/or-inline-input-v3/OrInlineInput.vue +10 -12
  198. package/src/components/or-inline-textarea-v3/OrInlineTextarea.vue +10 -12
  199. package/src/components/or-input-v3/OrInput.vue +10 -12
  200. package/src/components/or-select-v3/OrSelect.vue +12 -11
  201. package/src/components/or-textarea-v3/OrTextarea.vue +10 -12
  202. package/src/directives/index.ts +2 -0
  203. package/src/index.ts +1 -0
  204. package/dist/v2/OrCardCollection-89a315ed.js +0 -227
  205. package/dist/v2/OrSortHeader-a6004b24.js +0 -133
  206. package/dist/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -17
  207. package/dist/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +0 -98
  208. package/dist/v2/components/or-card-collection-v3/index.d.ts +0 -3
  209. package/dist/v2/components/or-card-collection-v3/props.d.ts +0 -4
  210. package/dist/v2/components/or-card-collection-v3/styles.d.ts +0 -6
  211. package/dist/v2/components/or-card-collection-v3/types.d.ts +0 -7
  212. package/dist/v2/components/or-sort-header-v3/OrSortHeader.stories3.d.ts +0 -12
  213. package/dist/v2/components/or-sort-header-v3/OrSortHeader.vue.d.ts +0 -57
  214. package/dist/v2/components/or-sort-header-v3/index.d.ts +0 -2
  215. package/dist/v2/components/or-sort-header-v3/styles.d.ts +0 -1
  216. package/dist/v2/components/or-sort-header-v3/types.d.ts +0 -4
  217. package/dist/v2/index94.js +0 -3
  218. package/dist/v3/OrCardCollection-85a00f6c.js +0 -198
  219. package/dist/v3/OrSortHeader-5eba50cd.js +0 -104
  220. package/dist/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +0 -17
  221. package/dist/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +0 -98
  222. package/dist/v3/components/or-card-collection-v3/index.d.ts +0 -3
  223. package/dist/v3/components/or-card-collection-v3/props.d.ts +0 -4
  224. package/dist/v3/components/or-card-collection-v3/styles.d.ts +0 -6
  225. package/dist/v3/components/or-card-collection-v3/types.d.ts +0 -7
  226. package/dist/v3/components/or-sort-header-v3/OrSortHeader.stories3.d.ts +0 -12
  227. package/dist/v3/components/or-sort-header-v3/OrSortHeader.vue.d.ts +0 -57
  228. package/dist/v3/components/or-sort-header-v3/index.d.ts +0 -2
  229. package/dist/v3/components/or-sort-header-v3/styles.d.ts +0 -1
  230. package/dist/v3/components/or-sort-header-v3/types.d.ts +0 -4
  231. package/dist/v3/index94.js +0 -3
  232. package/src/components/or-card-collection-v3/OrCardCollection.docs.mdx +0 -3
  233. package/src/components/or-card-collection-v3/OrCardCollection.stories3.ts +0 -162
  234. package/src/components/or-card-collection-v3/OrCardCollection.vue +0 -210
  235. package/src/components/or-card-collection-v3/index.ts +0 -3
  236. package/src/components/or-card-collection-v3/props.ts +0 -4
  237. package/src/components/or-card-collection-v3/styles.ts +0 -53
  238. package/src/components/or-card-collection-v3/types.ts +0 -8
  239. package/src/components/or-sort-header-v3/OrSortHeader.docs.mdx +0 -3
  240. package/src/components/or-sort-header-v3/OrSortHeader.stories3.ts +0 -132
  241. package/src/components/or-sort-header-v3/OrSortHeader.vue +0 -111
  242. package/src/components/or-sort-header-v3/index.ts +0 -2
  243. package/src/components/or-sort-header-v3/styles.ts +0 -23
  244. package/src/components/or-sort-header-v3/types.ts +0 -4
@@ -70,18 +70,16 @@
70
70
  </OrInputBox>
71
71
 
72
72
  <template v-if="!invalid">
73
- <template v-if="hint || maxLength">
74
- <OrHint :disabled="disabled">
75
- {{ hint }}
76
-
77
- <template
78
- v-if="maxLength"
79
- v-slot:addon
80
- >
81
- {{ currentLength }} / {{ maxLength }}
82
- </template>
83
- </OrHint>
84
- </template>
73
+ <OrHint :disabled="disabled">
74
+ {{ hint }}
75
+
76
+ <template
77
+ v-if="maxLength"
78
+ v-slot:addon
79
+ >
80
+ {{ currentLength }} / {{ maxLength }}
81
+ </template>
82
+ </OrHint>
85
83
  </template>
86
84
 
87
85
  <template v-else>
@@ -21,7 +21,7 @@
21
21
 
22
22
  <OrInputBox
23
23
  ref="inputBox"
24
- v-dropdown-open="open"
24
+ v-dropdown-open="toggle"
25
25
  v-dropdown-close="close"
26
26
  :class="[popoverState === 'open' && 'rounded-b-0']"
27
27
  :size="size"
@@ -193,11 +193,9 @@
193
193
  </OrInputBox>
194
194
 
195
195
  <template v-if="!invalid">
196
- <template v-if="hint">
197
- <OrHint :disabled="disabled">
198
- {{ hint }}
199
- </OrHint>
200
- </template>
196
+ <OrHint :disabled="disabled">
197
+ {{ hint }}
198
+ </OrHint>
201
199
  </template>
202
200
 
203
201
  <template v-else>
@@ -210,8 +208,7 @@
210
208
 
211
209
  <script lang="ts">
212
210
  import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, watch } from 'vue-demi';
213
- import { DropdownClose } from '../../directives/dropdown-close';
214
- import { DropdownOpen } from '../../directives/dropdown-open';
211
+ import { DropdownClose, DropdownOpen } from '../../directives';
215
212
  import { useClassAttribute, useOverflow } from '../../hooks';
216
213
  import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
217
214
  import { OrErrorV3 as OrError } from '../or-error-v3';
@@ -467,12 +464,16 @@ export default defineComponent({
467
464
  });
468
465
 
469
466
  // Methods
470
- function open(): void {
467
+ function toggle(): void {
471
468
  if (!readonly.value && !props.disabled) {
472
469
  const popoverInstance = popover.value;
473
470
 
474
471
  if (popoverInstance) {
475
- (popoverInstance.open as () => void)();
472
+ if (popoverState.value === 'open') {
473
+ (popoverInstance.close as () => void)();
474
+ } else {
475
+ (popoverInstance.open as () => void)();
476
+ }
476
477
  }
477
478
  }
478
479
  }
@@ -517,7 +518,7 @@ export default defineComponent({
517
518
  internalSearchOptions,
518
519
  resolvedSearchOptions,
519
520
  groupedOptions,
520
- open,
521
+ toggle,
521
522
  close,
522
523
  deselect,
523
524
  innerItems,
@@ -40,18 +40,16 @@
40
40
  </OrInputBox>
41
41
 
42
42
  <template v-if="!invalid">
43
- <template v-if="hint || maxLength">
44
- <OrHint :disabled="disabled">
45
- {{ hint }}
46
-
47
- <template
48
- v-if="maxLength"
49
- v-slot:addon
50
- >
51
- {{ currentLength }} / {{ maxLength }}
52
- </template>
53
- </OrHint>
54
- </template>
43
+ <OrHint :disabled="disabled">
44
+ {{ hint }}
45
+
46
+ <template
47
+ v-if="maxLength"
48
+ v-slot:addon
49
+ >
50
+ {{ currentLength }} / {{ maxLength }}
51
+ </template>
52
+ </OrHint>
55
53
  </template>
56
54
 
57
55
  <template v-else>
@@ -0,0 +1,2 @@
1
+ export * from './dropdown-close';
2
+ export * from './dropdown-open';
package/src/index.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './components';
2
+ export * from './directives';
2
3
  export * from './hooks';
3
4
  export * from './utils/functions/text';
@@ -1,227 +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 { _ as __vue_component__$1 } from './OrCard-1d904e72.js';
5
- import { _ as __vue_component__$2 } from './OrIconButton-1b34f3fa.js';
6
- import { _ as __vue_component__$3 } from './OrInput-0508c3fb.js';
7
- import { _ as __vue_component__$4 } from './OrSortHeader-a6004b24.js';
8
- import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
9
-
10
- var CardCollectionView;
11
- (function (CardCollectionView) {
12
- CardCollectionView["Grid"] = "grid";
13
- CardCollectionView["List"] = "list";
14
- })(CardCollectionView || (CardCollectionView = {}));
15
-
16
- const CardCollectionRoot = [
17
- // Layout
18
- 'flex flex-col',
19
- // Spacing
20
- 'gap-md'];
21
- const CardCollectionToolbar = [
22
- // Layout
23
- 'flex', 'justify-between', 'items-center',
24
- // Typography
25
- 'typography-body-2-regular',
26
- // Theme
27
- 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
28
- const CardCollectionToolbarPanel = [
29
- // Layout
30
- 'flex', 'justify-normal', 'items-center',
31
- // Spacing
32
- 'gap-sm'];
33
- const CardCollectionContent = [
34
- // Layout
35
- 'grid',
36
- // Spacing
37
- 'gap-sm md:gap-md'];
38
- const CardCollectionContentViews = {
39
- 'grid': [
40
- // Layout
41
- 'sm:grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-4', 'xl:grid-cols-6'],
42
- 'list': []
43
- };
44
-
45
- var script = defineComponent({
46
- name: 'OrCardCollection',
47
- components: {
48
- OrCard: __vue_component__$1,
49
- OrIconButton: __vue_component__$2,
50
- OrInput: __vue_component__$3,
51
- OrSortHeader: __vue_component__$4
52
- },
53
- inheritAttrs: false,
54
- props: {
55
- items: {
56
- type: Array,
57
- default: []
58
- },
59
- view: {
60
- type: String,
61
- default: CardCollectionView.Grid
62
- },
63
- sort: {
64
- type: Object,
65
- default: undefined
66
- },
67
- sortHeaders: {
68
- type: Array,
69
- default: undefined
70
- },
71
- search: {
72
- type: String,
73
- default: undefined
74
- }
75
- },
76
- emits: ['viewChange', 'sortChange', 'searchChange'],
77
- expose: ['root'],
78
- setup(props, context) {
79
- // Refs
80
- const root = ref();
81
- // Styles
82
- const classAttribute = useClassAttribute();
83
- const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
84
- const toolbarStyles = computed(() => [...CardCollectionToolbar]);
85
- const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
86
- const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[proxyView.value]]);
87
- // State
88
- const proxyView = ref(props.view);
89
- const proxySort = ref(props.sort);
90
- const proxySearch = ref(props.search);
91
- // Methods
92
- function switchToGridView() {
93
- proxyView.value = CardCollectionView.Grid;
94
- }
95
- function switchToListView() {
96
- proxyView.value = CardCollectionView.List;
97
- }
98
- // Effects
99
- watch(() => props.view, value => {
100
- proxyView.value = value;
101
- });
102
- watch(proxyView, value => {
103
- context.emit('viewChange', value);
104
- });
105
- watch(() => props.sort, value => {
106
- proxySort.value = value;
107
- });
108
- watch(proxySort, value => {
109
- context.emit('sortChange', value);
110
- });
111
- watch(() => props.search, value => {
112
- proxySearch.value = value;
113
- });
114
- watch(proxySearch, value => {
115
- context.emit('searchChange', value);
116
- });
117
- return {
118
- root,
119
- rootStyles,
120
- toolbarStyles,
121
- toolbarPanelStyles,
122
- contentStyles,
123
- proxyView,
124
- proxySort,
125
- proxySearch,
126
- switchToGridView,
127
- switchToListView
128
- };
129
- }
130
- });
131
-
132
- /* script */
133
- const __vue_script__ = script;
134
-
135
- /* template */
136
- var __vue_render__ = function () {
137
- var _vm = this;
138
- var _h = _vm.$createElement;
139
- var _c = _vm._self._c || _h;
140
- return _c('div', _vm._b({
141
- ref: "root",
142
- class: _vm.rootStyles
143
- }, 'div', _vm.$attrs, false), [_c('div', {
144
- class: _vm.toolbarStyles
145
- }, [_c('div', {
146
- class: _vm.toolbarPanelStyles
147
- }, [_vm.sortHeaders ? _vm._l(_vm.sortHeaders, function (header) {
148
- return _c('OrSortHeader', {
149
- key: header.value,
150
- attrs: {
151
- "input-value": header.value
152
- },
153
- model: {
154
- value: _vm.proxySort,
155
- callback: function ($$v) {
156
- _vm.proxySort = $$v;
157
- },
158
- expression: "proxySort"
159
- }
160
- }, [_vm._v("\n " + _vm._s(header.label) + "\n ")]);
161
- }) : _vm._e()], 2), _vm._v(" "), _c('div', {
162
- class: _vm.toolbarPanelStyles
163
- }, [_c('OrInput', {
164
- attrs: {
165
- "type": 'search',
166
- "placeholder": 'Search',
167
- "size": 's'
168
- },
169
- model: {
170
- value: _vm.proxySearch,
171
- callback: function ($$v) {
172
- _vm.proxySearch = $$v;
173
- },
174
- expression: "proxySearch"
175
- }
176
- }), _vm._v(" "), _c('OrIconButton', {
177
- attrs: {
178
- "icon": 'grid_view'
179
- },
180
- on: {
181
- "click": function ($event) {
182
- return _vm.switchToGridView();
183
- }
184
- }
185
- }), _vm._v(" "), _c('OrIconButton', {
186
- attrs: {
187
- "icon": 'view_list'
188
- },
189
- on: {
190
- "click": function ($event) {
191
- return _vm.switchToListView();
192
- }
193
- }
194
- }), _vm._v(" "), _vm._t("addon")], 2)]), _vm._v(" "), _c('div', {
195
- class: _vm.contentStyles
196
- }, [_vm.proxyView === 'grid' ? _vm._l(_vm.items, function (item) {
197
- return _c('OrCard', {
198
- key: item.id
199
- }, [_vm._t("gridItem", null, null, item)], 2);
200
- }) : _vm._e(), _vm._v(" "), _vm.proxyView === 'list' ? _vm._l(_vm.items, function (item) {
201
- return _c('OrCard', {
202
- key: item.id
203
- }, [_vm._t("listItem", null, null, item)], 2);
204
- }) : _vm._e()], 2)]);
205
- };
206
- var __vue_staticRenderFns__ = [];
207
-
208
- /* style */
209
- const __vue_inject_styles__ = undefined;
210
- /* scoped */
211
- const __vue_scope_id__ = undefined;
212
- /* module identifier */
213
- const __vue_module_identifier__ = undefined;
214
- /* functional template */
215
- const __vue_is_functional_template__ = false;
216
- /* style inject */
217
-
218
- /* style inject SSR */
219
-
220
- /* style inject shadow dom */
221
-
222
- const __vue_component__ = /*#__PURE__*/normalizeComponent({
223
- render: __vue_render__,
224
- staticRenderFns: __vue_staticRenderFns__
225
- }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
226
-
227
- export { CardCollectionView as C, __vue_component__ as _ };
@@ -1,133 +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 { _ as __vue_component__$1 } from './OrIcon-124f3bad.js';
5
- import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
6
-
7
- const SortHeaderRoot = [
8
- // Layout
9
- 'inline-flex', 'justify-normal', 'items-center',
10
- // Interactivity
11
- 'interactivity-auto',
12
- // Typography
13
- 'typography-caption-regular',
14
- // Typography (activated)
15
- 'activated:typography-caption-semibold',
16
- // Theme
17
- 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
18
- // Theme (activated)
19
- 'activated:theme-foreground-default', 'dark:activated:theme-foreground-default-dark'];
20
-
21
- var script = defineComponent({
22
- name: 'OrSortHeader',
23
- components: {
24
- OrIcon: __vue_component__$1
25
- },
26
- inheritAttrs: false,
27
- props: {
28
- modelValue: {
29
- type: Object,
30
- default: undefined
31
- },
32
- value: {
33
- type: Object,
34
- default: undefined
35
- },
36
- inputValue: {
37
- type: String,
38
- required: true
39
- }
40
- },
41
- emits: ['update:modelValue', 'input', 'focus', 'blur'],
42
- expose: ['root'],
43
- setup(props, context) {
44
- // Refs
45
- const root = ref();
46
- // Styles
47
- const classAttribute = useClassAttribute();
48
- const rootStyles = computed(() => ['or-sort-header', ...SortHeaderRoot, classAttribute.value]);
49
- // State
50
- const proxyModelValue = computed({
51
- get: () => {
52
- var _a;
53
- return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
54
- },
55
-
56
- set: value => {
57
- context.emit('input', value);
58
- context.emit('update:modelValue', value);
59
- }
60
- });
61
- const activated = computed(() => {
62
- var _a;
63
- return ((_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.column) === props.inputValue;
64
- });
65
- // Methods
66
- function toggleDirection() {
67
- var _a;
68
- proxyModelValue.value = {
69
- column: props.inputValue,
70
- direction: ((_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.direction) === 'asc' ? 'desc' : 'asc'
71
- };
72
- }
73
- return {
74
- root,
75
- rootStyles,
76
- proxyModelValue,
77
- activated,
78
- toggleDirection
79
- };
80
- }
81
- });
82
-
83
- /* script */
84
- const __vue_script__ = script;
85
-
86
- /* template */
87
- var __vue_render__ = function () {
88
- var _vm = this;
89
- var _h = _vm.$createElement;
90
- var _c = _vm._self._c || _h;
91
- return _c('div', _vm._b({
92
- ref: "root",
93
- class: _vm.rootStyles,
94
- attrs: {
95
- "activated": _vm.activated ? '' : null
96
- },
97
- on: {
98
- "click": function ($event) {
99
- $event.stopPropagation();
100
- return _vm.toggleDirection();
101
- }
102
- }
103
- }, 'div', _vm.$attrs, false), [_vm._t("default"), _vm._v(" "), _vm.activated ? [_c('OrIcon', {
104
- class: {
105
- 'rotate-180': _vm.proxyModelValue.direction === 'asc'
106
- },
107
- attrs: {
108
- "icon": 'arrow_downward'
109
- }
110
- })] : _vm._e()], 2);
111
- };
112
- var __vue_staticRenderFns__ = [];
113
-
114
- /* style */
115
- const __vue_inject_styles__ = undefined;
116
- /* scoped */
117
- const __vue_scope_id__ = undefined;
118
- /* module identifier */
119
- const __vue_module_identifier__ = undefined;
120
- /* functional template */
121
- const __vue_is_functional_template__ = false;
122
- /* style inject */
123
-
124
- /* style inject SSR */
125
-
126
- /* style inject shadow dom */
127
-
128
- const __vue_component__ = /*#__PURE__*/normalizeComponent({
129
- render: __vue_render__,
130
- staticRenderFns: __vue_staticRenderFns__
131
- }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
132
-
133
- export { __vue_component__ as _ };
@@ -1,17 +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>)>;
13
- export declare const WithSorting: 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, {
14
- [x: string]: ((...args: any[]) => any) | null;
15
- } | string[], {} & {}, {
16
- [x: number]: string;
17
- } | {}, true>)>;
@@ -1,98 +0,0 @@
1
- import { PropType } from 'vue-demi';
2
- import { SortHeaderModel } from '../or-sort-header-v3';
3
- import { CardCollectionView } from './props';
4
- import { CardCollectionItem, CardCollectionSortHeader } from './types';
5
- declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
6
- root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
7
- rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
8
- toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
9
- toolbarPanelStyles: import("@vue/composition-api").ComputedRef<string[]>;
10
- contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
11
- proxyView: import("@vue/composition-api").Ref<CardCollectionView>;
12
- proxySort: import("@vue/composition-api").Ref<{
13
- column: string;
14
- direction: "asc" | "desc";
15
- }>;
16
- proxySearch: import("@vue/composition-api").Ref<string>;
17
- switchToGridView: () => void;
18
- switchToListView: () => void;
19
- }> & import("@vue/composition-api").Data, {}, {}, {
20
- items: {
21
- type: PropType<CardCollectionItem[]>;
22
- default: CardCollectionItem[];
23
- };
24
- view: {
25
- type: PropType<CardCollectionView>;
26
- default: CardCollectionView;
27
- };
28
- sort: {
29
- type: PropType<SortHeaderModel>;
30
- default: undefined;
31
- };
32
- sortHeaders: {
33
- type: PropType<CardCollectionSortHeader[]>;
34
- default: undefined;
35
- };
36
- search: {
37
- type: StringConstructor;
38
- default: undefined;
39
- };
40
- }, import("@vue/composition-api").ExtractPropTypes<{
41
- items: {
42
- type: PropType<CardCollectionItem[]>;
43
- default: CardCollectionItem[];
44
- };
45
- view: {
46
- type: PropType<CardCollectionView>;
47
- default: CardCollectionView;
48
- };
49
- sort: {
50
- type: PropType<SortHeaderModel>;
51
- default: undefined;
52
- };
53
- sortHeaders: {
54
- type: PropType<CardCollectionSortHeader[]>;
55
- default: undefined;
56
- };
57
- search: {
58
- type: StringConstructor;
59
- default: undefined;
60
- };
61
- }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
62
- sort: SortHeaderModel;
63
- items: CardCollectionItem[];
64
- view: CardCollectionView;
65
- sortHeaders: CardCollectionSortHeader[];
66
- search: string;
67
- } & {} & {
68
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
69
- }, import("@vue/composition-api").ShallowUnwrapRef<{
70
- root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
71
- rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
72
- toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
73
- toolbarPanelStyles: import("@vue/composition-api").ComputedRef<string[]>;
74
- contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
75
- proxyView: import("@vue/composition-api").Ref<CardCollectionView>;
76
- proxySort: import("@vue/composition-api").Ref<{
77
- column: string;
78
- direction: "asc" | "desc";
79
- }>;
80
- proxySearch: import("@vue/composition-api").Ref<string>;
81
- switchToGridView: () => void;
82
- switchToListView: () => void;
83
- }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
84
- sort: SortHeaderModel;
85
- items: CardCollectionItem[];
86
- view: CardCollectionView;
87
- sortHeaders: CardCollectionSortHeader[];
88
- search: string;
89
- } & {} & {
90
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
91
- }, {
92
- sort: SortHeaderModel;
93
- items: CardCollectionItem[];
94
- view: CardCollectionView;
95
- sortHeaders: CardCollectionSortHeader[];
96
- search: string;
97
- }, true>);
98
- export default _default;
@@ -1,3 +0,0 @@
1
- export { default as OrCardCollectionV3 } from './OrCardCollection.vue';
2
- export * from './props';
3
- export * from './types';
@@ -1,4 +0,0 @@
1
- export declare enum CardCollectionView {
2
- Grid = "grid",
3
- List = "list"
4
- }
@@ -1,6 +0,0 @@
1
- import { CardCollectionView } from './props';
2
- export declare const CardCollectionRoot: string[];
3
- export declare const CardCollectionToolbar: string[];
4
- export declare const CardCollectionToolbarPanel: string[];
5
- export declare const CardCollectionContent: string[];
6
- export declare const CardCollectionContentViews: Record<CardCollectionView, string[]>;
@@ -1,7 +0,0 @@
1
- export interface CardCollectionItem {
2
- id: string;
3
- }
4
- export interface CardCollectionSortHeader {
5
- value: string;
6
- label: string;
7
- }
@@ -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>)>;