@onereach/ui-components 2.72.2-beta.2274.0 → 2.72.2-beta.2276.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 (138) hide show
  1. package/dist/bundled/v2/{OrButton-d45772c1.js → OrButton-f1f28b9b.js} +1 -1
  2. package/dist/bundled/v2/{OrCardCollection-4ac89ea5.js → OrCardCollection-35abc63a.js} +1 -1
  3. package/dist/bundled/v2/{OrConfirm-8c0e957d.js → OrConfirm-c5717fec.js} +1 -1
  4. package/dist/bundled/v2/{OrLoader-864ef92a.js → OrLoader-07f84c71.js} +11 -4
  5. package/dist/bundled/v2/{OrPagination-daf25de2.js → OrPagination-1b65273d.js} +1 -1
  6. package/dist/bundled/v2/{OrSidebar-a2bc21b9.js → OrSidebar-c95ef614.js} +34 -155
  7. package/dist/bundled/v2/{OrSwitch-782d7b43.js → OrSwitch-3804a2d8.js} +1 -1
  8. package/dist/bundled/v2/components/index.js +8 -9
  9. package/dist/bundled/v2/components/or-button-v3/index.js +2 -2
  10. package/dist/bundled/v2/components/or-card-collection-v3/index.js +3 -3
  11. package/dist/bundled/v2/components/or-confirm-v3/index.js +3 -3
  12. package/dist/bundled/v2/components/or-loader-v3/OrLoader.vue.d.ts +16 -2
  13. package/dist/bundled/v2/components/or-loader-v3/index.js +1 -1
  14. package/dist/bundled/v2/components/or-pagination-v3/index.js +3 -3
  15. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  16. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  17. package/dist/bundled/v2/components/or-sidebar-v3/index.js +1 -13
  18. package/dist/bundled/v2/components/or-sidebar-v3/styles.d.ts +1 -7
  19. package/dist/bundled/v2/components/or-switch-v3/index.js +2 -2
  20. package/dist/bundled/v2/components/or-toast-v3/index.js +2 -2
  21. package/dist/bundled/v2/index.js +9 -10
  22. package/dist/bundled/v2/{types-309b7b94.js → types-13daf4de.js} +1 -1
  23. package/dist/bundled/v3/{OrButton-a1448bfa.js → OrButton-d8b1c4ac.js} +1 -1
  24. package/dist/bundled/v3/{OrButton.vue_vue_type_script_lang-3b1e442b.js → OrButton.vue_vue_type_script_lang-d31b504f.js} +2 -2
  25. package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-f76c3264.js → OrCardCollection.vue_vue_type_script_lang-23f82328.js} +2 -2
  26. package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-eb2bfce2.js → OrConfirm.vue_vue_type_script_lang-ab682ec1.js} +2 -2
  27. package/dist/bundled/v3/{OrLoader-123ef8c4.js → OrLoader-40942969.js} +1 -1
  28. package/dist/bundled/v3/{OrLoader.vue_vue_type_script_lang-4c3c1ac9.js → OrLoader.vue_vue_type_script_lang-9efedfe7.js} +11 -4
  29. package/dist/bundled/v3/{OrPagination.vue_vue_type_script_lang-f64827ef.js → OrPagination.vue_vue_type_script_lang-c0eceb82.js} +2 -2
  30. package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-ce0b152c.js +181 -0
  31. package/dist/bundled/v3/{OrSwitch.vue_vue_type_script_lang-31994be7.js → OrSwitch.vue_vue_type_script_lang-25f16621.js} +2 -2
  32. package/dist/bundled/v3/{OrToastContainer-6fe12712.js → OrToastContainer-2e9489f9.js} +1 -1
  33. package/dist/bundled/v3/components/index.js +10 -11
  34. package/dist/bundled/v3/components/or-button-v3/index.js +3 -3
  35. package/dist/bundled/v3/components/or-card-collection-v3/index.js +5 -5
  36. package/dist/bundled/v3/components/or-confirm-v3/index.js +5 -5
  37. package/dist/bundled/v3/components/or-loader-v3/OrLoader.vue.d.ts +16 -2
  38. package/dist/bundled/v3/components/or-loader-v3/index.js +1 -1
  39. package/dist/bundled/v3/components/or-pagination-v3/index.js +5 -5
  40. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  41. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  42. package/dist/bundled/v3/components/or-sidebar-v3/index.js +2 -16
  43. package/dist/bundled/v3/components/or-sidebar-v3/styles.d.ts +1 -7
  44. package/dist/bundled/v3/components/or-switch-v3/index.js +3 -3
  45. package/dist/bundled/v3/components/or-toast-v3/index.js +4 -4
  46. package/dist/bundled/v3/index.js +23 -40
  47. package/dist/bundled/v3/{types-22fbf9d6.js → types-8f6f3598.js} +2 -2
  48. package/dist/esm/v2/{OrButton-66964360.js → OrButton-d067bcac.js} +1 -1
  49. package/dist/esm/v2/{OrCardCollection-5a9eda35.js → OrCardCollection-cab5acb9.js} +1 -1
  50. package/dist/esm/v2/{OrConfirm-9dbdedd7.js → OrConfirm-efe95ff6.js} +1 -1
  51. package/dist/esm/v2/{OrLoader-76307488.js → OrLoader-a6ae193f.js} +11 -4
  52. package/dist/esm/v2/{OrPagination-1adbcadb.js → OrPagination-1acb7176.js} +1 -1
  53. package/dist/esm/v2/{OrSidebar-27236fbd.js → OrSidebar-fabc7bc9.js} +34 -155
  54. package/dist/esm/v2/{OrSwitch-8549219a.js → OrSwitch-c2429fc0.js} +1 -1
  55. package/dist/esm/v2/components/index.js +8 -9
  56. package/dist/esm/v2/components/or-button-v3/index.js +2 -2
  57. package/dist/esm/v2/components/or-card-collection-v3/index.js +3 -3
  58. package/dist/esm/v2/components/or-confirm-v3/index.js +3 -3
  59. package/dist/esm/v2/components/or-loader-v3/OrLoader.vue.d.ts +16 -2
  60. package/dist/esm/v2/components/or-loader-v3/index.js +1 -1
  61. package/dist/esm/v2/components/or-pagination-v3/index.js +3 -3
  62. package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  63. package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  64. package/dist/esm/v2/components/or-sidebar-v3/index.js +1 -13
  65. package/dist/esm/v2/components/or-sidebar-v3/styles.d.ts +1 -7
  66. package/dist/esm/v2/components/or-switch-v3/index.js +2 -2
  67. package/dist/esm/v2/components/or-toast-v3/index.js +2 -2
  68. package/dist/esm/v2/index.js +8 -9
  69. package/dist/esm/v2/{types-1f95d710.js → types-4a75cef1.js} +1 -1
  70. package/dist/esm/v3/{OrButton-c56998e7.js → OrButton-d9f6c316.js} +1 -1
  71. package/dist/esm/v3/{OrCardCollection-e4fde5b4.js → OrCardCollection-04b36455.js} +1 -1
  72. package/dist/esm/v3/{OrConfirm-37454a63.js → OrConfirm-d7d6255c.js} +1 -1
  73. package/dist/esm/v3/{OrLoader-a53d2edf.js → OrLoader-1709eb68.js} +11 -4
  74. package/dist/esm/v3/{OrPagination-da9e5017.js → OrPagination-7cbdbb05.js} +1 -1
  75. package/dist/esm/v3/OrSidebar-a62972f5.js +206 -0
  76. package/dist/esm/v3/{OrSwitch-1c2196da.js → OrSwitch-54988e7a.js} +1 -1
  77. package/dist/esm/v3/components/index.js +8 -9
  78. package/dist/esm/v3/components/or-button-v3/index.js +2 -2
  79. package/dist/esm/v3/components/or-card-collection-v3/index.js +3 -3
  80. package/dist/esm/v3/components/or-confirm-v3/index.js +3 -3
  81. package/dist/esm/v3/components/or-loader-v3/OrLoader.vue.d.ts +16 -2
  82. package/dist/esm/v3/components/or-loader-v3/index.js +1 -1
  83. package/dist/esm/v3/components/or-pagination-v3/index.js +3 -3
  84. package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  85. package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  86. package/dist/esm/v3/components/or-sidebar-v3/index.js +1 -12
  87. package/dist/esm/v3/components/or-sidebar-v3/styles.d.ts +1 -7
  88. package/dist/esm/v3/components/or-switch-v3/index.js +2 -2
  89. package/dist/esm/v3/components/or-toast-v3/index.js +2 -2
  90. package/dist/esm/v3/index.js +8 -9
  91. package/dist/esm/v3/{types-b79e4387.js → types-c3417028.js} +1 -1
  92. package/package.json +1 -1
  93. package/src/components/or-loader-v3/OrLoader.stories3.ts +16 -4
  94. package/src/components/or-loader-v3/OrLoader.vue +10 -2
  95. package/src/components/or-loader-v3/styles.ts +1 -2
  96. package/src/components/or-sidebar-v3/OrSidebar.docs.mdx +0 -6
  97. package/src/components/or-sidebar-v3/OrSidebar.stories3.ts +12 -253
  98. package/src/components/or-sidebar-v3/OrSidebar.vue +23 -130
  99. package/src/components/or-sidebar-v3/styles.ts +9 -114
  100. package/dist/bundled/v2/OrSidebarCollapseButton-8297ef86.js +0 -125
  101. package/dist/bundled/v2/components/or-sidebar-v3/partials/index.d.ts +0 -1
  102. package/dist/bundled/v2/components/or-sidebar-v3/partials/index.js +0 -18
  103. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +0 -12
  104. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +0 -53
  105. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +0 -1
  106. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +0 -18
  107. package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +0 -2
  108. package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-7f3f1a16.js +0 -291
  109. package/dist/bundled/v3/OrSidebarCollapseButton.vue_vue_type_script_lang-9aeba2d4.js +0 -75
  110. package/dist/bundled/v3/components/or-sidebar-v3/partials/index.d.ts +0 -1
  111. package/dist/bundled/v3/components/or-sidebar-v3/partials/index.js +0 -17
  112. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +0 -12
  113. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +0 -53
  114. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +0 -1
  115. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +0 -17
  116. package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +0 -2
  117. package/dist/esm/v2/OrSidebarCollapseButton-cfe51a60.js +0 -123
  118. package/dist/esm/v2/components/or-sidebar-v3/partials/index.d.ts +0 -1
  119. package/dist/esm/v2/components/or-sidebar-v3/partials/index.js +0 -16
  120. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +0 -12
  121. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +0 -53
  122. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +0 -1
  123. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +0 -16
  124. package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +0 -2
  125. package/dist/esm/v3/OrSidebar-61d84c3e.js +0 -313
  126. package/dist/esm/v3/OrSidebarCollapseButton-1b9c83ef.js +0 -94
  127. package/dist/esm/v3/components/or-sidebar-v3/partials/index.d.ts +0 -1
  128. package/dist/esm/v3/components/or-sidebar-v3/partials/index.js +0 -15
  129. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +0 -12
  130. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +0 -53
  131. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +0 -1
  132. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +0 -15
  133. package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +0 -2
  134. package/src/components/or-sidebar-v3/partials/index.ts +0 -1
  135. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.ts +0 -48
  136. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue +0 -79
  137. package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.ts +0 -1
  138. 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-cfe51a60.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-1b9c83ef.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,94 +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
- model: {
41
- prop: 'modelValue',
42
- event: 'update:modelValue'
43
- },
44
- props: {
45
- /**
46
- * Must be `true` if sidebar is collapsed.
47
- */
48
- modelValue: {
49
- type: Boolean,
50
- default: false
51
- },
52
- side: {
53
- type: String,
54
- default: OrSidebarPlacement.right,
55
- validator: value => _.includes(_.values(OrSidebarPlacement), value)
56
- }
57
- },
58
- emits: ['update:modelValue'],
59
- expose: ['root'],
60
- setup(props) {
61
- // Refs
62
- const root = ref();
63
- const rootStyles = computed(() => ['or-sidebar-collapse-button', ...CollapseButtonContainer]);
64
- const buttonStyles = computed(() => [...CollapseButton]);
65
- const icon = computed(() => props.side === OrSidebarPlacement.left !== props.modelValue ? 'keyboard_arrow_left' : 'keyboard_arrow_right');
66
- return {
67
- root,
68
- rootStyles,
69
- buttonStyles,
70
- icon
71
- };
72
- }
73
- });
74
-
75
- function render(_ctx, _cache, $props, $setup, $data, $options) {
76
- const _component_or_icon_button = resolveComponent("or-icon-button");
77
- return openBlock(), createElementBlock("div", {
78
- ref: "root",
79
- class: normalizeClass(_ctx.rootStyles)
80
- }, [createVNode(_component_or_icon_button, {
81
- class: normalizeClass(_ctx.buttonStyles),
82
- icon: {
83
- icon: _ctx.icon,
84
- size: 'inherit'
85
- },
86
- color: "inherit",
87
- onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('update:modelValue', !_ctx.modelValue))
88
- }, null, 8 /* PROPS */, ["class", "icon"])], 2 /* CLASS */);
89
- }
90
-
91
- script.render = render;
92
- script.__file = "src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue";
93
-
94
- 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-1b9c83ef.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-1b9c83ef.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
- };