milk-lib 0.0.49 → 0.0.50
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.
|
@@ -10,16 +10,35 @@
|
|
|
10
10
|
import { onDestroy, onMount } from "svelte";
|
|
11
11
|
import { browser } from "$app/environment";
|
|
12
12
|
|
|
13
|
-
let {
|
|
13
|
+
let {
|
|
14
|
+
children,
|
|
15
|
+
isOpen,
|
|
16
|
+
hide,
|
|
17
|
+
hideOnClickOutside,
|
|
18
|
+
side = 'right',
|
|
19
|
+
size = 400,
|
|
20
|
+
backdrop = false,
|
|
21
|
+
bordered = false
|
|
22
|
+
}: ISheetProps = $props();
|
|
14
23
|
|
|
15
24
|
let sheetElement = $state<HTMLDivElement | null>(null)
|
|
16
25
|
let shouldRender = $state(isOpen);
|
|
17
26
|
|
|
18
27
|
const sheetClassNames = $derived(`Sheet Sheet-${side}`);
|
|
19
|
-
const
|
|
20
|
-
side === 'left' || side === 'right'
|
|
28
|
+
const sheetStyle = $derived(
|
|
29
|
+
(side === 'left' || side === 'right'
|
|
21
30
|
? `width: ${size}px;`
|
|
22
|
-
: `height: ${size}px;`
|
|
31
|
+
: `height: ${size}px;`) +
|
|
32
|
+
` --sheet-border-size: ${bordered ? '1px' : '0px'};`
|
|
33
|
+
);
|
|
34
|
+
const backdropStyle = $derived(
|
|
35
|
+
side === 'left'
|
|
36
|
+
? `left: 0; right: 0; top: 0; bottom: 0;`
|
|
37
|
+
: side === 'right'
|
|
38
|
+
? `left: 0; right: 0; top: 0; bottom: 0;`
|
|
39
|
+
: side === 'top'
|
|
40
|
+
? `left: 0; right: 0; top: 0; bottom: 0;`
|
|
41
|
+
: `left: 0; right: 0; top: 0; bottom: 0;`
|
|
23
42
|
);
|
|
24
43
|
|
|
25
44
|
const handleClickOutside = (event: MouseEvent) => {
|
|
@@ -69,10 +88,16 @@
|
|
|
69
88
|
|
|
70
89
|
<Portal>
|
|
71
90
|
{#if shouldRender}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
91
|
+
{#if backdrop}
|
|
92
|
+
<div
|
|
93
|
+
class={`Sheet-backdrop ${isOpen ? "Sheet-backdrop-open" : ""}`}
|
|
94
|
+
style={backdropStyle}
|
|
95
|
+
></div>
|
|
96
|
+
{/if}
|
|
97
|
+
<div
|
|
98
|
+
class={sheetClassNames}
|
|
99
|
+
style={sheetStyle}
|
|
100
|
+
bind:this={sheetElement}
|
|
76
101
|
ontransitionend={handleTransitionEnd}
|
|
77
102
|
>
|
|
78
103
|
{@render children()}
|
|
@@ -80,7 +105,21 @@
|
|
|
80
105
|
{/if}
|
|
81
106
|
</Portal>
|
|
82
107
|
|
|
83
|
-
<style>.Sheet {
|
|
108
|
+
<style>.Sheet-backdrop {
|
|
109
|
+
position: fixed;
|
|
110
|
+
inset: 0;
|
|
111
|
+
z-index: var(--zindex-offcanvas-backdrop);
|
|
112
|
+
background-color: var(--bg-backdrop-light);
|
|
113
|
+
backdrop-filter: blur(8px);
|
|
114
|
+
opacity: 0;
|
|
115
|
+
transition: opacity 0.3s ease-in-out;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.Sheet-backdrop-open {
|
|
119
|
+
opacity: 1;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.Sheet {
|
|
84
123
|
position: fixed;
|
|
85
124
|
z-index: var(--zindex-sheet);
|
|
86
125
|
top: 0;
|
|
@@ -94,6 +133,7 @@
|
|
|
94
133
|
display: flex;
|
|
95
134
|
flex-direction: column;
|
|
96
135
|
overflow: hidden;
|
|
136
|
+
--sheet-border-size: 1px;
|
|
97
137
|
}
|
|
98
138
|
@media (max-width: 400px) {
|
|
99
139
|
.Sheet {
|
|
@@ -103,13 +143,13 @@
|
|
|
103
143
|
.Sheet.Sheet-right {
|
|
104
144
|
right: 0;
|
|
105
145
|
left: auto;
|
|
106
|
-
border-left:
|
|
146
|
+
border-left: var(--sheet-border-size) solid var(--line-base);
|
|
107
147
|
transform: translateX(110%);
|
|
108
148
|
}
|
|
109
149
|
.Sheet.Sheet-left {
|
|
110
150
|
left: 0;
|
|
111
151
|
right: auto;
|
|
112
|
-
border-right:
|
|
152
|
+
border-right: var(--sheet-border-size) solid var(--line-base);
|
|
113
153
|
transform: translateX(-110%);
|
|
114
154
|
}
|
|
115
155
|
.Sheet.Sheet-top {
|
|
@@ -119,7 +159,7 @@
|
|
|
119
159
|
right: 0;
|
|
120
160
|
width: 100vw;
|
|
121
161
|
height: 400px;
|
|
122
|
-
border-bottom:
|
|
162
|
+
border-bottom: var(--sheet-border-size) solid var(--line-base);
|
|
123
163
|
transform: translateY(-110%);
|
|
124
164
|
}
|
|
125
165
|
.Sheet.Sheet-bottom {
|
|
@@ -129,7 +169,7 @@
|
|
|
129
169
|
right: 0;
|
|
130
170
|
width: 100vw;
|
|
131
171
|
height: 400px;
|
|
132
|
-
border-top:
|
|
172
|
+
border-top: var(--sheet-border-size) solid var(--line-base);
|
|
133
173
|
transform: translateY(110%);
|
|
134
174
|
}
|
|
135
175
|
.Sheet.Sheet-open {
|
package/dist/styles/root.scss
CHANGED
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
--bg-base: #fff;
|
|
22
22
|
--bg-backdrop: rgba(0,0,0,0.5);
|
|
23
|
+
--bg-backdrop-light: rgba(255,255,255,0.5);
|
|
23
24
|
|
|
24
25
|
--bg-base-100: #EDEEF0;
|
|
25
26
|
--bg-base-200: #E2E4E8;
|
|
@@ -96,7 +97,7 @@
|
|
|
96
97
|
--zindex-dropdown: 1060;
|
|
97
98
|
--zindex-sticky: 1020;
|
|
98
99
|
--zindex-fixed: 1030;
|
|
99
|
-
--zindex-sheet:
|
|
100
|
+
--zindex-sheet: 1041;
|
|
100
101
|
--zindex-offcanvas-backdrop: 1040;
|
|
101
102
|
--zindex-offcanvas: 1045;
|
|
102
103
|
--zindex-modal-backdrop: 1050;
|