@onereach/ui-components 26.0.0 → 26.0.1-beta.5837.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/esm/{OrResizeablePanel-BfuVn8Lq.mjs → OrResizeablePanel-D62tzOxs.mjs} +134 -98
- package/dist/esm/OrResizeablePanel-D62tzOxs.mjs.map +1 -0
- package/dist/esm/components/index.mjs +2 -2
- package/dist/esm/components/or-resizeable-panel-v3/index.mjs +1 -1
- package/dist/esm/components/or-sidebar-v3/index.mjs +1 -1
- package/dist/esm/index.mjs +2 -2
- package/dist/esm/{props-Dx-rjh3U.mjs → props-kE89gx5m.mjs} +39 -32
- package/dist/esm/props-kE89gx5m.mjs.map +1 -0
- package/dist/types/components/or-resizeable-panel-v3/OrResizeablePanel.vue.d.ts +1 -0
- package/dist/types/components/or-resizeable-panel-v3/styles.d.ts +2 -0
- package/package.json +4 -5
- package/dist/esm/OrResizeablePanel-BfuVn8Lq.mjs.map +0 -1
- package/dist/esm/props-Dx-rjh3U.mjs.map +0 -1
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { usePopoverState as
|
|
2
|
-
import { O } from "./OrIconButton-Ds8k8FmS.mjs";
|
|
3
|
-
import { useDraggable as
|
|
4
|
-
import { defineComponent as
|
|
5
|
-
import { _ as
|
|
6
|
-
var
|
|
7
|
-
const
|
|
1
|
+
import { usePopoverState as $ } from "@onereach/ui-components-common/hooks";
|
|
2
|
+
import { O as N } from "./OrIconButton-Ds8k8FmS.mjs";
|
|
3
|
+
import { useDraggable as O } from "@vueuse/core";
|
|
4
|
+
import { defineComponent as W, ref as b, computed as n, toRef as D, watch as I, resolveComponent as M, openBlock as c, createElementBlock as d, normalizeClass as i, normalizeStyle as j, renderSlot as p, createElementVNode as _, createVNode as E, createCommentVNode as w } from "vue";
|
|
5
|
+
import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
|
|
6
|
+
var l = /* @__PURE__ */ ((e) => (e.L = "l", e.M = "m", e.S = "s", e.None = "none", e))(l || {}), t = /* @__PURE__ */ ((e) => (e.Top = "top", e.Bottom = "bottom", e.Left = "left", e.Right = "right", e))(t || {});
|
|
7
|
+
const q = [
|
|
8
8
|
// Layout
|
|
9
9
|
"shrink-0",
|
|
10
10
|
// Theme
|
|
11
11
|
"theme-background-default",
|
|
12
12
|
"dark:theme-background-default-dark"
|
|
13
|
-
],
|
|
13
|
+
], A = {
|
|
14
14
|
[t.Top]: [
|
|
15
15
|
// Layout
|
|
16
16
|
"layout-column"
|
|
@@ -31,29 +31,29 @@ const V = [
|
|
|
31
31
|
// Box
|
|
32
32
|
"h-full min-h-0"
|
|
33
33
|
]
|
|
34
|
-
},
|
|
34
|
+
}, F = [
|
|
35
35
|
// Layout
|
|
36
36
|
"layout-column grow",
|
|
37
37
|
// Overflow
|
|
38
38
|
"overflow-auto"
|
|
39
|
-
],
|
|
40
|
-
[
|
|
39
|
+
], G = {
|
|
40
|
+
[l.L]: [
|
|
41
41
|
// Spacing
|
|
42
42
|
"px-lg",
|
|
43
43
|
"py-lg"
|
|
44
44
|
],
|
|
45
|
-
[
|
|
45
|
+
[l.M]: [
|
|
46
46
|
// Spacing
|
|
47
47
|
"px-md",
|
|
48
48
|
"py-md"
|
|
49
49
|
],
|
|
50
|
-
[
|
|
50
|
+
[l.S]: [
|
|
51
51
|
// Spacing
|
|
52
52
|
"px-sm",
|
|
53
53
|
"py-sm"
|
|
54
54
|
],
|
|
55
|
-
[
|
|
56
|
-
},
|
|
55
|
+
[l.None]: []
|
|
56
|
+
}, H = [], J = {
|
|
57
57
|
[t.Top]: [
|
|
58
58
|
// Box
|
|
59
59
|
"h-[calc(theme(spacing.md)+theme(spacing.sm))]"
|
|
@@ -70,7 +70,7 @@ const V = [
|
|
|
70
70
|
// Box
|
|
71
71
|
"w-[calc(theme(spacing.md)+theme(spacing.sm))]"
|
|
72
72
|
]
|
|
73
|
-
},
|
|
73
|
+
}, K = [
|
|
74
74
|
// Position
|
|
75
75
|
"relative",
|
|
76
76
|
// Layout
|
|
@@ -86,7 +86,7 @@ const V = [
|
|
|
86
86
|
// Theme (after, activated)
|
|
87
87
|
"after:activated:border-primary-hover",
|
|
88
88
|
"after:dark:activated:border-primary-hover-dark"
|
|
89
|
-
],
|
|
89
|
+
], Q = {
|
|
90
90
|
[t.Top]: [
|
|
91
91
|
// Layout
|
|
92
92
|
"flex flex-col justify-center",
|
|
@@ -131,7 +131,7 @@ const V = [
|
|
|
131
131
|
// Theme (after)
|
|
132
132
|
"after:border-l-1"
|
|
133
133
|
]
|
|
134
|
-
},
|
|
134
|
+
}, U = [
|
|
135
135
|
// Position
|
|
136
136
|
"absolute",
|
|
137
137
|
// Shape
|
|
@@ -146,7 +146,7 @@ const V = [
|
|
|
146
146
|
"dark:theme-background-default-dark",
|
|
147
147
|
"theme-border-outline-variant border-1",
|
|
148
148
|
"dark:theme-border-outline-variant-dark"
|
|
149
|
-
],
|
|
149
|
+
], X = {
|
|
150
150
|
[t.Top]: [
|
|
151
151
|
// Position
|
|
152
152
|
"left-md"
|
|
@@ -163,7 +163,7 @@ const V = [
|
|
|
163
163
|
// Position
|
|
164
164
|
"top-md"
|
|
165
165
|
]
|
|
166
|
-
},
|
|
166
|
+
}, Y = [
|
|
167
167
|
// Layout
|
|
168
168
|
"shrink-0",
|
|
169
169
|
// Overflow
|
|
@@ -175,7 +175,7 @@ const V = [
|
|
|
175
175
|
// Theme
|
|
176
176
|
"theme-border-outline-variant border-1",
|
|
177
177
|
"dark:theme-border-outline-variant-dark"
|
|
178
|
-
],
|
|
178
|
+
], Z = {
|
|
179
179
|
[t.Top]: [
|
|
180
180
|
// Layout
|
|
181
181
|
"layout-row",
|
|
@@ -204,10 +204,37 @@ const V = [
|
|
|
204
204
|
"!border-r-0",
|
|
205
205
|
"!border-y-0"
|
|
206
206
|
]
|
|
207
|
-
},
|
|
207
|
+
}, ee = [
|
|
208
|
+
// Layout
|
|
209
|
+
"layout-column",
|
|
210
|
+
"shrink-0",
|
|
211
|
+
// Overflow
|
|
212
|
+
"overflow-auto",
|
|
213
|
+
// Spacing
|
|
214
|
+
"px-md",
|
|
215
|
+
"py-md",
|
|
216
|
+
"gap-md"
|
|
217
|
+
], te = {
|
|
218
|
+
[l.L]: [
|
|
219
|
+
// Box
|
|
220
|
+
"px-lg",
|
|
221
|
+
"py-lg"
|
|
222
|
+
],
|
|
223
|
+
[l.M]: [
|
|
224
|
+
// Box
|
|
225
|
+
"px-md",
|
|
226
|
+
"py-md"
|
|
227
|
+
],
|
|
228
|
+
[l.S]: [
|
|
229
|
+
// Box
|
|
230
|
+
"px-sm",
|
|
231
|
+
"py-sm"
|
|
232
|
+
],
|
|
233
|
+
[l.None]: []
|
|
234
|
+
}, oe = W({
|
|
208
235
|
name: "OrResizeablePanel",
|
|
209
236
|
components: {
|
|
210
|
-
OrIconButton:
|
|
237
|
+
OrIconButton: N
|
|
211
238
|
},
|
|
212
239
|
props: {
|
|
213
240
|
isOpen: {
|
|
@@ -228,7 +255,7 @@ const V = [
|
|
|
228
255
|
},
|
|
229
256
|
padding: {
|
|
230
257
|
type: String,
|
|
231
|
-
default: () =>
|
|
258
|
+
default: () => l.M
|
|
232
259
|
},
|
|
233
260
|
placement: {
|
|
234
261
|
type: String,
|
|
@@ -257,28 +284,31 @@ const V = [
|
|
|
257
284
|
"close",
|
|
258
285
|
"toggle"
|
|
259
286
|
],
|
|
260
|
-
setup(e,
|
|
261
|
-
const
|
|
287
|
+
setup(e, m) {
|
|
288
|
+
const h = b(), y = b(), g = n(() => [
|
|
262
289
|
"or-resizeable-panel-v3",
|
|
263
|
-
...
|
|
264
|
-
...
|
|
265
|
-
]),
|
|
266
|
-
...
|
|
267
|
-
...
|
|
268
|
-
]),
|
|
269
|
-
...
|
|
270
|
-
...
|
|
271
|
-
]),
|
|
272
|
-
...
|
|
273
|
-
...
|
|
290
|
+
...q,
|
|
291
|
+
...A[e.placement]
|
|
292
|
+
]), v = n(() => [
|
|
293
|
+
...F,
|
|
294
|
+
...G[e.padding]
|
|
295
|
+
]), f = n(() => [
|
|
296
|
+
...H,
|
|
297
|
+
...J[e.placement]
|
|
298
|
+
]), k = n(() => [
|
|
299
|
+
...K,
|
|
300
|
+
...Q[e.placement],
|
|
274
301
|
...!e.resizeable || e.collapsible && u.value === "closed" ? ["interactivity-none"] : []
|
|
275
|
-
]), z =
|
|
276
|
-
...
|
|
277
|
-
...
|
|
278
|
-
]), B =
|
|
279
|
-
...
|
|
280
|
-
...
|
|
281
|
-
]),
|
|
302
|
+
]), z = n(() => [
|
|
303
|
+
...U,
|
|
304
|
+
...X[e.placement]
|
|
305
|
+
]), B = n(() => [
|
|
306
|
+
...Y,
|
|
307
|
+
...Z[e.placement]
|
|
308
|
+
]), S = n(() => [
|
|
309
|
+
...ee,
|
|
310
|
+
...te[e.padding]
|
|
311
|
+
]), { state: u, open: R, close: C, toggle: P } = $(D(e, "isOpen"), m.emit), L = n(() => {
|
|
282
312
|
if (u.value === "open")
|
|
283
313
|
switch (e.placement) {
|
|
284
314
|
case t.Top:
|
|
@@ -302,29 +332,29 @@ const V = [
|
|
|
302
332
|
return "keyboard_arrow_left";
|
|
303
333
|
}
|
|
304
334
|
return "menu";
|
|
305
|
-
}),
|
|
335
|
+
}), T = n(() => {
|
|
306
336
|
switch (e.placement) {
|
|
307
337
|
case t.Top:
|
|
308
338
|
case t.Bottom:
|
|
309
339
|
return "height";
|
|
310
340
|
}
|
|
311
341
|
return "width";
|
|
312
|
-
}),
|
|
313
|
-
|
|
314
|
-
|
|
342
|
+
}), s = b(e.width);
|
|
343
|
+
I(() => e.width, (a) => {
|
|
344
|
+
s.value = a;
|
|
315
345
|
});
|
|
316
|
-
let
|
|
317
|
-
const { isDragging:
|
|
318
|
-
onStart: (a,
|
|
346
|
+
let r = 0;
|
|
347
|
+
const { isDragging: x } = O(y, {
|
|
348
|
+
onStart: (a, o) => {
|
|
319
349
|
if (e.resizeable) {
|
|
320
350
|
switch (e.placement) {
|
|
321
351
|
case t.Top:
|
|
322
352
|
case t.Bottom:
|
|
323
|
-
|
|
353
|
+
r = o.y;
|
|
324
354
|
break;
|
|
325
355
|
case t.Left:
|
|
326
356
|
case t.Right:
|
|
327
|
-
|
|
357
|
+
r = o.x;
|
|
328
358
|
break;
|
|
329
359
|
}
|
|
330
360
|
document.body.style.userSelect = "none";
|
|
@@ -332,22 +362,22 @@ const V = [
|
|
|
332
362
|
},
|
|
333
363
|
onMove: (a) => {
|
|
334
364
|
if (e.resizeable) {
|
|
335
|
-
let
|
|
365
|
+
let o = 0;
|
|
336
366
|
switch (e.placement) {
|
|
337
367
|
case t.Top:
|
|
338
|
-
|
|
368
|
+
o = s.value + (a.y - r), r = a.y;
|
|
339
369
|
break;
|
|
340
370
|
case t.Bottom:
|
|
341
|
-
|
|
371
|
+
o = s.value + (r - a.y), r = a.y;
|
|
342
372
|
break;
|
|
343
373
|
case t.Left:
|
|
344
|
-
|
|
374
|
+
o = s.value + (a.x - r), r = a.x;
|
|
345
375
|
break;
|
|
346
376
|
case t.Right:
|
|
347
|
-
|
|
377
|
+
o = s.value + (r - a.x), r = a.x;
|
|
348
378
|
break;
|
|
349
379
|
}
|
|
350
|
-
|
|
380
|
+
o < e.minWidth && (o = e.minWidth), o > e.maxWidth && (o = e.maxWidth), o !== s.value && m.emit("resize", s.value = o);
|
|
351
381
|
}
|
|
352
382
|
},
|
|
353
383
|
onEnd: () => {
|
|
@@ -355,71 +385,77 @@ const V = [
|
|
|
355
385
|
}
|
|
356
386
|
});
|
|
357
387
|
return {
|
|
358
|
-
root:
|
|
359
|
-
resizeBar:
|
|
360
|
-
rootStyles:
|
|
361
|
-
contentStyles:
|
|
362
|
-
contentPlaceholderStyles:
|
|
363
|
-
resizeBarStyles:
|
|
388
|
+
root: h,
|
|
389
|
+
resizeBar: y,
|
|
390
|
+
rootStyles: g,
|
|
391
|
+
contentStyles: v,
|
|
392
|
+
contentPlaceholderStyles: f,
|
|
393
|
+
resizeBarStyles: k,
|
|
364
394
|
collapseButtonContainerStyles: z,
|
|
365
395
|
toolbarStyles: B,
|
|
396
|
+
collapsedContentStyles: S,
|
|
366
397
|
state: u,
|
|
367
|
-
open:
|
|
368
|
-
close:
|
|
369
|
-
toggle:
|
|
370
|
-
collapseButtonIcon:
|
|
371
|
-
currentDirection:
|
|
372
|
-
currentSize:
|
|
373
|
-
isDragging:
|
|
398
|
+
open: R,
|
|
399
|
+
close: C,
|
|
400
|
+
toggle: P,
|
|
401
|
+
collapseButtonIcon: L,
|
|
402
|
+
currentDirection: T,
|
|
403
|
+
currentSize: s,
|
|
404
|
+
isDragging: x
|
|
374
405
|
};
|
|
375
406
|
}
|
|
376
|
-
}),
|
|
377
|
-
function
|
|
378
|
-
const
|
|
379
|
-
return
|
|
407
|
+
}), ae = ["activated"];
|
|
408
|
+
function re(e, m, h, y, g, v) {
|
|
409
|
+
const f = M("OrIconButton");
|
|
410
|
+
return c(), d("div", {
|
|
380
411
|
ref: "root",
|
|
381
|
-
class:
|
|
382
|
-
style:
|
|
412
|
+
class: i(e.rootStyles),
|
|
413
|
+
style: j({ [e.currentDirection]: !e.collapsible || e.state === "open" ? `${e.currentSize}px` : "auto" })
|
|
383
414
|
}, [
|
|
384
|
-
!e.collapsible || e.state === "open" ? (
|
|
415
|
+
!e.collapsible || e.state === "open" ? (c(), d("div", {
|
|
385
416
|
key: 0,
|
|
386
|
-
class:
|
|
417
|
+
class: i(e.contentStyles)
|
|
387
418
|
}, [
|
|
388
|
-
|
|
389
|
-
], 2)) : (
|
|
419
|
+
p(e.$slots, "default")
|
|
420
|
+
], 2)) : e.collapsible && e.state === "closed" && e.$slots.collapsedContent ? (c(), d("div", {
|
|
390
421
|
key: 1,
|
|
391
|
-
class:
|
|
422
|
+
class: i(e.collapsedContentStyles)
|
|
423
|
+
}, [
|
|
424
|
+
p(e.$slots, "collapsedContent")
|
|
425
|
+
], 2)) : (c(), d("div", {
|
|
426
|
+
key: 2,
|
|
427
|
+
class: i(e.contentPlaceholderStyles)
|
|
392
428
|
}, null, 2)),
|
|
393
|
-
|
|
429
|
+
_("div", {
|
|
394
430
|
ref: "resizeBar",
|
|
395
|
-
class:
|
|
431
|
+
class: i(e.resizeBarStyles),
|
|
396
432
|
activated: e.isDragging
|
|
397
433
|
}, [
|
|
398
|
-
e.collapsible ? (
|
|
434
|
+
e.collapsible ? (c(), d("div", {
|
|
399
435
|
key: 0,
|
|
400
|
-
class:
|
|
436
|
+
class: i(e.collapseButtonContainerStyles)
|
|
401
437
|
}, [
|
|
402
|
-
|
|
438
|
+
E(f, {
|
|
403
439
|
"additional-styles": ["p-xs"],
|
|
404
440
|
icon: e.collapseButtonIcon,
|
|
405
441
|
color: "primary",
|
|
406
442
|
size: "m",
|
|
407
|
-
onClick:
|
|
443
|
+
onClick: m[0] || (m[0] = (k) => e.toggle())
|
|
408
444
|
}, null, 8, ["icon"])
|
|
409
445
|
], 2)) : w("", !0)
|
|
410
|
-
], 10,
|
|
411
|
-
e.$slots.toolbar ? (
|
|
412
|
-
key:
|
|
413
|
-
class:
|
|
446
|
+
], 10, ae),
|
|
447
|
+
e.$slots.toolbar ? (c(), d("div", {
|
|
448
|
+
key: 3,
|
|
449
|
+
class: i(e.toolbarStyles)
|
|
414
450
|
}, [
|
|
415
|
-
|
|
451
|
+
p(e.$slots, "toolbar")
|
|
416
452
|
], 2)) : w("", !0)
|
|
417
453
|
], 6);
|
|
418
454
|
}
|
|
419
|
-
const
|
|
455
|
+
const de = /* @__PURE__ */ V(oe, [["render", re]]);
|
|
420
456
|
export {
|
|
421
|
-
|
|
422
|
-
|
|
457
|
+
de as O,
|
|
458
|
+
l as R,
|
|
423
459
|
t as a
|
|
424
460
|
};
|
|
425
|
-
//# sourceMappingURL=OrResizeablePanel-
|
|
461
|
+
//# sourceMappingURL=OrResizeablePanel-D62tzOxs.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OrResizeablePanel-D62tzOxs.mjs","sources":["../../../components/or-resizeable-panel-v3/src/props.ts","../../../components/or-resizeable-panel-v3/src/styles.ts","../../../components/or-resizeable-panel-v3/src/OrResizeablePanel.vue"],"sourcesContent":["export enum ResizeablePanelPadding {\n L = 'l',\n M = 'm',\n S = 's',\n None = 'none',\n}\n\nexport enum ResizeablePanelPlacement {\n Top = 'top',\n Bottom = 'bottom',\n Left = 'left',\n Right = 'right',\n}\n","import { ResizeablePanelPadding, ResizeablePanelPlacement } from './props';\n\nexport const ResizeablePanel: string[] = [\n // Layout\n 'shrink-0',\n\n // Theme\n 'theme-background-default',\n 'dark:theme-background-default-dark',\n];\n\nexport const ResizeablePanelPlacements: Record<ResizeablePanelPlacement, string[]> = {\n [ResizeablePanelPlacement.Top]: [\n // Layout\n 'layout-column',\n ],\n\n [ResizeablePanelPlacement.Bottom]: [\n // Layout\n 'layout-column-reverse',\n ],\n\n [ResizeablePanelPlacement.Left]: [\n // Layout\n 'layout-row !items-stretch',\n\n // Box\n 'h-full min-h-0',\n ],\n\n [ResizeablePanelPlacement.Right]: [\n // Layout\n 'layout-row-reverse !items-stretch',\n\n // Box\n 'h-full min-h-0',\n ],\n};\n\nexport const ResizeablePanelContent: string[] = [\n // Layout\n 'layout-column grow',\n\n // Overflow\n 'overflow-auto',\n];\n\nexport const ResizeablePanelContentPaddings: Record<ResizeablePanelPadding, string[]> = {\n [ResizeablePanelPadding.L]: [\n // Spacing\n 'px-lg',\n 'py-lg',\n ],\n\n [ResizeablePanelPadding.M]: [\n // Spacing\n 'px-md',\n 'py-md',\n ],\n\n [ResizeablePanelPadding.S]: [\n // Spacing\n 'px-sm',\n 'py-sm',\n ],\n\n [ResizeablePanelPadding.None]: [],\n};\n\nexport const ResizeablePanelContentPlaceholder: string[] = [];\n\nexport const ResizeablePanelContentPlaceholderPlacements: Record<ResizeablePanelPlacement, string[]> = {\n [ResizeablePanelPlacement.Top]: [\n // Box\n 'h-[calc(theme(spacing.md)+theme(spacing.sm))]',\n ],\n\n [ResizeablePanelPlacement.Bottom]: [\n // Box\n 'h-[calc(theme(spacing.md)+theme(spacing.sm))]',\n ],\n\n [ResizeablePanelPlacement.Left]: [\n // Box\n 'w-[calc(theme(spacing.md)+theme(spacing.sm))]',\n ],\n\n [ResizeablePanelPlacement.Right]: [\n // Box\n 'w-[calc(theme(spacing.md)+theme(spacing.sm))]',\n ],\n};\n\nexport const ResizeablePanelResizeBar: string[] = [\n // Position\n 'relative',\n\n // Layout\n 'shrink-0',\n\n // Layout (after)\n 'after:block',\n\n // Theme (after)\n 'after:border-outline-variant',\n 'after:dark:border-outline-variant-dark',\n\n // Theme (after, hover)\n 'after:hover:border-primary-hover',\n 'after:dark:hover:border-primary-hover-dark',\n\n // Theme (after, activated)\n 'after:activated:border-primary-hover',\n 'after:dark:activated:border-primary-hover-dark',\n];\n\nexport const ResizeablePanelResizeBarPlacements: Record<ResizeablePanelPlacement, string[]> = {\n [ResizeablePanelPlacement.Top]: [\n // Layout\n 'flex flex-col justify-center',\n\n // Interactivity\n 'interactivity-resize-row',\n\n // Spacing\n '-my-[calc(theme(spacing.md)/2)]',\n 'py-[calc(theme(spacing.md)/2)]',\n\n // Theme (after)\n 'after:border-b-1',\n ],\n\n [ResizeablePanelPlacement.Bottom]: [\n // Layout\n 'flex flex-col justify-center',\n\n // Interactivity\n 'interactivity-resize-row',\n\n // Spacing\n '-my-[calc(theme(spacing.md)/2)]',\n 'py-[calc(theme(spacing.md)/2)]',\n\n // Theme (after)\n 'after:border-t-1',\n ],\n\n [ResizeablePanelPlacement.Left]: [\n // Layout\n 'flex flex-row justify-center',\n\n // Interactivity\n 'interactivity-resize-column',\n\n // Spacing\n '-mx-[calc(theme(spacing.md)/2)]',\n 'px-[calc(theme(spacing.md)/2)]',\n\n // Theme (after)\n 'after:border-r-1',\n ],\n\n [ResizeablePanelPlacement.Right]: [\n // Layout\n 'flex flex-row justify-center',\n\n // Interactivity\n 'interactivity-resize-column',\n\n // Spacing\n '-mx-[calc(theme(spacing.md)/2)]',\n 'px-[calc(theme(spacing.md)/2)]',\n\n // Theme (after)\n 'after:border-l-1',\n ],\n};\n\nexport const ResizeablePanelCollapseButtonContainer: string[] = [\n // Position\n 'absolute',\n\n // Shape\n 'rounded-full',\n\n // Box\n 'w-fit',\n 'h-fit',\n\n // Typography\n 'leading-[0]',\n\n // Theme\n 'theme-background-default',\n 'dark:theme-background-default-dark',\n\n 'theme-border-outline-variant border-1',\n 'dark:theme-border-outline-variant-dark',\n];\n\nexport const ResizeablePanelCollapseButtonContainerPlacements: Record<ResizeablePanelPlacement, string[]> = {\n [ResizeablePanelPlacement.Top]: [\n // Position\n 'left-md',\n ],\n\n [ResizeablePanelPlacement.Bottom]: [\n // Position\n 'left-md',\n ],\n\n [ResizeablePanelPlacement.Left]: [\n // Position\n 'top-md',\n ],\n\n [ResizeablePanelPlacement.Right]: [\n // Position\n 'top-md',\n ],\n};\n\nexport const ResizeablePanelToolbar: string[] = [\n // Layout\n 'shrink-0',\n\n // Overflow\n 'overflow-auto',\n\n // Spacing\n 'px-md',\n 'py-md',\n\n 'gap-md',\n\n // Theme\n 'theme-border-outline-variant border-1',\n 'dark:theme-border-outline-variant-dark',\n];\n\nexport const ResizeablePanelToolbarPlacements: Record<ResizeablePanelPlacement, string[]> = {\n [ResizeablePanelPlacement.Top]: [\n // Layout\n 'layout-row',\n\n // Theme\n '!border-t-0',\n '!border-x-0',\n ],\n\n [ResizeablePanelPlacement.Bottom]: [\n // Layout\n 'layout-row',\n\n // Theme\n '!border-b-0',\n '!border-x-0',\n ],\n\n [ResizeablePanelPlacement.Left]: [\n // Layout\n 'layout-column',\n\n // Theme\n '!border-l-0',\n '!border-y-0',\n ],\n\n [ResizeablePanelPlacement.Right]: [\n // Layout\n 'layout-column',\n\n // Theme\n '!border-r-0',\n '!border-y-0',\n ],\n};\n\nexport const ResizeablePanelCollapsedContent: string[] = [\n // Layout\n 'layout-column',\n 'shrink-0',\n\n // Overflow\n 'overflow-auto',\n\n // Spacing\n 'px-md',\n 'py-md',\n\n 'gap-md',\n];\n\nexport const ResizeablePanelCollapsedContentPaddings: Record<ResizeablePanelPadding, string[]> = {\n [ResizeablePanelPadding.L]: [\n // Box\n 'px-lg',\n 'py-lg',\n ],\n\n [ResizeablePanelPadding.M]: [\n // Box\n 'px-md',\n 'py-md',\n ],\n\n [ResizeablePanelPadding.S]: [\n // Box\n 'px-sm',\n 'py-sm',\n ],\n\n [ResizeablePanelPadding.None]: [],\n};\n","<template>\n <div\n :ref=\"'root'\"\n :class=\"rootStyles\"\n :style=\"{ [currentDirection]: !collapsible || state === 'open' ? `${currentSize}px` : 'auto' }\"\n >\n <template v-if=\"!collapsible || state === 'open'\">\n <div :class=\"contentStyles\">\n <slot />\n </div>\n </template>\n\n <template v-else-if=\"collapsible && state === 'closed' && $slots.collapsedContent\">\n <div :class=\"collapsedContentStyles\">\n <slot name=\"collapsedContent\" />\n </div>\n </template>\n\n <template v-else>\n <div :class=\"contentPlaceholderStyles\" />\n </template>\n\n <div\n :ref=\"'resizeBar'\"\n :class=\"resizeBarStyles\"\n :activated=\"isDragging\"\n >\n <template v-if=\"collapsible\">\n <div :class=\"collapseButtonContainerStyles\">\n <OrIconButton\n :additional-styles=\"['p-xs']\"\n :icon=\"collapseButtonIcon\"\n :color=\"'primary'\"\n :size=\"'m'\"\n @click=\"toggle()\"\n />\n </div>\n </template>\n </div>\n\n <template v-if=\"$slots.toolbar\">\n <div :class=\"toolbarStyles\">\n <slot name=\"toolbar\" />\n </div>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { usePopoverState } from '@onereach/ui-components-common/hooks';\nimport { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components.or-icon-button-v3';\nimport { useDraggable } from '@vueuse/core';\nimport { PropType, computed, defineComponent, ref, toRef, watch } from 'vue';\n\nimport { ResizeablePanelPadding, ResizeablePanelPlacement } from './props';\nimport * as Styles from './styles';\n\nexport default defineComponent({\n name: 'OrResizeablePanel',\n\n components: {\n OrIconButton,\n },\n\n props: {\n isOpen: {\n type: Boolean,\n default: true,\n },\n\n width: {\n type: Number,\n default: 320,\n },\n\n minWidth: {\n type: Number,\n default: 256,\n },\n\n maxWidth: {\n type: Number,\n default: 384,\n },\n\n padding: {\n type: String as PropType<`${ResizeablePanelPadding}`>,\n default: () => ResizeablePanelPadding.M,\n },\n\n placement: {\n type: String as PropType<`${ResizeablePanelPlacement}`>,\n default: () => ResizeablePanelPlacement.Right,\n },\n\n resizeable: {\n type: Boolean,\n default: true,\n },\n\n collapsible: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n 'update:state',\n\n 'open',\n 'close',\n\n 'resize',\n ],\n\n expose: [\n 'root',\n\n 'state',\n 'isDragging',\n\n 'open',\n 'close',\n 'toggle',\n ],\n\n setup(props, context) {\n // Refs\n const root = ref<HTMLElement>();\n const resizeBar = ref<HTMLElement>();\n\n // Styles\n const rootStyles = computed(() => [\n 'or-resizeable-panel-v3',\n ...Styles.ResizeablePanel,\n ...Styles.ResizeablePanelPlacements[props.placement],\n ]);\n\n const contentStyles = computed(() => [\n ...Styles.ResizeablePanelContent,\n ...Styles.ResizeablePanelContentPaddings[props.padding],\n ]);\n\n const contentPlaceholderStyles = computed(() => [\n ...Styles.ResizeablePanelContentPlaceholder,\n ...Styles.ResizeablePanelContentPlaceholderPlacements[props.placement],\n ]);\n\n const resizeBarStyles = computed(() => [\n ...Styles.ResizeablePanelResizeBar,\n ...Styles.ResizeablePanelResizeBarPlacements[props.placement],\n ...!props.resizeable || props.collapsible && state.value === 'closed' ? ['interactivity-none'] : [],\n ]);\n\n const collapseButtonContainerStyles = computed(() => [\n ...Styles.ResizeablePanelCollapseButtonContainer,\n ...Styles.ResizeablePanelCollapseButtonContainerPlacements[props.placement],\n ]);\n\n const toolbarStyles = computed(() => [\n ...Styles.ResizeablePanelToolbar,\n ...Styles.ResizeablePanelToolbarPlacements[props.placement],\n ]);\n\n const collapsedContentStyles = computed(() => [\n ...Styles.ResizeablePanelCollapsedContent,\n ...Styles.ResizeablePanelCollapsedContentPaddings[props.padding],\n ]);\n\n // State\n const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);\n\n const collapseButtonIcon = computed(() => {\n if (state.value === 'open') {\n switch (props.placement) {\n case ResizeablePanelPlacement.Top:\n return 'keyboard_arrow_up';\n\n case ResizeablePanelPlacement.Bottom:\n return 'keyboard_arrow_down';\n\n case ResizeablePanelPlacement.Left:\n return 'keyboard_arrow_left';\n\n case ResizeablePanelPlacement.Right:\n return 'keyboard_arrow_right';\n }\n }\n\n if (state.value === 'closed') {\n switch (props.placement) {\n case ResizeablePanelPlacement.Top:\n return 'keyboard_arrow_down';\n\n case ResizeablePanelPlacement.Bottom:\n return 'keyboard_arrow_up';\n\n case ResizeablePanelPlacement.Left:\n return 'keyboard_arrow_right';\n\n case ResizeablePanelPlacement.Right:\n return 'keyboard_arrow_left';\n }\n }\n\n return 'menu';\n });\n\n const currentDirection = computed(() => {\n switch (props.placement) {\n case ResizeablePanelPlacement.Top:\n case ResizeablePanelPlacement.Bottom:\n return 'height';\n }\n\n return 'width';\n });\n\n const currentSize = ref(props.width);\n\n watch(() => props.width, (value) => {\n currentSize.value = value;\n });\n\n // Effects\n // #region Resize\n let referencePoint = 0;\n\n const { isDragging } = useDraggable(resizeBar, {\n onStart: (_position, event) => {\n if (props.resizeable) {\n switch (props.placement) {\n case ResizeablePanelPlacement.Top:\n case ResizeablePanelPlacement.Bottom:\n referencePoint = event.y;\n break;\n\n case ResizeablePanelPlacement.Left:\n case ResizeablePanelPlacement.Right:\n referencePoint = event.x;\n break;\n }\n\n document.body.style.userSelect = 'none';\n }\n },\n\n onMove: (position) => {\n if (props.resizeable) {\n let nextWidth = 0;\n\n switch (props.placement) {\n case ResizeablePanelPlacement.Top:\n nextWidth = currentSize.value + (position.y - referencePoint);\n referencePoint = position.y;\n break;\n\n case ResizeablePanelPlacement.Bottom:\n nextWidth = currentSize.value + (referencePoint - position.y);\n referencePoint = position.y;\n break;\n\n case ResizeablePanelPlacement.Left:\n nextWidth = currentSize.value + (position.x - referencePoint);\n referencePoint = position.x;\n break;\n\n case ResizeablePanelPlacement.Right:\n nextWidth = currentSize.value + (referencePoint - position.x);\n referencePoint = position.x;\n break;\n }\n\n if (nextWidth < props.minWidth) {\n nextWidth = props.minWidth;\n }\n\n if (nextWidth > props.maxWidth) {\n nextWidth = props.maxWidth;\n }\n\n if (nextWidth !== currentSize.value) {\n context.emit('resize', currentSize.value = nextWidth);\n }\n }\n },\n\n onEnd: () => {\n if (props.resizeable) {\n document.body.style.userSelect = '';\n }\n },\n });\n // #endregion\n\n return {\n root,\n resizeBar,\n\n rootStyles,\n contentStyles,\n contentPlaceholderStyles,\n resizeBarStyles,\n collapseButtonContainerStyles,\n toolbarStyles,\n collapsedContentStyles,\n\n state,\n open,\n close,\n toggle,\n\n collapseButtonIcon,\n currentDirection,\n currentSize,\n\n isDragging,\n };\n },\n});\n</script>\n"],"names":["ResizeablePanelPadding","ResizeablePanelPlacement","ResizeablePanel","ResizeablePanelPlacements","ResizeablePanelContent","ResizeablePanelContentPaddings","ResizeablePanelContentPlaceholder","ResizeablePanelContentPlaceholderPlacements","ResizeablePanelResizeBar","ResizeablePanelResizeBarPlacements","ResizeablePanelCollapseButtonContainer","ResizeablePanelCollapseButtonContainerPlacements","ResizeablePanelToolbar","ResizeablePanelToolbarPlacements","ResizeablePanelCollapsedContent","ResizeablePanelCollapsedContentPaddings","_sfc_main","defineComponent","OrIconButton","props","context","root","ref","resizeBar","rootStyles","computed","Styles.ResizeablePanel","Styles.ResizeablePanelPlacements","contentStyles","Styles.ResizeablePanelContent","Styles.ResizeablePanelContentPaddings","contentPlaceholderStyles","Styles.ResizeablePanelContentPlaceholder","Styles.ResizeablePanelContentPlaceholderPlacements","resizeBarStyles","Styles.ResizeablePanelResizeBar","Styles.ResizeablePanelResizeBarPlacements","state","collapseButtonContainerStyles","Styles.ResizeablePanelCollapseButtonContainer","Styles.ResizeablePanelCollapseButtonContainerPlacements","toolbarStyles","Styles.ResizeablePanelToolbar","Styles.ResizeablePanelToolbarPlacements","collapsedContentStyles","Styles.ResizeablePanelCollapsedContent","Styles.ResizeablePanelCollapsedContentPaddings","open","close","toggle","usePopoverState","toRef","collapseButtonIcon","currentDirection","currentSize","watch","value","referencePoint","isDragging","useDraggable","_position","event","position","nextWidth","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_normalizeStyle","_renderSlot","_createElementVNode","_component_OrIconButton","_createCommentVNode","_hoisted_1"],"mappings":"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"}
|
|
@@ -65,13 +65,13 @@ import { O as Ko } from "../OrRadioGroup-PJcCPCFn.mjs";
|
|
|
65
65
|
import { O as Xo } from "../OrRadio-BZN3fBLW.mjs";
|
|
66
66
|
import { O as Zo } from "../OrRangeSlider-Cxhafo9S.mjs";
|
|
67
67
|
import { O as $o, R as re } from "../OrRating-CAwz23JA.mjs";
|
|
68
|
-
import { O as oe, R as ee, a as te } from "../OrResizeablePanel-
|
|
68
|
+
import { O as oe, R as ee, a as te } from "../OrResizeablePanel-D62tzOxs.mjs";
|
|
69
69
|
import { F as Oe, O as ie, R as pe, a as me } from "../OrRichTextEditor-D0UmlBKz.mjs";
|
|
70
70
|
import { O as xe, R as Ve } from "../OrRichTooltip-8ybIdsqK.mjs";
|
|
71
71
|
import { O as le } from "../OrSearch-CRFuNmg2.mjs";
|
|
72
72
|
import { O as de, S as ce } from "../OrSegmentedControl-DfPHDw7E.mjs";
|
|
73
73
|
import { O as Ce } from "../OrSelect-ZitJ7RzV.mjs";
|
|
74
|
-
import { O as ue, S as be } from "../props-
|
|
74
|
+
import { O as ue, S as be } from "../props-kE89gx5m.mjs";
|
|
75
75
|
import { b as Ie, O as ge, a as ke } from "../OrSkeletonArea-fMhHFyo1.mjs";
|
|
76
76
|
import { O as Re } from "../OrSkeletonArea.vue_vue_type_script_lang-jgRhbZ0X.mjs";
|
|
77
77
|
import { O as he } from "../OrSlider-CD78-muf.mjs";
|
package/dist/esm/index.mjs
CHANGED
|
@@ -65,13 +65,13 @@ import { O as Ko } from "./OrRadioGroup-PJcCPCFn.mjs";
|
|
|
65
65
|
import { O as Xo } from "./OrRadio-BZN3fBLW.mjs";
|
|
66
66
|
import { O as Zo } from "./OrRangeSlider-Cxhafo9S.mjs";
|
|
67
67
|
import { O as $o, R as re } from "./OrRating-CAwz23JA.mjs";
|
|
68
|
-
import { O as oe, R as ee, a as te } from "./OrResizeablePanel-
|
|
68
|
+
import { O as oe, R as ee, a as te } from "./OrResizeablePanel-D62tzOxs.mjs";
|
|
69
69
|
import { F as Oe, O as ie, R as pe, a as me } from "./OrRichTextEditor-D0UmlBKz.mjs";
|
|
70
70
|
import { O as xe, R as Ve } from "./OrRichTooltip-8ybIdsqK.mjs";
|
|
71
71
|
import { O as le } from "./OrSearch-CRFuNmg2.mjs";
|
|
72
72
|
import { O as de, S as ce } from "./OrSegmentedControl-DfPHDw7E.mjs";
|
|
73
73
|
import { O as Ce } from "./OrSelect-ZitJ7RzV.mjs";
|
|
74
|
-
import { O as ue, S as be } from "./props-
|
|
74
|
+
import { O as ue, S as be } from "./props-kE89gx5m.mjs";
|
|
75
75
|
import { b as Ie, O as ge, a as ke } from "./OrSkeletonArea-fMhHFyo1.mjs";
|
|
76
76
|
import { O as Re } from "./OrSkeletonArea.vue_vue_type_script_lang-jgRhbZ0X.mjs";
|
|
77
77
|
import { O as he } from "./OrSlider-CD78-muf.mjs";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { usePopoverState as v } from "@onereach/ui-components-common/hooks";
|
|
2
|
-
import { R as o, O as w } from "./OrResizeablePanel-
|
|
3
|
-
import { defineComponent as
|
|
4
|
-
import { _ as
|
|
5
|
-
const
|
|
2
|
+
import { R as o, O as w } from "./OrResizeablePanel-D62tzOxs.mjs";
|
|
3
|
+
import { defineComponent as $, ref as z, computed as a, toRef as k, resolveComponent as C, openBlock as d, createBlock as O, createSlots as N, withCtx as i, createElementVNode as u, normalizeClass as r, createElementBlock as b, renderSlot as s, createCommentVNode as g } from "vue";
|
|
4
|
+
import { _ as P } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
|
|
5
|
+
const R = [
|
|
6
6
|
// Layout
|
|
7
7
|
"layout-column grow",
|
|
8
8
|
// Overflow
|
|
@@ -78,7 +78,7 @@ const C = [
|
|
|
78
78
|
"py-sm"
|
|
79
79
|
],
|
|
80
80
|
[o.None]: []
|
|
81
|
-
}, H =
|
|
81
|
+
}, H = $({
|
|
82
82
|
name: "OrSidebar",
|
|
83
83
|
components: {
|
|
84
84
|
OrResizeablePanel: w
|
|
@@ -131,35 +131,35 @@ const C = [
|
|
|
131
131
|
"toggle"
|
|
132
132
|
],
|
|
133
133
|
setup(e, t) {
|
|
134
|
-
const
|
|
134
|
+
const p = z(), m = a(() => [
|
|
135
135
|
"or-sidebar-v3",
|
|
136
|
-
...
|
|
137
|
-
]),
|
|
136
|
+
...R
|
|
137
|
+
]), f = a(() => [
|
|
138
138
|
...B,
|
|
139
139
|
...L[e.padding]
|
|
140
|
-
]),
|
|
140
|
+
]), y = a(() => [
|
|
141
141
|
...M,
|
|
142
142
|
...W[e.padding]
|
|
143
|
-
]), l =
|
|
143
|
+
]), l = a(() => [
|
|
144
144
|
...E,
|
|
145
145
|
...F[e.padding]
|
|
146
|
-
]), { state: n, open: h, close:
|
|
146
|
+
]), { state: n, open: h, close: c, toggle: S } = v(k(e, "isOpen"), t.emit);
|
|
147
147
|
return {
|
|
148
|
-
root:
|
|
149
|
-
rootStyles:
|
|
150
|
-
headerStyles:
|
|
151
|
-
contentStyles:
|
|
148
|
+
root: p,
|
|
149
|
+
rootStyles: m,
|
|
150
|
+
headerStyles: f,
|
|
151
|
+
contentStyles: y,
|
|
152
152
|
footerStyles: l,
|
|
153
153
|
state: n,
|
|
154
154
|
open: h,
|
|
155
|
-
close:
|
|
156
|
-
toggle:
|
|
155
|
+
close: c,
|
|
156
|
+
toggle: S
|
|
157
157
|
};
|
|
158
158
|
}
|
|
159
159
|
});
|
|
160
|
-
function V(e, t,
|
|
161
|
-
const l =
|
|
162
|
-
return d(),
|
|
160
|
+
function V(e, t, p, m, f, y) {
|
|
161
|
+
const l = C("OrResizeablePanel");
|
|
162
|
+
return d(), O(l, {
|
|
163
163
|
"is-open": e.state === "open",
|
|
164
164
|
width: e.width,
|
|
165
165
|
"min-width": e.minWidth,
|
|
@@ -170,9 +170,9 @@ function V(e, t, i, p, m, f) {
|
|
|
170
170
|
collapsible: e.collapsible,
|
|
171
171
|
"onUpdate:state": t[0] || (t[0] = (n) => n === "open" ? e.open() : e.close()),
|
|
172
172
|
onResize: t[1] || (t[1] = (n) => e.$emit("resize", n))
|
|
173
|
-
},
|
|
174
|
-
default:
|
|
175
|
-
|
|
173
|
+
}, N({
|
|
174
|
+
default: i(() => [
|
|
175
|
+
u("div", {
|
|
176
176
|
ref: "root",
|
|
177
177
|
class: r(e.rootStyles)
|
|
178
178
|
}, [
|
|
@@ -180,36 +180,43 @@ function V(e, t, i, p, m, f) {
|
|
|
180
180
|
key: 0,
|
|
181
181
|
class: r(e.headerStyles)
|
|
182
182
|
}, [
|
|
183
|
-
|
|
183
|
+
s(e.$slots, "header")
|
|
184
184
|
], 2)) : g("", !0),
|
|
185
|
-
|
|
185
|
+
u("div", {
|
|
186
186
|
class: r(e.contentStyles)
|
|
187
187
|
}, [
|
|
188
|
-
|
|
188
|
+
s(e.$slots, "default")
|
|
189
189
|
], 2),
|
|
190
190
|
e.$slots.footer ? (d(), b("footer", {
|
|
191
191
|
key: 1,
|
|
192
192
|
class: r(e.footerStyles)
|
|
193
193
|
}, [
|
|
194
|
-
|
|
194
|
+
s(e.$slots, "footer")
|
|
195
195
|
], 2)) : g("", !0)
|
|
196
196
|
], 2)
|
|
197
197
|
]),
|
|
198
198
|
_: 2
|
|
199
199
|
}, [
|
|
200
|
+
e.$slots.collapsedContent ? {
|
|
201
|
+
name: "collapsedContent",
|
|
202
|
+
fn: i(() => [
|
|
203
|
+
s(e.$slots, "collapsedContent")
|
|
204
|
+
]),
|
|
205
|
+
key: "0"
|
|
206
|
+
} : void 0,
|
|
200
207
|
e.$slots.toolbar ? {
|
|
201
208
|
name: "toolbar",
|
|
202
|
-
fn:
|
|
203
|
-
|
|
209
|
+
fn: i(() => [
|
|
210
|
+
s(e.$slots, "toolbar")
|
|
204
211
|
]),
|
|
205
|
-
key: "
|
|
212
|
+
key: "1"
|
|
206
213
|
} : void 0
|
|
207
214
|
]), 1032, ["is-open", "width", "min-width", "max-width", "placement", "resizeable", "collapsible"]);
|
|
208
215
|
}
|
|
209
|
-
const G = /* @__PURE__ */
|
|
216
|
+
const G = /* @__PURE__ */ P(H, [["render", V]]);
|
|
210
217
|
var U = /* @__PURE__ */ ((e) => (e.Left = "left", e.Right = "right", e))(U || {});
|
|
211
218
|
export {
|
|
212
219
|
G as O,
|
|
213
220
|
U as S
|
|
214
221
|
};
|
|
215
|
-
//# sourceMappingURL=props-
|
|
222
|
+
//# sourceMappingURL=props-kE89gx5m.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"props-kE89gx5m.mjs","sources":["../../../components/or-sidebar-v3/src/styles.ts","../../../components/or-sidebar-v3/src/OrSidebar.vue","../../../components/or-sidebar-v3/src/props.ts"],"sourcesContent":["import { ResizeablePanelPadding } from '@onereach/ui-components.or-resizeable-panel-v3';\n\nexport const Sidebar: string[] = [\n // Layout\n 'layout-column grow',\n\n // Overflow\n 'overflow-hidden',\n];\n\nexport const SidebarHeader: string[] = [\n // Layout\n 'shrink-0',\n\n // Overflow\n 'overflow-hidden',\n\n // Typography\n 'typography-headline-2 truncate',\n];\n\nexport const SidebarHeaderPaddings: Record<ResizeablePanelPadding, string[]> = {\n [ResizeablePanelPadding.L]: [\n // Box\n 'px-lg',\n 'py-lg',\n ],\n\n [ResizeablePanelPadding.M]: [\n // Box\n 'px-md',\n 'py-md',\n ],\n\n [ResizeablePanelPadding.S]: [\n // Box\n 'px-sm',\n 'py-sm',\n ],\n\n [ResizeablePanelPadding.None]: [],\n};\n\nexport const SidebarContent: string[] = [\n // Layout\n 'grow',\n\n // Overflow\n 'overflow-auto',\n];\n\nexport const SidebarContentPaddings: Record<ResizeablePanelPadding, string[]> = {\n [ResizeablePanelPadding.L]: [\n // Box\n 'px-lg',\n 'py-lg',\n ],\n\n [ResizeablePanelPadding.M]: [\n // Box\n 'px-md',\n 'py-md',\n ],\n\n [ResizeablePanelPadding.S]: [\n // Box\n 'px-sm',\n 'py-sm',\n ],\n\n [ResizeablePanelPadding.None]: [],\n};\n\nexport const SidebarFooter: string[] = [\n // Layout\n 'shrink-0',\n\n // Overflow\n 'overflow-hidden',\n\n // Theme\n 'theme-border-outline-variant border-t-1',\n 'dark:theme-border-outline-variant-dark',\n];\n\nexport const SidebarFooterPaddings: Record<ResizeablePanelPadding, string[]> = {\n [ResizeablePanelPadding.L]: [\n // Box\n 'px-lg',\n 'py-lg',\n ],\n\n [ResizeablePanelPadding.M]: [\n // Box\n 'px-md',\n 'py-md',\n ],\n\n [ResizeablePanelPadding.S]: [\n // Box\n 'px-sm',\n 'py-sm',\n ],\n\n [ResizeablePanelPadding.None]: [],\n};\n","<template>\n <OrResizeablePanel\n :is-open=\"state === 'open'\"\n :width=\"width\"\n :min-width=\"minWidth\"\n :max-width=\"maxWidth\"\n :padding=\"'none'\"\n :placement=\"placement\"\n :resizeable=\"resizeable\"\n :collapsible=\"collapsible\"\n @update:state=\"$event === 'open' ? open() : close()\"\n @resize=\"$emit('resize', $event)\"\n >\n <div\n :ref=\"'root'\"\n :class=\"rootStyles\"\n >\n <template v-if=\"$slots.header\">\n <header :class=\"headerStyles\">\n <slot name=\"header\" />\n </header>\n </template>\n\n <div :class=\"contentStyles\">\n <slot />\n </div>\n\n <template v-if=\"$slots.footer\">\n <footer :class=\"footerStyles\">\n <slot name=\"footer\" />\n </footer>\n </template>\n </div>\n\n <template\n v-if=\"$slots.collapsedContent\"\n v-slot:collapsedContent\n >\n <slot name=\"collapsedContent\" />\n </template>\n\n <template\n v-if=\"!!$slots.toolbar\"\n v-slot:toolbar\n >\n <slot name=\"toolbar\" />\n </template>\n </OrResizeablePanel>\n</template>\n\n<script lang=\"ts\">\nimport { usePopoverState } from '@onereach/ui-components-common/hooks';\nimport { OrResizeablePanelV3 as OrResizeablePanel, ResizeablePanelPadding } from '@onereach/ui-components.or-resizeable-panel-v3';\nimport { PropType, computed, defineComponent, ref, toRef } from 'vue';\n\nimport { SidebarPlacement } from './props';\nimport { Sidebar, SidebarContent, SidebarContentPaddings, SidebarFooter, SidebarFooterPaddings, SidebarHeader, SidebarHeaderPaddings } from './styles';\n\nexport default defineComponent({\n name: 'OrSidebar',\n\n components: {\n OrResizeablePanel,\n },\n\n props: {\n isOpen: {\n type: Boolean,\n default: true,\n },\n\n width: {\n type: Number,\n default: 320,\n },\n\n minWidth: {\n type: Number,\n default: undefined,\n },\n\n maxWidth: {\n type: Number,\n default: undefined,\n },\n\n padding: {\n type: String as PropType<`${ResizeablePanelPadding}`>,\n default: () => ResizeablePanelPadding.M,\n },\n\n placement: {\n type: String as PropType<`${SidebarPlacement}`>,\n default: undefined,\n },\n\n resizeable: {\n type: Boolean,\n default: undefined,\n },\n\n collapsible: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n 'update:state',\n\n 'open',\n 'close',\n\n 'resize',\n ],\n\n expose: [\n 'root',\n\n 'state',\n\n 'open',\n 'close',\n 'toggle',\n ],\n\n setup(props, context) {\n // Refs\n const root = ref<HTMLElement>();\n\n // Styles\n const rootStyles = computed(() => [\n 'or-sidebar-v3',\n ...Sidebar,\n ]);\n\n const headerStyles = computed(() => [\n ...SidebarHeader,\n ...SidebarHeaderPaddings[props.padding],\n ]);\n\n const contentStyles = computed(() => [\n ...SidebarContent,\n ...SidebarContentPaddings[props.padding],\n ]);\n\n const footerStyles = computed(() => [\n ...SidebarFooter,\n ...SidebarFooterPaddings[props.padding],\n ]);\n\n // State\n const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);\n\n return {\n root,\n\n rootStyles,\n headerStyles,\n contentStyles,\n footerStyles,\n\n state,\n open,\n close,\n toggle,\n };\n },\n});\n</script>\n","export enum SidebarPlacement {\n Left = 'left',\n Right = 'right',\n}\n"],"names":["Sidebar","SidebarHeader","SidebarHeaderPaddings","ResizeablePanelPadding","SidebarContent","SidebarContentPaddings","SidebarFooter","SidebarFooterPaddings","_sfc_main","defineComponent","OrResizeablePanel","props","context","root","ref","rootStyles","computed","headerStyles","contentStyles","footerStyles","state","open","close","toggle","usePopoverState","toRef","_component_OrResizeablePanel","_resolveComponent","_openBlock","_createBlock","_ctx","_cache","$event","_createSlots","_withCtx","_createElementVNode","_normalizeClass","_createElementBlock","_createCommentVNode","_renderSlot","SidebarPlacement"],"mappings":"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"}
|
|
@@ -42,6 +42,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
42
42
|
resizeBarStyles: import("vue").ComputedRef<string[]>;
|
|
43
43
|
collapseButtonContainerStyles: import("vue").ComputedRef<string[]>;
|
|
44
44
|
toolbarStyles: import("vue").ComputedRef<string[]>;
|
|
45
|
+
collapsedContentStyles: import("vue").ComputedRef<string[]>;
|
|
45
46
|
state: Readonly<import("vue").Ref<"open" | "closed">>;
|
|
46
47
|
open: () => void;
|
|
47
48
|
close: () => void;
|
|
@@ -11,3 +11,5 @@ export declare const ResizeablePanelCollapseButtonContainer: string[];
|
|
|
11
11
|
export declare const ResizeablePanelCollapseButtonContainerPlacements: Record<ResizeablePanelPlacement, string[]>;
|
|
12
12
|
export declare const ResizeablePanelToolbar: string[];
|
|
13
13
|
export declare const ResizeablePanelToolbarPlacements: Record<ResizeablePanelPlacement, string[]>;
|
|
14
|
+
export declare const ResizeablePanelCollapsedContent: string[];
|
|
15
|
+
export declare const ResizeablePanelCollapsedContentPaddings: Record<ResizeablePanelPadding, string[]>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onereach/ui-components",
|
|
3
|
-
"version": "26.0.0",
|
|
3
|
+
"version": "26.0.1-beta.5837.0",
|
|
4
4
|
"description": "Vue components library for v3",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"@codemirror/view": "^6",
|
|
47
47
|
"@floating-ui/dom": "1.5.3",
|
|
48
48
|
"@lezer/highlight": "*",
|
|
49
|
-
"@onereach/styles": "^26.0.0",
|
|
50
|
-
"@onereach/ui-components-common": "^26.0.0",
|
|
49
|
+
"@onereach/styles": "^26.0.1-beta.5837.0",
|
|
50
|
+
"@onereach/ui-components-common": "^26.0.1-beta.5837.0",
|
|
51
51
|
"@splidejs/splide": "4.0.6",
|
|
52
52
|
"@tiptap/core": "2.0.3",
|
|
53
53
|
"@tiptap/extension-blockquote": "2.0.3",
|
|
@@ -102,6 +102,5 @@
|
|
|
102
102
|
"publishConfig": {
|
|
103
103
|
"access": "public"
|
|
104
104
|
},
|
|
105
|
-
"npmUnpacked": "4.15.2"
|
|
106
|
-
"gitHead": "7922d7073e1788e747b30943260b3ba361fc81c0"
|
|
105
|
+
"npmUnpacked": "4.15.2"
|
|
107
106
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"OrResizeablePanel-BfuVn8Lq.mjs","sources":["../../../components/or-resizeable-panel-v3/src/props.ts","../../../components/or-resizeable-panel-v3/src/styles.ts","../../../components/or-resizeable-panel-v3/src/OrResizeablePanel.vue"],"sourcesContent":["export enum ResizeablePanelPadding {\n L = 'l',\n M = 'm',\n S = 's',\n None = 'none',\n}\n\nexport enum ResizeablePanelPlacement {\n Top = 'top',\n Bottom = 'bottom',\n Left = 'left',\n Right = 'right',\n}\n","import { ResizeablePanelPadding, ResizeablePanelPlacement } from './props';\n\nexport const ResizeablePanel: string[] = [\n // Layout\n 'shrink-0',\n\n // Theme\n 'theme-background-default',\n 'dark:theme-background-default-dark',\n];\n\nexport const ResizeablePanelPlacements: Record<ResizeablePanelPlacement, string[]> = {\n [ResizeablePanelPlacement.Top]: [\n // Layout\n 'layout-column',\n ],\n\n [ResizeablePanelPlacement.Bottom]: [\n // Layout\n 'layout-column-reverse',\n ],\n\n [ResizeablePanelPlacement.Left]: [\n // Layout\n 'layout-row !items-stretch',\n\n // Box\n 'h-full min-h-0',\n ],\n\n [ResizeablePanelPlacement.Right]: [\n // Layout\n 'layout-row-reverse !items-stretch',\n\n // Box\n 'h-full min-h-0',\n ],\n};\n\nexport const ResizeablePanelContent: string[] = [\n // Layout\n 'layout-column grow',\n\n // Overflow\n 'overflow-auto',\n];\n\nexport const ResizeablePanelContentPaddings: Record<ResizeablePanelPadding, string[]> = {\n [ResizeablePanelPadding.L]: [\n // Spacing\n 'px-lg',\n 'py-lg',\n ],\n\n [ResizeablePanelPadding.M]: [\n // Spacing\n 'px-md',\n 'py-md',\n ],\n\n [ResizeablePanelPadding.S]: [\n // Spacing\n 'px-sm',\n 'py-sm',\n ],\n\n [ResizeablePanelPadding.None]: [],\n};\n\nexport const ResizeablePanelContentPlaceholder: string[] = [];\n\nexport const ResizeablePanelContentPlaceholderPlacements: Record<ResizeablePanelPlacement, string[]> = {\n [ResizeablePanelPlacement.Top]: [\n // Box\n 'h-[calc(theme(spacing.md)+theme(spacing.sm))]',\n ],\n\n [ResizeablePanelPlacement.Bottom]: [\n // Box\n 'h-[calc(theme(spacing.md)+theme(spacing.sm))]',\n ],\n\n [ResizeablePanelPlacement.Left]: [\n // Box\n 'w-[calc(theme(spacing.md)+theme(spacing.sm))]',\n ],\n\n [ResizeablePanelPlacement.Right]: [\n // Box\n 'w-[calc(theme(spacing.md)+theme(spacing.sm))]',\n ],\n};\n\nexport const ResizeablePanelResizeBar: string[] = [\n // Position\n 'relative',\n\n // Layout\n 'shrink-0',\n\n // Layout (after)\n 'after:block',\n\n // Theme (after)\n 'after:border-outline-variant',\n 'after:dark:border-outline-variant-dark',\n\n // Theme (after, hover)\n 'after:hover:border-primary-hover',\n 'after:dark:hover:border-primary-hover-dark',\n\n // Theme (after, activated)\n 'after:activated:border-primary-hover',\n 'after:dark:activated:border-primary-hover-dark',\n];\n\nexport const ResizeablePanelResizeBarPlacements: Record<ResizeablePanelPlacement, string[]> = {\n [ResizeablePanelPlacement.Top]: [\n // Layout\n 'flex flex-col justify-center',\n\n // Interactivity\n 'interactivity-resize-row',\n\n // Spacing\n '-my-[calc(theme(spacing.md)/2)]',\n 'py-[calc(theme(spacing.md)/2)]',\n\n // Theme (after)\n 'after:border-b-1',\n ],\n\n [ResizeablePanelPlacement.Bottom]: [\n // Layout\n 'flex flex-col justify-center',\n\n // Interactivity\n 'interactivity-resize-row',\n\n // Spacing\n '-my-[calc(theme(spacing.md)/2)]',\n 'py-[calc(theme(spacing.md)/2)]',\n\n // Theme (after)\n 'after:border-t-1',\n ],\n\n [ResizeablePanelPlacement.Left]: [\n // Layout\n 'flex flex-row justify-center',\n\n // Interactivity\n 'interactivity-resize-column',\n\n // Spacing\n '-mx-[calc(theme(spacing.md)/2)]',\n 'px-[calc(theme(spacing.md)/2)]',\n\n // Theme (after)\n 'after:border-r-1',\n ],\n\n [ResizeablePanelPlacement.Right]: [\n // Layout\n 'flex flex-row justify-center',\n\n // Interactivity\n 'interactivity-resize-column',\n\n // Spacing\n '-mx-[calc(theme(spacing.md)/2)]',\n 'px-[calc(theme(spacing.md)/2)]',\n\n // Theme (after)\n 'after:border-l-1',\n ],\n};\n\nexport const ResizeablePanelCollapseButtonContainer: string[] = [\n // Position\n 'absolute',\n\n // Shape\n 'rounded-full',\n\n // Box\n 'w-fit',\n 'h-fit',\n\n // Typography\n 'leading-[0]',\n\n // Theme\n 'theme-background-default',\n 'dark:theme-background-default-dark',\n\n 'theme-border-outline-variant border-1',\n 'dark:theme-border-outline-variant-dark',\n];\n\nexport const ResizeablePanelCollapseButtonContainerPlacements: Record<ResizeablePanelPlacement, string[]> = {\n [ResizeablePanelPlacement.Top]: [\n // Position\n 'left-md',\n ],\n\n [ResizeablePanelPlacement.Bottom]: [\n // Position\n 'left-md',\n ],\n\n [ResizeablePanelPlacement.Left]: [\n // Position\n 'top-md',\n ],\n\n [ResizeablePanelPlacement.Right]: [\n // Position\n 'top-md',\n ],\n};\n\nexport const ResizeablePanelToolbar: string[] = [\n // Layout\n 'shrink-0',\n\n // Overflow\n 'overflow-auto',\n\n // Spacing\n 'px-md',\n 'py-md',\n\n 'gap-md',\n\n // Theme\n 'theme-border-outline-variant border-1',\n 'dark:theme-border-outline-variant-dark',\n];\n\nexport const ResizeablePanelToolbarPlacements: Record<ResizeablePanelPlacement, string[]> = {\n [ResizeablePanelPlacement.Top]: [\n // Layout\n 'layout-row',\n\n // Theme\n '!border-t-0',\n '!border-x-0',\n ],\n\n [ResizeablePanelPlacement.Bottom]: [\n // Layout\n 'layout-row',\n\n // Theme\n '!border-b-0',\n '!border-x-0',\n ],\n\n [ResizeablePanelPlacement.Left]: [\n // Layout\n 'layout-column',\n\n // Theme\n '!border-l-0',\n '!border-y-0',\n ],\n\n [ResizeablePanelPlacement.Right]: [\n // Layout\n 'layout-column',\n\n // Theme\n '!border-r-0',\n '!border-y-0',\n ],\n};\n","<template>\n <div\n :ref=\"'root'\"\n :class=\"rootStyles\"\n :style=\"{ [currentDirection]: !collapsible || state === 'open' ? `${currentSize}px` : 'auto' }\"\n >\n <template v-if=\"!collapsible || state === 'open'\">\n <div :class=\"contentStyles\">\n <slot />\n </div>\n </template>\n\n <template v-else>\n <div :class=\"contentPlaceholderStyles\" />\n </template>\n\n <div\n :ref=\"'resizeBar'\"\n :class=\"resizeBarStyles\"\n :activated=\"isDragging\"\n >\n <template v-if=\"collapsible\">\n <div :class=\"collapseButtonContainerStyles\">\n <OrIconButton\n :additional-styles=\"['p-xs']\"\n :icon=\"collapseButtonIcon\"\n :color=\"'primary'\"\n :size=\"'m'\"\n @click=\"toggle()\"\n />\n </div>\n </template>\n </div>\n\n\n <template v-if=\"$slots.toolbar\">\n <div :class=\"toolbarStyles\">\n <slot name=\"toolbar\" />\n </div>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { usePopoverState } from '@onereach/ui-components-common/hooks';\nimport { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components.or-icon-button-v3';\nimport { useDraggable } from '@vueuse/core';\nimport { PropType, computed, defineComponent, ref, toRef, watch } from 'vue';\n\nimport { ResizeablePanelPadding, ResizeablePanelPlacement } from './props';\nimport * as Styles from './styles';\n\nexport default defineComponent({\n name: 'OrResizeablePanel',\n\n components: {\n OrIconButton,\n },\n\n props: {\n isOpen: {\n type: Boolean,\n default: true,\n },\n\n width: {\n type: Number,\n default: 320,\n },\n\n minWidth: {\n type: Number,\n default: 256,\n },\n\n maxWidth: {\n type: Number,\n default: 384,\n },\n\n padding: {\n type: String as PropType<`${ResizeablePanelPadding}`>,\n default: () => ResizeablePanelPadding.M,\n },\n\n placement: {\n type: String as PropType<`${ResizeablePanelPlacement}`>,\n default: () => ResizeablePanelPlacement.Right,\n },\n\n resizeable: {\n type: Boolean,\n default: true,\n },\n\n collapsible: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n 'update:state',\n\n 'open',\n 'close',\n\n 'resize',\n ],\n\n expose: [\n 'root',\n\n 'state',\n 'isDragging',\n\n 'open',\n 'close',\n 'toggle',\n ],\n\n setup(props, context) {\n // Refs\n const root = ref<HTMLElement>();\n const resizeBar = ref<HTMLElement>();\n\n // Styles\n const rootStyles = computed(() => [\n 'or-resizeable-panel-v3',\n ...Styles.ResizeablePanel,\n ...Styles.ResizeablePanelPlacements[props.placement],\n ]);\n\n const contentStyles = computed(() => [\n ...Styles.ResizeablePanelContent,\n ...Styles.ResizeablePanelContentPaddings[props.padding],\n ]);\n\n const contentPlaceholderStyles = computed(() => [\n ...Styles.ResizeablePanelContentPlaceholder,\n ...Styles.ResizeablePanelContentPlaceholderPlacements[props.placement],\n ]);\n\n const resizeBarStyles = computed(() => [\n ...Styles.ResizeablePanelResizeBar,\n ...Styles.ResizeablePanelResizeBarPlacements[props.placement],\n ...!props.resizeable || props.collapsible && state.value === 'closed' ? ['interactivity-none'] : [],\n ]);\n\n const collapseButtonContainerStyles = computed(() => [\n ...Styles.ResizeablePanelCollapseButtonContainer,\n ...Styles.ResizeablePanelCollapseButtonContainerPlacements[props.placement],\n ]);\n\n const toolbarStyles = computed(() => [\n ...Styles.ResizeablePanelToolbar,\n ...Styles.ResizeablePanelToolbarPlacements[props.placement],\n ]);\n\n // State\n const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);\n\n const collapseButtonIcon = computed(() => {\n if (state.value === 'open') {\n switch (props.placement) {\n case ResizeablePanelPlacement.Top:\n return 'keyboard_arrow_up';\n\n case ResizeablePanelPlacement.Bottom:\n return 'keyboard_arrow_down';\n\n case ResizeablePanelPlacement.Left:\n return 'keyboard_arrow_left';\n\n case ResizeablePanelPlacement.Right:\n return 'keyboard_arrow_right';\n }\n }\n\n if (state.value === 'closed') {\n switch (props.placement) {\n case ResizeablePanelPlacement.Top:\n return 'keyboard_arrow_down';\n\n case ResizeablePanelPlacement.Bottom:\n return 'keyboard_arrow_up';\n\n case ResizeablePanelPlacement.Left:\n return 'keyboard_arrow_right';\n\n case ResizeablePanelPlacement.Right:\n return 'keyboard_arrow_left';\n }\n }\n\n return 'menu';\n });\n\n const currentDirection = computed(() => {\n switch (props.placement) {\n case ResizeablePanelPlacement.Top:\n case ResizeablePanelPlacement.Bottom:\n return 'height';\n }\n\n return 'width';\n });\n\n const currentSize = ref(props.width);\n\n watch(() => props.width, (value) => {\n currentSize.value = value;\n });\n\n // Effects\n // #region Resize\n let referencePoint = 0;\n\n const { isDragging } = useDraggable(resizeBar, {\n onStart: (_position, event) => {\n if (props.resizeable) {\n switch (props.placement) {\n case ResizeablePanelPlacement.Top:\n case ResizeablePanelPlacement.Bottom:\n referencePoint = event.y;\n break;\n\n case ResizeablePanelPlacement.Left:\n case ResizeablePanelPlacement.Right:\n referencePoint = event.x;\n break;\n }\n\n document.body.style.userSelect = 'none';\n }\n },\n\n onMove: (position) => {\n if (props.resizeable) {\n let nextWidth = 0;\n\n switch (props.placement) {\n case ResizeablePanelPlacement.Top:\n nextWidth = currentSize.value + (position.y - referencePoint);\n referencePoint = position.y;\n break;\n\n case ResizeablePanelPlacement.Bottom:\n nextWidth = currentSize.value + (referencePoint - position.y);\n referencePoint = position.y;\n break;\n\n case ResizeablePanelPlacement.Left:\n nextWidth = currentSize.value + (position.x - referencePoint);\n referencePoint = position.x;\n break;\n\n case ResizeablePanelPlacement.Right:\n nextWidth = currentSize.value + (referencePoint - position.x);\n referencePoint = position.x;\n break;\n }\n\n if (nextWidth < props.minWidth) {\n nextWidth = props.minWidth;\n }\n\n if (nextWidth > props.maxWidth) {\n nextWidth = props.maxWidth;\n }\n\n if (nextWidth !== currentSize.value) {\n context.emit('resize', currentSize.value = nextWidth);\n }\n }\n },\n\n onEnd: () => {\n if (props.resizeable) {\n document.body.style.userSelect = '';\n }\n },\n });\n // #endregion\n\n return {\n root,\n resizeBar,\n\n rootStyles,\n contentStyles,\n contentPlaceholderStyles,\n resizeBarStyles,\n collapseButtonContainerStyles,\n toolbarStyles,\n\n state,\n open,\n close,\n toggle,\n\n collapseButtonIcon,\n currentDirection,\n currentSize,\n\n isDragging,\n };\n },\n});\n</script>\n"],"names":["ResizeablePanelPadding","ResizeablePanelPlacement","ResizeablePanel","ResizeablePanelPlacements","ResizeablePanelContent","ResizeablePanelContentPaddings","ResizeablePanelContentPlaceholder","ResizeablePanelContentPlaceholderPlacements","ResizeablePanelResizeBar","ResizeablePanelResizeBarPlacements","ResizeablePanelCollapseButtonContainer","ResizeablePanelCollapseButtonContainerPlacements","ResizeablePanelToolbar","ResizeablePanelToolbarPlacements","_sfc_main","defineComponent","OrIconButton","props","context","root","ref","resizeBar","rootStyles","computed","Styles.ResizeablePanel","Styles.ResizeablePanelPlacements","contentStyles","Styles.ResizeablePanelContent","Styles.ResizeablePanelContentPaddings","contentPlaceholderStyles","Styles.ResizeablePanelContentPlaceholder","Styles.ResizeablePanelContentPlaceholderPlacements","resizeBarStyles","Styles.ResizeablePanelResizeBar","Styles.ResizeablePanelResizeBarPlacements","state","collapseButtonContainerStyles","Styles.ResizeablePanelCollapseButtonContainer","Styles.ResizeablePanelCollapseButtonContainerPlacements","toolbarStyles","Styles.ResizeablePanelToolbar","Styles.ResizeablePanelToolbarPlacements","open","close","toggle","usePopoverState","toRef","collapseButtonIcon","currentDirection","currentSize","watch","value","referencePoint","isDragging","useDraggable","_position","event","position","nextWidth","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_normalizeStyle","_createElementVNode","_component_OrIconButton","_createCommentVNode","_hoisted_1"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"props-Dx-rjh3U.mjs","sources":["../../../components/or-sidebar-v3/src/styles.ts","../../../components/or-sidebar-v3/src/OrSidebar.vue","../../../components/or-sidebar-v3/src/props.ts"],"sourcesContent":["import { ResizeablePanelPadding } from '@onereach/ui-components.or-resizeable-panel-v3';\n\nexport const Sidebar: string[] = [\n // Layout\n 'layout-column grow',\n\n // Overflow\n 'overflow-hidden',\n];\n\nexport const SidebarHeader: string[] = [\n // Layout\n 'shrink-0',\n\n // Overflow\n 'overflow-hidden',\n\n // Typography\n 'typography-headline-2 truncate',\n];\n\nexport const SidebarHeaderPaddings: Record<ResizeablePanelPadding, string[]> = {\n [ResizeablePanelPadding.L]: [\n // Box\n 'px-lg',\n 'py-lg',\n ],\n\n [ResizeablePanelPadding.M]: [\n // Box\n 'px-md',\n 'py-md',\n ],\n\n [ResizeablePanelPadding.S]: [\n // Box\n 'px-sm',\n 'py-sm',\n ],\n\n [ResizeablePanelPadding.None]: [],\n};\n\nexport const SidebarContent: string[] = [\n // Layout\n 'grow',\n\n // Overflow\n 'overflow-auto',\n];\n\nexport const SidebarContentPaddings: Record<ResizeablePanelPadding, string[]> = {\n [ResizeablePanelPadding.L]: [\n // Box\n 'px-lg',\n 'py-lg',\n ],\n\n [ResizeablePanelPadding.M]: [\n // Box\n 'px-md',\n 'py-md',\n ],\n\n [ResizeablePanelPadding.S]: [\n // Box\n 'px-sm',\n 'py-sm',\n ],\n\n [ResizeablePanelPadding.None]: [],\n};\n\nexport const SidebarFooter: string[] = [\n // Layout\n 'shrink-0',\n\n // Overflow\n 'overflow-hidden',\n\n // Theme\n 'theme-border-outline-variant border-t-1',\n 'dark:theme-border-outline-variant-dark',\n];\n\nexport const SidebarFooterPaddings: Record<ResizeablePanelPadding, string[]> = {\n [ResizeablePanelPadding.L]: [\n // Box\n 'px-lg',\n 'py-lg',\n ],\n\n [ResizeablePanelPadding.M]: [\n // Box\n 'px-md',\n 'py-md',\n ],\n\n [ResizeablePanelPadding.S]: [\n // Box\n 'px-sm',\n 'py-sm',\n ],\n\n [ResizeablePanelPadding.None]: [],\n};\n","<template>\n <OrResizeablePanel\n :is-open=\"state === 'open'\"\n :width=\"width\"\n :min-width=\"minWidth\"\n :max-width=\"maxWidth\"\n :padding=\"'none'\"\n :placement=\"placement\"\n :resizeable=\"resizeable\"\n :collapsible=\"collapsible\"\n @update:state=\"$event === 'open' ? open() : close()\"\n @resize=\"$emit('resize', $event)\"\n >\n <div\n :ref=\"'root'\"\n :class=\"rootStyles\"\n >\n <template v-if=\"$slots.header\">\n <header :class=\"headerStyles\">\n <slot name=\"header\" />\n </header>\n </template>\n\n <div :class=\"contentStyles\">\n <slot />\n </div>\n\n <template v-if=\"$slots.footer\">\n <footer :class=\"footerStyles\">\n <slot name=\"footer\" />\n </footer>\n </template>\n </div>\n\n <template\n v-if=\"!!$slots.toolbar\"\n v-slot:toolbar\n >\n <slot name=\"toolbar\" />\n </template>\n </OrResizeablePanel>\n</template>\n\n<script lang=\"ts\">\nimport { usePopoverState } from '@onereach/ui-components-common/hooks';\nimport { OrResizeablePanelV3 as OrResizeablePanel, ResizeablePanelPadding } from '@onereach/ui-components.or-resizeable-panel-v3';\nimport { PropType, computed, defineComponent, ref, toRef } from 'vue';\n\nimport { SidebarPlacement } from './props';\nimport { Sidebar, SidebarContent, SidebarContentPaddings, SidebarFooter, SidebarFooterPaddings, SidebarHeader, SidebarHeaderPaddings } from './styles';\n\nexport default defineComponent({\n name: 'OrSidebar',\n\n components: {\n OrResizeablePanel,\n },\n\n props: {\n isOpen: {\n type: Boolean,\n default: true,\n },\n\n width: {\n type: Number,\n default: 320,\n },\n\n minWidth: {\n type: Number,\n default: undefined,\n },\n\n maxWidth: {\n type: Number,\n default: undefined,\n },\n\n padding: {\n type: String as PropType<`${ResizeablePanelPadding}`>,\n default: () => ResizeablePanelPadding.M,\n },\n\n placement: {\n type: String as PropType<`${SidebarPlacement}`>,\n default: undefined,\n },\n\n resizeable: {\n type: Boolean,\n default: undefined,\n },\n\n collapsible: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n 'update:state',\n\n 'open',\n 'close',\n\n 'resize',\n ],\n\n expose: [\n 'root',\n\n 'state',\n\n 'open',\n 'close',\n 'toggle',\n ],\n\n setup(props, context) {\n // Refs\n const root = ref<HTMLElement>();\n\n // Styles\n const rootStyles = computed(() => [\n 'or-sidebar-v3',\n ...Sidebar,\n ]);\n\n const headerStyles = computed(() => [\n ...SidebarHeader,\n ...SidebarHeaderPaddings[props.padding],\n ]);\n\n const contentStyles = computed(() => [\n ...SidebarContent,\n ...SidebarContentPaddings[props.padding],\n ]);\n\n const footerStyles = computed(() => [\n ...SidebarFooter,\n ...SidebarFooterPaddings[props.padding],\n ]);\n\n // State\n const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);\n\n return {\n root,\n\n rootStyles,\n headerStyles,\n contentStyles,\n footerStyles,\n\n state,\n open,\n close,\n toggle,\n };\n },\n});\n</script>\n","export enum SidebarPlacement {\n Left = 'left',\n Right = 'right',\n}\n"],"names":["Sidebar","SidebarHeader","SidebarHeaderPaddings","ResizeablePanelPadding","SidebarContent","SidebarContentPaddings","SidebarFooter","SidebarFooterPaddings","_sfc_main","defineComponent","OrResizeablePanel","props","context","root","ref","rootStyles","computed","headerStyles","contentStyles","footerStyles","state","open","close","toggle","usePopoverState","toRef","_component_OrResizeablePanel","_resolveComponent","_openBlock","_createBlock","_ctx","_cache","$event","_createSlots","_withCtx","_createElementVNode","_normalizeClass","_createElementBlock","_createCommentVNode","_renderSlot","SidebarPlacement"],"mappings":"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"}
|