@onereach/ui-components 2.72.2-beta.2263.0 → 2.72.2-beta.2265.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.
- package/dist/bundled/v2/{OrSidebar-64cc9127.js → OrSidebar-468106b9.js} +116 -1
- package/dist/bundled/v2/{OrSidebarCollapseButton-fcc085c7.js → OrSidebarCollapseButton-1161aef8.js} +2 -116
- package/dist/bundled/v2/components/index.js +2 -2
- package/dist/bundled/v2/components/or-sidebar-v3/index.js +2 -2
- package/dist/bundled/v2/components/or-sidebar-v3/partials/index.d.ts +1 -1
- package/dist/bundled/v2/components/or-sidebar-v3/partials/index.js +1 -1
- package/dist/{esm/v2/components/or-sidebar-v3/partials → bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button}/OrSidebarCollapseButton.vue.d.ts +1 -1
- package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +1 -0
- package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +18 -0
- package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +2 -0
- package/dist/bundled/v2/components/or-sidebar-v3/styles.d.ts +0 -2
- package/dist/bundled/v2/index.js +3 -3
- package/dist/bundled/v3/{OrSidebar.vue_vue_type_script_lang-a150808b.js → OrSidebar.vue_vue_type_script_lang-a68e0381.js} +117 -2
- package/dist/bundled/v3/OrSidebarCollapseButton.vue_vue_type_script_lang-31f02a78.js +71 -0
- package/dist/bundled/v3/components/index.js +2 -2
- package/dist/bundled/v3/components/or-sidebar-v3/index.js +2 -2
- package/dist/bundled/v3/components/or-sidebar-v3/partials/index.d.ts +1 -1
- package/dist/bundled/v3/components/or-sidebar-v3/partials/index.js +1 -1
- package/dist/bundled/v3/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.vue.d.ts → or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts} +1 -1
- package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +1 -0
- package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +17 -0
- package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +2 -0
- package/dist/bundled/v3/components/or-sidebar-v3/styles.d.ts +0 -2
- package/dist/bundled/v3/index.js +4 -4
- package/dist/esm/v2/{OrSidebar-a10424d2.js → OrSidebar-f7fc1179.js} +116 -1
- package/dist/esm/v2/{OrSidebarCollapseButton-3b461dfe.js → OrSidebarCollapseButton-3b28945e.js} +2 -116
- package/dist/esm/v2/components/index.js +2 -2
- package/dist/esm/v2/components/or-sidebar-v3/index.js +2 -2
- package/dist/esm/v2/components/or-sidebar-v3/partials/index.d.ts +1 -1
- package/dist/esm/v2/components/or-sidebar-v3/partials/index.js +1 -1
- package/dist/esm/{v3/components/or-sidebar-v3/partials → v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button}/OrSidebarCollapseButton.vue.d.ts +1 -1
- package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +1 -0
- package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +16 -0
- package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +2 -0
- package/dist/esm/v2/components/or-sidebar-v3/styles.d.ts +0 -2
- package/dist/esm/v2/index.js +2 -2
- package/dist/esm/v3/{OrSidebar-3be35e8d.js → OrSidebar-dbeffb9d.js} +116 -1
- package/dist/esm/v3/OrSidebarCollapseButton-5478da75.js +90 -0
- package/dist/esm/v3/components/index.js +2 -2
- package/dist/esm/v3/components/or-sidebar-v3/index.js +2 -2
- package/dist/esm/v3/components/or-sidebar-v3/partials/index.d.ts +1 -1
- package/dist/esm/v3/components/or-sidebar-v3/partials/index.js +1 -1
- package/dist/{bundled/v2/components/or-sidebar-v3/partials → esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button}/OrSidebarCollapseButton.vue.d.ts +1 -1
- package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +1 -0
- package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +15 -0
- package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +2 -0
- package/dist/esm/v3/components/or-sidebar-v3/styles.d.ts +0 -2
- package/dist/esm/v3/index.js +2 -2
- package/package.json +1 -1
- package/src/components/or-sidebar-v3/partials/index.ts +1 -1
- package/src/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.stories3.ts → or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.ts} +2 -2
- package/src/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.vue → or-sidebar-collapse-button/OrSidebarCollapseButton.vue} +3 -3
- package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.ts +1 -0
- package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.ts +50 -0
- package/src/components/or-sidebar-v3/styles.ts +0 -50
- package/dist/bundled/v3/OrSidebarCollapseButton.vue_vue_type_script_lang-d3e3cd4f.js +0 -185
- package/dist/esm/v3/OrSidebarCollapseButton-30d0033b.js +0 -204
- /package/dist/bundled/v2/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.stories3.d.ts → or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts} +0 -0
- /package/dist/bundled/v3/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.stories3.d.ts → or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts} +0 -0
- /package/dist/esm/v2/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.stories3.d.ts → or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts} +0 -0
- /package/dist/esm/v3/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.stories3.d.ts → or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts} +0 -0
|
@@ -1,9 +1,124 @@
|
|
|
1
1
|
import { useDraggable, useElementBounding } from '@vueuse/core';
|
|
2
2
|
import _ from 'lodash';
|
|
3
3
|
import { defineComponent, ref, computed, useSlots, watch } from 'vue-demi';
|
|
4
|
-
import {
|
|
4
|
+
import { O as OrSidebarPlacement, _ as __vue_component__$1 } from './OrSidebarCollapseButton-3b28945e.js';
|
|
5
5
|
import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
|
|
6
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
|
+
|
|
7
122
|
var script = defineComponent({
|
|
8
123
|
name: 'OrSidebar',
|
|
9
124
|
components: {
|
package/dist/esm/v2/{OrSidebarCollapseButton-3b461dfe.js → OrSidebarCollapseButton-3b28945e.js}
RENAMED
|
@@ -9,120 +9,6 @@ var OrSidebarPlacement;
|
|
|
9
9
|
OrSidebarPlacement["right"] = "right";
|
|
10
10
|
})(OrSidebarPlacement || (OrSidebarPlacement = {}));
|
|
11
11
|
|
|
12
|
-
const SidebarRoot = [
|
|
13
|
-
// Position
|
|
14
|
-
'relative',
|
|
15
|
-
// Layout
|
|
16
|
-
'flex', 'flex-row', 'shrink-0',
|
|
17
|
-
// Box
|
|
18
|
-
'min-w-0', 'h-auto', 'p-0',
|
|
19
|
-
// Theme
|
|
20
|
-
'bg-background', 'dark:bg-background-dark'];
|
|
21
|
-
const SidebarBar = [
|
|
22
|
-
// Position
|
|
23
|
-
'relative',
|
|
24
|
-
// Layout
|
|
25
|
-
'flex', 'flex-col', 'shrink-0', 'grow',
|
|
26
|
-
// Box
|
|
27
|
-
'min-h-0', 'p-0',
|
|
28
|
-
// Theme
|
|
29
|
-
'text-on-background', 'dark:text-on-background-dark',
|
|
30
|
-
// Transition
|
|
31
|
-
'transition-[width]'];
|
|
32
|
-
const SidebarToolbar = [
|
|
33
|
-
// Position
|
|
34
|
-
'relative',
|
|
35
|
-
// Layout
|
|
36
|
-
'flex', 'flex-col', 'shrink-0', 'grow', 'overflow-auto', 'items-center',
|
|
37
|
-
// Sizing
|
|
38
|
-
'gap-md',
|
|
39
|
-
// Box
|
|
40
|
-
'min-h-0', 'min-w-xl', 'p-[6px]', 'py-md+',
|
|
41
|
-
// Theme
|
|
42
|
-
'text-outline', 'dark:text-outline-dark'];
|
|
43
|
-
const CollapsibleSidebarToolbar = ['pt-[56px]'];
|
|
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
|
-
const SidebarCollapseButtonSides = {
|
|
87
|
-
[OrSidebarPlacement.left]: [
|
|
88
|
-
// Position
|
|
89
|
-
'-right-[12px]'],
|
|
90
|
-
[OrSidebarPlacement.right]: [
|
|
91
|
-
// Position
|
|
92
|
-
'-left-[12px]']
|
|
93
|
-
};
|
|
94
|
-
const SidebarResizingSides = {
|
|
95
|
-
[OrSidebarPlacement.left]: [
|
|
96
|
-
// Borders
|
|
97
|
-
'border-r-2', 'border-r-primary-hover dark:border-r-primary-hover-dark'],
|
|
98
|
-
[OrSidebarPlacement.right]: [
|
|
99
|
-
// Borders
|
|
100
|
-
'border-l-2', 'border-l-primary-hover dark:border-l-primary-hover-dark']
|
|
101
|
-
};
|
|
102
|
-
const SidebarMain = [
|
|
103
|
-
// Layout
|
|
104
|
-
'flex', 'flex-col', 'grow', 'overflow-x-hidden',
|
|
105
|
-
// Box
|
|
106
|
-
'min-h-0'];
|
|
107
|
-
const SidebarHeader = [
|
|
108
|
-
// Layout
|
|
109
|
-
'shrink-0', 'overflow-hidden',
|
|
110
|
-
// Sizing
|
|
111
|
-
'p-md',
|
|
112
|
-
// Typography
|
|
113
|
-
'typography-headline-2', 'whitespace-nowrap', 'text-ellipsis'];
|
|
114
|
-
const SidebarContent = [
|
|
115
|
-
// Layout
|
|
116
|
-
'grow', 'overflow-auto',
|
|
117
|
-
// Sizing
|
|
118
|
-
'p-md'];
|
|
119
|
-
const SidebarFooter = [
|
|
120
|
-
// Layout
|
|
121
|
-
'shrink-0', 'overflow-x-hidden',
|
|
122
|
-
// Sizing
|
|
123
|
-
'p-md',
|
|
124
|
-
// Borders
|
|
125
|
-
'border-t-[1px]', 'border-t-solid', 'border-t-outline-variant dark:border-t-outline-variant-dark'];
|
|
126
12
|
const CollapseButtonContainer = [
|
|
127
13
|
// Box
|
|
128
14
|
'w-[24px]', 'h-[24px]', 'rounded-full',
|
|
@@ -130,7 +16,7 @@ const CollapseButtonContainer = [
|
|
|
130
16
|
'text-primary dark:text-primary-dark', 'bg-background dark:bg-background-dark'];
|
|
131
17
|
const CollapseButton = [
|
|
132
18
|
// Box
|
|
133
|
-
'w-[24px]', 'h-[24px]',
|
|
19
|
+
'w-[24px]', 'h-[24px]', 'rounded-full',
|
|
134
20
|
// Typography
|
|
135
21
|
'!text-[16px]',
|
|
136
22
|
// Borders
|
|
@@ -230,4 +116,4 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
|
|
|
230
116
|
staticRenderFns: __vue_staticRenderFns__
|
|
231
117
|
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
|
|
232
118
|
|
|
233
|
-
export {
|
|
119
|
+
export { OrSidebarPlacement as O, __vue_component__ as _ };
|
|
@@ -71,8 +71,8 @@ export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegme
|
|
|
71
71
|
export { _ as OrSelect } from '../OrSelect-dae2b069.js';
|
|
72
72
|
export { _ as OrSelectV3 } from '../OrSelect-e31d1c8b.js';
|
|
73
73
|
export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-7d6125bb.js';
|
|
74
|
-
export { _ as OrSidebarV3 } from '../OrSidebar-
|
|
75
|
-
export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-
|
|
74
|
+
export { _ as OrSidebarV3 } from '../OrSidebar-f7fc1179.js';
|
|
75
|
+
export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-3b28945e.js';
|
|
76
76
|
export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-cc94bdc9.js';
|
|
77
77
|
export { _ as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText-6ee72718.js';
|
|
78
78
|
export { _ as OrSlider } from '../OrSlider-f7b9c7c2.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { _ as OrSidebarV3 } from '../../OrSidebar-
|
|
2
|
-
export { O as OrSidebarPlacement } from '../../OrSidebarCollapseButton-
|
|
1
|
+
export { _ as OrSidebarV3 } from '../../OrSidebar-f7fc1179.js';
|
|
2
|
+
export { O as OrSidebarPlacement } from '../../OrSidebarCollapseButton-3b28945e.js';
|
|
3
3
|
import '@vueuse/core';
|
|
4
4
|
import 'lodash';
|
|
5
5
|
import 'vue-demi';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from './or-sidebar-collapse-button';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { _ as OrSidebarCollapseButton } from '../../../OrSidebarCollapseButton-
|
|
1
|
+
export { _ as OrSidebarCollapseButton } from '../../../OrSidebarCollapseButton-3b28945e.js';
|
|
2
2
|
import 'lodash';
|
|
3
3
|
import 'vue-demi';
|
|
4
4
|
import '../../../OrIconButton-04a3566d.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PropType } from 'vue-demi';
|
|
2
|
-
import { OrSidebarPlacement } from '
|
|
2
|
+
import { OrSidebarPlacement } from '../../props';
|
|
3
3
|
declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
|
|
4
4
|
root: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
|
|
5
5
|
rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as OrSidebarCollapseButton } from './OrSidebarCollapseButton.vue';
|
|
@@ -0,0 +1,16 @@
|
|
|
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';
|
|
@@ -14,5 +14,3 @@ export declare const SidebarMain: string[];
|
|
|
14
14
|
export declare const SidebarHeader: string[];
|
|
15
15
|
export declare const SidebarContent: string[];
|
|
16
16
|
export declare const SidebarFooter: string[];
|
|
17
|
-
export declare const CollapseButtonContainer: string[];
|
|
18
|
-
export declare const CollapseButton: string[];
|
package/dist/esm/v2/index.js
CHANGED
|
@@ -71,8 +71,8 @@ export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmen
|
|
|
71
71
|
export { _ as OrSelect } from './OrSelect-dae2b069.js';
|
|
72
72
|
export { _ as OrSelectV3 } from './OrSelect-e31d1c8b.js';
|
|
73
73
|
export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-7d6125bb.js';
|
|
74
|
-
export { _ as OrSidebarV3 } from './OrSidebar-
|
|
75
|
-
export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-
|
|
74
|
+
export { _ as OrSidebarV3 } from './OrSidebar-f7fc1179.js';
|
|
75
|
+
export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-3b28945e.js';
|
|
76
76
|
export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-cc94bdc9.js';
|
|
77
77
|
export { _ as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from './OrSkeletonText-6ee72718.js';
|
|
78
78
|
export { _ as OrSlider } from './OrSlider-f7b9c7c2.js';
|
|
@@ -1,9 +1,124 @@
|
|
|
1
1
|
import { useDraggable, useElementBounding } from '@vueuse/core';
|
|
2
2
|
import _ from 'lodash';
|
|
3
3
|
import { defineComponent, ref, computed, useSlots, watch } from 'vue-demi';
|
|
4
|
-
import {
|
|
4
|
+
import { O as OrSidebarPlacement, s as script$1 } from './OrSidebarCollapseButton-5478da75.js';
|
|
5
5
|
import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, normalizeStyle, createBlock, withDirectives, vShow } from 'vue';
|
|
6
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
|
+
|
|
7
122
|
var script = defineComponent({
|
|
8
123
|
name: 'OrSidebar',
|
|
9
124
|
components: {
|
|
@@ -0,0 +1,90 @@
|
|
|
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 };
|
|
@@ -68,8 +68,8 @@ export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegme
|
|
|
68
68
|
export { s as OrSelect } from '../OrSelect-0821b907.js';
|
|
69
69
|
export { s as OrSelectV3 } from '../OrSelect-466e50ca.js';
|
|
70
70
|
export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-375c85a3.js';
|
|
71
|
-
export { s as OrSidebarV3 } from '../OrSidebar-
|
|
72
|
-
export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-
|
|
71
|
+
export { s as OrSidebarV3 } from '../OrSidebar-dbeffb9d.js';
|
|
72
|
+
export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-5478da75.js';
|
|
73
73
|
export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-2b1610ce.js';
|
|
74
74
|
export { s as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText-afd3d007.js';
|
|
75
75
|
export { s as OrSlider } from '../OrSlider-87e2da8c.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { s as OrSidebarV3 } from '../../OrSidebar-
|
|
2
|
-
export { O as OrSidebarPlacement } from '../../OrSidebarCollapseButton-
|
|
1
|
+
export { s as OrSidebarV3 } from '../../OrSidebar-dbeffb9d.js';
|
|
2
|
+
export { O as OrSidebarPlacement } from '../../OrSidebarCollapseButton-5478da75.js';
|
|
3
3
|
import '@vueuse/core';
|
|
4
4
|
import 'lodash';
|
|
5
5
|
import 'vue-demi';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from './or-sidebar-collapse-button';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { s as OrSidebarCollapseButton } from '../../../OrSidebarCollapseButton-
|
|
1
|
+
export { s as OrSidebarCollapseButton } from '../../../OrSidebarCollapseButton-5478da75.js';
|
|
2
2
|
import 'lodash';
|
|
3
3
|
import 'vue-demi';
|
|
4
4
|
import '../../../OrIconButton-2dcfb83e.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PropType } from 'vue-demi';
|
|
2
|
-
import { OrSidebarPlacement } from '
|
|
2
|
+
import { OrSidebarPlacement } from '../../props';
|
|
3
3
|
declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
|
|
4
4
|
root: import("@vue/composition-api").Ref<HTMLDivElement | undefined>;
|
|
5
5
|
rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as OrSidebarCollapseButton } from './OrSidebarCollapseButton.vue';
|
|
@@ -0,0 +1,15 @@
|
|
|
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';
|
|
@@ -14,5 +14,3 @@ export declare const SidebarMain: string[];
|
|
|
14
14
|
export declare const SidebarHeader: string[];
|
|
15
15
|
export declare const SidebarContent: string[];
|
|
16
16
|
export declare const SidebarFooter: string[];
|
|
17
|
-
export declare const CollapseButtonContainer: string[];
|
|
18
|
-
export declare const CollapseButton: string[];
|
package/dist/esm/v3/index.js
CHANGED
|
@@ -68,8 +68,8 @@ export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmen
|
|
|
68
68
|
export { s as OrSelect } from './OrSelect-0821b907.js';
|
|
69
69
|
export { s as OrSelectV3 } from './OrSelect-466e50ca.js';
|
|
70
70
|
export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
|
|
71
|
-
export { s as OrSidebarV3 } from './OrSidebar-
|
|
72
|
-
export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-
|
|
71
|
+
export { s as OrSidebarV3 } from './OrSidebar-dbeffb9d.js';
|
|
72
|
+
export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-5478da75.js';
|
|
73
73
|
export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';
|
|
74
74
|
export { s as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from './OrSkeletonText-afd3d007.js';
|
|
75
75
|
export { s as OrSlider } from './OrSlider-87e2da8c.js';
|