@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.
- package/dist/bundled/v2/{OrButton-d45772c1.js → OrButton-f1f28b9b.js} +1 -1
- package/dist/bundled/v2/{OrCardCollection-4ac89ea5.js → OrCardCollection-35abc63a.js} +1 -1
- package/dist/bundled/v2/{OrConfirm-8c0e957d.js → OrConfirm-c5717fec.js} +1 -1
- package/dist/bundled/v2/{OrLoader-864ef92a.js → OrLoader-07f84c71.js} +11 -4
- package/dist/bundled/v2/{OrPagination-daf25de2.js → OrPagination-1b65273d.js} +1 -1
- package/dist/bundled/v2/{OrSidebar-a2bc21b9.js → OrSidebar-c95ef614.js} +34 -155
- package/dist/bundled/v2/{OrSwitch-782d7b43.js → OrSwitch-3804a2d8.js} +1 -1
- package/dist/bundled/v2/components/index.js +8 -9
- package/dist/bundled/v2/components/or-button-v3/index.js +2 -2
- package/dist/bundled/v2/components/or-card-collection-v3/index.js +3 -3
- package/dist/bundled/v2/components/or-confirm-v3/index.js +3 -3
- package/dist/bundled/v2/components/or-loader-v3/OrLoader.vue.d.ts +16 -2
- package/dist/bundled/v2/components/or-loader-v3/index.js +1 -1
- package/dist/bundled/v2/components/or-pagination-v3/index.js +3 -3
- package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
- package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
- package/dist/bundled/v2/components/or-sidebar-v3/index.js +1 -13
- package/dist/bundled/v2/components/or-sidebar-v3/styles.d.ts +1 -7
- package/dist/bundled/v2/components/or-switch-v3/index.js +2 -2
- package/dist/bundled/v2/components/or-toast-v3/index.js +2 -2
- package/dist/bundled/v2/index.js +9 -10
- package/dist/bundled/v2/{types-309b7b94.js → types-13daf4de.js} +1 -1
- package/dist/bundled/v3/{OrButton-a1448bfa.js → OrButton-d8b1c4ac.js} +1 -1
- package/dist/bundled/v3/{OrButton.vue_vue_type_script_lang-3b1e442b.js → OrButton.vue_vue_type_script_lang-d31b504f.js} +2 -2
- package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-f76c3264.js → OrCardCollection.vue_vue_type_script_lang-23f82328.js} +2 -2
- package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-eb2bfce2.js → OrConfirm.vue_vue_type_script_lang-ab682ec1.js} +2 -2
- package/dist/bundled/v3/{OrLoader-123ef8c4.js → OrLoader-40942969.js} +1 -1
- package/dist/bundled/v3/{OrLoader.vue_vue_type_script_lang-4c3c1ac9.js → OrLoader.vue_vue_type_script_lang-9efedfe7.js} +11 -4
- package/dist/bundled/v3/{OrPagination.vue_vue_type_script_lang-f64827ef.js → OrPagination.vue_vue_type_script_lang-c0eceb82.js} +2 -2
- package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-ce0b152c.js +181 -0
- package/dist/bundled/v3/{OrSwitch.vue_vue_type_script_lang-31994be7.js → OrSwitch.vue_vue_type_script_lang-25f16621.js} +2 -2
- package/dist/bundled/v3/{OrToastContainer-6fe12712.js → OrToastContainer-2e9489f9.js} +1 -1
- package/dist/bundled/v3/components/index.js +10 -11
- package/dist/bundled/v3/components/or-button-v3/index.js +3 -3
- package/dist/bundled/v3/components/or-card-collection-v3/index.js +5 -5
- package/dist/bundled/v3/components/or-confirm-v3/index.js +5 -5
- package/dist/bundled/v3/components/or-loader-v3/OrLoader.vue.d.ts +16 -2
- package/dist/bundled/v3/components/or-loader-v3/index.js +1 -1
- package/dist/bundled/v3/components/or-pagination-v3/index.js +5 -5
- package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
- package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
- package/dist/bundled/v3/components/or-sidebar-v3/index.js +2 -16
- package/dist/bundled/v3/components/or-sidebar-v3/styles.d.ts +1 -7
- package/dist/bundled/v3/components/or-switch-v3/index.js +3 -3
- package/dist/bundled/v3/components/or-toast-v3/index.js +4 -4
- package/dist/bundled/v3/index.js +23 -40
- package/dist/bundled/v3/{types-22fbf9d6.js → types-8f6f3598.js} +2 -2
- package/dist/esm/v2/{OrButton-66964360.js → OrButton-d067bcac.js} +1 -1
- package/dist/esm/v2/{OrCardCollection-5a9eda35.js → OrCardCollection-cab5acb9.js} +1 -1
- package/dist/esm/v2/{OrConfirm-9dbdedd7.js → OrConfirm-efe95ff6.js} +1 -1
- package/dist/esm/v2/{OrLoader-76307488.js → OrLoader-a6ae193f.js} +11 -4
- package/dist/esm/v2/{OrPagination-1adbcadb.js → OrPagination-1acb7176.js} +1 -1
- package/dist/esm/v2/{OrSidebar-27236fbd.js → OrSidebar-fabc7bc9.js} +34 -155
- package/dist/esm/v2/{OrSwitch-8549219a.js → OrSwitch-c2429fc0.js} +1 -1
- package/dist/esm/v2/components/index.js +8 -9
- package/dist/esm/v2/components/or-button-v3/index.js +2 -2
- package/dist/esm/v2/components/or-card-collection-v3/index.js +3 -3
- package/dist/esm/v2/components/or-confirm-v3/index.js +3 -3
- package/dist/esm/v2/components/or-loader-v3/OrLoader.vue.d.ts +16 -2
- package/dist/esm/v2/components/or-loader-v3/index.js +1 -1
- package/dist/esm/v2/components/or-pagination-v3/index.js +3 -3
- package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
- package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
- package/dist/esm/v2/components/or-sidebar-v3/index.js +1 -13
- package/dist/esm/v2/components/or-sidebar-v3/styles.d.ts +1 -7
- package/dist/esm/v2/components/or-switch-v3/index.js +2 -2
- package/dist/esm/v2/components/or-toast-v3/index.js +2 -2
- package/dist/esm/v2/index.js +8 -9
- package/dist/esm/v2/{types-1f95d710.js → types-4a75cef1.js} +1 -1
- package/dist/esm/v3/{OrButton-c56998e7.js → OrButton-d9f6c316.js} +1 -1
- package/dist/esm/v3/{OrCardCollection-e4fde5b4.js → OrCardCollection-04b36455.js} +1 -1
- package/dist/esm/v3/{OrConfirm-37454a63.js → OrConfirm-d7d6255c.js} +1 -1
- package/dist/esm/v3/{OrLoader-a53d2edf.js → OrLoader-1709eb68.js} +11 -4
- package/dist/esm/v3/{OrPagination-da9e5017.js → OrPagination-7cbdbb05.js} +1 -1
- package/dist/esm/v3/OrSidebar-a62972f5.js +206 -0
- package/dist/esm/v3/{OrSwitch-1c2196da.js → OrSwitch-54988e7a.js} +1 -1
- package/dist/esm/v3/components/index.js +8 -9
- package/dist/esm/v3/components/or-button-v3/index.js +2 -2
- package/dist/esm/v3/components/or-card-collection-v3/index.js +3 -3
- package/dist/esm/v3/components/or-confirm-v3/index.js +3 -3
- package/dist/esm/v3/components/or-loader-v3/OrLoader.vue.d.ts +16 -2
- package/dist/esm/v3/components/or-loader-v3/index.js +1 -1
- package/dist/esm/v3/components/or-pagination-v3/index.js +3 -3
- package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
- package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
- package/dist/esm/v3/components/or-sidebar-v3/index.js +1 -12
- package/dist/esm/v3/components/or-sidebar-v3/styles.d.ts +1 -7
- package/dist/esm/v3/components/or-switch-v3/index.js +2 -2
- package/dist/esm/v3/components/or-toast-v3/index.js +2 -2
- package/dist/esm/v3/index.js +8 -9
- package/dist/esm/v3/{types-b79e4387.js → types-c3417028.js} +1 -1
- package/package.json +1 -1
- package/src/components/or-loader-v3/OrLoader.stories3.ts +16 -4
- package/src/components/or-loader-v3/OrLoader.vue +10 -2
- package/src/components/or-loader-v3/styles.ts +1 -2
- package/src/components/or-sidebar-v3/OrSidebar.docs.mdx +0 -6
- package/src/components/or-sidebar-v3/OrSidebar.stories3.ts +12 -253
- package/src/components/or-sidebar-v3/OrSidebar.vue +23 -130
- package/src/components/or-sidebar-v3/styles.ts +9 -114
- package/dist/bundled/v2/OrSidebarCollapseButton-8297ef86.js +0 -125
- package/dist/bundled/v2/components/or-sidebar-v3/partials/index.d.ts +0 -1
- package/dist/bundled/v2/components/or-sidebar-v3/partials/index.js +0 -18
- package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +0 -12
- package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +0 -53
- package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +0 -1
- package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +0 -18
- package/dist/bundled/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +0 -2
- package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-7f3f1a16.js +0 -291
- package/dist/bundled/v3/OrSidebarCollapseButton.vue_vue_type_script_lang-9aeba2d4.js +0 -75
- package/dist/bundled/v3/components/or-sidebar-v3/partials/index.d.ts +0 -1
- package/dist/bundled/v3/components/or-sidebar-v3/partials/index.js +0 -17
- package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +0 -12
- package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +0 -53
- package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +0 -1
- package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +0 -17
- package/dist/bundled/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +0 -2
- package/dist/esm/v2/OrSidebarCollapseButton-cfe51a60.js +0 -123
- package/dist/esm/v2/components/or-sidebar-v3/partials/index.d.ts +0 -1
- package/dist/esm/v2/components/or-sidebar-v3/partials/index.js +0 -16
- package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +0 -12
- package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +0 -53
- package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +0 -1
- package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +0 -16
- package/dist/esm/v2/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +0 -2
- package/dist/esm/v3/OrSidebar-61d84c3e.js +0 -313
- package/dist/esm/v3/OrSidebarCollapseButton-1b9c83ef.js +0 -94
- package/dist/esm/v3/components/or-sidebar-v3/partials/index.d.ts +0 -1
- package/dist/esm/v3/components/or-sidebar-v3/partials/index.js +0 -15
- package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.d.ts +0 -12
- package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue.d.ts +0 -53
- package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.d.ts +0 -1
- package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.js +0 -15
- package/dist/esm/v3/components/or-sidebar-v3/partials/or-sidebar-collapse-button/styles.d.ts +0 -2
- package/src/components/or-sidebar-v3/partials/index.ts +0 -1
- package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.stories3.ts +0 -48
- package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue +0 -79
- package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/index.ts +0 -1
- 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,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 +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
|
-
};
|