@pdfme/ui 5.3.13-dev.35 → 5.3.13-dev.37

package/dist/index.es.js

@@ -165382,7 +165382,7 @@ class Form extends PreviewUI {
 }
 class Viewer extends PreviewUI {
   constructor(s) {
-    super(s);
+    super(s), console.warn("[@pdfme/ui] Viewer component is deprecated and will be removed in a future version.");
   }
   render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);

package/dist/index.umd.js

@@ -1360,4 +1360,4 @@ canvas {
         transform: rotate(360deg);
       }
     }
-  `}),jsxRuntimeExports.jsx("div",{style:s,children:jsxRuntimeExports.jsx(LoaderCircle,{size:50,style:c})})]})},Root=({size:a,scale:s,children:c},u)=>{const d=reactExports.useContext(FontContext);return reactExports.useEffect(()=>{if(!document||!document.fonts)return;const v=Object.entries(d).map(([A,{data:b}])=>new FontFace(A,typeof b=="string"?`url(${b})`:b,{display:"swap"})).filter(A=>!document.fonts.has(A));Promise.allSettled(v.map(A=>A.load())).then(A=>{A.forEach(b=>{b.status==="fulfilled"&&document.fonts.add(b.value)})})},[d]),jsxRuntimeExports.jsx("div",{ref:u,style:{position:"relative",background:BACKGROUND_COLOR,...a},children:jsxRuntimeExports.jsx("div",{style:{margin:"0 auto",...a},children:s===0?jsxRuntimeExports.jsx(Spinner,{}):c})})},Root$1=reactExports.forwardRef(Root),ErrorScreen=({size:a,error:s})=>{const c=reactExports.useContext(I18nContext),{token:u}=theme.useToken();return jsxRuntimeExports.jsx("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",background:BACKGROUND_COLOR,...a},children:jsxRuntimeExports.jsx("div",{style:{width:300,margin:"0 auto",background:u.colorBgLayout},children:jsxRuntimeExports.jsx(Result$1,{icon:null,title:"ERROR",subTitle:c("errorOccurred"),extra:jsxRuntimeExports.jsx("span",{children:s.message})})})})},{Text:Text$1}=Typography,Zoom=({zoomLevel:a,setZoomLevel:s,style:c})=>{const d=useMaxZoom(),p=.25,v=a-.25,A=a+.25;return jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$1,{type:"text",disabled:p>=v,onClick:()=>s(v),icon:jsxRuntimeExports.jsx(Minus,{size:16,color:c.textStyle.color})}),jsxRuntimeExports.jsxs(Text$1,{strong:!0,style:c.textStyle,children:[Math.round(a*100),"%"]}),jsxRuntimeExports.jsx(Button$1,{type:"text",disabled:d<A,onClick:()=>s(A),icon:jsxRuntimeExports.jsx(Plus,{size:16,color:c.textStyle.color})})]})},Pager=({pageCursor:a,pageNum:s,setPageCursor:c,style:u})=>jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$1,{type:"text",disabled:a<=0,onClick:()=>c(a-1),children:jsxRuntimeExports.jsx(ChevronLeft,{size:16,color:u.textStyle.color})}),jsxRuntimeExports.jsxs(Text$1,{strong:!0,style:u.textStyle,children:[a+1,"/",s]}),jsxRuntimeExports.jsx(Button$1,{type:"text",disabled:a+1>=s,onClick:()=>c(a+1),children:jsxRuntimeExports.jsx(ChevronRight,{size:16,color:u.textStyle.color})})]}),ContextMenu=({items:a,style:s})=>jsxRuntimeExports.jsx(Dropdown,{menu:{items:a},placement:"top",arrow:!0,trigger:["click"],children:jsxRuntimeExports.jsx(Button$1,{type:"text",children:jsxRuntimeExports.jsx(Ellipsis,{size:16,color:s.textStyle.color})})}),CtlBar=a=>{const{token:s}=theme.useToken(),c=reactExports.useContext(I18nContext),{size:u,pageCursor:d,pageNum:p,setPageCursor:v,zoomLevel:A,setZoomLevel:b,addPageAfter:g,removePage:x}=a,y=[];g&&y.push({key:"1",label:jsxRuntimeExports.jsx("div",{onClick:g,children:c("addPageAfter")})}),x&&p>1&&d!==0&&y.push({key:"2",label:jsxRuntimeExports.jsx("div",{onClick:x,children:c("removePage")})});const f=300,m=y.length>0?50:0,C=(p>1?f:f/2)+m,S={color:s.colorWhite,fontSize:s.fontSize,margin:s.marginXS};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",top:"auto",bottom:"6%",width:u.width},children:jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-evenly",position:"relative",zIndex:1,left:`calc(50% - ${C/2}px)`,width:C,height:40,boxSizing:"border-box",padding:s.paddingSM,borderRadius:s.borderRadius,backgroundColor:s.colorBgMask},children:[p>1&&jsxRuntimeExports.jsx(Pager,{style:{textStyle:S},pageCursor:d,pageNum:p,setPageCursor:v}),jsxRuntimeExports.jsx(Zoom,{style:{textStyle:S},zoomLevel:A,setZoomLevel:b}),y.length>0&&jsxRuntimeExports.jsx(ContextMenu,{items:y,style:{textStyle:S}})]})})},scaleDragPosAdjustment=(a,s)=>s>1?a*(s-1):s<1?a*-(1-s):0,TemplateEditor=({template:a,size:s,onSaveTemplate:c,onChangeTemplate:u,onPageCursorChange:d})=>{const p=reactExports.useRef([]),v=reactExports.useRef([]),A=reactExports.useRef(null),b=reactExports.useRef([]),g=reactExports.useContext(I18nContext),x=reactExports.useContext(PluginsRegistry),y=reactExports.useContext(OptionsContext),f=useMaxZoom(),[m,C]=reactExports.useState(null),[S,w]=reactExports.useState([]),[I,P]=reactExports.useState([[]]),[$,_]=reactExports.useState(0),[E,R]=reactExports.useState(1),[T,B]=reactExports.useState(!0),[M,D]=reactExports.useState(null),{backgrounds:O,pageSizes:H,scale:j,error:Q,refresh:L}=useUIPreProcessor({template:a,size:s,zoomLevel:E,maxZoom:f}),F=ie=>{w(ie),C(null)},U=()=>{w([]),C(null)};useScrollPageCursor({ref:A,pageSizes:H,scale:j,pageCursor:$,onChangePageCursor:ie=>{_(ie),d(ie),U()}});const N=reactExports.useCallback(ie=>{v.current=[],p.current.push(cloneDeep$1(I[$]));const ce=cloneDeep$1(I);ce[$]=ie,P(ce),u(schemasList2template(ce,a.basePdf))},[a,I,$,u]),k=reactExports.useCallback(ie=>{N(I[$].filter(ce=>!ie.includes(ce.id))),U()},[I,$,N]),W=reactExports.useCallback(ie=>{changeSchemas({objs:ie,schemas:I[$],basePdf:a.basePdf,pluginsRegistry:x,pageSize:H[$],commitSchemas:N})},[N,$,I,x,H,a.basePdf]);useInitEvents({pageCursor:$,pageSizes:H,activeElements:S,template:a,schemasList:I,changeSchemas:W,commitSchemas:N,removeSchemas:k,onSaveTemplate:c,past:p,future:v,setSchemasList:P,onEdit:F,onEditEnd:U});const J=reactExports.useCallback(async ie=>{var ge;const ce=await template2SchemasList(ie);P(ce),U(),_(0),(ge=A.current)!=null&&ge.scroll&&A.current.scroll({top:0,behavior:"smooth"})},[]),q=ie=>{const[ce,ge,Se,be]=isBlankPdf(a.basePdf)?a.basePdf.padding:[0,0,0,0],me=H[$],fe=de=>{let le=I.reduce((Ce,$e)=>Ce+$e.length,1),xe=de+le;for(;I.some(Ce=>Ce.find($e=>$e.name===xe));)le++,xe=de+le;return xe},se=(de,le,xe)=>Math.min(Math.max(de,le),xe),oe={id:uuid$6(),...ie,name:fe(g("field")),position:{x:se(be,ie.position.x,me.width-ge-ie.width),y:se(ce,ie.position.y,me.height-Se-ie.height)},required:ie.readOnly?!1:y.requiredByDefault||ie.required||!1};if(ie.position.y===0){const de=b.current[$],le=de?de.getBoundingClientRect().top:0;oe.position.y=le>0?ce:H[$].height/2}N(I[$].concat(oe)),setTimeout(()=>F([document.getElementById(oe.id)]))},Y=ie=>{N(ie)},Z=ie=>{C(ie)},ee=async(ie,ce)=>{_(ce);const ge=schemasList2template(ie,a.basePdf);u(ge),await J(ge),L(ge),setTimeout(()=>{A.current&&(A.current.scrollTop=getPagesScrollTopByIndex(H,ce,j))},0)},re=()=>{if($===0||!window.confirm(g("removePageConfirm")))return;const ie=cloneDeep$1(I);ie.splice($,1),ee(ie,$-1)},ae=()=>{const ie=cloneDeep$1(I);ie.splice($+1,0,[]),ee(ie,$+1)};M!==a&&(D(a),J(a));const V=s.width-LEFT_SIDEBAR_WIDTH,K={width:T?V-RIGHT_SIDEBAR_WIDTH:V,height:s.height};if(Q)return jsxRuntimeExports.jsx(ErrorScreen,{size:s,error:Q});const te=isBlankPdf(a.basePdf)?{addPageAfter:ae,removePage:re}:{};return jsxRuntimeExports.jsx(Root$1,{size:s,scale:j,children:jsxRuntimeExports.jsxs(DndContext,{onDragEnd:ie=>{var le,xe;if(!ie.active)return;const ce=ie.active,ge=b.current[$].getBoundingClientRect(),Se=((le=ce.rect.current.initial)==null?void 0:le.left)||0,be=((xe=ce.rect.current.initial)==null?void 0:xe.top)||0,me=ge.left-Se+scaleDragPosAdjustment(20,j),fe=ge.top-be,se=(ie.delta.y-fe)/j,oe=(ie.delta.x-me)/j,de={x:round$1(px2mm(Math.max(0,oe)),2),y:round$1(px2mm(Math.max(0,se)),2)};q({...ce.data.current,position:de})},onDragStart:U,children:[jsxRuntimeExports.jsx(LeftSidebar,{height:A.current?A.current.clientHeight:0,scale:j,basePdf:a.basePdf}),jsxRuntimeExports.jsxs("div",{style:{position:"absolute",width:V,marginLeft:LEFT_SIDEBAR_WIDTH},children:[jsxRuntimeExports.jsx(CtlBar,{size:K,pageCursor:$,pageNum:I.length,setPageCursor:ie=>{A.current&&(A.current.scrollTop=getPagesScrollTopByIndex(H,ie,j),_(ie),U())},zoomLevel:E,setZoomLevel:R,...te}),jsxRuntimeExports.jsx(Sidebar,{hoveringSchemaId:m,onChangeHoveringSchemaId:Z,height:A.current?A.current.clientHeight:0,size:s,pageSize:H[$]??[],activeElements:S,schemasList:I,schemas:I[$]??[],changeSchemas:W,onSortEnd:Y,onEdit:ie=>{const ce=document.getElementById(ie);ce&&F([ce])},onEditEnd:U,deselectSchema:U,sidebarOpen:T,setSidebarOpen:B}),jsxRuntimeExports.jsx(Canvas$1,{ref:A,paperRefs:b,basePdf:a.basePdf,hoveringSchemaId:m,onChangeHoveringSchemaId:Z,height:s.height-RULER_HEIGHT*ZOOM,pageCursor:$,scale:j,size:K,pageSizes:H,backgrounds:O,activeElements:S,schemasList:I,changeSchemas:W,removeSchemas:k,sidebarOpen:T,onEdit:F})]})]})})},defaultTheme={token:{colorPrimary:"#38a0ff"},components:{Form:{fontSize:12,margin:8,marginLG:12,marginXS:4,padding:8,paddingLG:12,paddingXS:4,itemMarginBottom:4,verticalLabelPadding:"0 0 2px"}}},isObject=a=>!!a&&typeof a=="object"&&!Array.isArray(a),deepMerge=(a,s)=>{let c={...a};return isObject(a)&&isObject(s)&&Object.keys(s).forEach(u=>{const d=s[u];if(isObject(d))if(!(u in a))Object.assign(c,{[u]:d});else{const p=a[u];isObject(p)?c[u]=deepMerge(p,d):Object.assign(c,{[u]:d})}else Object.assign(c,{[u]:d})}),c},AppContextProvider=({children:a,lang:s,font:c,plugins:u,options:d})=>{let p=defaultTheme;d.theme&&(p=deepMerge(p,d.theme));let v=getDict(s);return d.labels&&(v=deepMerge(v,d.labels)),jsxRuntimeExports.jsx(ConfigProvider,{theme:p,children:jsxRuntimeExports.jsx(I18nContext.Provider,{value:A=>i18n(A,v),children:jsxRuntimeExports.jsx(FontContext.Provider,{value:c,children:jsxRuntimeExports.jsx(PluginsRegistry.Provider,{value:u,children:jsxRuntimeExports.jsx(OptionsContext.Provider,{value:d,children:a})})})})})};class Designer extends BaseUIClass{constructor(s){super(s),this.pageCursor=0,checkDesignerProps(s)}saveTemplate(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);this.onSaveTemplateCallback&&this.onSaveTemplateCallback(this.template)}updateTemplate(s){if(checkTemplate(s),!this.domContainer)throw Error(DESTROYED_ERR_MSG);this.template=cloneDeep$1(s),this.onChangeTemplateCallback&&this.onChangeTemplateCallback(s),this.render()}onSaveTemplate(s){this.onSaveTemplateCallback=s}onChangeTemplate(s){this.onChangeTemplateCallback=s}getPageCursor(){return this.pageCursor}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(TemplateEditor,{template:this.template,onSaveTemplate:s=>{this.template=s,this.template.pdfmeVersion=PDFME_VERSION,this.onSaveTemplateCallback&&this.onSaveTemplateCallback(s)},onChangeTemplate:s=>{this.template=s,this.template.pdfmeVersion=PDFME_VERSION,this.onChangeTemplateCallback&&this.onChangeTemplateCallback(s)},onPageCursorChange:s=>{this.pageCursor=s},size:this.size})}),this.domContainer)}}const{Text}=Typography,icons={left:ChevronLeft,right:ChevronRight,doubleLeft:ChevronsLeft,doubleRight:ChevronsRight},UnitButton=({type:a,onClick:s,disabled:c,textStyle:u})=>{const d=icons[a];return jsxRuntimeExports.jsx(Button$1,{type:"text",onClick:s,disabled:c,children:jsxRuntimeExports.jsx(d,{style:{color:u.color}})})},UnitPager=({size:a,unitCursor:s,unitNum:c,setUnitCursor:u})=>{if(c<=1)return null;const{token:d}=theme.useToken(),p={pointerEvents:"initial",position:"sticky",zIndex:1,display:"flex",alignItems:"center",boxSizing:"border-box",height:40,padding:d.paddingSM,borderRadius:d.borderRadius,backgroundColor:d.colorBgMask},v={color:d.colorWhite,fontSize:d.fontSize,margin:d.marginXS};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",...a},children:jsxRuntimeExports.jsxs("div",{style:{position:"sticky",width:"100%",zIndex:1,top:`calc(50% - ${p.height/2}px)`,display:"flex",alignItems:"center"},children:[s>0&&jsxRuntimeExports.jsxs("div",{style:{left:"1rem",marginLeft:"1rem",...p},children:[jsxRuntimeExports.jsx(UnitButton,{type:"doubleLeft",onClick:()=>u(0),disabled:s<=0,textStyle:v}),jsxRuntimeExports.jsx(UnitButton,{type:"left",onClick:()=>u(s-1),disabled:s<=0,textStyle:v}),jsxRuntimeExports.jsxs(Text,{strong:!0,style:v,children:[s+1,"/",c]})]}),s+1<c&&jsxRuntimeExports.jsxs("div",{style:{right:"1rem",marginLeft:"auto",marginRight:"1rem",...p},children:[jsxRuntimeExports.jsxs(Text,{strong:!0,style:v,children:[s+1,"/",c]}),jsxRuntimeExports.jsx(UnitButton,{type:"right",onClick:()=>u(s+1),disabled:s+1>=c,textStyle:v}),jsxRuntimeExports.jsx(UnitButton,{type:"doubleRight",onClick:()=>u(c-1),disabled:s+1>=c,textStyle:v})]})]})})},_cache=new Map,Preview=({template:a,inputs:s,size:c,onChangeInput:u})=>{const{token:d}=theme.useToken(),p=reactExports.useContext(FontContext),v=useMaxZoom(),A=reactExports.useRef(null),b=reactExports.useRef([]),[g,x]=reactExports.useState(0),[y,f]=reactExports.useState(0),[m,C]=reactExports.useState(1),[S,w]=reactExports.useState([[]]),{backgrounds:I,pageSizes:P,scale:$,error:_,refresh:E}=useUIPreProcessor({template:a,size:c,zoomLevel:m,maxZoom:v}),R=!!u,T=s[g],B=O=>{getDynamicTemplate({template:O,input:T,options:{font:p},_cache,getDynamicHeights:(j,Q)=>{switch(Q.schema.type){case"table":return getDynamicHeightsForTable(j,Q);default:return Promise.resolve([Q.schema.height])}}}).then(async j=>{const Q=await template2SchemasList(j);w(Q),await E(j)}).catch(j=>console.error("[@pdfme/ui] ",j))};reactExports.useEffect(()=>{g>s.length-1&&x(s.length-1),B(a)},[a,s,c]),useScrollPageCursor({ref:A,pageSizes:P,scale:$,pageCursor:y,onChangePageCursor:f});const M=({name:O,value:H})=>u&&u({index:g,name:O,value:H}),D=(O,H)=>{let j=!1;O.forEach(({key:Q,value:L})=>{if(Q==="content"){const F=L,U=(T==null?void 0:T[H.name])||"";if(F===U)return;M({name:H.name,value:F}),H.type==="table"&&(j=!0)}else{const F=S[y].find(U=>U.id===H.id);if(!F)return;F[Q]=L}}),j&&B(a),w([...S])};return _?jsxRuntimeExports.jsx(ErrorScreen,{size:c,error:_}):jsxRuntimeExports.jsxs(Root$1,{size:c,scale:$,children:[jsxRuntimeExports.jsx(CtlBar,{size:c,pageCursor:y,pageNum:S.length,setPageCursor:O=>{A.current&&(A.current.scrollTop=getPagesScrollTopByIndex(P,O,$),f(O))},zoomLevel:m,setZoomLevel:C}),jsxRuntimeExports.jsx(UnitPager,{size:c,unitCursor:g,unitNum:s.length,setUnitCursor:x}),jsxRuntimeExports.jsx("div",{ref:A,style:{...c,position:"relative",overflow:"auto"},children:jsxRuntimeExports.jsx(Paper,{paperRefs:b,scale:$,size:c,schemasList:S,pageSizes:P,backgrounds:I,renderSchema:({schema:O,index:H})=>{const j=O.readOnly?replacePlaceholders({content:O.content||"",variables:{...T,totalPages:S.length,currentPage:H+1},schemas:S}):String(T&&T[O.name]||"");return jsxRuntimeExports.jsx(Renderer,{schema:O,basePdf:a.basePdf,value:j,mode:R?"form":"viewer",placeholder:O.content,tabIndex:H+100,onChange:Q=>{const L=Array.isArray(Q)?Q:[Q];D(L,O)},outline:R&&!O.readOnly?`1px dashed ${d.colorPrimary}`:"transparent",scale:$},O.id)},renderPaper:({index:O})=>jsxRuntimeExports.jsx(StaticSchema,{template:a,scale:$,input:T,totalPages:S.length,currentPage:O+1})})})]})};class Form extends PreviewUI{constructor(s){super(s)}onChangeInput(s){this.onChangeInputCallback=s}setInputs(s){const c=this.getInputs();super.setInputs(s);const u=[];s.forEach((d,p)=>{const v=c[p]||{};new Set([...Object.keys(d),...Object.keys(v)]).forEach(b=>{const g=d[b],x=v[b];g!==x&&u.push({index:p,name:b,value:g})})}),u.forEach(d=>{this.onChangeInputCallback&&this.onChangeInputCallback(d)})}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(Preview,{template:this.template,size:this.size,inputs:this.inputs,onChangeInput:s=>{const{index:c,value:u,name:d}=s;this.onChangeInputCallback&&this.onChangeInputCallback({index:c,value:u,name:d}),this.inputs&&this.inputs[c]&&this.inputs[c][d]!==u&&(this.inputs[c][d]=u,this.render())}})}),this.domContainer)}}class Viewer extends PreviewUI{constructor(s){super(s)}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(Preview,{template:this.template,size:this.size,inputs:this.inputs})}),this.domContainer)}}exports.Designer=Designer,exports.Form=Form,exports.Viewer=Viewer,Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})});
+  `}),jsxRuntimeExports.jsx("div",{style:s,children:jsxRuntimeExports.jsx(LoaderCircle,{size:50,style:c})})]})},Root=({size:a,scale:s,children:c},u)=>{const d=reactExports.useContext(FontContext);return reactExports.useEffect(()=>{if(!document||!document.fonts)return;const v=Object.entries(d).map(([A,{data:b}])=>new FontFace(A,typeof b=="string"?`url(${b})`:b,{display:"swap"})).filter(A=>!document.fonts.has(A));Promise.allSettled(v.map(A=>A.load())).then(A=>{A.forEach(b=>{b.status==="fulfilled"&&document.fonts.add(b.value)})})},[d]),jsxRuntimeExports.jsx("div",{ref:u,style:{position:"relative",background:BACKGROUND_COLOR,...a},children:jsxRuntimeExports.jsx("div",{style:{margin:"0 auto",...a},children:s===0?jsxRuntimeExports.jsx(Spinner,{}):c})})},Root$1=reactExports.forwardRef(Root),ErrorScreen=({size:a,error:s})=>{const c=reactExports.useContext(I18nContext),{token:u}=theme.useToken();return jsxRuntimeExports.jsx("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",background:BACKGROUND_COLOR,...a},children:jsxRuntimeExports.jsx("div",{style:{width:300,margin:"0 auto",background:u.colorBgLayout},children:jsxRuntimeExports.jsx(Result$1,{icon:null,title:"ERROR",subTitle:c("errorOccurred"),extra:jsxRuntimeExports.jsx("span",{children:s.message})})})})},{Text:Text$1}=Typography,Zoom=({zoomLevel:a,setZoomLevel:s,style:c})=>{const d=useMaxZoom(),p=.25,v=a-.25,A=a+.25;return jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$1,{type:"text",disabled:p>=v,onClick:()=>s(v),icon:jsxRuntimeExports.jsx(Minus,{size:16,color:c.textStyle.color})}),jsxRuntimeExports.jsxs(Text$1,{strong:!0,style:c.textStyle,children:[Math.round(a*100),"%"]}),jsxRuntimeExports.jsx(Button$1,{type:"text",disabled:d<A,onClick:()=>s(A),icon:jsxRuntimeExports.jsx(Plus,{size:16,color:c.textStyle.color})})]})},Pager=({pageCursor:a,pageNum:s,setPageCursor:c,style:u})=>jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[jsxRuntimeExports.jsx(Button$1,{type:"text",disabled:a<=0,onClick:()=>c(a-1),children:jsxRuntimeExports.jsx(ChevronLeft,{size:16,color:u.textStyle.color})}),jsxRuntimeExports.jsxs(Text$1,{strong:!0,style:u.textStyle,children:[a+1,"/",s]}),jsxRuntimeExports.jsx(Button$1,{type:"text",disabled:a+1>=s,onClick:()=>c(a+1),children:jsxRuntimeExports.jsx(ChevronRight,{size:16,color:u.textStyle.color})})]}),ContextMenu=({items:a,style:s})=>jsxRuntimeExports.jsx(Dropdown,{menu:{items:a},placement:"top",arrow:!0,trigger:["click"],children:jsxRuntimeExports.jsx(Button$1,{type:"text",children:jsxRuntimeExports.jsx(Ellipsis,{size:16,color:s.textStyle.color})})}),CtlBar=a=>{const{token:s}=theme.useToken(),c=reactExports.useContext(I18nContext),{size:u,pageCursor:d,pageNum:p,setPageCursor:v,zoomLevel:A,setZoomLevel:b,addPageAfter:g,removePage:x}=a,y=[];g&&y.push({key:"1",label:jsxRuntimeExports.jsx("div",{onClick:g,children:c("addPageAfter")})}),x&&p>1&&d!==0&&y.push({key:"2",label:jsxRuntimeExports.jsx("div",{onClick:x,children:c("removePage")})});const f=300,m=y.length>0?50:0,C=(p>1?f:f/2)+m,S={color:s.colorWhite,fontSize:s.fontSize,margin:s.marginXS};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",top:"auto",bottom:"6%",width:u.width},children:jsxRuntimeExports.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-evenly",position:"relative",zIndex:1,left:`calc(50% - ${C/2}px)`,width:C,height:40,boxSizing:"border-box",padding:s.paddingSM,borderRadius:s.borderRadius,backgroundColor:s.colorBgMask},children:[p>1&&jsxRuntimeExports.jsx(Pager,{style:{textStyle:S},pageCursor:d,pageNum:p,setPageCursor:v}),jsxRuntimeExports.jsx(Zoom,{style:{textStyle:S},zoomLevel:A,setZoomLevel:b}),y.length>0&&jsxRuntimeExports.jsx(ContextMenu,{items:y,style:{textStyle:S}})]})})},scaleDragPosAdjustment=(a,s)=>s>1?a*(s-1):s<1?a*-(1-s):0,TemplateEditor=({template:a,size:s,onSaveTemplate:c,onChangeTemplate:u,onPageCursorChange:d})=>{const p=reactExports.useRef([]),v=reactExports.useRef([]),A=reactExports.useRef(null),b=reactExports.useRef([]),g=reactExports.useContext(I18nContext),x=reactExports.useContext(PluginsRegistry),y=reactExports.useContext(OptionsContext),f=useMaxZoom(),[m,C]=reactExports.useState(null),[S,w]=reactExports.useState([]),[I,P]=reactExports.useState([[]]),[$,_]=reactExports.useState(0),[E,R]=reactExports.useState(1),[T,B]=reactExports.useState(!0),[M,D]=reactExports.useState(null),{backgrounds:O,pageSizes:H,scale:j,error:Q,refresh:L}=useUIPreProcessor({template:a,size:s,zoomLevel:E,maxZoom:f}),F=ie=>{w(ie),C(null)},U=()=>{w([]),C(null)};useScrollPageCursor({ref:A,pageSizes:H,scale:j,pageCursor:$,onChangePageCursor:ie=>{_(ie),d(ie),U()}});const N=reactExports.useCallback(ie=>{v.current=[],p.current.push(cloneDeep$1(I[$]));const ce=cloneDeep$1(I);ce[$]=ie,P(ce),u(schemasList2template(ce,a.basePdf))},[a,I,$,u]),k=reactExports.useCallback(ie=>{N(I[$].filter(ce=>!ie.includes(ce.id))),U()},[I,$,N]),W=reactExports.useCallback(ie=>{changeSchemas({objs:ie,schemas:I[$],basePdf:a.basePdf,pluginsRegistry:x,pageSize:H[$],commitSchemas:N})},[N,$,I,x,H,a.basePdf]);useInitEvents({pageCursor:$,pageSizes:H,activeElements:S,template:a,schemasList:I,changeSchemas:W,commitSchemas:N,removeSchemas:k,onSaveTemplate:c,past:p,future:v,setSchemasList:P,onEdit:F,onEditEnd:U});const J=reactExports.useCallback(async ie=>{var ge;const ce=await template2SchemasList(ie);P(ce),U(),_(0),(ge=A.current)!=null&&ge.scroll&&A.current.scroll({top:0,behavior:"smooth"})},[]),q=ie=>{const[ce,ge,Se,be]=isBlankPdf(a.basePdf)?a.basePdf.padding:[0,0,0,0],me=H[$],fe=de=>{let le=I.reduce((Ce,$e)=>Ce+$e.length,1),xe=de+le;for(;I.some(Ce=>Ce.find($e=>$e.name===xe));)le++,xe=de+le;return xe},se=(de,le,xe)=>Math.min(Math.max(de,le),xe),oe={id:uuid$6(),...ie,name:fe(g("field")),position:{x:se(be,ie.position.x,me.width-ge-ie.width),y:se(ce,ie.position.y,me.height-Se-ie.height)},required:ie.readOnly?!1:y.requiredByDefault||ie.required||!1};if(ie.position.y===0){const de=b.current[$],le=de?de.getBoundingClientRect().top:0;oe.position.y=le>0?ce:H[$].height/2}N(I[$].concat(oe)),setTimeout(()=>F([document.getElementById(oe.id)]))},Y=ie=>{N(ie)},Z=ie=>{C(ie)},ee=async(ie,ce)=>{_(ce);const ge=schemasList2template(ie,a.basePdf);u(ge),await J(ge),L(ge),setTimeout(()=>{A.current&&(A.current.scrollTop=getPagesScrollTopByIndex(H,ce,j))},0)},re=()=>{if($===0||!window.confirm(g("removePageConfirm")))return;const ie=cloneDeep$1(I);ie.splice($,1),ee(ie,$-1)},ae=()=>{const ie=cloneDeep$1(I);ie.splice($+1,0,[]),ee(ie,$+1)};M!==a&&(D(a),J(a));const V=s.width-LEFT_SIDEBAR_WIDTH,K={width:T?V-RIGHT_SIDEBAR_WIDTH:V,height:s.height};if(Q)return jsxRuntimeExports.jsx(ErrorScreen,{size:s,error:Q});const te=isBlankPdf(a.basePdf)?{addPageAfter:ae,removePage:re}:{};return jsxRuntimeExports.jsx(Root$1,{size:s,scale:j,children:jsxRuntimeExports.jsxs(DndContext,{onDragEnd:ie=>{var le,xe;if(!ie.active)return;const ce=ie.active,ge=b.current[$].getBoundingClientRect(),Se=((le=ce.rect.current.initial)==null?void 0:le.left)||0,be=((xe=ce.rect.current.initial)==null?void 0:xe.top)||0,me=ge.left-Se+scaleDragPosAdjustment(20,j),fe=ge.top-be,se=(ie.delta.y-fe)/j,oe=(ie.delta.x-me)/j,de={x:round$1(px2mm(Math.max(0,oe)),2),y:round$1(px2mm(Math.max(0,se)),2)};q({...ce.data.current,position:de})},onDragStart:U,children:[jsxRuntimeExports.jsx(LeftSidebar,{height:A.current?A.current.clientHeight:0,scale:j,basePdf:a.basePdf}),jsxRuntimeExports.jsxs("div",{style:{position:"absolute",width:V,marginLeft:LEFT_SIDEBAR_WIDTH},children:[jsxRuntimeExports.jsx(CtlBar,{size:K,pageCursor:$,pageNum:I.length,setPageCursor:ie=>{A.current&&(A.current.scrollTop=getPagesScrollTopByIndex(H,ie,j),_(ie),U())},zoomLevel:E,setZoomLevel:R,...te}),jsxRuntimeExports.jsx(Sidebar,{hoveringSchemaId:m,onChangeHoveringSchemaId:Z,height:A.current?A.current.clientHeight:0,size:s,pageSize:H[$]??[],activeElements:S,schemasList:I,schemas:I[$]??[],changeSchemas:W,onSortEnd:Y,onEdit:ie=>{const ce=document.getElementById(ie);ce&&F([ce])},onEditEnd:U,deselectSchema:U,sidebarOpen:T,setSidebarOpen:B}),jsxRuntimeExports.jsx(Canvas$1,{ref:A,paperRefs:b,basePdf:a.basePdf,hoveringSchemaId:m,onChangeHoveringSchemaId:Z,height:s.height-RULER_HEIGHT*ZOOM,pageCursor:$,scale:j,size:K,pageSizes:H,backgrounds:O,activeElements:S,schemasList:I,changeSchemas:W,removeSchemas:k,sidebarOpen:T,onEdit:F})]})]})})},defaultTheme={token:{colorPrimary:"#38a0ff"},components:{Form:{fontSize:12,margin:8,marginLG:12,marginXS:4,padding:8,paddingLG:12,paddingXS:4,itemMarginBottom:4,verticalLabelPadding:"0 0 2px"}}},isObject=a=>!!a&&typeof a=="object"&&!Array.isArray(a),deepMerge=(a,s)=>{let c={...a};return isObject(a)&&isObject(s)&&Object.keys(s).forEach(u=>{const d=s[u];if(isObject(d))if(!(u in a))Object.assign(c,{[u]:d});else{const p=a[u];isObject(p)?c[u]=deepMerge(p,d):Object.assign(c,{[u]:d})}else Object.assign(c,{[u]:d})}),c},AppContextProvider=({children:a,lang:s,font:c,plugins:u,options:d})=>{let p=defaultTheme;d.theme&&(p=deepMerge(p,d.theme));let v=getDict(s);return d.labels&&(v=deepMerge(v,d.labels)),jsxRuntimeExports.jsx(ConfigProvider,{theme:p,children:jsxRuntimeExports.jsx(I18nContext.Provider,{value:A=>i18n(A,v),children:jsxRuntimeExports.jsx(FontContext.Provider,{value:c,children:jsxRuntimeExports.jsx(PluginsRegistry.Provider,{value:u,children:jsxRuntimeExports.jsx(OptionsContext.Provider,{value:d,children:a})})})})})};class Designer extends BaseUIClass{constructor(s){super(s),this.pageCursor=0,checkDesignerProps(s)}saveTemplate(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);this.onSaveTemplateCallback&&this.onSaveTemplateCallback(this.template)}updateTemplate(s){if(checkTemplate(s),!this.domContainer)throw Error(DESTROYED_ERR_MSG);this.template=cloneDeep$1(s),this.onChangeTemplateCallback&&this.onChangeTemplateCallback(s),this.render()}onSaveTemplate(s){this.onSaveTemplateCallback=s}onChangeTemplate(s){this.onChangeTemplateCallback=s}getPageCursor(){return this.pageCursor}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(TemplateEditor,{template:this.template,onSaveTemplate:s=>{this.template=s,this.template.pdfmeVersion=PDFME_VERSION,this.onSaveTemplateCallback&&this.onSaveTemplateCallback(s)},onChangeTemplate:s=>{this.template=s,this.template.pdfmeVersion=PDFME_VERSION,this.onChangeTemplateCallback&&this.onChangeTemplateCallback(s)},onPageCursorChange:s=>{this.pageCursor=s},size:this.size})}),this.domContainer)}}const{Text}=Typography,icons={left:ChevronLeft,right:ChevronRight,doubleLeft:ChevronsLeft,doubleRight:ChevronsRight},UnitButton=({type:a,onClick:s,disabled:c,textStyle:u})=>{const d=icons[a];return jsxRuntimeExports.jsx(Button$1,{type:"text",onClick:s,disabled:c,children:jsxRuntimeExports.jsx(d,{style:{color:u.color}})})},UnitPager=({size:a,unitCursor:s,unitNum:c,setUnitCursor:u})=>{if(c<=1)return null;const{token:d}=theme.useToken(),p={pointerEvents:"initial",position:"sticky",zIndex:1,display:"flex",alignItems:"center",boxSizing:"border-box",height:40,padding:d.paddingSM,borderRadius:d.borderRadius,backgroundColor:d.colorBgMask},v={color:d.colorWhite,fontSize:d.fontSize,margin:d.marginXS};return jsxRuntimeExports.jsx("div",{style:{position:"absolute",...a},children:jsxRuntimeExports.jsxs("div",{style:{position:"sticky",width:"100%",zIndex:1,top:`calc(50% - ${p.height/2}px)`,display:"flex",alignItems:"center"},children:[s>0&&jsxRuntimeExports.jsxs("div",{style:{left:"1rem",marginLeft:"1rem",...p},children:[jsxRuntimeExports.jsx(UnitButton,{type:"doubleLeft",onClick:()=>u(0),disabled:s<=0,textStyle:v}),jsxRuntimeExports.jsx(UnitButton,{type:"left",onClick:()=>u(s-1),disabled:s<=0,textStyle:v}),jsxRuntimeExports.jsxs(Text,{strong:!0,style:v,children:[s+1,"/",c]})]}),s+1<c&&jsxRuntimeExports.jsxs("div",{style:{right:"1rem",marginLeft:"auto",marginRight:"1rem",...p},children:[jsxRuntimeExports.jsxs(Text,{strong:!0,style:v,children:[s+1,"/",c]}),jsxRuntimeExports.jsx(UnitButton,{type:"right",onClick:()=>u(s+1),disabled:s+1>=c,textStyle:v}),jsxRuntimeExports.jsx(UnitButton,{type:"doubleRight",onClick:()=>u(c-1),disabled:s+1>=c,textStyle:v})]})]})})},_cache=new Map,Preview=({template:a,inputs:s,size:c,onChangeInput:u})=>{const{token:d}=theme.useToken(),p=reactExports.useContext(FontContext),v=useMaxZoom(),A=reactExports.useRef(null),b=reactExports.useRef([]),[g,x]=reactExports.useState(0),[y,f]=reactExports.useState(0),[m,C]=reactExports.useState(1),[S,w]=reactExports.useState([[]]),{backgrounds:I,pageSizes:P,scale:$,error:_,refresh:E}=useUIPreProcessor({template:a,size:c,zoomLevel:m,maxZoom:v}),R=!!u,T=s[g],B=O=>{getDynamicTemplate({template:O,input:T,options:{font:p},_cache,getDynamicHeights:(j,Q)=>{switch(Q.schema.type){case"table":return getDynamicHeightsForTable(j,Q);default:return Promise.resolve([Q.schema.height])}}}).then(async j=>{const Q=await template2SchemasList(j);w(Q),await E(j)}).catch(j=>console.error("[@pdfme/ui] ",j))};reactExports.useEffect(()=>{g>s.length-1&&x(s.length-1),B(a)},[a,s,c]),useScrollPageCursor({ref:A,pageSizes:P,scale:$,pageCursor:y,onChangePageCursor:f});const M=({name:O,value:H})=>u&&u({index:g,name:O,value:H}),D=(O,H)=>{let j=!1;O.forEach(({key:Q,value:L})=>{if(Q==="content"){const F=L,U=(T==null?void 0:T[H.name])||"";if(F===U)return;M({name:H.name,value:F}),H.type==="table"&&(j=!0)}else{const F=S[y].find(U=>U.id===H.id);if(!F)return;F[Q]=L}}),j&&B(a),w([...S])};return _?jsxRuntimeExports.jsx(ErrorScreen,{size:c,error:_}):jsxRuntimeExports.jsxs(Root$1,{size:c,scale:$,children:[jsxRuntimeExports.jsx(CtlBar,{size:c,pageCursor:y,pageNum:S.length,setPageCursor:O=>{A.current&&(A.current.scrollTop=getPagesScrollTopByIndex(P,O,$),f(O))},zoomLevel:m,setZoomLevel:C}),jsxRuntimeExports.jsx(UnitPager,{size:c,unitCursor:g,unitNum:s.length,setUnitCursor:x}),jsxRuntimeExports.jsx("div",{ref:A,style:{...c,position:"relative",overflow:"auto"},children:jsxRuntimeExports.jsx(Paper,{paperRefs:b,scale:$,size:c,schemasList:S,pageSizes:P,backgrounds:I,renderSchema:({schema:O,index:H})=>{const j=O.readOnly?replacePlaceholders({content:O.content||"",variables:{...T,totalPages:S.length,currentPage:H+1},schemas:S}):String(T&&T[O.name]||"");return jsxRuntimeExports.jsx(Renderer,{schema:O,basePdf:a.basePdf,value:j,mode:R?"form":"viewer",placeholder:O.content,tabIndex:H+100,onChange:Q=>{const L=Array.isArray(Q)?Q:[Q];D(L,O)},outline:R&&!O.readOnly?`1px dashed ${d.colorPrimary}`:"transparent",scale:$},O.id)},renderPaper:({index:O})=>jsxRuntimeExports.jsx(StaticSchema,{template:a,scale:$,input:T,totalPages:S.length,currentPage:O+1})})})]})};class Form extends PreviewUI{constructor(s){super(s)}onChangeInput(s){this.onChangeInputCallback=s}setInputs(s){const c=this.getInputs();super.setInputs(s);const u=[];s.forEach((d,p)=>{const v=c[p]||{};new Set([...Object.keys(d),...Object.keys(v)]).forEach(b=>{const g=d[b],x=v[b];g!==x&&u.push({index:p,name:b,value:g})})}),u.forEach(d=>{this.onChangeInputCallback&&this.onChangeInputCallback(d)})}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(Preview,{template:this.template,size:this.size,inputs:this.inputs,onChangeInput:s=>{const{index:c,value:u,name:d}=s;this.onChangeInputCallback&&this.onChangeInputCallback({index:c,value:u,name:d}),this.inputs&&this.inputs[c]&&this.inputs[c][d]!==u&&(this.inputs[c][d]=u,this.render())}})}),this.domContainer)}}class Viewer extends PreviewUI{constructor(s){super(s),console.warn("[@pdfme/ui] Viewer component is deprecated and will be removed in a future version.")}render(){if(!this.domContainer)throw Error(DESTROYED_ERR_MSG);ReactDOM.render(jsxRuntimeExports.jsx(AppContextProvider,{lang:this.getLang(),font:this.getFont(),plugins:this.getPluginsRegistry(),options:this.getOptions(),children:jsxRuntimeExports.jsx(Preview,{template:this.template,size:this.size,inputs:this.inputs})}),this.domContainer)}}exports.Designer=Designer,exports.Form=Form,exports.Viewer=Viewer,Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})});

package/dist/types/src/Viewer.d.ts

@@ -1,5 +1,8 @@
 import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class.js';
+/**
+ * @deprecated This component will be removed in a future version. Consider using an alternative solution.
+ */
 declare class Viewer extends PreviewUI {
     constructor(props: PreviewProps);
     protected render(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.3.13-dev.35",
+  "version": "5.3.13-dev.37",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/Viewer.tsx

@@ -6,9 +6,13 @@ import { DESTROYED_ERR_MSG } from './constants.js';
 import Preview from './components/Preview.js';
 import AppContextProvider from './components/AppContextProvider.js';
 
+/**
+ * @deprecated This component will be removed in a future version. Consider using an alternative solution.
+ */
 class Viewer extends PreviewUI {
   constructor(props: PreviewProps) {
     super(props);
+    console.warn('[@pdfme/ui] Viewer component is deprecated and will be removed in a future version.');
   }
 
   protected render() {