@onereach/ui-components 2.72.2-beta.2265.0 → 2.72.2-beta.2267.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 (89) hide show
  1. package/dist/bundled/v2/{OrCardCollection-06ecb8e1.js → OrCardCollection-4ac89ea5.js} +1 -1
  2. package/dist/bundled/v2/{OrSearch-bb87b34c.js → OrSearch-09fd004c.js} +2 -1
  3. package/dist/bundled/v2/{OrSidebar-468106b9.js → OrSidebar-c95ef614.js} +34 -155
  4. package/dist/bundled/v2/components/index.js +3 -4
  5. package/dist/bundled/v2/components/or-card-collection-v3/index.js +2 -2
  6. package/dist/bundled/v2/components/or-search-v3/index.js +1 -1
  7. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  8. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  9. package/dist/bundled/v2/components/or-sidebar-v3/index.js +1 -13
  10. package/dist/bundled/v2/components/or-sidebar-v3/styles.d.ts +1 -7
  11. package/dist/bundled/v2/index.js +4 -5
  12. package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-e2980d04.js → OrCardCollection.vue_vue_type_script_lang-f76c3264.js} +1 -1
  13. package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-321907ec.js → OrSearch.vue_vue_type_script_lang-c054c8db.js} +2 -1
  14. package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-ce0b152c.js +181 -0
  15. package/dist/bundled/v3/components/index.js +3 -4
  16. package/dist/bundled/v3/components/or-card-collection-v3/index.js +2 -2
  17. package/dist/bundled/v3/components/or-search-v3/index.js +1 -1
  18. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  19. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  20. package/dist/bundled/v3/components/or-sidebar-v3/index.js +2 -16
  21. package/dist/bundled/v3/components/or-sidebar-v3/styles.d.ts +1 -7
  22. package/dist/bundled/v3/index.js +12 -29
  23. package/dist/esm/v2/{OrCardCollection-251ab033.js → OrCardCollection-5a9eda35.js} +1 -1
  24. package/dist/esm/v2/{OrSearch-f42d588d.js → OrSearch-7411388b.js} +2 -1
  25. package/dist/esm/v2/{OrSidebar-f7fc1179.js → OrSidebar-fabc7bc9.js} +34 -155
  26. package/dist/esm/v2/components/index.js +3 -4
  27. package/dist/esm/v2/components/or-card-collection-v3/index.js +2 -2
  28. package/dist/esm/v2/components/or-search-v3/index.js +1 -1
  29. package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  30. package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  31. package/dist/esm/v2/components/or-sidebar-v3/index.js +1 -13
  32. package/dist/esm/v2/components/or-sidebar-v3/styles.d.ts +1 -7
  33. package/dist/esm/v2/index.js +3 -4
  34. package/dist/esm/v3/{OrCardCollection-8b8e3745.js → OrCardCollection-e4fde5b4.js} +1 -1
  35. package/dist/esm/v3/{OrSearch-4c5c44f2.js → OrSearch-5406bf03.js} +2 -1
  36. package/dist/esm/v3/OrSidebar-a62972f5.js +206 -0
  37. package/dist/esm/v3/components/index.js +3 -4
  38. package/dist/esm/v3/components/or-card-collection-v3/index.js +2 -2
  39. package/dist/esm/v3/components/or-search-v3/index.js +1 -1
  40. package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  41. package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  42. package/dist/esm/v3/components/or-sidebar-v3/index.js +1 -12
  43. package/dist/esm/v3/components/or-sidebar-v3/styles.d.ts +1 -7
  44. package/dist/esm/v3/index.js +3 -4
  45. package/package.json +1 -1
  46. package/src/components/or-search-v3/OrSearch.vue +2 -1
  47. package/src/components/or-sidebar-v3/OrSidebar.docs.mdx +0 -6
  48. package/src/components/or-sidebar-v3/OrSidebar.stories3.ts +12 -253
  49. package/src/components/or-sidebar-v3/OrSidebar.vue +23 -130
  50. package/src/components/or-sidebar-v3/styles.ts +9 -114
  51. package/dist/bundled/v2/OrSidebarCollapseButton-1161aef8.js +0 -121
  52. package/dist/bundled/v2/components/or-sidebar-v3/partials/index.d.ts +0 -1
  53. package/dist/bundled/v2/components/or-sidebar-v3/partials/index.js +0 -18
  54. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +0 -12
  55. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +0 -53
  56. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +0 -1
  57. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +0 -18
  58. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +0 -2
  59. package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-a68e0381.js +0 -291
  60. package/dist/bundled/v3/OrSidebarCollapseButton.vue_vue_type_script_lang-31f02a78.js +0 -71
  61. package/dist/bundled/v3/components/or-sidebar-v3/partials/index.d.ts +0 -1
  62. package/dist/bundled/v3/components/or-sidebar-v3/partials/index.js +0 -17
  63. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +0 -12
  64. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +0 -53
  65. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +0 -1
  66. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +0 -17
  67. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +0 -2
  68. package/dist/esm/v2/OrSidebarCollapseButton-3b28945e.js +0 -119
  69. package/dist/esm/v2/components/or-sidebar-v3/partials/index.d.ts +0 -1
  70. package/dist/esm/v2/components/or-sidebar-v3/partials/index.js +0 -16
  71. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +0 -12
  72. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +0 -53
  73. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +0 -1
  74. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +0 -16
  75. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +0 -2
  76. package/dist/esm/v3/OrSidebar-dbeffb9d.js +0 -313
  77. package/dist/esm/v3/OrSidebarCollapseButton-5478da75.js +0 -90
  78. package/dist/esm/v3/components/or-sidebar-v3/partials/index.d.ts +0 -1
  79. package/dist/esm/v3/components/or-sidebar-v3/partials/index.js +0 -15
  80. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +0 -12
  81. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +0 -53
  82. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +0 -1
  83. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +0 -15
  84. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +0 -2
  85. package/src/components/or-sidebar-v3/partials/index.ts +0 -1
  86. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.ts +0 -48
  87. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue +0 -74
  88. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.ts +0 -1
  89. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.ts +0 -50
@@ -1,291 +0,0 @@
1
- import { useDraggable, useElementBounding } from '@vueuse/core';
2
- import _ from 'lodash';
3
- import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, defineComponent, ref, computed, useSlots, watch } from 'vue';
4
- import { O as OrSidebarPlacement, s as script$1 } from './OrSidebarCollapseButton.vue_vue_type_script_lang-31f02a78.js';
5
-
6
- const SidebarRoot = [
7
- // Position
8
- 'relative',
9
- // Layout
10
- 'flex', 'flex-row', 'shrink-0',
11
- // Box
12
- 'min-w-0', 'h-auto', 'p-0',
13
- // Theme
14
- 'bg-background', 'dark:bg-background-dark'];
15
- const SidebarBar = [
16
- // Position
17
- 'relative',
18
- // Layout
19
- 'flex', 'flex-col', 'shrink-0', 'grow',
20
- // Box
21
- 'min-h-0', 'p-0',
22
- // Theme
23
- 'text-on-background', 'dark:text-on-background-dark',
24
- // Transition
25
- 'transition-[width]'];
26
- const SidebarToolbar = [
27
- // Position
28
- 'relative',
29
- // Layout
30
- 'flex', 'flex-col', 'shrink-0', 'grow', 'overflow-auto', 'items-center',
31
- // Sizing
32
- 'gap-md',
33
- // Box
34
- 'min-h-0', 'min-w-xl', 'p-[6px]', 'py-md+',
35
- // Theme
36
- 'text-outline', 'dark:text-outline-dark'];
37
- const CollapsibleSidebarToolbar = ['pt-[56px]'];
38
- const SidebarSides = {
39
- [OrSidebarPlacement.left]: [
40
- // Borders
41
- 'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
42
- [OrSidebarPlacement.right]: [
43
- // Borders
44
- 'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
45
- };
46
- const SidebarToolbarSides = {
47
- [OrSidebarPlacement.left]: [
48
- // Borders
49
- 'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
50
- [OrSidebarPlacement.right]: [
51
- // Borders
52
- 'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
53
- };
54
- const SidebarResize = [
55
- // Position
56
- 'absolute', 'inset-y-none', 'z-[1]',
57
- // Box
58
- 'w-sm+', 'h-[100%]',
59
- // Cursor
60
- 'cursor-ew-resize'];
61
- const SidebarResizeSides = {
62
- [OrSidebarPlacement.left]: [
63
- // Position
64
- '-right-[1px]',
65
- // Borders
66
- 'hover:border-r-2', 'hover:border-r-primary-hover hover:dark:border-r-primary-hover-dark',
67
- // Transition
68
- 'transition-[border-right]'],
69
- [OrSidebarPlacement.right]: [
70
- // Position
71
- '-left-[1px]',
72
- // Borders
73
- 'hover:border-l-2', 'hover:border-l-primary-hover hover:dark:border-l-primary-hover-dark',
74
- // Transition
75
- 'transition-[border-left]']
76
- };
77
- const SidebarCollapseButton = [
78
- // Position
79
- 'absolute', 'top-md', 'inset-y-none', 'z-[1]'];
80
- const SidebarCollapseButtonSides = {
81
- [OrSidebarPlacement.left]: [
82
- // Position
83
- '-right-[12px]'],
84
- [OrSidebarPlacement.right]: [
85
- // Position
86
- '-left-[12px]']
87
- };
88
- const SidebarResizingSides = {
89
- [OrSidebarPlacement.left]: [
90
- // Borders
91
- 'border-r-2', 'border-r-primary-hover dark:border-r-primary-hover-dark'],
92
- [OrSidebarPlacement.right]: [
93
- // Borders
94
- 'border-l-2', 'border-l-primary-hover dark:border-l-primary-hover-dark']
95
- };
96
- const SidebarMain = [
97
- // Layout
98
- 'flex', 'flex-col', 'grow', 'overflow-x-hidden',
99
- // Box
100
- 'min-h-0'];
101
- const SidebarHeader = [
102
- // Layout
103
- 'shrink-0', 'overflow-hidden',
104
- // Sizing
105
- 'p-md',
106
- // Typography
107
- 'typography-headline-2', 'whitespace-nowrap', 'text-ellipsis'];
108
- const SidebarContent = [
109
- // Layout
110
- 'grow', 'overflow-auto',
111
- // Sizing
112
- 'p-md'];
113
- const SidebarFooter = [
114
- // Layout
115
- 'shrink-0', 'overflow-x-hidden',
116
- // Sizing
117
- 'p-md',
118
- // Borders
119
- 'border-t-[1px]', 'border-t-solid', 'border-t-outline-variant dark:border-t-outline-variant-dark'];
120
-
121
- function render(_ctx, _cache, $props, $setup, $data, $options) {
122
- const _component_or_icon_button = resolveComponent("or-icon-button");
123
- return openBlock(), createElementBlock("div", {
124
- ref: "root",
125
- class: normalizeClass(_ctx.rootStyles)
126
- }, [createVNode(_component_or_icon_button, {
127
- class: normalizeClass(_ctx.buttonStyles),
128
- icon: {
129
- icon: _ctx.icon,
130
- size: 'inherit'
131
- },
132
- color: "inherit",
133
- onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('update:modelValue', !_ctx.modelValue))
134
- }, null, 8 /* PROPS */, ["class", "icon"])], 2 /* CLASS */);
135
- }
136
-
137
- script$1.render = render;
138
- script$1.__file = "src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue";
139
-
140
- var script = defineComponent({
141
- name: 'OrSidebar',
142
- components: {
143
- OrSidebarCollapseButton: script$1
144
- },
145
- props: {
146
- width: {
147
- type: Number,
148
- default: 320,
149
- validator: value => _.isNumber(value) && value >= 0
150
- },
151
- minimumWidth: {
152
- type: Number,
153
- default: 256,
154
- validator: value => _.isNumber(value) && value >= 0
155
- },
156
- maximumWidth: {
157
- type: Number,
158
- default: 384,
159
- validator: value => _.isNumber(value) && value >= 0
160
- },
161
- /**
162
- * User may put the component on the right or the left side of a container.
163
- * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
164
- *
165
- * Note: the property doesn't reposition the component in the parent container.
166
- * @values left, right
167
- */
168
- side: {
169
- type: String,
170
- default: OrSidebarPlacement.right,
171
- validator: value => _.includes(_.values(OrSidebarPlacement), value)
172
- },
173
- draggable: {
174
- type: Boolean,
175
- default: true
176
- },
177
- collapsible: {
178
- type: Boolean,
179
- default: false
180
- }
181
- },
182
- emits: ['change:width', 'open', 'close'],
183
- expose: ['root', 'open', 'close'],
184
- setup(props, {
185
- emit
186
- }) {
187
- // Refs
188
- const root = ref();
189
- const resizeBar = ref(null);
190
- const parentContainer = computed(() => {
191
- var _a;
192
- return (_a = root.value) === null || _a === void 0 ? void 0 : _a.parentElement;
193
- });
194
- // Slots
195
- const {
196
- toolbar: toolbarSlot
197
- } = useSlots();
198
- // State
199
- const startPositionX = ref(0);
200
- const isResizing = ref(false);
201
- const isCollapsed = ref(false);
202
- const maximumWidth = ref(props.maximumWidth || 384);
203
- const localWidth = ref(props.width >= props.minimumWidth ? props.width : props.minimumWidth);
204
- const isShowingToolbar = computed(() => !!toolbarSlot);
205
- // Styles
206
- const sidebarStyle = computed(() => ({
207
- width: (isCollapsed.value ? 16 : localWidth.value) + 'px'
208
- }));
209
- const rootStyles = computed(() => ['or-sidebar', ...SidebarRoot]);
210
- const sidebarStyles = computed(() => [...SidebarBar, ...SidebarSides[props.side]]);
211
- const toolbarStyles = computed(() => [...SidebarToolbar, ...(props.collapsible ? CollapsibleSidebarToolbar : []), ...SidebarToolbarSides[props.side]]);
212
- const resizeStyles = computed(() => [...SidebarResize, ...SidebarResizeSides[props.side], ...(isResizing.value ? SidebarResizingSides[props.side] : [])]);
213
- const collapsibleButtonStyles = computed(() => [...SidebarCollapseButton, ...SidebarCollapseButtonSides[props.side]]);
214
- const mainStyles = computed(() => [...SidebarMain]);
215
- const headerStyles = computed(() => [...SidebarHeader]);
216
- const contentStyles = computed(() => [...SidebarContent]);
217
- const footerStyles = computed(() => [...SidebarFooter]);
218
- // Effects
219
- useDraggable(resizeBar, {
220
- preventDefault: true,
221
- onStart: (position, event) => {
222
- document.body.style.cursor = 'ew-resize';
223
- document.body.style.userSelect = 'none';
224
- startPositionX.value = event.x;
225
- isResizing.value = true;
226
- },
227
- onMove: position => {
228
- const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.left ? -1 : 1);
229
- const newWidth = localWidth.value - delta;
230
- localWidth.value = newWidth > maximumWidth.value ? maximumWidth.value : newWidth < props.minimumWidth ? props.minimumWidth : newWidth;
231
- startPositionX.value = position.x;
232
- },
233
- onEnd: () => {
234
- document.body.style.cursor = '';
235
- document.body.style.userSelect = '';
236
- isResizing.value = false;
237
- }
238
- });
239
- // Methods
240
- function open() {
241
- isCollapsed.value = false;
242
- }
243
- function close() {
244
- isCollapsed.value = true;
245
- }
246
- const {
247
- width: containerWidth
248
- } = useElementBounding(parentContainer);
249
- watch(() => props.width, newValue => {
250
- if (newValue !== localWidth.value) {
251
- localWidth.value = newValue > maximumWidth.value ? maximumWidth.value : newValue < props.minimumWidth ? props.minimumWidth : newValue;
252
- }
253
- });
254
- watch(() => props.minimumWidth, newMinimum => {
255
- if (newMinimum > localWidth.value) localWidth.value = newMinimum;
256
- });
257
- watch(() => props.maximumWidth, newMaximum => {
258
- if (newMaximum < maximumWidth.value) maximumWidth.value = newMaximum;
259
- });
260
- watch(containerWidth, newMaximum => {
261
- if (newMaximum < maximumWidth.value) maximumWidth.value = newMaximum;
262
- });
263
- watch(maximumWidth, newMaximum => {
264
- if (newMaximum < localWidth.value) localWidth.value = newMaximum;
265
- });
266
- watch(localWidth, val => emit('change:width', val));
267
- watch(isCollapsed, val => emit(val ? 'close' : 'open'));
268
- return {
269
- root,
270
- resizeBar,
271
- isResizing,
272
- isCollapsed,
273
- localWidth,
274
- isShowingToolbar,
275
- sidebarStyle,
276
- rootStyles,
277
- sidebarStyles,
278
- toolbarStyles,
279
- resizeStyles,
280
- collapsibleButtonStyles,
281
- mainStyles,
282
- headerStyles,
283
- contentStyles,
284
- footerStyles,
285
- open,
286
- close
287
- };
288
- }
289
- });
290
-
291
- export { script as s };
@@ -1,71 +0,0 @@
1
- import _ from 'lodash';
2
- import { defineComponent, ref, computed } from 'vue';
3
- import './OrIconButton-e0566ecf.js';
4
- import { s as script$1 } from './OrIconButton.vue_vue_type_script_lang-7d1c3fe1.js';
5
-
6
- var OrSidebarPlacement;
7
- (function (OrSidebarPlacement) {
8
- OrSidebarPlacement["left"] = "left";
9
- OrSidebarPlacement["right"] = "right";
10
- })(OrSidebarPlacement || (OrSidebarPlacement = {}));
11
-
12
- const CollapseButtonContainer = [
13
- // Box
14
- 'w-[24px]', 'h-[24px]', 'rounded-full',
15
- // Theme
16
- 'text-primary dark:text-primary-dark', 'bg-background dark:bg-background-dark'];
17
- const CollapseButton = [
18
- // Box
19
- 'w-[24px]', 'h-[24px]', 'rounded-full',
20
- // Typography
21
- '!text-[16px]',
22
- // Borders
23
- '!border-[1px]', '!border-solid',
24
- // Theme
25
- '!text-primary dark:!text-primary-dark', '!bg-background dark:!bg-background-dark', '!border-outline-variant dark:!border-outline-variant-dark', '!outline-none',
26
- // Theme (hover)
27
- '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',
28
- // Theme (active)
29
- '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',
30
- // Theme (focus)
31
- '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',
32
- // Theme (disabled)
33
- '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'];
34
-
35
- var script = defineComponent({
36
- name: 'OrSidebarCollapseButton',
37
- components: {
38
- OrIconButton: script$1
39
- },
40
- props: {
41
- /**
42
- * Must be `true` if sidebar is collapsed.
43
- */
44
- modelValue: {
45
- type: Boolean,
46
- default: false
47
- },
48
- side: {
49
- type: String,
50
- default: OrSidebarPlacement.right,
51
- validator: value => _.includes(_.values(OrSidebarPlacement), value)
52
- }
53
- },
54
- emits: ['update:modelValue'],
55
- expose: ['root'],
56
- setup(props) {
57
- // Refs
58
- const root = ref();
59
- const rootStyles = computed(() => ['or-sidebar-collapse-button', ...CollapseButtonContainer]);
60
- const buttonStyles = computed(() => [...CollapseButton]);
61
- const icon = computed(() => props.side === OrSidebarPlacement.left !== props.modelValue ? 'keyboard_arrow_left' : 'keyboard_arrow_right');
62
- return {
63
- root,
64
- rootStyles,
65
- buttonStyles,
66
- icon
67
- };
68
- }
69
- });
70
-
71
- export { OrSidebarPlacement as O, script as s };
@@ -1 +0,0 @@
1
- export * from './or-sidebar-collapse-button';
@@ -1,17 +0,0 @@
1
- export { s as OrSidebarCollapseButton } from '../../../OrSidebarCollapseButton.vue_vue_type_script_lang-31f02a78.js';
2
- import 'lodash';
3
- import 'vue';
4
- import '../../../OrIconButton-e0566ecf.js';
5
- import '../../../OrIconButton.vue_vue_type_script_lang-7d1c3fe1.js';
6
- import '../../../OrIcon-1a5c9091.js';
7
- import '../../../OrIcon.vue_vue_type_script_lang-bdbaad94.js';
8
- import '../../../OrTooltip.vue_vue_type_script_lang-bf9935ef.js';
9
- import '@vueuse/core';
10
- import '../../../OrPopover-1a488f88.js';
11
- import '../../../OrPopover.vue_vue_type_script_lang-b1102c1a.js';
12
- import '../../../floating-ui.dom.esm-83eba816.js';
13
- import '../../../OrBottomSheet.vue_vue_type_script_lang-bdef5ca2.js';
14
- import '../../../OrOverlay.vue_vue_type_script_lang-7edd25f6.js';
15
- import '../../../OrTeleport.vue3.vue_vue_type_script_lang-4dc70cf1.js';
16
- import '../../../useElevation-c8d5d3ba.js';
17
- import '../../../useResponsive-9d397e2a.js';
@@ -1,12 +0,0 @@
1
- import { Meta, StoryFn } from '@storybook/vue3';
2
- declare const _default: Meta<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
3
- [x: string]: ((...args: any[]) => any) | null;
4
- } | string[], {} & {}, {
5
- [x: number]: string;
6
- } | {}, true>)>;
7
- export default _default;
8
- export declare const Default: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
9
- [x: string]: ((...args: any[]) => any) | null;
10
- } | string[], {} & {}, {
11
- [x: number]: string;
12
- } | {}, true>)>;
@@ -1,53 +0,0 @@
1
- import { PropType } from 'vue-demi';
2
- import { OrSidebarPlacement } from '../../props';
3
- declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
4
- root: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
5
- rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
6
- buttonStyles: import("@vue/composition-api").ComputedRef<string[]>;
7
- icon: import("@vue/composition-api").ComputedRef<"keyboard_arrow_left" | "keyboard_arrow_right">;
8
- }> & import("@vue/composition-api").Data, {}, {}, {
9
- /**
10
- * Must be `true` if sidebar is collapsed.
11
- */
12
- modelValue: {
13
- type: BooleanConstructor;
14
- default: boolean;
15
- };
16
- side: {
17
- type: PropType<OrSidebarPlacement>;
18
- default: OrSidebarPlacement;
19
- validator: (value?: any) => boolean;
20
- };
21
- }, import("@vue/composition-api").ExtractPropTypes<{
22
- /**
23
- * Must be `true` if sidebar is collapsed.
24
- */
25
- modelValue: {
26
- type: BooleanConstructor;
27
- default: boolean;
28
- };
29
- side: {
30
- type: PropType<OrSidebarPlacement>;
31
- default: OrSidebarPlacement;
32
- validator: (value?: any) => boolean;
33
- };
34
- }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
35
- modelValue: boolean;
36
- side: OrSidebarPlacement;
37
- } & {} & {
38
- [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
39
- }, import("@vue/composition-api").ShallowUnwrapRef<{
40
- root: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
41
- rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
42
- buttonStyles: import("@vue/composition-api").ComputedRef<string[]>;
43
- icon: import("@vue/composition-api").ComputedRef<"keyboard_arrow_left" | "keyboard_arrow_right">;
44
- }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
45
- modelValue: boolean;
46
- side: OrSidebarPlacement;
47
- } & {} & {
48
- [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
49
- }, {
50
- modelValue: boolean;
51
- side: OrSidebarPlacement;
52
- }, true>);
53
- export default _default;
@@ -1 +0,0 @@
1
- export { default as OrSidebarCollapseButton } from './OrSidebarCollapseButton.vue';
@@ -1,17 +0,0 @@
1
- export { s as OrSidebarCollapseButton } from '../../../../OrSidebarCollapseButton.vue_vue_type_script_lang-31f02a78.js';
2
- import 'lodash';
3
- import 'vue';
4
- import '../../../../OrIconButton-e0566ecf.js';
5
- import '../../../../OrIconButton.vue_vue_type_script_lang-7d1c3fe1.js';
6
- import '../../../../OrIcon-1a5c9091.js';
7
- import '../../../../OrIcon.vue_vue_type_script_lang-bdbaad94.js';
8
- import '../../../../OrTooltip.vue_vue_type_script_lang-bf9935ef.js';
9
- import '@vueuse/core';
10
- import '../../../../OrPopover-1a488f88.js';
11
- import '../../../../OrPopover.vue_vue_type_script_lang-b1102c1a.js';
12
- import '../../../../floating-ui.dom.esm-83eba816.js';
13
- import '../../../../OrBottomSheet.vue_vue_type_script_lang-bdef5ca2.js';
14
- import '../../../../OrOverlay.vue_vue_type_script_lang-7edd25f6.js';
15
- import '../../../../OrTeleport.vue3.vue_vue_type_script_lang-4dc70cf1.js';
16
- import '../../../../useElevation-c8d5d3ba.js';
17
- import '../../../../useResponsive-9d397e2a.js';
@@ -1,2 +0,0 @@
1
- export declare const CollapseButtonContainer: string[];
2
- export declare const CollapseButton: string[];
@@ -1,119 +0,0 @@
1
- import _ from 'lodash';
2
- import { defineComponent, ref, computed } from 'vue-demi';
3
- import { _ as __vue_component__$1 } from './OrIconButton-04a3566d.js';
4
- import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
5
-
6
- var OrSidebarPlacement;
7
- (function (OrSidebarPlacement) {
8
- OrSidebarPlacement["left"] = "left";
9
- OrSidebarPlacement["right"] = "right";
10
- })(OrSidebarPlacement || (OrSidebarPlacement = {}));
11
-
12
- const CollapseButtonContainer = [
13
- // Box
14
- 'w-[24px]', 'h-[24px]', 'rounded-full',
15
- // Theme
16
- 'text-primary dark:text-primary-dark', 'bg-background dark:bg-background-dark'];
17
- const CollapseButton = [
18
- // Box
19
- 'w-[24px]', 'h-[24px]', 'rounded-full',
20
- // Typography
21
- '!text-[16px]',
22
- // Borders
23
- '!border-[1px]', '!border-solid',
24
- // Theme
25
- '!text-primary dark:!text-primary-dark', '!bg-background dark:!bg-background-dark', '!border-outline-variant dark:!border-outline-variant-dark', '!outline-none',
26
- // Theme (hover)
27
- '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',
28
- // Theme (active)
29
- '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',
30
- // Theme (focus)
31
- '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',
32
- // Theme (disabled)
33
- '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'];
34
-
35
- var script = defineComponent({
36
- name: 'OrSidebarCollapseButton',
37
- components: {
38
- OrIconButton: __vue_component__$1
39
- },
40
- props: {
41
- /**
42
- * Must be `true` if sidebar is collapsed.
43
- */
44
- modelValue: {
45
- type: Boolean,
46
- default: false
47
- },
48
- side: {
49
- type: String,
50
- default: OrSidebarPlacement.right,
51
- validator: value => _.includes(_.values(OrSidebarPlacement), value)
52
- }
53
- },
54
- emits: ['update:modelValue'],
55
- expose: ['root'],
56
- setup(props) {
57
- // Refs
58
- const root = ref();
59
- const rootStyles = computed(() => ['or-sidebar-collapse-button', ...CollapseButtonContainer]);
60
- const buttonStyles = computed(() => [...CollapseButton]);
61
- const icon = computed(() => props.side === OrSidebarPlacement.left !== props.modelValue ? 'keyboard_arrow_left' : 'keyboard_arrow_right');
62
- return {
63
- root,
64
- rootStyles,
65
- buttonStyles,
66
- icon
67
- };
68
- }
69
- });
70
-
71
- /* script */
72
- const __vue_script__ = script;
73
-
74
- /* template */
75
- var __vue_render__ = function () {
76
- var _vm = this;
77
- var _h = _vm.$createElement;
78
- var _c = _vm._self._c || _h;
79
- return _c('div', {
80
- ref: "root",
81
- class: _vm.rootStyles
82
- }, [_c('or-icon-button', {
83
- class: _vm.buttonStyles,
84
- attrs: {
85
- "icon": {
86
- icon: _vm.icon,
87
- size: 'inherit'
88
- },
89
- "color": "inherit"
90
- },
91
- on: {
92
- "click": function ($event) {
93
- return _vm.$emit('update:modelValue', !_vm.modelValue);
94
- }
95
- }
96
- })], 1);
97
- };
98
- var __vue_staticRenderFns__ = [];
99
-
100
- /* style */
101
- const __vue_inject_styles__ = undefined;
102
- /* scoped */
103
- const __vue_scope_id__ = undefined;
104
- /* module identifier */
105
- const __vue_module_identifier__ = undefined;
106
- /* functional template */
107
- const __vue_is_functional_template__ = false;
108
- /* style inject */
109
-
110
- /* style inject SSR */
111
-
112
- /* style inject shadow dom */
113
-
114
- const __vue_component__ = /*#__PURE__*/normalizeComponent({
115
- render: __vue_render__,
116
- staticRenderFns: __vue_staticRenderFns__
117
- }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
118
-
119
- export { OrSidebarPlacement as O, __vue_component__ as _ };
@@ -1 +0,0 @@
1
- export * from './or-sidebar-collapse-button';
@@ -1,16 +0,0 @@
1
- export { _ as OrSidebarCollapseButton } from '../../../OrSidebarCollapseButton-3b28945e.js';
2
- import 'lodash';
3
- import 'vue-demi';
4
- import '../../../OrIconButton-04a3566d.js';
5
- import '../../../OrIcon-f34e0e6f.js';
6
- import '../../../normalize-component-6e8e3d80.js';
7
- import '../../../OrTooltip-629d44fc.js';
8
- import '@vueuse/core';
9
- import '../../../OrPopover-d5d4f62a.js';
10
- import '@floating-ui/dom';
11
- import '../../../useElevation-31bfe1f6.js';
12
- import '../../../useResponsive-a02e95b7.js';
13
- import '../../../OrBottomSheet-37200385.js';
14
- import '../../../OrOverlay-a019186f.js';
15
- import '../../../OrTeleport.vue2-fb92f29f.js';
16
- import 'portal-vue';
@@ -1,12 +0,0 @@
1
- import { Meta, StoryFn } from '@storybook/vue3';
2
- declare const _default: Meta<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
3
- [x: string]: ((...args: any[]) => any) | null;
4
- } | string[], {} & {}, {
5
- [x: number]: string;
6
- } | {}, true>)>;
7
- export default _default;
8
- export declare const Default: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
9
- [x: string]: ((...args: any[]) => any) | null;
10
- } | string[], {} & {}, {
11
- [x: number]: string;
12
- } | {}, true>)>;