@dorsk/tsumikit 0.63.0 → 0.63.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/layouts/ResizablePanel.svelte +7 -3
- package/dist/components/layouts/Toolbar.svelte +5 -5
- package/dist/components/molecules/Drawer.svelte +1 -1
- package/dist/components/molecules/Menu.svelte +3 -0
- package/dist/components/molecules/Menu.svelte.d.ts +1 -1
- package/package.json +1 -1
|
@@ -525,7 +525,9 @@
|
|
|
525
525
|
|
|
526
526
|
/* Overlay mode: a fixed non-modal drawer on the viewport edge. The page
|
|
527
527
|
(`.main`) flows as normal underneath; the handle overhang is a viewport
|
|
528
|
-
edge, so the container clamp does not apply.
|
|
528
|
+
edge, so the container clamp does not apply. Widths clamp against the
|
|
529
|
+
containing block, never `100vw`: the reset's `scrollbar-gutter: stable`
|
|
530
|
+
makes `100vw` wider than the viewport and clips the panel's leading edge. */
|
|
529
531
|
.panel-layout.overlay {
|
|
530
532
|
display: block;
|
|
531
533
|
container: none;
|
|
@@ -535,7 +537,7 @@
|
|
|
535
537
|
inset-block: 0;
|
|
536
538
|
left: 0;
|
|
537
539
|
z-index: var(--z-drawer);
|
|
538
|
-
width: min(var(--panel-current-width),
|
|
540
|
+
width: min(var(--panel-current-width), 100%);
|
|
539
541
|
box-shadow: var(--shadow-md);
|
|
540
542
|
outline: none;
|
|
541
543
|
animation: panel-slide-left 0.18s var(--ease);
|
|
@@ -549,7 +551,9 @@
|
|
|
549
551
|
--handle-shift: -6px;
|
|
550
552
|
}
|
|
551
553
|
.overlay.full-bleed .panel {
|
|
552
|
-
|
|
554
|
+
left: 0;
|
|
555
|
+
right: 0;
|
|
556
|
+
width: auto;
|
|
553
557
|
border: 0;
|
|
554
558
|
box-shadow: none;
|
|
555
559
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
// controls actually visible, the `…` trigger included. Children are arbitrary
|
|
10
10
|
// snippet content, so the ring is read from the DOM rather than a list prop.
|
|
11
11
|
import type { Snippet } from 'svelte';
|
|
12
|
-
import
|
|
12
|
+
import Icon from '../atoms/Icon.svelte';
|
|
13
13
|
import Menu, { type MenuItem } from '../molecules/Menu.svelte';
|
|
14
14
|
import Popover from '../molecules/Popover.svelte';
|
|
15
15
|
import {
|
|
@@ -161,12 +161,12 @@
|
|
|
161
161
|
{@render children()}
|
|
162
162
|
{#if collapsed && hasOverflow}
|
|
163
163
|
{#if items?.length}
|
|
164
|
-
<Menu label={overflowLabel} {items} placement="bottom-end" box="sm">
|
|
165
|
-
{#snippet trigger()}<
|
|
164
|
+
<Menu label={overflowLabel} title={overflowLabel} {items} placement="bottom-end" box="sm">
|
|
165
|
+
{#snippet trigger()}<Icon name="more" size={18} />{/snippet}
|
|
166
166
|
</Menu>
|
|
167
167
|
{:else if overflow}
|
|
168
|
-
<Popover label={overflowLabel} placement="bottom-end" box="sm">
|
|
169
|
-
{#snippet trigger()}<
|
|
168
|
+
<Popover label={overflowLabel} title={overflowLabel} placement="bottom-end" box="sm">
|
|
169
|
+
{#snippet trigger()}<Icon name="more" size={18} />{/snippet}
|
|
170
170
|
<div class="overflow-panel">{@render overflow()}</div>
|
|
171
171
|
</Popover>
|
|
172
172
|
{/if}
|
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
| 'control'
|
|
53
53
|
| 'block'
|
|
54
54
|
| 'triggerClass'
|
|
55
|
+
| 'title'
|
|
55
56
|
| 'bare'
|
|
56
57
|
| 'hitArea'
|
|
57
58
|
| 'disabled'
|
|
@@ -74,6 +75,7 @@
|
|
|
74
75
|
control,
|
|
75
76
|
block,
|
|
76
77
|
triggerClass,
|
|
78
|
+
title,
|
|
77
79
|
bare,
|
|
78
80
|
hitArea,
|
|
79
81
|
disabled,
|
|
@@ -148,6 +150,7 @@
|
|
|
148
150
|
{control}
|
|
149
151
|
{block}
|
|
150
152
|
{triggerClass}
|
|
153
|
+
{title}
|
|
151
154
|
class={klass}
|
|
152
155
|
style={styleProp}
|
|
153
156
|
{panelClass}
|
|
@@ -27,7 +27,7 @@ export interface MenuItem {
|
|
|
27
27
|
import type { ComponentProps, Snippet } from 'svelte';
|
|
28
28
|
import Popover from './Popover.svelte';
|
|
29
29
|
type PopoverProps = ComponentProps<typeof Popover>;
|
|
30
|
-
type TriggerChrome = Pick<PopoverProps, 'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'triggerClass' | 'bare' | 'hitArea' | 'disabled' | 'gap' | 'onopen' | 'onclose'>;
|
|
30
|
+
type TriggerChrome = Pick<PopoverProps, 'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'triggerClass' | 'title' | 'bare' | 'hitArea' | 'disabled' | 'gap' | 'onopen' | 'onclose'>;
|
|
31
31
|
type $$ComponentProps = {
|
|
32
32
|
label: string;
|
|
33
33
|
items: MenuItem[];
|
package/package.json
CHANGED