@max-ts/svelte 1.6.1 → 1.7.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/assets/src/components/Drawer/styles.css.ts.vanilla-BblmUQZx.css +130 -0
- package/dist/assets/src/components/RangeInput/{styles.css.ts.vanilla-B_0PcDN7.css → styles.css.ts.vanilla-B14tcXWf.css} +15 -12
- package/dist/components/Carousel/Arrows/styles.css.d.ts +0 -4
- package/dist/components/Carousel/Arrows/styles.css.js +8 -10
- package/dist/components/Carousel/Content/styles.css.d.ts +0 -3
- package/dist/components/Carousel/Content/styles.css.js +4 -5
- package/dist/components/Carousel/Item/styles.css.d.ts +0 -2
- package/dist/components/Carousel/Item/styles.css.js +4 -5
- package/dist/components/Carousel/styles.css.d.ts +0 -1
- package/dist/components/Drawer/Close/Close.js +21 -0
- package/dist/components/Drawer/Close/Close.svelte.d.ts +4 -0
- package/dist/components/Drawer/Close/index.d.ts +1 -0
- package/dist/components/Drawer/Content/Content.js +129 -0
- package/dist/components/Drawer/Content/Content.svelte.d.ts +4 -0
- package/dist/components/Drawer/Content/index.d.ts +1 -0
- package/dist/components/Drawer/Description/Description.js +33 -0
- package/dist/components/Drawer/Description/Description.svelte.d.ts +4 -0
- package/dist/components/Drawer/Description/index.d.ts +1 -0
- package/dist/components/Drawer/Drawer.js +69 -0
- package/dist/components/Drawer/Drawer.svelte.d.ts +8 -0
- package/dist/components/Drawer/Footer/Footer.js +32 -0
- package/dist/components/Drawer/Footer/Footer.svelte.d.ts +4 -0
- package/dist/components/Drawer/Footer/index.d.ts +1 -0
- package/dist/components/Drawer/Header/Header.js +32 -0
- package/dist/components/Drawer/Header/Header.svelte.d.ts +4 -0
- package/dist/components/Drawer/Header/index.d.ts +1 -0
- package/dist/components/Drawer/Overlay/Overlay.js +43 -0
- package/dist/components/Drawer/Overlay/Overlay.svelte.d.ts +4 -0
- package/dist/components/Drawer/Overlay/index.d.ts +1 -0
- package/dist/components/Drawer/Portal/Portal.js +30 -0
- package/dist/components/Drawer/Portal/Portal.svelte.d.ts +3 -0
- package/dist/components/Drawer/Portal/index.d.ts +1 -0
- package/dist/components/Drawer/Title/Title.js +33 -0
- package/dist/components/Drawer/Title/Title.svelte.d.ts +4 -0
- package/dist/components/Drawer/Title/index.d.ts +1 -0
- package/dist/components/Drawer/Trigger/Trigger.js +21 -0
- package/dist/components/Drawer/Trigger/Trigger.svelte.d.ts +4 -0
- package/dist/components/Drawer/Trigger/index.d.ts +1 -0
- package/dist/components/Drawer/context.d.ts +7 -0
- package/dist/components/Drawer/context.js +9 -0
- package/dist/components/Drawer/index.d.ts +24 -0
- package/dist/components/Drawer/index.js +27 -0
- package/dist/components/Drawer/styles.css.d.ts +13 -0
- package/dist/components/Drawer/styles.css.js +19 -0
- package/dist/components/Drawer/types.d.ts +22 -0
- package/dist/components/RangeInput/RangeInput.js +84 -81
- package/dist/components/RangeInput/RangeInput.svelte.d.ts +1 -1
- package/dist/components/RangeInput/styles.css.d.ts +5 -10
- package/dist/components/RangeInput/styles.css.js +11 -11
- package/dist/components/RangeInput/types.d.ts +3 -3
- package/dist/components/RangeInput/utils.d.ts +2 -0
- package/dist/components/RangeInput/utils.js +10 -0
- package/dist/components/Slider/Slider.js +14 -13
- package/dist/components/Slider/styles.css.d.ts +0 -6
- package/dist/components/Slider/styles.css.js +10 -12
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +2 -1
- package/dist/stories/Drawer.stories.svelte.d.ts +19 -0
- package/package.json +10 -10
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
@keyframes styles_fadeIn__1rbt3ly0 {
|
|
2
|
+
from {
|
|
3
|
+
opacity: 0;
|
|
4
|
+
}
|
|
5
|
+
to {
|
|
6
|
+
opacity: 1;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
@keyframes styles_fadeOut__1rbt3ly1 {
|
|
10
|
+
from {
|
|
11
|
+
opacity: 1;
|
|
12
|
+
}
|
|
13
|
+
to {
|
|
14
|
+
opacity: 0;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
@keyframes styles_slideIn__1rbt3ly2 {
|
|
18
|
+
from {
|
|
19
|
+
transform: translateY(100%);
|
|
20
|
+
}
|
|
21
|
+
to {
|
|
22
|
+
transform: translateY(0);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
.styles_overlay__1rbt3ly3 {
|
|
26
|
+
position: fixed;
|
|
27
|
+
inset: 0;
|
|
28
|
+
background-color: rgb(15 23 42 / 0.5);
|
|
29
|
+
z-index: 50;
|
|
30
|
+
}
|
|
31
|
+
.styles_overlay__1rbt3ly3[data-state=open] {
|
|
32
|
+
animation: styles_fadeIn__1rbt3ly0 150ms ease-out;
|
|
33
|
+
}
|
|
34
|
+
.styles_overlay__1rbt3ly3[data-state=closed] {
|
|
35
|
+
animation: styles_fadeOut__1rbt3ly1 150ms ease-in;
|
|
36
|
+
}
|
|
37
|
+
.styles_content__1rbt3ly4 {
|
|
38
|
+
position: fixed;
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
background-color: var(--colors-background-paper);
|
|
42
|
+
color: var(--colors-text-primary);
|
|
43
|
+
border: 1px solid var(--colors-border);
|
|
44
|
+
box-shadow: var(--shadow-4);
|
|
45
|
+
z-index: 51;
|
|
46
|
+
width: 100%;
|
|
47
|
+
max-width: 100%;
|
|
48
|
+
max-height: 100%;
|
|
49
|
+
inset: auto 0 0 0;
|
|
50
|
+
border-radius: var(--borderRadius-lg) var(--borderRadius-lg) 0 0;
|
|
51
|
+
}
|
|
52
|
+
.styles_content__1rbt3ly4[data-state=open] {
|
|
53
|
+
animation: styles_slideIn__1rbt3ly2 220ms ease-out;
|
|
54
|
+
}
|
|
55
|
+
.styles_content__1rbt3ly4[data-state=closed] {
|
|
56
|
+
transform: translateY(100%);
|
|
57
|
+
}
|
|
58
|
+
.styles_contentTransition__1rbt3ly5 {
|
|
59
|
+
transition: transform 210ms ease-in-out;
|
|
60
|
+
}
|
|
61
|
+
.styles_header__1rbt3ly6 {
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
gap: var(--spacing-2);
|
|
65
|
+
padding: var(--spacing-4);
|
|
66
|
+
}
|
|
67
|
+
.styles_footer__1rbt3ly7 {
|
|
68
|
+
margin-top: auto;
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
gap: var(--spacing-2);
|
|
72
|
+
padding: var(--spacing-4);
|
|
73
|
+
}
|
|
74
|
+
.styles_title__1rbt3ly8 {
|
|
75
|
+
font-size: var(--fontSize-lg);
|
|
76
|
+
font-weight: var(--fontWeight-semibold);
|
|
77
|
+
color: var(--colors-text-primary);
|
|
78
|
+
}
|
|
79
|
+
.styles_description__1rbt3ly9 {
|
|
80
|
+
font-size: var(--fontSize-sm);
|
|
81
|
+
color: var(--colors-text-secondary);
|
|
82
|
+
}
|
|
83
|
+
.styles_closeButton__1rbt3lya {
|
|
84
|
+
position: absolute;
|
|
85
|
+
top: var(--spacing-4);
|
|
86
|
+
right: var(--spacing-4);
|
|
87
|
+
display: inline-flex;
|
|
88
|
+
align-items: center;
|
|
89
|
+
justify-content: center;
|
|
90
|
+
border: none;
|
|
91
|
+
background-color: transparent;
|
|
92
|
+
color: var(--colors-text-secondary);
|
|
93
|
+
padding: var(--spacing-1);
|
|
94
|
+
border-radius: var(--borderRadius-sm);
|
|
95
|
+
cursor: pointer;
|
|
96
|
+
opacity: 0.7;
|
|
97
|
+
transition: opacity 0.2s ease;
|
|
98
|
+
}
|
|
99
|
+
.styles_closeButton__1rbt3lya:hover {
|
|
100
|
+
opacity: 1;
|
|
101
|
+
}
|
|
102
|
+
.styles_closeButton__1rbt3lya:focus-visible {
|
|
103
|
+
outline: 2px solid var(--colors-primary);
|
|
104
|
+
outline-offset: 2px;
|
|
105
|
+
}
|
|
106
|
+
.styles_handle__1rbt3lyb {
|
|
107
|
+
width: 100%;
|
|
108
|
+
height: var(--spacing-8);
|
|
109
|
+
display: flex;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
align-items: center;
|
|
112
|
+
}
|
|
113
|
+
.styles_handle__1rbt3lyb::after {
|
|
114
|
+
content: "";
|
|
115
|
+
width: 100px;
|
|
116
|
+
height: 8px;
|
|
117
|
+
border-radius: var(--borderRadius-md);
|
|
118
|
+
background-color: var(--colors-background-element);
|
|
119
|
+
}
|
|
120
|
+
.styles_visuallyHidden__1rbt3lyc {
|
|
121
|
+
position: absolute;
|
|
122
|
+
width: 1px;
|
|
123
|
+
height: 1px;
|
|
124
|
+
padding: 0;
|
|
125
|
+
margin: -1px;
|
|
126
|
+
overflow: hidden;
|
|
127
|
+
clip: rect(0, 0, 0, 0);
|
|
128
|
+
white-space: nowrap;
|
|
129
|
+
border: 0;
|
|
130
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.styles_container__14rk0zx0 {
|
|
2
2
|
position: relative;
|
|
3
3
|
display: grid;
|
|
4
|
-
grid-template-columns: auto
|
|
4
|
+
grid-template-columns: auto 1fr auto 1fr auto;
|
|
5
5
|
align-items: center;
|
|
6
6
|
column-gap: var(--spacing-1);
|
|
7
7
|
background: var(--colors-background-paper);
|
|
@@ -9,28 +9,31 @@
|
|
|
9
9
|
border-radius: var(--borderRadius-md);
|
|
10
10
|
transition: border 0.2s;
|
|
11
11
|
}
|
|
12
|
-
.
|
|
12
|
+
.styles_fullWidth__14rk0zx1 {
|
|
13
|
+
width: 100%;
|
|
14
|
+
}
|
|
15
|
+
.styles_active__14rk0zx2 {
|
|
13
16
|
border-color: var(--colors-primary);
|
|
14
17
|
}
|
|
15
|
-
.
|
|
16
|
-
padding: 0.125rem var(--spacing-2);
|
|
18
|
+
.styles_sizes_small__14rk0zx3 {
|
|
19
|
+
padding: 0.125rem var(--spacing-2) var(--spacing-1) var(--spacing-2);
|
|
17
20
|
height: 28px;
|
|
18
21
|
font-size: var(--fontSize-sm);
|
|
19
22
|
}
|
|
20
|
-
.
|
|
21
|
-
padding: var(--spacing-1) var(--spacing-3);
|
|
23
|
+
.styles_sizes_medium__14rk0zx4 {
|
|
24
|
+
padding: var(--spacing-1) var(--spacing-3) var(--spacing-2) var(--spacing-3);
|
|
22
25
|
height: 36px;
|
|
23
26
|
font-size: var(--fontSize-base);
|
|
24
27
|
}
|
|
25
|
-
.
|
|
26
|
-
padding: var(--spacing-2) var(--spacing-4);
|
|
28
|
+
.styles_sizes_large__14rk0zx5 {
|
|
29
|
+
padding: var(--spacing-2) var(--spacing-4) var(--spacing-3) var(--spacing-4);
|
|
27
30
|
height: 44px;
|
|
28
31
|
font-size: var(--fontSize-lg);
|
|
29
32
|
}
|
|
30
|
-
.
|
|
33
|
+
.styles_text__14rk0zx6 {
|
|
31
34
|
font-size: inherit;
|
|
32
35
|
}
|
|
33
|
-
.
|
|
36
|
+
.styles_input__14rk0zx7 {
|
|
34
37
|
text-align: center;
|
|
35
38
|
width: 100%;
|
|
36
39
|
min-width: 24px;
|
|
@@ -43,10 +46,10 @@
|
|
|
43
46
|
background: transparent;
|
|
44
47
|
color: inherit;
|
|
45
48
|
}
|
|
46
|
-
.
|
|
49
|
+
.styles_input__14rk0zx7:focus {
|
|
47
50
|
border: none;
|
|
48
51
|
}
|
|
49
|
-
.
|
|
52
|
+
.styles_slider__14rk0zx8 {
|
|
50
53
|
position: absolute;
|
|
51
54
|
bottom: -1px;
|
|
52
55
|
left: 50%;
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
export declare const buttonBase: string;
|
|
2
|
-
export declare const iconWrapper: string;
|
|
3
|
-
export declare const buttonNext: Record<"horizontal" | "vertical", string>;
|
|
4
|
-
export declare const buttonPrev: Record<"horizontal" | "vertical", string>;
|
|
5
1
|
declare const _default: {
|
|
6
2
|
buttonNext: Record<"horizontal" | "vertical", string>;
|
|
7
3
|
buttonPrev: Record<"horizontal" | "vertical", string>;
|
|
@@ -2,17 +2,15 @@ import "./../../../assets/src/theme.css.ts.vanilla-HT3RGHeI.css";
|
|
|
2
2
|
import "./../../../assets/src/components/Carousel/Arrows/styles.css.ts.vanilla-CFc3t0Nn.css";
|
|
3
3
|
|
|
4
4
|
//#region src/components/Carousel/Arrows/styles.css.ts
|
|
5
|
-
var buttonNext = {
|
|
6
|
-
horizontal: "styles_buttonNext_horizontal__3ygkf92 styles_buttonBase__3ygkf90",
|
|
7
|
-
vertical: "styles_buttonNext_vertical__3ygkf93 styles_buttonBase__3ygkf90"
|
|
8
|
-
};
|
|
9
|
-
var buttonPrev = {
|
|
10
|
-
horizontal: "styles_buttonPrev_horizontal__3ygkf94 styles_buttonBase__3ygkf90",
|
|
11
|
-
vertical: "styles_buttonPrev_vertical__3ygkf95 styles_buttonBase__3ygkf90"
|
|
12
|
-
};
|
|
13
5
|
var __default__ = {
|
|
14
|
-
buttonNext
|
|
15
|
-
|
|
6
|
+
buttonNext: {
|
|
7
|
+
horizontal: "styles_buttonNext_horizontal__3ygkf92 styles_buttonBase__3ygkf90",
|
|
8
|
+
vertical: "styles_buttonNext_vertical__3ygkf93 styles_buttonBase__3ygkf90"
|
|
9
|
+
},
|
|
10
|
+
buttonPrev: {
|
|
11
|
+
horizontal: "styles_buttonPrev_horizontal__3ygkf94 styles_buttonBase__3ygkf90",
|
|
12
|
+
vertical: "styles_buttonPrev_vertical__3ygkf95 styles_buttonBase__3ygkf90"
|
|
13
|
+
},
|
|
16
14
|
iconWrapper: "styles_iconWrapper__3ygkf91"
|
|
17
15
|
};
|
|
18
16
|
|
|
@@ -2,14 +2,13 @@ import "./../../../assets/src/theme.css.ts.vanilla-HT3RGHeI.css";
|
|
|
2
2
|
import "./../../../assets/src/components/Carousel/Content/styles.css.ts.vanilla-vey50OEc.css";
|
|
3
3
|
|
|
4
4
|
//#region src/components/Carousel/Content/styles.css.ts
|
|
5
|
-
var orientation = {
|
|
6
|
-
horizontal: "styles_orientation_horizontal__ho48de2",
|
|
7
|
-
vertical: "styles_orientation_vertical__ho48de3"
|
|
8
|
-
};
|
|
9
5
|
var __default__ = {
|
|
10
6
|
contentWrapper: "styles_contentWrapper__ho48de0",
|
|
11
7
|
container: "styles_container__ho48de1",
|
|
12
|
-
orientation
|
|
8
|
+
orientation: {
|
|
9
|
+
horizontal: "styles_orientation_horizontal__ho48de2",
|
|
10
|
+
vertical: "styles_orientation_vertical__ho48de3"
|
|
11
|
+
}
|
|
13
12
|
};
|
|
14
13
|
|
|
15
14
|
//#endregion
|
|
@@ -4,11 +4,10 @@ import "./../../../assets/src/components/Carousel/Item/styles.css.ts.vanilla-DM_
|
|
|
4
4
|
//#region src/components/Carousel/Item/styles.css.ts
|
|
5
5
|
var __default__ = {
|
|
6
6
|
item: "styles_item__ibhmv20",
|
|
7
|
-
orientation
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
vertical: "styles_orientation_vertical__ibhmv22"
|
|
7
|
+
orientation: {
|
|
8
|
+
horizontal: "styles_orientation_horizontal__ibhmv21",
|
|
9
|
+
vertical: "styles_orientation_vertical__ibhmv22"
|
|
10
|
+
}
|
|
12
11
|
};
|
|
13
12
|
|
|
14
13
|
//#endregion
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import "svelte/internal/disclose-version";
|
|
2
|
+
import * as $ from "svelte/internal/client";
|
|
3
|
+
import { Dialog } from "bits-ui";
|
|
4
|
+
|
|
5
|
+
//#region src/components/Drawer/Close/Close.svelte
|
|
6
|
+
function Close($$anchor, $$props) {
|
|
7
|
+
let props = $.rest_props($$props, [
|
|
8
|
+
"$$slots",
|
|
9
|
+
"$$events",
|
|
10
|
+
"$$legacy"
|
|
11
|
+
]);
|
|
12
|
+
var fragment = $.comment();
|
|
13
|
+
var node = $.first_child(fragment);
|
|
14
|
+
$.component(node, () => Dialog.Close, ($$anchor, DialogPrimitive_Close) => {
|
|
15
|
+
DialogPrimitive_Close($$anchor, $.spread_props({ "data-slot": "drawer-close" }, () => props));
|
|
16
|
+
});
|
|
17
|
+
$.append($$anchor, fragment);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
//#endregion
|
|
21
|
+
export { Close as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Close } from './Close.svelte';
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { getDrawerContext } from "../context.js";
|
|
2
|
+
import __default__ from "../styles.css.js";
|
|
3
|
+
import Overlay from "../Overlay/Overlay.js";
|
|
4
|
+
import Portal from "../Portal/Portal.js";
|
|
5
|
+
import "svelte/internal/disclose-version";
|
|
6
|
+
import * as $ from "svelte/internal/client";
|
|
7
|
+
import { Dialog } from "bits-ui";
|
|
8
|
+
import XIcon from "@lucide/svelte/icons/x";
|
|
9
|
+
|
|
10
|
+
//#region src/components/Drawer/Content/Content.svelte
|
|
11
|
+
var root_3 = $.from_html(`<div aria-hidden="true"></div>`);
|
|
12
|
+
var root_5 = $.from_html(`<!> <span>Close drawer</span>`, 1);
|
|
13
|
+
var root_2 = $.from_html(`<!> <!> <!>`, 1);
|
|
14
|
+
var root_1 = $.from_html(`<!> <!>`, 1);
|
|
15
|
+
function Content($$anchor, $$props) {
|
|
16
|
+
$.push($$props, true);
|
|
17
|
+
const drawer = getDrawerContext();
|
|
18
|
+
const isNotCloseable = drawer.isNotCloseable();
|
|
19
|
+
let swipeCloseThreshold = $.prop($$props, "swipeCloseThreshold", 3, 50), restProps = $.rest_props($$props, [
|
|
20
|
+
"$$slots",
|
|
21
|
+
"$$events",
|
|
22
|
+
"$$legacy",
|
|
23
|
+
"class",
|
|
24
|
+
"portalProps",
|
|
25
|
+
"showCloseButton",
|
|
26
|
+
"children",
|
|
27
|
+
"swipeCloseThreshold"
|
|
28
|
+
]);
|
|
29
|
+
let isDragging = $.state(false);
|
|
30
|
+
let startPosition = $.state(void 0);
|
|
31
|
+
let position = $.state(void 0);
|
|
32
|
+
const style = $.derived(() => $.get(position) ? { transform: `translateY(${$.get(position)}px)` } : void 0);
|
|
33
|
+
function handleTouchStart(event) {
|
|
34
|
+
$.set(isDragging, true);
|
|
35
|
+
$.set(startPosition, event.touches[0]?.clientY ?? null, true);
|
|
36
|
+
}
|
|
37
|
+
function handleTouchMove(event) {
|
|
38
|
+
const clientY = event.touches[0]?.clientY ?? $.get(position);
|
|
39
|
+
if ($.get(startPosition) && clientY > $.get(startPosition)) $.set(position, clientY - $.get(startPosition));
|
|
40
|
+
}
|
|
41
|
+
function handleTouchEnd() {
|
|
42
|
+
$.set(isDragging, false);
|
|
43
|
+
if ($.get(position) && $.get(startPosition) && $.get(position) - $.get(startPosition) > swipeCloseThreshold()) drawer?.close();
|
|
44
|
+
$.set(startPosition, void 0);
|
|
45
|
+
$.set(position, void 0);
|
|
46
|
+
}
|
|
47
|
+
Portal($$anchor, $.spread_props(() => $$props.portalProps, {
|
|
48
|
+
children: ($$anchor, $$slotProps) => {
|
|
49
|
+
var fragment_1 = root_1();
|
|
50
|
+
var node = $.first_child(fragment_1);
|
|
51
|
+
Overlay(node, {});
|
|
52
|
+
var node_1 = $.sibling(node, 2);
|
|
53
|
+
{
|
|
54
|
+
let $0 = $.derived(() => [
|
|
55
|
+
__default__.content,
|
|
56
|
+
{ [__default__.contentTransition]: !$.get(isDragging) },
|
|
57
|
+
$$props.class
|
|
58
|
+
]);
|
|
59
|
+
$.component(node_1, () => Dialog.Content, ($$anchor, DialogPrimitive_Content) => {
|
|
60
|
+
DialogPrimitive_Content($$anchor, $.spread_props({
|
|
61
|
+
"data-slot": "drawer-content",
|
|
62
|
+
get class() {
|
|
63
|
+
return $.get($0);
|
|
64
|
+
},
|
|
65
|
+
get style() {
|
|
66
|
+
return $.get(style);
|
|
67
|
+
}
|
|
68
|
+
}, () => restProps, {
|
|
69
|
+
children: ($$anchor, $$slotProps) => {
|
|
70
|
+
var fragment_2 = root_2();
|
|
71
|
+
var node_2 = $.first_child(fragment_2);
|
|
72
|
+
var consequent = ($$anchor) => {
|
|
73
|
+
var div = root_3();
|
|
74
|
+
div.__touchmove = handleTouchMove;
|
|
75
|
+
div.__touchstart = handleTouchStart;
|
|
76
|
+
div.__touchend = handleTouchEnd;
|
|
77
|
+
$.template_effect(() => $.set_class(div, 1, $.clsx(__default__.handle)));
|
|
78
|
+
$.append($$anchor, div);
|
|
79
|
+
};
|
|
80
|
+
$.if(node_2, ($$render) => {
|
|
81
|
+
if (!isNotCloseable && !$$props.showCloseButton) $$render(consequent);
|
|
82
|
+
});
|
|
83
|
+
var node_3 = $.sibling(node_2, 2);
|
|
84
|
+
$.snippet(node_3, () => $$props.children ?? $.noop);
|
|
85
|
+
var node_4 = $.sibling(node_3, 2);
|
|
86
|
+
var consequent_1 = ($$anchor) => {
|
|
87
|
+
var fragment_3 = $.comment();
|
|
88
|
+
var node_5 = $.first_child(fragment_3);
|
|
89
|
+
$.component(node_5, () => Dialog.Close, ($$anchor, DialogPrimitive_Close) => {
|
|
90
|
+
DialogPrimitive_Close($$anchor, {
|
|
91
|
+
get class() {
|
|
92
|
+
return __default__.closeButton;
|
|
93
|
+
},
|
|
94
|
+
children: ($$anchor, $$slotProps) => {
|
|
95
|
+
var fragment_4 = root_5();
|
|
96
|
+
var node_6 = $.first_child(fragment_4);
|
|
97
|
+
XIcon(node_6, {});
|
|
98
|
+
var span = $.sibling(node_6, 2);
|
|
99
|
+
$.template_effect(() => $.set_class(span, 1, $.clsx(__default__.visuallyHidden)));
|
|
100
|
+
$.append($$anchor, fragment_4);
|
|
101
|
+
},
|
|
102
|
+
$$slots: { default: true }
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
$.append($$anchor, fragment_3);
|
|
106
|
+
};
|
|
107
|
+
$.if(node_4, ($$render) => {
|
|
108
|
+
if (!isNotCloseable && $$props.showCloseButton) $$render(consequent_1);
|
|
109
|
+
});
|
|
110
|
+
$.append($$anchor, fragment_2);
|
|
111
|
+
},
|
|
112
|
+
$$slots: { default: true }
|
|
113
|
+
}));
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
$.append($$anchor, fragment_1);
|
|
117
|
+
},
|
|
118
|
+
$$slots: { default: true }
|
|
119
|
+
}));
|
|
120
|
+
$.pop();
|
|
121
|
+
}
|
|
122
|
+
$.delegate([
|
|
123
|
+
"touchmove",
|
|
124
|
+
"touchstart",
|
|
125
|
+
"touchend"
|
|
126
|
+
]);
|
|
127
|
+
|
|
128
|
+
//#endregion
|
|
129
|
+
export { Content as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Content } from './Content.svelte';
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import __default__ from "../styles.css.js";
|
|
2
|
+
import "svelte/internal/disclose-version";
|
|
3
|
+
import * as $ from "svelte/internal/client";
|
|
4
|
+
import { Dialog } from "bits-ui";
|
|
5
|
+
|
|
6
|
+
//#region src/components/Drawer/Description/Description.svelte
|
|
7
|
+
function Description($$anchor, $$props) {
|
|
8
|
+
$.push($$props, true);
|
|
9
|
+
const restProps = $.rest_props($$props, [
|
|
10
|
+
"$$slots",
|
|
11
|
+
"$$events",
|
|
12
|
+
"$$legacy",
|
|
13
|
+
"class"
|
|
14
|
+
]);
|
|
15
|
+
var fragment = $.comment();
|
|
16
|
+
var node = $.first_child(fragment);
|
|
17
|
+
{
|
|
18
|
+
let $0 = $.derived(() => [__default__.description, $$props.class]);
|
|
19
|
+
$.component(node, () => Dialog.Description, ($$anchor, DialogPrimitive_Description) => {
|
|
20
|
+
DialogPrimitive_Description($$anchor, $.spread_props({
|
|
21
|
+
"data-slot": "drawer-description",
|
|
22
|
+
get class() {
|
|
23
|
+
return $.get($0);
|
|
24
|
+
}
|
|
25
|
+
}, () => restProps));
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
$.append($$anchor, fragment);
|
|
29
|
+
$.pop();
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
//#endregion
|
|
33
|
+
export { Description as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Description } from './Description.svelte';
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { setDrawerContext } from "./context.js";
|
|
2
|
+
import "svelte/internal/disclose-version";
|
|
3
|
+
import * as $ from "svelte/internal/client";
|
|
4
|
+
import { Dialog } from "bits-ui";
|
|
5
|
+
import { onDestroy } from "svelte";
|
|
6
|
+
|
|
7
|
+
//#region src/components/Drawer/Drawer.svelte
|
|
8
|
+
function Drawer($$anchor, $$props) {
|
|
9
|
+
$.push($$props, true);
|
|
10
|
+
let open = $.prop($$props, "open", 15, false), notCloseable = $.prop($$props, "notCloseable", 3, false), shouldScaleBackground = $.prop($$props, "shouldScaleBackground", 3, false), restProps = $.rest_props($$props, [
|
|
11
|
+
"$$slots",
|
|
12
|
+
"$$events",
|
|
13
|
+
"$$legacy",
|
|
14
|
+
"open",
|
|
15
|
+
"notCloseable",
|
|
16
|
+
"shouldScaleBackground",
|
|
17
|
+
"children",
|
|
18
|
+
"onOpenChange"
|
|
19
|
+
]);
|
|
20
|
+
const close = () => {
|
|
21
|
+
if (notCloseable()) return;
|
|
22
|
+
open(false);
|
|
23
|
+
$$props.onOpenChange?.(false);
|
|
24
|
+
};
|
|
25
|
+
setDrawerContext({
|
|
26
|
+
close,
|
|
27
|
+
isOpen: () => open(),
|
|
28
|
+
isNotCloseable: () => notCloseable()
|
|
29
|
+
});
|
|
30
|
+
const SCALE_CLASS = "drawer-scaled-background";
|
|
31
|
+
$.user_effect(() => {
|
|
32
|
+
if (!shouldScaleBackground()) return;
|
|
33
|
+
const classList = document.documentElement.classList;
|
|
34
|
+
if (open()) classList.add(SCALE_CLASS);
|
|
35
|
+
else classList.remove(SCALE_CLASS);
|
|
36
|
+
});
|
|
37
|
+
onDestroy(() => {
|
|
38
|
+
document.documentElement.classList.remove(SCALE_CLASS);
|
|
39
|
+
});
|
|
40
|
+
function handleOpenChange(value) {
|
|
41
|
+
if (notCloseable() && !value) return;
|
|
42
|
+
open(value);
|
|
43
|
+
$$props.onOpenChange?.(value);
|
|
44
|
+
}
|
|
45
|
+
var fragment = $.comment();
|
|
46
|
+
var node = $.first_child(fragment);
|
|
47
|
+
$.component(node, () => Dialog.Root, ($$anchor, DialogPrimitive_Root) => {
|
|
48
|
+
DialogPrimitive_Root($$anchor, $.spread_props({ onOpenChange: handleOpenChange }, () => restProps, {
|
|
49
|
+
get open() {
|
|
50
|
+
return open();
|
|
51
|
+
},
|
|
52
|
+
set open($$value) {
|
|
53
|
+
open($$value);
|
|
54
|
+
},
|
|
55
|
+
children: ($$anchor, $$slotProps) => {
|
|
56
|
+
var fragment_1 = $.comment();
|
|
57
|
+
var node_1 = $.first_child(fragment_1);
|
|
58
|
+
$.snippet(node_1, () => $$props.children ?? $.noop);
|
|
59
|
+
$.append($$anchor, fragment_1);
|
|
60
|
+
},
|
|
61
|
+
$$slots: { default: true }
|
|
62
|
+
}));
|
|
63
|
+
});
|
|
64
|
+
$.append($$anchor, fragment);
|
|
65
|
+
$.pop();
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
//#endregion
|
|
69
|
+
export { Drawer as default };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { DrawerProps } from './types';
|
|
3
|
+
type $$ComponentProps = DrawerProps & {
|
|
4
|
+
children?: Snippet;
|
|
5
|
+
};
|
|
6
|
+
declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "open">;
|
|
7
|
+
type Drawer = ReturnType<typeof Drawer>;
|
|
8
|
+
export default Drawer;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import __default__ from "../styles.css.js";
|
|
2
|
+
import "svelte/internal/disclose-version";
|
|
3
|
+
import * as $ from "svelte/internal/client";
|
|
4
|
+
|
|
5
|
+
//#region src/components/Drawer/Footer/Footer.svelte
|
|
6
|
+
var root = $.from_html(`<div><!></div>`);
|
|
7
|
+
function Footer($$anchor, $$props) {
|
|
8
|
+
$.push($$props, true);
|
|
9
|
+
let ref = $.prop($$props, "ref", 15, null), restProps = $.rest_props($$props, [
|
|
10
|
+
"$$slots",
|
|
11
|
+
"$$events",
|
|
12
|
+
"$$legacy",
|
|
13
|
+
"ref",
|
|
14
|
+
"class",
|
|
15
|
+
"children"
|
|
16
|
+
]);
|
|
17
|
+
var div = root();
|
|
18
|
+
$.attribute_effect(div, () => ({
|
|
19
|
+
"data-slot": "drawer-footer",
|
|
20
|
+
class: [__default__.footer, $$props.class],
|
|
21
|
+
...restProps
|
|
22
|
+
}));
|
|
23
|
+
var node = $.child(div);
|
|
24
|
+
$.snippet(node, () => $$props.children ?? $.noop);
|
|
25
|
+
$.reset(div);
|
|
26
|
+
$.bind_this(div, ($$value) => ref($$value), () => ref());
|
|
27
|
+
$.append($$anchor, div);
|
|
28
|
+
$.pop();
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
//#endregion
|
|
32
|
+
export { Footer as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Footer } from './Footer.svelte';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import __default__ from "../styles.css.js";
|
|
2
|
+
import "svelte/internal/disclose-version";
|
|
3
|
+
import * as $ from "svelte/internal/client";
|
|
4
|
+
|
|
5
|
+
//#region src/components/Drawer/Header/Header.svelte
|
|
6
|
+
var root = $.from_html(`<div><!></div>`);
|
|
7
|
+
function Header($$anchor, $$props) {
|
|
8
|
+
$.push($$props, true);
|
|
9
|
+
let ref = $.prop($$props, "ref", 15, null), restProps = $.rest_props($$props, [
|
|
10
|
+
"$$slots",
|
|
11
|
+
"$$events",
|
|
12
|
+
"$$legacy",
|
|
13
|
+
"ref",
|
|
14
|
+
"class",
|
|
15
|
+
"children"
|
|
16
|
+
]);
|
|
17
|
+
var div = root();
|
|
18
|
+
$.attribute_effect(div, () => ({
|
|
19
|
+
"data-slot": "drawer-header",
|
|
20
|
+
class: [__default__.header, $$props.class],
|
|
21
|
+
...restProps
|
|
22
|
+
}));
|
|
23
|
+
var node = $.child(div);
|
|
24
|
+
$.snippet(node, () => $$props.children ?? $.noop);
|
|
25
|
+
$.reset(div);
|
|
26
|
+
$.bind_this(div, ($$value) => ref($$value), () => ref());
|
|
27
|
+
$.append($$anchor, div);
|
|
28
|
+
$.pop();
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
//#endregion
|
|
32
|
+
export { Header as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Header } from './Header.svelte';
|