@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.
Files changed (61) hide show
  1. package/dist/bundled/v2/{OrSidebar-64cc9127.js → OrSidebar-468106b9.js} +116 -1
  2. package/dist/bundled/v2/{OrSidebarCollapseButton-fcc085c7.js → OrSidebarCollapseButton-1161aef8.js} +2 -116
  3. package/dist/bundled/v2/components/index.js +2 -2
  4. package/dist/bundled/v2/components/or-sidebar-v3/index.js +2 -2
  5. package/dist/bundled/v2/components/or-sidebar-v3/partials/index.d.ts +1 -1
  6. package/dist/bundled/v2/components/or-sidebar-v3/partials/index.js +1 -1
  7. 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
  8. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +1 -0
  9. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +18 -0
  10. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +2 -0
  11. package/dist/bundled/v2/components/or-sidebar-v3/styles.d.ts +0 -2
  12. package/dist/bundled/v2/index.js +3 -3
  13. package/dist/bundled/v3/{OrSidebar.vue_vue_type_script_lang-a150808b.js → OrSidebar.vue_vue_type_script_lang-a68e0381.js} +117 -2
  14. package/dist/bundled/v3/OrSidebarCollapseButton.vue_vue_type_script_lang-31f02a78.js +71 -0
  15. package/dist/bundled/v3/components/index.js +2 -2
  16. package/dist/bundled/v3/components/or-sidebar-v3/index.js +2 -2
  17. package/dist/bundled/v3/components/or-sidebar-v3/partials/index.d.ts +1 -1
  18. package/dist/bundled/v3/components/or-sidebar-v3/partials/index.js +1 -1
  19. package/dist/bundled/v3/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.vue.d.ts → or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts} +1 -1
  20. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +1 -0
  21. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +17 -0
  22. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +2 -0
  23. package/dist/bundled/v3/components/or-sidebar-v3/styles.d.ts +0 -2
  24. package/dist/bundled/v3/index.js +4 -4
  25. package/dist/esm/v2/{OrSidebar-a10424d2.js → OrSidebar-f7fc1179.js} +116 -1
  26. package/dist/esm/v2/{OrSidebarCollapseButton-3b461dfe.js → OrSidebarCollapseButton-3b28945e.js} +2 -116
  27. package/dist/esm/v2/components/index.js +2 -2
  28. package/dist/esm/v2/components/or-sidebar-v3/index.js +2 -2
  29. package/dist/esm/v2/components/or-sidebar-v3/partials/index.d.ts +1 -1
  30. package/dist/esm/v2/components/or-sidebar-v3/partials/index.js +1 -1
  31. 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
  32. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +1 -0
  33. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +16 -0
  34. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +2 -0
  35. package/dist/esm/v2/components/or-sidebar-v3/styles.d.ts +0 -2
  36. package/dist/esm/v2/index.js +2 -2
  37. package/dist/esm/v3/{OrSidebar-3be35e8d.js → OrSidebar-dbeffb9d.js} +116 -1
  38. package/dist/esm/v3/OrSidebarCollapseButton-5478da75.js +90 -0
  39. package/dist/esm/v3/components/index.js +2 -2
  40. package/dist/esm/v3/components/or-sidebar-v3/index.js +2 -2
  41. package/dist/esm/v3/components/or-sidebar-v3/partials/index.d.ts +1 -1
  42. package/dist/esm/v3/components/or-sidebar-v3/partials/index.js +1 -1
  43. 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
  44. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +1 -0
  45. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +15 -0
  46. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +2 -0
  47. package/dist/esm/v3/components/or-sidebar-v3/styles.d.ts +0 -2
  48. package/dist/esm/v3/index.js +2 -2
  49. package/package.json +1 -1
  50. package/src/components/or-sidebar-v3/partials/index.ts +1 -1
  51. package/src/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.stories3.ts → or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.ts} +2 -2
  52. package/src/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.vue → or-sidebar-collapse-button/OrSidebarCollapseButton.vue} +3 -3
  53. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.ts +1 -0
  54. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.ts +50 -0
  55. package/src/components/or-sidebar-v3/styles.ts +0 -50
  56. package/dist/bundled/v3/OrSidebarCollapseButton.vue_vue_type_script_lang-d3e3cd4f.js +0 -185
  57. package/dist/esm/v3/OrSidebarCollapseButton-30d0033b.js +0 -204
  58. /package/dist/bundled/v2/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.stories3.d.ts → or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts} +0 -0
  59. /package/dist/bundled/v3/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.stories3.d.ts → or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts} +0 -0
  60. /package/dist/esm/v2/components/or-sidebar-v3/partials/{OrSidebarCollapseButton.stories3.d.ts → or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts} +0 -0
  61. /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 { _ as __vue_component__$1, O as OrSidebarPlacement, S as SidebarRoot, a as SidebarBar, b as SidebarSides, c as SidebarToolbar, C as CollapsibleSidebarToolbar, d as SidebarToolbarSides, e as SidebarResize, f as SidebarResizeSides, g as SidebarResizingSides, h as SidebarCollapseButton, i as SidebarCollapseButtonSides, j as SidebarMain, k as SidebarHeader, l as SidebarContent, m as SidebarFooter } from './OrSidebarCollapseButton-3b461dfe.js';
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: {
@@ -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 { CollapsibleSidebarToolbar as C, OrSidebarPlacement as O, SidebarRoot as S, __vue_component__ as _, SidebarBar as a, SidebarSides as b, SidebarToolbar as c, SidebarToolbarSides as d, SidebarResize as e, SidebarResizeSides as f, SidebarResizingSides as g, SidebarCollapseButton as h, SidebarCollapseButtonSides as i, SidebarMain as j, SidebarHeader as k, SidebarContent as l, SidebarFooter as m };
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-a10424d2.js';
75
- export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-3b461dfe.js';
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-a10424d2.js';
2
- export { O as OrSidebarPlacement } from '../../OrSidebarCollapseButton-3b461dfe.js';
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 { default as OrSidebarCollapseButton } from './OrSidebarCollapseButton.vue';
1
+ export * from './or-sidebar-collapse-button';
@@ -1,4 +1,4 @@
1
- export { _ as OrSidebarCollapseButton } from '../../../OrSidebarCollapseButton-3b461dfe.js';
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 '../props';
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';
@@ -0,0 +1,2 @@
1
+ export declare const CollapseButtonContainer: string[];
2
+ export declare const CollapseButton: string[];
@@ -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[];
@@ -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-a10424d2.js';
75
- export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-3b461dfe.js';
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 { s as script$1, O as OrSidebarPlacement, S as SidebarRoot, a as SidebarBar, b as SidebarSides, c as SidebarToolbar, C as CollapsibleSidebarToolbar, d as SidebarToolbarSides, e as SidebarResize, f as SidebarResizeSides, g as SidebarResizingSides, h as SidebarCollapseButton, i as SidebarCollapseButtonSides, j as SidebarMain, k as SidebarHeader, l as SidebarContent, m as SidebarFooter } from './OrSidebarCollapseButton-30d0033b.js';
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-3be35e8d.js';
72
- export { O as OrSidebarPlacement } from '../OrSidebarCollapseButton-30d0033b.js';
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-3be35e8d.js';
2
- export { O as OrSidebarPlacement } from '../../OrSidebarCollapseButton-30d0033b.js';
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 { default as OrSidebarCollapseButton } from './OrSidebarCollapseButton.vue';
1
+ export * from './or-sidebar-collapse-button';
@@ -1,4 +1,4 @@
1
- export { s as OrSidebarCollapseButton } from '../../../OrSidebarCollapseButton-30d0033b.js';
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 '../props';
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';
@@ -0,0 +1,2 @@
1
+ export declare const CollapseButtonContainer: string[];
2
+ export declare const CollapseButton: string[];
@@ -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[];
@@ -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-3be35e8d.js';
72
- export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-30d0033b.js';
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';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/ui-components",
3
- "version": "2.72.2-beta.2263.0",
3
+ "version": "2.72.2-beta.2265.0",
4
4
  "description": "Vue components library for v2/3",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/auto/index.js",