@fctc/sme-widget-ui 2.1.5 → 2.1.7

package/dist/index.js

@@ -9961,7 +9961,8 @@ var vi_default = {
   upload_file_placeholder: "T\u1EA3i t\u1EC7p c\u1EE7a b\u1EA1n",
   "no-available": "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn n\xE0o",
   paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 \u0111\xF3ng",
-  remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i"
+  remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i",
+  only_image_accept: "Ch\u1EC9 \u0111\u01B0\u1EE3c upload file h\xECnh \u1EA3nh"
 };
 
 // src/locales/en.json
@@ -10010,7 +10011,8 @@ var en_default = {
   upload_file_placeholder: "Upload your file",
   "no-available": "No options available",
   paid_amount: "Amount Paid",
-  remanining_amount: "Amount Remaining"
+  remanining_amount: "Amount Remaining",
+  only_image_accept: "Only accept image"
 };
 
 // src/utils/i18n.ts
@@ -16863,6 +16865,7 @@ var BinaryField = (props) => {
     isEditTable,
     widget,
     string,
+    value,
     // from hook
     placeHolderImage,
     inputId,
@@ -16871,13 +16874,18 @@ var BinaryField = (props) => {
     handleFileChange,
     handleRemoveFile,
     checkIsImageLink: checkIsImageLink2,
-    onDownload
+    onDownload,
+    setInitialFile
   } = props;
   const { t: t3 } = useI18n();
   const [fileInfo, setFileInfo] = (0, import_react39.useState)(null);
+  const onlyImage = widget === "image" || widget === "image_url";
+  (0, import_react39.useEffect)(() => {
+    setInitialFile(value);
+  }, [value]);
   (0, import_react39.useEffect)(() => {
     const loadFromLink = async () => {
-      if (!initialFile) return;
+      if (!initialFile || !initialFile.startsWith("http")) return;
       if (typeof initialFile !== "string") {
         setFileInfo(initialFile);
         return;
@@ -16886,10 +16894,11 @@ var BinaryField = (props) => {
         let type = "application/octet-stream";
         let size4 = 0;
         let name3 = formValues?.[filename ?? ""] || initialFile.split("/").pop() || "unknown_file";
-        if (checkIsImageLink2(initialFile)) {
+        if (checkIsImageLink2(initialFile) || onlyImage) {
           type = "image/*";
         } else {
           const response = await fetch(initialFile);
+          console.log("responsessss", response);
           const responseBlob = await response.blob();
           if (responseBlob) {
             type = responseBlob?.type;
@@ -16912,6 +16921,11 @@ var BinaryField = (props) => {
   const handleChange = (e3, onChange2) => {
     const file = e3.target.files?.[0];
     if (!file) return;
+    if (onlyImage && !file.type.startsWith("image/")) {
+      methods?.setError(t3("only_image_accept"));
+      e3.target.value = "";
+      return;
+    }
     const isImage = file.type.startsWith("image/");
     const preview = isImage ? URL.createObjectURL(file) : null;
     const normalized = {
@@ -16935,7 +16949,11 @@ var BinaryField = (props) => {
         {
           src: url,
           alt: name3,
-          className: `w-full h-full  rounded-lg object-contain ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`
+          className: `w-full h-full  rounded-lg object-contain ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`,
+          style: {
+            maxWidth: isEditTable ? "40px" : "128px",
+            maxHeight: isEditTable ? "40px" : "128px"
+          }
         }
       );
     if (type?.startsWith("video/"))
@@ -16944,6 +16962,10 @@ var BinaryField = (props) => {
         {
           src: url,
           className: `rounded-lg object-cover ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`,
+          style: {
+            maxWidth: isEditTable ? "40px" : "128px",
+            maxHeight: isEditTable ? "40px" : "128px"
+          },
           controls: true
         }
       );
@@ -16959,12 +16981,20 @@ var BinaryField = (props) => {
     return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex items-center gap-2", children: [
       getFileIcon(),
       /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "text-sm font-medium text-gray-600 truncate max-w-[120px]", children: name3 }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          "p",
+          {
+            style: {
+              maxWidth: "120px"
+            },
+            className: "text-sm font-medium text-gray-600 truncate max-w-[120px]",
+            children: name3
+          }
+        ),
         isShowSize && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-xs text-[#666] font-semibold", children: formatFileSize(size4) })
       ] })
     ] });
   };
-  const onlyImage = widget === "image" || widget === "image_url";
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     Controller,
     {

package/dist/index.mjs

@@ -9836,7 +9836,8 @@ var vi_default = {
   upload_file_placeholder: "T\u1EA3i t\u1EC7p c\u1EE7a b\u1EA1n",
   "no-available": "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn n\xE0o",
   paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 \u0111\xF3ng",
-  remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i"
+  remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i",
+  only_image_accept: "Ch\u1EC9 \u0111\u01B0\u1EE3c upload file h\xECnh \u1EA3nh"
 };
 
 // src/locales/en.json
@@ -9885,7 +9886,8 @@ var en_default = {
   upload_file_placeholder: "Upload your file",
   "no-available": "No options available",
   paid_amount: "Amount Paid",
-  remanining_amount: "Amount Remaining"
+  remanining_amount: "Amount Remaining",
+  only_image_accept: "Only accept image"
 };
 
 // src/utils/i18n.ts
@@ -16738,6 +16740,7 @@ var BinaryField = (props) => {
     isEditTable,
     widget,
     string,
+    value,
     // from hook
     placeHolderImage,
     inputId,
@@ -16746,13 +16749,18 @@ var BinaryField = (props) => {
     handleFileChange,
     handleRemoveFile,
     checkIsImageLink: checkIsImageLink2,
-    onDownload
+    onDownload,
+    setInitialFile
   } = props;
   const { t: t3 } = useI18n();
   const [fileInfo, setFileInfo] = useState11(null);
+  const onlyImage = widget === "image" || widget === "image_url";
+  useEffect11(() => {
+    setInitialFile(value);
+  }, [value]);
   useEffect11(() => {
     const loadFromLink = async () => {
-      if (!initialFile) return;
+      if (!initialFile || !initialFile.startsWith("http")) return;
       if (typeof initialFile !== "string") {
         setFileInfo(initialFile);
         return;
@@ -16761,10 +16769,11 @@ var BinaryField = (props) => {
         let type = "application/octet-stream";
         let size4 = 0;
         let name3 = formValues?.[filename ?? ""] || initialFile.split("/").pop() || "unknown_file";
-        if (checkIsImageLink2(initialFile)) {
+        if (checkIsImageLink2(initialFile) || onlyImage) {
           type = "image/*";
         } else {
           const response = await fetch(initialFile);
+          console.log("responsessss", response);
           const responseBlob = await response.blob();
           if (responseBlob) {
             type = responseBlob?.type;
@@ -16787,6 +16796,11 @@ var BinaryField = (props) => {
   const handleChange = (e3, onChange2) => {
     const file = e3.target.files?.[0];
     if (!file) return;
+    if (onlyImage && !file.type.startsWith("image/")) {
+      methods?.setError(t3("only_image_accept"));
+      e3.target.value = "";
+      return;
+    }
     const isImage = file.type.startsWith("image/");
     const preview = isImage ? URL.createObjectURL(file) : null;
     const normalized = {
@@ -16810,7 +16824,11 @@ var BinaryField = (props) => {
         {
           src: url,
           alt: name3,
-          className: `w-full h-full  rounded-lg object-contain ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`
+          className: `w-full h-full  rounded-lg object-contain ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`,
+          style: {
+            maxWidth: isEditTable ? "40px" : "128px",
+            maxHeight: isEditTable ? "40px" : "128px"
+          }
         }
       );
     if (type?.startsWith("video/"))
@@ -16819,6 +16837,10 @@ var BinaryField = (props) => {
         {
           src: url,
           className: `rounded-lg object-cover ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`,
+          style: {
+            maxWidth: isEditTable ? "40px" : "128px",
+            maxHeight: isEditTable ? "40px" : "128px"
+          },
           controls: true
         }
       );
@@ -16834,12 +16856,20 @@ var BinaryField = (props) => {
     return /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-2", children: [
       getFileIcon(),
       /* @__PURE__ */ jsxs49("div", { children: [
-        /* @__PURE__ */ jsx74("p", { className: "text-sm font-medium text-gray-600 truncate max-w-[120px]", children: name3 }),
+        /* @__PURE__ */ jsx74(
+          "p",
+          {
+            style: {
+              maxWidth: "120px"
+            },
+            className: "text-sm font-medium text-gray-600 truncate max-w-[120px]",
+            children: name3
+          }
+        ),
         isShowSize && /* @__PURE__ */ jsx74("span", { className: "text-xs text-[#666] font-semibold", children: formatFileSize(size4) })
       ] })
     ] });
   };
-  const onlyImage = widget === "image" || widget === "image_url";
   return /* @__PURE__ */ jsx74(
     Controller,
     {

package/dist/utils.js

@@ -6854,7 +6854,8 @@ var vi_default = {
   upload_file_placeholder: "T\u1EA3i t\u1EC7p c\u1EE7a b\u1EA1n",
   "no-available": "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn n\xE0o",
   paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 \u0111\xF3ng",
-  remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i"
+  remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i",
+  only_image_accept: "Ch\u1EC9 \u0111\u01B0\u1EE3c upload file h\xECnh \u1EA3nh"
 };
 
 // src/locales/en.json
@@ -6903,7 +6904,8 @@ var en_default = {
   upload_file_placeholder: "Upload your file",
   "no-available": "No options available",
   paid_amount: "Amount Paid",
-  remanining_amount: "Amount Remaining"
+  remanining_amount: "Amount Remaining",
+  only_image_accept: "Only accept image"
 };
 
 // src/utils/i18n.ts

package/dist/utils.mjs

@@ -6831,7 +6831,8 @@ var vi_default = {
   upload_file_placeholder: "T\u1EA3i t\u1EC7p c\u1EE7a b\u1EA1n",
   "no-available": "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn n\xE0o",
   paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 \u0111\xF3ng",
-  remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i"
+  remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i",
+  only_image_accept: "Ch\u1EC9 \u0111\u01B0\u1EE3c upload file h\xECnh \u1EA3nh"
 };
 
 // src/locales/en.json
@@ -6880,7 +6881,8 @@ var en_default = {
   upload_file_placeholder: "Upload your file",
   "no-available": "No options available",
   paid_amount: "Amount Paid",
-  remanining_amount: "Amount Remaining"
+  remanining_amount: "Amount Remaining",
+  only_image_accept: "Only accept image"
 };
 
 // src/utils/i18n.ts

package/dist/widgets.d.mts

@@ -166,6 +166,7 @@ interface IBinaryFieldProps extends IInputFieldProps {
     handleRemoveFile?: any;
     checkIsImageLink?: any;
     onDownload?: any;
+    setInitialFile?: any;
 }
 
 declare const BinaryField: (props: IBinaryFieldProps) => JSX.Element;

package/dist/widgets.d.ts

@@ -166,6 +166,7 @@ interface IBinaryFieldProps extends IInputFieldProps {
     handleRemoveFile?: any;
     checkIsImageLink?: any;
     onDownload?: any;
+    setInitialFile?: any;
 }
 
 declare const BinaryField: (props: IBinaryFieldProps) => JSX.Element;

package/dist/widgets.js

@@ -7777,7 +7777,8 @@ var vi_default = {
   upload_file_placeholder: "T\u1EA3i t\u1EC7p c\u1EE7a b\u1EA1n",
   "no-available": "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn n\xE0o",
   paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 \u0111\xF3ng",
-  remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i"
+  remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i",
+  only_image_accept: "Ch\u1EC9 \u0111\u01B0\u1EE3c upload file h\xECnh \u1EA3nh"
 };
 
 // src/locales/en.json
@@ -7826,7 +7827,8 @@ var en_default = {
   upload_file_placeholder: "Upload your file",
   "no-available": "No options available",
   paid_amount: "Amount Paid",
-  remanining_amount: "Amount Remaining"
+  remanining_amount: "Amount Remaining",
+  only_image_accept: "Only accept image"
 };
 
 // src/utils/i18n.ts
@@ -16115,6 +16117,7 @@ var BinaryField = (props) => {
     isEditTable,
     widget,
     string,
+    value,
     // from hook
     placeHolderImage,
     inputId,
@@ -16123,13 +16126,18 @@ var BinaryField = (props) => {
     handleFileChange,
     handleRemoveFile,
     checkIsImageLink: checkIsImageLink2,
-    onDownload
+    onDownload,
+    setInitialFile
   } = props;
   const { t: t3 } = useI18n();
   const [fileInfo, setFileInfo] = (0, import_react39.useState)(null);
+  const onlyImage = widget === "image" || widget === "image_url";
+  (0, import_react39.useEffect)(() => {
+    setInitialFile(value);
+  }, [value]);
   (0, import_react39.useEffect)(() => {
     const loadFromLink = async () => {
-      if (!initialFile) return;
+      if (!initialFile || !initialFile.startsWith("http")) return;
       if (typeof initialFile !== "string") {
         setFileInfo(initialFile);
         return;
@@ -16138,10 +16146,11 @@ var BinaryField = (props) => {
         let type = "application/octet-stream";
         let size4 = 0;
         let name3 = formValues?.[filename ?? ""] || initialFile.split("/").pop() || "unknown_file";
-        if (checkIsImageLink2(initialFile)) {
+        if (checkIsImageLink2(initialFile) || onlyImage) {
           type = "image/*";
         } else {
           const response = await fetch(initialFile);
+          console.log("responsessss", response);
           const responseBlob = await response.blob();
           if (responseBlob) {
             type = responseBlob?.type;
@@ -16164,6 +16173,11 @@ var BinaryField = (props) => {
   const handleChange = (e3, onChange2) => {
     const file = e3.target.files?.[0];
     if (!file) return;
+    if (onlyImage && !file.type.startsWith("image/")) {
+      methods?.setError(t3("only_image_accept"));
+      e3.target.value = "";
+      return;
+    }
     const isImage = file.type.startsWith("image/");
     const preview = isImage ? URL.createObjectURL(file) : null;
     const normalized = {
@@ -16187,7 +16201,11 @@ var BinaryField = (props) => {
         {
           src: url,
           alt: name3,
-          className: `w-full h-full  rounded-lg object-contain ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`
+          className: `w-full h-full  rounded-lg object-contain ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`,
+          style: {
+            maxWidth: isEditTable ? "40px" : "128px",
+            maxHeight: isEditTable ? "40px" : "128px"
+          }
         }
       );
     if (type?.startsWith("video/"))
@@ -16196,6 +16214,10 @@ var BinaryField = (props) => {
         {
           src: url,
           className: `rounded-lg object-cover ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`,
+          style: {
+            maxWidth: isEditTable ? "40px" : "128px",
+            maxHeight: isEditTable ? "40px" : "128px"
+          },
           controls: true
         }
       );
@@ -16211,12 +16233,20 @@ var BinaryField = (props) => {
     return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex items-center gap-2", children: [
       getFileIcon(),
       /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "text-sm font-medium text-gray-600 truncate max-w-[120px]", children: name3 }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          "p",
+          {
+            style: {
+              maxWidth: "120px"
+            },
+            className: "text-sm font-medium text-gray-600 truncate max-w-[120px]",
+            children: name3
+          }
+        ),
         isShowSize && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-xs text-[#666] font-semibold", children: formatFileSize(size4) })
       ] })
     ] });
   };
-  const onlyImage = widget === "image" || widget === "image_url";
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     Controller,
     {

package/dist/widgets.mjs

@@ -7715,7 +7715,8 @@ var vi_default = {
   upload_file_placeholder: "T\u1EA3i t\u1EC7p c\u1EE7a b\u1EA1n",
   "no-available": "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn n\xE0o",
   paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 \u0111\xF3ng",
-  remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i"
+  remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i",
+  only_image_accept: "Ch\u1EC9 \u0111\u01B0\u1EE3c upload file h\xECnh \u1EA3nh"
 };
 
 // src/locales/en.json
@@ -7764,7 +7765,8 @@ var en_default = {
   upload_file_placeholder: "Upload your file",
   "no-available": "No options available",
   paid_amount: "Amount Paid",
-  remanining_amount: "Amount Remaining"
+  remanining_amount: "Amount Remaining",
+  only_image_accept: "Only accept image"
 };
 
 // src/utils/i18n.ts
@@ -16053,6 +16055,7 @@ var BinaryField = (props) => {
     isEditTable,
     widget,
     string,
+    value,
     // from hook
     placeHolderImage,
     inputId,
@@ -16061,13 +16064,18 @@ var BinaryField = (props) => {
     handleFileChange,
     handleRemoveFile,
     checkIsImageLink: checkIsImageLink2,
-    onDownload
+    onDownload,
+    setInitialFile
   } = props;
   const { t: t3 } = useI18n();
   const [fileInfo, setFileInfo] = useState11(null);
+  const onlyImage = widget === "image" || widget === "image_url";
+  useEffect11(() => {
+    setInitialFile(value);
+  }, [value]);
   useEffect11(() => {
     const loadFromLink = async () => {
-      if (!initialFile) return;
+      if (!initialFile || !initialFile.startsWith("http")) return;
       if (typeof initialFile !== "string") {
         setFileInfo(initialFile);
         return;
@@ -16076,10 +16084,11 @@ var BinaryField = (props) => {
         let type = "application/octet-stream";
         let size4 = 0;
         let name3 = formValues?.[filename ?? ""] || initialFile.split("/").pop() || "unknown_file";
-        if (checkIsImageLink2(initialFile)) {
+        if (checkIsImageLink2(initialFile) || onlyImage) {
           type = "image/*";
         } else {
           const response = await fetch(initialFile);
+          console.log("responsessss", response);
           const responseBlob = await response.blob();
           if (responseBlob) {
             type = responseBlob?.type;
@@ -16102,6 +16111,11 @@ var BinaryField = (props) => {
   const handleChange = (e3, onChange2) => {
     const file = e3.target.files?.[0];
     if (!file) return;
+    if (onlyImage && !file.type.startsWith("image/")) {
+      methods?.setError(t3("only_image_accept"));
+      e3.target.value = "";
+      return;
+    }
     const isImage = file.type.startsWith("image/");
     const preview = isImage ? URL.createObjectURL(file) : null;
     const normalized = {
@@ -16125,7 +16139,11 @@ var BinaryField = (props) => {
         {
           src: url,
           alt: name3,
-          className: `w-full h-full  rounded-lg object-contain ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`
+          className: `w-full h-full  rounded-lg object-contain ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`,
+          style: {
+            maxWidth: isEditTable ? "40px" : "128px",
+            maxHeight: isEditTable ? "40px" : "128px"
+          }
         }
       );
     if (type?.startsWith("video/"))
@@ -16134,6 +16152,10 @@ var BinaryField = (props) => {
         {
           src: url,
           className: `rounded-lg object-cover ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`,
+          style: {
+            maxWidth: isEditTable ? "40px" : "128px",
+            maxHeight: isEditTable ? "40px" : "128px"
+          },
           controls: true
         }
       );
@@ -16149,12 +16171,20 @@ var BinaryField = (props) => {
     return /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-2", children: [
       getFileIcon(),
       /* @__PURE__ */ jsxs49("div", { children: [
-        /* @__PURE__ */ jsx74("p", { className: "text-sm font-medium text-gray-600 truncate max-w-[120px]", children: name3 }),
+        /* @__PURE__ */ jsx74(
+          "p",
+          {
+            style: {
+              maxWidth: "120px"
+            },
+            className: "text-sm font-medium text-gray-600 truncate max-w-[120px]",
+            children: name3
+          }
+        ),
         isShowSize && /* @__PURE__ */ jsx74("span", { className: "text-xs text-[#666] font-semibold", children: formatFileSize(size4) })
       ] })
     ] });
   };
-  const onlyImage = widget === "image" || widget === "image_url";
   return /* @__PURE__ */ jsx74(
     Controller,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/sme-widget-ui",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",