@skalfa/skalfa-component 1.0.30 → 1.0.32

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 (8) hide show
  1. package/dist/nav/Sidebar.component.d.ts +3 -1
  2. package/dist/nav/Sidebar.component.js +5 -5
  3. package/dist/supervision/TableSupervision.component.js +10 -0
  4. package/dist/table/ControlBar.component.js +1 -1
  5. package/package.json +1 -1
  6. package/src/nav/Sidebar.component.tsx +8 -1
  7. package/src/supervision/TableSupervision.component.tsx +10 -0
  8. package/src/table/ControlBar.component.tsx +1 -1
package/dist/nav/Sidebar.component.d.ts CHANGED
@@ -5,6 +5,7 @@ export interface SidebarItemProps {
5
5
  leftContent?: any;
6
6
  rightContent?: any;
7
7
  path?: string;
8
+ prefetch?: boolean;
8
9
  items?: SidebarItemProps[];
9
10
  className?: string;
10
11
  }
@@ -20,10 +21,11 @@ export interface sidebarProps {
20
21
  footer?: any;
21
22
  items?: SidebarHeadItemProps[];
22
23
  basePath?: string;
24
+ prefetch?: boolean;
23
25
  /** Use custom class with: "backdrop::", "head-item::", "item::", "child-item::". */
24
26
  className?: string;
25
27
  }
26
- export declare function SidebarComponent({ id, head, footer, items, basePath, className, }: sidebarProps): import("@types/react").JSX.Element;
28
+ export declare function SidebarComponent({ id, head, footer, items, basePath, prefetch, className, }: sidebarProps): import("@types/react").JSX.Element;
27
29
  export declare function SidebarContentComponent({ children }: {
28
30
  children: ReactNode;
29
31
  }): import("@types/react").JSX.Element;
package/dist/nav/Sidebar.component.js CHANGED
@@ -16,15 +16,15 @@ const skalfa_icon_1 = require("@skalfa/skalfa-icon");
16
16
  ;
17
17
  ;
18
18
  ;
19
- function SidebarWrapper({ path, children, onClick, }) {
19
+ function SidebarWrapper({ path, prefetch, children, onClick, }) {
20
20
  if (path) {
21
- return (0, jsx_runtime_1.jsx)(link_1.default, { href: path, children: children });
21
+ return (0, jsx_runtime_1.jsx)(link_1.default, { href: path, prefetch: prefetch, onClick: () => onClick?.(), children: children });
22
22
  }
23
23
  else {
24
24
  return (0, jsx_runtime_1.jsx)("div", { onClick: () => onClick?.(), children: children });
25
25
  }
26
26
  }
27
- function SidebarComponent({ id, head, footer, items, basePath, className = "", }) {
27
+ function SidebarComponent({ id, head, footer, items, basePath, prefetch, className = "", }) {
28
28
  const pathName = (0, navigation_1.usePathname)();
29
29
  const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
30
30
  const [shows, setShows] = (0, react_1.useState)([]);
@@ -67,12 +67,12 @@ function SidebarComponent({ id, head, footer, items, basePath, className = "", }
67
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
- 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 &&
70
+ return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarWrapper, { path: menu?.path ? `${basePath || ""}${menu?.path}` : "", prefetch: menu?.prefetch ?? prefetch, 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 &&
71
71
  checkShow(`${menu_head_key}.${menu_key}`) &&
72
72
  menu?.items?.map((child, menu_child_key) => {
73
73
  return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(SidebarWrapper, { path: child?.path
74
74
  ? `${basePath || ""}${child?.path}`
75
- : "", onClick: () => setShow(`${menu_head_key}.${menu_key}.${menu_child_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-child-item", child?.path &&
75
+ : "", prefetch: child?.prefetch ?? menu?.prefetch ?? prefetch, onClick: () => setShow(`${menu_head_key}.${menu_key}.${menu_child_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-child-item", child?.path &&
76
76
  cekActive(child?.path || "") &&
77
77
  "sidebar-child-item-active", (0, _utils_1.pcn)(className, "child-item"), child?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [child?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-medium", children: child?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [child?.rightContent, child?.items?.length && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-up", className: `block text-[10px] ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }) }, `${menu_head_key}.${menu_key}.${menu_child_key}`));
78
78
  }) }) })] }, `${menu_head_key}.${menu_key}`));
package/dist/supervision/TableSupervision.component.js CHANGED
@@ -191,9 +191,19 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
191
191
  return ((0, jsx_runtime_1.jsx)(__1.FormSupervisionComponent, { submitControl: fetchControl.path ? {
192
192
  path: `${fetchControl.path}/${selected?.id || ""}`,
193
193
  method: !selected?.id ? "POST" : "PUT",
194
+ bearer: fetchControl.bearer,
195
+ headers: {
196
+ ...fetchControl.headers,
197
+ ...(formControl?.contentType ? { "Content-Type": formControl.contentType } : {}),
198
+ },
194
199
  } : fetchControl.url ? {
195
200
  url: `${fetchControl.url}/${selected?.id || ""}`,
196
201
  method: !selected?.id ? "POST" : "PUT",
202
+ bearer: fetchControl.bearer,
203
+ headers: {
204
+ ...fetchControl.headers,
205
+ ...(formControl?.contentType ? { "Content-Type": formControl.contentType } : {}),
206
+ },
197
207
  } : { idb: fetchControl?.idb }, fields: fields?.filter((f) => f.visibility ? !selected?.id ? ["*", "create"]?.includes(f.visibility) : ["*", "update"]?.includes(f.visibility) : true), defaultValue: formControl?.defaultValue ? await formControl?.defaultValue(selected || null) : selected, payload: formControl?.payload, onSuccess: () => {
198
208
  reset();
199
209
  setTimeout(() => { setToggle(`MODAL_FORM_${toggleKey}`, false); }, 900);
package/dist/table/ControlBar.component.js CHANGED
@@ -71,7 +71,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
71
71
  }
72
72
  };
73
73
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("control-bar", className), children: (isSm ? [
74
- ...(options?.filter((op) => op == "SEARCH" || op == "REFRESH") || []),
74
+ ...(options?.filter((op) => op == "SEARCH") || []),
75
75
  ...(options && options?.length > 1 ? ['MOBILE_OPTION'] : [])
76
76
  ] : options)?.map((option, key) => {
77
77
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skalfa/skalfa-component",
3
- "version": "1.0.30",
3
+ "version": "1.0.32",
4
4
  "description": "Reusable UI components for Skalfa App.",
5
5
  "license": "MIT",
6
6
  "keywords": [
package/src/nav/Sidebar.component.tsx CHANGED
@@ -17,6 +17,7 @@ export interface SidebarItemProps {
17
17
  leftContent ?: any;
18
18
  rightContent ?: any;
19
19
  path ?: string;
20
+ prefetch ?: boolean;
20
21
  items ?: SidebarItemProps[];
21
22
  className ?: string;
22
23
  };
@@ -34,6 +35,7 @@ export interface sidebarProps {
34
35
  footer ?: any;
35
36
  items ?: SidebarHeadItemProps[];
36
37
  basePath ?: string;
38
+ prefetch ?: boolean;
37
39
 
38
40
  /** Use custom class with: "backdrop::", "head-item::", "item::", "child-item::". */
39
41
  className?: string;
@@ -41,6 +43,7 @@ export interface sidebarProps {
41
43
 
42
44
  interface sidebarWrapperProps {
43
45
  path ?: string;
46
+ prefetch ?: boolean;
44
47
  onClick ?: () => void;
45
48
  children ?: any;
46
49
  }
@@ -50,11 +53,12 @@ interface sidebarWrapperProps {
50
53
 
51
54
  function SidebarWrapper({
52
55
  path,
56
+ prefetch,
53
57
  children,
54
58
  onClick,
55
59
  } : sidebarWrapperProps) {
56
60
  if (path) {
57
- return <Link href={path}>{children}</Link>;
61
+ return <Link href={path} prefetch={prefetch} onClick={() => onClick?.()}>{children}</Link>;
58
62
  } else {
59
63
  return <div onClick={() => onClick?.()}>{children}</div>;
60
64
  }
@@ -68,6 +72,7 @@ export function SidebarComponent({
68
72
  footer,
69
73
  items,
70
74
  basePath,
75
+ prefetch,
71
76
  className = "",
72
77
  } : sidebarProps) {
73
78
  const pathName = usePathname();
@@ -189,6 +194,7 @@ export function SidebarComponent({
189
194
  path={
190
195
  menu?.path ? `${basePath || ""}${menu?.path}` : ""
191
196
  }
197
+ prefetch={menu?.prefetch ?? prefetch}
192
198
  onClick={() =>
193
199
  setShow(`${menu_head_key}.${menu_key}`)
194
200
  }
@@ -238,6 +244,7 @@ export function SidebarComponent({
238
244
  ? `${basePath || ""}${child?.path}`
239
245
  : ""
240
246
  }
247
+ prefetch={child?.prefetch ?? menu?.prefetch ?? prefetch}
241
248
  onClick={() =>
242
249
  setShow(
243
250
  `${menu_head_key}.${menu_key}.${menu_child_key}`,
package/src/supervision/TableSupervision.component.tsx CHANGED
@@ -379,9 +379,19 @@ export function TableSupervisionComponent({
379
379
  submitControl={(fetchControl as ApiType).path ? {
380
380
  path : `${(fetchControl as ApiType).path}/${(selected as { id: number })?.id || "" }`,
381
381
  method : !(selected as { id: number })?.id ? "POST" : "PUT",
382
+ bearer : (fetchControl as ApiType).bearer,
383
+ headers : {
384
+ ...(fetchControl as ApiType).headers,
385
+ ...(formControl?.contentType ? { "Content-Type": formControl.contentType } : {}),
386
+ },
382
387
  } : (fetchControl as ApiType).url ? {
383
388
  url : `${(fetchControl as ApiType).url}/${(selected as { id: number })?.id || ""}`,
384
389
  method : !(selected as { id: number })?.id ? "POST" : "PUT",
390
+ bearer : (fetchControl as ApiType).bearer,
391
+ headers : {
392
+ ...(fetchControl as ApiType).headers,
393
+ ...(formControl?.contentType ? { "Content-Type": formControl.contentType } : {}),
394
+ },
385
395
  } : { idb: (fetchControl as ({ idb: UseResourceIdb }))?.idb }
386
396
  }
387
397
  fields={fields?.filter((f: any) => f.visibility ? !(selected as { id: number })?.id ? ["*", "create"]?.includes(f.visibility) : ["*", "update"]?.includes(f.visibility) : true) as FormType[]}
package/src/table/ControlBar.component.tsx CHANGED
@@ -123,7 +123,7 @@ export function ControlBarComponent({
123
123
  <>
124
124
  <div className={cn("control-bar", className)}>
125
125
  {(isSm ? [
126
- ...(options?.filter((op) => op == "SEARCH" || op == "REFRESH") || []),
126
+ ...(options?.filter((op) => op == "SEARCH") || []),
127
127
  ...(options && options?.length > 1 ? ['MOBILE_OPTION'] : [])
128
128
  ] : options)?.map((option: ControlBarOptionType, key: number) => {
129
129
  {