@onereach/ui-components 2.70.3-beta.2213.0 → 2.71.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/{OrConfirm-23c3ce56.js → OrConfirm-057e997e.js} +12 -5
- package/dist/bundled/v2/OrSidebar-c95ef614.js +230 -0
- package/dist/bundled/v2/components/index.js +2 -2
- package/dist/bundled/v2/components/or-confirm-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 -8
- package/dist/bundled/v2/index.js +3 -3
- package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-05b21989.js → OrConfirm.vue_vue_type_script_lang-9d9a3917.js} +12 -5
- package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-ce0b152c.js +181 -0
- package/dist/bundled/v3/components/index.js +2 -2
- package/dist/bundled/v3/components/or-confirm-v3/index.js +2 -2
- 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 +1 -15
- package/dist/bundled/v3/components/or-sidebar-v3/styles.d.ts +1 -8
- package/dist/bundled/v3/index.js +11 -27
- package/dist/esm/v2/{OrConfirm-e2ab9b4c.js → OrConfirm-047d4086.js} +13 -6
- package/dist/esm/v2/OrSidebar-fabc7bc9.js +228 -0
- package/dist/esm/v2/components/index.js +2 -2
- package/dist/esm/v2/components/or-confirm-v3/index.js +7 -7
- 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 -8
- package/dist/esm/v2/index.js +2 -2
- package/dist/esm/v3/{OrConfirm-1bcd39b1.js → OrConfirm-fee3c859.js} +13 -6
- package/dist/esm/v3/OrSidebar-a62972f5.js +206 -0
- package/dist/esm/v3/components/index.js +2 -2
- package/dist/esm/v3/components/or-confirm-v3/index.js +6 -6
- 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 -8
- package/dist/esm/v3/index.js +2 -2
- package/package.json +3 -2
- package/src/components/or-confirm-v3/OrConfirm.vue +11 -10
- package/src/components/or-confirm-v3/styles.ts +13 -3
- package/src/components/or-sidebar-v3/OrSidebar.docs.mdx +0 -6
- package/src/components/or-sidebar-v3/OrSidebar.stories3.ts +10 -230
- package/src/components/or-sidebar-v3/OrSidebar.vue +22 -121
- package/src/components/or-sidebar-v3/styles.ts +9 -161
- package/dist/bundled/v2/OrSidebar-774b382d.js +0 -462
- package/dist/bundled/v2/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +0 -12
- package/dist/bundled/v2/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +0 -53
- package/dist/bundled/v3/OrSidebar.vue_vue_type_script_lang-8305a28b.js +0 -354
- package/dist/bundled/v3/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +0 -12
- package/dist/bundled/v3/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +0 -53
- package/dist/esm/v2/OrSidebar-a6ee22d1.js +0 -459
- package/dist/esm/v2/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +0 -12
- package/dist/esm/v2/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +0 -53
- package/dist/esm/v3/OrSidebar-f2150587.js +0 -394
- package/dist/esm/v3/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.d.ts +0 -12
- package/dist/esm/v3/components/or-sidebar-v3/OrSidebarCollapseButton.vue.d.ts +0 -53
- package/src/components/or-sidebar-v3/OrSidebarCollapseButton.stories3.ts +0 -48
- package/src/components/or-sidebar-v3/OrSidebarCollapseButton.vue +0 -74
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import '
|
|
2
|
-
import { useMagicKeys, whenever } from '@vueuse/core';
|
|
1
|
+
import { useMagicKeys, whenever, onClickOutside } from '@vueuse/core';
|
|
3
2
|
import { l as logicAnd } from './index-17f264f9.js';
|
|
3
|
+
import './index-fa6eb4ca.js';
|
|
4
4
|
import { O as OrOverlay } from './OrOverlay-3c89d622.js';
|
|
5
5
|
import { O as OrButton, a as ButtonColor } from './OrButton-a846fa7e.js';
|
|
6
6
|
import { O as OrInput } from './OrInput-82ccfe00.js';
|
|
@@ -14,12 +14,14 @@ var ConfirmType;
|
|
|
14
14
|
})(ConfirmType || (ConfirmType = {}));
|
|
15
15
|
|
|
16
16
|
const ConfirmRoot = [
|
|
17
|
+
// Position
|
|
18
|
+
'fixed md:static', 'left-none', 'right-none', 'bottom-none',
|
|
17
19
|
// Layout
|
|
18
20
|
'layout-column',
|
|
19
21
|
// Box
|
|
20
|
-
'w-[320px]',
|
|
22
|
+
'w-full md:w-[320px]',
|
|
21
23
|
// Shape
|
|
22
|
-
'rounded-md',
|
|
24
|
+
'rounded-0 md:rounded-md',
|
|
23
25
|
// Spacing
|
|
24
26
|
'px-lg', 'py-lg', 'gap-md',
|
|
25
27
|
// Typography
|
|
@@ -52,8 +54,10 @@ const ConfirmFooterTypes = {
|
|
|
52
54
|
'flex-row-reverse']
|
|
53
55
|
};
|
|
54
56
|
const ConfirmFooterButtons = [
|
|
57
|
+
// Layout
|
|
58
|
+
'grow',
|
|
55
59
|
// Box
|
|
56
|
-
'w-[128px]'];
|
|
60
|
+
'w-auto md:w-[128px]'];
|
|
57
61
|
|
|
58
62
|
var script = defineComponent({
|
|
59
63
|
name: 'OrConfirm',
|
|
@@ -195,6 +199,9 @@ var script = defineComponent({
|
|
|
195
199
|
const inputBoxStyles = computed(() => [...ConfirmInput]);
|
|
196
200
|
const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
|
|
197
201
|
const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
|
|
202
|
+
// #region Click Outside
|
|
203
|
+
onClickOutside(root, close);
|
|
204
|
+
// #endregion
|
|
198
205
|
return {
|
|
199
206
|
root,
|
|
200
207
|
confirmationInput,
|
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
import { useDraggable, useElementBounding } from '@vueuse/core';
|
|
2
|
+
import _ from 'lodash';
|
|
3
|
+
import './index-fa6eb4ca.js';
|
|
4
|
+
import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
|
|
5
|
+
import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
|
|
6
|
+
|
|
7
|
+
var OrSidebarPlacement;
|
|
8
|
+
(function (OrSidebarPlacement) {
|
|
9
|
+
OrSidebarPlacement["left"] = "left";
|
|
10
|
+
OrSidebarPlacement["right"] = "right";
|
|
11
|
+
})(OrSidebarPlacement || (OrSidebarPlacement = {}));
|
|
12
|
+
|
|
13
|
+
const SidebarRoot = [
|
|
14
|
+
// Position
|
|
15
|
+
'relative',
|
|
16
|
+
// Layout
|
|
17
|
+
'flex', 'flex-col', 'shrink-0',
|
|
18
|
+
// Box
|
|
19
|
+
'min-h-0', 'p-0'];
|
|
20
|
+
const SidebarRootSides = {
|
|
21
|
+
[OrSidebarPlacement.left]: [
|
|
22
|
+
// Borders
|
|
23
|
+
'border-r-[1px]', 'border-r-solid', 'border-r-secondary dark:border-r-secondary-dark'],
|
|
24
|
+
[OrSidebarPlacement.right]: [
|
|
25
|
+
// Borders
|
|
26
|
+
'border-l-[1px]', 'border-l-solid', 'border-l-secondary dark:border-l-secondary-dark']
|
|
27
|
+
};
|
|
28
|
+
const SidebarResize = [
|
|
29
|
+
// Position
|
|
30
|
+
'absolute', 'inset-y-none', 'z-[1]',
|
|
31
|
+
// Box
|
|
32
|
+
'w-[12px]', 'h-[100%]',
|
|
33
|
+
// Cursor
|
|
34
|
+
'cursor-ew-resize'];
|
|
35
|
+
const SidebarResizeSides = {
|
|
36
|
+
[OrSidebarPlacement.left]: [
|
|
37
|
+
// Position
|
|
38
|
+
'-right-[1px]',
|
|
39
|
+
// Borders
|
|
40
|
+
'hover:border-r-2', 'hover:border-r-primary hover:dark:border-r-primary-dark',
|
|
41
|
+
// Transition
|
|
42
|
+
'transition-[border-right]'],
|
|
43
|
+
[OrSidebarPlacement.right]: [
|
|
44
|
+
// Position
|
|
45
|
+
'-left-[1px]',
|
|
46
|
+
// Borders
|
|
47
|
+
'hover:border-l-2', 'hover:border-l-primary hover:dark:border-l-primary-dark',
|
|
48
|
+
// Transition
|
|
49
|
+
'transition-[border-left]']
|
|
50
|
+
};
|
|
51
|
+
const SidebarResizingSides = {
|
|
52
|
+
[OrSidebarPlacement.left]: [
|
|
53
|
+
// Borders
|
|
54
|
+
'border-r-2', 'border-r-primary dark:border-r-primary-dark'],
|
|
55
|
+
[OrSidebarPlacement.right]: [
|
|
56
|
+
// Borders
|
|
57
|
+
'border-l-2', 'border-l-primary dark:border-l-primary-dark']
|
|
58
|
+
};
|
|
59
|
+
const SidebarMain = [
|
|
60
|
+
// Layout
|
|
61
|
+
'flex', 'flex-col', 'grow',
|
|
62
|
+
// Box
|
|
63
|
+
'min-h-0'];
|
|
64
|
+
const SidebarHeader = [
|
|
65
|
+
// Sizing
|
|
66
|
+
'p-md'];
|
|
67
|
+
const SidebarContent = [
|
|
68
|
+
// Layout
|
|
69
|
+
'grow', 'overflow-auto',
|
|
70
|
+
// Sizing
|
|
71
|
+
'p-md'];
|
|
72
|
+
const SidebarFooter = [
|
|
73
|
+
// Sizing
|
|
74
|
+
'p-md',
|
|
75
|
+
// Borders
|
|
76
|
+
'border-t-[1px]', 'border-t-solid', 'border-t-secondary dark:border-t-secondary-dark'];
|
|
77
|
+
|
|
78
|
+
var script = defineComponent({
|
|
79
|
+
name: 'OrSidebar',
|
|
80
|
+
props: {
|
|
81
|
+
width: {
|
|
82
|
+
type: Number,
|
|
83
|
+
required: false,
|
|
84
|
+
default: 0,
|
|
85
|
+
validator: value => _.isNumber(value) && value >= 0
|
|
86
|
+
},
|
|
87
|
+
minimumWidth: {
|
|
88
|
+
type: Number,
|
|
89
|
+
required: false,
|
|
90
|
+
default: 350,
|
|
91
|
+
validator: value => _.isNumber(value) && value >= 0
|
|
92
|
+
},
|
|
93
|
+
/**
|
|
94
|
+
* User may put the component on the right or the left side of a container.
|
|
95
|
+
* This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
|
|
96
|
+
*
|
|
97
|
+
* Note: the property doesn't reposition the component in the parent container.
|
|
98
|
+
* @values left, right
|
|
99
|
+
*/
|
|
100
|
+
side: {
|
|
101
|
+
type: String,
|
|
102
|
+
default: OrSidebarPlacement.right,
|
|
103
|
+
validator: value => _.includes(_.values(OrSidebarPlacement), value)
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
emits: ['change:width'],
|
|
107
|
+
setup(props, {
|
|
108
|
+
emit
|
|
109
|
+
}) {
|
|
110
|
+
// Refs
|
|
111
|
+
const root = ref();
|
|
112
|
+
const resizeBar = ref(null);
|
|
113
|
+
const parentContainer = computed(() => {
|
|
114
|
+
var _a;
|
|
115
|
+
return (_a = root.value) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
116
|
+
});
|
|
117
|
+
// State
|
|
118
|
+
const startPositionX = ref(0);
|
|
119
|
+
const isResizing = ref(false);
|
|
120
|
+
const localWidth = ref(props.width >= props.minimumWidth ? props.width : props.minimumWidth);
|
|
121
|
+
// Styles
|
|
122
|
+
const sidebarStyle = computed(() => ({
|
|
123
|
+
width: localWidth.value + 'px'
|
|
124
|
+
}));
|
|
125
|
+
const rootStyles = computed(() => ['or-sidebar', ...SidebarRoot, ...SidebarRootSides[props.side]]);
|
|
126
|
+
const resizeStyles = computed(() => [...SidebarResize, ...SidebarResizeSides[props.side], ...(isResizing.value ? SidebarResizingSides[props.side] : [])]);
|
|
127
|
+
const mainStyles = computed(() => [...SidebarMain]);
|
|
128
|
+
const headerStyles = computed(() => [...SidebarHeader]);
|
|
129
|
+
const contentStyles = computed(() => [...SidebarContent]);
|
|
130
|
+
const footerStyles = computed(() => [...SidebarFooter]);
|
|
131
|
+
// Effects
|
|
132
|
+
useDraggable(resizeBar, {
|
|
133
|
+
preventDefault: true,
|
|
134
|
+
onStart: (position, event) => {
|
|
135
|
+
document.body.style.cursor = 'ew-resize';
|
|
136
|
+
document.body.style.userSelect = 'none';
|
|
137
|
+
startPositionX.value = event.x;
|
|
138
|
+
isResizing.value = true;
|
|
139
|
+
},
|
|
140
|
+
onMove: position => {
|
|
141
|
+
const delta = (position.x - startPositionX.value) * (props.side === OrSidebarPlacement.left ? -1 : 1);
|
|
142
|
+
const newWidth = localWidth.value - delta;
|
|
143
|
+
localWidth.value = newWidth > maximumWidth.value ? maximumWidth.value : newWidth < props.minimumWidth ? props.minimumWidth : newWidth;
|
|
144
|
+
startPositionX.value = position.x;
|
|
145
|
+
},
|
|
146
|
+
onEnd: () => {
|
|
147
|
+
document.body.style.cursor = '';
|
|
148
|
+
document.body.style.userSelect = '';
|
|
149
|
+
isResizing.value = false;
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
const {
|
|
153
|
+
width: maximumWidth
|
|
154
|
+
} = useElementBounding(parentContainer);
|
|
155
|
+
watch(() => props.width, newValue => {
|
|
156
|
+
if (newValue !== localWidth.value) {
|
|
157
|
+
localWidth.value = newValue > maximumWidth.value ? maximumWidth.value : newValue < props.minimumWidth ? props.minimumWidth : newValue;
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
watch(() => props.minimumWidth, newMinimum => {
|
|
161
|
+
if (newMinimum > localWidth.value) localWidth.value = newMinimum;
|
|
162
|
+
});
|
|
163
|
+
watch(maximumWidth, newMaximum => {
|
|
164
|
+
if (newMaximum < localWidth.value) localWidth.value = newMaximum;
|
|
165
|
+
});
|
|
166
|
+
watch(localWidth, val => emit('change:width', val));
|
|
167
|
+
return {
|
|
168
|
+
root,
|
|
169
|
+
resizeBar,
|
|
170
|
+
isResizing,
|
|
171
|
+
localWidth,
|
|
172
|
+
sidebarStyle,
|
|
173
|
+
rootStyles,
|
|
174
|
+
resizeStyles,
|
|
175
|
+
mainStyles,
|
|
176
|
+
headerStyles,
|
|
177
|
+
contentStyles,
|
|
178
|
+
footerStyles
|
|
179
|
+
};
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
|
|
183
|
+
/* script */
|
|
184
|
+
const __vue_script__ = script;
|
|
185
|
+
|
|
186
|
+
/* template */
|
|
187
|
+
var __vue_render__ = function () {
|
|
188
|
+
var _vm = this;
|
|
189
|
+
var _h = _vm.$createElement;
|
|
190
|
+
var _c = _vm._self._c || _h;
|
|
191
|
+
return _c('aside', {
|
|
192
|
+
ref: "root",
|
|
193
|
+
class: _vm.rootStyles,
|
|
194
|
+
style: _vm.sidebarStyle
|
|
195
|
+
}, [_c('div', {
|
|
196
|
+
ref: "resizeBar",
|
|
197
|
+
class: _vm.resizeStyles
|
|
198
|
+
}), _vm._v(" "), _c('div', {
|
|
199
|
+
class: _vm.mainStyles
|
|
200
|
+
}, [_vm.$slots.header ? _c('div', {
|
|
201
|
+
class: _vm.headerStyles
|
|
202
|
+
}, [_vm._t("header")], 2) : _vm._e(), _vm._v(" "), _c('div', {
|
|
203
|
+
class: _vm.contentStyles
|
|
204
|
+
}, [_vm._t("default")], 2)]), _vm._v(" "), _vm.$slots.footer ? _c('div', {
|
|
205
|
+
class: _vm.footerStyles
|
|
206
|
+
}, [_vm._t("footer")], 2) : _vm._e()]);
|
|
207
|
+
};
|
|
208
|
+
var __vue_staticRenderFns__ = [];
|
|
209
|
+
|
|
210
|
+
/* style */
|
|
211
|
+
const __vue_inject_styles__ = undefined;
|
|
212
|
+
/* scoped */
|
|
213
|
+
const __vue_scope_id__ = undefined;
|
|
214
|
+
/* module identifier */
|
|
215
|
+
const __vue_module_identifier__ = undefined;
|
|
216
|
+
/* functional template */
|
|
217
|
+
const __vue_is_functional_template__ = false;
|
|
218
|
+
/* style inject */
|
|
219
|
+
|
|
220
|
+
/* style inject SSR */
|
|
221
|
+
|
|
222
|
+
/* style inject shadow dom */
|
|
223
|
+
|
|
224
|
+
const __vue_component__ = /*#__PURE__*/normalizeComponent({
|
|
225
|
+
render: __vue_render__,
|
|
226
|
+
staticRenderFns: __vue_staticRenderFns__
|
|
227
|
+
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
|
|
228
|
+
var __vue_component__$1 = __vue_component__;
|
|
229
|
+
|
|
230
|
+
export { OrSidebarPlacement as O, __vue_component__$1 as _ };
|
|
@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from '../OrCode-fc6876ec.js';
|
|
|
19
19
|
export { O as OrCollapse } from '../OrCollapse-3aa9a9b7.js';
|
|
20
20
|
export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker-a1a37e83.js';
|
|
21
21
|
export { _ as OrConfirm } from '../OrConfirm-56d01cff.js';
|
|
22
|
-
export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-
|
|
22
|
+
export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-057e997e.js';
|
|
23
23
|
export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-e212f892.js';
|
|
24
24
|
export { O as OrError } from '../OrError-31503e4c.js';
|
|
25
25
|
export { _ as OrErrorTagV3 } from '../OrErrorTag-d0c5bcf4.js';
|
|
@@ -70,7 +70,7 @@ export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegme
|
|
|
70
70
|
export { _ as OrSelect } from '../OrSelect-a23d4210.js';
|
|
71
71
|
export { _ as OrSelectV3 } from '../OrSelect-02fb39f0.js';
|
|
72
72
|
export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-e2b2c9ec.js';
|
|
73
|
-
export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-
|
|
73
|
+
export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../OrSidebar-c95ef614.js';
|
|
74
74
|
export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-242d22f3.js';
|
|
75
75
|
export { _ as OrSkeletonCircleV3, a as OrSkeletonRectV3, b as OrSkeletonTextV3 } from '../OrSkeletonText-516993b4.js';
|
|
76
76
|
export { _ as OrSlider } from '../OrSlider-59d05856.js';
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-
|
|
1
|
+
export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-057e997e.js';
|
|
2
|
+
import '@vueuse/core';
|
|
3
|
+
import '../../index-17f264f9.js';
|
|
2
4
|
import '../../index-fa6eb4ca.js';
|
|
3
5
|
import 'vue';
|
|
4
6
|
import '@vue/composition-api/dist/vue-composition-api.mjs';
|
|
5
|
-
import '@vueuse/core';
|
|
6
|
-
import '../../index-17f264f9.js';
|
|
7
7
|
import '../../OrOverlay-3c89d622.js';
|
|
8
8
|
import '../../OrTeleport.vue2-e9ba3054.js';
|
|
9
9
|
import 'portal-vue';
|
|
@@ -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
|
|
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
|
-
|
|
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
|
-
|
|
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,19 +1,7 @@
|
|
|
1
|
-
export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../../OrSidebar-
|
|
1
|
+
export { O as OrSidebarPlacement, _ as OrSidebarV3 } from '../../OrSidebar-c95ef614.js';
|
|
2
2
|
import '@vueuse/core';
|
|
3
3
|
import 'lodash';
|
|
4
4
|
import '../../index-fa6eb4ca.js';
|
|
5
5
|
import 'vue';
|
|
6
6
|
import '@vue/composition-api/dist/vue-composition-api.mjs';
|
|
7
|
-
import '../../OrIconButton-a2ba92df.js';
|
|
8
|
-
import '../../OrIcon-8625385f.js';
|
|
9
|
-
import '../../useClassAttribute-9bf33346.js';
|
|
10
7
|
import '../../normalize-component-6e8e3d80.js';
|
|
11
|
-
import '../../OrTooltip-fbfa05fd.js';
|
|
12
|
-
import '../../OrPopover-5dc240f1.js';
|
|
13
|
-
import '../../floating-ui.dom.esm-83eba816.js';
|
|
14
|
-
import '../../OrBottomSheet-1cd1ab4c.js';
|
|
15
|
-
import '../../OrOverlay-3c89d622.js';
|
|
16
|
-
import '../../OrTeleport.vue2-e9ba3054.js';
|
|
17
|
-
import 'portal-vue';
|
|
18
|
-
import '../../useElevation-aac032f4.js';
|
|
19
|
-
import '../../useResponsive-e13dfbb0.js';
|
|
@@ -1,17 +1,10 @@
|
|
|
1
1
|
import { OrSidebarPlacement } from './props';
|
|
2
2
|
export declare const SidebarRoot: string[];
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const SidebarToolbar: string[];
|
|
5
|
-
export declare const SidebarSides: Record<OrSidebarPlacement, string[]>;
|
|
6
|
-
export declare const SidebarToolbarSides: Record<OrSidebarPlacement, string[]>;
|
|
3
|
+
export declare const SidebarRootSides: Record<OrSidebarPlacement, string[]>;
|
|
7
4
|
export declare const SidebarResize: string[];
|
|
8
5
|
export declare const SidebarResizeSides: Record<OrSidebarPlacement, string[]>;
|
|
9
|
-
export declare const SidebarCollapseButton: string[];
|
|
10
|
-
export declare const SidebarCollapseButtonSides: Record<OrSidebarPlacement, string[]>;
|
|
11
6
|
export declare const SidebarResizingSides: Record<OrSidebarPlacement, string[]>;
|
|
12
7
|
export declare const SidebarMain: string[];
|
|
13
8
|
export declare const SidebarHeader: string[];
|
|
14
9
|
export declare const SidebarContent: string[];
|
|
15
10
|
export declare const SidebarFooter: string[];
|
|
16
|
-
export declare const CollapseButtonContainer: string[];
|
|
17
|
-
export declare const CollapseButton: string[];
|