ynotsoft-dynamic-form 1.0.12 → 1.0.13
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/README.md +615 -9
- package/dist/index.cjs +8 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +9 -9
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as Ue}from"react/jsx-runtime";function te({children:e,onClick:n}){return Ue("button",{onClick:n,children:e})}import{useState as Z,useEffect as ze,useMemo as Rt}from"react";import{toast as $t}from"react-hot-toast";import Oe from"dayjs";import _e from"axios";import oe from"react-hot-toast";var V={REACT_API_URL:"http://localhost:5000/"};var ce=_e.create({baseURL:V.REACT_API_URL,headers:{"Content-Type":"application/json"}});ce.interceptors.response.use(e=>e.data,e=>{var n;if(e.response&&e.response.status===403)return oe.error("You are not authorized to access this resource."),Promise.reject("You are not authorized to access this resource.");if(e.response)return oe.error("An error occurred"),Promise.reject(((n=e.response.data)==null?void 0:n.message)||"An error occurred");oe.error(e.message)});var de=ce;import{jsx as je}from"react/jsx-runtime";function He(e){return je("input",{type:"hidden",name:e.name,value:e.value},e.name)}var me=He;import Ge from"react-select";import We from"react-select/animated";import{jsx as Ye}from"react/jsx-runtime";function Ve({field:e,formValues:n,handleChange:d,touched:g,errors:u,handleBlur:r}){let l=e.disabled&&e.disabled(n),m=e.options||[],a=We(),p=n[e.name]||[];return Ye(Ge,{components:a,isMulti:!0,isDisabled:l,name:e.label,value:p,onChange:f=>d(e.name,f),options:m,placeholder:e.placeholder,closeMenuOnSelect:!1})}var ue=Ve;import*as b from"@radix-ui/react-select";import"react";import{ChevronDownIcon as qe}from"@heroicons/react/20/solid";import{jsx as F,jsxs as Y}from"react/jsx-runtime";function Ke({field:e,formValues:n,handleChange:d,handleBlur:g}){var m;let u=n[e.name]||"",r=typeof e.disabled=="function"?e.disabled(n):e.disabled,l=e.options||[];return Y(b.Root,{value:u,onValueChange:a=>d(e.name,a),disabled:r,children:[Y(b.Trigger,{id:e.name,onBlur:()=>g(e.name),className:`inline-flex items-center justify-between w-full px-3 py-2 border rounded-md text-sm transition-all
|
|
2
2
|
${r?"bg-gray-100 text-gray-500 cursor-not-allowed":"border-gray-300 hover:border-gray-400 focus:ring-2 focus:ring-blue-500"}
|
|
3
|
-
`,children:[F(b.Value,{placeholder:e.placeholder||`Select ${((m=e.label)==null?void 0:m.toLowerCase())||""}`}),F(b.Icon,{className:"ml-2 text-gray-500",children:F(
|
|
3
|
+
`,children:[F(b.Value,{placeholder:e.placeholder||`Select ${((m=e.label)==null?void 0:m.toLowerCase())||""}`}),F(b.Icon,{className:"ml-2 text-gray-500",children:F(qe,{className:"w-4 h-4"})})]}),F(b.Portal,{children:Y(b.Content,{className:"bg-white border border-gray-200 rounded-md shadow-lg z-50 min-w-[var(--radix-select-trigger-width)]",position:"popper",sideOffset:5,children:[F(b.ScrollUpButton,{className:"flex items-center justify-center h-6 text-gray-500 bg-gray-50",children:F(b.Arrow,{className:"fill-white stroke-gray-200"})}),Y(b.Viewport,{className:"p-1",children:[e.groupLabel&&F(b.Group,{children:F(b.Label,{className:"px-2 py-1 text-xs text-gray-500 uppercase tracking-wide",children:e.groupLabel})}),l.map(a=>F(b.Item,{value:a.value,className:`relative flex items-center px-3 py-2 text-sm rounded cursor-pointer select-none
|
|
4
4
|
data-[state=checked]:bg-blue-50
|
|
5
5
|
data-[state=checked]:text-blue-600
|
|
6
|
-
`,children:F(b.ItemText,{children:a.label})},a.value)),e.separator&&F(b.Separator,{className:"my-1 h-px bg-gray-200"})]}),F(b.Arrow,{className:"fill-white stroke-gray-200"})]})})]})}var pe=
|
|
6
|
+
`,children:F(b.ItemText,{children:a.label})},a.value)),e.separator&&F(b.Separator,{className:"my-1 h-px bg-gray-200"})]}),F(b.Arrow,{className:"fill-white stroke-gray-200"})]})})]})}var pe=Ke;import"react";import{jsx as Je}from"react/jsx-runtime";function Xe({field:e,formValues:n,handleChange:d,handleBlur:g,touched:u,errors:r}){let l=e.readOnly&&e.disabled;return Je("input",{...e.props,type:"email",value:n[e.name]||"",onChange:a=>d(e.name,a.target.value),onBlur:()=>g(e.name),disabled:l,name:e.name,placeholder:e.placeholder,className:`w-full px-3 py-2 border rounded-md ${!1?"border-red-500":"border-gray-300"} ${l?"bg-gray-100 text-gray-500 cursor-not-allowed":""}`})}var be=Xe;import"react";import{jsx as Ze}from"react/jsx-runtime";function Qe({field:e,formValues:n,handleChange:d,handleBlur:g,touched:u,errors:r}){console.log("Rendering InputField for",e);let l=e.readOnly||e.disabled;return Ze("input",{...e.props,id:e.name,type:e.type||"text",value:n[e.name]||"",onChange:a=>d(e.name,a.target.value),onBlur:()=>g(e.name),disabled:l,name:e.name,placeholder:e.placeholder,min:e.minLength,max:e.maxLength,className:`flex h-10 w-full rounded-md border px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${!1?"border-red-500 focus-visible:ring-red-500":"border-input focus-visible:ring-blue-500"} ${l?"bg-gray-50 text-gray-500":"bg-background"}`})}var re=Qe;import"react";import{jsx as ge}from"react/jsx-runtime";function et({field:e,formValues:n}){let d=n[e.name]||e.content||"";return ge("div",{className:`mb-4 ${e.fieldClass?e.fieldClass:"col-span-full"}`,id:e.name.toLowerCase()+"_id",children:ge("div",{className:"w-full px-3 py-2 border rounded-md overflow-y-auto max-h-40 prose prose-sm max-w-none",dangerouslySetInnerHTML:{__html:d}})},e.name)}var he=et;import{jsx as ae,jsxs as xe}from"react/jsx-runtime";function tt({field:e,formValues:n,handleChange:d,handleBlur:g,touched:u,errors:r}){let l=e.disabled&&e.disabled(n),m=!1;return xe("div",{className:"mt-1 space-x-2",children:[ae("input",{...e.props,id:"id_"+e.name,type:"checkbox",checked:n[e.name]||!1,onChange:a=>d(e.name,a.target.checked),onBlur:()=>g(e.name),disabled:l,className:`rounded border-gray-300 ${l?"opacity-50 cursor-not-allowed":""}`}),xe("label",{className:"",htmlFor:"id_"+e.name,children:[e.label,e.required&&ae("span",{className:"text-red-500",children:"*"})]}),m&&ae("p",{className:"mt-1 text-sm text-red-500",children:m})]})}var ye=tt;import*as A from"@radix-ui/react-popover";import{useState as ot}from"react";import{DayPicker as rt}from"react-day-picker";import"react-day-picker/dist/style.css";import{jsx as P,jsxs as G}from"react/jsx-runtime";function at({field:e,formValues:n,handleChange:d,handleBlur:g}){let[u,r]=ot(!1),l=n[e.name]??{from:null,to:null},m=p=>d(e.name,p),a=()=>d(e.name,{from:null,to:null});return P("div",{children:G(A.Root,{open:u,onOpenChange:r,children:[P(A.Trigger,{asChild:!0,children:G("button",{type:"button",id:e.name,"aria-haspopup":"dialog","aria-expanded":u,onClick:()=>r(!0),onKeyDown:p=>p.key==="Enter"&&r(!0),className:`
|
|
7
7
|
inline-flex items-center justify-between gap-2
|
|
8
8
|
w-full h-9 rounded-md border border-gray-300 bg-white
|
|
9
9
|
px-3 py-2 text-sm font-normal shadow-sm
|
|
10
10
|
hover:bg-gray-50 hover:text-gray-900
|
|
11
11
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
|
|
12
12
|
disabled:cursor-not-allowed disabled:opacity-50
|
|
13
|
-
`,children:[l.from?l.to?G("span",{children:[l.from.toLocaleDateString()," \u2013 ",l.to.toLocaleDateString()]}):P("span",{children:l.from.toLocaleDateString()}):P("span",{className:"text-muted-foreground",children:e.placeholder||"Select date range"}),P("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-chevron-down opacity-70",children:P("path",{d:"m6 9 6 6 6-6"})})]})}),G(
|
|
13
|
+
`,children:[l.from?l.to?G("span",{children:[l.from.toLocaleDateString()," \u2013 ",l.to.toLocaleDateString()]}):P("span",{children:l.from.toLocaleDateString()}):P("span",{className:"text-muted-foreground",children:e.placeholder||"Select date range"}),P("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-chevron-down opacity-70",children:P("path",{d:"m6 9 6 6 6-6"})})]})}),G(A.Content,{align:"start",sideOffset:2,className:"z-50 rounded-md border border-gray-200 bg-white p-0 shadow-md w-auto",children:[P(rt,{mode:"range",selected:l,onSelect:m,showOutsideDays:!0,className:"rounded-md bg-white p-3 text-xs"}),G("div",{className:"flex items-center justify-between gap-2 border-t border-gray-200 p-3",children:[P("button",{type:"button",onClick:a,className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-900 h-9 px-4 py-2",children:"Clear"}),P("button",{type:"button",onClick:()=>r(!1),className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-blue-600 text-white hover:bg-blue-700 h-9 px-4 py-2",children:"Done"})]})]})]})})}var fe=at;import"react";import{toast as ve}from"react-hot-toast";import{Fragment as nt,jsx as L,jsxs as C}from"react/jsx-runtime";function st({field:e,formValues:n,touched:d,errors:g,fileUploads:u,setFileUploads:r,fileInputRefs:l,handleChange:m,onFieldsChange:a}){let p=d[e.name]&&g[e.name],f=e.type==="multifile",N=u[e.name]||{},w=n[e.name],$=f?w||[]:[w].filter(Boolean),k=e.disabled&&e.disabled(n),D=`px-4 py-2 bg-gray-100 border rounded hover:bg-gray-200 ${k?"cursor-not-allowed":""}`,H=`${V.REACT_API_URL}uploads`,E=i=>{if(i===0)return"0 Bytes";let t=1024,o=["Bytes","KB","MB","GB"],s=Math.floor(Math.log(i)/Math.log(t));return parseFloat((i/Math.pow(t,s)).toFixed(2))+" "+o[s]},T=async(i,t)=>{let o=new FormData;o.append("file",i);let s=await fetch(`${H}`,{method:"POST",body:o});if(!s.ok)throw ve.error("Upload failed"),new Error("Upload failed");return await s.json()},x=async(i,t)=>{if(!t)return;if(i.maxSize&&t.size>i.maxSize)throw new Error(`File size must not exceed ${E(i.maxSize)}`);let o=await T(t,i.name),s={...n,[i.name]:o};m(i.name,o),a(s)},S=async(i,t)=>{let o=n[i.name]||[];if(o.length+t.length>i.maxFiles)throw new Error(`Maximum ${i.maxFiles} files allowed`);t.forEach(v=>{if(i.maxSize&&v.size>i.maxSize)throw new Error(`Each file must not exceed ${E(i.maxSize)}`)});let s=await Promise.all(t.map(v=>T(v,i.name))),c=[...o,...s];m(i.name,c),a({...n,[i.name]:c})},W=async(i,t)=>{let o=Array.from(t);try{e.type==="file"?await x(e,o[0]):e.type==="multifile"&&await S(e,o),l.current[i]&&(l.current[i].value="")}catch(s){ve.error(`Upload failed: ${s.message}`)}},ee=async(i,t)=>{let o;e.type==="file"?o="":o=(n[i]||[]).filter(c=>c!==t),m(i,o),a({...n,[i]:o}),l.current[i]&&(l.current[i].value="")};return C("div",{className:`mb-4 ${e.fieldClass||"col-span-full"}`,children:[C("label",{className:"block font-medium mb-1",children:[e.label,e.required&&L("span",{className:"text-red-500",children:"*"})]}),C("div",{className:"space-y-2",children:[C("div",{className:"items-center space-x-2",children:[C("button",{type:"button",disabled:k,onClick:()=>l.current[e.name].click(),className:D,children:["Choose ",f?"Files":"File"]}),f&&$.length>0&&C("span",{className:"text-sm text-gray-600",children:[$.length," of ",e.maxFiles," files uploaded"]})]}),L("input",{ref:i=>l.current[e.name]=i,type:"file",accept:e.accept,multiple:f,className:"hidden",onChange:i=>W(e.name,i.target.files)}),L("div",{className:"space-y-2",children:$.map((i,t)=>{let o=Object.values(N).find(s=>s.file===i);return C("div",{className:"flex items-center justify-between p-2 bg-gray-50 rounded",children:[C("div",{className:"flex items-center space-x-2",children:[o&&C(nt,{children:[L("span",{className:"text-sm",children:o.fileName}),C("span",{className:"text-xs text-gray-500",children:["(",E(o.fileSize),")"]})]}),!o&&L("span",{className:"text-sm",children:i.original_name})]}),L("button",{type:"button",onClick:()=>ee(e.name,i),className:"text-red-500 hover:text-red-700 ml-3",children:"Remove"})]},i)})}),Object.entries(N).map(([i,t])=>t.status==="uploading"?C("div",{className:"relative pt-1",children:[C("div",{className:"flex items-center justify-between",children:[C("span",{className:"text-xs font-semibold inline-block text-blue-600",children:["Uploading ",i]}),C("span",{className:"text-xs font-semibold inline-block text-blue-600",children:[t.progress,"%"]})]}),L("div",{className:"overflow-hidden h-2 mt-1 text-xs flex rounded bg-blue-200",children:L("div",{className:"shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500",style:{width:`${t.progress}%`}})})]},i):null)]}),p&&L("p",{className:"mt-1 text-sm text-red-500",children:p})]},e.name)}var se=st;import{useRef as lt,useEffect as it}from"react";import{jsx as we,jsxs as Ne}from"react/jsx-runtime";function ct({field:e,formValues:n,handleChange:d,handleBlur:g,touched:u,errors:r,charCount:l,setCharCounts:m}){let a=lt(null),p=n[e.name]||"",f=typeof e.disabled=="function"?e.disabled(n):e.disabled||e.readOnly,N=u!=null&&u[e.name]&&(r!=null&&r[e.name])?r[e.name]:null,w=()=>{let k=a.current;k&&(k.style.height="auto",k.style.height=`${k.scrollHeight+2}px`)};it(()=>{w()},[p]);let $=k=>{d(e.name,k.target.value),w(),m&&m(D=>({...D,[e.name]:k.target.value.length}))};return Ne("div",{className:"space-y-2",children:[we("textarea",{...e.props,ref:a,id:e.name,name:e.name,placeholder:e.placeholder||"",value:p,onChange:$,onBlur:()=>g(e.name),disabled:f,maxLength:e.maxLength,rows:e.rows||3,className:`flex w-full rounded-md border px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none overflow-y-auto ${N?"border-red-500 focus-visible:ring-red-500":"border-input focus-visible:ring-blue-500"} ${f?"bg-gray-50 text-gray-500":"bg-background"}`,style:{minHeight:"80px",maxHeight:"400px"}}),we("div",{className:"flex justify-between items-center",children:e.maxLength&&!e.readOnly&&Ne("span",{className:"text-xs text-gray-500",children:[l||0,"/",e.maxLength," characters"]})})]})}var ke=ct;import"react";import{jsx as Ce,jsxs as mt}from"react/jsx-runtime";function dt({field:e,formValues:n,handleChange:d,handleBlur:g,touched:u,errors:r}){return mt("div",{children:[Ce("input",{type:"datetime-local",value:e.value||"",onChange:l=>d(e.name,l.target.value),onBlur:g,className:"border rounded px-3 py-2 w-full",placeholder:"Select date and time"}),Ce("p",{className:"text-sm text-gray-500 mt-1",children:"Note: Install @mui/x-date-pickers for enhanced date picker functionality"})]})}var Se=dt;import{Separator as ne}from"@radix-ui/react-separator";import{jsx as q,jsxs as pt}from"react/jsx-runtime";function ut({field:e}){return e!=null&&e.label?pt("div",{className:"relative flex items-center py-4",children:[q(ne,{className:"flex-1 h-px bg-gray-300"}),q("span",{className:"px-3 font-medium text-gray-600 bg-white",children:e.label}),q(ne,{className:"flex-1 h-px bg-gray-300"})]}):q(ne,{className:"my-4 h-px bg-gray-300"})}var Fe=ut;import"react";import*as O from"@radix-ui/react-radio-group";import{jsx as z,jsxs as Re}from"react/jsx-runtime";function bt({field:e,formValues:n,handleChange:d,handleBlur:g}){let u=n[e.name]||"",r=typeof e.disabled=="function"?e.disabled(n):e.disabled,l=e.options||[],m=e.inline||!1;return z(O.Root,{value:u,onValueChange:a=>d(e.name,a),onBlur:()=>g(e.name),disabled:r,className:m?"flex flex-wrap gap-4":"space-y-3","aria-label":e.label||e.name,children:l.map(a=>{let p=typeof a=="object"?a.value:a,f=typeof a=="object"?a.label:a,N=typeof a=="object"?a.description:null,w=`${e.name}-${p}`;return Re("div",{className:"relative flex items-start",children:[z("div",{className:"flex h-6 items-center",children:z(O.Item,{value:p,id:w,disabled:r,className:`
|
|
14
14
|
relative size-4 rounded-full border transition-all
|
|
15
15
|
${r?"border-gray-300 bg-gray-100 cursor-not-allowed":"border-gray-300 bg-white hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"}
|
|
16
16
|
data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600
|
|
17
|
-
`,children:z(O.Indicator,{className:"flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-1.5 after:h-1.5 after:rounded-full after:bg-white"})})})
|
|
17
|
+
`,children:z(O.Indicator,{className:"flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-1.5 after:h-1.5 after:rounded-full after:bg-white"})})}),Re("div",{className:"ml-3 text-sm",children:[z("label",{htmlFor:w,className:`font-medium ${r?"text-gray-500":"text-gray-900 cursor-pointer"}`,children:f}),N&&!m&&z("p",{className:`text-sm ${r?"text-gray-400":"text-gray-500"}`,children:N})]})]},p)})})}var $e=bt;import"react";import{jsx as Pe,jsxs as ht}from"react/jsx-runtime";function gt({field:e}){let n=e.text||e.label||"",d=e.description||"",g=e.size||"lg",u=e.underline||!1,r=e.align||"left",l=e.className||"",m={sm:"text-base font-semibold",md:"text-lg font-semibold",lg:"text-xl font-bold",xl:"text-2xl font-bold","2xl":"text-3xl font-bold","3xl":"text-4xl font-bold","4xl":"text-5xl font-bold"},a={left:"text-left",center:"text-center",right:"text-right"},p=`
|
|
18
18
|
${m[g]||m.lg}
|
|
19
19
|
${a[r]||a.left}
|
|
20
20
|
${u?"border-b-2 border-gray-300 pb-2":""}
|
|
@@ -23,25 +23,25 @@ import{jsx as _e}from"react/jsx-runtime";function ee({children:e,onClick:n}){ret
|
|
|
23
23
|
`.trim(),f=`
|
|
24
24
|
mt-1 text-sm text-gray-600
|
|
25
25
|
${a[r]||a.left}
|
|
26
|
-
`.trim();return
|
|
26
|
+
`.trim();return ht("div",{className:"my-4",children:[Pe("h2",{className:p,children:n}),d&&Pe("p",{className:f,children:d})]})}var Le=gt;import*as U from"@radix-ui/react-popover";import{useState as xt}from"react";import{DayPicker as yt}from"react-day-picker";import"react-day-picker/dist/style.css";import{jsx as I,jsxs as K}from"react/jsx-runtime";function ft({field:e,formValues:n,handleChange:d,handleBlur:g}){let[u,r]=xt(!1),l=n[e.name]??null,m=p=>d(e.name,p),a=()=>d(e.name,null);return I("div",{children:K(U.Root,{open:u,onOpenChange:r,children:[I(U.Trigger,{asChild:!0,children:K("button",{type:"button",id:e.name,"aria-haspopup":"dialog","aria-expanded":u,onClick:()=>r(!0),onKeyDown:p=>p.key==="Enter"&&r(!0),className:`
|
|
27
27
|
inline-flex items-center justify-between gap-2
|
|
28
28
|
w-full h-9 rounded-md border border-gray-300 bg-white
|
|
29
29
|
px-3 py-2 text-sm font-normal shadow-sm
|
|
30
30
|
hover:bg-gray-50 hover:text-gray-900
|
|
31
31
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
|
|
32
32
|
disabled:cursor-not-allowed disabled:opacity-50
|
|
33
|
-
`,children:[l?I("span",{children:l.toLocaleDateString()}):I("span",{className:"text-muted-foreground",children:e.placeholder||"Select date"}),I("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-chevron-down opacity-70",children:I("path",{d:"m6 9 6 6 6-6"})})]})}),
|
|
33
|
+
`,children:[l?I("span",{children:l.toLocaleDateString()}):I("span",{className:"text-muted-foreground",children:e.placeholder||"Select date"}),I("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-chevron-down opacity-70",children:I("path",{d:"m6 9 6 6 6-6"})})]})}),K(U.Content,{align:"start",sideOffset:2,className:"z-50 rounded-md border border-gray-200 bg-white p-0 shadow-md w-auto",children:[I(yt,{mode:"single",selected:l,onSelect:m,showOutsideDays:!0,className:"rounded-md bg-white p-3 text-xs"}),K("div",{className:"flex items-center justify-between gap-2 border-t border-gray-200 p-3",children:[I("button",{type:"button",onClick:a,className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-900 h-9 px-4 py-2",children:"Clear"}),I("button",{type:"button",onClick:()=>r(!1),className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-blue-600 text-white hover:bg-blue-700 h-9 px-4 py-2",children:"Done"})]})]})]})})}var Ie=ft;import vt,{useState as X}from"react";import*as _ from"@radix-ui/react-popover";import{jsx as h,jsxs as M}from"react/jsx-runtime";function wt({field:e,formValues:n,handleChange:d,handleBlur:g}){let[u,r]=X(!1),[l,m]=X("12"),[a,p]=X("00"),[f,N]=X("PM"),w=n[e.name]||"";vt.useEffect(()=>{if(w){let x=w.match(/(\d{1,2}):(\d{2})\s*(AM|PM)/i);x&&(m(x[1].padStart(2,"0")),p(x[2]),N(x[3].toUpperCase()))}},[w]);let $=()=>{let x=`${l}:${a} ${f}`;d(e.name,x),r(!1)},k=()=>{d(e.name,""),m("12"),p("00"),N("PM")},D=()=>{let x=parseInt(l);m((x%12+1).toString().padStart(2,"0"))},H=()=>{let x=parseInt(l);m((x===1?12:x-1).toString().padStart(2,"0"))},E=()=>{let x=parseInt(a);p(((x+5)%60).toString().padStart(2,"0"))},T=()=>{let x=parseInt(a);p((x===0?55:x-5).toString().padStart(2,"0"))};return h("div",{children:M(_.Root,{open:u,onOpenChange:r,children:[h(_.Trigger,{asChild:!0,children:M("button",{type:"button",id:e.name,"aria-haspopup":"dialog","aria-expanded":u,onClick:()=>r(!0),className:`
|
|
34
34
|
inline-flex items-center justify-between gap-2
|
|
35
35
|
w-full h-9 rounded-md border border-gray-300 bg-white
|
|
36
36
|
px-3 py-2 text-sm font-normal shadow-sm
|
|
37
37
|
hover:bg-gray-50 hover:text-gray-900
|
|
38
38
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
|
|
39
39
|
disabled:cursor-not-allowed disabled:opacity-50
|
|
40
|
-
`,children:[w?h("span",{children:w}):h("span",{className:"text-gray-400",children:e.placeholder||"Select time"}),
|
|
40
|
+
`,children:[w?h("span",{children:w}):h("span",{className:"text-gray-400",children:e.placeholder||"Select time"}),M("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-clock opacity-70",children:[h("circle",{cx:"12",cy:"12",r:"10"}),h("polyline",{points:"12 6 12 12 16 14"})]})]})}),h(_.Content,{align:"start",sideOffset:2,className:"z-50 rounded-md border border-gray-200 bg-white p-4 shadow-md w-64",children:M("div",{className:"flex flex-col gap-4",children:[M("div",{className:"flex items-center justify-center gap-2",children:[M("div",{className:"flex flex-col items-center",children:[h("button",{type:"button",onClick:D,className:"p-1 hover:bg-gray-100 rounded",children:h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:h("polyline",{points:"18 15 12 9 6 15"})})}),h("input",{type:"text",value:l,onChange:x=>{let S=x.target.value.replace(/\D/g,"");(S===""||parseInt(S)>=1&&parseInt(S)<=12)&&m(S.padStart(2,"0"))},className:"w-14 text-center text-2xl font-semibold border-0 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded py-2",maxLength:"2"}),h("button",{type:"button",onClick:H,className:"p-1 hover:bg-gray-100 rounded",children:h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:h("polyline",{points:"6 9 12 15 18 9"})})})]}),h("span",{className:"text-2xl font-semibold",children:":"}),M("div",{className:"flex flex-col items-center",children:[h("button",{type:"button",onClick:E,className:"p-1 hover:bg-gray-100 rounded",children:h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:h("polyline",{points:"18 15 12 9 6 15"})})}),h("input",{type:"text",value:a,onChange:x=>{let S=x.target.value.replace(/\D/g,"");(S===""||parseInt(S)>=0&&parseInt(S)<=59)&&p(S.padStart(2,"0"))},className:"w-14 text-center text-2xl font-semibold border-0 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded py-2",maxLength:"2"}),h("button",{type:"button",onClick:T,className:"p-1 hover:bg-gray-100 rounded",children:h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:h("polyline",{points:"6 9 12 15 18 9"})})})]}),M("div",{className:"flex flex-col gap-1 ml-2",children:[h("button",{type:"button",onClick:()=>N("AM"),className:`
|
|
41
41
|
px-3 py-1 text-sm font-medium rounded
|
|
42
42
|
${f==="AM"?"bg-blue-600 text-white":"bg-gray-100 text-gray-700 hover:bg-gray-200"}
|
|
43
43
|
`,children:"AM"}),h("button",{type:"button",onClick:()=>N("PM"),className:`
|
|
44
44
|
px-3 py-1 text-sm font-medium rounded
|
|
45
45
|
${f==="PM"?"bg-blue-600 text-white":"bg-gray-100 text-gray-700 hover:bg-gray-200"}
|
|
46
|
-
`,children:"PM"})]})]}),
|
|
46
|
+
`,children:"PM"})]})]}),M("div",{className:"flex items-center justify-between gap-2 border-t border-gray-200 pt-3",children:[h("button",{type:"button",onClick:k,className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-900 h-9 px-4 py-2",children:"Clear"}),h("button",{type:"button",onClick:$,className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-blue-600 text-white hover:bg-blue-700 h-9 px-4 py-2",children:"Done"})]})]})})]})})}var Me=wt;import"react";import{InformationCircleIcon as Nt,XCircleIcon as kt}from"@heroicons/react/20/solid";import{CheckCircleIcon as Ct}from"@heroicons/react/20/solid";import{ExclamationCircleIcon as St}from"@heroicons/react/24/outline";import{jsx as R,jsxs as J}from"react/jsx-runtime";function Ee({message:e}){return R("div",{className:"rounded-lg bg-red-50 border border-red-100 p-4 shadow-sm",children:J("div",{className:"flex items-center gap-3",children:[R(kt,{"aria-hidden":"true",className:"size-5 text-red-500 shrink-0"}),R("span",{className:"text-sm font-medium text-red-900",children:e})]})})}function Be({message:e}){return R("div",{className:"rounded-lg bg-amber-50 border border-amber-100 p-4 shadow-sm",children:J("div",{className:"flex items-center gap-3",children:[R(St,{"aria-hidden":"true",className:"size-5 text-amber-600 shrink-0"}),R("span",{className:"text-sm font-medium text-amber-900",children:e})]})})}function De({message:e}){return R("div",{className:"rounded-lg bg-green-50 border border-green-100 p-4 shadow-sm",children:J("div",{className:"flex items-center gap-3",children:[R(Ct,{"aria-hidden":"true",className:"size-5 text-green-600 shrink-0"}),R("span",{className:"text-sm font-medium text-green-900",children:e})]})})}function Te({message:e}){return R("div",{className:"rounded-lg bg-blue-50 border border-blue-100 p-4 shadow-sm",children:J("div",{className:"flex items-center gap-3",children:[R(Nt,{"aria-hidden":"true",className:"size-5 text-blue-600 shrink-0"}),R("span",{className:"text-sm font-medium text-blue-900",children:e})]})})}import{jsx as Q}from"react/jsx-runtime";function Ft({field:e}){let{variant:n="info",message:d,content:g}=e,u=d||g||"";switch(n.toLowerCase()){case"error":case"danger":return Q(Ee,{message:u});case"success":return Q(De,{message:u});case"warning":case"warn":return Q(Be,{message:u});case"info":case"information":default:return Q(Te,{message:u})}}var Ae=Ft;import{Label as Pt}from"@radix-ui/react-label";import{Fragment as It,jsx as B,jsxs as le}from"react/jsx-runtime";var Lt=({formDefinition:e,sendFormValues:n,children:d,defaultValues:g={},onFieldsChange:u=()=>{}})=>{let[r,l]=Z({...g}),[m,a]=Z({}),[p,f]=Z({}),[N,w]=Z({}),$=["hidden","html","linebreak","header","alert"],k=Rt(()=>({file:se,multifile:se,dateRange:fe,date:Ie,dayTimePicker:Se,time:Me,hidden:me,multiselect:ue,select:pe,email:be,litertext:he,checkbox:ye,radiogroup:$e,input:re,textarea:ke,header:Le,alert:Ae,linebreak:Fe}),[]),D={},H=async(t,o=null)=>{try{let s=await de(`/${t.optionsUrl}`);console.log(s);let c=[];t.type==="select"?c=[{value:"",label:`Select ${t.label.toLowerCase()}`},...s.data]:c=[...s.data.map(v=>({value:v.value,label:v.label}))],e.fields.forEach(v=>{v.name===t.name&&(v.options=c)})}catch(s){console.error(`Failed to load options for ${t.name}:`,s)}finally{}};ze(()=>{if(e!=null&&e.fields&&e.fields.length>0){if(!e.fields.some(s=>s.value))return;e.fields.forEach(s=>{s.optionsUrl&&H(s)});let o={};e.fields.forEach(s=>{o[s.name]=g[s.name]??s.value??(s.type==="multiselect"?[]:"")}),l(o)}},[e]);let E=(t,o,s)=>{if(t.disabled&&t.disabled(s))return null;if(t.required){if(!o)return`${t.label} is required`;if(Array.isArray(o)&&o.length===0)return`Please select at least one ${t.label.toLowerCase()}`}if(t.validate){let c=t.validate(o,s);if(c)return c}if(t.type==="email"&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(o))return"Please enter a valid email address";if(t.type==="number"){if(t.min!==void 0&&o<t.min)return`${t.label} must be at least ${t.min}`;if(t.max!==void 0&&o>t.max)return`${t.label} must be no more than ${t.max}`}return t.type==="date"&&!Oe(o).isValid()?`${t.label} must be a valid date`:t.maxLength&&o&&o.length>t.maxLength?`${t.label} must not exceed ${t.maxLength} characters`:null},T=(t,o)=>{let s=e.fields.find(y=>y.name===t);if(!s)return;let c={...r};console.log(o),s.type==="multiselect"?c[t]=Array.isArray(o)?o:Array.from(o.target.selectedOptions).map(y=>y.value):s.type==="dateRange"?(console.log(o),c[t]=[{startDate:o[0].from,endDate:o[0].to,key:"selection"}]):s.type==="dayTimePicker"?c[t]=o?Oe(o).format("YYYY-MM-DD HH:mm:ss"):"":c[t]=o,s.type==="select"&&e.fields.forEach(y=>{y.showIf&&!y.showIf(c)&&(c[y.name]=y.type==="multiselect"?[]:"")}),e.fields.forEach(y=>{y.disabled&&y.disabled(c)&&(c[y.name]=y.type==="multiselect"?[]:"")}),l(c);let v={};e.fields.forEach(y=>{if(!y.showIf||y.showIf(c)){let j=E(y,c[y.name],c);j&&(v[y.name]=j)}}),a(v)},x=t=>{f({...p,[t]:!0})},S=t=>{t.preventDefault();let o={};e.fields.forEach(c=>{o[c.name]=!0}),f(o);let s={};e.fields.forEach(c=>{if((!c.showIf||c.showIf(r))&&(!c.disabled||!c.disabled(r))){let v=E(c,r[c.name],r);v&&(s[c.name]=v)}}),a(s),Object.keys(s).length===0?n(r):$t.error("Please correct the errors in the form")};ze(()=>{u(r)},[r,u]);let W={green:"border-green-500 bg-green-50",blue:"border-blue-500 bg-blue-50",red:"border-red-500 bg-red-50",yellow:"border-yellow-500 bg-yellow-50",purple:"border-purple-500 bg-purple-50",indigo:"border-indigo-500 bg-indigo-50",gray:"border-gray-500 bg-gray-50",pink:"border-pink-500 bg-pink-50",orange:"border-orange-500 bg-orange-50"};function ee(t,o,s){if($.includes(o.type))return B("div",{className:o.fieldClass||"col-span-8",children:t});let c=o.containerStyle,v=o.color||"blue",y=c==="card"?`rounded-lg border text-card-foreground shadow-sm p-4 ${o.containerClassName||W[v]||W.blue}`:"",j=le(It,{children:[o.label&&le(Pt,{htmlFor:o.name,className:"block text-sm font-medium mb-1",children:[o.label,o.required&&B("span",{className:"text-red-500 ml-1",children:"*"})]}),B("div",{children:t}),s&&B("p",{className:"mt-1 text-sm text-red-500",children:s})]});return B("div",{className:`mb-4 ${o.fieldClass||"col-span-8"}`,children:c==="card"?B("div",{className:y,children:j}):j})}let i=t=>{if(t.showIf&&!t.showIf(r))return null;let o=k[t.type]||re;r[t.name]===void 0&&(r[t.name]=t.value!==void 0?t.value:t.type==="multiselect"?[]:"");let s=p[t.name]&&m[t.name]?m[t.name]:null;return ee(B(o,{field:t,formValues:r,handleChange:T,handleBlur:()=>x(t.name),setCharCounts:w,charCount:N[t.name]||0}),t)};return le("form",{onSubmit:S,className:"grid grid-cols-12 gap-x-4 mx-auto",children:[e?e.fields.map(i):B("div",{children:"Loading..."}),d]})},ie=Lt;var Mr=ie;export{ie as DynamicForm,ie as DynamicFormComponent,te as MyButton,te as MyButtonComponent,Mr as default};
|
|
47
47
|
//# sourceMappingURL=index.js.map
|