@manhphi1309/drawer 0.2.10 → 0.2.11
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/index.cjs +8 -3
- package/dist/index.d.cts +1 -0
- package/dist/index.d.mts +1 -0
- package/dist/index.mjs +8 -3
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -69,9 +69,14 @@ function DrawerPortal({ ...props }) {
|
|
|
69
69
|
...props
|
|
70
70
|
});
|
|
71
71
|
}
|
|
72
|
-
function DrawerClose({ ...props }) {
|
|
72
|
+
function DrawerClose({ onClick, ...props }) {
|
|
73
|
+
const context = react.useContext(DrawerContext);
|
|
73
74
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Close, {
|
|
74
75
|
"data-slot": "drawer-close",
|
|
76
|
+
onClick: (e) => {
|
|
77
|
+
onClick?.(e);
|
|
78
|
+
context?.onOpenChange?.(false);
|
|
79
|
+
},
|
|
75
80
|
...props
|
|
76
81
|
});
|
|
77
82
|
}
|
|
@@ -153,7 +158,7 @@ function DrawerContent({ className, children, panels, activePanelIndex = 0, onPa
|
|
|
153
158
|
"data-slot": "drawer-portal",
|
|
154
159
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(vaul.Drawer.Content, {
|
|
155
160
|
"data-slot": "drawer-content",
|
|
156
|
-
className: (0, _manhphi1309_utils.cn)("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[calc(100%-1.5rem-env(safe-area-inset-top))] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[calc(100%-1.5rem-env(safe-area-inset-top))] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm data-[vaul-drawer-direction=bottom]:sm:max-w-sm data-[vaul-drawer-direction=bottom]:sm:mx-auto data-[vaul-drawer-direction=top]:sm:max-w-sm data-[vaul-drawer-direction=top]:sm:mx-auto", className),
|
|
161
|
+
className: (0, _manhphi1309_utils.cn)("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[calc(100%-1.5rem-env(safe-area-inset-top))] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[calc(100%-1.5rem-env(safe-area-inset-top))] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm data-[vaul-drawer-direction=bottom]:sm:max-w-sm data-[vaul-drawer-direction=bottom]:sm:mx-auto data-[vaul-drawer-direction=top]:sm:max-w-sm data-[vaul-drawer-direction=top]:sm:mx-auto", "after:absolute after:inset-x-0 after:top-full after:h-[50vh] after:bg-inherit", className),
|
|
157
162
|
...props,
|
|
158
163
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mx-auto mt-4 hidden h-1 w-[40px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), !panels ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
159
164
|
className: "overflow-hidden",
|
|
@@ -173,7 +178,7 @@ function DrawerContent({ className, children, panels, activePanelIndex = 0, onPa
|
|
|
173
178
|
function DrawerHeader({ className, leftAction, rightAction, withSeparator = false, children, ...props }) {
|
|
174
179
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
175
180
|
"data-slot": "drawer-header",
|
|
176
|
-
className: (0, _manhphi1309_utils.cn)("flex items-center
|
|
181
|
+
className: (0, _manhphi1309_utils.cn)("flex items-center p-2 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left", withSeparator && "border-b border-border", className),
|
|
177
182
|
...props,
|
|
178
183
|
children: leftAction || rightAction ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
|
|
179
184
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
package/dist/index.d.cts
CHANGED
|
@@ -19,6 +19,7 @@ declare function DrawerPortal({
|
|
|
19
19
|
...props
|
|
20
20
|
}: React.ComponentProps<typeof Drawer$1.Portal>): React.JSX.Element;
|
|
21
21
|
declare function DrawerClose({
|
|
22
|
+
onClick,
|
|
22
23
|
...props
|
|
23
24
|
}: React.ComponentProps<typeof Drawer$1.Close>): React.JSX.Element;
|
|
24
25
|
declare function DrawerOverlay({
|
package/dist/index.d.mts
CHANGED
|
@@ -19,6 +19,7 @@ declare function DrawerPortal({
|
|
|
19
19
|
...props
|
|
20
20
|
}: React.ComponentProps<typeof Drawer$1.Portal>): React.JSX.Element;
|
|
21
21
|
declare function DrawerClose({
|
|
22
|
+
onClick,
|
|
22
23
|
...props
|
|
23
24
|
}: React.ComponentProps<typeof Drawer$1.Close>): React.JSX.Element;
|
|
24
25
|
declare function DrawerOverlay({
|
package/dist/index.mjs
CHANGED
|
@@ -45,9 +45,14 @@ function DrawerPortal({ ...props }) {
|
|
|
45
45
|
...props
|
|
46
46
|
});
|
|
47
47
|
}
|
|
48
|
-
function DrawerClose({ ...props }) {
|
|
48
|
+
function DrawerClose({ onClick, ...props }) {
|
|
49
|
+
const context = React.useContext(DrawerContext);
|
|
49
50
|
return /* @__PURE__ */ jsx(Drawer$1.Close, {
|
|
50
51
|
"data-slot": "drawer-close",
|
|
52
|
+
onClick: (e) => {
|
|
53
|
+
onClick?.(e);
|
|
54
|
+
context?.onOpenChange?.(false);
|
|
55
|
+
},
|
|
51
56
|
...props
|
|
52
57
|
});
|
|
53
58
|
}
|
|
@@ -129,7 +134,7 @@ function DrawerContent({ className, children, panels, activePanelIndex = 0, onPa
|
|
|
129
134
|
"data-slot": "drawer-portal",
|
|
130
135
|
children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
|
|
131
136
|
"data-slot": "drawer-content",
|
|
132
|
-
className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[calc(100%-1.5rem-env(safe-area-inset-top))] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[calc(100%-1.5rem-env(safe-area-inset-top))] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm data-[vaul-drawer-direction=bottom]:sm:max-w-sm data-[vaul-drawer-direction=bottom]:sm:mx-auto data-[vaul-drawer-direction=top]:sm:max-w-sm data-[vaul-drawer-direction=top]:sm:mx-auto", className),
|
|
137
|
+
className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[calc(100%-1.5rem-env(safe-area-inset-top))] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[calc(100%-1.5rem-env(safe-area-inset-top))] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm data-[vaul-drawer-direction=bottom]:sm:max-w-sm data-[vaul-drawer-direction=bottom]:sm:mx-auto data-[vaul-drawer-direction=top]:sm:max-w-sm data-[vaul-drawer-direction=top]:sm:mx-auto", "after:absolute after:inset-x-0 after:top-full after:h-[50vh] after:bg-inherit", className),
|
|
133
138
|
...props,
|
|
134
139
|
children: [/* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 hidden h-1 w-[40px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), !panels ? children : /* @__PURE__ */ jsx("div", {
|
|
135
140
|
className: "overflow-hidden",
|
|
@@ -149,7 +154,7 @@ function DrawerContent({ className, children, panels, activePanelIndex = 0, onPa
|
|
|
149
154
|
function DrawerHeader({ className, leftAction, rightAction, withSeparator = false, children, ...props }) {
|
|
150
155
|
return /* @__PURE__ */ jsx("div", {
|
|
151
156
|
"data-slot": "drawer-header",
|
|
152
|
-
className: cn("flex items-center
|
|
157
|
+
className: cn("flex items-center p-2 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left", withSeparator && "border-b border-border", className),
|
|
153
158
|
...props,
|
|
154
159
|
children: leftAction || rightAction ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
155
160
|
/* @__PURE__ */ jsx("div", {
|