@thanhpv102/simple-image-asset-manager 0.1.1 → 0.1.2

package/README.md

@@ -7,7 +7,7 @@ A comprehensive file/image asset manager modal for easy-email-editor. Supports f
 - Upload via drag-and-drop
 - Create/manage folders
 - Preview images
-- Edit images (crop, resize, rotate)
+- ~~Edit images (crop, resize, rotate)~~ (todo)
 - Delete files/folders
 - Select files for use in email templates
 

package/dist/index.cjs

@@ -3,4 +3,4 @@
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,l,s,R,s),Z[s+l]=!0)}if(s=null,i!==void 0&&(_(i),s=""+i),T(n)&&(_(n.key),s=""+n.key),"key"in n){i={};for(var U in n)U!=="key"&&(i[U]=n[U])}else i=n;return s&&N(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),K(e,s,i,u(),W,M)}function b(e){J(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===C&&(e._payload.status==="fulfilled"?J(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function J(e){return typeof e=="object"&&e!==null&&e.$$typeof===z}var P=c,z=Symbol.for("react.transitional.element"),h=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),O=Symbol.for("react.strict_mode"),w=Symbol.for("react.profiler"),ee=Symbol.for("react.consumer"),g=Symbol.for("react.context"),G=Symbol.for("react.forward_ref"),B=Symbol.for("react.suspense"),H=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),X=Symbol.for("react.activity"),A=Symbol.for("react.client.reference"),j=P.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,F=Object.prototype.hasOwnProperty,I=Array.isArray,x=console.createTask?console.createTask:function(){return null};P={react_stack_bottom_frame:function(e){return e()}};var D,o={},k=P.react_stack_bottom_frame.bind(P,f)(),S=x(y(f)),Z={};q.Fragment=v,q.jsx=function(e,n,i){var l=1e4>j.recentlyCreatedOwnerStacks++;return V(e,n,i,!1,l?Error("react-stack-top-frame"):k,l?x(y(e)):S)},q.jsxs=function(e,n,i){var l=1e4>j.recentlyCreatedOwnerStacks++;return V(e,n,i,!0,l?Error("react-stack-top-frame"):k,l?x(y(e)):S)}})()),q}var fe;function we(){return fe||(fe=1,process.env.NODE_ENV==="production"?Q.exports=ye():Q.exports=ve()),Q.exports}var r=we();function m(d){return d.type==="FILE"}function oe(d){return d.type==="FOLDER"}const je=({accept:d="image/*",request:E,title:_="Asset Manager",upload:y,onCreateFile:u,onDeleteFile:f,onDeleteFolder:T,onUpdateFile:N,onUpdateFolder:ie,onCreateFolder:K,onSelect:V,visible:b=!1,setVisible:J,showUnacceptedFile:P=!1,addFolderEnabled:z=!0})=>{const[h,v]=c.useState(null),[O,w]=c.useState([]),[ee,g]=c.useState(!1),[G,B]=c.useState(null),[H,L]=c.useState(!1),[C,X]=c.useState(""),[A,j]=c.useState(!1),[F,I]=c.useState([]),[x,D]=c.useState(!1),[o,k]=c.useState(null),[S,Z]=c.useState("thumbnail"),e=c.useRef(null),[n,i]=c.useState(window.innerWidth);c.useEffect(()=>{b&&(g(!0),B(null),E(h===null?void 0:h).then(t=>w(t)).catch(t=>B(t?.message||"Failed to load assets")).finally(()=>g(!1)))},[h,b,E]),c.useEffect(()=>{b&&h===null&&I([])},[h,b]),c.useEffect(()=>{const t=()=>i(window.innerWidth);return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const l=()=>{J(!1),v(null),I([]),B(null)},W=t=>{t===-1?(v(null),I([])):(v(F[t].id),I(F.slice(0,t+1)))},M=async t=>{g(!0),await f({id:t.id}),w(a=>a.filter(p=>p!==t)),g(!1)},s=async t=>{g(!0),await T({id:t.id}),w(a=>a.filter(p=>p!==t)),g(!1)},R=async()=>{if(!C.trim())return;g(!0);const t=await K({name:C,parentFolderId:h});w(a=>[...a,t]),X(""),L(!1),g(!1)},U=async t=>{const a=t.target.files;if(!(!a||a.length===0)){j(!0);for(const p of Array.from(a)){if(d&&!p.type.match(d.replace("*",".*")))continue;const re=await y(p),ne=await u({name:p.name,url:re,parentFolderId:h});w(be=>[...be,ne])}j(!1),e.current&&(e.current.value="")}},te=t=>{t.preventDefault(),D(!0)},pe=t=>{t.preventDefault(),D(!1)},me=async t=>{if(t.preventDefault(),D(!1),!!t.dataTransfer.files){j(!0);for(const a of Array.from(t.dataTransfer.files)){if(d&&!a.type.match(d.replace("*",".*")))continue;const p=await y(a),re=await u({name:a.name,url:p,parentFolderId:h});w(ne=>[...ne,re])}j(!1)}},ae=t=>{k(t)},le=t=>{v(t.id),I(a=>[...a,t]),k(t)},he=()=>{o&&m(o)&&(V(o.url),l())},se=async()=>{o&&(m(o)?(await M(o),k(null)):oe(o)&&(await s(o),k(null)))},de=Math.round(n*.8),ge=Math.round(de*.6);return b?r.jsx(xe.Modal,{open:b,title:r.jsxs("div",{style:{display:"flex",alignItems:"flex-start",justifyContent:"space-between"},children:[r.jsx("span",{children:_}),r.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-end",gap:0,marginRight:40,marginTop:-10},children:r.jsx("button",{onClick:()=>Z(S==="thumbnail"?"list":"thumbnail"),style:{background:"none",border:"none",cursor:"pointer",padding:0,marginTop:8,fontSize:22,color:"#222",display:"flex",alignItems:"center",transition:"color 0.2s"},title:S==="thumbnail"?"List view":"Thumbnail view",children:S==="thumbnail"?r.jsx(Y.BarsOutlined,{}):r.jsx(Y.AppstoreOutlined,{})})})]}),onCancel:l,footer:null,width:de,styles:{body:{padding:0}},destroyOnHidden:!0,maskClosable:!1,centered:!0,children:r.jsxs("div",{className:"simple-image-asset-manager-modal",style:{padding:24},children:[r.jsxs("div",{className:"modal-body",style:{display:"flex",gap:24},children:[r.jsxs("div",{style:{flex:1},children:[r.jsxs("div",{style:{marginBottom:8,display:"flex",alignItems:"center",justifyContent:"space-between"},children:[r.jsxs("div",{style:{display:"flex",alignItems:"center",flexWrap:"wrap"},children:[r.jsx("span",{className:"breadcrumb",onClick:()=>W(-1),style:{cursor:"pointer",color:"#1890ff",textDecoration:"underline",fontWeight:500,maxWidth:120,display:"inline-block",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:"All"}),F.map((t,a)=>{const p=a===F.length-1;return r.jsxs("span",{style:{display:"flex",alignItems:"center"},children:[r.jsx("span",{style:{margin:"0 4px",fontWeight:500},children:"/"}),p?r.jsx("span",{className:"breadcrumb",style:{color:"#222",fontWeight:500,maxWidth:120,display:"inline-block",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t.name}):r.jsx("span",{className:"breadcrumb",onClick:()=>W(a),style:{cursor:"pointer",color:"#1890ff",textDecoration:"underline",fontWeight:500,maxWidth:120,display:"inline-block",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t.name})]},t.id)})]}),z&&!H&&r.jsxs("button",{style:{display:"flex",alignItems:"center",gap:6,cursor:"pointer",userSelect:"none",fontWeight:500,fontSize:15,padding:"8px 20px",borderRadius:4,background:"#1890ff",color:"#fff",border:"none",boxShadow:"0 2px 8px rgba(24,144,255,0.12)",transition:"background 0.2s, box-shadow 0.2s"},onClick:()=>L(!0),children:[r.jsx("span",{children:"New folder"}),r.jsx(Y.FolderAddOutlined,{style:{fontSize:20}})]})]}),r.jsxs("div",{className:`drop-area${x?" drag-active":""}`,onDrop:me,onDragOver:te,onDragLeave:pe,style:{border:x?"2px solid #1890ff":"2px dashed #aaa",borderRadius:8,padding:32,marginBottom:24,textAlign:"center",background:x?"#e6f7ff":"#fafafa",position:"relative",transition:"border-color 0.3s, background 0.3s"},children:[r.jsx("div",{style:{marginBottom:8,fontWeight:500},children:x?"Drop file here to upload":"Drag & drop files here"}),r.jsx("button",{onClick:()=>e.current?.click(),disabled:A,style:{marginBottom:8,visibility:x?"hidden":"visible",padding:"8px 24px",borderRadius:4,background:A?"#ccc":"#1890ff",color:"#fff",border:"none",cursor:A?"not-allowed":"pointer",fontWeight:500,fontSize:15,boxShadow:A?"none":"0 2px 8px rgba(24,144,255,0.12)",transition:"background 0.2s, box-shadow 0.2s"},children:"Upload"}),r.jsx("input",{ref:e,type:"file",accept:d,style:{display:"none"},multiple:!0,onChange:U}),A&&r.jsx("div",{children:"Uploading..."})]}),ee?r.jsx("div",{children:"Loading..."}):G?r.jsx("div",{className:"error",children:G}):r.jsxs("div",{children:[z&&H&&r.jsxs("div",{style:{marginBottom:16,display:"flex",alignItems:"center",gap:8},children:[r.jsx("input",{value:C,onChange:t=>X(t.target.value),placeholder:"Folder name",style:{padding:"8px 12px",borderRadius:4,border:"1px solid #d9d9d9",fontSize:15,fontWeight:500,outline:"none",transition:"border-color 0.2s",boxSizing:"border-box"},onFocus:t=>t.target.style.borderColor="#1890ff",onBlur:t=>t.target.style.borderColor="#d9d9d9"}),r.jsx("button",{onClick:R,style:{padding:"8px 16px",borderRadius:4,background:"#1890ff",color:"#fff",border:"none",fontWeight:500,fontSize:15,cursor:"pointer",boxShadow:"0 2px 8px rgba(24,144,255,0.12)",transition:"background 0.2s"},children:"Create"}),r.jsx("button",{onClick:()=>L(!1),style:{padding:"8px 16px",borderRadius:4,background:"#f5f5f5",color:"#222",border:"1px solid #d9d9d9",fontWeight:500,fontSize:15,cursor:"pointer",transition:"background 0.2s"},children:"Cancel"})]}),S==="thumbnail"?r.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:16},children:O.filter(oe).map(t=>r.jsxs("div",{className:"folder-item",style:{cursor:"pointer",width:120,minWidth:120,maxWidth:120,display:"flex",flexDirection:"column",alignItems:"center",padding:8,borderRadius:8,background:"#fafafa",boxSizing:"border-box"},onClick:()=>le(t),children:[t.thumbnail?r.jsx("img",{src:t.thumbnail,alt:t.name,style:{width:64,height:64,objectFit:"cover",borderRadius:4,marginBottom:8,background:"#fff"}}):r.jsx("div",{style:{fontSize:40,width:64,height:64,display:"flex",alignItems:"center",justifyContent:"center",marginBottom:8,background:"#fff",borderRadius:4},children:"📁"}),r.jsx("div",{style:{fontSize:13,fontWeight:500,width:"100%",textAlign:"center",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t.name})]},t.id))}):r.jsx("div",{style:{display:"block",marginBottom:16},children:O.filter(oe).map(t=>r.jsxs("div",{className:"folder-item",style:{display:"flex",alignItems:"center",gap:12,padding:"8px 0",borderBottom:"1px solid #f0f0f0",cursor:"pointer"},onClick:()=>le(t),children:[t.thumbnail?r.jsx("img",{src:t.thumbnail,alt:t.name,style:{width:32,height:32,objectFit:"cover",borderRadius:4,background:"#fff"}}):r.jsx("div",{style:{fontSize:24,width:32,height:32,display:"flex",alignItems:"center",justifyContent:"center",background:"#fff",borderRadius:4},children:"📁"}),r.jsx("div",{style:{fontSize:14,fontWeight:500,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",flex:1},children:t.name})]},t.id))}),S==="thumbnail"?r.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:16,marginTop:16},children:O.filter(m).map(t=>{const a=o&&m(o)&&o.id===t.id;return r.jsxs("div",{className:"file-item",style:{cursor:"pointer",width:120,minWidth:120,maxWidth:120,border:"2px solid "+(a?"#1890ff":"transparent"),background:a?"#e6f7ff":"#fafafa",borderRadius:8,boxSizing:"border-box",transition:"border-color 0.2s, background 0.2s",padding:8,display:"flex",flexDirection:"column",alignItems:"center"},onClick:()=>ae(t),children:[r.jsx("img",{src:t.thumbnail||t.url,alt:t.name,style:{width:64,height:64,objectFit:"cover",borderRadius:4,background:"#fff",marginBottom:8}}),r.jsx("div",{style:{fontSize:12,fontWeight:500,width:"100%",textAlign:"center",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",marginTop:4},children:t.name})]},t.id)})}):r.jsx("div",{style:{display:"block",marginTop:16},children:O.filter(m).map(t=>{const a=o&&m(o)&&o.id===t.id;return r.jsxs("div",{className:"file-item",style:{display:"flex",alignItems:"center",gap:12,padding:"8px 0",borderBottom:"1px solid #f0f0f0",cursor:"pointer",background:a?"#e6f7ff":"#fff"},onClick:()=>ae(t),children:[r.jsx("img",{src:t.thumbnail||t.url,alt:t.name,style:{width:32,height:32,objectFit:"cover",borderRadius:4,background:"#fff"}}),r.jsx("div",{style:{fontSize:14,fontWeight:500,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",flex:1},children:t.name})]},t.id)})})]})]}),o&&r.jsx("div",{style:{width:ge,minWidth:320,transition:"width 2s",overflow:"hidden"},children:r.jsxs("div",{style:{border:"1px solid #eee",borderRadius:8,padding:16,background:"#fff",height:"100%",display:"flex",flexDirection:"column",alignItems:"center",position:"relative"},children:[r.jsx("button",{onClick:()=>k(null),style:{position:"absolute",top:12,right:12,background:"#f5f5f5",border:"none",borderRadius:4,padding:"4px 12px",cursor:"pointer",fontWeight:500,fontSize:14,color:"#222",boxShadow:"0 1px 4px rgba(0,0,0,0.08)"},children:"Hide"}),m(o)?r.jsxs(r.Fragment,{children:[r.jsx("img",{src:o.thumbnail||o.url,alt:o.name,style:{width:"100%",maxHeight:240,objectFit:"contain",borderRadius:4,marginBottom:16}}),r.jsx("div",{style:{fontWeight:500,marginBottom:8},children:o.name}),r.jsx("div",{style:{fontSize:12,color:"#888",marginBottom:8},children:o.url.startsWith("data:")?"URL: data-uri":r.jsxs(r.Fragment,{children:["URL: ",r.jsx("a",{href:o.url,target:"_blank",rel:"noopener noreferrer",children:o.url})]})}),r.jsxs("button",{onClick:se,style:{display:"flex",alignItems:"center",gap:6,color:"#ff4d4f",background:"none",border:"none",cursor:"pointer",fontWeight:500,fontSize:15,marginTop:24},children:[r.jsx(Y.DeleteOutlined,{})," Delete"]})]}):r.jsxs(r.Fragment,{children:[r.jsx("div",{style:{fontSize:64,marginBottom:16},children:"📁"}),r.jsx("div",{style:{fontWeight:500,marginBottom:8},children:o.name}),r.jsx("div",{style:{fontSize:12,color:"#888",marginBottom:8},children:`Files: ${O.filter(t=>m(t)&&t.parentFolderId===o.id).length}`}),r.jsxs("button",{onClick:se,style:{display:"flex",alignItems:"center",gap:6,color:"#ff4d4f",background:"none",border:"none",cursor:"pointer",fontWeight:500,fontSize:15,marginTop:24},children:[r.jsx(Y.DeleteOutlined,{})," Delete"]})]})]})})]}),r.jsx("div",{className:"modal-footer",style:{display:"flex",justifyContent:"flex-end",alignItems:"center",marginTop:24},children:r.jsx("button",{onClick:he,disabled:!(o&&m(o)),style:{padding:"8px 24px",borderRadius:4,background:o&&m(o)?"#1890ff":"#ccc",color:"#fff",border:"none",cursor:o&&m(o)?"pointer":"not-allowed",fontWeight:500},children:"Select"})})]})}):null};exports.AssetManager=je;
+  <%s key={someKey} {...props} />`,l,s,R,s),Z[s+l]=!0)}if(s=null,i!==void 0&&(_(i),s=""+i),T(n)&&(_(n.key),s=""+n.key),"key"in n){i={};for(var U in n)U!=="key"&&(i[U]=n[U])}else i=n;return s&&N(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),K(e,s,i,u(),W,M)}function b(e){J(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===C&&(e._payload.status==="fulfilled"?J(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function J(e){return typeof e=="object"&&e!==null&&e.$$typeof===z}var P=c,z=Symbol.for("react.transitional.element"),h=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),O=Symbol.for("react.strict_mode"),w=Symbol.for("react.profiler"),ee=Symbol.for("react.consumer"),g=Symbol.for("react.context"),G=Symbol.for("react.forward_ref"),B=Symbol.for("react.suspense"),H=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),X=Symbol.for("react.activity"),A=Symbol.for("react.client.reference"),j=P.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,F=Object.prototype.hasOwnProperty,I=Array.isArray,x=console.createTask?console.createTask:function(){return null};P={react_stack_bottom_frame:function(e){return e()}};var D,o={},k=P.react_stack_bottom_frame.bind(P,f)(),S=x(y(f)),Z={};q.Fragment=v,q.jsx=function(e,n,i){var l=1e4>j.recentlyCreatedOwnerStacks++;return V(e,n,i,!1,l?Error("react-stack-top-frame"):k,l?x(y(e)):S)},q.jsxs=function(e,n,i){var l=1e4>j.recentlyCreatedOwnerStacks++;return V(e,n,i,!0,l?Error("react-stack-top-frame"):k,l?x(y(e)):S)}})()),q}var fe;function we(){return fe||(fe=1,process.env.NODE_ENV==="production"?Q.exports=ye():Q.exports=ve()),Q.exports}var r=we();function m(d){return d.type==="FILE"}function oe(d){return d.type==="FOLDER"}const je=({accept:d="image/*",request:E,title:_="Asset Manager",upload:y,onCreateFile:u,onDeleteFile:f,onDeleteFolder:T,onUpdateFile:N,onUpdateFolder:ie,onCreateFolder:K,onSelect:V,visible:b=!1,setVisible:J,showUnacceptedFile:P=!1,addFolderEnabled:z=!0})=>{const[h,v]=c.useState(null),[O,w]=c.useState([]),[ee,g]=c.useState(!1),[G,B]=c.useState(null),[H,L]=c.useState(!1),[C,X]=c.useState(""),[A,j]=c.useState(!1),[F,I]=c.useState([]),[x,D]=c.useState(!1),[o,k]=c.useState(null),[S,Z]=c.useState("thumbnail"),e=c.useRef(null),[n,i]=c.useState(window.innerWidth);c.useEffect(()=>{b&&(g(!0),B(null),E(h===null?void 0:h).then(t=>w(t)).catch(t=>B(t?.message||"Failed to load assets")).finally(()=>g(!1)))},[h,b,E]),c.useEffect(()=>{b&&h===null&&I([])},[h,b]),c.useEffect(()=>{const t=()=>i(window.innerWidth);return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const l=()=>{J(!1),v(null),I([]),B(null)},W=t=>{t===-1?(v(null),I([])):(v(F[t].id),I(F.slice(0,t+1)))},M=async t=>{g(!0),await f({id:t.id}),w(a=>a.filter(p=>p!==t)),g(!1)},s=async t=>{g(!0),await T({id:t.id}),w(a=>a.filter(p=>p!==t)),g(!1)},R=async()=>{if(!C.trim())return;g(!0);const t=await K({name:C,parentFolderId:h});w(a=>[...a,t]),X(""),L(!1),g(!1)},U=async t=>{const a=t.target.files;if(!(!a||a.length===0)){j(!0);for(const p of Array.from(a)){if(d&&!p.type.match(d.replace("*",".*")))continue;const re=await y(p),ne=await u({name:p.name,url:re,parentFolderId:h});w(be=>[...be,ne])}j(!1),e.current&&(e.current.value="")}},te=t=>{t.preventDefault(),D(!0)},pe=t=>{t.preventDefault(),D(!1)},me=async t=>{if(t.preventDefault(),D(!1),!!t.dataTransfer.files){j(!0);for(const a of Array.from(t.dataTransfer.files)){if(d&&!a.type.match(d.replace("*",".*")))continue;const p=await y(a),re=await u({name:a.name,url:p,parentFolderId:h});w(ne=>[...ne,re])}j(!1)}},ae=t=>{k(t)},le=t=>{v(t.id),I(a=>[...a,t]),k(t)},he=()=>{o&&m(o)&&(V(o.url),l())},se=async()=>{o&&(m(o)?(await M(o),k(null)):oe(o)&&(await s(o),k(null)))},de=Math.round(n*.8),ge=Math.round(de*.6);return b?r.jsx(xe.Modal,{open:b,title:r.jsxs("div",{style:{display:"flex",alignItems:"flex-start",justifyContent:"space-between"},children:[r.jsx("span",{children:_}),r.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-end",gap:0,marginRight:40,marginTop:-10},children:r.jsx("button",{onClick:()=>Z(S==="thumbnail"?"list":"thumbnail"),style:{background:"none",border:"none",cursor:"pointer",padding:0,marginTop:8,fontSize:22,color:"#222",display:"flex",alignItems:"center",transition:"color 0.2s"},title:S==="thumbnail"?"List view":"Thumbnail view",children:S==="thumbnail"?r.jsx(Y.BarsOutlined,{}):r.jsx(Y.AppstoreOutlined,{})})})]}),onCancel:l,footer:null,width:de,styles:{body:{padding:0}},destroyOnHidden:!0,mask:{closable:!1},centered:!0,children:r.jsxs("div",{className:"simple-image-asset-manager-modal",style:{padding:24},children:[r.jsxs("div",{className:"modal-body",style:{display:"flex",gap:24},children:[r.jsxs("div",{style:{flex:1},children:[r.jsxs("div",{style:{marginBottom:8,display:"flex",alignItems:"center",justifyContent:"space-between"},children:[r.jsxs("div",{style:{display:"flex",alignItems:"center",flexWrap:"wrap"},children:[r.jsx("span",{className:"breadcrumb",onClick:()=>W(-1),style:{cursor:"pointer",color:"#1890ff",textDecoration:"underline",fontWeight:500,maxWidth:120,display:"inline-block",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:"All"}),F.map((t,a)=>{const p=a===F.length-1;return r.jsxs("span",{style:{display:"flex",alignItems:"center"},children:[r.jsx("span",{style:{margin:"0 4px",fontWeight:500},children:"/"}),p?r.jsx("span",{className:"breadcrumb",style:{color:"#222",fontWeight:500,maxWidth:120,display:"inline-block",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t.name}):r.jsx("span",{className:"breadcrumb",onClick:()=>W(a),style:{cursor:"pointer",color:"#1890ff",textDecoration:"underline",fontWeight:500,maxWidth:120,display:"inline-block",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t.name})]},t.id)})]}),z&&!H&&r.jsxs("button",{style:{display:"flex",alignItems:"center",gap:6,cursor:"pointer",userSelect:"none",fontWeight:500,fontSize:15,padding:"8px 20px",borderRadius:4,background:"#1890ff",color:"#fff",border:"none",boxShadow:"0 2px 8px rgba(24,144,255,0.12)",transition:"background 0.2s, box-shadow 0.2s"},onClick:()=>L(!0),children:[r.jsx("span",{children:"New folder"}),r.jsx(Y.FolderAddOutlined,{style:{fontSize:20}})]})]}),r.jsxs("div",{className:`drop-area${x?" drag-active":""}`,onDrop:me,onDragOver:te,onDragLeave:pe,style:{border:x?"2px solid #1890ff":"2px dashed #aaa",borderRadius:8,padding:32,marginBottom:24,textAlign:"center",background:x?"#e6f7ff":"#fafafa",position:"relative",transition:"border-color 0.3s, background 0.3s"},children:[r.jsx("div",{style:{marginBottom:8,fontWeight:500},children:x?"Drop file here to upload":"Drag & drop files here"}),r.jsx("button",{onClick:()=>e.current?.click(),disabled:A,style:{marginBottom:8,visibility:x?"hidden":"visible",padding:"8px 24px",borderRadius:4,background:A?"#ccc":"#1890ff",color:"#fff",border:"none",cursor:A?"not-allowed":"pointer",fontWeight:500,fontSize:15,boxShadow:A?"none":"0 2px 8px rgba(24,144,255,0.12)",transition:"background 0.2s, box-shadow 0.2s"},children:"Upload"}),r.jsx("input",{ref:e,type:"file",accept:d,style:{display:"none"},multiple:!0,onChange:U}),A&&r.jsx("div",{children:"Uploading..."})]}),ee?r.jsx("div",{children:"Loading..."}):G?r.jsx("div",{className:"error",children:G}):r.jsxs("div",{children:[z&&H&&r.jsxs("div",{style:{marginBottom:16,display:"flex",alignItems:"center",gap:8},children:[r.jsx("input",{value:C,onChange:t=>X(t.target.value),placeholder:"Folder name",style:{padding:"8px 12px",borderRadius:4,border:"1px solid #d9d9d9",fontSize:15,fontWeight:500,outline:"none",transition:"border-color 0.2s",boxSizing:"border-box"},onFocus:t=>t.target.style.borderColor="#1890ff",onBlur:t=>t.target.style.borderColor="#d9d9d9"}),r.jsx("button",{onClick:R,style:{padding:"8px 16px",borderRadius:4,background:"#1890ff",color:"#fff",border:"none",fontWeight:500,fontSize:15,cursor:"pointer",boxShadow:"0 2px 8px rgba(24,144,255,0.12)",transition:"background 0.2s"},children:"Create"}),r.jsx("button",{onClick:()=>L(!1),style:{padding:"8px 16px",borderRadius:4,background:"#f5f5f5",color:"#222",border:"1px solid #d9d9d9",fontWeight:500,fontSize:15,cursor:"pointer",transition:"background 0.2s"},children:"Cancel"})]}),S==="thumbnail"?r.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:16},children:O.filter(oe).map(t=>r.jsxs("div",{className:"folder-item",style:{cursor:"pointer",width:120,minWidth:120,maxWidth:120,display:"flex",flexDirection:"column",alignItems:"center",padding:8,borderRadius:8,background:"#fafafa",boxSizing:"border-box"},onClick:()=>le(t),children:[t.thumbnail?r.jsx("img",{src:t.thumbnail,alt:t.name,style:{width:64,height:64,objectFit:"cover",borderRadius:4,marginBottom:8,background:"#fff"}}):r.jsx("div",{style:{fontSize:40,width:64,height:64,display:"flex",alignItems:"center",justifyContent:"center",marginBottom:8,background:"#fff",borderRadius:4},children:"📁"}),r.jsx("div",{style:{fontSize:13,fontWeight:500,width:"100%",textAlign:"center",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t.name})]},t.id))}):r.jsx("div",{style:{display:"block",marginBottom:16},children:O.filter(oe).map(t=>r.jsxs("div",{className:"folder-item",style:{display:"flex",alignItems:"center",gap:12,padding:"8px 0",borderBottom:"1px solid #f0f0f0",cursor:"pointer"},onClick:()=>le(t),children:[t.thumbnail?r.jsx("img",{src:t.thumbnail,alt:t.name,style:{width:32,height:32,objectFit:"cover",borderRadius:4,background:"#fff"}}):r.jsx("div",{style:{fontSize:24,width:32,height:32,display:"flex",alignItems:"center",justifyContent:"center",background:"#fff",borderRadius:4},children:"📁"}),r.jsx("div",{style:{fontSize:14,fontWeight:500,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",flex:1},children:t.name})]},t.id))}),S==="thumbnail"?r.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:16,marginTop:16},children:O.filter(m).map(t=>{const a=o&&m(o)&&o.id===t.id;return r.jsxs("div",{className:"file-item",style:{cursor:"pointer",width:120,minWidth:120,maxWidth:120,border:"2px solid "+(a?"#1890ff":"transparent"),background:a?"#e6f7ff":"#fafafa",borderRadius:8,boxSizing:"border-box",transition:"border-color 0.2s, background 0.2s",padding:8,display:"flex",flexDirection:"column",alignItems:"center"},onClick:()=>ae(t),children:[r.jsx("img",{src:t.thumbnail||t.url,alt:t.name,style:{width:64,height:64,objectFit:"cover",borderRadius:4,background:"#fff",marginBottom:8}}),r.jsx("div",{style:{fontSize:12,fontWeight:500,width:"100%",textAlign:"center",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",marginTop:4},children:t.name})]},t.id)})}):r.jsx("div",{style:{display:"block",marginTop:16},children:O.filter(m).map(t=>{const a=o&&m(o)&&o.id===t.id;return r.jsxs("div",{className:"file-item",style:{display:"flex",alignItems:"center",gap:12,padding:"8px 0",borderBottom:"1px solid #f0f0f0",cursor:"pointer",background:a?"#e6f7ff":"#fff"},onClick:()=>ae(t),children:[r.jsx("img",{src:t.thumbnail||t.url,alt:t.name,style:{width:32,height:32,objectFit:"cover",borderRadius:4,background:"#fff"}}),r.jsx("div",{style:{fontSize:14,fontWeight:500,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",flex:1},children:t.name})]},t.id)})})]})]}),o&&r.jsx("div",{style:{width:ge,minWidth:320,transition:"width 2s",overflow:"hidden"},children:r.jsxs("div",{style:{border:"1px solid #eee",borderRadius:8,padding:16,background:"#fff",height:"100%",display:"flex",flexDirection:"column",alignItems:"center",position:"relative"},children:[r.jsx("button",{onClick:()=>k(null),style:{position:"absolute",top:12,right:12,background:"#f5f5f5",border:"none",borderRadius:4,padding:"4px 12px",cursor:"pointer",fontWeight:500,fontSize:14,color:"#222",boxShadow:"0 1px 4px rgba(0,0,0,0.08)"},children:"Hide"}),m(o)?r.jsxs(r.Fragment,{children:[r.jsx("img",{src:o.thumbnail||o.url,alt:o.name,style:{width:"100%",maxHeight:240,objectFit:"contain",borderRadius:4,marginBottom:16}}),r.jsx("div",{style:{fontWeight:500,marginBottom:8},children:o.name}),r.jsx("div",{style:{fontSize:12,color:"#888",marginBottom:8},children:o.url.startsWith("data:")?"URL: data-uri":r.jsxs(r.Fragment,{children:["URL: ",r.jsx("a",{href:o.url,target:"_blank",rel:"noopener noreferrer",children:o.url})]})}),r.jsxs("button",{onClick:se,style:{display:"flex",alignItems:"center",gap:6,color:"#ff4d4f",background:"none",border:"none",cursor:"pointer",fontWeight:500,fontSize:15,marginTop:24},children:[r.jsx(Y.DeleteOutlined,{})," Delete"]})]}):r.jsxs(r.Fragment,{children:[r.jsx("div",{style:{fontSize:64,marginBottom:16},children:"📁"}),r.jsx("div",{style:{fontWeight:500,marginBottom:8},children:o.name}),r.jsx("div",{style:{fontSize:12,color:"#888",marginBottom:8},children:`Files: ${O.filter(t=>m(t)&&t.parentFolderId===o.id).length}`}),r.jsxs("button",{onClick:se,style:{display:"flex",alignItems:"center",gap:6,color:"#ff4d4f",background:"none",border:"none",cursor:"pointer",fontWeight:500,fontSize:15,marginTop:24},children:[r.jsx(Y.DeleteOutlined,{})," Delete"]})]})]})})]}),r.jsx("div",{className:"modal-footer",style:{display:"flex",justifyContent:"flex-end",alignItems:"center",marginTop:24},children:r.jsx("button",{onClick:he,disabled:!(o&&m(o)),style:{padding:"8px 24px",borderRadius:4,background:o&&m(o)?"#1890ff":"#ccc",color:"#fff",border:"none",cursor:o&&m(o)?"pointer":"not-allowed",fontWeight:500},children:"Select"})})]})}):null};exports.AssetManager=je;

package/dist/index.js

@@ -374,7 +374,7 @@ const Ae = ({
       width: de,
       styles: { body: { padding: 0 } },
       destroyOnHidden: !0,
-      maskClosable: !1,
+      mask: { closable: !1 },
       centered: !0,
       children: /* @__PURE__ */ t.jsxs("div", { className: "simple-image-asset-manager-modal", style: { padding: 24 }, children: [
         /* @__PURE__ */ t.jsxs("div", { className: "modal-body", style: { display: "flex", gap: 24 }, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thanhpv102/simple-image-asset-manager",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "files": [
@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^6.1.0",
-    "antd": "^6.0.0"
+    "antd": "^6.3.0",
+    "vite-plugin-dts": "^4.5.4"
   },
   "devDependencies": {
     "@types/react": "^19.0.2",