@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,4 +1,4 @@
1
- import { defineComponent, ref, computed } from 'vue';
1
+ import { defineComponent, ref, computed, watch } from 'vue';
2
2
  import './OrIcon-d878b768.js';
3
3
  import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
4
4
  import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
@@ -73,6 +73,10 @@ var script = defineComponent({
73
73
  type: String,
74
74
  required: true
75
75
  },
76
+ isOpen: {
77
+ type: Boolean,
78
+ default: false
79
+ },
76
80
  variant: {
77
81
  type: String,
78
82
  default: ExpansionPanelVariant.Default
@@ -86,8 +90,9 @@ var script = defineComponent({
86
90
  default: false
87
91
  }
88
92
  },
89
- expose: ['root'],
90
- setup(props) {
93
+ emits: ['open', 'close'],
94
+ expose: ['root', 'open', 'close'],
95
+ setup(props, context) {
91
96
  // Refs
92
97
  const root = ref();
93
98
  // Styles
@@ -97,12 +102,34 @@ var script = defineComponent({
97
102
  const addonStyles = computed(() => [...ExpansionPanelAddon]);
98
103
  // State
99
104
  const expanded = ref(false);
105
+ // Events
106
+ watch(expanded, value => {
107
+ context.emit(value ? 'open' : 'close');
108
+ });
109
+ watch(() => props.isOpen, newIsOpen => {
110
+ if (newIsOpen) {
111
+ open();
112
+ } else {
113
+ close();
114
+ }
115
+ }, {
116
+ immediate: true
117
+ });
118
+ // Methods
119
+ function open() {
120
+ expanded.value = true;
121
+ }
122
+ function close() {
123
+ expanded.value = false;
124
+ }
100
125
  return {
101
126
  root,
102
127
  rootStyles,
103
128
  headerStyles,
104
129
  addonStyles,
105
- expanded
130
+ expanded,
131
+ open,
132
+ close
106
133
  };
107
134
  }
108
135
  });
@@ -2,14 +2,14 @@ import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDi
2
2
  import { s as script$1 } from './OrCheckbox.vue_vue_type_script_lang-8b36e06c.js';
3
3
  import { s as styleInject } from './style-inject.es-4c6f2515.js';
4
4
  import './OrHint-9592499e.js';
5
- import { s as script$2 } from './OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js';
5
+ import { s as script$2 } from './OrExpansionPanel.vue_vue_type_script_lang-5360f580.js';
6
6
  import './OrIcon-d878b768.js';
7
7
  import './OrInput-a4f220ed.js';
8
8
  import './OrInputBox-eb54d73d.js';
9
9
  import './OrLabel-c6873e79.js';
10
10
  import './OrMenuItem-4feaba6c.js';
11
11
  import './OrPopover-c462ce77.js';
12
- import { s as script$3 } from './OrTag.vue_vue_type_script_lang-3e30f662.js';
12
+ import { s as script$3 } from './OrTag.vue_vue_type_script_lang-e45c345b.js';
13
13
  import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-293d2de2.js';
14
14
  import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
15
15
  import { u as useOverflow } from './useOverflow-6dce216b.js';
@@ -76,7 +76,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
76
76
  class: normalizeClass(_ctx.headerStyles),
77
77
  tabindex: !_ctx.disabled ? 0 : null,
78
78
  disabled: _ctx.disabled ? '' : null,
79
- onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.expanded = !_ctx.expanded, ["stop"]))
79
+ onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.expanded ? _ctx.close() : _ctx.open(), ["stop"]))
80
80
  }, [createVNode(_component_OrIcon, {
81
81
  class: normalizeClass([_ctx.expanded ? 'rotate-0' : 'rotate-[-90deg]']),
82
82
  icon: 'expand_more',
@@ -0,0 +1,347 @@
1
+ import { useDraggable, useElementBounding } from '@vueuse/core';
2
+ import _ from 'lodash';
3
+ import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, normalizeClass, useSlots, watch } from 'vue';
4
+ import './OrIconButton-cd62526d.js';
5
+ import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-aefcf30d.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-row', 'shrink-0',
18
+ // Box
19
+ 'min-w-0', 'h-auto', 'p-0',
20
+ // Theme
21
+ 'bg-background', 'dark:bg-background-dark'];
22
+ const SidebarBar = [
23
+ // Position
24
+ 'relative',
25
+ // Layout
26
+ 'flex', 'flex-col', 'shrink-0', 'grow',
27
+ // Box
28
+ 'min-h-0', 'p-0',
29
+ // Theme
30
+ 'text-on-background', 'dark:text-on-background-dark',
31
+ // Transition
32
+ 'transition-[width]'];
33
+ const SidebarToolbar = [
34
+ // Position
35
+ 'relative',
36
+ // Layout
37
+ 'flex', 'flex-col', 'shrink-0', 'grow', 'overflow-auto', 'items-center',
38
+ // Sizing
39
+ 'gap-md',
40
+ // Box
41
+ 'min-h-0', 'min-w-xl', 'p-[6px]', 'pt-[56px]', 'pb-md+',
42
+ // Theme
43
+ 'text-outline', 'dark:text-outline-dark'];
44
+ const SidebarSides = {
45
+ [OrSidebarPlacement.left]: [
46
+ // Borders
47
+ 'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
48
+ [OrSidebarPlacement.right]: [
49
+ // Borders
50
+ 'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
51
+ };
52
+ const SidebarToolbarSides = {
53
+ [OrSidebarPlacement.left]: [
54
+ // Borders
55
+ 'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
56
+ [OrSidebarPlacement.right]: [
57
+ // Borders
58
+ 'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
59
+ };
60
+ const SidebarResize = [
61
+ // Position
62
+ 'absolute', 'inset-y-none', 'z-[1]',
63
+ // Box
64
+ 'w-sm+', 'h-[100%]',
65
+ // Cursor
66
+ 'cursor-ew-resize'];
67
+ const SidebarResizeSides = {
68
+ [OrSidebarPlacement.left]: [
69
+ // Position
70
+ '-right-[1px]',
71
+ // Borders
72
+ 'hover:border-r-2', 'hover:border-r-primary-hover hover:dark:border-r-primary-hover-dark',
73
+ // Transition
74
+ 'transition-[border-right]'],
75
+ [OrSidebarPlacement.right]: [
76
+ // Position
77
+ '-left-[1px]',
78
+ // Borders
79
+ 'hover:border-l-2', 'hover:border-l-primary-hover hover:dark:border-l-primary-hover-dark',
80
+ // Transition
81
+ 'transition-[border-left]']
82
+ };
83
+ const SidebarCollapseButton = [
84
+ // Position
85
+ 'absolute', 'top-md', 'inset-y-none', 'z-[1]',
86
+ // Cursor
87
+ 'cursor-ew-resize'];
88
+ const SidebarCollapseButtonSides = {
89
+ [OrSidebarPlacement.left]: [
90
+ // Position
91
+ '-right-[12px]'],
92
+ [OrSidebarPlacement.right]: [
93
+ // Position
94
+ '-left-[12px]']
95
+ };
96
+ const SidebarResizingSides = {
97
+ [OrSidebarPlacement.left]: [
98
+ // Borders
99
+ 'border-r-2', 'border-r-primary-hover dark:border-r-primary-hover-dark'],
100
+ [OrSidebarPlacement.right]: [
101
+ // Borders
102
+ 'border-l-2', 'border-l-primary-hover dark:border-l-primary-hover-dark']
103
+ };
104
+ const SidebarMain = [
105
+ // Layout
106
+ 'flex', 'flex-col', 'grow', 'overflow-x-hidden',
107
+ // Box
108
+ 'min-h-0'];
109
+ const SidebarHeader = [
110
+ // Layout
111
+ 'shrink-0', 'overflow-hidden',
112
+ // Sizing
113
+ 'p-md',
114
+ // Typography
115
+ 'typography-headline-2', 'whitespace-nowrap', 'text-ellipsis'];
116
+ const SidebarContent = [
117
+ // Layout
118
+ 'grow', 'overflow-auto',
119
+ // Sizing
120
+ 'p-md'];
121
+ const SidebarFooter = [
122
+ // Layout
123
+ 'shrink-0', 'overflow-x-hidden',
124
+ // Sizing
125
+ 'p-md',
126
+ // Borders
127
+ 'border-t-[1px]', 'border-t-solid', 'border-t-outline-variant dark:border-t-outline-variant-dark'];
128
+ const CollapseButton = [
129
+ // Box
130
+ 'w-[24px]', 'h-[24px]',
131
+ // Typography
132
+ '!text-[16px]',
133
+ // Borders
134
+ '!border-[1px]', '!border-solid',
135
+ // Theme
136
+ '!text-primary dark:!text-primary-dark', '!bg-background dark:!bg-background-dark', '!border-outline-variant dark:!border-outline-variant-dark', '!outline-none',
137
+ // Theme (hover)
138
+ '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',
139
+ // Theme (active)
140
+ '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',
141
+ // Theme (focus)
142
+ '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',
143
+ // Theme (disabled)
144
+ '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'];
145
+
146
+ var script$1 = defineComponent({
147
+ name: 'OrSidebarCollapseButton',
148
+ components: {
149
+ OrIconButton: script$2
150
+ },
151
+ props: {
152
+ /**
153
+ * Must be `true` if sidebar is collapsed.
154
+ */
155
+ modelValue: {
156
+ type: Boolean,
157
+ default: false
158
+ },
159
+ side: {
160
+ type: String,
161
+ default: OrSidebarPlacement.right,
162
+ validator: value => _.includes(_.values(OrSidebarPlacement), value)
163
+ }
164
+ },
165
+ emits: ['update:modelValue'],
166
+ expose: ['root'],
167
+ setup(props) {
168
+ // Refs
169
+ const root = ref();
170
+ const rootStyles = computed(() => [...CollapseButton]);
171
+ const icon = computed(() => props.side === OrSidebarPlacement.left !== props.modelValue ? 'keyboard_arrow_left' : 'keyboard_arrow_right');
172
+ return {
173
+ root,
174
+ rootStyles,
175
+ icon
176
+ };
177
+ }
178
+ });
179
+
180
+ function render(_ctx, _cache, $props, $setup, $data, $options) {
181
+ const _component_or_icon_button = resolveComponent("or-icon-button");
182
+ return openBlock(), createBlock(_component_or_icon_button, {
183
+ ref: "root",
184
+ class: normalizeClass(_ctx.rootStyles),
185
+ icon: {
186
+ icon: _ctx.icon,
187
+ size: 'inherit'
188
+ },
189
+ color: "inherit",
190
+ onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('update:modelValue', !_ctx.modelValue))
191
+ }, null, 8 /* PROPS */, ["class", "icon"]);
192
+ }
193
+
194
+ script$1.render = render;
195
+ script$1.__file = "src/components/or-sidebar-v3/OrSidebarCollapseButton.vue";
196
+
197
+ var script = defineComponent({
198
+ name: 'OrSidebar',
199
+ components: {
200
+ OrSidebarCollapseButton: script$1
201
+ },
202
+ props: {
203
+ width: {
204
+ type: Number,
205
+ default: 320,
206
+ validator: value => _.isNumber(value) && value >= 0
207
+ },
208
+ minimumWidth: {
209
+ type: Number,
210
+ default: 256,
211
+ validator: value => _.isNumber(value) && value >= 0
212
+ },
213
+ maximumWidth: {
214
+ type: Number,
215
+ default: 384,
216
+ validator: value => _.isNumber(value) && value >= 0
217
+ },
218
+ /**
219
+ * User may put the component on the right or the left side of a container.
220
+ * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
221
+ *
222
+ * Note: the property doesn't reposition the component in the parent container.
223
+ * @values left, right
224
+ */
225
+ side: {
226
+ type: String,
227
+ default: OrSidebarPlacement.right,
228
+ validator: value => _.includes(_.values(OrSidebarPlacement), value)
229
+ },
230
+ draggable: {
231
+ type: Boolean,
232
+ default: true
233
+ },
234
+ collapsible: {
235
+ type: Boolean,
236
+ default: false
237
+ }
238
+ },
239
+ emits: ['change:width'],
240
+ expose: ['root', 'open', 'close'],
241
+ setup(props, {
242
+ emit
243
+ }) {
244
+ // Refs
245
+ const root = ref();
246
+ const resizeBar = ref(null);
247
+ const parentContainer = computed(() => {
248
+ var _a;
249
+ return (_a = root.value) === null || _a === void 0 ? void 0 : _a.parentElement;
250
+ });
251
+ // Slots
252
+ const {
253
+ toolbar: toolbarSlot
254
+ } = useSlots();
255
+ // State
256
+ const startPositionX = ref(0);
257
+ const isResizing = ref(false);
258
+ const isCollapsed = ref(false);
259
+ const maximumWidth = ref(props.maximumWidth || 384);
260
+ const localWidth = ref(props.width >= props.minimumWidth ? props.width : props.minimumWidth);
261
+ const isShowingToolbar = computed(() => !!toolbarSlot);
262
+ // Styles
263
+ const sidebarStyle = computed(() => ({
264
+ width: (isCollapsed.value ? 16 : localWidth.value) + 'px'
265
+ }));
266
+ const rootStyles = computed(() => ['or-sidebar', ...SidebarRoot]);
267
+ const sidebarStyles = computed(() => [...SidebarBar, ...SidebarSides[props.side]]);
268
+ const toolbarStyles = computed(() => [...SidebarToolbar, ...SidebarToolbarSides[props.side]]);
269
+ const resizeStyles = computed(() => [...SidebarResize, ...SidebarResizeSides[props.side], ...(isResizing.value ? SidebarResizingSides[props.side] : [])]);
270
+ const collapsibleButtonStyles = computed(() => [...SidebarCollapseButton, ...SidebarCollapseButtonSides[props.side]]);
271
+ const mainStyles = computed(() => [...SidebarMain]);
272
+ const headerStyles = computed(() => [...SidebarHeader]);
273
+ const contentStyles = computed(() => [...SidebarContent]);
274
+ const footerStyles = computed(() => [...SidebarFooter]);
275
+ // Effects
276
+ useDraggable(resizeBar, {
277
+ preventDefault: true,
278
+ onStart: (position, event) => {
279
+ document.body.style.cursor = 'ew-resize';
280
+ document.body.style.userSelect = 'none';
281
+ startPositionX.value = event.x;
282
+ isResizing.value = true;
283
+ },
284
+ onMove: position => {
285
+ const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.left ? -1 : 1);
286
+ const newWidth = localWidth.value - delta;
287
+ localWidth.value = newWidth > maximumWidth.value ? maximumWidth.value : newWidth < props.minimumWidth ? props.minimumWidth : newWidth;
288
+ startPositionX.value = position.x;
289
+ },
290
+ onEnd: () => {
291
+ document.body.style.cursor = '';
292
+ document.body.style.userSelect = '';
293
+ isResizing.value = false;
294
+ }
295
+ });
296
+ // Methods
297
+ function open() {
298
+ isCollapsed.value = false;
299
+ }
300
+ function close() {
301
+ isCollapsed.value = true;
302
+ }
303
+ const {
304
+ width: containerWidth
305
+ } = useElementBounding(parentContainer);
306
+ watch(() => props.width, newValue => {
307
+ if (newValue !== localWidth.value) {
308
+ localWidth.value = newValue > maximumWidth.value ? maximumWidth.value : newValue < props.minimumWidth ? props.minimumWidth : newValue;
309
+ }
310
+ });
311
+ watch(() => props.minimumWidth, newMinimum => {
312
+ if (newMinimum > localWidth.value) localWidth.value = newMinimum;
313
+ });
314
+ watch(() => props.maximumWidth, newMaximum => {
315
+ if (newMaximum < maximumWidth.value) maximumWidth.value = newMaximum;
316
+ });
317
+ watch(containerWidth, newMaximum => {
318
+ if (newMaximum < maximumWidth.value) maximumWidth.value = newMaximum;
319
+ });
320
+ watch(maximumWidth, newMaximum => {
321
+ if (newMaximum < localWidth.value) localWidth.value = newMaximum;
322
+ });
323
+ watch(localWidth, val => emit('change:width', val));
324
+ return {
325
+ root,
326
+ resizeBar,
327
+ isResizing,
328
+ isCollapsed,
329
+ localWidth,
330
+ isShowingToolbar,
331
+ sidebarStyle,
332
+ rootStyles,
333
+ sidebarStyles,
334
+ toolbarStyles,
335
+ resizeStyles,
336
+ collapsibleButtonStyles,
337
+ mainStyles,
338
+ headerStyles,
339
+ contentStyles,
340
+ footerStyles,
341
+ open,
342
+ close
343
+ };
344
+ }
345
+ });
346
+
347
+ export { OrSidebarPlacement as O, script as s };
@@ -42,7 +42,7 @@ const TagRootVariants = {
42
42
  const TagRootColors = {
43
43
  'default': [
44
44
  // Theme
45
- 'theme-preset-2-primary', 'dark:theme-preset-2-primary-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark'],
45
+ 'theme-preset-2-primary', 'dark:theme-preset-2-primary-dark'],
46
46
  'danger': [
47
47
  // Theme
48
48
  'theme-preset-2-error', 'dark:theme-preset-2-error-dark']
@@ -25,7 +25,7 @@ export { s as OrError } from '../OrError.vue_vue_type_script_lang-7c39e012.js';
25
25
  export { s as OrErrorTagV3 } from '../OrErrorTag.vue_vue_type_script_lang-4828c387.js';
26
26
  export { s as OrErrorV3 } from '../OrError.vue_vue_type_script_lang-cc6c135f.js';
27
27
  export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState.vue_vue_type_script_lang-da7d6c42.js';
28
- export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js';
28
+ export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel.vue_vue_type_script_lang-5360f580.js';
29
29
  export { F as FabColor, s as OrFabV3 } from '../OrFab.vue_vue_type_script_lang-2adeaed6.js';
30
30
  export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating.vue_vue_type_script_lang-8bf2b7ae.js';
31
31
  export { s as OrHint } from '../OrHint.vue_vue_type_script_lang-78598c8e.js';
@@ -68,9 +68,9 @@ export { s as OrRadioV3 } from '../OrRadio.vue_vue_type_script_lang-2e666a56.js'
68
68
  export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-06f318ca.js';
69
69
  export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl.vue_vue_type_script_lang-579406f5.js';
70
70
  export { s as OrSelect } from '../OrSelect.vue_vue_type_script_lang-26c0a70a.js';
71
- export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-29aed61b.js';
71
+ export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-58e5a52b.js';
72
72
  export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar.vue_vue_type_script_lang-7c55ac0a.js';
73
- export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-ce0b152c.js';
73
+ export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-b4fa1550.js';
74
74
  export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText.vue_vue_type_script_lang-f3f989c3.js';
75
75
  export { s as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText.vue_vue_type_script_lang-577a1dc9.js';
76
76
  export { s as OrSlider } from '../OrSlider.vue_vue_type_script_lang-d47ff040.js';
@@ -84,7 +84,7 @@ export { s as OrTabV3 } from '../OrTab.vue_vue_type_script_lang-134ad9d1.js';
84
84
  export { s as OrTabs } from '../OrTabs.vue_vue_type_script_lang-40e2a6e9.js';
85
85
  export { s as OrTabsV3, T as TabsVariant } from '../OrTabs.vue_vue_type_script_lang-61b79a5a.js';
86
86
  export { s as OrTag } from '../OrTag.vue_vue_type_script_lang-8c526c11.js';
87
- export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag.vue_vue_type_script_lang-3e30f662.js';
87
+ export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag.vue_vue_type_script_lang-e45c345b.js';
88
88
  export { s as OrTeleport } from '../OrTeleportVue3-012351e1.js';
89
89
  export { s as OrTeleportV3 } from '../OrTeleport.vue3.vue_vue_type_script_lang-4dc70cf1.js';
90
90
  export { s as OrTextV3 } from '../OrText.vue_vue_type_script_lang-d9525d49.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, s as OrExpansionPanelV3 } from '../../OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js';
1
+ export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../../OrExpansionPanel.vue_vue_type_script_lang-5360f580.js';
2
2
  import 'vue';
3
3
  import '../../OrIcon-d878b768.js';
4
4
  import '../../OrIcon.vue_vue_type_script_lang-a119a715.js';
@@ -1,4 +1,4 @@
1
- export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-29aed61b.js';
1
+ export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-58e5a52b.js';
2
2
  export { a as SelectSize } from '../../OrInputBox.vue_vue_type_script_lang-5ee4ee45.js';
3
3
  import 'vue';
4
4
  import '../../OrCheckbox.vue_vue_type_script_lang-8b36e06c.js';
@@ -9,7 +9,7 @@ import '../../style-inject.es-4c6f2515.js';
9
9
  import '../../OrHint-9592499e.js';
10
10
  import '../../OrError.vue_vue_type_script_lang-cc6c135f.js';
11
11
  import '../../OrHint.vue_vue_type_script_lang-8e657168.js';
12
- import '../../OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js';
12
+ import '../../OrExpansionPanel.vue_vue_type_script_lang-5360f580.js';
13
13
  import '../../OrIcon-d878b768.js';
14
14
  import '../../OrIcon.vue_vue_type_script_lang-a119a715.js';
15
15
  import '../../OrInput-a4f220ed.js';
@@ -29,6 +29,6 @@ import '../../useResponsive-9d397e2a.js';
29
29
  import '../../OrInputBox-eb54d73d.js';
30
30
  import '../../OrMenuItem-4feaba6c.js';
31
31
  import '../../OrMenuItem.vue_vue_type_script_lang-0ffaef05.js';
32
- import '../../OrTag.vue_vue_type_script_lang-3e30f662.js';
32
+ import '../../OrTag.vue_vue_type_script_lang-e45c345b.js';
33
33
  import '../../dropdown-open-293d2de2.js';
34
34
  import '../../useOverflow-6dce216b.js';
@@ -10,7 +10,17 @@ export declare const Default: StoryFn<import("vue").ComponentOptions<import("vue
10
10
  } | string[], {} & {}, {
11
11
  [x: number]: string;
12
12
  } | {}, true>)>;
13
- export declare const WithMinimumWidth: 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, {
13
+ export declare const WithCustomWidthConstraints: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
14
+ [x: string]: ((...args: any[]) => any) | null;
15
+ } | string[], {} & {}, {
16
+ [x: number]: string;
17
+ } | {}, true>)>;
18
+ export declare const NotDraggable: 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, {
19
+ [x: string]: ((...args: any[]) => any) | null;
20
+ } | string[], {} & {}, {
21
+ [x: number]: string;
22
+ } | {}, true>)>;
23
+ export declare const Collapsible: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
14
24
  [x: string]: ((...args: any[]) => any) | null;
15
25
  } | string[], {} & {}, {
16
26
  [x: number]: string;
@@ -30,8 +40,33 @@ export declare const WithFooter: StoryFn<import("vue").ComponentOptions<import("
30
40
  } | string[], {} & {}, {
31
41
  [x: number]: string;
32
42
  } | {}, true>)>;
43
+ export declare const WithToolbar: 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, {
44
+ [x: string]: ((...args: any[]) => any) | null;
45
+ } | string[], {} & {}, {
46
+ [x: number]: string;
47
+ } | {}, true>)>;
48
+ export declare const CollapsibleWithToolbar: 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, {
49
+ [x: string]: ((...args: any[]) => any) | null;
50
+ } | string[], {} & {}, {
51
+ [x: number]: string;
52
+ } | {}, true>)>;
53
+ export declare const WithTabs: 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, {
54
+ [x: string]: ((...args: any[]) => any) | null;
55
+ } | string[], {} & {}, {
56
+ [x: number]: string;
57
+ } | {}, true>)>;
33
58
  export declare const LeftSidebar: 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, {
34
59
  [x: string]: ((...args: any[]) => any) | null;
35
60
  } | string[], {} & {}, {
36
61
  [x: number]: string;
37
62
  } | {}, true>)>;
63
+ export declare const WithLeftToolbar: 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, {
64
+ [x: string]: ((...args: any[]) => any) | null;
65
+ } | string[], {} & {}, {
66
+ [x: number]: string;
67
+ } | {}, true>)>;
68
+ export declare const CollapsibleWithWithLeftToolbar: 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, {
69
+ [x: string]: ((...args: any[]) => any) | null;
70
+ } | string[], {} & {}, {
71
+ [x: number]: string;
72
+ } | {}, true>)>;