@onereach/ui-components 2.72.1-beta.2252.0 → 2.72.1

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 (47) hide show
  1. package/dist/bundled/v2/OrSidebar-c95ef614.js +230 -0
  2. package/dist/bundled/v2/components/index.js +1 -1
  3. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  4. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  5. package/dist/bundled/v2/components/or-sidebar-v3/index.js +1 -12
  6. package/dist/bundled/v2/components/or-sidebar-v3/styles.d.ts +1 -9
  7. package/dist/bundled/v2/index.js +2 -2
  8. package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-ce0b152c.js +181 -0
  9. package/dist/bundled/v3/components/index.js +1 -1
  10. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  11. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  12. package/dist/bundled/v3/components/or-sidebar-v3/index.js +1 -14
  13. package/dist/bundled/v3/components/or-sidebar-v3/styles.d.ts +1 -9
  14. package/dist/bundled/v3/index.js +9 -25
  15. package/dist/esm/v2/OrSidebar-fabc7bc9.js +228 -0
  16. package/dist/esm/v2/components/index.js +1 -1
  17. package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  18. package/dist/esm/v2/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  19. package/dist/esm/v2/components/or-sidebar-v3/index.js +1 -12
  20. package/dist/esm/v2/components/or-sidebar-v3/styles.d.ts +1 -9
  21. package/dist/esm/v2/index.js +1 -1
  22. package/dist/esm/v3/OrSidebar-a62972f5.js +206 -0
  23. package/dist/esm/v3/components/index.js +1 -1
  24. package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.stories3.d.ts +1 -36
  25. package/dist/esm/v3/components/or-sidebar-v3/OrSidebar.vue.d.ts +4 -49
  26. package/dist/esm/v3/components/or-sidebar-v3/index.js +1 -11
  27. package/dist/esm/v3/components/or-sidebar-v3/styles.d.ts +1 -9
  28. package/dist/esm/v3/index.js +1 -1
  29. package/package.json +4 -3
  30. package/src/components/or-sidebar-v3/OrSidebar.docs.mdx +0 -6
  31. package/src/components/or-sidebar-v3/OrSidebar.stories3.ts +12 -253
  32. package/src/components/or-sidebar-v3/OrSidebar.vue +23 -130
  33. package/src/components/or-sidebar-v3/styles.ts +9 -164
  34. package/dist/bundled/v2/OrSidebar-efd4b98a.js +0 -464
  35. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +0 -12
  36. package/dist/bundled/v2/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +0 -53
  37. package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-66f8f0fd.js +0 -356
  38. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +0 -12
  39. package/dist/bundled/v3/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +0 -53
  40. package/dist/esm/v2/OrSidebar-b7202f16.js +0 -461
  41. package/dist/esm/v2/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +0 -12
  42. package/dist/esm/v2/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +0 -53
  43. package/dist/esm/v3/OrSidebar-3567338f.js +0 -396
  44. package/dist/esm/v3/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +0 -12
  45. package/dist/esm/v3/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +0 -53
  46. package/src/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.ts +0 -48
  47. package/src/components/or-sidebar-v3/OrSidebarCollapseButton.vue +0 -74
@@ -0,0 +1,206 @@
1
+ import { useDraggable, useElementBounding } from '@vueuse/core';
2
+ import _ from 'lodash';
3
+ import { defineComponent, ref, computed, watch } from 'vue-demi';
4
+ import { openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode } from 'vue';
5
+
6
+ var OrSidebarPlacement;
7
+ (function (OrSidebarPlacement) {
8
+ OrSidebarPlacement["left"] = "left";
9
+ OrSidebarPlacement["right"] = "right";
10
+ })(OrSidebarPlacement || (OrSidebarPlacement = {}));
11
+
12
+ const SidebarRoot = [
13
+ // Position
14
+ 'relative',
15
+ // Layout
16
+ 'flex', 'flex-col', 'shrink-0',
17
+ // Box
18
+ 'min-h-0', 'p-0'];
19
+ const SidebarRootSides = {
20
+ [OrSidebarPlacement.left]: [
21
+ // Borders
22
+ 'border-r-[1px]', 'border-r-solid', 'border-r-secondary dark:border-r-secondary-dark'],
23
+ [OrSidebarPlacement.right]: [
24
+ // Borders
25
+ 'border-l-[1px]', 'border-l-solid', 'border-l-secondary dark:border-l-secondary-dark']
26
+ };
27
+ const SidebarResize = [
28
+ // Position
29
+ 'absolute', 'inset-y-none', 'z-[1]',
30
+ // Box
31
+ 'w-[12px]', 'h-[100%]',
32
+ // Cursor
33
+ 'cursor-ew-resize'];
34
+ const SidebarResizeSides = {
35
+ [OrSidebarPlacement.left]: [
36
+ // Position
37
+ '-right-[1px]',
38
+ // Borders
39
+ 'hover:border-r-2', 'hover:border-r-primary hover:dark:border-r-primary-dark',
40
+ // Transition
41
+ 'transition-[border-right]'],
42
+ [OrSidebarPlacement.right]: [
43
+ // Position
44
+ '-left-[1px]',
45
+ // Borders
46
+ 'hover:border-l-2', 'hover:border-l-primary hover:dark:border-l-primary-dark',
47
+ // Transition
48
+ 'transition-[border-left]']
49
+ };
50
+ const SidebarResizingSides = {
51
+ [OrSidebarPlacement.left]: [
52
+ // Borders
53
+ 'border-r-2', 'border-r-primary dark:border-r-primary-dark'],
54
+ [OrSidebarPlacement.right]: [
55
+ // Borders
56
+ 'border-l-2', 'border-l-primary dark:border-l-primary-dark']
57
+ };
58
+ const SidebarMain = [
59
+ // Layout
60
+ 'flex', 'flex-col', 'grow',
61
+ // Box
62
+ 'min-h-0'];
63
+ const SidebarHeader = [
64
+ // Sizing
65
+ 'p-md'];
66
+ const SidebarContent = [
67
+ // Layout
68
+ 'grow', 'overflow-auto',
69
+ // Sizing
70
+ 'p-md'];
71
+ const SidebarFooter = [
72
+ // Sizing
73
+ 'p-md',
74
+ // Borders
75
+ 'border-t-[1px]', 'border-t-solid', 'border-t-secondary dark:border-t-secondary-dark'];
76
+
77
+ var script = defineComponent({
78
+ name: 'OrSidebar',
79
+ props: {
80
+ width: {
81
+ type: Number,
82
+ required: false,
83
+ default: 0,
84
+ validator: value => _.isNumber(value) && value >= 0
85
+ },
86
+ minimumWidth: {
87
+ type: Number,
88
+ required: false,
89
+ default: 350,
90
+ validator: value => _.isNumber(value) && value >= 0
91
+ },
92
+ /**
93
+ * User may put the component on the right or the left side of a container.
94
+ * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
95
+ *
96
+ * Note: the property doesn't reposition the component in the parent container.
97
+ * @values left, right
98
+ */
99
+ side: {
100
+ type: String,
101
+ default: OrSidebarPlacement.right,
102
+ validator: value => _.includes(_.values(OrSidebarPlacement), value)
103
+ }
104
+ },
105
+ emits: ['change:width'],
106
+ setup(props, {
107
+ emit
108
+ }) {
109
+ // Refs
110
+ const root = ref();
111
+ const resizeBar = ref(null);
112
+ const parentContainer = computed(() => {
113
+ var _a;
114
+ return (_a = root.value) === null || _a === void 0 ? void 0 : _a.parentElement;
115
+ });
116
+ // State
117
+ const startPositionX = ref(0);
118
+ const isResizing = ref(false);
119
+ const localWidth = ref(props.width >= props.minimumWidth ? props.width : props.minimumWidth);
120
+ // Styles
121
+ const sidebarStyle = computed(() => ({
122
+ width: localWidth.value + 'px'
123
+ }));
124
+ const rootStyles = computed(() => ['or-sidebar', ...SidebarRoot, ...SidebarRootSides[props.side]]);
125
+ const resizeStyles = computed(() => [...SidebarResize, ...SidebarResizeSides[props.side], ...(isResizing.value ? SidebarResizingSides[props.side] : [])]);
126
+ const mainStyles = computed(() => [...SidebarMain]);
127
+ const headerStyles = computed(() => [...SidebarHeader]);
128
+ const contentStyles = computed(() => [...SidebarContent]);
129
+ const footerStyles = computed(() => [...SidebarFooter]);
130
+ // Effects
131
+ useDraggable(resizeBar, {
132
+ preventDefault: true,
133
+ onStart: (position, event) => {
134
+ document.body.style.cursor = 'ew-resize';
135
+ document.body.style.userSelect = 'none';
136
+ startPositionX.value = event.x;
137
+ isResizing.value = true;
138
+ },
139
+ onMove: position => {
140
+ const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.left ? -1 : 1);
141
+ const newWidth = localWidth.value - delta;
142
+ localWidth.value = newWidth > maximumWidth.value ? maximumWidth.value : newWidth < props.minimumWidth ? props.minimumWidth : newWidth;
143
+ startPositionX.value = position.x;
144
+ },
145
+ onEnd: () => {
146
+ document.body.style.cursor = '';
147
+ document.body.style.userSelect = '';
148
+ isResizing.value = false;
149
+ }
150
+ });
151
+ const {
152
+ width: maximumWidth
153
+ } = useElementBounding(parentContainer);
154
+ watch(() => props.width, newValue => {
155
+ if (newValue !== localWidth.value) {
156
+ localWidth.value = newValue > maximumWidth.value ? maximumWidth.value : newValue < props.minimumWidth ? props.minimumWidth : newValue;
157
+ }
158
+ });
159
+ watch(() => props.minimumWidth, newMinimum => {
160
+ if (newMinimum > localWidth.value) localWidth.value = newMinimum;
161
+ });
162
+ watch(maximumWidth, newMaximum => {
163
+ if (newMaximum < localWidth.value) localWidth.value = newMaximum;
164
+ });
165
+ watch(localWidth, val => emit('change:width', val));
166
+ return {
167
+ root,
168
+ resizeBar,
169
+ isResizing,
170
+ localWidth,
171
+ sidebarStyle,
172
+ rootStyles,
173
+ resizeStyles,
174
+ mainStyles,
175
+ headerStyles,
176
+ contentStyles,
177
+ footerStyles
178
+ };
179
+ }
180
+ });
181
+
182
+ function render(_ctx, _cache, $props, $setup, $data, $options) {
183
+ return openBlock(), createElementBlock("aside", {
184
+ ref: "root",
185
+ class: normalizeClass(_ctx.rootStyles),
186
+ style: normalizeStyle(_ctx.sidebarStyle)
187
+ }, [createElementVNode("div", {
188
+ ref: "resizeBar",
189
+ class: normalizeClass(_ctx.resizeStyles)
190
+ }, null, 2 /* CLASS */), createElementVNode("div", {
191
+ class: normalizeClass(_ctx.mainStyles)
192
+ }, [_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
193
+ key: 0,
194
+ class: normalizeClass(_ctx.headerStyles)
195
+ }, [renderSlot(_ctx.$slots, "header")], 2 /* CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
196
+ class: normalizeClass(_ctx.contentStyles)
197
+ }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 2 /* CLASS */), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
198
+ key: 0,
199
+ class: normalizeClass(_ctx.footerStyles)
200
+ }, [renderSlot(_ctx.$slots, "footer")], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */);
201
+ }
202
+
203
+ script.render = render;
204
+ script.__file = "src/components/or-sidebar-v3/OrSidebar.vue";
205
+
206
+ export { OrSidebarPlacement as O, script as s };
@@ -68,7 +68,7 @@ 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 { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar-3567338f.js';
71
+ export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar-a62972f5.js';
72
72
  export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-2b1610ce.js';
73
73
  export { s as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText-afd3d007.js';
74
74
  export { s as OrSlider } from '../OrSlider-87e2da8c.js';
@@ -10,17 +10,7 @@ export declare const Default: StoryFn<import("vue").ComponentOptions<import("vue
10
10
  } | string[], {} & {}, {
11
11
  [x: number]: string;
12
12
  } | {}, true>)>;
13
- export declare const WithCustomWidthConstraints: 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, {
14
- [x: string]: ((...args: any[]) => any) | null;
15
- } | string[], {} & {}, {
16
- [x: number]: string;
17
- } | {}, true>)>;
18
- export declare const NotDraggable: 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, {
19
- [x: string]: ((...args: any[]) => any) | null;
20
- } | string[], {} & {}, {
21
- [x: number]: string;
22
- } | {}, true>)>;
23
- export declare const Collapsible: 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, {
13
+ export declare const WithMinimumWidth: 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, {
24
14
  [x: string]: ((...args: any[]) => any) | null;
25
15
  } | string[], {} & {}, {
26
16
  [x: number]: string;
@@ -40,33 +30,8 @@ export declare const WithFooter: StoryFn<import("vue").ComponentOptions<import("
40
30
  } | string[], {} & {}, {
41
31
  [x: number]: string;
42
32
  } | {}, true>)>;
43
- export declare const WithToolbar: 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, {
44
- [x: string]: ((...args: any[]) => any) | null;
45
- } | string[], {} & {}, {
46
- [x: number]: string;
47
- } | {}, true>)>;
48
- export declare const CollapsibleWithToolbar: 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, {
49
- [x: string]: ((...args: any[]) => any) | null;
50
- } | string[], {} & {}, {
51
- [x: number]: string;
52
- } | {}, true>)>;
53
- export declare const WithTabs: 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, {
54
- [x: string]: ((...args: any[]) => any) | null;
55
- } | string[], {} & {}, {
56
- [x: number]: string;
57
- } | {}, true>)>;
58
33
  export declare const LeftSidebar: 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, {
59
34
  [x: string]: ((...args: any[]) => any) | null;
60
35
  } | string[], {} & {}, {
61
36
  [x: number]: string;
62
37
  } | {}, true>)>;
63
- export declare const WithLeftToolbar: 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, {
64
- [x: string]: ((...args: any[]) => any) | null;
65
- } | string[], {} & {}, {
66
- [x: number]: string;
67
- } | {}, true>)>;
68
- export declare const CollapsibleWithWithLeftToolbar: 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, {
69
- [x: string]: ((...args: any[]) => any) | null;
70
- } | string[], {} & {}, {
71
- [x: number]: string;
72
- } | {}, true>)>;
@@ -4,36 +4,26 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
4
4
  root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
5
5
  resizeBar: import("@vue/composition-api").Ref<HTMLElement | null>;
6
6
  isResizing: import("@vue/composition-api").Ref<boolean>;
7
- isCollapsed: import("@vue/composition-api").Ref<boolean>;
8
7
  localWidth: import("@vue/composition-api").Ref<number>;
9
- isShowingToolbar: import("@vue/composition-api").ComputedRef<boolean>;
10
8
  sidebarStyle: import("@vue/composition-api").ComputedRef<{
11
9
  width: string;
12
10
  }>;
13
11
  rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
14
- sidebarStyles: import("@vue/composition-api").ComputedRef<string[]>;
15
- toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
16
12
  resizeStyles: import("@vue/composition-api").ComputedRef<string[]>;
17
- collapsibleButtonStyles: import("@vue/composition-api").ComputedRef<string[]>;
18
13
  mainStyles: import("@vue/composition-api").ComputedRef<string[]>;
19
14
  headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
20
15
  contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
21
16
  footerStyles: import("@vue/composition-api").ComputedRef<string[]>;
22
- open: () => void;
23
- close: () => void;
24
17
  }> & import("@vue/composition-api").Data, {}, {}, {
25
18
  width: {
26
19
  type: NumberConstructor;
20
+ required: false;
27
21
  default: number;
28
22
  validator: (value?: any) => boolean;
29
23
  };
30
24
  minimumWidth: {
31
25
  type: NumberConstructor;
32
- default: number;
33
- validator: (value?: any) => boolean;
34
- };
35
- maximumWidth: {
36
- type: NumberConstructor;
26
+ required: false;
37
27
  default: number;
38
28
  validator: (value?: any) => boolean;
39
29
  };
@@ -49,27 +39,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
49
39
  default: OrSidebarPlacement;
50
40
  validator: (value?: any) => boolean;
51
41
  };
52
- draggable: {
53
- type: BooleanConstructor;
54
- default: boolean;
55
- };
56
- collapsible: {
57
- type: BooleanConstructor;
58
- default: boolean;
59
- };
60
42
  }, import("@vue/composition-api").ExtractPropTypes<{
61
43
  width: {
62
44
  type: NumberConstructor;
45
+ required: false;
63
46
  default: number;
64
47
  validator: (value?: any) => boolean;
65
48
  };
66
49
  minimumWidth: {
67
50
  type: NumberConstructor;
68
- default: number;
69
- validator: (value?: any) => boolean;
70
- };
71
- maximumWidth: {
72
- type: NumberConstructor;
51
+ required: false;
73
52
  default: number;
74
53
  validator: (value?: any) => boolean;
75
54
  };
@@ -85,59 +64,35 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
85
64
  default: OrSidebarPlacement;
86
65
  validator: (value?: any) => boolean;
87
66
  };
88
- draggable: {
89
- type: BooleanConstructor;
90
- default: boolean;
91
- };
92
- collapsible: {
93
- type: BooleanConstructor;
94
- default: boolean;
95
- };
96
67
  }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
97
68
  width: number;
98
69
  minimumWidth: number;
99
- maximumWidth: number;
100
70
  side: OrSidebarPlacement;
101
- draggable: boolean;
102
- collapsible: boolean;
103
71
  } & {} & {
104
72
  [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
105
73
  }, import("@vue/composition-api").ShallowUnwrapRef<{
106
74
  root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
107
75
  resizeBar: import("@vue/composition-api").Ref<HTMLElement | null>;
108
76
  isResizing: import("@vue/composition-api").Ref<boolean>;
109
- isCollapsed: import("@vue/composition-api").Ref<boolean>;
110
77
  localWidth: import("@vue/composition-api").Ref<number>;
111
- isShowingToolbar: import("@vue/composition-api").ComputedRef<boolean>;
112
78
  sidebarStyle: import("@vue/composition-api").ComputedRef<{
113
79
  width: string;
114
80
  }>;
115
81
  rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
116
- sidebarStyles: import("@vue/composition-api").ComputedRef<string[]>;
117
- toolbarStyles: import("@vue/composition-api").ComputedRef<string[]>;
118
82
  resizeStyles: import("@vue/composition-api").ComputedRef<string[]>;
119
- collapsibleButtonStyles: import("@vue/composition-api").ComputedRef<string[]>;
120
83
  mainStyles: import("@vue/composition-api").ComputedRef<string[]>;
121
84
  headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
122
85
  contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
123
86
  footerStyles: import("@vue/composition-api").ComputedRef<string[]>;
124
- open: () => void;
125
- close: () => void;
126
87
  }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
127
88
  width: number;
128
89
  minimumWidth: number;
129
- maximumWidth: number;
130
90
  side: OrSidebarPlacement;
131
- draggable: boolean;
132
- collapsible: boolean;
133
91
  } & {} & {
134
92
  [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
135
93
  }, {
136
94
  width: number;
137
95
  minimumWidth: number;
138
- maximumWidth: number;
139
96
  side: OrSidebarPlacement;
140
- draggable: boolean;
141
- collapsible: boolean;
142
97
  }, true>);
143
98
  export default _default;
@@ -1,15 +1,5 @@
1
- export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../../OrSidebar-3567338f.js';
1
+ export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../../OrSidebar-a62972f5.js';
2
2
  import '@vueuse/core';
3
3
  import 'lodash';
4
4
  import 'vue-demi';
5
- import '../../OrIconButton-2dcfb83e.js';
6
- import '../../OrIcon-34f59f73.js';
7
5
  import 'vue';
8
- import '../../OrTooltip-b07616f4.js';
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,18 +1,10 @@
1
1
  import { OrSidebarPlacement } from './props';
2
2
  export declare const SidebarRoot: string[];
3
- export declare const SidebarBar: string[];
4
- export declare const SidebarToolbar: string[];
5
- export declare const CollapsibleSidebarToolbar: string[];
6
- export declare const SidebarSides: Record<OrSidebarPlacement, string[]>;
7
- export declare const SidebarToolbarSides: Record<OrSidebarPlacement, string[]>;
3
+ export declare const SidebarRootSides: Record<OrSidebarPlacement, string[]>;
8
4
  export declare const SidebarResize: string[];
9
5
  export declare const SidebarResizeSides: Record<OrSidebarPlacement, string[]>;
10
- export declare const SidebarCollapseButton: string[];
11
- export declare const SidebarCollapseButtonSides: Record<OrSidebarPlacement, string[]>;
12
6
  export declare const SidebarResizingSides: Record<OrSidebarPlacement, string[]>;
13
7
  export declare const SidebarMain: string[];
14
8
  export declare const SidebarHeader: string[];
15
9
  export declare const SidebarContent: string[];
16
10
  export declare const SidebarFooter: string[];
17
- export declare const CollapseButtonContainer: string[];
18
- export declare const CollapseButton: string[];
@@ -68,7 +68,7 @@ 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 { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-3567338f.js';
71
+ export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-a62972f5.js';
72
72
  export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';
73
73
  export { s as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from './OrSkeletonText-afd3d007.js';
74
74
  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.1-beta.2252.0",
3
+ "version": "2.72.1",
4
4
  "description": "Vue components library for v2/3",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/auto/index.js",
@@ -38,7 +38,7 @@
38
38
  "@codemirror/lang-json": "6.0.0",
39
39
  "@codemirror/lang-markdown": "6.0.1",
40
40
  "@floating-ui/dom": "0.3.1",
41
- "@onereach/styles": "^2.33.0",
41
+ "@onereach/styles": "^2.34.0",
42
42
  "@splidejs/splide": "4.0.6",
43
43
  "@types/lodash": "4.14.173",
44
44
  "@types/sortablejs": "1.10.7",
@@ -124,5 +124,6 @@
124
124
  "default": "./dist/bundled/v3/components/*/index.js"
125
125
  },
126
126
  "./package.json": "./package.json"
127
- }
127
+ },
128
+ "gitHead": "e1abb7f3ed16d6229ae322fb52905cedd9907c18"
128
129
  }
@@ -5,9 +5,3 @@ import { OrSidebarV3 as OrSidebar } from '@onereach/ui-components';
5
5
  ```
6
6
 
7
7
  <DocsPage />
8
-
9
- ## Migration Guide from V1
10
- - added property `draggable`
11
- - added property `maximumWidth`
12
- - added property `collapsible`
13
- - added slot `toolbar`