@skalfa/skalfa-component 1.0.11 → 1.0.13
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.
|
@@ -64,7 +64,7 @@ function SidebarComponent({ id, head, footer, items, basePath, className = "", }
|
|
|
64
64
|
(0, react_1.useEffect)(() => {
|
|
65
65
|
setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`, false);
|
|
66
66
|
}, [pathName]);
|
|
67
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("sidebar-backdrop", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "scale-100 lg:scale-0" : "scale-0", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`) }), (0, jsx_runtime_1.jsxs)("aside", { className: (0, _utils_1.cn)("sidebar-base scroll-sm", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full sm:w-[280px]" : "w-0 sm:w-14 lg:w-[280px]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block", children: head }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "hidden" : "flex justify-center pt-4 h-full lg:hidden", onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/bars" }) }), (0, jsx_runtime_1.jsx)("nav", { className: (0, _utils_1.cn)("flex flex-col flex-1 overflow-hidden", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full" : "w-0 lg:w-full"), children: items?.map((menu_head, menu_head_key) => {
|
|
67
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("sidebar-backdrop", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "scale-100 lg:scale-0" : "scale-0", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`) }), (0, jsx_runtime_1.jsxs)("aside", { className: (0, _utils_1.cn)("sidebar-base scroll-sm", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full sm:w-[280px]" : "w-0 sm:w-14 lg:w-[280px]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block", children: head }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "hidden" : "flex justify-center pt-4 h-full lg:hidden", onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/bars" }) }), (0, jsx_runtime_1.jsx)("nav", { className: (0, _utils_1.cn)("flex flex-col flex-1 overflow-y-auto overflow-x-hidden", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full" : "w-0 lg:w-full"), children: items?.map((menu_head, menu_head_key) => {
|
|
68
68
|
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-head-item", menu_head?.collapse && "cursor-pointer", (0, _utils_1.pcn)(className, "head-item"), menu_head?.className), onClick: () => setShow(String(menu_head_key)), children: [menu_head?.label, menu_head.collapse && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-down", className: (0, _utils_1.cn)(checkShow(String(menu_head_key)) && "rotate-180") }))] }), (!menu_head?.collapse || checkShow(String(menu_head_key))) &&
|
|
69
69
|
menu_head?.items?.map((menu, menu_key) => {
|
|
70
70
|
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarWrapper, { path: menu?.path ? `${basePath || ""}${menu?.path}` : "", onClick: () => setShow(`${menu_head_key}.${menu_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-item", menu?.path && cekActive(menu?.path || "") && "sidebar-item-active", (0, _utils_1.pcn)(className, "item"), menu?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: menu?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.rightContent, menu?.items?.length && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-up", className: `text-[10px] ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: menu?.items?.length &&
|
|
@@ -92,15 +92,15 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
92
92
|
} }, key));
|
|
93
93
|
}
|
|
94
94
|
if (typeof action == "object") {
|
|
95
|
-
(0, jsx_runtime_1.jsx)(__1.ButtonComponent, { label: action?.button?.label || action?.label, variant: action?.button?.variant || "outline", paint: action?.button?.paint || "primary", size: action?.button?.size || options?.size || "xs", rounded: action?.button?.rounded || true, onClick: () => {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
95
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.ButtonComponent, { label: action?.button?.label || action?.label, variant: action?.button?.variant || "outline", paint: action?.button?.paint || "primary", size: action?.button?.size || options?.size || "xs", rounded: action?.button?.rounded || true, className: action?.button?.className, onClick: () => {
|
|
96
|
+
if (action?.button?.onClick) {
|
|
97
|
+
action?.button?.onClick(item);
|
|
98
|
+
}
|
|
99
|
+
else {
|
|
100
|
+
setToggle(`MODAL_${_utils_1.conversion.strSnake(action?.label).toUpperCase()}_${toggleKey}`);
|
|
101
|
+
item && setSelected?.(item);
|
|
102
|
+
}
|
|
103
|
+
} }, `action-object-${key}`), ...action.button] }));
|
|
104
104
|
}
|
|
105
105
|
if (typeof action == "function") {
|
|
106
106
|
return ((0, jsx_runtime_1.jsx)("span", { children: action(item || {}, (type) => {
|
|
@@ -275,7 +275,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
|
|
|
275
275
|
},
|
|
276
276
|
} }), actionControl && Array.isArray(actionControl) && actionControl.filter((ac) => typeof ac == "object")?.map((ac, acKey) => {
|
|
277
277
|
const submitControl = ac.modal?.submitControl?.onSubmit;
|
|
278
|
-
return ((0, jsx_runtime_1.jsx)(__1.ModalConfirmComponent, { show: !!toggle[`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`], onClose: () => setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`, false), title: ac?.modal?.title || ac.label, submitControl: {
|
|
278
|
+
return ((0, jsx_runtime_1.jsx)(__1.ModalConfirmComponent, { show: !!toggle[`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`], onClose: () => setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`, false), title: ac?.modal?.title || ac.label, className: ac?.modal?.className, submitControl: {
|
|
279
279
|
onSubmit: {
|
|
280
280
|
...(submitControl?.path
|
|
281
281
|
? { path: `${submitControl?.path}/${selected?.id || ""}` }
|
package/package.json
CHANGED
|
@@ -154,7 +154,7 @@ export function SidebarComponent({
|
|
|
154
154
|
</div>
|
|
155
155
|
|
|
156
156
|
<nav className={cn(
|
|
157
|
-
"flex flex-col flex-1 overflow-hidden",
|
|
157
|
+
"flex flex-col flex-1 overflow-y-auto overflow-x-hidden",
|
|
158
158
|
toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full" : "w-0 lg:w-full",
|
|
159
159
|
)}>
|
|
160
160
|
{items?.map((menu_head, menu_head_key) => {
|
|
@@ -222,23 +222,28 @@ export function TableSupervisionComponent({
|
|
|
222
222
|
}
|
|
223
223
|
|
|
224
224
|
if(typeof action == "object") {
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
action?.button?.
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
225
|
+
return (
|
|
226
|
+
<>
|
|
227
|
+
<ButtonComponent
|
|
228
|
+
key={`action-object-${key}`}
|
|
229
|
+
label={action?.button?.label || action?.label}
|
|
230
|
+
variant={action?.button?.variant || "outline"}
|
|
231
|
+
paint={action?.button?.paint || "primary"}
|
|
232
|
+
size={action?.button?.size || options?.size || "xs"}
|
|
233
|
+
rounded={action?.button?.rounded || true}
|
|
234
|
+
className={action?.button?.className}
|
|
235
|
+
onClick={() => {
|
|
236
|
+
if (action?.button?.onClick) {
|
|
237
|
+
action?.button?.onClick(item)
|
|
238
|
+
} else {
|
|
239
|
+
setToggle(`MODAL_${conversion.strSnake(action?.label).toUpperCase()}_${toggleKey}`);
|
|
240
|
+
item && setSelected?.(item);
|
|
241
|
+
}
|
|
242
|
+
}}
|
|
243
|
+
/>
|
|
244
|
+
{...action.button}
|
|
245
|
+
</>
|
|
246
|
+
)
|
|
242
247
|
}
|
|
243
248
|
|
|
244
249
|
if(typeof action == "function") {
|
|
@@ -629,6 +634,7 @@ export function TableSupervisionComponent({
|
|
|
629
634
|
show={!!toggle[`MODAL_${conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`]}
|
|
630
635
|
onClose={() => setToggle(`MODAL_${conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`, false)}
|
|
631
636
|
title={ac?.modal?.title || ac.label}
|
|
637
|
+
className={ac?.modal?.className}
|
|
632
638
|
submitControl={{
|
|
633
639
|
onSubmit: {
|
|
634
640
|
...(submitControl?.path
|