@skalfa/skalfa-component 1.0.21 → 1.0.23

package/dist/supervision/FormSupervision.component.js

@@ -126,7 +126,7 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
         return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: (0, jsx_runtime_1.jsx)(Component, { ...form.construction, ...formControl(name) }) }, key));
     };
     (0, react_1.useEffect)(() => {
-        setModal(false);
+        (modal == "failed") && setModal(false);
     }, [values]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("h4", { className: (0, _utils_1.cn)("text-lg font-semibold mb-4", (0, _utils_1.pcn)(className, "title")), children: title }), modal == "success" ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center h-full py-6 transition-all duration-300 animate-intro-down", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "text-primary text-2xl" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-primary text-lg font-semibold mt-4", children: successMessage || l.base?.success ? l.base.success() : "Success!" })] })) : ((0, jsx_runtime_1.jsx)("form", { id: id, className: (0, _utils_1.cn)("flex flex-col h-full pb-8"), onSubmit: submit, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("grid grid-cols-12 gap-4 flex-1 content-start", (0, _utils_1.pcn)(className, "base")), children: [fresh && fields.map((f, i) => renderInput(f, i)), !footerControl && ((0, jsx_runtime_1.jsx)("div", { className: "hidden md:block col-span-12", children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end mt-4", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { type: "submit", label: l.base?.save ? l.base.save() : "Save", icon: "solid/save", loading: loading, className: (0, _utils_1.pcn)(className, "submit") }) }) })), !footerControl && ((0, jsx_runtime_1.jsx)("div", { className: "md:hidden col-span-12 mt-4", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { label: l.base?.save ? l.base.save() : "Save", icon: "solid/save", type: "submit", loading: loading, block: true, className: (0, _utils_1.pcn)(className, "submit") }) })), footerControl && ((0, jsx_runtime_1.jsx)("div", { className: "col-span-12", children: footerControl?.({ loading }) })), modal == "failed" && ((0, jsx_runtime_1.jsxs)("div", { className: "col-span-12 mt-4 w-full p-4 rounded-sm border border-danger bg-light-danger flex gap-4 items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "w-10 h-10 rounded-full bg-danger/20 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/exclamation-triangle", className: "text-danger text-lg" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-danger text-sm font-semibold", children: l.base.formFailed ? l.base.formFailed() : "Failed to save data, please check your data and internet connection then try again!" })] }))] }) })), (0, jsx_runtime_1.jsx)(__1.ModalConfirmComponent, { show: confirm.show, onClose: () => confirm.onClose(), title: l.base?.formConfirm ? l.base.formConfirm() : "Are you sure all data is correct?", submitControl: { onSubmit: () => confirm?.onConfirm(), paint: "primary" } })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("h4", { className: (0, _utils_1.cn)("text-lg font-semibold mb-4", (0, _utils_1.pcn)(className, "title")), children: title }), modal == "success" ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center h-full py-6 transition-all duration-300 animate-intro-down", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "text-primary text-2xl" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-primary text-lg font-semibold mt-4 mb-12", children: successMessage || l.base?.success ? l.base.success() : "Success!" })] })) : ((0, jsx_runtime_1.jsx)("form", { id: id, className: (0, _utils_1.cn)("flex flex-col h-full pb-8"), onSubmit: submit, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("grid grid-cols-12 gap-4 flex-1 content-start", (0, _utils_1.pcn)(className, "base")), children: [fresh && fields.map((f, i) => renderInput(f, i)), !footerControl && ((0, jsx_runtime_1.jsx)("div", { className: "hidden md:block col-span-12", children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end mt-4", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { type: "submit", label: l.base?.save ? l.base.save() : "Save", icon: "solid/save", loading: loading, className: (0, _utils_1.pcn)(className, "submit") }) }) })), !footerControl && ((0, jsx_runtime_1.jsx)("div", { className: "md:hidden col-span-12 mt-4", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { label: l.base?.save ? l.base.save() : "Save", icon: "solid/save", type: "submit", loading: loading, block: true, className: (0, _utils_1.pcn)(className, "submit") }) })), footerControl && ((0, jsx_runtime_1.jsx)("div", { className: "col-span-12", children: footerControl?.({ loading }) })), modal == "failed" && ((0, jsx_runtime_1.jsxs)("div", { className: "col-span-12 mt-4 w-full p-4 rounded-sm border border-danger bg-light-danger flex gap-4 items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "w-10 h-10 rounded-full bg-danger/20 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/exclamation-triangle", className: "text-danger text-lg" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-danger text-sm font-semibold", children: l.base.formFailed ? l.base.formFailed() : "Failed to save data, please check your data and internet connection then try again!" })] }))] }) })), (0, jsx_runtime_1.jsx)(__1.ModalConfirmComponent, { show: confirm.show, onClose: () => confirm.onClose(), title: l.base?.formConfirm ? l.base.formConfirm() : "Are you sure all data is correct?", submitControl: { onSubmit: () => confirm?.onConfirm(), paint: "primary" } })] }));
 }

package/dist/supervision/TableSupervision.component.js

@@ -213,10 +213,10 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
                                 } }) }, "button-add"));
                     }
                     if (cb == "IMPORT") {
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-excel", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_IMPORT_${toggleKey}`), size: "sm" }) }, "import"));
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/import", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_IMPORT_${toggleKey}`), size: "sm" }) }, "import"));
                     }
                     if (cb == "EXPORT") {
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-excel", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_EXPORT_${toggleKey}`), size: "sm" }) }, "export-excel"));
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/export", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_EXPORT_${toggleKey}`), size: "sm" }) }, "export-excel"));
                     }
                     if (cb == "PRINT") {
                         return ((0, jsx_runtime_1.jsx)("div", { className: "px-1.5 rounded-md relative", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/file-pdf", label: l.base.print ? l.base.print() : "Print", variant: "outline", className: "!text-foreground", onClick: () => setToggle(`MODAL_PRINT_${toggleKey}`), size: "sm" }) }, "export-pdf"));

package/dist/table/Table.component.js

@@ -97,7 +97,7 @@ function TableComponent({ id, controlBar, columns, data, pagination, loading, so
                     selector: c.selector,
                     type: typeof c?.filterable == "object" ? c?.filterable?.type : "text",
                     options: typeof c?.filterable == "object" && c?.filterable?.type == "select" ? c?.filterable?.options : undefined
-                })), onFilter: (filters) => onChangeFilter?.(filters), filter: filter, className: (0, _utils_1.pcn)(className, "controller-bar") || "" })), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(ScrollContainer_component_1.ScrollContainerComponent, { scrollFloating: !isSm && block, className: "w-full", onScroll: (e) => {
+                })), onFilter: (filters) => onChangeFilter?.(filters), filter: filter, className: (0, _utils_1.pcn)(className, "controller-bar") || "" })), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(ScrollContainer_component_1.ScrollContainerComponent, { scrollFloating: !isSm && block, className: `w-full ${block ? "pb-12" : ""}`, onScroll: (e) => {
                         actionColumnRef.current?.clientWidth && e.scrollLeft &&
                             setShowFloatingAction(e.scrollLeft + e.clientWidth <= e.scrollWidth - actionColumnRef.current?.clientWidth);
                     }, footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: block && pagination && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "py-6" }), (0, jsx_runtime_1.jsx)("div", { className: "my-2 absolute bottom-0 w-full", children: (0, jsx_runtime_1.jsx)(Pagination_component_1.PaginationComponent, { ...pagination }) })] })) }), children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "w-max min-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "table-loading-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-loading-text", children: l.base.tableLoading ? l.base.tableLoading() : "" }) }) })) : !data || !data.length ? ((0, jsx_runtime_1.jsx)("div", { className: "table-empty-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-empty-text", children: l.base.tableEmpty ? l.base.tableEmpty() : "Data empty" }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isSm || !responsiveControl?.mobile ? ((0, jsx_runtime_1.jsxs)("div", { className: "w-max min-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-head-row", (0, _utils_1.pcn)(className, "row")), children: [!!actionBulking && ((0, jsx_runtime_1.jsx)("div", { className: "table-head-column w-max", children: (0, jsx_runtime_1.jsx)(Checkbox_component_1.CheckboxComponent, { name: "selected_table", className: "w-5 h-5", checked: data.length > 0 && checks?.length === data.length, onChange: () => data.length > 0 && checks?.length === data.length ? onChangeChecks?.([]) : onChangeChecks?.(data.map((d) => d.id)) }) })), !noIndex && (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-head-column w-8", (0, _utils_1.pcn)(className, "head-column")), children: "#" }), renderHead()] }), (0, jsx_runtime_1.jsx)("div", { className: "table-body", children: data.map((item, key) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "Reusable UI components for Skalfa App.",
   "license": "MIT",
   "keywords": [

package/src/supervision/FormSupervision.component.tsx

@@ -333,7 +333,7 @@ export function FormSupervisionComponent({
   };
 
   useEffect(() => {
-    setModal(false)
+    (modal == "failed") &&  setModal(false)
   }, [values]);
 
   return (
@@ -345,7 +345,7 @@ export function FormSupervisionComponent({
           <div className="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center">
             <Icon icon={"solid/check"} className="text-primary text-2xl" />
           </div>
-          <p className="text-primary text-lg font-semibold mt-4">{successMessage || l.base?.success ? l.base.success() : "Success!"}</p>
+          <p className="text-primary text-lg font-semibold mt-4 mb-12">{successMessage || l.base?.success ? l.base.success() : "Success!"}</p>
         </div>
       ) : (
         <form id={id} className={cn("flex flex-col h-full pb-8")} onSubmit={submit}>

package/src/supervision/TableSupervision.component.tsx

@@ -431,7 +431,7 @@ export function TableSupervisionComponent({
               return (
                 <div className="px-1.5 rounded-md relative" key={"import"}>
                   <ButtonComponent
-                    icon={"solid/file-excel"}
+                    icon={"solid/import"}
                     variant="outline"
                     className="!text-foreground"
                     onClick={() => setToggle(`MODAL_IMPORT_${toggleKey}`)}
@@ -445,7 +445,7 @@ export function TableSupervisionComponent({
               return (
                 <div className="px-1.5 rounded-md relative" key={"export-excel"}>
                   <ButtonComponent
-                    icon={"solid/file-excel"}
+                    icon={"solid/export"}
                     variant="outline"
                     className="!text-foreground"
                     onClick={() => setToggle(`MODAL_EXPORT_${toggleKey}`)}

package/src/table/Table.component.tsx

@@ -293,7 +293,7 @@ export function TableComponent({
       <div className="relative">
         <ScrollContainerComponent
           scrollFloating={!isSm && block}
-          className="w-full"
+          className={`w-full ${block ? "pb-12" : ""}`}
           onScroll={(e) => {
             actionColumnRef.current?.clientWidth &&  e.scrollLeft &&
               setShowFloatingAction(e.scrollLeft + e.clientWidth <=  e.scrollWidth - actionColumnRef.current?.clientWidth);