@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,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,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,2 +0,0 @@
1
- export declare const CollapseButtonContainer: string[];
2
- export declare const CollapseButton: string[];
@@ -1,313 +0,0 @@
1
- import { useDraggable, useElementBounding } from '@vueuse/core';
2
- import _ from 'lodash';
3
- import { defineComponent, ref, computed, useSlots, watch } from 'vue-demi';
4
- import { O as OrSidebarPlacement, s as script$1 } from './OrSidebarCollapseButton-5478da75.js';
5
- import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, normalizeStyle, createBlock, withDirectives, vShow } from 'vue';
6
-
7
- const SidebarRoot = [
8
- // Position
9
- 'relative',
10
- // Layout
11
- 'flex', 'flex-row', 'shrink-0',
12
- // Box
13
- 'min-w-0', 'h-auto', 'p-0',
14
- // Theme
15
- 'bg-background', 'dark:bg-background-dark'];
16
- const SidebarBar = [
17
- // Position
18
- 'relative',
19
- // Layout
20
- 'flex', 'flex-col', 'shrink-0', 'grow',
21
- // Box
22
- 'min-h-0', 'p-0',
23
- // Theme
24
- 'text-on-background', 'dark:text-on-background-dark',
25
- // Transition
26
- 'transition-[width]'];
27
- const SidebarToolbar = [
28
- // Position
29
- 'relative',
30
- // Layout
31
- 'flex', 'flex-col', 'shrink-0', 'grow', 'overflow-auto', 'items-center',
32
- // Sizing
33
- 'gap-md',
34
- // Box
35
- 'min-h-0', 'min-w-xl', 'p-[6px]', 'py-md+',
36
- // Theme
37
- 'text-outline', 'dark:text-outline-dark'];
38
- const CollapsibleSidebarToolbar = ['pt-[56px]'];
39
- const SidebarSides = {
40
- [OrSidebarPlacement.left]: [
41
- // Borders
42
- 'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
43
- [OrSidebarPlacement.right]: [
44
- // Borders
45
- 'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
46
- };
47
- const SidebarToolbarSides = {
48
- [OrSidebarPlacement.left]: [
49
- // Borders
50
- 'border-r-[1px]', 'border-r-solid', 'border-r-outline-variant dark:border-r-outline-variant-dark'],
51
- [OrSidebarPlacement.right]: [
52
- // Borders
53
- 'border-l-[1px]', 'border-l-solid', 'border-l-outline-variant dark:border-l-outline-variant-dark']
54
- };
55
- const SidebarResize = [
56
- // Position
57
- 'absolute', 'inset-y-none', 'z-[1]',
58
- // Box
59
- 'w-sm+', 'h-[100%]',
60
- // Cursor
61
- 'cursor-ew-resize'];
62
- const SidebarResizeSides = {
63
- [OrSidebarPlacement.left]: [
64
- // Position
65
- '-right-[1px]',
66
- // Borders
67
- 'hover:border-r-2', 'hover:border-r-primary-hover hover:dark:border-r-primary-hover-dark',
68
- // Transition
69
- 'transition-[border-right]'],
70
- [OrSidebarPlacement.right]: [
71
- // Position
72
- '-left-[1px]',
73
- // Borders
74
- 'hover:border-l-2', 'hover:border-l-primary-hover hover:dark:border-l-primary-hover-dark',
75
- // Transition
76
- 'transition-[border-left]']
77
- };
78
- const SidebarCollapseButton = [
79
- // Position
80
- 'absolute', 'top-md', 'inset-y-none', 'z-[1]'];
81
- const SidebarCollapseButtonSides = {
82
- [OrSidebarPlacement.left]: [
83
- // Position
84
- '-right-[12px]'],
85
- [OrSidebarPlacement.right]: [
86
- // Position
87
- '-left-[12px]']
88
- };
89
- const SidebarResizingSides = {
90
- [OrSidebarPlacement.left]: [
91
- // Borders
92
- 'border-r-2', 'border-r-primary-hover dark:border-r-primary-hover-dark'],
93
- [OrSidebarPlacement.right]: [
94
- // Borders
95
- 'border-l-2', 'border-l-primary-hover dark:border-l-primary-hover-dark']
96
- };
97
- const SidebarMain = [
98
- // Layout
99
- 'flex', 'flex-col', 'grow', 'overflow-x-hidden',
100
- // Box
101
- 'min-h-0'];
102
- const SidebarHeader = [
103
- // Layout
104
- 'shrink-0', 'overflow-hidden',
105
- // Sizing
106
- 'p-md',
107
- // Typography
108
- 'typography-headline-2', 'whitespace-nowrap', 'text-ellipsis'];
109
- const SidebarContent = [
110
- // Layout
111
- 'grow', 'overflow-auto',
112
- // Sizing
113
- 'p-md'];
114
- const SidebarFooter = [
115
- // Layout
116
- 'shrink-0', 'overflow-x-hidden',
117
- // Sizing
118
- 'p-md',
119
- // Borders
120
- 'border-t-[1px]', 'border-t-solid', 'border-t-outline-variant dark:border-t-outline-variant-dark'];
121
-
122
- var script = defineComponent({
123
- name: 'OrSidebar',
124
- components: {
125
- OrSidebarCollapseButton: script$1
126
- },
127
- props: {
128
- width: {
129
- type: Number,
130
- default: 320,
131
- validator: value => _.isNumber(value) && value >= 0
132
- },
133
- minimumWidth: {
134
- type: Number,
135
- default: 256,
136
- validator: value => _.isNumber(value) && value >= 0
137
- },
138
- maximumWidth: {
139
- type: Number,
140
- default: 384,
141
- validator: value => _.isNumber(value) && value >= 0
142
- },
143
- /**
144
- * User may put the component on the right or the left side of a container.
145
- * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
146
- *
147
- * Note: the property doesn't reposition the component in the parent container.
148
- * @values left, right
149
- */
150
- side: {
151
- type: String,
152
- default: OrSidebarPlacement.right,
153
- validator: value => _.includes(_.values(OrSidebarPlacement), value)
154
- },
155
- draggable: {
156
- type: Boolean,
157
- default: true
158
- },
159
- collapsible: {
160
- type: Boolean,
161
- default: false
162
- }
163
- },
164
- emits: ['change:width', 'open', 'close'],
165
- expose: ['root', 'open', 'close'],
166
- setup(props, {
167
- emit
168
- }) {
169
- // Refs
170
- const root = ref();
171
- const resizeBar = ref(null);
172
- const parentContainer = computed(() => {
173
- var _a;
174
- return (_a = root.value) === null || _a === void 0 ? void 0 : _a.parentElement;
175
- });
176
- // Slots
177
- const {
178
- toolbar: toolbarSlot
179
- } = useSlots();
180
- // State
181
- const startPositionX = ref(0);
182
- const isResizing = ref(false);
183
- const isCollapsed = ref(false);
184
- const maximumWidth = ref(props.maximumWidth || 384);
185
- const localWidth = ref(props.width >= props.minimumWidth ? props.width : props.minimumWidth);
186
- const isShowingToolbar = computed(() => !!toolbarSlot);
187
- // Styles
188
- const sidebarStyle = computed(() => ({
189
- width: (isCollapsed.value ? 16 : localWidth.value) + 'px'
190
- }));
191
- const rootStyles = computed(() => ['or-sidebar', ...SidebarRoot]);
192
- const sidebarStyles = computed(() => [...SidebarBar, ...SidebarSides[props.side]]);
193
- const toolbarStyles = computed(() => [...SidebarToolbar, ...(props.collapsible ? CollapsibleSidebarToolbar : []), ...SidebarToolbarSides[props.side]]);
194
- const resizeStyles = computed(() => [...SidebarResize, ...SidebarResizeSides[props.side], ...(isResizing.value ? SidebarResizingSides[props.side] : [])]);
195
- const collapsibleButtonStyles = computed(() => [...SidebarCollapseButton, ...SidebarCollapseButtonSides[props.side]]);
196
- const mainStyles = computed(() => [...SidebarMain]);
197
- const headerStyles = computed(() => [...SidebarHeader]);
198
- const contentStyles = computed(() => [...SidebarContent]);
199
- const footerStyles = computed(() => [...SidebarFooter]);
200
- // Effects
201
- useDraggable(resizeBar, {
202
- preventDefault: true,
203
- onStart: (position, event) => {
204
- document.body.style.cursor = 'ew-resize';
205
- document.body.style.userSelect = 'none';
206
- startPositionX.value = event.x;
207
- isResizing.value = true;
208
- },
209
- onMove: position => {
210
- const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.left ? -1 : 1);
211
- const newWidth = localWidth.value - delta;
212
- localWidth.value = newWidth > maximumWidth.value ? maximumWidth.value : newWidth < props.minimumWidth ? props.minimumWidth : newWidth;
213
- startPositionX.value = position.x;
214
- },
215
- onEnd: () => {
216
- document.body.style.cursor = '';
217
- document.body.style.userSelect = '';
218
- isResizing.value = false;
219
- }
220
- });
221
- // Methods
222
- function open() {
223
- isCollapsed.value = false;
224
- }
225
- function close() {
226
- isCollapsed.value = true;
227
- }
228
- const {
229
- width: containerWidth
230
- } = useElementBounding(parentContainer);
231
- watch(() => props.width, newValue => {
232
- if (newValue !== localWidth.value) {
233
- localWidth.value = newValue > maximumWidth.value ? maximumWidth.value : newValue < props.minimumWidth ? props.minimumWidth : newValue;
234
- }
235
- });
236
- watch(() => props.minimumWidth, newMinimum => {
237
- if (newMinimum > localWidth.value) localWidth.value = newMinimum;
238
- });
239
- watch(() => props.maximumWidth, newMaximum => {
240
- if (newMaximum < maximumWidth.value) maximumWidth.value = newMaximum;
241
- });
242
- watch(containerWidth, newMaximum => {
243
- if (newMaximum < maximumWidth.value) maximumWidth.value = newMaximum;
244
- });
245
- watch(maximumWidth, newMaximum => {
246
- if (newMaximum < localWidth.value) localWidth.value = newMaximum;
247
- });
248
- watch(localWidth, val => emit('change:width', val));
249
- watch(isCollapsed, val => emit(val ? 'close' : 'open'));
250
- return {
251
- root,
252
- resizeBar,
253
- isResizing,
254
- isCollapsed,
255
- localWidth,
256
- isShowingToolbar,
257
- sidebarStyle,
258
- rootStyles,
259
- sidebarStyles,
260
- toolbarStyles,
261
- resizeStyles,
262
- collapsibleButtonStyles,
263
- mainStyles,
264
- headerStyles,
265
- contentStyles,
266
- footerStyles,
267
- open,
268
- close
269
- };
270
- }
271
- });
272
-
273
- function render(_ctx, _cache, $props, $setup, $data, $options) {
274
- const _component_or_sidebar_collapse_button = resolveComponent("or-sidebar-collapse-button");
275
- return openBlock(), createElementBlock("aside", {
276
- ref: "root",
277
- class: normalizeClass(_ctx.rootStyles)
278
- }, [_ctx.side === 'right' && _ctx.isShowingToolbar ? (openBlock(), createElementBlock("div", {
279
- key: 0,
280
- class: normalizeClass(_ctx.toolbarStyles)
281
- }, [renderSlot(_ctx.$slots, "toolbar")], 2 /* CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
282
- class: normalizeClass(_ctx.sidebarStyles),
283
- style: normalizeStyle(_ctx.sidebarStyle)
284
- }, [_ctx.draggable && !_ctx.isCollapsed ? (openBlock(), createElementBlock("div", {
285
- key: 0,
286
- ref: "resizeBar",
287
- class: normalizeClass(_ctx.resizeStyles)
288
- }, null, 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.collapsible ? (openBlock(), createBlock(_component_or_sidebar_collapse_button, {
289
- key: 1,
290
- modelValue: _ctx.isCollapsed,
291
- "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.isCollapsed = $event),
292
- class: normalizeClass(_ctx.collapsibleButtonStyles),
293
- side: _ctx.side
294
- }, null, 8 /* PROPS */, ["modelValue", "class", "side"])) : createCommentVNode("v-if", true), withDirectives(createElementVNode("div", {
295
- class: normalizeClass(_ctx.mainStyles)
296
- }, [_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
297
- key: 0,
298
- class: normalizeClass(_ctx.headerStyles)
299
- }, [renderSlot(_ctx.$slots, "header")], 2 /* CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
300
- class: normalizeClass(_ctx.contentStyles)
301
- }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 2 /* CLASS */), [[vShow, !_ctx.isCollapsed]]), _ctx.$slots.footer ? withDirectives((openBlock(), createElementBlock("div", {
302
- key: 2,
303
- class: normalizeClass(_ctx.footerStyles)
304
- }, [renderSlot(_ctx.$slots, "footer")], 2 /* CLASS */)), [[vShow, !_ctx.isCollapsed]]) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */), _ctx.side === 'left' && _ctx.isShowingToolbar ? (openBlock(), createElementBlock("div", {
305
- key: 1,
306
- class: normalizeClass(_ctx.toolbarStyles)
307
- }, [renderSlot(_ctx.$slots, "toolbar")], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
308
- }
309
-
310
- script.render = render;
311
- script.__file = "src/components/or-sidebar-v3/OrSidebar.vue";
312
-
313
- export { script as s };
@@ -1,90 +0,0 @@
1
- import _ from 'lodash';
2
- import { defineComponent, ref, computed } from 'vue-demi';
3
- import { s as script$1 } from './OrIconButton-2dcfb83e.js';
4
- import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode } from 'vue';
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
- function render(_ctx, _cache, $props, $setup, $data, $options) {
72
- const _component_or_icon_button = resolveComponent("or-icon-button");
73
- return openBlock(), createElementBlock("div", {
74
- ref: "root",
75
- class: normalizeClass(_ctx.rootStyles)
76
- }, [createVNode(_component_or_icon_button, {
77
- class: normalizeClass(_ctx.buttonStyles),
78
- icon: {
79
- icon: _ctx.icon,
80
- size: 'inherit'
81
- },
82
- color: "inherit",
83
- onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('update:modelValue', !_ctx.modelValue))
84
- }, null, 8 /* PROPS */, ["class", "icon"])], 2 /* CLASS */);
85
- }
86
-
87
- script.render = render;
88
- script.__file = "src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue";
89
-
90
- export { OrSidebarPlacement as O, script as s };
@@ -1 +0,0 @@
1
- export * from './or-sidebar-collapse-button';
@@ -1,15 +0,0 @@
1
- export { s as OrSidebarCollapseButton } from '../../../OrSidebarCollapseButton-5478da75.js';
2
- import 'lodash';
3
- import 'vue-demi';
4
- import '../../../OrIconButton-2dcfb83e.js';
5
- import '../../../OrIcon-34f59f73.js';
6
- import 'vue';
7
- import '../../../OrTooltip-b07616f4.js';
8
- import '@vueuse/core';
9
- import '../../../OrPopover-40217b49.js';
10
- import '@floating-ui/dom';
11
- import '../../../useElevation-31bfe1f6.js';
12
- import '../../../useResponsive-a02e95b7.js';
13
- import '../../../OrBottomSheet-13a416ef.js';
14
- import '../../../OrOverlay-afad3aa4.js';
15
- import '../../../OrTeleport.vue3-8099178c.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,15 +0,0 @@
1
- export { s as OrSidebarCollapseButton } from '../../../../OrSidebarCollapseButton-5478da75.js';
2
- import 'lodash';
3
- import 'vue-demi';
4
- import '../../../../OrIconButton-2dcfb83e.js';
5
- import '../../../../OrIcon-34f59f73.js';
6
- import 'vue';
7
- import '../../../../OrTooltip-b07616f4.js';
8
- import '@vueuse/core';
9
- import '../../../../OrPopover-40217b49.js';
10
- import '@floating-ui/dom';
11
- import '../../../../useElevation-31bfe1f6.js';
12
- import '../../../../useResponsive-a02e95b7.js';
13
- import '../../../../OrBottomSheet-13a416ef.js';
14
- import '../../../../OrOverlay-afad3aa4.js';
15
- import '../../../../OrTeleport.vue3-8099178c.js';
@@ -1,2 +0,0 @@
1
- export declare const CollapseButtonContainer: string[];
2
- export declare const CollapseButton: string[];
@@ -1 +0,0 @@
1
- export * from './or-sidebar-collapse-button';
@@ -1,48 +0,0 @@
1
- import { Meta, StoryFn } from '@storybook/vue3';
2
- import OrSidebarCollapseButton from './OrSidebarCollapseButton.vue';
3
- import { OrSidebarPlacement } from '../../props';
4
- import { action } from '@storybook/addon-actions';
5
- import { ref } from 'vue-demi';
6
-
7
- export default {
8
- title: 'Components/Sidebar/Partials/CollapseButton',
9
- component: OrSidebarCollapseButton,
10
-
11
- argTypes: {
12
- // Props
13
- modelValue: {
14
- control: { type: 'boolean' },
15
- },
16
-
17
- side: {
18
- control: { type: 'select' },
19
- options: Object.values(OrSidebarPlacement),
20
- },
21
- },
22
- } as Meta<typeof OrSidebarCollapseButton>;
23
-
24
- const DefaultTemplate: StoryFn<typeof OrSidebarCollapseButton> = (args) => ({
25
- components: {
26
- OrSidebarCollapseButton,
27
- },
28
-
29
- setup() {
30
- const collapsed = ref<boolean>(!!args.modelValue);
31
-
32
- return {
33
- args,
34
- collapsed,
35
- };
36
- },
37
-
38
- methods: {
39
- onUpdateModelValue: action('update:modelValue'),
40
- },
41
-
42
- template: '<OrSidebarCollapseButton v-model="collapsed" v-bind="args" @update:modelValue="onUpdateModelValue" />',
43
- });
44
-
45
- export const Default = DefaultTemplate.bind({});
46
- Default.args = {
47
- side: OrSidebarPlacement.right,
48
- };