form-component-library-demo 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/index.cjs +1 -1
- package/dist/src/index.css +1 -1
- package/dist/src/index.js +90 -83
- package/package.json +1 -1
package/dist/src/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("react");c=s(c,1);let l=require("react/jsx-runtime"),u=require("lucide-react");var d=`field_library_token`,f=`field_library_user`,p=class{constructor({baseUrl:e,appId:t,onAuthError:n}){if(!e)throw Error(`baseUrl is required`);if(!t)throw Error(`appId is required`);if(this.baseUrl=e.replace(/\/+$/,``),this.appId=t,this.onAuthError=n,this.token=null,this.user=null,typeof window<`u`){this.token=localStorage.getItem(d);try{let e=localStorage.getItem(f);e&&(this.user=JSON.parse(e))}catch{this.user=null}}}setAuthErrorHandler(e){this.onAuthError=e}setToken(e){this.token=e,!(typeof window>`u`)&&(e?localStorage.setItem(d,e):(localStorage.removeItem(d),localStorage.removeItem(f),this.user=null))}getToken(){return this.token}async request(e,t,n,r={}){let i={"Content-Type":`application/json`,...r};return this.token&&(i.Authorization=`Bearer ${this.token}`),this.send(e,t,{headers:i,body:n===void 0?void 0:JSON.stringify(n)})}async requestForm(e,t){let n={};return this.token&&(n.Authorization=`Bearer ${this.token}`),this.send(`POST`,e,{headers:n,body:t})}async send(e,t,n){let r=await fetch(`${this.baseUrl}${t}`,{method:e,...n});if(r.status===401)throw this.setToken(null),this.onAuthError?.(),{status:401,message:`Unauthorized`};if(!r.ok){let e=r.statusText;try{let t=await r.json();t.error&&(e=t.error)}catch{}throw{status:r.status,message:e}}if(r.status!==204)return await r.json()}async login(e,t,n){let r=await this.request(`POST`,`/usr/login`,{email:e,password:t,...n?{org_id:Number(n)}:{}});return this.setToken(r.token),typeof window<`u`&&r.user&&(this.user=r.user,localStorage.setItem(f,JSON.stringify(r.user))),r}logout(){this.setToken(null)}async getMe(){let e=await this.request(`GET`,`/usr/app/${this.appId}/me`);return this.user&&(this.user={...this.user,...e},typeof window<`u`&&localStorage.setItem(f,JSON.stringify(this.user))),e}currentUser(){if(!this.token)return null;if(this.user)return this.user;try{let e=JSON.parse(atob(this.token.split(`.`)[1]));return{id:String(e.user_id??e.sub??``),org_id:String(e.org_id??``),name:e.name??``,email:e.email??``,mobile:String(e.mobile??e.mobile_number??e.phone??e.phone_number??e.user_mobile??``),roles:e.roles??[],groups:e.groups??[]}}catch{return null}}recordView(e,t={}){return this.request(`POST`,`/app/${this.appId}/view/recordview`,{rv_template_uid:e,...t.presetAlias?{preset_alias:t.presetAlias}:{},search_query:{page:t.page??1,limit:t.limit??50,sort_by:t.sortBy??``,sort_dir:t.sortDir??`desc`,search:t.search??``,filters:(t.filters??[]).map(e=>{let t={field_key:e.field_key,data_type:e.data_type??`character varying`};return e.values&&e.values.length>0?t.values=e.values:(t.value=e.value??``,t.value2=``),t})}})}detailView(e,t){return this.request(`GET`,`/app/${this.appId}/view/detailview/${e}?instance_id=${encodeURIComponent(String(t))}`)}audit(e){return this.request(`GET`,`/app/${this.appId}/view/audit?instance_id=${encodeURIComponent(String(e))}`)}aiDecisions(e){return this.request(`GET`,`/monitor/decisions?instance_id=${encodeURIComponent(String(e))}`).then(e=>e.decisions??[])}formSchema(e,t){return this.request(`POST`,`/app/${this.appId}/view/form-screens`,{activity_id:e,device_type:`desktop`,...t==null?{}:{instance_id:t}})}startInstance(e,t,n){return this.request(`POST`,`/app/${this.appId}/start`,{workflow_uuid:e,activity_id:t,data:n})}performActivity(e,t,n,r){return this.request(`POST`,`/app/${this.appId}/activity`,{workflow_uuid:e,instance_id:typeof t==`string`&&Number(t)||t,activity_id:n,data:r})}lookupRecords(e,t,n){return this.request(`POST`,`/app/${this.appId}/rdbms-templates/${t}/records`,{workflow_uuid:e,activity_id:n.activityId,field_id:n.fieldId,instance_id:n.instanceId||void 0,search:n.search??``,limit:n.limit??50,offset:0,form_data:n.formData??{}})}wfLookupRecords(e,t){return this.request(`POST`,`/app/${this.appId}/wf-lookup/records`,{workflow_uuid:e,activity_id:t.activityId,field_id:t.fieldId,form_data:t.formData??{},search:t.search??``,limit:t.limit??100,offset:t.offset??0})}datasetOptions(e,t){return this.request(`POST`,`/app/${this.appId}/dataset-options`,{workflow_uuid:e,activity_id:t.activityId,field_id:t.fieldId,instance_id:t.instanceId||void 0,search:t.search??``,limit:t.limit??200,offset:0,form_data:t.formData??{}})}getDatasets(){return this.request(`GET`,`/app/${this.appId}/datasets`)}getDataset(e){return this.request(`GET`,`/app/${this.appId}/datasets/${e}`)}createDataset(e){return this.request(`POST`,`/app/${this.appId}/datasets`,e)}updateDataset(e,t){return this.request(`PUT`,`/app/${this.appId}/datasets/${e}`,t)}fieldForm(e,t,n){let r=new FormData;return r.append(`file`,t),r.append(`workflow_uuid`,e),r.append(`activity_id`,n.activityId),r.append(`field_id`,n.fieldId),n.instanceId!=null&&r.append(`instance_id`,String(n.instanceId)),r}uploadFile(e,t,n){return this.requestForm(`/app/${this.appId}/upload`,this.fieldForm(e,t,n))}async extractOcr(e,t,n){if(t instanceof File||t instanceof Blob){let r=new FormData;return r.append(`file`,t),r.append(`store_file`,`true`),r.append(`workflow_uuid`,e),r.append(`activity_id`,n.activityId),r.append(`field_id`,n.fieldId),n.versionUuid&&r.append(`version_uuid`,n.versionUuid),n.instanceId!=null&&r.append(`instance_id`,String(n.instanceId)),this.requestForm(`/app/${this.appId}/ocr-extract`,r)}{let r={workflow_uuid:e,activity_id:n.activityId,field_id:n.fieldId,version_uuid:n.versionUuid,files:[t]};return n.instanceId!=null&&(r.instance_id=Number(n.instanceId)),{...await this.request(`POST`,`/app/${this.appId}/ocr-extract`,r),file:t}}}async getFilePreviewBlob(e){let t={};this.token&&(t.Authorization=`Bearer ${this.token}`);let n=await fetch(`${this.baseUrl}/app/${this.appId}/view/files/${e}/preview`,{method:`GET`,headers:t});if(n.status===401)throw this.setToken(null),this.onAuthError?.(),{status:401,message:`Unauthorized`};if(!n.ok)throw{status:n.status,message:`Failed to fetch preview`};return await n.blob()}},m={imagePreviewLoading:`_imagePreviewLoading_1rk84_1`,spinner:`_spinner_1rk84_10`,"zf-spin":`_zf-spin_1rk84_1`,spinnerSm:`_spinnerSm_1rk84_19`,imagePreviewError:`_imagePreviewError_1rk84_28`,imagePreview:`_imagePreview_1rk84_1`},h=(...e)=>e.filter(Boolean).join(` `);function g({file:e,client:t,className:n=``}){let[r,i]=(0,c.useState)(null),[a,o]=(0,c.useState)(!1),[s,u]=(0,c.useState)(!1);return(0,c.useEffect)(()=>{let n=null,r=!0;async function a(){if(!e){r&&i(null);return}if(e instanceof File){n=URL.createObjectURL(e),r&&i(n);return}if(e.uuid){r&&o(!0);try{let a=await t.getFilePreviewBlob(e.uuid);n=URL.createObjectURL(a),r&&i(n)}catch(e){console.error(`Failed to load image preview:`,e),r&&u(!0)}finally{r&&o(!1)}}}return a(),()=>{r=!1,n&&URL.revokeObjectURL(n)}},[e,t]),a?(0,l.jsx)(`div`,{className:h(m.imagePreviewLoading,n),children:(0,l.jsx)(`div`,{className:h(m.spinner,m.spinnerSm)})}):s||!r?(0,l.jsx)(`div`,{className:h(m.imagePreviewError,n),children:s?`Preview failed`:`No preview`}):(0,l.jsx)(`img`,{src:r,alt:`Preview`,className:h(m.imagePreview,n)})}var _={fieldContainer:`_fieldContainer_rw765_2`,label:`_label_rw765_14`,fieldBody:`_fieldBody_rw765_20`,sizeSm:`_sizeSm_rw765_27`,dropzone:`_dropzone_rw765_27`,sizeMd:`_sizeMd_rw765_28`,sizeLg:`_sizeLg_rw765_29`,variantPrimary:`_variantPrimary_rw765_32`,dropzoneIcon:`_dropzoneIcon_rw765_34`,dropzoneText:`_dropzoneText_rw765_34`,variantSecondary:`_variantSecondary_rw765_36`,variantDanger:`_variantDanger_rw765_40`,dropzoneLoading:`_dropzoneLoading_rw765_58`,spinner:`_spinner_rw765_100`,"zf-spin":`_zf-spin_rw765_1`,spinnerSm:`_spinnerSm_rw765_114`,previewList:`_previewList_rw765_124`,previewCard:`_previewCard_rw765_131`,previewSizeSm:`_previewSizeSm_rw765_141`,previewSizeMd:`_previewSizeMd_rw765_142`,previewSizeLg:`_previewSizeLg_rw765_143`,documentPreview:`_documentPreview_rw765_145`,fileIcon:`_fileIcon_rw765_161`,documentName:`_documentName_rw765_168`,removeBtn:`_removeBtn_rw765_178`,retryBtnIcon:`_retryBtnIcon_rw765_198`,overlay:`_overlay_rw765_218`,extractedPanel:`_extractedPanel_rw765_230`,extractedTitle:`_extractedTitle_rw765_239`,extractedList:`_extractedList_rw765_246`,extractedItem:`_extractedItem_rw765_252`,extractedKey:`_extractedKey_rw765_263`,extractedVal:`_extractedVal_rw765_270`,hidden:`_hidden_rw765_282`,errorText:`_errorText_rw765_283`,btnSecondary:`_btnSecondary_rw765_284`},v=(...e)=>e.filter(Boolean).join(` `),y=e=>{let t=e.name||e.original_name||``,n=e.type||e.mime_type||``;return t.endsWith(`.pdf`)||n.includes(`pdf`)||t.match(/\.(doc|docx|txt)$/i)?(0,l.jsx)(u.FileText,{className:_.fileIcon}):(0,l.jsx)(u.File,{className:_.fileIcon})};function b({label:e,value:t,onChange:n,onExtracted:r,onProcess:i,fieldMap:a,showExtracted:o=!0,accept:s=`image/*,application/pdf`,variant:d=`primary`,size:f=`md`,previewSize:p=`md`,width:m=`full`,className:h=``}){let[b,x]=(0,c.useState)(!1),[S,C]=(0,c.useState)(null),[w,T]=(0,c.useState)(null),E=(0,c.useRef)(null),D=Array.isArray(t)?t:t?[t]:[],O=e=>{if(e.file&&n(e.file),e.extract_error)C(e.extract_error);else if(e.extracted){T(e.extracted);let t={...e.extracted};if(a){if(t={},Array.isArray(a))for(let[n,r]of Object.entries(e.extracted)){let e=a.find(e=>e.source===n||e.extractKey===n),i=e?e.target||e.fieldId:n;t[i]=r}else for(let[n,r]of Object.entries(e.extracted)){let e=a[n]||n;t[e]=r}}r&&r(t)}},k=async e=>{let t=e.target.files?.[0];if(t){x(!0),C(null),T(null);try{let e=await i(t);O(e)}catch(e){console.error(e),C(`OCR extraction failed`)}finally{x(!1),E.current&&(E.current.value=``)}}},A=async e=>{x(!0),C(null);try{let t=await i(e);O(t)}catch(e){console.error(e),C(`OCR extraction retry failed`)}finally{x(!1)}},j=e=>{let t=[...D];if(t.splice(e,1),n(t.length===0?null:t),t.length===0){if(w&&r){let e={};if(a){if(Array.isArray(a))for(let t of Object.keys(w)){let n=a.find(e=>e.source===t||e.extractKey===t),r=n?n.target||n.fieldId:t;e[r]=``}else for(let t of Object.keys(w)){let n=a[t]||t;e[n]=``}}else for(let t of Object.keys(w))e[t]=``;r(e)}T(null)}},M=e=>e instanceof File?e.type.startsWith(`image/`):e.mime_type?e.mime_type.startsWith(`image/`):e.original_name?/\.(jpg|jpeg|png|gif|webp)$/i.test(e.original_name):!1,N=m===`full`?{width:`100%`}:{width:m};return(0,l.jsxs)(`div`,{className:v(_.fieldContainer,_[`variant${d.charAt(0).toUpperCase()+d.slice(1)}`],_[`size${f.charAt(0).toUpperCase()+f.slice(1)}`],_[`previewSize${p.charAt(0).toUpperCase()+p.slice(1)}`],h),style:N,children:[(0,l.jsxs)(`label`,{className:_.label,children:[e,` (OCR)`]}),(0,l.jsxs)(`div`,{className:_.fieldBody,children:[D.length===0&&(0,l.jsxs)(`div`,{className:v(_.dropzone,b&&_.dropzoneLoading),onClick:()=>E.current?.click(),children:[(0,l.jsx)(`input`,{ref:E,type:`file`,onChange:k,disabled:b,accept:s,className:_.hidden}),b?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`div`,{className:v(_.spinner,_.spinnerSm,_.dropzoneIcon)}),(0,l.jsx)(`p`,{className:_.dropzoneText,children:`Extracting OCR data...`})]}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(u.FileUp,{className:_.dropzoneIcon}),(0,l.jsx)(`p`,{className:_.dropzoneText,children:`Drop a document to extract`})]})]}),D.length>0&&(0,l.jsx)(`div`,{className:_.previewList,children:D.map((e,t)=>(0,l.jsxs)(`div`,{className:_.previewCard,children:[M(e)?(0,l.jsx)(g,{file:e}):(0,l.jsxs)(`div`,{className:_.documentPreview,children:[y(e),(0,l.jsx)(`span`,{className:_.documentName,title:e.name||e.original_name,children:e.name||e.original_name||`Document`})]}),b&&(0,l.jsx)(`div`,{className:_.overlay,children:(0,l.jsx)(`div`,{className:_.spinner})}),!b&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`button`,{type:`button`,onClick:()=>A(e),className:_.retryBtnIcon,title:`Retry extraction`,children:(0,l.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`12`,height:`12`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[(0,l.jsx)(`path`,{d:`M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`}),(0,l.jsx)(`path`,{d:`M3 3v5h5`}),(0,l.jsx)(`path`,{d:`M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16`}),(0,l.jsx)(`path`,{d:`M16 21v-5h5`})]})}),(0,l.jsx)(`button`,{type:`button`,onClick:()=>j(t),className:_.removeBtn,title:`Remove file`,children:(0,l.jsx)(u.X,{size:12,strokeWidth:3})})]})]},t))}),S&&(0,l.jsxs)(`div`,{className:_.fieldBody,children:[(0,l.jsx)(`p`,{className:_.errorText,children:S}),D.length>0&&!w&&(0,l.jsx)(`button`,{type:`button`,onClick:()=>A(D[0]),disabled:b,className:_.btnSecondary,style:{alignSelf:`flex-start`},children:b?`Retrying...`:`Retry Extraction`})]}),o&&w&&(0,l.jsxs)(`div`,{className:_.extractedPanel,children:[(0,l.jsx)(`p`,{className:_.extractedTitle,children:`Extracted Data`}),(0,l.jsx)(`div`,{className:_.extractedList,children:Object.entries(w).map(([e,t])=>(0,l.jsxs)(`div`,{className:_.extractedItem,children:[(0,l.jsx)(`span`,{className:_.extractedKey,children:e.replace(/_/g,` `)}),(0,l.jsx)(`span`,{className:_.extractedVal,children:String(t)})]},e))})]})]})]})}exports.ImagePreview=g,exports.OcrField=b,exports.ZinoClient=p;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("react");c=s(c,1);let l=require("react/jsx-runtime"),u=require("lucide-react");var d=`field_library_token`,f=`field_library_user`,p=class{constructor({baseUrl:e,appId:t,onAuthError:n}){if(!e)throw Error(`baseUrl is required`);if(!t)throw Error(`appId is required`);if(this.baseUrl=e.replace(/\/+$/,``),this.appId=t,this.onAuthError=n,this.token=null,this.user=null,typeof window<`u`){this.token=localStorage.getItem(d);try{let e=localStorage.getItem(f);e&&(this.user=JSON.parse(e))}catch{this.user=null}}}setAuthErrorHandler(e){this.onAuthError=e}setToken(e){this.token=e,!(typeof window>`u`)&&(e?localStorage.setItem(d,e):(localStorage.removeItem(d),localStorage.removeItem(f),this.user=null))}getToken(){return this.token}async request(e,t,n,r={}){let i={"Content-Type":`application/json`,...r};return this.token&&(i.Authorization=`Bearer ${this.token}`),this.send(e,t,{headers:i,body:n===void 0?void 0:JSON.stringify(n)})}async requestForm(e,t){let n={};return this.token&&(n.Authorization=`Bearer ${this.token}`),this.send(`POST`,e,{headers:n,body:t})}async send(e,t,n){let r=await fetch(`${this.baseUrl}${t}`,{method:e,...n});if(r.status===401)throw this.setToken(null),this.onAuthError?.(),{status:401,message:`Unauthorized`};if(!r.ok){let e=r.statusText;try{let t=await r.json();t.error&&(e=t.error)}catch{}throw{status:r.status,message:e}}if(r.status!==204)return await r.json()}async login(e,t,n){let r=await this.request(`POST`,`/usr/login`,{email:e,password:t,...n?{org_id:Number(n)}:{}});return this.setToken(r.token),typeof window<`u`&&r.user&&(this.user=r.user,localStorage.setItem(f,JSON.stringify(r.user))),r}logout(){this.setToken(null)}async getMe(){let e=await this.request(`GET`,`/usr/app/${this.appId}/me`);return this.user&&(this.user={...this.user,...e},typeof window<`u`&&localStorage.setItem(f,JSON.stringify(this.user))),e}currentUser(){if(!this.token)return null;if(this.user)return this.user;try{let e=JSON.parse(atob(this.token.split(`.`)[1]));return{id:String(e.user_id??e.sub??``),org_id:String(e.org_id??``),name:e.name??``,email:e.email??``,mobile:String(e.mobile??e.mobile_number??e.phone??e.phone_number??e.user_mobile??``),roles:e.roles??[],groups:e.groups??[]}}catch{return null}}recordView(e,t={}){return this.request(`POST`,`/app/${this.appId}/view/recordview`,{rv_template_uid:e,...t.presetAlias?{preset_alias:t.presetAlias}:{},search_query:{page:t.page??1,limit:t.limit??50,sort_by:t.sortBy??``,sort_dir:t.sortDir??`desc`,search:t.search??``,filters:(t.filters??[]).map(e=>{let t={field_key:e.field_key,data_type:e.data_type??`character varying`};return e.values&&e.values.length>0?t.values=e.values:(t.value=e.value??``,t.value2=``),t})}})}detailView(e,t){return this.request(`GET`,`/app/${this.appId}/view/detailview/${e}?instance_id=${encodeURIComponent(String(t))}`)}audit(e){return this.request(`GET`,`/app/${this.appId}/view/audit?instance_id=${encodeURIComponent(String(e))}`)}aiDecisions(e){return this.request(`GET`,`/monitor/decisions?instance_id=${encodeURIComponent(String(e))}`).then(e=>e.decisions??[])}formSchema(e,t){return this.request(`POST`,`/app/${this.appId}/view/form-screens`,{activity_id:e,device_type:`desktop`,...t==null?{}:{instance_id:t}})}startInstance(e,t,n){return this.request(`POST`,`/app/${this.appId}/start`,{workflow_uuid:e,activity_id:t,data:n})}performActivity(e,t,n,r){return this.request(`POST`,`/app/${this.appId}/activity`,{workflow_uuid:e,instance_id:typeof t==`string`&&Number(t)||t,activity_id:n,data:r})}lookupRecords(e,t,n){return this.request(`POST`,`/app/${this.appId}/rdbms-templates/${t}/records`,{workflow_uuid:e,activity_id:n.activityId,field_id:n.fieldId,instance_id:n.instanceId||void 0,search:n.search??``,limit:n.limit??50,offset:0,form_data:n.formData??{}})}wfLookupRecords(e,t){return this.request(`POST`,`/app/${this.appId}/wf-lookup/records`,{workflow_uuid:e,activity_id:t.activityId,field_id:t.fieldId,form_data:t.formData??{},search:t.search??``,limit:t.limit??100,offset:t.offset??0})}datasetOptions(e,t){return this.request(`POST`,`/app/${this.appId}/dataset-options`,{workflow_uuid:e,activity_id:t.activityId,field_id:t.fieldId,instance_id:t.instanceId||void 0,search:t.search??``,limit:t.limit??200,offset:0,form_data:t.formData??{}})}getDatasets(){return this.request(`GET`,`/app/${this.appId}/datasets`)}getDataset(e){return this.request(`GET`,`/app/${this.appId}/datasets/${e}`)}createDataset(e){return this.request(`POST`,`/app/${this.appId}/datasets`,e)}updateDataset(e,t){return this.request(`PUT`,`/app/${this.appId}/datasets/${e}`,t)}fieldForm(e,t,n){let r=new FormData;return r.append(`file`,t),r.append(`workflow_uuid`,e),r.append(`activity_id`,n.activityId),r.append(`field_id`,n.fieldId),n.instanceId!=null&&r.append(`instance_id`,String(n.instanceId)),r}uploadFile(e,t,n){return this.requestForm(`/app/${this.appId}/upload`,this.fieldForm(e,t,n))}async extractOcr(e,t,n){if(t instanceof File||t instanceof Blob){let r=new FormData;return r.append(`file`,t),r.append(`store_file`,`true`),r.append(`workflow_uuid`,e),r.append(`activity_id`,n.activityId),r.append(`field_id`,n.fieldId),n.versionUuid&&r.append(`version_uuid`,n.versionUuid),n.instanceId!=null&&r.append(`instance_id`,String(n.instanceId)),this.requestForm(`/app/${this.appId}/ocr-extract`,r)}{let r={workflow_uuid:e,activity_id:n.activityId,field_id:n.fieldId,version_uuid:n.versionUuid,files:[t]};return n.instanceId!=null&&(r.instance_id=Number(n.instanceId)),{...await this.request(`POST`,`/app/${this.appId}/ocr-extract`,r),file:t}}}async getFilePreviewBlob(e){let t={};this.token&&(t.Authorization=`Bearer ${this.token}`);let n=await fetch(`${this.baseUrl}/app/${this.appId}/view/files/${e}/preview`,{method:`GET`,headers:t});if(n.status===401)throw this.setToken(null),this.onAuthError?.(),{status:401,message:`Unauthorized`};if(!n.ok)throw{status:n.status,message:`Failed to fetch preview`};return await n.blob()}},m={imagePreviewLoading:`_imagePreviewLoading_1rk84_1`,spinner:`_spinner_1rk84_10`,"zf-spin":`_zf-spin_1rk84_1`,spinnerSm:`_spinnerSm_1rk84_19`,imagePreviewError:`_imagePreviewError_1rk84_28`,imagePreview:`_imagePreview_1rk84_1`},h=(...e)=>e.filter(Boolean).join(` `);function g({file:e,client:t,className:n=``}){let[r,i]=(0,c.useState)(null),[a,o]=(0,c.useState)(!1),[s,u]=(0,c.useState)(!1);return(0,c.useEffect)(()=>{let n=null,r=!0;async function a(){if(!e){r&&i(null);return}if(e instanceof File){n=URL.createObjectURL(e),r&&i(n);return}if(e.uuid){if(!t){console.warn(`ImagePreview: 'client' prop is missing, cannot load remote preview`),r&&u(!0);return}r&&o(!0);try{let a=await t.getFilePreviewBlob(e.uuid);n=URL.createObjectURL(a),r&&i(n)}catch(e){console.error(`Failed to load image preview:`,e),r&&u(!0)}finally{r&&o(!1)}}}return a(),()=>{r=!1,n&&URL.revokeObjectURL(n)}},[e,t]),a?(0,l.jsx)(`div`,{className:h(m.imagePreviewLoading,n),children:(0,l.jsx)(`div`,{className:h(m.spinner,m.spinnerSm)})}):s||!r?(0,l.jsx)(`div`,{className:h(m.imagePreviewError,n),children:s?`Preview failed`:`No preview`}):(0,l.jsx)(`img`,{src:r,alt:`Preview`,className:h(m.imagePreview,n)})}var _={fieldContainer:`_fieldContainer_19pm5_2`,label:`_label_19pm5_14`,fieldBody:`_fieldBody_19pm5_20`,sizeSm:`_sizeSm_19pm5_27`,dropzone:`_dropzone_19pm5_27`,sizeMd:`_sizeMd_19pm5_28`,sizeLg:`_sizeLg_19pm5_29`,variantPrimary:`_variantPrimary_19pm5_32`,dropzoneIcon:`_dropzoneIcon_19pm5_34`,dropzoneText:`_dropzoneText_19pm5_34`,variantSecondary:`_variantSecondary_19pm5_36`,variantDanger:`_variantDanger_19pm5_40`,dropzoneLoading:`_dropzoneLoading_19pm5_60`,spinner:`_spinner_19pm5_102`,"zf-spin":`_zf-spin_19pm5_1`,spinnerSm:`_spinnerSm_19pm5_116`,previewList:`_previewList_19pm5_126`,previewCard:`_previewCard_19pm5_133`,previewSizeSm:`_previewSizeSm_19pm5_143`,previewSizeMd:`_previewSizeMd_19pm5_144`,previewSizeLg:`_previewSizeLg_19pm5_145`,documentPreview:`_documentPreview_19pm5_147`,fileIcon:`_fileIcon_19pm5_163`,documentName:`_documentName_19pm5_170`,removeBtn:`_removeBtn_19pm5_180`,retryBtnIcon:`_retryBtnIcon_19pm5_200`,overlay:`_overlay_19pm5_220`,extractedPanel:`_extractedPanel_19pm5_232`,extractedTitle:`_extractedTitle_19pm5_241`,extractedList:`_extractedList_19pm5_248`,extractedItem:`_extractedItem_19pm5_254`,extractedKey:`_extractedKey_19pm5_265`,extractedVal:`_extractedVal_19pm5_272`,hidden:`_hidden_19pm5_284`,errorText:`_errorText_19pm5_285`,btnSecondary:`_btnSecondary_19pm5_286`},v=(...e)=>e.filter(Boolean).join(` `),y=e=>{let t=e.name||e.original_name||``,n=e.type||e.mime_type||``;return t.endsWith(`.pdf`)||n.includes(`pdf`)||t.match(/\.(doc|docx|txt)$/i)?(0,l.jsx)(u.FileText,{className:_.fileIcon}):(0,l.jsx)(u.File,{className:_.fileIcon})};function b({label:e,value:t,onChange:n,onExtracted:r,onProcess:i,fieldMap:a,client:o,showExtracted:s=!0,accept:d=`image/*,application/pdf`,variant:f=`primary`,size:p=`md`,previewSize:m=`md`,width:h=`full`,className:b=``}){let[x,S]=(0,c.useState)(!1),[C,w]=(0,c.useState)(null),[T,E]=(0,c.useState)(null),D=(0,c.useRef)(null),O=Array.isArray(t)?t:t?[t]:[],k=e=>{if(e.file&&n(e.file),e.extract_error)w(e.extract_error);else if(e.extracted){E(e.extracted);let t={...e.extracted};if(a){if(t={},Array.isArray(a))for(let[n,r]of Object.entries(e.extracted)){let e=a.find(e=>e.source===n||e.extractKey===n),i=e?e.target||e.fieldId:n;t[i]=r}else for(let[n,r]of Object.entries(e.extracted)){let e=a[n]||n;t[e]=r}}r&&r(t)}},A=async e=>{let t=e.target.files?.[0];if(t){S(!0),w(null),E(null);try{let e=await i(t);k(e)}catch(e){console.error(e),w(`OCR extraction failed`)}finally{S(!1),D.current&&(D.current.value=``)}}},j=async e=>{S(!0),w(null);try{let t=await i(e);k(t)}catch(e){console.error(e),w(`OCR extraction retry failed`)}finally{S(!1)}},M=e=>{let t=[...O];if(t.splice(e,1),n(t.length===0?null:t),t.length===0){if(T&&r){let e={};if(a){if(Array.isArray(a))for(let t of Object.keys(T)){let n=a.find(e=>e.source===t||e.extractKey===t),r=n?n.target||n.fieldId:t;e[r]=``}else for(let t of Object.keys(T)){let n=a[t]||t;e[n]=``}}else for(let t of Object.keys(T))e[t]=``;r(e)}E(null)}},N=e=>e instanceof File?e.type.startsWith(`image/`):e.mime_type?e.mime_type.startsWith(`image/`):e.original_name?/\.(jpg|jpeg|png|gif|webp)$/i.test(e.original_name):!1,P=h===`full`?{width:`100%`}:{width:h};return(0,l.jsxs)(`div`,{className:v(_.fieldContainer,_[`variant${f.charAt(0).toUpperCase()+f.slice(1)}`],_[`size${p.charAt(0).toUpperCase()+p.slice(1)}`],_[`previewSize${m.charAt(0).toUpperCase()+m.slice(1)}`],b),style:P,children:[(0,l.jsxs)(`label`,{className:_.label,children:[e,` (OCR)`]}),(0,l.jsxs)(`div`,{className:_.fieldBody,children:[O.length===0&&(0,l.jsxs)(`div`,{className:v(_.dropzone,x&&_.dropzoneLoading),onClick:()=>D.current?.click(),children:[(0,l.jsx)(`input`,{ref:D,type:`file`,onChange:A,disabled:x,accept:d,className:_.hidden}),x?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`div`,{className:v(_.spinner,_.spinnerSm,_.dropzoneIcon)}),(0,l.jsx)(`p`,{className:_.dropzoneText,children:`Extracting OCR data...`})]}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(u.FileUp,{className:_.dropzoneIcon}),(0,l.jsx)(`p`,{className:_.dropzoneText,children:`Drop a document to extract`})]})]}),O.length>0&&(0,l.jsx)(`div`,{className:_.previewList,children:O.map((e,t)=>(0,l.jsxs)(`div`,{className:_.previewCard,children:[N(e)?(0,l.jsx)(g,{file:e,client:o}):(0,l.jsxs)(`div`,{className:_.documentPreview,children:[y(e),(0,l.jsx)(`span`,{className:_.documentName,title:e.name||e.original_name,children:e.name||e.original_name||`Document`})]}),x&&(0,l.jsx)(`div`,{className:_.overlay,children:(0,l.jsx)(`div`,{className:_.spinner})}),!x&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`button`,{type:`button`,onClick:()=>j(e),className:_.retryBtnIcon,title:`Retry extraction`,children:(0,l.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`12`,height:`12`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[(0,l.jsx)(`path`,{d:`M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`}),(0,l.jsx)(`path`,{d:`M3 3v5h5`}),(0,l.jsx)(`path`,{d:`M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16`}),(0,l.jsx)(`path`,{d:`M16 21v-5h5`})]})}),(0,l.jsx)(`button`,{type:`button`,onClick:()=>M(t),className:_.removeBtn,title:`Remove file`,children:(0,l.jsx)(u.X,{size:12,strokeWidth:3})})]})]},t))}),C&&(0,l.jsxs)(`div`,{className:_.fieldBody,children:[(0,l.jsx)(`p`,{className:_.errorText,children:C}),O.length>0&&!T&&(0,l.jsx)(`button`,{type:`button`,onClick:()=>j(O[0]),disabled:x,className:_.btnSecondary,style:{alignSelf:`flex-start`},children:x?`Retrying...`:`Retry Extraction`})]}),s&&T&&(0,l.jsxs)(`div`,{className:_.extractedPanel,children:[(0,l.jsx)(`p`,{className:_.extractedTitle,children:`Extracted Data`}),(0,l.jsx)(`div`,{className:_.extractedList,children:Object.entries(T).map(([e,t])=>(0,l.jsxs)(`div`,{className:_.extractedItem,children:[(0,l.jsx)(`span`,{className:_.extractedKey,children:e.replace(/_/g,` `)}),(0,l.jsx)(`span`,{className:_.extractedVal,children:String(t)})]},e))})]})]})]})}exports.ImagePreview=g,exports.OcrField=b,exports.ZinoClient=p;
|
package/dist/src/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--zf-primary-color:#3b82f6;--zf-primary-hover:#2563eb;--zf-primary-bg-subtle:#3b82f605;--zf-primary-bg-hover:#3b82f614;--zf-secondary-color:#64748b;--zf-secondary-hover:#475569;--zf-secondary-bg-hover:#64748b14;--zf-danger-color:#ef4444;--zf-danger-hover:#dc2828;--zf-danger-bg:#fee2e2;--zf-danger-bg-hover:#ef444426;--zf-border-color:#e2e8f0;--zf-text-color:#0f172a;--zf-text-muted:#64748b;--zf-text-inverse:#fff;--zf-surface-bg:#fff;--zf-surface-subtle:#f1f5f9;--zf-surface-overlay:#ffffffb3;--zf-font-family:inherit;--zf-font-size-xs:.75rem;--zf-font-size-sm:.875rem;--zf-font-size-md:1rem;--zf-font-size-lg:1.125rem;--zf-font-weight-normal:400;--zf-font-weight-medium:500;--zf-font-weight-semibold:600;--zf-font-weight-bold:700;--zf-spacing-1:.25rem;--zf-spacing-1-5:.375rem;--zf-spacing-2:.5rem;--zf-spacing-3:.75rem;--zf-spacing-4:1rem;--zf-spacing-5:1.25rem;--zf-spacing-6:1.5rem;--zf-spacing-8:2rem;--zf-spacing-16:4rem;--zf-radius-sm:.25rem;--zf-radius-md:.375rem;--zf-radius:.5rem;--zf-radius-lg:.5rem;--zf-radius-full:9999px;--zf-shadow-sm:0 1px 2px 0 #0000000d;--zf-shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--zf-shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--zf-screen-sm:640px;--zf-screen-md:768px;--zf-screen-lg:1024px;--zf-screen-xl:1280px;--zf-z-base:1;--zf-z-overlay:10;--zf-z-modal:50;--zf-z-max:9999}._imagePreviewLoading_1rk84_1{background-color:var(--zf-surface-subtle);justify-content:center;align-items:center;width:100%;height:100%;display:flex}._spinner_1rk84_10{width:var(--zf-spacing-8);height:var(--zf-spacing-8);border:2px solid var(--zf-primary-color);border-radius:var(--zf-radius-full);border-top-color:#0000;animation:1s linear infinite _zf-spin_1rk84_1}._spinnerSm_1rk84_19{width:var(--zf-spacing-6);height:var(--zf-spacing-6)}@keyframes _zf-spin_1rk84_1{to{transform:rotate(360deg)}}._imagePreviewError_1rk84_28{background-color:var(--zf-danger-bg);color:var(--zf-danger-color);font-size:var(--zf-font-size-xs);text-align:center;padding:var(--zf-spacing-2);justify-content:center;align-items:center;width:100%;height:100%;display:flex}._imagePreview_1rk84_1{object-fit:cover;width:100%;height:100%}.
|
|
1
|
+
:root{--zf-primary-color:#3b82f6;--zf-primary-hover:#2563eb;--zf-primary-bg-subtle:#3b82f605;--zf-primary-bg-hover:#3b82f614;--zf-secondary-color:#64748b;--zf-secondary-hover:#475569;--zf-secondary-bg-hover:#64748b14;--zf-danger-color:#ef4444;--zf-danger-hover:#dc2828;--zf-danger-bg:#fee2e2;--zf-danger-bg-hover:#ef444426;--zf-border-color:#e2e8f0;--zf-border-style:dashed;--zf-text-color:#0f172a;--zf-text-muted:#64748b;--zf-text-inverse:#fff;--zf-surface-bg:#fff;--zf-surface-subtle:#f1f5f9;--zf-surface-overlay:#ffffffb3;--zf-font-family:inherit;--zf-font-size-xs:.75rem;--zf-font-size-sm:.875rem;--zf-font-size-md:1rem;--zf-font-size-lg:1.125rem;--zf-font-weight-normal:400;--zf-font-weight-medium:500;--zf-font-weight-semibold:600;--zf-font-weight-bold:700;--zf-spacing-1:.25rem;--zf-spacing-1-5:.375rem;--zf-spacing-2:.5rem;--zf-spacing-3:.75rem;--zf-spacing-4:1rem;--zf-spacing-5:1.25rem;--zf-spacing-6:1.5rem;--zf-spacing-8:2rem;--zf-spacing-16:4rem;--zf-radius-sm:.25rem;--zf-radius-md:.375rem;--zf-radius:.5rem;--zf-radius-lg:.5rem;--zf-radius-full:9999px;--zf-shadow-sm:0 1px 2px 0 #0000000d;--zf-shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--zf-shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--zf-screen-sm:640px;--zf-screen-md:768px;--zf-screen-lg:1024px;--zf-screen-xl:1280px;--zf-z-base:1;--zf-z-overlay:10;--zf-z-modal:50;--zf-z-max:9999}._imagePreviewLoading_1rk84_1{background-color:var(--zf-surface-subtle);justify-content:center;align-items:center;width:100%;height:100%;display:flex}._spinner_1rk84_10{width:var(--zf-spacing-8);height:var(--zf-spacing-8);border:2px solid var(--zf-primary-color);border-radius:var(--zf-radius-full);border-top-color:#0000;animation:1s linear infinite _zf-spin_1rk84_1}._spinnerSm_1rk84_19{width:var(--zf-spacing-6);height:var(--zf-spacing-6)}@keyframes _zf-spin_1rk84_1{to{transform:rotate(360deg)}}._imagePreviewError_1rk84_28{background-color:var(--zf-danger-bg);color:var(--zf-danger-color);font-size:var(--zf-font-size-xs);text-align:center;padding:var(--zf-spacing-2);justify-content:center;align-items:center;width:100%;height:100%;display:flex}._imagePreview_1rk84_1{object-fit:cover;width:100%;height:100%}._fieldContainer_19pm5_2{gap:var(--zf-spacing-2);font-family:var(--zf-font-family);box-sizing:border-box;flex-direction:column;display:flex}._fieldContainer_19pm5_2 *{box-sizing:border-box}._label_19pm5_14{font-size:var(--zf-font-size-sm);font-weight:var(--zf-font-weight-semibold);color:var(--zf-text-color)}._fieldBody_19pm5_20{gap:var(--zf-spacing-3);flex-direction:column;display:flex}._sizeSm_19pm5_27 ._dropzone_19pm5_27{padding:var(--zf-spacing-4);min-height:auto}._sizeMd_19pm5_28 ._dropzone_19pm5_27{padding:var(--zf-spacing-8) var(--zf-spacing-6)}._sizeLg_19pm5_29 ._dropzone_19pm5_27{padding:var(--zf-spacing-16) var(--zf-spacing-8)}._variantPrimary_19pm5_32 ._dropzone_19pm5_27{border-color:var(--zf-primary-color);background-color:var(--zf-primary-bg-subtle)}._variantPrimary_19pm5_32 ._dropzone_19pm5_27:hover{border-color:var(--zf-primary-hover);background-color:var(--zf-primary-bg-hover)}._variantPrimary_19pm5_32 ._dropzoneIcon_19pm5_34,._variantPrimary_19pm5_32 ._dropzoneText_19pm5_34{color:var(--zf-primary-color)}._variantSecondary_19pm5_36 ._dropzone_19pm5_27{border-color:var(--zf-border-color);background-color:var(--zf-surface-subtle)}._variantSecondary_19pm5_36 ._dropzone_19pm5_27:hover{border-color:var(--zf-secondary-color);background-color:var(--zf-secondary-bg-hover)}._variantSecondary_19pm5_36 ._dropzoneIcon_19pm5_34{color:var(--zf-secondary-color)}._variantDanger_19pm5_40 ._dropzone_19pm5_27{border-color:var(--zf-danger-color);background-color:var(--zf-danger-bg)}._variantDanger_19pm5_40 ._dropzone_19pm5_27:hover{border-color:var(--zf-danger-hover);background-color:var(--zf-danger-bg-hover)}._variantDanger_19pm5_40 ._dropzoneIcon_19pm5_34,._variantDanger_19pm5_40 ._dropzoneText_19pm5_34{color:var(--zf-danger-color)}._dropzone_19pm5_27{border-width:1px;border-style:var(--zf-border-style,dashed);border-color:var(--zf-border-color);border-radius:var(--zf-radius);text-align:center;cursor:pointer;background-color:#0000;flex-direction:column;justify-content:center;align-items:center;transition:all .2s;display:flex}._dropzoneLoading_19pm5_60{opacity:.5;pointer-events:none}._dropzoneIcon_19pm5_34{width:var(--zf-spacing-5);height:var(--zf-spacing-5);color:var(--zf-text-muted);margin-bottom:var(--zf-spacing-1-5);transition:color .2s}._dropzoneText_19pm5_34{font-size:var(--zf-font-size-sm);font-weight:var(--zf-font-weight-medium);color:var(--zf-text-muted);margin:0;transition:color .2s}._variantPrimary_19pm5_32 ._dropzone_19pm5_27:hover:not(._dropzoneLoading_19pm5_60){border-color:var(--zf-primary-color)}._variantPrimary_19pm5_32 ._dropzone_19pm5_27:hover:not(._dropzoneLoading_19pm5_60) ._dropzoneIcon_19pm5_34,._variantPrimary_19pm5_32 ._dropzone_19pm5_27:hover:not(._dropzoneLoading_19pm5_60) ._dropzoneText_19pm5_34{color:var(--zf-primary-color)}._variantSecondary_19pm5_36 ._dropzone_19pm5_27{border-color:var(--zf-secondary-color)}._variantSecondary_19pm5_36 ._dropzone_19pm5_27:hover:not(._dropzoneLoading_19pm5_60){border-color:var(--zf-text-color)}._variantSecondary_19pm5_36 ._dropzone_19pm5_27:hover:not(._dropzoneLoading_19pm5_60) ._dropzoneIcon_19pm5_34,._variantSecondary_19pm5_36 ._dropzone_19pm5_27:hover:not(._dropzoneLoading_19pm5_60) ._dropzoneText_19pm5_34{color:var(--zf-text-color)}._spinner_19pm5_102{width:var(--zf-spacing-8);height:var(--zf-spacing-8);border:2px solid var(--zf-primary-color);border-radius:var(--zf-radius-full);border-top-color:#0000;animation:1s linear infinite _zf-spin_19pm5_1}._variantSecondary_19pm5_36 ._spinner_19pm5_102{border-color:var(--zf-secondary-color);border-top-color:#0000}._spinnerSm_19pm5_116{width:var(--zf-spacing-6);height:var(--zf-spacing-6)}@keyframes _zf-spin_19pm5_1{to{transform:rotate(360deg)}}._previewList_19pm5_126{gap:var(--zf-spacing-3);margin-top:var(--zf-spacing-2);flex-wrap:wrap;display:flex}._previewCard_19pm5_133{border-radius:var(--zf-radius);border:1px solid var(--zf-border-color);background-color:var(--zf-surface-bg);box-shadow:var(--zf-shadow-sm);flex-shrink:0;position:relative;overflow:hidden}._previewSizeSm_19pm5_143 ._previewCard_19pm5_133{width:4rem;height:4rem}._previewSizeMd_19pm5_144 ._previewCard_19pm5_133{width:9rem;height:9rem}._previewSizeLg_19pm5_145 ._previewCard_19pm5_133{width:12rem;height:12rem}._documentPreview_19pm5_147{width:100%;height:100%;padding:var(--zf-spacing-2);font-size:var(--zf-font-size-xs);text-align:center;word-break:break-all;color:var(--zf-text-muted);background-color:var(--zf-surface-subtle);justify-content:center;align-items:center;gap:var(--zf-spacing-1-5);flex-direction:column;display:flex}._fileIcon_19pm5_163{width:var(--zf-spacing-6);height:var(--zf-spacing-6);color:var(--zf-secondary-color);flex-shrink:0}._documentName_19pm5_170{-webkit-line-clamp:2;line-clamp:2;text-overflow:ellipsis;-webkit-box-orient:vertical;width:100%;display:-webkit-box;overflow:hidden}._removeBtn_19pm5_180{top:var(--zf-spacing-1);right:var(--zf-spacing-1);background-color:var(--zf-danger-color);color:var(--zf-text-inverse);border-radius:var(--zf-radius-full);width:var(--zf-spacing-6);height:var(--zf-spacing-6);cursor:pointer;box-shadow:var(--zf-shadow-sm);border:none;justify-content:center;align-items:center;padding:0;transition:background-color .2s;display:flex;position:absolute}._removeBtn_19pm5_180:hover{background-color:var(--zf-danger-hover)}._retryBtnIcon_19pm5_200{top:var(--zf-spacing-1);right:var(--zf-spacing-8);background-color:var(--zf-secondary-color);color:var(--zf-text-inverse);border-radius:var(--zf-radius-full);width:var(--zf-spacing-6);height:var(--zf-spacing-6);cursor:pointer;box-shadow:var(--zf-shadow-sm);border:none;justify-content:center;align-items:center;padding:0;transition:background-color .2s;display:flex;position:absolute}._retryBtnIcon_19pm5_200:hover{background-color:var(--zf-secondary-hover)}._overlay_19pm5_220{background-color:var(--zf-surface-overlay);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:var(--zf-z-overlay);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._extractedPanel_19pm5_232{margin-top:var(--zf-spacing-3);padding:var(--zf-spacing-4);background-color:var(--zf-surface-bg);border-radius:var(--zf-radius);border:1px solid var(--zf-border-color);box-shadow:var(--zf-shadow-sm)}._extractedTitle_19pm5_241{color:var(--zf-text-color);font-weight:var(--zf-font-weight-semibold);font-size:var(--zf-font-size-sm);margin:0 0 var(--zf-spacing-2) 0}._extractedList_19pm5_248{gap:var(--zf-spacing-2);grid-template-columns:1fr;display:grid}._extractedItem_19pm5_254{padding:var(--zf-spacing-1) 0;border-bottom:1px solid var(--zf-border-color);justify-content:space-between;align-items:center;display:flex}._extractedItem_19pm5_254:last-child{border-bottom:none}._extractedKey_19pm5_265{font-size:var(--zf-font-size-xs);font-weight:var(--zf-font-weight-semibold);color:var(--zf-text-muted);text-transform:uppercase}._extractedVal_19pm5_272{font-size:var(--zf-font-size-sm);font-weight:var(--zf-font-weight-medium);color:var(--zf-text-color);text-align:right;white-space:nowrap;text-overflow:ellipsis;max-width:60%;overflow:hidden}._hidden_19pm5_284{display:none}._errorText_19pm5_285{color:var(--zf-danger-color);font-size:var(--zf-font-size-sm);font-weight:var(--zf-font-weight-medium);margin:0}._btnSecondary_19pm5_286{font-size:var(--zf-font-size-xs);font-weight:var(--zf-font-weight-semibold);padding:var(--zf-spacing-1-5) var(--zf-spacing-3);background-color:var(--zf-surface-subtle);color:var(--zf-text-color);border:1px solid var(--zf-border-color);border-radius:var(--zf-radius-md);cursor:pointer;box-shadow:var(--zf-shadow-sm);transition:all .2s}._btnSecondary_19pm5_286:hover:not(:disabled){background-color:var(--zf-border-color)}._btnSecondary_19pm5_286:disabled{opacity:.5;cursor:not-allowed}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/src/index.js
CHANGED
|
@@ -263,6 +263,10 @@ function h({ file: t, client: r, className: a = "" }) {
|
|
|
263
263
|
return;
|
|
264
264
|
}
|
|
265
265
|
if (t.uuid) {
|
|
266
|
+
if (!r) {
|
|
267
|
+
console.warn("ImagePreview: 'client' prop is missing, cannot load remote preview"), n && d(!0);
|
|
268
|
+
return;
|
|
269
|
+
}
|
|
266
270
|
n && l(!0);
|
|
267
271
|
try {
|
|
268
272
|
let i = await r.getFilePreviewBlob(t.uuid);
|
|
@@ -290,51 +294,51 @@ function h({ file: t, client: r, className: a = "" }) {
|
|
|
290
294
|
});
|
|
291
295
|
}
|
|
292
296
|
var g = {
|
|
293
|
-
fieldContainer: "
|
|
294
|
-
label: "
|
|
295
|
-
fieldBody: "
|
|
296
|
-
sizeSm: "
|
|
297
|
-
dropzone: "
|
|
298
|
-
sizeMd: "
|
|
299
|
-
sizeLg: "
|
|
300
|
-
variantPrimary: "
|
|
301
|
-
dropzoneIcon: "
|
|
302
|
-
dropzoneText: "
|
|
303
|
-
variantSecondary: "
|
|
304
|
-
variantDanger: "
|
|
305
|
-
dropzoneLoading: "
|
|
306
|
-
spinner: "
|
|
307
|
-
"zf-spin": "_zf-
|
|
308
|
-
spinnerSm: "
|
|
309
|
-
previewList: "
|
|
310
|
-
previewCard: "
|
|
311
|
-
previewSizeSm: "
|
|
312
|
-
previewSizeMd: "
|
|
313
|
-
previewSizeLg: "
|
|
314
|
-
documentPreview: "
|
|
315
|
-
fileIcon: "
|
|
316
|
-
documentName: "
|
|
317
|
-
removeBtn: "
|
|
318
|
-
retryBtnIcon: "
|
|
319
|
-
overlay: "
|
|
320
|
-
extractedPanel: "
|
|
321
|
-
extractedTitle: "
|
|
322
|
-
extractedList: "
|
|
323
|
-
extractedItem: "
|
|
324
|
-
extractedKey: "
|
|
325
|
-
extractedVal: "
|
|
326
|
-
hidden: "
|
|
327
|
-
errorText: "
|
|
328
|
-
btnSecondary: "
|
|
297
|
+
fieldContainer: "_fieldContainer_19pm5_2",
|
|
298
|
+
label: "_label_19pm5_14",
|
|
299
|
+
fieldBody: "_fieldBody_19pm5_20",
|
|
300
|
+
sizeSm: "_sizeSm_19pm5_27",
|
|
301
|
+
dropzone: "_dropzone_19pm5_27",
|
|
302
|
+
sizeMd: "_sizeMd_19pm5_28",
|
|
303
|
+
sizeLg: "_sizeLg_19pm5_29",
|
|
304
|
+
variantPrimary: "_variantPrimary_19pm5_32",
|
|
305
|
+
dropzoneIcon: "_dropzoneIcon_19pm5_34",
|
|
306
|
+
dropzoneText: "_dropzoneText_19pm5_34",
|
|
307
|
+
variantSecondary: "_variantSecondary_19pm5_36",
|
|
308
|
+
variantDanger: "_variantDanger_19pm5_40",
|
|
309
|
+
dropzoneLoading: "_dropzoneLoading_19pm5_60",
|
|
310
|
+
spinner: "_spinner_19pm5_102",
|
|
311
|
+
"zf-spin": "_zf-spin_19pm5_1",
|
|
312
|
+
spinnerSm: "_spinnerSm_19pm5_116",
|
|
313
|
+
previewList: "_previewList_19pm5_126",
|
|
314
|
+
previewCard: "_previewCard_19pm5_133",
|
|
315
|
+
previewSizeSm: "_previewSizeSm_19pm5_143",
|
|
316
|
+
previewSizeMd: "_previewSizeMd_19pm5_144",
|
|
317
|
+
previewSizeLg: "_previewSizeLg_19pm5_145",
|
|
318
|
+
documentPreview: "_documentPreview_19pm5_147",
|
|
319
|
+
fileIcon: "_fileIcon_19pm5_163",
|
|
320
|
+
documentName: "_documentName_19pm5_170",
|
|
321
|
+
removeBtn: "_removeBtn_19pm5_180",
|
|
322
|
+
retryBtnIcon: "_retryBtnIcon_19pm5_200",
|
|
323
|
+
overlay: "_overlay_19pm5_220",
|
|
324
|
+
extractedPanel: "_extractedPanel_19pm5_232",
|
|
325
|
+
extractedTitle: "_extractedTitle_19pm5_241",
|
|
326
|
+
extractedList: "_extractedList_19pm5_248",
|
|
327
|
+
extractedItem: "_extractedItem_19pm5_254",
|
|
328
|
+
extractedKey: "_extractedKey_19pm5_265",
|
|
329
|
+
extractedVal: "_extractedVal_19pm5_272",
|
|
330
|
+
hidden: "_hidden_19pm5_284",
|
|
331
|
+
errorText: "_errorText_19pm5_285",
|
|
332
|
+
btnSecondary: "_btnSecondary_19pm5_286"
|
|
329
333
|
}, _ = (...e) => e.filter(Boolean).join(" "), v = (e) => {
|
|
330
334
|
let t = e.name || e.original_name || "", n = e.type || e.mime_type || "";
|
|
331
335
|
return t.endsWith(".pdf") || n.includes("pdf") || t.match(/\.(doc|docx|txt)$/i) ? /* @__PURE__ */ i(s, { className: g.fileIcon }) : /* @__PURE__ */ i(o, { className: g.fileIcon });
|
|
332
336
|
};
|
|
333
|
-
function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fieldMap: f,
|
|
334
|
-
let [
|
|
335
|
-
if (e.file && s(e.file), e.extract_error)
|
|
337
|
+
function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fieldMap: f, client: p, showExtracted: m = !0, accept: y = "image/*,application/pdf", variant: b = "primary", size: x = "md", previewSize: S = "md", width: C = "full", className: w = "" }) {
|
|
338
|
+
let [T, E] = n(!1), [D, O] = n(null), [k, A] = n(null), j = t(null), M = Array.isArray(o) ? o : o ? [o] : [], N = (e) => {
|
|
339
|
+
if (e.file && s(e.file), e.extract_error) O(e.extract_error);
|
|
336
340
|
else if (e.extracted) {
|
|
337
|
-
|
|
341
|
+
A(e.extracted);
|
|
338
342
|
let t = { ...e.extracted };
|
|
339
343
|
if (f) {
|
|
340
344
|
if (t = {}, Array.isArray(f)) for (let [n, r] of Object.entries(e.extracted)) {
|
|
@@ -348,69 +352,69 @@ function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fiel
|
|
|
348
352
|
}
|
|
349
353
|
u && u(t);
|
|
350
354
|
}
|
|
351
|
-
},
|
|
355
|
+
}, P = async (e) => {
|
|
352
356
|
let t = e.target.files?.[0];
|
|
353
357
|
if (t) {
|
|
354
|
-
|
|
358
|
+
E(!0), O(null), A(null);
|
|
355
359
|
try {
|
|
356
360
|
let e = await d(t);
|
|
357
|
-
|
|
361
|
+
N(e);
|
|
358
362
|
} catch (e) {
|
|
359
|
-
console.error(e),
|
|
363
|
+
console.error(e), O("OCR extraction failed");
|
|
360
364
|
} finally {
|
|
361
|
-
|
|
365
|
+
E(!1), j.current && (j.current.value = "");
|
|
362
366
|
}
|
|
363
367
|
}
|
|
364
|
-
},
|
|
365
|
-
|
|
368
|
+
}, F = async (e) => {
|
|
369
|
+
E(!0), O(null);
|
|
366
370
|
try {
|
|
367
371
|
let t = await d(e);
|
|
368
|
-
|
|
372
|
+
N(t);
|
|
369
373
|
} catch (e) {
|
|
370
|
-
console.error(e),
|
|
374
|
+
console.error(e), O("OCR extraction retry failed");
|
|
371
375
|
} finally {
|
|
372
|
-
|
|
376
|
+
E(!1);
|
|
373
377
|
}
|
|
374
|
-
},
|
|
375
|
-
let t = [...
|
|
378
|
+
}, I = (e) => {
|
|
379
|
+
let t = [...M];
|
|
376
380
|
if (t.splice(e, 1), s(t.length === 0 ? null : t), t.length === 0) {
|
|
377
|
-
if (
|
|
381
|
+
if (k && u) {
|
|
378
382
|
let e = {};
|
|
379
383
|
if (f) {
|
|
380
|
-
if (Array.isArray(f)) for (let t of Object.keys(
|
|
384
|
+
if (Array.isArray(f)) for (let t of Object.keys(k)) {
|
|
381
385
|
let n = f.find((e) => e.source === t || e.extractKey === t), r = n ? n.target || n.fieldId : t;
|
|
382
386
|
e[r] = "";
|
|
383
387
|
}
|
|
384
|
-
else for (let t of Object.keys(
|
|
388
|
+
else for (let t of Object.keys(k)) {
|
|
385
389
|
let n = f[t] || t;
|
|
386
390
|
e[n] = "";
|
|
387
391
|
}
|
|
388
|
-
} else for (let t of Object.keys(
|
|
392
|
+
} else for (let t of Object.keys(k)) e[t] = "";
|
|
389
393
|
u(e);
|
|
390
394
|
}
|
|
391
|
-
|
|
395
|
+
A(null);
|
|
392
396
|
}
|
|
393
|
-
},
|
|
397
|
+
}, L = (e) => e instanceof File ? e.type.startsWith("image/") : e.mime_type ? e.mime_type.startsWith("image/") : e.original_name ? /\.(jpg|jpeg|png|gif|webp)$/i.test(e.original_name) : !1, R = C === "full" ? { width: "100%" } : { width: C };
|
|
394
398
|
return /* @__PURE__ */ a("div", {
|
|
395
|
-
className: _(g.fieldContainer, g[`variant${
|
|
396
|
-
style:
|
|
399
|
+
className: _(g.fieldContainer, g[`variant${b.charAt(0).toUpperCase() + b.slice(1)}`], g[`size${x.charAt(0).toUpperCase() + x.slice(1)}`], g[`previewSize${S.charAt(0).toUpperCase() + S.slice(1)}`], w),
|
|
400
|
+
style: R,
|
|
397
401
|
children: [/* @__PURE__ */ a("label", {
|
|
398
402
|
className: g.label,
|
|
399
403
|
children: [e, " (OCR)"]
|
|
400
404
|
}), /* @__PURE__ */ a("div", {
|
|
401
405
|
className: g.fieldBody,
|
|
402
406
|
children: [
|
|
403
|
-
|
|
404
|
-
className: _(g.dropzone,
|
|
405
|
-
onClick: () =>
|
|
407
|
+
M.length === 0 && /* @__PURE__ */ a("div", {
|
|
408
|
+
className: _(g.dropzone, T && g.dropzoneLoading),
|
|
409
|
+
onClick: () => j.current?.click(),
|
|
406
410
|
children: [/* @__PURE__ */ i("input", {
|
|
407
|
-
ref:
|
|
411
|
+
ref: j,
|
|
408
412
|
type: "file",
|
|
409
|
-
onChange:
|
|
410
|
-
disabled:
|
|
411
|
-
accept:
|
|
413
|
+
onChange: P,
|
|
414
|
+
disabled: T,
|
|
415
|
+
accept: y,
|
|
412
416
|
className: g.hidden
|
|
413
|
-
}),
|
|
417
|
+
}), T ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", { className: _(g.spinner, g.spinnerSm, g.dropzoneIcon) }), /* @__PURE__ */ i("p", {
|
|
414
418
|
className: g.dropzoneText,
|
|
415
419
|
children: "Extracting OCR data..."
|
|
416
420
|
})] }) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(c, { className: g.dropzoneIcon }), /* @__PURE__ */ i("p", {
|
|
@@ -418,12 +422,15 @@ function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fiel
|
|
|
418
422
|
children: "Drop a document to extract"
|
|
419
423
|
})] })]
|
|
420
424
|
}),
|
|
421
|
-
|
|
425
|
+
M.length > 0 && /* @__PURE__ */ i("div", {
|
|
422
426
|
className: g.previewList,
|
|
423
|
-
children:
|
|
427
|
+
children: M.map((e, t) => /* @__PURE__ */ a("div", {
|
|
424
428
|
className: g.previewCard,
|
|
425
429
|
children: [
|
|
426
|
-
|
|
430
|
+
L(e) ? /* @__PURE__ */ i(h, {
|
|
431
|
+
file: e,
|
|
432
|
+
client: p
|
|
433
|
+
}) : /* @__PURE__ */ a("div", {
|
|
427
434
|
className: g.documentPreview,
|
|
428
435
|
children: [v(e), /* @__PURE__ */ i("span", {
|
|
429
436
|
className: g.documentName,
|
|
@@ -431,13 +438,13 @@ function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fiel
|
|
|
431
438
|
children: e.name || e.original_name || "Document"
|
|
432
439
|
})]
|
|
433
440
|
}),
|
|
434
|
-
|
|
441
|
+
T && /* @__PURE__ */ i("div", {
|
|
435
442
|
className: g.overlay,
|
|
436
443
|
children: /* @__PURE__ */ i("div", { className: g.spinner })
|
|
437
444
|
}),
|
|
438
|
-
!
|
|
445
|
+
!T && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("button", {
|
|
439
446
|
type: "button",
|
|
440
|
-
onClick: () =>
|
|
447
|
+
onClick: () => F(e),
|
|
441
448
|
className: g.retryBtnIcon,
|
|
442
449
|
title: "Retry extraction",
|
|
443
450
|
children: /* @__PURE__ */ a("svg", {
|
|
@@ -459,7 +466,7 @@ function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fiel
|
|
|
459
466
|
})
|
|
460
467
|
}), /* @__PURE__ */ i("button", {
|
|
461
468
|
type: "button",
|
|
462
|
-
onClick: () =>
|
|
469
|
+
onClick: () => I(t),
|
|
463
470
|
className: g.removeBtn,
|
|
464
471
|
title: "Remove file",
|
|
465
472
|
children: /* @__PURE__ */ i(l, {
|
|
@@ -470,28 +477,28 @@ function y({ label: e, value: o, onChange: s, onExtracted: u, onProcess: d, fiel
|
|
|
470
477
|
]
|
|
471
478
|
}, t))
|
|
472
479
|
}),
|
|
473
|
-
|
|
480
|
+
D && /* @__PURE__ */ a("div", {
|
|
474
481
|
className: g.fieldBody,
|
|
475
482
|
children: [/* @__PURE__ */ i("p", {
|
|
476
483
|
className: g.errorText,
|
|
477
|
-
children:
|
|
478
|
-
}),
|
|
484
|
+
children: D
|
|
485
|
+
}), M.length > 0 && !k && /* @__PURE__ */ i("button", {
|
|
479
486
|
type: "button",
|
|
480
|
-
onClick: () =>
|
|
481
|
-
disabled:
|
|
487
|
+
onClick: () => F(M[0]),
|
|
488
|
+
disabled: T,
|
|
482
489
|
className: g.btnSecondary,
|
|
483
490
|
style: { alignSelf: "flex-start" },
|
|
484
|
-
children:
|
|
491
|
+
children: T ? "Retrying..." : "Retry Extraction"
|
|
485
492
|
})]
|
|
486
493
|
}),
|
|
487
|
-
|
|
494
|
+
m && k && /* @__PURE__ */ a("div", {
|
|
488
495
|
className: g.extractedPanel,
|
|
489
496
|
children: [/* @__PURE__ */ i("p", {
|
|
490
497
|
className: g.extractedTitle,
|
|
491
498
|
children: "Extracted Data"
|
|
492
499
|
}), /* @__PURE__ */ i("div", {
|
|
493
500
|
className: g.extractedList,
|
|
494
|
-
children: Object.entries(
|
|
501
|
+
children: Object.entries(k).map(([e, t]) => /* @__PURE__ */ a("div", {
|
|
495
502
|
className: g.extractedItem,
|
|
496
503
|
children: [/* @__PURE__ */ i("span", {
|
|
497
504
|
className: g.extractedKey,
|