@onereach/ui-components 2.70.1-beta.2196.0 → 2.70.2-beta.2198.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 (78) hide show
  1. package/dist/bundled/v2/{OrExpansionPanel-995caa85.js → OrExpansionPanel-d9a260e2.js} +32 -5
  2. package/dist/bundled/v2/{OrSelect-67dc7976.js → OrSelect-c49e1bcf.js} +2 -2
  3. package/dist/bundled/v2/OrSidebar-2a7d62a8.js +455 -0
  4. package/dist/bundled/v2/{OrTag-30fecee5.js → OrTag-e3e6fdd6.js} +1 -1
  5. package/dist/bundled/v2/components/index.js +4 -4
  6. package/dist/bundled/v2/components/or-expansion-panel-v3/OrExpansionPanel.vue.d.ts +22 -3
  7. package/dist/bundled/v2/components/or-expansion-panel-v3/index.js +1 -1
  8. package/dist/bundled/v2/components/or-select-v3/index.js +3 -3
  9. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +36 -1
  10. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +49 -4
  11. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +12 -0
  12. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +59 -0
  13. package/dist/bundled/v2/components/or-sidebar-v3/index.js +13 -1
  14. package/dist/bundled/v2/components/or-sidebar-v3/styles.d.ts +7 -1
  15. package/dist/bundled/v2/components/or-tag-v3/index.js +1 -1
  16. package/dist/bundled/v2/index.js +5 -5
  17. package/dist/bundled/v3/{OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js → OrExpansionPanel.vue_vue_type_script_lang-5360f580.js} +31 -4
  18. package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-29aed61b.js → OrSelect.vue_vue_type_script_lang-58e5a52b.js} +3 -3
  19. package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-b4fa1550.js +347 -0
  20. package/dist/bundled/v3/{OrTag.vue_vue_type_script_lang-3e30f662.js → OrTag.vue_vue_type_script_lang-e45c345b.js} +1 -1
  21. package/dist/bundled/v3/components/index.js +4 -4
  22. package/dist/bundled/v3/components/or-expansion-panel-v3/OrExpansionPanel.vue.d.ts +22 -3
  23. package/dist/bundled/v3/components/or-expansion-panel-v3/index.js +1 -1
  24. package/dist/bundled/v3/components/or-select-v3/index.js +3 -3
  25. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +36 -1
  26. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +49 -4
  27. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +12 -0
  28. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +59 -0
  29. package/dist/bundled/v3/components/or-sidebar-v3/index.js +15 -1
  30. package/dist/bundled/v3/components/or-sidebar-v3/styles.d.ts +7 -1
  31. package/dist/bundled/v3/components/or-tag-v3/index.js +1 -1
  32. package/dist/bundled/v3/index.js +29 -13
  33. package/dist/esm/v2/{OrExpansionPanel-968ddc61.js → OrExpansionPanel-a123024e.js} +32 -5
  34. package/dist/esm/v2/{OrSelect-ae7a13a5.js → OrSelect-1d705445.js} +2 -2
  35. package/dist/esm/v2/OrSidebar-1e02702f.js +452 -0
  36. package/dist/esm/v2/{OrTag-5c404031.js → OrTag-52e4cc94.js} +1 -1
  37. package/dist/esm/v2/components/index.js +4 -4
  38. package/dist/esm/v2/components/or-expansion-panel-v3/OrExpansionPanel.vue.d.ts +22 -3
  39. package/dist/esm/v2/components/or-expansion-panel-v3/index.js +1 -1
  40. package/dist/esm/v2/components/or-select-v3/index.js +3 -3
  41. package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +36 -1
  42. package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +49 -4
  43. package/dist/esm/v2/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +12 -0
  44. package/dist/esm/v2/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +59 -0
  45. package/dist/esm/v2/components/or-sidebar-v3/index.js +13 -1
  46. package/dist/esm/v2/components/or-sidebar-v3/styles.d.ts +7 -1
  47. package/dist/esm/v2/components/or-tag-v3/index.js +1 -1
  48. package/dist/esm/v2/index.js +4 -4
  49. package/dist/esm/v3/{OrExpansionPanel-311e64cf.js → OrExpansionPanel-f8d7ff8d.js} +32 -5
  50. package/dist/esm/v3/{OrSelect-7ef568f4.js → OrSelect-dfa4885f.js} +2 -2
  51. package/dist/esm/v3/OrSidebar-749bbcba.js +387 -0
  52. package/dist/esm/v3/{OrTag-5d54f37d.js → OrTag-efa7578f.js} +1 -1
  53. package/dist/esm/v3/components/index.js +4 -4
  54. package/dist/esm/v3/components/or-expansion-panel-v3/OrExpansionPanel.vue.d.ts +22 -3
  55. package/dist/esm/v3/components/or-expansion-panel-v3/index.js +1 -1
  56. package/dist/esm/v3/components/or-select-v3/index.js +3 -3
  57. package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +36 -1
  58. package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +49 -4
  59. package/dist/esm/v3/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +12 -0
  60. package/dist/esm/v3/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +59 -0
  61. package/dist/esm/v3/components/or-sidebar-v3/index.js +12 -1
  62. package/dist/esm/v3/components/or-sidebar-v3/styles.d.ts +7 -1
  63. package/dist/esm/v3/components/or-tag-v3/index.js +1 -1
  64. package/dist/esm/v3/index.js +4 -4
  65. package/package.json +1 -1
  66. package/src/components/or-expansion-panel-v3/OrExpansionPanel.stories3.ts +12 -2
  67. package/src/components/or-expansion-panel-v3/OrExpansionPanel.vue +39 -3
  68. package/src/components/or-sidebar-v3/OrSidebar.docs.mdx +6 -0
  69. package/src/components/or-sidebar-v3/OrSidebar.stories3.ts +219 -6
  70. package/src/components/or-sidebar-v3/OrSidebar.vue +121 -22
  71. package/src/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.ts +48 -0
  72. package/src/components/or-sidebar-v3/OrSidebarCollapseButton.vue +64 -0
  73. package/src/components/or-sidebar-v3/styles.ts +153 -9
  74. package/src/components/or-tag-v3/styles.ts +0 -3
  75. package/dist/bundled/v2/OrSidebar-c95ef614.js +0 -230
  76. package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-ce0b152c.js +0 -181
  77. package/dist/esm/v2/OrSidebar-fabc7bc9.js +0 -228
  78. package/dist/esm/v3/OrSidebar-a62972f5.js +0 -206
@@ -1,7 +1,7 @@
1
1
  import './index-fa6eb4ca.js';
2
2
  import { O as OrIcon } from './OrIcon-8625385f.js';
3
3
  import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
4
- import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
4
+ import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
5
5
  import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
6
6
 
7
7
  var ExpansionPanelVariant;
@@ -74,6 +74,10 @@ var script = defineComponent({
74
74
  type: String,
75
75
  required: true
76
76
  },
77
+ isOpen: {
78
+ type: Boolean,
79
+ default: false
80
+ },
77
81
  variant: {
78
82
  type: String,
79
83
  default: ExpansionPanelVariant.Default
@@ -87,8 +91,9 @@ var script = defineComponent({
87
91
  default: false
88
92
  }
89
93
  },
90
- expose: ['root'],
91
- setup(props) {
94
+ emits: ['open', 'close'],
95
+ expose: ['root', 'open', 'close'],
96
+ setup(props, context) {
92
97
  // Refs
93
98
  const root = ref();
94
99
  // Styles
@@ -98,12 +103,34 @@ var script = defineComponent({
98
103
  const addonStyles = computed(() => [...ExpansionPanelAddon]);
99
104
  // State
100
105
  const expanded = ref(false);
106
+ // Events
107
+ watch(expanded, value => {
108
+ context.emit(value ? 'open' : 'close');
109
+ });
110
+ watch(() => props.isOpen, newIsOpen => {
111
+ if (newIsOpen) {
112
+ open();
113
+ } else {
114
+ close();
115
+ }
116
+ }, {
117
+ immediate: true
118
+ });
119
+ // Methods
120
+ function open() {
121
+ expanded.value = true;
122
+ }
123
+ function close() {
124
+ expanded.value = false;
125
+ }
101
126
  return {
102
127
  root,
103
128
  rootStyles,
104
129
  headerStyles,
105
130
  addonStyles,
106
- expanded
131
+ expanded,
132
+ open,
133
+ close
107
134
  };
108
135
  }
109
136
  });
@@ -133,7 +160,7 @@ var __vue_render__ = function () {
133
160
  on: {
134
161
  "click": function ($event) {
135
162
  $event.stopPropagation();
136
- _vm.expanded = !_vm.expanded;
163
+ _vm.expanded ? _vm.close() : _vm.open();
137
164
  }
138
165
  }
139
166
  }, [_c('OrIcon', {
@@ -1,7 +1,7 @@
1
1
  import './index-fa6eb4ca.js';
2
2
  import { O as OrCheckbox } from './OrCheckbox-dbef9f9a.js';
3
3
  import { O as OrError } from './OrError-aad17598.js';
4
- import { O as OrExpansionPanel } from './OrExpansionPanel-995caa85.js';
4
+ import { O as OrExpansionPanel } from './OrExpansionPanel-d9a260e2.js';
5
5
  import { O as OrHint } from './OrHint-f38a1940.js';
6
6
  import { O as OrIcon } from './OrIcon-8625385f.js';
7
7
  import { O as OrInput } from './OrInput-82ccfe00.js';
@@ -9,7 +9,7 @@ import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-79ec54ad.js';
9
9
  import { O as OrLabel } from './OrLabel-172c4b89.js';
10
10
  import { O as OrMenuItem } from './OrMenuItem-26420908.js';
11
11
  import { O as OrPopover } from './OrPopover-5dc240f1.js';
12
- import { O as OrTag } from './OrTag-30fecee5.js';
12
+ import { O as OrTag } from './OrTag-e3e6fdd6.js';
13
13
  import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e2a93aaf.js';
14
14
  import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
15
15
  import { u as useOverflow } from './useOverflow-bae6342f.js';
@@ -0,0 +1,455 @@
1
+ import { useDraggable, useElementBounding } from '@vueuse/core';
2
+ import _ from 'lodash';
3
+ import './index-fa6eb4ca.js';
4
+ import { O as OrIconButton } from './OrIconButton-a2ba92df.js';
5
+ import { defineComponent, ref, computed, useSlots, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
6
+ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
7
+
8
+ var OrSidebarPlacement;
9
+ (function (OrSidebarPlacement) {
10
+ OrSidebarPlacement["left"] = "left";
11
+ OrSidebarPlacement["right"] = "right";
12
+ })(OrSidebarPlacement || (OrSidebarPlacement = {}));
13
+
14
+ const SidebarRoot = [
15
+ // Position
16
+ 'relative',
17
+ // Layout
18
+ 'flex', 'flex-row', 'shrink-0',
19
+ // Box
20
+ 'min-w-0', 'h-auto', 'p-0',
21
+ // Theme
22
+ 'bg-background', 'dark:bg-background-dark'];
23
+ const SidebarBar = [
24
+ // Position
25
+ 'relative',
26
+ // Layout
27
+ 'flex', 'flex-col', 'shrink-0', 'grow',
28
+ // Box
29
+ 'min-h-0', 'p-0',
30
+ // Theme
31
+ 'text-on-background', 'dark:text-on-background-dark',
32
+ // Transition
33
+ 'transition-[width]'];
34
+ const SidebarToolbar = [
35
+ // Position
36
+ 'relative',
37
+ // Layout
38
+ 'flex', 'flex-col', 'shrink-0', 'grow', 'overflow-auto', 'items-center',
39
+ // Sizing
40
+ 'gap-md',
41
+ // Box
42
+ 'min-h-0', 'min-w-xl', 'p-[6px]', 'pt-[56px]', 'pb-md+',
43
+ // Theme
44
+ 'text-outline', 'dark:text-outline-dark'];
45
+ const SidebarSides = {
46
+ [OrSidebarPlacement.left]: [
47
+ // Borders
48
+ 'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
49
+ [OrSidebarPlacement.right]: [
50
+ // Borders
51
+ 'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
52
+ };
53
+ const SidebarToolbarSides = {
54
+ [OrSidebarPlacement.left]: [
55
+ // Borders
56
+ 'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
57
+ [OrSidebarPlacement.right]: [
58
+ // Borders
59
+ 'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
60
+ };
61
+ const SidebarResize = [
62
+ // Position
63
+ 'absolute', 'inset-y-none', 'z-[1]',
64
+ // Box
65
+ 'w-sm+', 'h-[100%]',
66
+ // Cursor
67
+ 'cursor-ew-resize'];
68
+ const SidebarResizeSides = {
69
+ [OrSidebarPlacement.left]: [
70
+ // Position
71
+ '-right-[1px]',
72
+ // Borders
73
+ 'hover:border-r-2', 'hover:border-r-primary-hover hover:dark:border-r-primary-hover-dark',
74
+ // Transition
75
+ 'transition-[border-right]'],
76
+ [OrSidebarPlacement.right]: [
77
+ // Position
78
+ '-left-[1px]',
79
+ // Borders
80
+ 'hover:border-l-2', 'hover:border-l-primary-hover hover:dark:border-l-primary-hover-dark',
81
+ // Transition
82
+ 'transition-[border-left]']
83
+ };
84
+ const SidebarCollapseButton = [
85
+ // Position
86
+ 'absolute', 'top-md', 'inset-y-none', 'z-[1]',
87
+ // Cursor
88
+ 'cursor-ew-resize'];
89
+ const SidebarCollapseButtonSides = {
90
+ [OrSidebarPlacement.left]: [
91
+ // Position
92
+ '-right-[12px]'],
93
+ [OrSidebarPlacement.right]: [
94
+ // Position
95
+ '-left-[12px]']
96
+ };
97
+ const SidebarResizingSides = {
98
+ [OrSidebarPlacement.left]: [
99
+ // Borders
100
+ 'border-r-2', 'border-r-primary-hover dark:border-r-primary-hover-dark'],
101
+ [OrSidebarPlacement.right]: [
102
+ // Borders
103
+ 'border-l-2', 'border-l-primary-hover dark:border-l-primary-hover-dark']
104
+ };
105
+ const SidebarMain = [
106
+ // Layout
107
+ 'flex', 'flex-col', 'grow', 'overflow-x-hidden',
108
+ // Box
109
+ 'min-h-0'];
110
+ const SidebarHeader = [
111
+ // Layout
112
+ 'shrink-0', 'overflow-hidden',
113
+ // Sizing
114
+ 'p-md',
115
+ // Typography
116
+ 'typography-headline-2', 'whitespace-nowrap', 'text-ellipsis'];
117
+ const SidebarContent = [
118
+ // Layout
119
+ 'grow', 'overflow-auto',
120
+ // Sizing
121
+ 'p-md'];
122
+ const SidebarFooter = [
123
+ // Layout
124
+ 'shrink-0', 'overflow-x-hidden',
125
+ // Sizing
126
+ 'p-md',
127
+ // Borders
128
+ 'border-t-[1px]', 'border-t-solid', 'border-t-outline-variant dark:border-t-outline-variant-dark'];
129
+ const CollapseButton = [
130
+ // Box
131
+ 'w-[24px]', 'h-[24px]',
132
+ // Typography
133
+ '!text-[16px]',
134
+ // Borders
135
+ '!border-[1px]', '!border-solid',
136
+ // Theme
137
+ '!text-primary dark:!text-primary-dark', '!bg-background dark:!bg-background-dark', '!border-outline-variant dark:!border-outline-variant-dark', '!outline-none',
138
+ // Theme (hover)
139
+ 'hover:!text-primary hover:dark:!text-primary-dark', 'hover:!bg-primary-opacity-0-08 dark:hover:!bg-primary-opacity-0-08-dark', 'hover:!border-outline dark:hover:!border-outline-dark',
140
+ // Theme (active)
141
+ 'active:!text-primary active:dark:!text-primary-dark', 'active:!bg-primary-opacity-0-12 dark:active:!bg-primary-opacity-0-12-dark', 'active:!border-primary dark:active:!border-primary-dark',
142
+ // Theme (focus)
143
+ 'focus:!text-primary focus:dark:!text-primary-dark', 'focus:!bg-primary-opacity-0-12 dark:focus:!bg-primary-opacity-0-12-dark', 'focus:!border-outline dark:focus:!border-outline-dark',
144
+ // Theme (disabled)
145
+ 'disabled:!text-on-disabled disabled:dark:!text-on-disabled-dark', 'disabled:!bg-background disabled:dark:!bg-background-dark', 'disabled:!border-outline-variant disabled:dark:!border-outline-variant-dark'];
146
+
147
+ var script$1 = defineComponent({
148
+ name: 'OrSidebarCollapseButton',
149
+ components: {
150
+ OrIconButton
151
+ },
152
+ props: {
153
+ /**
154
+ * Must be `true` if sidebar is collapsed.
155
+ */
156
+ modelValue: {
157
+ type: Boolean,
158
+ default: false
159
+ },
160
+ side: {
161
+ type: String,
162
+ default: OrSidebarPlacement.right,
163
+ validator: value => _.includes(_.values(OrSidebarPlacement), value)
164
+ }
165
+ },
166
+ emits: ['update:modelValue'],
167
+ expose: ['root'],
168
+ setup(props) {
169
+ // Refs
170
+ const root = ref();
171
+ const rootStyles = computed(() => [...CollapseButton]);
172
+ const icon = computed(() => props.side === OrSidebarPlacement.left !== props.modelValue ? 'keyboard_arrow_left' : 'keyboard_arrow_right');
173
+ return {
174
+ root,
175
+ rootStyles,
176
+ icon
177
+ };
178
+ }
179
+ });
180
+
181
+ /* script */
182
+ const __vue_script__$1 = script$1;
183
+
184
+ /* template */
185
+ var __vue_render__$1 = function () {
186
+ var _vm = this;
187
+ var _h = _vm.$createElement;
188
+ var _c = _vm._self._c || _h;
189
+ return _c('or-icon-button', {
190
+ ref: "root",
191
+ class: _vm.rootStyles,
192
+ attrs: {
193
+ "icon": {
194
+ icon: _vm.icon,
195
+ size: 'inherit'
196
+ },
197
+ "color": "inherit"
198
+ },
199
+ on: {
200
+ "click": function ($event) {
201
+ return _vm.$emit('update:modelValue', !_vm.modelValue);
202
+ }
203
+ }
204
+ });
205
+ };
206
+ var __vue_staticRenderFns__$1 = [];
207
+
208
+ /* style */
209
+ const __vue_inject_styles__$1 = undefined;
210
+ /* scoped */
211
+ const __vue_scope_id__$1 = undefined;
212
+ /* module identifier */
213
+ const __vue_module_identifier__$1 = undefined;
214
+ /* functional template */
215
+ const __vue_is_functional_template__$1 = false;
216
+ /* style inject */
217
+
218
+ /* style inject SSR */
219
+
220
+ /* style inject shadow dom */
221
+
222
+ const __vue_component__$2 = /*#__PURE__*/normalizeComponent({
223
+ render: __vue_render__$1,
224
+ staticRenderFns: __vue_staticRenderFns__$1
225
+ }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
226
+ var OrSidebarCollapseButton = __vue_component__$2;
227
+
228
+ var script = defineComponent({
229
+ name: 'OrSidebar',
230
+ components: {
231
+ OrSidebarCollapseButton
232
+ },
233
+ props: {
234
+ width: {
235
+ type: Number,
236
+ default: 320,
237
+ validator: value => _.isNumber(value) && value >= 0
238
+ },
239
+ minimumWidth: {
240
+ type: Number,
241
+ default: 256,
242
+ validator: value => _.isNumber(value) && value >= 0
243
+ },
244
+ maximumWidth: {
245
+ type: Number,
246
+ default: 384,
247
+ validator: value => _.isNumber(value) && value >= 0
248
+ },
249
+ /**
250
+ * User may put the component on the right or the left side of a container.
251
+ * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
252
+ *
253
+ * Note: the property doesn't reposition the component in the parent container.
254
+ * @values left, right
255
+ */
256
+ side: {
257
+ type: String,
258
+ default: OrSidebarPlacement.right,
259
+ validator: value => _.includes(_.values(OrSidebarPlacement), value)
260
+ },
261
+ draggable: {
262
+ type: Boolean,
263
+ default: true
264
+ },
265
+ collapsible: {
266
+ type: Boolean,
267
+ default: false
268
+ }
269
+ },
270
+ emits: ['change:width'],
271
+ expose: ['root', 'open', 'close'],
272
+ setup(props, {
273
+ emit
274
+ }) {
275
+ // Refs
276
+ const root = ref();
277
+ const resizeBar = ref(null);
278
+ const parentContainer = computed(() => {
279
+ var _a;
280
+ return (_a = root.value) === null || _a === void 0 ? void 0 : _a.parentElement;
281
+ });
282
+ // Slots
283
+ const {
284
+ toolbar: toolbarSlot
285
+ } = useSlots();
286
+ // State
287
+ const startPositionX = ref(0);
288
+ const isResizing = ref(false);
289
+ const isCollapsed = ref(false);
290
+ const maximumWidth = ref(props.maximumWidth || 384);
291
+ const localWidth = ref(props.width >= props.minimumWidth ? props.width : props.minimumWidth);
292
+ const isShowingToolbar = computed(() => !!toolbarSlot);
293
+ // Styles
294
+ const sidebarStyle = computed(() => ({
295
+ width: (isCollapsed.value ? 16 : localWidth.value) + 'px'
296
+ }));
297
+ const rootStyles = computed(() => ['or-sidebar', ...SidebarRoot]);
298
+ const sidebarStyles = computed(() => [...SidebarBar, ...SidebarSides[props.side]]);
299
+ const toolbarStyles = computed(() => [...SidebarToolbar, ...SidebarToolbarSides[props.side]]);
300
+ const resizeStyles = computed(() => [...SidebarResize, ...SidebarResizeSides[props.side], ...(isResizing.value ? SidebarResizingSides[props.side] : [])]);
301
+ const collapsibleButtonStyles = computed(() => [...SidebarCollapseButton, ...SidebarCollapseButtonSides[props.side]]);
302
+ const mainStyles = computed(() => [...SidebarMain]);
303
+ const headerStyles = computed(() => [...SidebarHeader]);
304
+ const contentStyles = computed(() => [...SidebarContent]);
305
+ const footerStyles = computed(() => [...SidebarFooter]);
306
+ // Effects
307
+ useDraggable(resizeBar, {
308
+ preventDefault: true,
309
+ onStart: (position, event) => {
310
+ document.body.style.cursor = 'ew-resize';
311
+ document.body.style.userSelect = 'none';
312
+ startPositionX.value = event.x;
313
+ isResizing.value = true;
314
+ },
315
+ onMove: position => {
316
+ const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.left ? -1 : 1);
317
+ const newWidth = localWidth.value - delta;
318
+ localWidth.value = newWidth > maximumWidth.value ? maximumWidth.value : newWidth < props.minimumWidth ? props.minimumWidth : newWidth;
319
+ startPositionX.value = position.x;
320
+ },
321
+ onEnd: () => {
322
+ document.body.style.cursor = '';
323
+ document.body.style.userSelect = '';
324
+ isResizing.value = false;
325
+ }
326
+ });
327
+ // Methods
328
+ function open() {
329
+ isCollapsed.value = false;
330
+ }
331
+ function close() {
332
+ isCollapsed.value = true;
333
+ }
334
+ const {
335
+ width: containerWidth
336
+ } = useElementBounding(parentContainer);
337
+ watch(() => props.width, newValue => {
338
+ if (newValue !== localWidth.value) {
339
+ localWidth.value = newValue > maximumWidth.value ? maximumWidth.value : newValue < props.minimumWidth ? props.minimumWidth : newValue;
340
+ }
341
+ });
342
+ watch(() => props.minimumWidth, newMinimum => {
343
+ if (newMinimum > localWidth.value) localWidth.value = newMinimum;
344
+ });
345
+ watch(() => props.maximumWidth, newMaximum => {
346
+ if (newMaximum < maximumWidth.value) maximumWidth.value = newMaximum;
347
+ });
348
+ watch(containerWidth, newMaximum => {
349
+ if (newMaximum < maximumWidth.value) maximumWidth.value = newMaximum;
350
+ });
351
+ watch(maximumWidth, newMaximum => {
352
+ if (newMaximum < localWidth.value) localWidth.value = newMaximum;
353
+ });
354
+ watch(localWidth, val => emit('change:width', val));
355
+ return {
356
+ root,
357
+ resizeBar,
358
+ isResizing,
359
+ isCollapsed,
360
+ localWidth,
361
+ isShowingToolbar,
362
+ sidebarStyle,
363
+ rootStyles,
364
+ sidebarStyles,
365
+ toolbarStyles,
366
+ resizeStyles,
367
+ collapsibleButtonStyles,
368
+ mainStyles,
369
+ headerStyles,
370
+ contentStyles,
371
+ footerStyles,
372
+ open,
373
+ close
374
+ };
375
+ }
376
+ });
377
+
378
+ /* script */
379
+ const __vue_script__ = script;
380
+
381
+ /* template */
382
+ var __vue_render__ = function () {
383
+ var _vm = this;
384
+ var _h = _vm.$createElement;
385
+ var _c = _vm._self._c || _h;
386
+ return _c('aside', {
387
+ ref: "root",
388
+ class: _vm.rootStyles
389
+ }, [_vm.side === 'right' && _vm.isShowingToolbar ? _c('div', {
390
+ class: _vm.toolbarStyles
391
+ }, [_vm._t("toolbar")], 2) : _vm._e(), _vm._v(" "), _c('div', {
392
+ class: _vm.sidebarStyles,
393
+ style: _vm.sidebarStyle
394
+ }, [_vm.draggable && !_vm.isCollapsed ? _c('div', {
395
+ ref: "resizeBar",
396
+ class: _vm.resizeStyles
397
+ }) : _vm._e(), _vm._v(" "), _vm.collapsible ? _c('or-sidebar-collapse-button', {
398
+ class: _vm.collapsibleButtonStyles,
399
+ attrs: {
400
+ "side": _vm.side
401
+ },
402
+ model: {
403
+ value: _vm.isCollapsed,
404
+ callback: function ($$v) {
405
+ _vm.isCollapsed = $$v;
406
+ },
407
+ expression: "isCollapsed"
408
+ }
409
+ }) : _vm._e(), _vm._v(" "), _c('div', {
410
+ directives: [{
411
+ name: "show",
412
+ rawName: "v-show",
413
+ value: !_vm.isCollapsed,
414
+ expression: "!isCollapsed"
415
+ }],
416
+ class: _vm.mainStyles
417
+ }, [_vm.$slots.header ? _c('div', {
418
+ class: _vm.headerStyles
419
+ }, [_vm._t("header")], 2) : _vm._e(), _vm._v(" "), _c('div', {
420
+ class: _vm.contentStyles
421
+ }, [_vm._t("default")], 2)]), _vm._v(" "), _vm.$slots.footer ? _c('div', {
422
+ directives: [{
423
+ name: "show",
424
+ rawName: "v-show",
425
+ value: !_vm.isCollapsed,
426
+ expression: "!isCollapsed"
427
+ }],
428
+ class: _vm.footerStyles
429
+ }, [_vm._t("footer")], 2) : _vm._e()], 1), _vm._v(" "), _vm.side === 'left' && _vm.isShowingToolbar ? _c('div', {
430
+ class: _vm.toolbarStyles
431
+ }, [_vm._t("toolbar")], 2) : _vm._e()]);
432
+ };
433
+ var __vue_staticRenderFns__ = [];
434
+
435
+ /* style */
436
+ const __vue_inject_styles__ = undefined;
437
+ /* scoped */
438
+ const __vue_scope_id__ = undefined;
439
+ /* module identifier */
440
+ const __vue_module_identifier__ = undefined;
441
+ /* functional template */
442
+ const __vue_is_functional_template__ = false;
443
+ /* style inject */
444
+
445
+ /* style inject SSR */
446
+
447
+ /* style inject shadow dom */
448
+
449
+ const __vue_component__ = /*#__PURE__*/normalizeComponent({
450
+ render: __vue_render__,
451
+ staticRenderFns: __vue_staticRenderFns__
452
+ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
453
+ var __vue_component__$1 = __vue_component__;
454
+
455
+ export { OrSidebarPlacement as O, __vue_component__$1 as _ };
@@ -43,7 +43,7 @@ const TagRootVariants = {
43
43
  const TagRootColors = {
44
44
  'default': [
45
45
  // Theme
46
- 'theme-preset-2-primary', 'dark:theme-preset-2-primary-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark'],
46
+ 'theme-preset-2-primary', 'dark:theme-preset-2-primary-dark'],
47
47
  'danger': [
48
48
  // Theme
49
49
  'theme-preset-2-error', 'dark:theme-preset-2-error-dark']
@@ -25,7 +25,7 @@ export { O as OrError } from '../OrError-31503e4c.js';
25
25
  export { _ as OrErrorTagV3 } from '../OrErrorTag-d0c5bcf4.js';
26
26
  export { O as OrErrorV3 } from '../OrError-aad17598.js';
27
27
  export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-9fb413f9.js';
28
- export { a as ExpansionPanelColor, E as ExpansionPanelVariant, O as OrExpansionPanelV3 } from '../OrExpansionPanel-995caa85.js';
28
+ export { a as ExpansionPanelColor, E as ExpansionPanelVariant, O as OrExpansionPanelV3 } from '../OrExpansionPanel-d9a260e2.js';
29
29
  export { F as FabColor, _ as OrFabV3 } from '../OrFab-7cc75893.js';
30
30
  export { O as OrFloating, b as OrFloatingHideStrategy, a as OrFloatingPlacements } from '../OrFloating-554d6f58.js';
31
31
  export { O as OrHint } from '../OrHint-fabea4cf.js';
@@ -68,9 +68,9 @@ export { _ as OrRadioV3 } from '../OrRadio-cd39b20b.js';
68
68
  export { O as OrSearchV3 } from '../OrSearch-53470b0e.js';
69
69
  export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-21cc914e.js';
70
70
  export { _ as OrSelect } from '../OrSelect-a23d4210.js';
71
- export { _ as OrSelectV3 } from '../OrSelect-67dc7976.js';
71
+ export { _ as OrSelectV3 } from '../OrSelect-c49e1bcf.js';
72
72
  export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-e2b2c9ec.js';
73
- export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-c95ef614.js';
73
+ export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-2a7d62a8.js';
74
74
  export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-242d22f3.js';
75
75
  export { _ as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText-516993b4.js';
76
76
  export { _ as OrSlider } from '../OrSlider-59d05856.js';
@@ -84,7 +84,7 @@ export { O as OrTabV3 } from '../OrTab-dd949240.js';
84
84
  export { _ as OrTabs } from '../OrTabs-4c8f6422.js';
85
85
  export { _ as OrTabsV3, T as TabsVariant } from '../OrTabs-42f7c52c.js';
86
86
  export { _ as OrTag } from '../OrTag-79e48fec.js';
87
- export { O as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-30fecee5.js';
87
+ export { O as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-e3e6fdd6.js';
88
88
  export { O as OrTeleport } from '../OrTeleportVue2-3544f185.js';
89
89
  export { O as OrTeleportV3 } from '../OrTeleport.vue2-e9ba3054.js';
90
90
  export { _ as OrTextV3 } from '../OrText-eac4b9f5.js';
@@ -6,11 +6,17 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
6
6
  headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
7
7
  addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
8
8
  expanded: import("@vue/composition-api").Ref<boolean>;
9
+ open: () => void;
10
+ close: () => void;
9
11
  }> & import("@vue/composition-api").Data, {}, {}, {
10
12
  label: {
11
13
  type: StringConstructor;
12
14
  required: true;
13
15
  };
16
+ isOpen: {
17
+ type: PropType<boolean>;
18
+ default: boolean;
19
+ };
14
20
  variant: {
15
21
  type: PropType<ExpansionPanelVariant>;
16
22
  default: ExpansionPanelVariant;
@@ -28,6 +34,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
28
34
  type: StringConstructor;
29
35
  required: true;
30
36
  };
37
+ isOpen: {
38
+ type: PropType<boolean>;
39
+ default: boolean;
40
+ };
31
41
  variant: {
32
42
  type: PropType<ExpansionPanelVariant>;
33
43
  default: ExpansionPanelVariant;
@@ -42,21 +52,30 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
42
52
  };
43
53
  }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
44
54
  label: string;
55
+ isOpen: boolean;
45
56
  variant: ExpansionPanelVariant;
46
57
  color: ExpansionPanelColor;
47
58
  disabled: boolean;
48
- } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
59
+ } & {} & {
60
+ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
61
+ }, import("@vue/composition-api").ShallowUnwrapRef<{
49
62
  root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
50
63
  rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
51
64
  headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
52
65
  addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
53
66
  expanded: import("@vue/composition-api").Ref<boolean>;
54
- }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
67
+ open: () => void;
68
+ close: () => void;
69
+ }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
55
70
  label: string;
71
+ isOpen: boolean;
56
72
  variant: ExpansionPanelVariant;
57
73
  color: ExpansionPanelColor;
58
74
  disabled: boolean;
59
- } & {}, {
75
+ } & {} & {
76
+ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
77
+ }, {
78
+ isOpen: boolean;
60
79
  variant: ExpansionPanelVariant;
61
80
  color: ExpansionPanelColor;
62
81
  disabled: boolean;
@@ -1,4 +1,4 @@
1
- export { a as ExpansionPanelColor, E as ExpansionPanelVariant, O as OrExpansionPanelV3 } from '../../OrExpansionPanel-995caa85.js';
1
+ export { a as ExpansionPanelColor, E as ExpansionPanelVariant, O as OrExpansionPanelV3 } from '../../OrExpansionPanel-d9a260e2.js';
2
2
  import '../../index-fa6eb4ca.js';
3
3
  import 'vue';
4
4
  import '@vue/composition-api/dist/vue-composition-api.mjs';
@@ -1,4 +1,4 @@
1
- export { _ as OrSelectV3 } from '../../OrSelect-67dc7976.js';
1
+ export { _ as OrSelectV3 } from '../../OrSelect-c49e1bcf.js';
2
2
  export { a as SelectSize } from '../../OrInputBox-79ec54ad.js';
3
3
  import '../../index-fa6eb4ca.js';
4
4
  import 'vue';
@@ -9,7 +9,7 @@ import '../../useClassAttribute-9bf33346.js';
9
9
  import '../../normalize-component-6e8e3d80.js';
10
10
  import '../../browser-82dea9ed.js';
11
11
  import '../../OrError-aad17598.js';
12
- import '../../OrExpansionPanel-995caa85.js';
12
+ import '../../OrExpansionPanel-d9a260e2.js';
13
13
  import '../../OrIcon-8625385f.js';
14
14
  import '../../OrHint-f38a1940.js';
15
15
  import '../../OrInput-82ccfe00.js';
@@ -25,6 +25,6 @@ import 'portal-vue';
25
25
  import '../../useElevation-aac032f4.js';
26
26
  import '../../useResponsive-e13dfbb0.js';
27
27
  import '../../OrMenuItem-26420908.js';
28
- import '../../OrTag-30fecee5.js';
28
+ import '../../OrTag-e3e6fdd6.js';
29
29
  import '../../dropdown-open-e2a93aaf.js';
30
30
  import '../../useOverflow-bae6342f.js';