@skalfa/skalfa-component 1.0.48 → 1.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.
Files changed (6) hide show
  1. package/dist/modal/FloatingPage.component.d.ts +2 -1
  2. package/dist/modal/FloatingPage.component.js +2 -2
  3. package/dist/nav/Headbar.component.js +1 -1
  4. package/package.json +1 -1
  5. package/src/modal/FloatingPage.component.tsx +20 -15
  6. package/src/nav/Headbar.component.tsx +1 -1
package/dist/modal/FloatingPage.component.d.ts CHANGED
@@ -5,10 +5,11 @@ export interface FloatingPageProps {
5
5
  title?: string | ReactNode;
6
6
  children?: any;
7
7
  tip?: string | ReactNode;
8
+ header?: false | ReactNode;
8
9
  footer?: string | ReactNode;
9
10
  size?: string | number;
10
11
  maxSize?: string | number;
11
12
  /** Use custom class with: "backdrop::", "header::", "footer::". */
12
13
  className?: string;
13
14
  }
14
- export declare function FloatingPageComponent({ show, onClose, title, children, tip, footer, className, size, maxSize, }: FloatingPageProps): import("@types/react").JSX.Element;
15
+ export declare function FloatingPageComponent({ show, onClose, title, children, tip, footer, header, className, size, maxSize, }: FloatingPageProps): import("@types/react").JSX.Element;
package/dist/modal/FloatingPage.component.js CHANGED
@@ -8,7 +8,7 @@ const Button_component_1 = require("../button/Button.component");
8
8
  const _utils_1 = require("@utils");
9
9
  const BottomSheet_component_1 = require("./BottomSheet.component");
10
10
  ;
11
- function FloatingPageComponent({ show, onClose, title, children, tip, footer, className = "", size, maxSize, }) {
11
+ function FloatingPageComponent({ show, onClose, title, children, tip, footer, header, className = "", size, maxSize, }) {
12
12
  const { isSm } = (0, _utils_1.useResponsive)();
13
13
  (0, react_1.useEffect)(() => {
14
14
  if (show) {
@@ -27,5 +27,5 @@ function FloatingPageComponent({ show, onClose, title, children, tip, footer, cl
27
27
  if (isSm) {
28
28
  return ((0, jsx_runtime_1.jsxs)(BottomSheet_component_1.BottomSheetComponent, { show: show, onClose: onClose, size: size, maxSize: maxSize, footer: footer, className: className, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: title && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] })) }), show && children] }));
29
29
  }
30
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("floating-page", !show && "top-[200vh] md:top-0 md:-right-[200vw]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: [title && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] })), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", variant: "simple", paint: "danger", onClick: () => onClose() })] }), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer absolute bottom-0 w-full", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] })] }));
30
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("floating-page", !show && "top-[200vh] md:top-0 md:-right-[200vw]", (0, _utils_1.pcn)(className, "base")), children: [(header == undefined || header != false) && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: [title && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] })), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", variant: "simple", paint: "danger", onClick: () => onClose() })] })), !!header && header, show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer absolute bottom-0 w-full", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] })] }));
31
31
  }
package/dist/nav/Headbar.component.js CHANGED
@@ -11,5 +11,5 @@ const navigation_1 = require("next/navigation");
11
11
  function HeadbarComponent({ title, backHref, rightContent, sidebarId, className = "", }) {
12
12
  const router = (0, navigation_1.useRouter)();
13
13
  const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
14
- return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex justify-between w-full items-center mt-2 mb-4 headbar", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex items-center headbar-left", (0, _utils_1.pcn)(className, "left")), children: [toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`] && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("w-8 aspect-square flex justify-center items-center cursor-pointer headbar-toggle headbar-sidebar-toggle", (0, _utils_1.pcn)(className, "toggle")), onClick: () => setToggle(`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`, !toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`]), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "outline/sidebar-close", className: "text-xl headbar-toggle-icon headbar-icon" }) })), backHref && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("w-8 aspect-square flex justify-center items-center cursor-pointer headbar-back headbar-back-button", (0, _utils_1.pcn)(className, "back")), onClick: () => typeof backHref != "boolean" ? router.push(backHref) : router.back(), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-left", className: "text-xl headbar-back-icon headbar-icon" }) })), (0, jsx_runtime_1.jsx)("p", { className: (0, _utils_1.cn)("text-lg font-bold px-2 headbar-title", (0, _utils_1.pcn)(className, "title")), children: title })] }), rightContent && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("headbar-right", (0, _utils_1.pcn)(className, "right")), children: rightContent }))] }));
14
+ return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex justify-between w-full items-center mt-2 mb-4 headbar", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex items-center headbar-left", (0, _utils_1.pcn)(className, "left")), children: [toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`] && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("w-8 aspect-square flex justify-center items-center cursor-pointer headbar-toggle headbar-sidebar-toggle", (0, _utils_1.pcn)(className, "toggle")), onClick: () => setToggle(`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`, !toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`]), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "outline/sidebar-open", className: "text-xl headbar-toggle-icon headbar-icon" }) })), backHref && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("w-8 aspect-square flex justify-center items-center cursor-pointer headbar-back headbar-back-button", (0, _utils_1.pcn)(className, "back")), onClick: () => typeof backHref != "boolean" ? router.push(backHref) : router.back(), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-left", className: "text-xl headbar-back-icon headbar-icon" }) })), (0, jsx_runtime_1.jsx)("p", { className: (0, _utils_1.cn)("text-lg font-bold px-2 headbar-title", (0, _utils_1.pcn)(className, "title")), children: title })] }), rightContent && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("headbar-right", (0, _utils_1.pcn)(className, "right")), children: rightContent }))] }));
15
15
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skalfa/skalfa-component",
3
- "version": "1.0.48",
3
+ "version": "1.0.50",
4
4
  "description": "Reusable UI components for Skalfa App.",
5
5
  "license": "MIT",
6
6
  "keywords": [
package/src/modal/FloatingPage.component.tsx CHANGED
@@ -15,6 +15,7 @@ export interface FloatingPageProps {
15
15
  title ?: string | ReactNode;
16
16
  children ?: any;
17
17
  tip ?: string | ReactNode;
18
+ header ?: false | ReactNode;
18
19
  footer ?: string | ReactNode;
19
20
  size ?: string | number;
20
21
  maxSize ?: string | number;
@@ -33,6 +34,7 @@ export function FloatingPageComponent({
33
34
  children,
34
35
  tip,
35
36
  footer,
37
+ header,
36
38
  className = "",
37
39
  size,
38
40
  maxSize,
@@ -98,22 +100,25 @@ export function FloatingPageComponent({
98
100
  pcn<CT>(className, "base"),
99
101
  )}
100
102
  >
101
- <div className={cn("modal-header", pcn<CT>(className, "header"))}>
102
- {title && (
103
- <div>
104
- <h6 className="modal-title">{title}</h6>
105
- {tip && <p className="modal-tip">{tip}</p>}
106
- </div>
107
- )}
103
+ {(header == undefined || header != false) && (
104
+ <div className={cn("modal-header", pcn<CT>(className, "header"))}>
105
+ {title && (
106
+ <div>
107
+ <h6 className="modal-title">{title}</h6>
108
+ {tip && <p className="modal-tip">{tip}</p>}
109
+ </div>
110
+ )}
108
111
 
109
- <ButtonComponent
110
- icon="solid/times"
111
- variant="simple"
112
- paint="danger"
113
- onClick={() => onClose()}
114
- />
115
- </div>
116
-
112
+ <ButtonComponent
113
+ icon="solid/times"
114
+ variant="simple"
115
+ paint="danger"
116
+ onClick={() => onClose()}
117
+ />
118
+ </div>
119
+ )}
120
+
121
+ {!!header && header}
117
122
 
118
123
  {show && children}
119
124
 
package/src/nav/Headbar.component.tsx CHANGED
@@ -52,7 +52,7 @@ export function HeadbarComponent({
52
52
  )
53
53
  }
54
54
  >
55
- <Icon icon="outline/sidebar-close" className="text-xl headbar-toggle-icon headbar-icon" />
55
+ <Icon icon="outline/sidebar-open" className="text-xl headbar-toggle-icon headbar-icon" />
56
56
  </div>
57
57
  )}
58
58
  {backHref && (