@esic-lab/data-core-ui 0.0.52 → 0.0.54

package/dist/index.css

@@ -433,9 +433,6 @@
   .h-\[10px\] {
     height: 10px;
   }
-  .h-\[15px\] {
-    height: 15px;
-  }
   .h-\[16px\] {
     height: 16px;
   }
@@ -535,9 +532,6 @@
   .w-\[10px\] {
     width: 10px;
   }
-  .w-\[15px\] {
-    width: 15px;
-  }
   .w-\[16px\] {
     width: 16px;
   }
@@ -556,9 +550,6 @@
   .w-\[40px\] {
     width: 40px;
   }
-  .w-\[75\%\] {
-    width: 75%;
-  }
   .w-\[80px\] {
     width: 80px;
   }
@@ -577,6 +568,9 @@
   .w-\[250px\] {
     width: 250px;
   }
+  .w-\[400px\] {
+    width: 400px;
+  }
   .w-\[500px\] {
     width: 500px;
   }
@@ -595,9 +589,6 @@
   .min-w-\[261px\] {
     min-width: 261px;
   }
-  .min-w-\[400px\] {
-    min-width: 400px;
-  }
   .flex-1 {
     flex: 1;
   }
@@ -809,9 +800,6 @@
   .rounded-\[2px\] {
     border-radius: 2px;
   }
-  .rounded-\[4px\] {
-    border-radius: 4px;
-  }
   .rounded-\[6px\] {
     border-radius: 6px;
   }
@@ -1025,9 +1013,6 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .px-\[8px\] {
-    padding-inline: 8px;
-  }
   .px-\[16px\] {
     padding-inline: 16px;
   }
@@ -1046,9 +1031,6 @@
   .py-\[2px\] {
     padding-block: 2px;
   }
-  .py-\[4px\] {
-    padding-block: 4px;
-  }
   .py-\[8px\] {
     padding-block: 8px;
   }
@@ -1058,9 +1040,15 @@
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-\[16px\] {
+    padding-top: 16px;
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-\[16px\] {
+    padding-bottom: 16px;
+  }
   .text-center {
     text-align: center;
   }
@@ -1396,6 +1384,13 @@
       }
     }
   }
+  .hover\:cursor-pointer {
+    &:hover {
+      @media (hover: hover) {
+        cursor: pointer;
+      }
+    }
+  }
   .hover\:border-primary-200 {
     &:hover {
       @media (hover: hover) {
@@ -1431,6 +1426,13 @@
       }
     }
   }
+  .hover\:bg-primary-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-primary-50);
+      }
+    }
+  }
   .hover\:bg-red-100 {
     &:hover {
       @media (hover: hover) {
@@ -1480,13 +1482,6 @@
       }
     }
   }
-  .hover\:text-red-500 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-red-500);
-      }
-    }
-  }
   .hover\:text-red-700 {
     &:hover {
       @media (hover: hover) {

package/dist/index.d.mts

@@ -443,9 +443,10 @@ interface SortFilterProps {
 declare function SortFilter({ showYear, showQuarter, showMonth, onSortClick, onFilterClick, }: SortFilterProps): react_jsx_runtime.JSX.Element;
 
 interface FileUploaderProps {
-    onUpload: (file: File) => Promise<void>;
+    onUpload: (file: any) => Promise<void>;
     onRemove?: (index: number) => Promise<void>;
     onError?: (message: string) => void;
+    onClickFile?: (file: any) => void;
     accept?: string[];
     maxSize?: number;
     disabled?: boolean;
@@ -454,8 +455,11 @@ interface FileUploaderProps {
     label?: string;
     value?: File[] | any[];
     uploadText?: string;
+    uploaderWidth?: string;
+    attachWidth?: string;
+    readOnly?: boolean;
 }
-declare function FileUploader({ onUpload, onError, onRemove, accept, maxSize, disabled, mode, description, label, value, uploadText, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
+declare function FileUploader({ onUpload, onError, onRemove, onClickFile, accept, maxSize, disabled, mode, description, label, value, uploadText, uploaderWidth, attachWidth, readOnly, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
 
 declare function setMessageApi(api: MessageInstance): void;
 declare function messageSuccess(content: string): void;

package/dist/index.d.ts

@@ -443,9 +443,10 @@ interface SortFilterProps {
 declare function SortFilter({ showYear, showQuarter, showMonth, onSortClick, onFilterClick, }: SortFilterProps): react_jsx_runtime.JSX.Element;
 
 interface FileUploaderProps {
-    onUpload: (file: File) => Promise<void>;
+    onUpload: (file: any) => Promise<void>;
     onRemove?: (index: number) => Promise<void>;
     onError?: (message: string) => void;
+    onClickFile?: (file: any) => void;
     accept?: string[];
     maxSize?: number;
     disabled?: boolean;
@@ -454,8 +455,11 @@ interface FileUploaderProps {
     label?: string;
     value?: File[] | any[];
     uploadText?: string;
+    uploaderWidth?: string;
+    attachWidth?: string;
+    readOnly?: boolean;
 }
-declare function FileUploader({ onUpload, onError, onRemove, accept, maxSize, disabled, mode, description, label, value, uploadText, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
+declare function FileUploader({ onUpload, onError, onRemove, onClickFile, accept, maxSize, disabled, mode, description, label, value, uploadText, uploaderWidth, attachWidth, readOnly, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
 
 declare function setMessageApi(api: MessageInstance): void;
 declare function messageSuccess(content: string): void;

package/dist/index.js

@@ -3007,6 +3007,7 @@ function FileUploader({
   onUpload,
   onError,
   onRemove,
+  onClickFile,
   accept,
   maxSize,
   disabled,
@@ -3014,7 +3015,10 @@ function FileUploader({
   description,
   label,
   value,
-  uploadText = "\u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
+  uploadText = "\u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C",
+  uploaderWidth = "w-full",
+  attachWidth = "w-full",
+  readOnly = false
 }) {
   const [internalFileList, setInternalFileList] = (0, import_react14.useState)([]);
   const [uploading, setUploading] = (0, import_react14.useState)(false);
@@ -3086,7 +3090,7 @@ function FileUploader({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "w-full", children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "body-1", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: uploaderWidth, children: [
       mode === "upload" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "button",
         {
@@ -3107,7 +3111,7 @@ function FileUploader({
       ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "div",
         {
-          className: `min-w-[400px] min-h-[120px] flex  justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
+          className: `w-full min-h-[120px] flex  justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
         ${dragActive ? "border-primary-500 bg-primary-50" : "border-gray-300 bg-white"}
         ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
       `,
@@ -3142,20 +3146,35 @@ function FileUploader({
       )
     ] }),
     description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-gray-400 body-4", children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-[8px]", children: filesToDisplay.length !== 0 && filesToDisplay.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons_react10.IconPaperclip, { size: 15 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "truncate", children: file.name || file.fileName })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        import_icons_react10.IconTrash,
-        {
-          size: 20,
-          className: "ml-auto hover:text-red-500 cursor-pointer",
-          onClick: () => handleRemoveFile(index)
-        }
-      )
-    ] }, index)) })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `mt-[8px] ${attachWidth}`, children: filesToDisplay.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col rounded-[6px] body-1 border-[1px] border-gray-300", children: filesToDisplay.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      "div",
+      {
+        className: `flex px-[16px] hover:bg-primary-50 hover:cursor-pointer
+                ${index === 0 ? "pt-[16px]" : ""}
+                ${filesToDisplay.length - 1 === index ? "pb-[16px]" : ""}
+                ${filesToDisplay?.length - 1 !== index ? "border-b pb-[16px]" : ""} 
+                ${index !== 0 ? "pt-[16px]" : ""}`,
+        onClick: () => onClickFile && onClickFile(file),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex gap-2 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-[24px] h-[24px] flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons_react10.IconFileDescription, { size: 20 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "truncate", children: file.name || file.fileName })
+          ] }),
+          !readOnly && !disabled && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            import_icons_react10.IconTrash,
+            {
+              size: 20,
+              className: "ml-auto text-red-500 cursor-pointer",
+              onClick: (e) => {
+                e.stopPropagation();
+                handleRemoveFile(index);
+              }
+            }
+          )
+        ]
+      },
+      index
+    )) }) })
   ] });
 }
 

package/dist/index.mjs

@@ -2939,13 +2939,14 @@ function SortFilter({
 }
 
 // src/Upload/FileUploader/FileUploader.tsx
-import { IconPaperclip, IconUpload, IconTrash as IconTrash2 } from "@tabler/icons-react";
+import { IconUpload, IconTrash as IconTrash2, IconFileDescription } from "@tabler/icons-react";
 import { useRef as useRef4, useState as useState12 } from "react";
 import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
 function FileUploader({
   onUpload,
   onError,
   onRemove,
+  onClickFile,
   accept,
   maxSize,
   disabled,
@@ -2953,7 +2954,10 @@ function FileUploader({
   description,
   label,
   value,
-  uploadText = "\u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
+  uploadText = "\u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C",
+  uploaderWidth = "w-full",
+  attachWidth = "w-full",
+  readOnly = false
 }) {
   const [internalFileList, setInternalFileList] = useState12([]);
   const [uploading, setUploading] = useState12(false);
@@ -3025,7 +3029,7 @@ function FileUploader({
   };
   return /* @__PURE__ */ jsxs30("div", { className: "w-full", children: [
     label && /* @__PURE__ */ jsx34("p", { className: "body-1", children: label }),
-    /* @__PURE__ */ jsxs30("div", { children: [
+    !readOnly && /* @__PURE__ */ jsxs30("div", { className: uploaderWidth, children: [
       mode === "upload" ? /* @__PURE__ */ jsx34(
         "button",
         {
@@ -3046,7 +3050,7 @@ function FileUploader({
       ) : /* @__PURE__ */ jsx34(
         "div",
         {
-          className: `min-w-[400px] min-h-[120px] flex  justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
+          className: `w-full min-h-[120px] flex  justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
         ${dragActive ? "border-primary-500 bg-primary-50" : "border-gray-300 bg-white"}
         ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
       `,
@@ -3081,20 +3085,35 @@ function FileUploader({
       )
     ] }),
     description && /* @__PURE__ */ jsx34("p", { className: "text-gray-400 body-4", children: description }),
-    /* @__PURE__ */ jsx34("div", { className: "mt-[8px]", children: filesToDisplay.length !== 0 && filesToDisplay.map((file, index) => /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
-      /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
-        /* @__PURE__ */ jsx34("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx34(IconPaperclip, { size: 15 }) }),
-        /* @__PURE__ */ jsx34("span", { className: "truncate", children: file.name || file.fileName })
-      ] }),
-      /* @__PURE__ */ jsx34(
-        IconTrash2,
-        {
-          size: 20,
-          className: "ml-auto hover:text-red-500 cursor-pointer",
-          onClick: () => handleRemoveFile(index)
-        }
-      )
-    ] }, index)) })
+    /* @__PURE__ */ jsx34("div", { className: `mt-[8px] ${attachWidth}`, children: filesToDisplay.length !== 0 && /* @__PURE__ */ jsx34("div", { className: "flex flex-col rounded-[6px] body-1 border-[1px] border-gray-300", children: filesToDisplay.map((file, index) => /* @__PURE__ */ jsxs30(
+      "div",
+      {
+        className: `flex px-[16px] hover:bg-primary-50 hover:cursor-pointer
+                ${index === 0 ? "pt-[16px]" : ""}
+                ${filesToDisplay.length - 1 === index ? "pb-[16px]" : ""}
+                ${filesToDisplay?.length - 1 !== index ? "border-b pb-[16px]" : ""} 
+                ${index !== 0 ? "pt-[16px]" : ""}`,
+        onClick: () => onClickFile && onClickFile(file),
+        children: [
+          /* @__PURE__ */ jsxs30("div", { className: "flex gap-2 overflow-hidden", children: [
+            /* @__PURE__ */ jsx34("div", { className: "w-[24px] h-[24px] flex items-center justify-center", children: /* @__PURE__ */ jsx34(IconFileDescription, { size: 20 }) }),
+            /* @__PURE__ */ jsx34("span", { className: "truncate", children: file.name || file.fileName })
+          ] }),
+          !readOnly && !disabled && /* @__PURE__ */ jsx34(
+            IconTrash2,
+            {
+              size: 20,
+              className: "ml-auto text-red-500 cursor-pointer",
+              onClick: (e) => {
+                e.stopPropagation();
+                handleRemoveFile(index);
+              }
+            }
+          )
+        ]
+      },
+      index
+    )) }) })
   ] });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",