@onereach/ui-components 2.72.1-beta.2252.0 → 2.72.2-beta.2257.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 (112) hide show
  1. package/dist/bundled/v2/{OrCardCollection-06ecb8e1.js → OrCardCollection-134b0ffe.js} +1 -1
  2. package/dist/bundled/v2/{OrConfirm-8c0e957d.js → OrConfirm-3eceda8f.js} +1 -1
  3. package/dist/bundled/v2/{OrInput-00070eee.js → OrInput-eebed0aa.js} +28 -11
  4. package/dist/bundled/v2/{OrInputBox-2f559e98.js → OrInputBox-10aecdc4.js} +1 -1
  5. package/dist/bundled/v2/{OrSearch-bb87b34c.js → OrSearch-5093c721.js} +2 -2
  6. package/dist/bundled/v2/{OrSelect-2ececfc1.js → OrSelect-974a83f8.js} +2 -2
  7. package/dist/bundled/v2/OrSidebar-c95ef614.js +230 -0
  8. package/dist/bundled/v2/{OrTextarea-5c57c02b.js → OrTextarea-dba56362.js} +1 -1
  9. package/dist/bundled/v2/components/index.js +9 -9
  10. package/dist/bundled/v2/components/or-card-collection-v3/index.js +4 -4
  11. package/dist/bundled/v2/components/or-confirm-v3/index.js +3 -3
  12. package/dist/bundled/v2/components/or-input-box-v3/index.js +1 -1
  13. package/dist/bundled/v2/components/or-input-v3/OrInput.vue.d.ts +13 -0
  14. package/dist/bundled/v2/components/or-input-v3/index.js +3 -2
  15. package/dist/bundled/v2/components/or-search-v3/index.js +4 -3
  16. package/dist/bundled/v2/components/or-select-v3/index.js +4 -3
  17. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  18. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  19. package/dist/bundled/v2/components/or-sidebar-v3/index.js +1 -12
  20. package/dist/bundled/v2/components/or-sidebar-v3/styles.d.ts +1 -9
  21. package/dist/bundled/v2/components/or-textarea-v3/index.js +2 -2
  22. package/dist/bundled/v2/index.js +9 -9
  23. package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-e2980d04.js → OrCardCollection.vue_vue_type_script_lang-bd6bc732.js} +1 -1
  24. package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-eb2bfce2.js → OrConfirm.vue_vue_type_script_lang-b7e3ac90.js} +2 -2
  25. package/dist/bundled/v3/{OrInput-dcf2606e.js → OrInput-889fbd90.js} +15 -6
  26. package/dist/bundled/v3/{OrInput.vue_vue_type_script_lang-27220623.js → OrInput.vue_vue_type_script_lang-8d2b69ae.js} +15 -3
  27. package/dist/bundled/v3/{OrInputBox-4c7900c2.js → OrInputBox-c8beb6c2.js} +1 -1
  28. package/dist/bundled/v3/{OrInputBox.vue_vue_type_script_lang-47d98e81.js → OrInputBox.vue_vue_type_script_lang-0174af07.js} +1 -1
  29. package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-321907ec.js → OrSearch.vue_vue_type_script_lang-97d023eb.js} +3 -3
  30. package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-7fd5e2f0.js → OrSelect.vue_vue_type_script_lang-b20d66fa.js} +4 -4
  31. package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-ce0b152c.js +181 -0
  32. package/dist/bundled/v3/{OrTextarea.vue_vue_type_script_lang-296da567.js → OrTextarea.vue_vue_type_script_lang-7c88ef85.js} +2 -2
  33. package/dist/bundled/v3/components/index.js +11 -11
  34. package/dist/bundled/v3/components/or-card-collection-v3/index.js +6 -6
  35. package/dist/bundled/v3/components/or-confirm-v3/index.js +5 -5
  36. package/dist/bundled/v3/components/or-input-box-v3/index.js +1 -1
  37. package/dist/bundled/v3/components/or-input-v3/OrInput.vue.d.ts +13 -0
  38. package/dist/bundled/v3/components/or-input-v3/index.js +5 -3
  39. package/dist/bundled/v3/components/or-search-v3/index.js +7 -5
  40. package/dist/bundled/v3/components/or-select-v3/index.js +7 -5
  41. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  42. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  43. package/dist/bundled/v3/components/or-sidebar-v3/index.js +1 -14
  44. package/dist/bundled/v3/components/or-sidebar-v3/styles.d.ts +1 -9
  45. package/dist/bundled/v3/components/or-textarea-v3/index.js +3 -3
  46. package/dist/bundled/v3/index.js +22 -38
  47. package/dist/esm/v2/{OrCardCollection-251ab033.js → OrCardCollection-4f8957aa.js} +2 -2
  48. package/dist/esm/v2/{OrConfirm-9dbdedd7.js → OrConfirm-d87f2ae9.js} +1 -1
  49. package/dist/esm/v2/{OrInput-59a15d80.js → OrInput-cf2900cd.js} +28 -11
  50. package/dist/esm/v2/{OrInputBox-9ceb9fc4.js → OrInputBox-1a8887df.js} +1 -1
  51. package/dist/esm/v2/{OrSearch-f42d588d.js → OrSearch-3e058ad4.js} +2 -2
  52. package/dist/esm/v2/{OrSelect-e31d1c8b.js → OrSelect-bf21fff7.js} +2 -2
  53. package/dist/esm/v2/OrSidebar-fabc7bc9.js +228 -0
  54. package/dist/esm/v2/{OrTextarea-a5a3572b.js → OrTextarea-2ec6facd.js} +1 -1
  55. package/dist/esm/v2/components/index.js +9 -9
  56. package/dist/esm/v2/components/or-card-collection-v3/index.js +4 -4
  57. package/dist/esm/v2/components/or-confirm-v3/index.js +4 -4
  58. package/dist/esm/v2/components/or-input-box-v3/index.js +1 -1
  59. package/dist/esm/v2/components/or-input-v3/OrInput.vue.d.ts +13 -0
  60. package/dist/esm/v2/components/or-input-v3/index.js +4 -3
  61. package/dist/esm/v2/components/or-search-v3/index.js +5 -4
  62. package/dist/esm/v2/components/or-select-v3/index.js +5 -4
  63. package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  64. package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  65. package/dist/esm/v2/components/or-sidebar-v3/index.js +1 -12
  66. package/dist/esm/v2/components/or-sidebar-v3/styles.d.ts +1 -9
  67. package/dist/esm/v2/components/or-textarea-v3/index.js +2 -2
  68. package/dist/esm/v2/index.js +8 -8
  69. package/dist/esm/v3/{OrCardCollection-8b8e3745.js → OrCardCollection-ab9b6d70.js} +2 -2
  70. package/dist/esm/v3/{OrConfirm-37454a63.js → OrConfirm-223b1303.js} +1 -1
  71. package/dist/esm/v3/{OrInput-bd054213.js → OrInput-5afc20da.js} +27 -7
  72. package/dist/esm/v3/{OrInputBox-e16ade90.js → OrInputBox-74646840.js} +1 -1
  73. package/dist/esm/v3/{OrSearch-4c5c44f2.js → OrSearch-100ed7c8.js} +2 -2
  74. package/dist/esm/v3/{OrSelect-466e50ca.js → OrSelect-f1a2a55d.js} +2 -2
  75. package/dist/esm/v3/OrSidebar-a62972f5.js +206 -0
  76. package/dist/esm/v3/{OrTextarea-37566985.js → OrTextarea-3e28946b.js} +1 -1
  77. package/dist/esm/v3/components/index.js +9 -9
  78. package/dist/esm/v3/components/or-card-collection-v3/index.js +4 -4
  79. package/dist/esm/v3/components/or-confirm-v3/index.js +4 -4
  80. package/dist/esm/v3/components/or-input-box-v3/index.js +1 -1
  81. package/dist/esm/v3/components/or-input-v3/OrInput.vue.d.ts +13 -0
  82. package/dist/esm/v3/components/or-input-v3/index.js +4 -3
  83. package/dist/esm/v3/components/or-search-v3/index.js +5 -4
  84. package/dist/esm/v3/components/or-select-v3/index.js +5 -4
  85. package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  86. package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  87. package/dist/esm/v3/components/or-sidebar-v3/index.js +1 -11
  88. package/dist/esm/v3/components/or-sidebar-v3/styles.d.ts +1 -9
  89. package/dist/esm/v3/components/or-textarea-v3/index.js +2 -2
  90. package/dist/esm/v3/index.js +8 -8
  91. package/package.json +2 -2
  92. package/src/components/or-input-box-v3/styles.ts +2 -2
  93. package/src/components/or-input-v3/OrInput.stories3.ts +4 -0
  94. package/src/components/or-input-v3/OrInput.vue +39 -19
  95. package/src/components/or-sidebar-v3/OrSidebar.docs.mdx +0 -6
  96. package/src/components/or-sidebar-v3/OrSidebar.stories3.ts +12 -253
  97. package/src/components/or-sidebar-v3/OrSidebar.vue +23 -130
  98. package/src/components/or-sidebar-v3/styles.ts +9 -164
  99. package/dist/bundled/v2/OrSidebar-efd4b98a.js +0 -464
  100. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +0 -12
  101. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +0 -53
  102. package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-66f8f0fd.js +0 -356
  103. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +0 -12
  104. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +0 -53
  105. package/dist/esm/v2/OrSidebar-b7202f16.js +0 -461
  106. package/dist/esm/v2/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +0 -12
  107. package/dist/esm/v2/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +0 -53
  108. package/dist/esm/v3/OrSidebar-3567338f.js +0 -396
  109. package/dist/esm/v3/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +0 -12
  110. package/dist/esm/v3/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +0 -53
  111. package/src/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.ts +0 -48
  112. package/src/components/or-sidebar-v3/OrSidebarCollapseButton.vue +0 -74
@@ -6,7 +6,7 @@ import { O as OrButton } from './OrButton-d45772c1.js';
6
6
  import { O as OrMenu } from './OrMenu-52da43bc.js';
7
7
  import { O as OrMenuItem } from './OrMenuItem-e2693a5f.js';
8
8
  import { O as OrIcon } from './OrIcon-458206aa.js';
9
- import { O as OrSearch } from './OrSearch-bb87b34c.js';
9
+ import { O as OrSearch } from './OrSearch-5093c721.js';
10
10
 
11
11
  const CardCollectionRoot = [
12
12
  // Layout
@@ -3,7 +3,7 @@ import { l as logicAnd } from './index-17f264f9.js';
3
3
  import './index-fa6eb4ca.js';
4
4
  import { O as OrOverlay } from './OrOverlay-efa7992e.js';
5
5
  import { O as OrButton, a as ButtonColor } from './OrButton-d45772c1.js';
6
- import { O as OrInput } from './OrInput-00070eee.js';
6
+ import { O as OrInput } from './OrInput-eebed0aa.js';
7
7
  import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
8
8
  import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
9
9
 
@@ -3,10 +3,12 @@ import { O as OrError } from './OrError-52f668a4.js';
3
3
  import { O as OrHint } from './OrHint-fde53334.js';
4
4
  import { O as OrIcon } from './OrIcon-458206aa.js';
5
5
  import { O as OrIconButton } from './OrIconButton-837d57f8.js';
6
- import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-2f559e98.js';
6
+ import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-10aecdc4.js';
7
7
  import { O as OrLabel } from './OrLabel-aff09c39.js';
8
+ import { O as OrLoader } from './OrLoader-864ef92a.js';
8
9
  import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-cf61643f.js';
9
10
  import { u as useValidationAttributes } from './useValidationAttributes-6df7bcf9.js';
11
+ import { u as useResponsive } from './useResponsive-e13dfbb0.js';
10
12
  import { defineComponent, ref, computed, reactive } from '@vue/composition-api/dist/vue-composition-api.mjs';
11
13
  import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
12
14
  import { c as createInjector } from './browser-82dea9ed.js';
@@ -40,7 +42,8 @@ var script = defineComponent({
40
42
  OrIcon,
41
43
  OrIconButton,
42
44
  OrInputBox,
43
- OrLabel
45
+ OrLabel,
46
+ OrLoader
44
47
  },
45
48
  model: {
46
49
  prop: 'modelValue',
@@ -75,6 +78,10 @@ var script = defineComponent({
75
78
  type: String,
76
79
  default: undefined
77
80
  },
81
+ loading: {
82
+ type: Boolean,
83
+ default: false
84
+ },
78
85
  required: {
79
86
  type: Boolean,
80
87
  default: false
@@ -120,6 +127,9 @@ var script = defineComponent({
120
127
  const maxLength = computed(() => controlAttributes.maxlength);
121
128
  const invalid = computed(() => !!props.error);
122
129
  const disclosed = ref(false);
130
+ const {
131
+ isMobile
132
+ } = useResponsive();
123
133
  // Methods
124
134
  function focus() {
125
135
  var _a;
@@ -140,6 +150,7 @@ var script = defineComponent({
140
150
  maxLength,
141
151
  invalid,
142
152
  disclosed,
153
+ isMobile,
143
154
  focus,
144
155
  blur
145
156
  };
@@ -176,7 +187,7 @@ var __vue_render__ = function () {
176
187
  "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
177
188
  "size": _vm.size,
178
189
  "invalid": _vm.invalid,
179
- "readonly": _vm.readonly,
190
+ "readonly": _vm.readonly || _vm.loading,
180
191
  "disabled": _vm.disabled
181
192
  }
182
193
  }, [(_vm.type === 'password' && _vm.disclosed ? 'text' : _vm.type) === 'checkbox' ? _c('input', _vm._b({
@@ -191,7 +202,7 @@ var __vue_render__ = function () {
191
202
  attrs: {
192
203
  "placeholder": _vm.placeholder,
193
204
  "required": _vm.required,
194
- "readonly": _vm.readonly,
205
+ "readonly": _vm.readonly || _vm.loading,
195
206
  "disabled": _vm.disabled,
196
207
  "type": "checkbox"
197
208
  },
@@ -240,7 +251,7 @@ var __vue_render__ = function () {
240
251
  attrs: {
241
252
  "placeholder": _vm.placeholder,
242
253
  "required": _vm.required,
243
- "readonly": _vm.readonly,
254
+ "readonly": _vm.readonly || _vm.loading,
244
255
  "disabled": _vm.disabled,
245
256
  "type": "radio"
246
257
  },
@@ -276,7 +287,7 @@ var __vue_render__ = function () {
276
287
  attrs: {
277
288
  "placeholder": _vm.placeholder,
278
289
  "required": _vm.required,
279
- "readonly": _vm.readonly,
290
+ "readonly": _vm.readonly || _vm.loading,
280
291
  "disabled": _vm.disabled,
281
292
  "type": _vm.type === 'password' && _vm.disclosed ? 'text' : _vm.type
282
293
  },
@@ -305,7 +316,13 @@ var __vue_render__ = function () {
305
316
  }
306
317
  }, 'input', _vm.controlAttributes, false)), _vm._v(" "), _c('div', {
307
318
  class: ['layout-row']
308
- }, [_vm.type === 'password' ? [_c('OrIconButton', {
319
+ }, [_vm.loading ? [_c('OrLoader', {
320
+ attrs: {
321
+ "variant": 'circular',
322
+ "color": 'primary',
323
+ "size": _vm.isMobile ? 'm' : 's'
324
+ }
325
+ })] : [_vm.type === 'password' ? [_c('OrIconButton', {
309
326
  attrs: {
310
327
  "icon": {
311
328
  icon: _vm.disclosed ? 'visibility_off' : 'visibility',
@@ -337,7 +354,7 @@ var __vue_render__ = function () {
337
354
  "icon": 'search',
338
355
  "variant": 'outlined'
339
356
  }
340
- })]] : _vm._e()], 2)]), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
357
+ })]] : _vm._e()]], 2)]), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
341
358
  attrs: {
342
359
  "disabled": _vm.disabled
343
360
  },
@@ -366,14 +383,14 @@ var __vue_staticRenderFns__ = [];
366
383
  /* style */
367
384
  const __vue_inject_styles__ = function (inject) {
368
385
  if (!inject) return;
369
- inject("data-v-1243ae22_0", {
370
- source: "input[data-v-1243ae22]{min-width:0;background:0 0;outline:0}input[type=number][data-v-1243ae22]::-webkit-inner-spin-button{display:none}input[type=search][data-v-1243ae22]::-webkit-search-cancel-button{display:none}",
386
+ inject("data-v-9ec674d8_0", {
387
+ source: "input[data-v-9ec674d8]{min-width:0;background:0 0;outline:0}input[type=number][data-v-9ec674d8]::-webkit-inner-spin-button{display:none}input[type=search][data-v-9ec674d8]::-webkit-search-cancel-button{display:none}",
371
388
  map: undefined,
372
389
  media: undefined
373
390
  });
374
391
  };
375
392
  /* scoped */
376
- const __vue_scope_id__ = "data-v-1243ae22";
393
+ const __vue_scope_id__ = "data-v-9ec674d8";
377
394
  /* module identifier */
378
395
  const __vue_module_identifier__ = undefined;
379
396
  /* functional template */
@@ -52,7 +52,7 @@ const InputBoxRootSizes = {
52
52
  // Box
53
53
  'children:min-h-[30px]',
54
54
  // Spacing
55
- 'first-child:pl-sm', 'last-child:pr-sm', 'children:py-[6px]', 'gap-[6px]',
55
+ 'first-child:pl-md first-child:md:pl-sm+', 'last-child:pr-md last-child:md:pr-sm+', 'children:py-[6px]', 'gap-[6px]',
56
56
  // Typography
57
57
  'typography-caption-regular']
58
58
  };
@@ -1,8 +1,8 @@
1
1
  import { debouncedWatch } from '@vueuse/core';
2
2
  import './index-fa6eb4ca.js';
3
- import { O as OrInput } from './OrInput-00070eee.js';
3
+ import { O as OrInput } from './OrInput-eebed0aa.js';
4
4
  import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
5
- import { a as InputBoxSize } from './OrInputBox-2f559e98.js';
5
+ import { a as InputBoxSize } from './OrInputBox-10aecdc4.js';
6
6
  import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
7
7
 
8
8
  var script = defineComponent({
@@ -4,8 +4,8 @@ import { O as OrError } from './OrError-52f668a4.js';
4
4
  import { O as OrExpansionPanel } from './OrExpansionPanel-96b8f568.js';
5
5
  import { O as OrHint } from './OrHint-fde53334.js';
6
6
  import { O as OrIcon } from './OrIcon-458206aa.js';
7
- import { O as OrInput } from './OrInput-00070eee.js';
8
- import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-2f559e98.js';
7
+ import { O as OrInput } from './OrInput-eebed0aa.js';
8
+ import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-10aecdc4.js';
9
9
  import { O as OrLabel } from './OrLabel-aff09c39.js';
10
10
  import { O as OrMenuItem } from './OrMenuItem-e2693a5f.js';
11
11
  import { O as OrPopover } from './OrPopover-4e8acb7b.js';
@@ -0,0 +1,230 @@
1
+ import { useDraggable, useElementBounding } from '@vueuse/core';
2
+ import _ from 'lodash';
3
+ import './index-fa6eb4ca.js';
4
+ import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
5
+ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
6
+
7
+ var OrSidebarPlacement;
8
+ (function (OrSidebarPlacement) {
9
+ OrSidebarPlacement["left"] = "left";
10
+ OrSidebarPlacement["right"] = "right";
11
+ })(OrSidebarPlacement || (OrSidebarPlacement = {}));
12
+
13
+ const SidebarRoot = [
14
+ // Position
15
+ 'relative',
16
+ // Layout
17
+ 'flex', 'flex-col', 'shrink-0',
18
+ // Box
19
+ 'min-h-0', 'p-0'];
20
+ const SidebarRootSides = {
21
+ [OrSidebarPlacement.left]: [
22
+ // Borders
23
+ 'border-r-[1px]', 'border-r-solid', 'border-r-secondary dark:border-r-secondary-dark'],
24
+ [OrSidebarPlacement.right]: [
25
+ // Borders
26
+ 'border-l-[1px]', 'border-l-solid', 'border-l-secondary dark:border-l-secondary-dark']
27
+ };
28
+ const SidebarResize = [
29
+ // Position
30
+ 'absolute', 'inset-y-none', 'z-[1]',
31
+ // Box
32
+ 'w-[12px]', 'h-[100%]',
33
+ // Cursor
34
+ 'cursor-ew-resize'];
35
+ const SidebarResizeSides = {
36
+ [OrSidebarPlacement.left]: [
37
+ // Position
38
+ '-right-[1px]',
39
+ // Borders
40
+ 'hover:border-r-2', 'hover:border-r-primary hover:dark:border-r-primary-dark',
41
+ // Transition
42
+ 'transition-[border-right]'],
43
+ [OrSidebarPlacement.right]: [
44
+ // Position
45
+ '-left-[1px]',
46
+ // Borders
47
+ 'hover:border-l-2', 'hover:border-l-primary hover:dark:border-l-primary-dark',
48
+ // Transition
49
+ 'transition-[border-left]']
50
+ };
51
+ const SidebarResizingSides = {
52
+ [OrSidebarPlacement.left]: [
53
+ // Borders
54
+ 'border-r-2', 'border-r-primary dark:border-r-primary-dark'],
55
+ [OrSidebarPlacement.right]: [
56
+ // Borders
57
+ 'border-l-2', 'border-l-primary dark:border-l-primary-dark']
58
+ };
59
+ const SidebarMain = [
60
+ // Layout
61
+ 'flex', 'flex-col', 'grow',
62
+ // Box
63
+ 'min-h-0'];
64
+ const SidebarHeader = [
65
+ // Sizing
66
+ 'p-md'];
67
+ const SidebarContent = [
68
+ // Layout
69
+ 'grow', 'overflow-auto',
70
+ // Sizing
71
+ 'p-md'];
72
+ const SidebarFooter = [
73
+ // Sizing
74
+ 'p-md',
75
+ // Borders
76
+ 'border-t-[1px]', 'border-t-solid', 'border-t-secondary dark:border-t-secondary-dark'];
77
+
78
+ var script = defineComponent({
79
+ name: 'OrSidebar',
80
+ props: {
81
+ width: {
82
+ type: Number,
83
+ required: false,
84
+ default: 0,
85
+ validator: value => _.isNumber(value) && value >= 0
86
+ },
87
+ minimumWidth: {
88
+ type: Number,
89
+ required: false,
90
+ default: 350,
91
+ validator: value => _.isNumber(value) && value >= 0
92
+ },
93
+ /**
94
+ * User may put the component on the right or the left side of a container.
95
+ * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
96
+ *
97
+ * Note: the property doesn't reposition the component in the parent container.
98
+ * @values left, right
99
+ */
100
+ side: {
101
+ type: String,
102
+ default: OrSidebarPlacement.right,
103
+ validator: value => _.includes(_.values(OrSidebarPlacement), value)
104
+ }
105
+ },
106
+ emits: ['change:width'],
107
+ setup(props, {
108
+ emit
109
+ }) {
110
+ // Refs
111
+ const root = ref();
112
+ const resizeBar = ref(null);
113
+ const parentContainer = computed(() => {
114
+ var _a;
115
+ return (_a = root.value) === null || _a === void 0 ? void 0 : _a.parentElement;
116
+ });
117
+ // State
118
+ const startPositionX = ref(0);
119
+ const isResizing = ref(false);
120
+ const localWidth = ref(props.width >= props.minimumWidth ? props.width : props.minimumWidth);
121
+ // Styles
122
+ const sidebarStyle = computed(() => ({
123
+ width: localWidth.value + 'px'
124
+ }));
125
+ const rootStyles = computed(() => ['or-sidebar', ...SidebarRoot, ...SidebarRootSides[props.side]]);
126
+ const resizeStyles = computed(() => [...SidebarResize, ...SidebarResizeSides[props.side], ...(isResizing.value ? SidebarResizingSides[props.side] : [])]);
127
+ const mainStyles = computed(() => [...SidebarMain]);
128
+ const headerStyles = computed(() => [...SidebarHeader]);
129
+ const contentStyles = computed(() => [...SidebarContent]);
130
+ const footerStyles = computed(() => [...SidebarFooter]);
131
+ // Effects
132
+ useDraggable(resizeBar, {
133
+ preventDefault: true,
134
+ onStart: (position, event) => {
135
+ document.body.style.cursor = 'ew-resize';
136
+ document.body.style.userSelect = 'none';
137
+ startPositionX.value = event.x;
138
+ isResizing.value = true;
139
+ },
140
+ onMove: position => {
141
+ const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.left ? -1 : 1);
142
+ const newWidth = localWidth.value - delta;
143
+ localWidth.value = newWidth > maximumWidth.value ? maximumWidth.value : newWidth < props.minimumWidth ? props.minimumWidth : newWidth;
144
+ startPositionX.value = position.x;
145
+ },
146
+ onEnd: () => {
147
+ document.body.style.cursor = '';
148
+ document.body.style.userSelect = '';
149
+ isResizing.value = false;
150
+ }
151
+ });
152
+ const {
153
+ width: maximumWidth
154
+ } = useElementBounding(parentContainer);
155
+ watch(() => props.width, newValue => {
156
+ if (newValue !== localWidth.value) {
157
+ localWidth.value = newValue > maximumWidth.value ? maximumWidth.value : newValue < props.minimumWidth ? props.minimumWidth : newValue;
158
+ }
159
+ });
160
+ watch(() => props.minimumWidth, newMinimum => {
161
+ if (newMinimum > localWidth.value) localWidth.value = newMinimum;
162
+ });
163
+ watch(maximumWidth, newMaximum => {
164
+ if (newMaximum < localWidth.value) localWidth.value = newMaximum;
165
+ });
166
+ watch(localWidth, val => emit('change:width', val));
167
+ return {
168
+ root,
169
+ resizeBar,
170
+ isResizing,
171
+ localWidth,
172
+ sidebarStyle,
173
+ rootStyles,
174
+ resizeStyles,
175
+ mainStyles,
176
+ headerStyles,
177
+ contentStyles,
178
+ footerStyles
179
+ };
180
+ }
181
+ });
182
+
183
+ /* script */
184
+ const __vue_script__ = script;
185
+
186
+ /* template */
187
+ var __vue_render__ = function () {
188
+ var _vm = this;
189
+ var _h = _vm.$createElement;
190
+ var _c = _vm._self._c || _h;
191
+ return _c('aside', {
192
+ ref: "root",
193
+ class: _vm.rootStyles,
194
+ style: _vm.sidebarStyle
195
+ }, [_c('div', {
196
+ ref: "resizeBar",
197
+ class: _vm.resizeStyles
198
+ }), _vm._v(" "), _c('div', {
199
+ class: _vm.mainStyles
200
+ }, [_vm.$slots.header ? _c('div', {
201
+ class: _vm.headerStyles
202
+ }, [_vm._t("header")], 2) : _vm._e(), _vm._v(" "), _c('div', {
203
+ class: _vm.contentStyles
204
+ }, [_vm._t("default")], 2)]), _vm._v(" "), _vm.$slots.footer ? _c('div', {
205
+ class: _vm.footerStyles
206
+ }, [_vm._t("footer")], 2) : _vm._e()]);
207
+ };
208
+ var __vue_staticRenderFns__ = [];
209
+
210
+ /* style */
211
+ const __vue_inject_styles__ = undefined;
212
+ /* scoped */
213
+ const __vue_scope_id__ = undefined;
214
+ /* module identifier */
215
+ const __vue_module_identifier__ = undefined;
216
+ /* functional template */
217
+ const __vue_is_functional_template__ = false;
218
+ /* style inject */
219
+
220
+ /* style inject SSR */
221
+
222
+ /* style inject shadow dom */
223
+
224
+ const __vue_component__ = /*#__PURE__*/normalizeComponent({
225
+ render: __vue_render__,
226
+ staticRenderFns: __vue_staticRenderFns__
227
+ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
228
+ var __vue_component__$1 = __vue_component__;
229
+
230
+ export { OrSidebarPlacement as O, __vue_component__$1 as _ };
@@ -1,7 +1,7 @@
1
1
  import './index-fa6eb4ca.js';
2
2
  import { O as OrError } from './OrError-52f668a4.js';
3
3
  import { O as OrHint } from './OrHint-fde53334.js';
4
- import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-2f559e98.js';
4
+ import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-10aecdc4.js';
5
5
  import { O as OrLabel } from './OrLabel-aff09c39.js';
6
6
  import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-cf61643f.js';
7
7
  import { u as useValidationAttributes } from './useValidationAttributes-6df7bcf9.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, O as OrButtonV3 } from '../OrButton-d45772c1.js';
9
9
  export { O as OrCard } from '../OrCard-a6b30f8f.js';
10
10
  export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from '../OrCardCollection-166cfcc6.js';
11
- export { D as DefaultCardCollectionViews, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-06ecb8e1.js';
11
+ export { D as DefaultCardCollectionViews, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-134b0ffe.js';
12
12
  export { _ as OrCardV3 } from '../OrCard-45d5869b.js';
13
13
  export { a as OrCarousel, _ as OrCarouselItem } from '../OrCarouselItem-6da755c0.js';
14
14
  export { O as OrCheckbox } from '../OrCheckbox-4cbddd67.js';
@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from '../OrCode-fc6876ec.js';
19
19
  export { O as OrCollapse } from '../OrCollapse-3aa9a9b7.js';
20
20
  export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker-a1a37e83.js';
21
21
  export { _ as OrConfirm } from '../OrConfirm-55b89b17.js';
22
- export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-8c0e957d.js';
22
+ export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-3eceda8f.js';
23
23
  export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-e212f892.js';
24
24
  export { O as OrError } from '../OrError-31503e4c.js';
25
25
  export { _ as OrErrorTagV3 } from '../OrErrorTag-97a9112b.js';
@@ -37,8 +37,8 @@ export { I as InlineInputBoxSize, I as InlineInputSize, O as OrInlineInputBoxV3
37
37
  export { I as InlineInputType, _ as OrInlineInputV3 } from '../OrInlineInput-57fccb41.js';
38
38
  export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, _ as OrInlineTextEdit } from '../OrInlineTextEdit-7262efdf.js';
39
39
  export { _ as OrInlineTextareaV3 } from '../OrInlineTextarea-f8b86cf7.js';
40
- export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, O as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from '../OrInputBox-2f559e98.js';
41
- export { I as InputType, O as OrInputV3 } from '../OrInput-00070eee.js';
40
+ export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, O as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from '../OrInputBox-10aecdc4.js';
41
+ export { I as InputType, O as OrInputV3 } from '../OrInput-eebed0aa.js';
42
42
  export { O as OrInput } from '../OrInput-df1a14fa.js';
43
43
  export { O as OrLabel } from '../OrLabel-74c73ba4.js';
44
44
  export { L as LabelVariant, O as OrLabelV3 } from '../OrLabel-aff09c39.js';
@@ -66,12 +66,12 @@ export { _ as OrRadio } from '../OrRadio-187d6fc7.js';
66
66
  export { _ as OrRadioGroup } from '../OrRadioGroup-aa9f0757.js';
67
67
  export { _ as OrRadioV3 } from '../OrRadio-fe23947a.js';
68
68
  export { O as OrSearch } from '../OrSearch-832d7978.js';
69
- export { O as OrSearchV3 } from '../OrSearch-bb87b34c.js';
69
+ export { O as OrSearchV3 } from '../OrSearch-5093c721.js';
70
70
  export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-878279bf.js';
71
71
  export { _ as OrSelect } from '../OrSelect-a23d4210.js';
72
- export { _ as OrSelectV3 } from '../OrSelect-2ececfc1.js';
72
+ export { _ as OrSelectV3 } from '../OrSelect-974a83f8.js';
73
73
  export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-e2b2c9ec.js';
74
- export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-efd4b98a.js';
74
+ export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-c95ef614.js';
75
75
  export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-242d22f3.js';
76
76
  export { _ as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText-9a2f39dc.js';
77
77
  export { _ as OrSlider } from '../OrSlider-59d05856.js';
@@ -90,7 +90,7 @@ export { O as OrTeleport } from '../OrTeleportVue2-3544f185.js';
90
90
  export { O as OrTeleportV3 } from '../OrTeleport.vue2-e9ba3054.js';
91
91
  export { _ as OrTextV3 } from '../OrText-a665b991.js';
92
92
  export { _ as OrTextarea } from '../OrTextarea-71ff236d.js';
93
- export { _ as OrTextareaV3 } from '../OrTextarea-5c57c02b.js';
93
+ export { _ as OrTextareaV3 } from '../OrTextarea-dba56362.js';
94
94
  export { _ as OrTextbox, T as TextboxTypes } from '../OrTextbox-eacd9b19.js';
95
95
  export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from '../useToast-1faa828c.js';
96
96
  export { O as OrToast, _ as OrToastContainer } from '../OrToastContainer-b03adc37.js';
@@ -113,8 +113,8 @@ import '../dom-3a15d036.js';
113
113
  import '../index-17f264f9.js';
114
114
  import '../floating-ui.dom.esm-83eba816.js';
115
115
  import '../useValidationAttributes-6df7bcf9.js';
116
- import '../v4-cf8987a3.js';
117
116
  import '../useResponsive-e13dfbb0.js';
117
+ import '../v4-cf8987a3.js';
118
118
  import '../useElevation-aac032f4.js';
119
119
  import '../useToggle-6166bd53.js';
120
120
  import '../dropdown-open-e2a93aaf.js';
@@ -1,4 +1,4 @@
1
- export { D as DefaultCardCollectionViews, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-06ecb8e1.js';
1
+ export { D as DefaultCardCollectionViews, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-134b0ffe.js';
2
2
  import '../../index-fa6eb4ca.js';
3
3
  import 'vue';
4
4
  import '@vue/composition-api/dist/vue-composition-api.mjs';
@@ -19,11 +19,11 @@ import '../../OrButton-d45772c1.js';
19
19
  import '../../OrLoader-864ef92a.js';
20
20
  import '../../OrMenu-52da43bc.js';
21
21
  import '../../OrMenuItem-e2693a5f.js';
22
- import '../../OrSearch-bb87b34c.js';
23
- import '../../OrInput-00070eee.js';
22
+ import '../../OrSearch-5093c721.js';
23
+ import '../../OrInput-eebed0aa.js';
24
24
  import '../../OrError-52f668a4.js';
25
25
  import '../../OrHint-fde53334.js';
26
- import '../../OrInputBox-2f559e98.js';
26
+ import '../../OrInputBox-10aecdc4.js';
27
27
  import '../../OrLabel-aff09c39.js';
28
28
  import '../../useIdAttribute-cf61643f.js';
29
29
  import '../../useValidationAttributes-6df7bcf9.js';
@@ -1,4 +1,4 @@
1
- export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-8c0e957d.js';
1
+ export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-3eceda8f.js';
2
2
  import '@vueuse/core';
3
3
  import '../../index-17f264f9.js';
4
4
  import '../../index-fa6eb4ca.js';
@@ -11,7 +11,7 @@ import '../../normalize-component-6e8e3d80.js';
11
11
  import '../../useElevation-aac032f4.js';
12
12
  import '../../OrButton-d45772c1.js';
13
13
  import '../../OrLoader-864ef92a.js';
14
- import '../../OrInput-00070eee.js';
14
+ import '../../OrInput-eebed0aa.js';
15
15
  import '../../OrError-52f668a4.js';
16
16
  import '../../OrHint-fde53334.js';
17
17
  import '../../OrIcon-458206aa.js';
@@ -21,7 +21,7 @@ import '../../OrPopover-4e8acb7b.js';
21
21
  import '../../floating-ui.dom.esm-83eba816.js';
22
22
  import '../../OrBottomSheet-ddba20c1.js';
23
23
  import '../../useResponsive-e13dfbb0.js';
24
- import '../../OrInputBox-2f559e98.js';
24
+ import '../../OrInputBox-10aecdc4.js';
25
25
  import '../../OrLabel-aff09c39.js';
26
26
  import '../../useIdAttribute-cf61643f.js';
27
27
  import '../../useValidationAttributes-6df7bcf9.js';
@@ -1,4 +1,4 @@
1
- export { a as InputBoxSize, I as InputBoxVariant, O as OrInputBoxV3 } from '../../OrInputBox-2f559e98.js';
1
+ export { a as InputBoxSize, I as InputBoxVariant, O as OrInputBoxV3 } from '../../OrInputBox-10aecdc4.js';
2
2
  import '../../index-fa6eb4ca.js';
3
3
  import 'vue';
4
4
  import '@vue/composition-api/dist/vue-composition-api.mjs';
@@ -23,6 +23,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
23
23
  maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
24
24
  invalid: import("@vue/composition-api").ComputedRef<boolean>;
25
25
  disclosed: import("@vue/composition-api").Ref<boolean>;
26
+ isMobile: import("@vue/composition-api").Ref<boolean>;
26
27
  focus: () => void;
27
28
  blur: () => void;
28
29
  }> & import("@vue/composition-api").Data, {}, {}, {
@@ -54,6 +55,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
54
55
  type: StringConstructor;
55
56
  default: undefined;
56
57
  };
58
+ loading: {
59
+ type: BooleanConstructor;
60
+ default: boolean;
61
+ };
57
62
  required: {
58
63
  type: BooleanConstructor;
59
64
  default: boolean;
@@ -99,6 +104,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
99
104
  type: StringConstructor;
100
105
  default: undefined;
101
106
  };
107
+ loading: {
108
+ type: BooleanConstructor;
109
+ default: boolean;
110
+ };
102
111
  required: {
103
112
  type: BooleanConstructor;
104
113
  default: boolean;
@@ -123,6 +132,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
123
132
  placeholder: string;
124
133
  hint: string;
125
134
  error: string;
135
+ loading: boolean;
126
136
  required: boolean;
127
137
  readonly: boolean;
128
138
  disabled: boolean;
@@ -152,6 +162,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
152
162
  maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
153
163
  invalid: import("@vue/composition-api").ComputedRef<boolean>;
154
164
  disclosed: import("@vue/composition-api").Ref<boolean>;
165
+ isMobile: import("@vue/composition-api").Ref<boolean>;
155
166
  focus: () => void;
156
167
  blur: () => void;
157
168
  }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
@@ -162,6 +173,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
162
173
  placeholder: string;
163
174
  hint: string;
164
175
  error: string;
176
+ loading: boolean;
165
177
  required: boolean;
166
178
  readonly: boolean;
167
179
  disabled: boolean;
@@ -176,6 +188,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
176
188
  placeholder: string;
177
189
  hint: string;
178
190
  error: string;
191
+ loading: boolean;
179
192
  required: boolean;
180
193
  readonly: boolean;
181
194
  disabled: boolean;
@@ -1,5 +1,5 @@
1
- export { I as InputType, O as OrInputV3 } from '../../OrInput-00070eee.js';
2
- export { a as InputSize } from '../../OrInputBox-2f559e98.js';
1
+ export { I as InputType, O as OrInputV3 } from '../../OrInput-eebed0aa.js';
2
+ export { a as InputSize } from '../../OrInputBox-10aecdc4.js';
3
3
  import '../../index-fa6eb4ca.js';
4
4
  import 'vue';
5
5
  import '@vue/composition-api/dist/vue-composition-api.mjs';
@@ -19,6 +19,7 @@ import 'portal-vue';
19
19
  import '../../useElevation-aac032f4.js';
20
20
  import '../../useResponsive-e13dfbb0.js';
21
21
  import '../../OrLabel-aff09c39.js';
22
+ import '../../OrLoader-864ef92a.js';
22
23
  import '../../useIdAttribute-cf61643f.js';
23
24
  import '../../useValidationAttributes-6df7bcf9.js';
24
25
  import '../../browser-82dea9ed.js';
@@ -1,10 +1,10 @@
1
- export { O as OrSearchV3 } from '../../OrSearch-bb87b34c.js';
2
- export { a as SearchSize } from '../../OrInputBox-2f559e98.js';
1
+ export { O as OrSearchV3 } from '../../OrSearch-5093c721.js';
2
+ export { a as SearchSize } from '../../OrInputBox-10aecdc4.js';
3
3
  import '@vueuse/core';
4
4
  import '../../index-fa6eb4ca.js';
5
5
  import 'vue';
6
6
  import '@vue/composition-api/dist/vue-composition-api.mjs';
7
- import '../../OrInput-00070eee.js';
7
+ import '../../OrInput-eebed0aa.js';
8
8
  import '../../OrError-52f668a4.js';
9
9
  import '../../normalize-component-6e8e3d80.js';
10
10
  import '../../OrHint-fde53334.js';
@@ -20,6 +20,7 @@ import 'portal-vue';
20
20
  import '../../useElevation-aac032f4.js';
21
21
  import '../../useResponsive-e13dfbb0.js';
22
22
  import '../../OrLabel-aff09c39.js';
23
+ import '../../OrLoader-864ef92a.js';
23
24
  import '../../useIdAttribute-cf61643f.js';
24
25
  import '../../useValidationAttributes-6df7bcf9.js';
25
26
  import '../../browser-82dea9ed.js';