@skalfa/skalfa-component 1.0.40 → 1.0.42

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 (5) hide show
  1. package/dist/input/InputImage.component.js +1 -1
  2. package/dist/nav/Sidebar.component.js +1 -1
  3. package/package.json +1 -1
  4. package/src/input/InputImage.component.tsx +1 -1
  5. package/src/nav/Sidebar.component.tsx +1 -1
package/dist/input/InputImage.component.js CHANGED
@@ -99,7 +99,7 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect, invali
99
99
  }, onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => {
100
100
  e.preventDefault();
101
101
  setDrag(true);
102
- }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [preview && !containerAspect ? ((0, jsx_runtime_1.jsxs)("div", { className: "relative group w-full h-full flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)("img", { src: preview, alt: "Preview", className: "w-full h-auto max-h-[400px] object-contain rounded-lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center text-white rounded-lg", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/images", className: "text-3xl mb-2" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-center", children: "Klik atau seret untuk ganti Gambar" })] })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: drag ? "solid/hand-holding" : "solid/images", className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] })), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-max", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), onDone: onCropDone }) })) }))] }));
102
+ }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [preview && !containerAspect ? ((0, jsx_runtime_1.jsxs)("div", { className: "relative group w-full h-full flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)("img", { src: preview, alt: "Preview", className: "w-full h-auto max-h-[400px] object-contain rounded-lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center text-white rounded-lg", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/images", className: "text-3xl mb-2" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-center", children: "Klik atau seret untuk ganti Gambar" })] })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: drag ? "solid/hand-holding" : "solid/images", className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] })), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-fit max-w-[90vw]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), onDone: onCropDone }) })) }))] }));
103
103
  };
104
104
  exports.InputImageComponent = InputImageComponent;
105
105
  const CanvasCropper = ({ src, aspect, onDone, }) => {
package/dist/nav/Sidebar.component.js CHANGED
@@ -64,7 +64,7 @@ function SidebarComponent({ id, head, footer, items, basePath, prefetch, classNa
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-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) => {
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()}`] ? "sidebar-active" : "sidebar-inactive", (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}` : "", 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 &&
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skalfa/skalfa-component",
3
- "version": "1.0.40",
3
+ "version": "1.0.42",
4
4
  "description": "Reusable UI components for Skalfa App.",
5
5
  "license": "MIT",
6
6
  "keywords": [
package/src/input/InputImage.component.tsx CHANGED
@@ -237,7 +237,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
237
237
  )}
238
238
 
239
239
  {!isSm ? (
240
- <ModalComponent show={openCrop} onClose={onCropCancel} title="Sesuaikan Gambar" className="w-max">
240
+ <ModalComponent show={openCrop} onClose={onCropCancel} title="Sesuaikan Gambar" className="w-fit max-w-[90vw]">
241
241
  {cropSrc && (
242
242
  <div className="p-4">
243
243
  <CanvasCropper
package/src/nav/Sidebar.component.tsx CHANGED
@@ -143,7 +143,7 @@ export function SidebarComponent({
143
143
  <aside
144
144
  className={cn(
145
145
  "sidebar-base scroll-sm",
146
- toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full sm:w-[280px]" : "w-0 sm:w-14 lg:w-[280px]",
146
+ toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "sidebar-active" : "sidebar-inactive",
147
147
  pcn<CT>(className, "base"),
148
148
  )}
149
149
  >