@onereach/ui-components 2.69.2-beta.2113.0 → 2.69.2-beta.2123.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 (123) hide show
  1. package/dist/bundled/v2/{OrAvatar-ae61bfb9.js → OrAvatar-2fa559e1.js} +15 -41
  2. package/dist/bundled/v2/{OrCard-58a1ba3e.js → OrCard-29116e1f.js} +2 -2
  3. package/dist/bundled/v2/OrCardCollection-773ae0db.js +346 -0
  4. package/dist/bundled/v2/{OrSearch-9d402f56.js → OrSearch-a11b3621.js} +9 -3
  5. package/dist/bundled/v2/{OrSortHeader-396e6a7c.js → OrSortHeader-9932d28f.js} +2 -2
  6. package/dist/bundled/v2/components/index.js +5 -5
  7. package/dist/bundled/v2/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  8. package/dist/bundled/v2/components/or-avatar-v3/OrAvatar.vue.d.ts +0 -11
  9. package/dist/bundled/v2/components/or-avatar-v3/index.js +1 -2
  10. package/dist/bundled/v2/components/or-avatar-v3/props.d.ts +1 -2
  11. package/dist/bundled/v2/components/or-avatar-v3/styles.d.ts +0 -2
  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 +67 -42
  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/index.js +7 -4
  16. package/dist/bundled/v2/components/or-card-collection-v3/props.d.ts +5 -1
  17. package/dist/bundled/v2/components/or-card-collection-v3/styles.d.ts +2 -2
  18. package/dist/bundled/v2/components/or-card-collection-v3/types.d.ts +8 -3
  19. package/dist/bundled/v2/components/or-card-v3/index.js +1 -1
  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-sort-header-v3/index.js +1 -1
  23. package/dist/bundled/v2/index.js +6 -6
  24. package/dist/bundled/v3/{OrAvatar.vue_vue_type_script_lang-0426862b.js → OrAvatar.vue_vue_type_script_lang-22e46ce1.js} +13 -35
  25. package/dist/bundled/v3/OrButton-8ab33d9d.js +33 -0
  26. package/dist/bundled/v3/OrCardCollection.vue_vue_type_script_lang-b983bda7.js +228 -0
  27. package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-289b5600.js → OrConfirm.vue_vue_type_script_lang-85472b12.js} +6 -36
  28. package/dist/bundled/v3/{OrIconButton-1581013c.js → OrIconButton-4bd33e3c.js} +1 -1
  29. package/dist/bundled/v3/{OrIconButton.vue_vue_type_script_lang-f6f801ff.js → OrIconButton.vue_vue_type_script_lang-641f6e06.js} +1 -1
  30. package/dist/bundled/v3/{OrInlineInput.vue_vue_type_script_lang-f29483f4.js → OrInlineInput.vue_vue_type_script_lang-3a8189f4.js} +2 -2
  31. package/dist/bundled/v3/{OrInlineTextarea.vue_vue_type_script_lang-cc40af48.js → OrInlineTextarea.vue_vue_type_script_lang-890b97ab.js} +2 -2
  32. package/dist/bundled/v3/OrInput.vue_vue_type_script_lang-f6d793d3.js +2 -2
  33. package/dist/bundled/v3/OrMenu-f26e8e55.js +29 -0
  34. package/dist/bundled/v3/{OrModal.vue_vue_type_script_lang-80a7b906.js → OrModal.vue_vue_type_script_lang-00a477f0.js} +2 -2
  35. package/dist/bundled/v3/OrNotification.vue_vue_type_script_lang-fbb35355.js +2 -2
  36. package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-ed78b21f.js → OrSearch.vue_vue_type_script_lang-0ae8a6dd.js} +8 -2
  37. package/dist/bundled/v3/OrSelect.vue_vue_type_script_lang-15285ce4.js +1 -1
  38. package/dist/bundled/v3/{OrTabs.vue_vue_type_script_lang-919b2021.js → OrTabs.vue_vue_type_script_lang-61b79a5a.js} +10 -36
  39. package/dist/bundled/v3/{OrTag.vue_vue_type_script_lang-dc6a4011.js → OrTag.vue_vue_type_script_lang-92d9fb12.js} +2 -2
  40. package/dist/bundled/v3/{OrToastContainer-7c3c0b12.js → OrToastContainer-afb51e5d.js} +1 -1
  41. package/dist/bundled/v3/components/index.js +17 -15
  42. package/dist/bundled/v3/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  43. package/dist/bundled/v3/components/or-avatar-v3/OrAvatar.vue.d.ts +0 -11
  44. package/dist/bundled/v3/components/or-avatar-v3/index.js +1 -3
  45. package/dist/bundled/v3/components/or-avatar-v3/props.d.ts +1 -2
  46. package/dist/bundled/v3/components/or-avatar-v3/styles.d.ts +0 -2
  47. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +5 -0
  48. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +67 -42
  49. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts +35 -0
  50. package/dist/bundled/v3/components/or-card-collection-v3/index.js +13 -6
  51. package/dist/bundled/v3/components/or-card-collection-v3/props.d.ts +5 -1
  52. package/dist/bundled/v3/components/or-card-collection-v3/styles.d.ts +2 -2
  53. package/dist/bundled/v3/components/or-card-collection-v3/types.d.ts +8 -3
  54. package/dist/bundled/v3/components/or-confirm-v3/index.js +4 -3
  55. package/dist/bundled/v3/components/or-icon-button-v3/index.js +1 -1
  56. package/dist/bundled/v3/components/or-inline-input-v3/index.js +3 -3
  57. package/dist/bundled/v3/components/or-inline-textarea-v3/index.js +3 -3
  58. package/dist/bundled/v3/components/or-input-v3/index.js +2 -2
  59. package/dist/bundled/v3/components/or-modal-v3/index.js +3 -3
  60. package/dist/bundled/v3/components/or-notification-v3/index.js +2 -2
  61. package/dist/bundled/v3/components/or-search-v3/OrSearch.vue.d.ts +13 -0
  62. package/dist/bundled/v3/components/or-search-v3/index.js +3 -3
  63. package/dist/bundled/v3/components/or-select-v3/index.js +3 -3
  64. package/dist/bundled/v3/components/or-tabs-v3/index.js +2 -1
  65. package/dist/bundled/v3/components/or-tag-v3/index.js +3 -3
  66. package/dist/bundled/v3/components/or-toast-v3/index.js +4 -4
  67. package/dist/bundled/v3/index.js +339 -314
  68. package/dist/bundled/v3/{types-dcc78caa.js → types-6c5eee23.js} +2 -2
  69. package/dist/esm/v2/{OrAvatar-3d155af3.js → OrAvatar-0afdef36.js} +15 -41
  70. package/dist/esm/v2/OrCardCollection-61c86bfc.js +346 -0
  71. package/dist/esm/v2/{OrSearch-ddb7c1fe.js → OrSearch-62d91301.js} +7 -1
  72. package/dist/esm/v2/components/index.js +3 -3
  73. package/dist/esm/v2/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  74. package/dist/esm/v2/components/or-avatar-v3/OrAvatar.vue.d.ts +0 -11
  75. package/dist/esm/v2/components/or-avatar-v3/index.js +1 -2
  76. package/dist/esm/v2/components/or-avatar-v3/props.d.ts +1 -2
  77. package/dist/esm/v2/components/or-avatar-v3/styles.d.ts +0 -2
  78. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +5 -0
  79. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +67 -42
  80. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollectionView.vue2.vue.d.ts +35 -0
  81. package/dist/esm/v2/components/or-card-collection-v3/index.js +7 -4
  82. package/dist/esm/v2/components/or-card-collection-v3/props.d.ts +5 -1
  83. package/dist/esm/v2/components/or-card-collection-v3/styles.d.ts +2 -2
  84. package/dist/esm/v2/components/or-card-collection-v3/types.d.ts +8 -3
  85. package/dist/esm/v2/components/or-search-v3/OrSearch.vue.d.ts +13 -0
  86. package/dist/esm/v2/components/or-search-v3/index.js +1 -1
  87. package/dist/esm/v2/index.js +3 -3
  88. package/dist/esm/v3/{OrAvatar-53a4429d.js → OrAvatar-ef88d31c.js} +16 -43
  89. package/dist/esm/v3/OrCardCollection-fdc7848b.js +289 -0
  90. package/dist/esm/v3/{OrSearch-cdde55ce.js → OrSearch-aafb93b4.js} +7 -1
  91. package/dist/esm/v3/components/index.js +3 -3
  92. package/dist/esm/v3/components/or-avatar-v3/OrAvatar.stories3.d.ts +1 -1
  93. package/dist/esm/v3/components/or-avatar-v3/OrAvatar.vue.d.ts +0 -11
  94. package/dist/esm/v3/components/or-avatar-v3/index.js +1 -2
  95. package/dist/esm/v3/components/or-avatar-v3/props.d.ts +1 -2
  96. package/dist/esm/v3/components/or-avatar-v3/styles.d.ts +0 -2
  97. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +5 -0
  98. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +67 -42
  99. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollectionView.vue3.vue.d.ts +35 -0
  100. package/dist/esm/v3/components/or-card-collection-v3/index.js +7 -4
  101. package/dist/esm/v3/components/or-card-collection-v3/props.d.ts +5 -1
  102. package/dist/esm/v3/components/or-card-collection-v3/styles.d.ts +2 -2
  103. package/dist/esm/v3/components/or-card-collection-v3/types.d.ts +8 -3
  104. package/dist/esm/v3/components/or-search-v3/OrSearch.vue.d.ts +13 -0
  105. package/dist/esm/v3/components/or-search-v3/index.js +1 -1
  106. package/dist/esm/v3/index.js +3 -3
  107. package/package.json +1 -1
  108. package/src/components/or-avatar-v3/OrAvatar.stories3.ts +7 -9
  109. package/src/components/or-avatar-v3/OrAvatar.vue +2 -22
  110. package/src/components/or-avatar-v3/props.ts +0 -1
  111. package/src/components/or-avatar-v3/styles.ts +11 -49
  112. package/src/components/or-card-collection-v3/OrCardCollection.stories3.ts +230 -30
  113. package/src/components/or-card-collection-v3/OrCardCollection.vue +120 -77
  114. package/src/components/or-card-collection-v3/OrCardCollectionView.vue2.vue +41 -0
  115. package/src/components/or-card-collection-v3/OrCardCollectionView.vue3.vue +42 -0
  116. package/src/components/or-card-collection-v3/props.ts +14 -1
  117. package/src/components/or-card-collection-v3/styles.ts +3 -3
  118. package/src/components/or-card-collection-v3/types.ts +9 -3
  119. package/src/components/or-search-v3/OrSearch.vue +7 -1
  120. package/dist/bundled/v2/OrCardCollection-a9a779ea.js +0 -228
  121. package/dist/bundled/v3/OrCardCollection.vue_vue_type_script_lang-861158b5.js +0 -164
  122. package/dist/esm/v2/OrCardCollection-4f001551.js +0 -227
  123. package/dist/esm/v3/OrCardCollection-5a0febaf.js +0 -198
@@ -1,9 +1,9 @@
1
1
  import { useToggle } from '@vueuse/core';
2
2
  import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, createElementVNode, toDisplayString, withModifiers, onBeforeMount, onBeforeUnmount, nextTick } from 'vue';
3
3
  import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-4d4329cd.js';
4
- import './OrIconButton-1581013c.js';
4
+ import './OrIconButton-4bd33e3c.js';
5
5
  import './OrLoader-c4bbef2f.js';
6
- import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-f6f801ff.js';
6
+ import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-641f6e06.js';
7
7
  import { s as script$3 } from './OrLoader.vue_vue_type_script_lang-5405040c.js';
8
8
  import { s as styleInject } from './style-inject.es-4c6f2515.js';
9
9
  import './OrOverlay.vue_vue_type_script_lang-cb3aad0c.js';
@@ -2,7 +2,6 @@ import { defineComponent, ref, computed, watchPostEffect } from 'vue-demi';
2
2
  import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
3
3
  import '@vueuse/core';
4
4
  import { h as hslToColorString, g as generateHslFromString } from './color-1f348774.js';
5
- import { _ as __vue_component__$1 } from './OrIcon-5e394c62.js';
6
5
  import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
7
6
 
8
7
  var AvatarSize;
@@ -11,7 +10,6 @@ var AvatarSize;
11
10
  AvatarSize["L"] = "l";
12
11
  AvatarSize["M"] = "m";
13
12
  AvatarSize["S"] = "s";
14
- AvatarSize["XS"] = "xs";
15
13
  })(AvatarSize || (AvatarSize = {}));
16
14
  var AvatarColor;
17
15
  (function (AvatarColor) {
@@ -36,19 +34,24 @@ const AvatarImage = [
36
34
  const AvatarRootSizes = {
37
35
  'xl': [
38
36
  // Box
39
- 'w-[80px]', 'h-[80px]'],
37
+ 'w-[80px]', 'h-[80px]',
38
+ // Typography
39
+ 'text-[32px]'],
40
40
  'l': [
41
41
  // Box
42
- 'w-[64px]', 'h-[64px]'],
42
+ 'w-[64px]', 'h-[64px]',
43
+ // Typography
44
+ 'text-[24px]'],
43
45
  'm': [
44
46
  // Box
45
- 'w-[40px]', 'h-[40px]'],
47
+ 'w-[40px]', 'h-[40px]',
48
+ // Typography
49
+ 'text-[16px]'],
46
50
  's': [
47
51
  // Box
48
- 'w-[32px]', 'h-[32px]'],
49
- 'xs': [
50
- // Box
51
- 'w-[24px]', 'h-[24px]']
52
+ 'w-[32px]', 'h-[32px]',
53
+ // Typography
54
+ 'text-[16px]']
52
55
  };
53
56
  const AvatarRootColors = {
54
57
  [AvatarColor.blue]: [
@@ -70,26 +73,9 @@ const AvatarRootColors = {
70
73
  // Theme
71
74
  'text-white', 'dark:text-overlay-dark']
72
75
  };
73
- const AvatarRootAbbreviationSizes = {
74
- 'xl': ['typography-headline-1'],
75
- 'l': ['typography-headline-1'],
76
- 'm': ['typography-body-1-bold'],
77
- 's': ['typography-body-1-bold'],
78
- 'xs': ['typography-caption-semibold']
79
- };
80
- const AvatarRootIconSizes = {
81
- 'xl': ['text-[40px]'],
82
- 'l': ['text-[32px]'],
83
- 'm': ['text-[20px]'],
84
- 's': ['text-[16px]'],
85
- 'xs': ['text-[16px]']
86
- };
87
76
 
88
77
  var script = defineComponent({
89
78
  name: 'OrAvatar',
90
- components: {
91
- OrIcon: __vue_component__$1
92
- },
93
79
  inheritAttrs: false,
94
80
  props: {
95
81
  src: {
@@ -100,10 +86,6 @@ var script = defineComponent({
100
86
  type: String,
101
87
  default: AvatarSize.M
102
88
  },
103
- icon: {
104
- type: String,
105
- default: undefined
106
- },
107
89
  color: {
108
90
  type: String,
109
91
  default: AvatarColor.auto,
@@ -119,12 +101,9 @@ var script = defineComponent({
119
101
  setup(props) {
120
102
  // Refs
121
103
  const root = ref();
122
- const isIcon = computed(() => {
123
- return !props.icon;
124
- });
125
104
  // Styles
126
105
  const classAttribute = useClassAttribute();
127
- const rootStyles = computed(() => ['or-avatar', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], ...(isIcon.value ? AvatarRootAbbreviationSizes[props.size] : AvatarRootIconSizes[props.size]), classAttribute.value]);
106
+ const rootStyles = computed(() => ['or-avatar', ...AvatarRoot, ...AvatarRootSizes[props.size], ...AvatarRootColors[props.color], classAttribute.value]);
128
107
  const imageStyles = computed(() => [...AvatarImage]);
129
108
  // Effects
130
109
  watchPostEffect(() => {
@@ -157,18 +136,13 @@ var __vue_render__ = function () {
157
136
  ref: "root",
158
137
  class: _vm.rootStyles
159
138
  }, 'div', _vm.$attrs, false), [_vm._t("default", function () {
160
- return [_vm.src ? _c('img', {
139
+ return [_c('img', {
161
140
  class: _vm.imageStyles,
162
141
  attrs: {
163
142
  "src": _vm.src,
164
143
  "alt": ''
165
144
  }
166
- }) : _vm.icon ? _c('or-icon', {
167
- attrs: {
168
- "icon": _vm.icon,
169
- "size": "inherit"
170
- }
171
- }) : _vm._e()];
145
+ })];
172
146
  })], 2);
173
147
  };
174
148
  var __vue_staticRenderFns__ = [];
@@ -0,0 +1,346 @@
1
+ import { defineComponent, computed, ref, watch } from 'vue-demi';
2
+ import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
3
+ import '@vueuse/core';
4
+ import { _ as __vue_component__$2 } from './OrIconButton-e17e4944.js';
5
+ import { _ as __vue_component__$4 } from './OrMenu-df27d0ef.js';
6
+ import './OrPopover-9bafbdb4.js';
7
+ import { _ as __vue_component__$5 } from './OrMenuItem-c7f28480.js';
8
+ import { _ as __vue_component__$6 } from './OrIcon-5e394c62.js';
9
+ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
10
+ import { _ as __vue_component__$3 } from './OrButton-357a5756.js';
11
+ import { _ as __vue_component__$7 } from './OrSearch-62d91301.js';
12
+ import './OrInputBox-4d5a318d.js';
13
+
14
+ const CardCollectionRoot = [
15
+ // Layout
16
+ 'layout-column',
17
+ // Spacing
18
+ 'gap-md'];
19
+ const CardCollectionToolbar = [
20
+ // Layout
21
+ 'layout-row justify-between',
22
+ // Typography
23
+ 'typography-body-2-regular',
24
+ // Theme
25
+ 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
26
+ const CardCollectionToolbarPanel = [
27
+ // Layout
28
+ 'layout-row',
29
+ // Spacing
30
+ 'gap-lg+'];
31
+ const CardCollectionContent = [
32
+ // Layout
33
+ 'grid',
34
+ // Spacing
35
+ 'gap-sm md:gap-md'];
36
+ const CardCollectionContentViews = {
37
+ 'grid': [
38
+ // Layout
39
+ 'sm:grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-4', 'xl:grid-cols-6'],
40
+ 'list': []
41
+ };
42
+
43
+ var script$1 = defineComponent({
44
+ name: 'OrCardCollectionView',
45
+ props: {
46
+ items: {
47
+ type: Array,
48
+ default: []
49
+ },
50
+ mode: {
51
+ type: String,
52
+ required: true
53
+ }
54
+ },
55
+ setup(props) {
56
+ const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[props.mode]]);
57
+ return {
58
+ contentStyles
59
+ };
60
+ }
61
+ });
62
+
63
+ /* script */
64
+ const __vue_script__$1 = script$1;
65
+
66
+ /* template */
67
+ var __vue_render__$1 = function () {
68
+ var _vm = this;
69
+ var _h = _vm.$createElement;
70
+ var _c = _vm._self._c || _h;
71
+ return _c('div', {
72
+ class: _vm.contentStyles
73
+ }, [_vm._l(_vm.items, function (item) {
74
+ return _vm._t("item", function () {
75
+ return [_vm._v("\n " + _vm._s(item.key) + "\n ")];
76
+ }, null, {
77
+ item: item,
78
+ mode: _vm.mode
79
+ });
80
+ })], 2);
81
+ };
82
+ var __vue_staticRenderFns__$1 = [];
83
+
84
+ /* style */
85
+ const __vue_inject_styles__$1 = undefined;
86
+ /* scoped */
87
+ const __vue_scope_id__$1 = undefined;
88
+ /* module identifier */
89
+ const __vue_module_identifier__$1 = undefined;
90
+ /* functional template */
91
+ const __vue_is_functional_template__$1 = false;
92
+ /* style inject */
93
+
94
+ /* style inject SSR */
95
+
96
+ /* style inject shadow dom */
97
+
98
+ const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
99
+ render: __vue_render__$1,
100
+ staticRenderFns: __vue_staticRenderFns__$1
101
+ }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
102
+
103
+ var DefaultCardCollectionViews;
104
+ (function (DefaultCardCollectionViews) {
105
+ DefaultCardCollectionViews["Grid"] = "grid";
106
+ DefaultCardCollectionViews["List"] = "list";
107
+ })(DefaultCardCollectionViews || (DefaultCardCollectionViews = {}));
108
+ const gridView = {
109
+ view: DefaultCardCollectionViews.Grid,
110
+ icon: 'grid_view'
111
+ };
112
+ const listView = {
113
+ view: DefaultCardCollectionViews.List,
114
+ icon: 'view_agenda'
115
+ };
116
+ const defaultViewModes = [gridView, listView];
117
+
118
+ var script = defineComponent({
119
+ name: 'OrCardCollection',
120
+ components: {
121
+ OrCardCollectionView: __vue_component__$1,
122
+ OrIconButton: __vue_component__$2,
123
+ OrButton: __vue_component__$3,
124
+ OrMenu: __vue_component__$4,
125
+ OrMenuItem: __vue_component__$5,
126
+ OrIcon: __vue_component__$6,
127
+ OrSearch: __vue_component__$7
128
+ },
129
+ inheritAttrs: false,
130
+ props: {
131
+ items: {
132
+ type: Array,
133
+ default: []
134
+ },
135
+ view: {
136
+ type: String,
137
+ default: gridView.view
138
+ },
139
+ viewModes: {
140
+ type: Array,
141
+ default: () => defaultViewModes
142
+ },
143
+ sort: {
144
+ type: String,
145
+ default: undefined
146
+ },
147
+ sortOptions: {
148
+ type: Array,
149
+ default: () => []
150
+ },
151
+ search: {
152
+ type: String,
153
+ default: ''
154
+ }
155
+ },
156
+ emits: ['viewChange', 'sortChange', 'searchChange'],
157
+ expose: ['root'],
158
+ setup(props, context) {
159
+ // Refs
160
+ const root = ref();
161
+ const sortMenu = ref();
162
+ const sortButton = ref();
163
+ // Styles
164
+ const classAttribute = useClassAttribute();
165
+ const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
166
+ const toolbarStyles = computed(() => [...CardCollectionToolbar]);
167
+ const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
168
+ const sortLabel = computed(() => {
169
+ var _a;
170
+ return (_a = props.sortOptions.find(item => item.value === props.sort)) === null || _a === void 0 ? void 0 : _a.label;
171
+ });
172
+ // State
173
+ const proxyView = ref(props.view);
174
+ const proxySort = ref(props.sort);
175
+ const proxySearch = ref(props.search);
176
+ // Methods
177
+ function switchView(view) {
178
+ proxyView.value = view;
179
+ }
180
+ function handleSort(sort) {
181
+ proxySort.value = sort;
182
+ }
183
+ function handleSearch(search) {
184
+ proxySearch.value = search;
185
+ }
186
+ // Effects
187
+ watch(() => props.view, value => {
188
+ proxyView.value = value;
189
+ });
190
+ watch(proxyView, value => {
191
+ context.emit('viewChange', value);
192
+ });
193
+ watch(() => props.sort, value => {
194
+ proxySort.value = value;
195
+ });
196
+ watch(proxySort, value => {
197
+ context.emit('sortChange', value);
198
+ });
199
+ watch(() => props.search, value => {
200
+ proxySearch.value = value;
201
+ });
202
+ watch(proxySearch, value => {
203
+ context.emit('searchChange', value);
204
+ });
205
+ return {
206
+ root,
207
+ sortMenu,
208
+ sortButton,
209
+ rootStyles,
210
+ toolbarStyles,
211
+ toolbarPanelStyles,
212
+ proxyView,
213
+ proxySort,
214
+ proxySearch,
215
+ sortLabel,
216
+ switchView,
217
+ handleSort,
218
+ handleSearch
219
+ };
220
+ }
221
+ });
222
+
223
+ /* script */
224
+ const __vue_script__ = script;
225
+
226
+ /* template */
227
+ var __vue_render__ = function () {
228
+ var _vm = this;
229
+ var _h = _vm.$createElement;
230
+ var _c = _vm._self._c || _h;
231
+ return _c('div', _vm._b({
232
+ ref: "root",
233
+ class: _vm.rootStyles
234
+ }, 'div', _vm.$attrs, false), [_c('div', {
235
+ class: _vm.toolbarStyles
236
+ }, [_c('div', {
237
+ class: _vm.toolbarPanelStyles
238
+ }, [_vm.sortOptions.length ? [_c('OrButton', {
239
+ ref: "sortButton",
240
+ attrs: {
241
+ "variant": "link",
242
+ "color": "inherit"
243
+ },
244
+ on: {
245
+ "click": function ($event) {
246
+ return _vm.sortMenu.toggle();
247
+ }
248
+ }
249
+ }, [_vm._v("\n " + _vm._s(_vm.sortLabel) + "\n "), _vm.sortMenu ? _c('OrIcon', {
250
+ attrs: {
251
+ "icon": _vm.sortMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
252
+ }
253
+ }) : _vm._e()], 1), _vm._v(" "), _c('OrMenu', {
254
+ ref: "sortMenu",
255
+ attrs: {
256
+ "trigger": _vm.sortButton && _vm.sortButton.root
257
+ }
258
+ }, _vm._l(_vm.sortOptions, function (sortItem) {
259
+ return _c('OrMenuItem', {
260
+ key: sortItem,
261
+ on: {
262
+ "click": function ($event) {
263
+ return _vm.handleSort(sortItem.value);
264
+ }
265
+ }
266
+ }, [_vm._v("\n " + _vm._s(sortItem.label) + "\n ")]);
267
+ }), 1)] : _vm._e()], 2), _vm._v(" "), _c('div', {
268
+ class: _vm.toolbarPanelStyles
269
+ }, [_c('OrSearch', {
270
+ staticClass: "md:w-[350px]",
271
+ attrs: {
272
+ "size": "s"
273
+ },
274
+ on: {
275
+ "search": _vm.handleSearch
276
+ },
277
+ model: {
278
+ value: _vm.proxySearch,
279
+ callback: function ($$v) {
280
+ _vm.proxySearch = $$v;
281
+ },
282
+ expression: "proxySearch"
283
+ }
284
+ }), _vm._v(" "), _c('div', {
285
+ staticClass: "layout-row gap-sm"
286
+ }, [_vm.viewModes.length > 1 ? _vm._l(_vm.viewModes, function (viewOption) {
287
+ return _c('OrIconButton', {
288
+ key: viewOption.view,
289
+ attrs: {
290
+ "icon": {
291
+ icon: viewOption.icon,
292
+ variant: viewOption.view === _vm.proxyView ? 'filled' : 'outlined'
293
+ }
294
+ },
295
+ on: {
296
+ "click": function ($event) {
297
+ return _vm.switchView(viewOption.view);
298
+ }
299
+ }
300
+ });
301
+ }) : _vm._e(), _vm._v(" "), _vm._t("addon")], 2)], 1)]), _vm._v(" "), _vm._t("header", null, null, {
302
+ items: _vm.items,
303
+ mode: _vm.proxyView
304
+ }), _vm._v(" "), _vm.items.length ? _vm._t(_vm.proxyView, function () {
305
+ return [_c('OrCardCollectionView', {
306
+ attrs: {
307
+ "items": _vm.items,
308
+ "mode": _vm.proxyView
309
+ },
310
+ scopedSlots: _vm._u([{
311
+ key: "item",
312
+ fn: function (props) {
313
+ return [_vm._t("item", null, null, props)];
314
+ }
315
+ }], null, true)
316
+ })];
317
+ }, null, {
318
+ items: _vm.items
319
+ }) : _vm.items.length === 0 && _vm.proxySearch.length > 0 ? _vm._t("noSearchResults", function () {
320
+ return [_vm._v("\n No results\n ")];
321
+ }, null, {
322
+ search: _vm.proxySearch
323
+ }) : _vm._e()], 2);
324
+ };
325
+ var __vue_staticRenderFns__ = [];
326
+
327
+ /* style */
328
+ const __vue_inject_styles__ = undefined;
329
+ /* scoped */
330
+ const __vue_scope_id__ = undefined;
331
+ /* module identifier */
332
+ const __vue_module_identifier__ = undefined;
333
+ /* functional template */
334
+ const __vue_is_functional_template__ = false;
335
+ /* style inject */
336
+
337
+ /* style inject SSR */
338
+
339
+ /* style inject shadow dom */
340
+
341
+ const __vue_component__ = /*#__PURE__*/normalizeComponent({
342
+ render: __vue_render__,
343
+ staticRenderFns: __vue_staticRenderFns__
344
+ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
345
+
346
+ export { DefaultCardCollectionViews as D, __vue_component__ as _, defaultViewModes as d, gridView as g, listView as l };
@@ -12,6 +12,11 @@ var script = defineComponent({
12
12
  },
13
13
  inheritAttrs: false,
14
14
  props: {
15
+ modelValue: {
16
+ type: String,
17
+ default: '',
18
+ required: false
19
+ },
15
20
  size: {
16
21
  type: String,
17
22
  default: InputBoxSize.M
@@ -36,13 +41,14 @@ var script = defineComponent({
36
41
  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur', 'clear'],
37
42
  expose: ['root', 'focus', 'clear'],
38
43
  setup(props, context) {
44
+ var _a;
39
45
  // Refs
40
46
  const root = ref();
41
47
  // Styles
42
48
  const classAttribute = useClassAttribute();
43
49
  const rootStyles = computed(() => ['or-search', classAttribute.value]);
44
50
  // State
45
- const localModelValue = ref('');
51
+ const localModelValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : '');
46
52
  // Events
47
53
  debouncedWatch(localModelValue, () => context.emit('search', localModelValue.value), {
48
54
  debounce: props.debounce
@@ -1,5 +1,5 @@
1
1
  export { O as OR_AVATAR_SIZE, _ as OrAvatar } from '../OrAvatar-4824c57f.js';
2
- export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../OrAvatar-3d155af3.js';
2
+ export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../OrAvatar-0afdef36.js';
3
3
  export { _ as OrBottomSheetV3 } from '../OrBottomSheet-16c2e610.js';
4
4
  export { _ as OrButton, a as OrButtonColors, b as OrButtonSizes, O as OrButtonViews } from '../OrButton-2ca1c3d6.js';
5
5
  export { _ as OrButtonV2 } from '../OrButton-c4f9955b.js';
@@ -8,7 +8,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
8
8
  export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from '../OrButton-357a5756.js';
9
9
  export { _ as OrCard } from '../OrCard-b7268256.js';
10
10
  export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from '../OrCardCollection-f6b07557.js';
11
- export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-4f001551.js';
11
+ export { D as DefaultCardCollectionViews, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-61c86bfc.js';
12
12
  export { _ as OrCardV3 } from '../OrCard-de799db0.js';
13
13
  export { a as OrCarousel, _ as OrCarouselItem } from '../OrCarouselItem-4e2cf3d8.js';
14
14
  export { _ as OrCheckbox } from '../OrCheckbox-915f1f0a.js';
@@ -63,7 +63,7 @@ export { _ as OrProgressV3, P as ProgressColor, a as ProgressType } from '../OrP
63
63
  export { _ as OrRadio } from '../OrRadio-e4198532.js';
64
64
  export { _ as OrRadioGroup } from '../OrRadioGroup-d9d32cba.js';
65
65
  export { _ as OrRadioV3 } from '../OrRadio-848ce55d.js';
66
- export { _ as OrSearchV3 } from '../OrSearch-ddb7c1fe.js';
66
+ export { _ as OrSearchV3 } from '../OrSearch-62d91301.js';
67
67
  export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-e8dce8f9.js';
68
68
  export { _ as OrSelect } from '../OrSelect-dae2b069.js';
69
69
  export { _ as OrSelectV3 } from '../OrSelect-f0ff5a85.js';
@@ -20,7 +20,7 @@ export declare const WithTextInSlot: StoryFn<import("vue").ComponentOptions<impo
20
20
  } | string[], {} & {}, {
21
21
  [x: number]: string;
22
22
  } | {}, true>)>;
23
- export declare const WithIcon: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
23
+ export declare const WithIconInSlot: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
24
24
  [x: string]: ((...args: any[]) => any) | null;
25
25
  } | string[], {} & {}, {
26
26
  [x: number]: string;
@@ -13,10 +13,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
13
13
  type: PropType<AvatarSize>;
14
14
  default: AvatarSize;
15
15
  };
16
- icon: {
17
- type: StringConstructor;
18
- default: undefined;
19
- };
20
16
  color: {
21
17
  type: PropType<AvatarColor>;
22
18
  default: AvatarColor;
@@ -36,10 +32,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
36
32
  type: PropType<AvatarSize>;
37
33
  default: AvatarSize;
38
34
  };
39
- icon: {
40
- type: StringConstructor;
41
- default: undefined;
42
- };
43
35
  color: {
44
36
  type: PropType<AvatarColor>;
45
37
  default: AvatarColor;
@@ -53,7 +45,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
53
45
  }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
54
46
  src: string;
55
47
  size: AvatarSize;
56
- icon: string;
57
48
  color: AvatarColor;
58
49
  colorSalt: string;
59
50
  } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -63,13 +54,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
63
54
  }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
64
55
  src: string;
65
56
  size: AvatarSize;
66
- icon: string;
67
57
  color: AvatarColor;
68
58
  colorSalt: string;
69
59
  } & {}, {
70
60
  src: string;
71
61
  size: AvatarSize;
72
- icon: string;
73
62
  color: AvatarColor;
74
63
  colorSalt: string;
75
64
  }, true>);
@@ -1,7 +1,6 @@
1
- export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../../OrAvatar-3d155af3.js';
1
+ export { a as AvatarColor, A as AvatarSize, _ as OrAvatarV3 } from '../../OrAvatar-0afdef36.js';
2
2
  import 'vue-demi';
3
3
  import '../../useClassAttribute-47fdb016.js';
4
4
  import '@vueuse/core';
5
5
  import '../../color-1f348774.js';
6
- import '../../OrIcon-5e394c62.js';
7
6
  import '../../normalize-component-6e8e3d80.js';
@@ -2,8 +2,7 @@ export declare enum AvatarSize {
2
2
  XL = "xl",
3
3
  L = "l",
4
4
  M = "m",
5
- S = "s",
6
- XS = "xs"
5
+ S = "s"
7
6
  }
8
7
  export declare enum AvatarColor {
9
8
  blue = "blue",
@@ -3,5 +3,3 @@ export declare const AvatarRoot: string[];
3
3
  export declare const AvatarImage: string[];
4
4
  export declare const AvatarRootSizes: Record<AvatarSize, string[]>;
5
5
  export declare const AvatarRootColors: Record<AvatarColor, string[]>;
6
- export declare const AvatarRootAbbreviationSizes: Record<AvatarSize, string[]>;
7
- export declare const AvatarRootIconSizes: Record<AvatarSize, string[]>;
@@ -1,4 +1,5 @@
1
1
  import { Meta, StoryFn } from '@storybook/vue3';
2
+ import OrCardCollection from './OrCardCollection.vue';
2
3
  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
4
  [x: string]: ((...args: any[]) => any) | null;
4
5
  } | string[], {} & {}, {
@@ -15,3 +16,7 @@ export declare const WithSorting: StoryFn<import("vue").ComponentOptions<import(
15
16
  } | string[], {} & {}, {
16
17
  [x: number]: string;
17
18
  } | {}, true>)>;
19
+ export declare const OverrideViewContainer: StoryFn<typeof OrCardCollection>;
20
+ export declare const ExtraViewMode: StoryFn<typeof OrCardCollection>;
21
+ export declare const WithLink: StoryFn<typeof OrCardCollection>;
22
+ export declare const EmptySearchResults: StoryFn<typeof OrCardCollection>;