@net-advantage/nabs-ui-dynamicform 0.62.0 → 0.63.0
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.
|
@@ -8,6 +8,7 @@ export interface DynamicFormSchemaProperty {
|
|
|
8
8
|
type?: DynamicFormPrimitiveType;
|
|
9
9
|
maxLength?: number;
|
|
10
10
|
format?: string;
|
|
11
|
+
currencySymbol?: string;
|
|
11
12
|
properties?: Record<string, DynamicFormSchemaProperty>;
|
|
12
13
|
[key: string]: unknown;
|
|
13
14
|
}
|
|
@@ -22,7 +23,7 @@ export interface DynamicFormProps extends Omit<ComponentPropsWithoutRef<"div">,
|
|
|
22
23
|
onChange?: (value: DynamicFormValue) => void;
|
|
23
24
|
disabled?: boolean;
|
|
24
25
|
}
|
|
25
|
-
export type FieldMode = "textbox" | "textarea" | "radio" | "bool" | "int" | "decimal" | "double";
|
|
26
|
+
export type FieldMode = "textbox" | "textarea" | "radio" | "bool" | "int" | "decimal" | "double" | "currencyDecimal" | "currencyDouble";
|
|
26
27
|
export interface FieldRendererProps {
|
|
27
28
|
schema: DynamicFormSchemaProperty;
|
|
28
29
|
name: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");var n={right:`nabs-ui-checkbox--label-right`,left:`nabs-ui-checkbox--label-left`,top:`nabs-ui-checkbox--label-top`,bottom:`nabs-ui-checkbox--label-bottom`},r=(0,e.forwardRef)(function({label:r=`Checkbox`,labelPosition:i=`right`,className:a=``,inputClassName:o=``,labelClassName:s=``,id:c,disabled:l,...u},d){let f=(0,e.useId)(),p=c??`nabs-ui-checkbox-${f.replace(/:/g,``)}`,m=[`nabs-ui-checkbox`,l?`nabs-ui-checkbox--disabled`:``,n[i]??n.right,a].filter(Boolean).join(` `),h=[`nabs-ui-checkbox__input`,o].filter(Boolean).join(` `),g=[`nabs-ui-checkbox__label`,s].filter(Boolean).join(` `);return(0,t.jsxs)(`label`,{className:m,htmlFor:p,children:[(0,t.jsx)(`input`,{ref:d,id:p,className:h,type:`checkbox`,disabled:l,...u}),(0,t.jsx)(`span`,{className:g,children:r})]})});r.displayName=`Checkbox`;var i={right:`nabs-ui-radiobutton--label-right`,left:`nabs-ui-radiobutton--label-left`,top:`nabs-ui-radiobutton--label-top`,bottom:`nabs-ui-radiobutton--label-bottom`};function a({label:n=`Radio button`,labelPosition:r=`right`,className:a=``,inputClassName:o=``,labelClassName:s=``,id:c,...l}){let u=l.disabled===!0,d=(0,e.useId)(),f=c??`nabs-ui-radiobutton-${d.replace(/:/g,``)}`,p=[`nabs-ui-radiobutton`,u?`nabs-ui-radiobutton--disabled`:``,i[r]??i.right,a].filter(Boolean).join(` `),m=[`nabs-ui-radiobutton__input`,o].filter(Boolean).join(` `),h=[`nabs-ui-radiobutton__label`,s].filter(Boolean).join(` `);return(0,t.jsxs)(`label`,{className:p,htmlFor:f,children:[(0,t.jsx)(`input`,{id:f,className:m,type:`radio`,...l}),(0,t.jsx)(`span`,{className:h,children:n})]})}var o=(0,e.forwardRef)(({label:n,className:r=``,inputClassName:i=``,labelClassName:a=``,id:o,rows:s=4,resize:c=`vertical`,...l},u)=>{let d=(0,e.useId)(),f=o??`nabs-ui-textarea-${d.replace(/:/g,``)}`,p=[`nabs-ui-textarea`,r].filter(Boolean).join(` `),m=[`nabs-ui-textarea__input`,i].filter(Boolean).join(` `),h=[`nabs-ui-textarea__label`,a].filter(Boolean).join(` `);return(0,t.jsxs)(`div`,{className:p,children:[n?(0,t.jsx)(`label`,{className:h,htmlFor:f,children:n}):null,(0,t.jsx)(`textarea`,{ref:u,id:f,className:m,rows:s,"data-resize":c,...l})]})});o.displayName=`Textarea`;var s={none:``,top:`nabs-ui-textbox--label-top`,left:`nabs-ui-textbox--label-left`}
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");var n={right:`nabs-ui-checkbox--label-right`,left:`nabs-ui-checkbox--label-left`,top:`nabs-ui-checkbox--label-top`,bottom:`nabs-ui-checkbox--label-bottom`},r=(0,e.forwardRef)(function({label:r=`Checkbox`,labelPosition:i=`right`,className:a=``,inputClassName:o=``,labelClassName:s=``,id:c,disabled:l,...u},d){let f=(0,e.useId)(),p=c??`nabs-ui-checkbox-${f.replace(/:/g,``)}`,m=[`nabs-ui-checkbox`,l?`nabs-ui-checkbox--disabled`:``,n[i]??n.right,a].filter(Boolean).join(` `),h=[`nabs-ui-checkbox__input`,o].filter(Boolean).join(` `),g=[`nabs-ui-checkbox__label`,s].filter(Boolean).join(` `);return(0,t.jsxs)(`label`,{className:m,htmlFor:p,children:[(0,t.jsx)(`input`,{ref:d,id:p,className:h,type:`checkbox`,disabled:l,...u}),(0,t.jsx)(`span`,{className:g,children:r})]})});r.displayName=`Checkbox`;var i={right:`nabs-ui-radiobutton--label-right`,left:`nabs-ui-radiobutton--label-left`,top:`nabs-ui-radiobutton--label-top`,bottom:`nabs-ui-radiobutton--label-bottom`};function a({label:n=`Radio button`,labelPosition:r=`right`,className:a=``,inputClassName:o=``,labelClassName:s=``,id:c,...l}){let u=l.disabled===!0,d=(0,e.useId)(),f=c??`nabs-ui-radiobutton-${d.replace(/:/g,``)}`,p=[`nabs-ui-radiobutton`,u?`nabs-ui-radiobutton--disabled`:``,i[r]??i.right,a].filter(Boolean).join(` `),m=[`nabs-ui-radiobutton__input`,o].filter(Boolean).join(` `),h=[`nabs-ui-radiobutton__label`,s].filter(Boolean).join(` `);return(0,t.jsxs)(`label`,{className:p,htmlFor:f,children:[(0,t.jsx)(`input`,{id:f,className:m,type:`radio`,...l}),(0,t.jsx)(`span`,{className:h,children:n})]})}var o=(0,e.forwardRef)(({label:n,className:r=``,inputClassName:i=``,labelClassName:a=``,id:o,rows:s=4,resize:c=`vertical`,...l},u)=>{let d=(0,e.useId)(),f=o??`nabs-ui-textarea-${d.replace(/:/g,``)}`,p=[`nabs-ui-textarea`,r].filter(Boolean).join(` `),m=[`nabs-ui-textarea__input`,i].filter(Boolean).join(` `),h=[`nabs-ui-textarea__label`,a].filter(Boolean).join(` `);return(0,t.jsxs)(`div`,{className:p,children:[n?(0,t.jsx)(`label`,{className:h,htmlFor:f,children:n}):null,(0,t.jsx)(`textarea`,{ref:u,id:f,className:m,rows:s,"data-resize":c,...l})]})});o.displayName=`Textarea`;var s={none:``,top:`nabs-ui-textbox--label-top`,left:`nabs-ui-textbox--label-left`};function c(e){if(e===``||e==null)return``;if(typeof e==`number`)return e.toFixed(2);if(typeof e==`string`){let t=e.trim();if(!t)return``;let n=Number.parseFloat(t);return Number.isNaN(n)?e:n.toFixed(2)}return e}var l=(0,e.forwardRef)(({label:n,labelPosition:r=`top`,className:i=``,inputClassName:a=``,labelClassName:o=``,format:l=`default`,currencySymbol:u=`$`,id:d,type:f=`text`,value:p,inputMode:m,...h},g)=>{let _=(0,e.useId)(),v=d??`nabs-ui-textbox-${_.replace(/:/g,``)}`,y=[`nabs-ui-textbox`,n?s[r]??s.top:``,i].filter(Boolean).join(` `),b=[`nabs-ui-textbox__input`,a].filter(Boolean).join(` `),x=[`nabs-ui-textbox__label`,o].filter(Boolean).join(` `),S=l===`currency`,C=S?`text`:f,w=S?m??`decimal`:m,T=S?c(p):p;return(0,t.jsxs)(`div`,{className:y,children:[n?(0,t.jsx)(`label`,{className:x,htmlFor:v,children:n}):null,S?(0,t.jsxs)(`div`,{className:`nabs-ui-textbox__currencyWrap`,children:[(0,t.jsx)(`span`,{className:`nabs-ui-textbox__currencySymbol`,"aria-hidden":`true`,children:u}),(0,t.jsx)(`input`,{ref:g,id:v,className:b,type:C,inputMode:w,value:T,...h})]}):(0,t.jsx)(`input`,{ref:g,id:v,className:b,type:C,inputMode:w,value:T,...h})]})});l.displayName=`Textbox`;function u(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function d(e){return!e||e.type!==`object`||!u(e.properties)?{}:Object.fromEntries(Object.entries(e.properties).map(([e,t])=>[e,f(t)]))}function f(e){if(!e||!u(e))return``;if(e.default!==void 0)return e.default;if(Array.isArray(e.enum)&&e.enum.length>0)return e.enum[0];switch(e.type){case`boolean`:return!1;case`integer`:case`number`:return``;case`object`:return d(e);default:return``}}function p(e,t){if(!e||!u(e))return t;if(e.type===`object`&&u(e.properties)){let n=u(t)?t:{};return Object.fromEntries(Object.entries(e.properties).map(([e,t])=>[e,p(t,n[e]===void 0?f(t):n[e])]))}if(e.type===`boolean`)return t===!0;if(e.type===`integer`){if(t===``||t==null)return``;let e=Number.parseInt(String(t),10);return Number.isNaN(e)?``:e}if(e.type===`number`){if(t===``||t==null)return``;let e=Number.parseFloat(String(t));return Number.isNaN(e)?``:e}return t??``}function m(e){if(!e||!u(e))return`textbox`;if(Array.isArray(e.enum)&&e.enum.length>0)return`radio`;if(e.type===`string`)return e.maxLength!==void 0&&e.maxLength>50?`textarea`:`textbox`;if(e.type===`integer`)return`int`;if(e.type===`number`){let t=String(e.format??``).toLowerCase(),n=String(e.currencySymbol??``).trim().length>0;return t===`decimal`?n?`currencyDecimal`:`decimal`:n?`currencyDouble`:`double`}return e.type===`boolean`?`bool`:`textbox`}var h={type:`object`,properties:{}};function g({schema:e,name:n,value:i,onChange:s}){let c=e.title??n,u=e.description,d=m(e),p=i??f(e);if(d===`radio`){let r=Array.isArray(e.enum)?e.enum:[];return(0,t.jsxs)(`fieldset`,{className:`nabs-ui-dynamicform__fieldset`,children:[(0,t.jsx)(`legend`,{className:`nabs-ui-dynamicform__legend`,children:c}),u?(0,t.jsx)(`p`,{className:`nabs-ui-dynamicform__description`,children:u}):null,(0,t.jsx)(`div`,{className:`nabs-ui-dynamicform__radioGroup`,children:r.map(e=>(0,t.jsx)(a,{label:String(e),name:n,checked:p===e,onChange:()=>s(e)},String(e)))})]})}if(d===`textarea`)return(0,t.jsx)(o,{label:c,rows:5,value:String(p??``),placeholder:String(e.default??``),onChange:e=>s(e.target.value)});if(d===`bool`)return(0,t.jsx)(r,{label:c,checked:p===!0,onChange:e=>s(e.target.checked)});let h=d===`currencyDecimal`||d===`currencyDouble`,g=d===`int`||d===`decimal`||d===`double`||d===`currencyDecimal`||d===`currencyDouble`,_=g?`number`:`text`,v=d===`int`?1:g?`any`:void 0,y=String(e.currencySymbol??``).trim(),b=h&&y.length>0,x=e=>{if(d===`int`){s(e===``?``:Number.parseInt(e,10));return}if(d===`decimal`||d===`double`||d===`currencyDecimal`||d===`currencyDouble`){s(e===``?``:Number.parseFloat(e));return}s(e)};return(0,t.jsx)(l,{label:c,type:_,step:v,format:b?`currency`:`default`,currencySymbol:b?y:void 0,value:String(p??``),placeholder:String(e.default??``),onChange:e=>x(e.target.value)})}var _=(0,e.forwardRef)(function({schema:n,value:r,onChange:i,className:a=``,id:o,disabled:s=!1,...c},l){let f=(0,e.useId)(),m=o??`nabs-ui-dynamicform-${f.replace(/:/g,``)}`,_=n&&n.type===`object`?n:h,[v,y]=(0,e.useState)(()=>p(_,r??d(_)));(0,e.useEffect)(()=>{y(p(_,r??d(_)))},[_,r]);let b=u(v)?v:{},x=_.title??`Dynamic form`,S=_.description,C=[`nabs-ui-dynamicform`,s?`nabs-ui-dynamicform--disabled`:``,a].filter(Boolean).join(` `),w=e=>{y(e),i?.(e)};return s?(0,t.jsxs)(`div`,{ref:l,id:m,className:C,"aria-disabled":`true`,...c,children:[(0,t.jsxs)(`div`,{className:`nabs-ui-dynamicform__header`,children:[(0,t.jsx)(`div`,{className:`nabs-ui-dynamicform__title`,children:x}),S?(0,t.jsx)(`div`,{className:`nabs-ui-dynamicform__description`,children:S}):null]}),(0,t.jsx)(`div`,{className:`nabs-ui-dynamicform__fields`,children:Object.entries(_.properties??{}).map(([e,n])=>(0,t.jsx)(`div`,{className:`nabs-ui-dynamicform__field`,children:(0,t.jsx)(g,{schema:n,name:e,value:b[e],onChange:t=>w({...b,[e]:p(n,t)})})},e))})]}):(0,t.jsxs)(`div`,{ref:l,id:m,className:C,...c,children:[(0,t.jsxs)(`div`,{className:`nabs-ui-dynamicform__header`,children:[(0,t.jsx)(`div`,{className:`nabs-ui-dynamicform__title`,children:x}),S?(0,t.jsx)(`div`,{className:`nabs-ui-dynamicform__description`,children:S}):null]}),(0,t.jsx)(`div`,{className:`nabs-ui-dynamicform__fields`,children:Object.entries(_.properties??{}).map(([e,n])=>(0,t.jsx)(`div`,{className:`nabs-ui-dynamicform__field`,children:(0,t.jsx)(g,{schema:n,name:e,value:b[e],onChange:t=>w({...b,[e]:p(n,t)})})},e))})]})});_.displayName=`DynamicForm`,exports.DynamicForm=_;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.nabs-ui-checkbox{box-sizing:border-box;cursor:pointer;font:inherit;align-items:center;gap:var(--nabs-ui-density-checkbox-gap,.75rem);min-width:0;padding:var(--nabs-ui-density-checkbox-padding-y,.8rem) var(--nabs-ui-density-checkbox-padding-x,1rem);transition:border-color .12s,box-shadow .12s,background-color .12s,transform .12s;display:inline-flex}.nabs-ui-checkbox:hover{transform:translateY(var(--nabs-ui-density-control-hover-translate-y,-1px))}.nabs-ui-checkbox__input{flex:none;margin:0}.nabs-ui-checkbox__label{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-checkbox--label-left{flex-direction:row-reverse}.nabs-ui-checkbox--label-top,.nabs-ui-checkbox--label-bottom{align-items:stretch;gap:var(--nabs-ui-density-checkbox-stack-gap,.5rem)}.nabs-ui-checkbox--label-top{flex-direction:column-reverse}.nabs-ui-checkbox--label-bottom{flex-direction:column}.nabs-ui-checkbox--label-top .nabs-ui-checkbox__label,.nabs-ui-checkbox--label-bottom .nabs-ui-checkbox__label{width:100%}.nabs-ui-checkbox--disabled{cursor:not-allowed}.nabs-ui-radiobutton{box-sizing:border-box;cursor:pointer;font:inherit;align-items:center;gap:var(--nabs-ui-density-radio-gap,.75rem);min-width:0;padding:var(--nabs-ui-density-radio-padding-y,.8rem) var(--nabs-ui-density-radio-padding-x,1rem);transition:border-color .12s,box-shadow .12s,background-color .12s,transform .12s;display:inline-flex}.nabs-ui-radiobutton:hover{transform:translateY(var(--nabs-ui-density-control-hover-translate-y,-1px))}.nabs-ui-radiobutton__input{flex:none;margin:0}.nabs-ui-radiobutton__label{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-radiobutton--label-left{flex-direction:row-reverse}.nabs-ui-radiobutton--label-top,.nabs-ui-radiobutton--label-bottom{align-items:stretch;gap:var(--nabs-ui-density-radio-stack-gap,.5rem)}.nabs-ui-radiobutton--label-top{flex-direction:column-reverse}.nabs-ui-radiobutton--label-bottom{flex-direction:column}.nabs-ui-radiobutton--label-top .nabs-ui-radiobutton__label,.nabs-ui-radiobutton--label-bottom .nabs-ui-radiobutton__label{width:100%}.nabs-ui-radiobutton--disabled{cursor:not-allowed}.nabs-ui-textarea{gap:var(--nabs-ui-density-gap-field,.5rem);min-width:0;display:grid}.nabs-ui-textarea__label{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-textarea__input{box-sizing:border-box;font:inherit;min-height:var(--nabs-ui-density-textarea-min-height,8rem);min-width:0;padding:var(--nabs-ui-density-textarea-padding-y,.85rem) var(--nabs-ui-density-textarea-padding-x,1rem);resize:vertical;width:100%;transition:border-color .12s,box-shadow .12s,background-color .12s}.nabs-ui-textarea__input[data-resize=none]{resize:none}.nabs-ui-textarea__input[data-resize=both]{resize:both}.nabs-ui-textarea__input[data-resize=horizontal]{resize:horizontal}.nabs-ui-textarea__input:disabled{cursor:not-allowed}.nabs-ui-textbox{gap:var(--nabs-ui-density-gap-field,.7rem);display:grid}.nabs-ui-textbox__label{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600}.nabs-ui-textbox__input{appearance:none;box-sizing:border-box;font:inherit;line-height:var(--nabs-ui-density-line-height-control,1.4);min-height:var(--nabs-ui-density-input-min-height,3rem);padding:var(--nabs-ui-density-input-padding-y,.8rem) var(--nabs-ui-density-input-padding-x,1rem);width:100%;transition:border-color .12s,box-shadow .12s,background-color .12s}.nabs-ui-textbox__input:disabled{cursor:not-allowed}.nabs-ui-textbox--label-left{align-items:center;gap:var(--nabs-ui-density-gap-label-left,1rem);display:flex}.nabs-ui-textbox--label-left .nabs-ui-textbox__label{flex:0 0 var(--nabs-ui-density-label-width,9rem)}.nabs-ui-textbox--label-left .nabs-ui-textbox__input{flex:auto}@media (width<=640px){.nabs-ui-textbox--label-left{align-items:stretch;gap:var(--nabs-ui-density-gap-field,.7rem);flex-direction:column}.nabs-ui-textbox--label-left .nabs-ui-textbox__label{flex-basis:auto}}.nabs-ui-dynamicform{gap:var(--nabs-ui-density-dynamicform-gap,1rem);display:grid}.nabs-ui-dynamicform__header{gap:var(--nabs-ui-density-dynamicform-header-gap,.35rem);display:grid}.nabs-ui-dynamicform__title{font-size:var(--nabs-ui-density-dynamicform-title-font-size,1rem);font-weight:800;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-dynamicform__description{font-size:var(--nabs-ui-density-dynamicform-description-font-size,.9rem);margin:0;line-height:1.45}.nabs-ui-dynamicform__fields{gap:var(--nabs-ui-density-dynamicform-gap,1rem);display:grid}.nabs-ui-dynamicform__field{min-width:0}.nabs-ui-dynamicform__fieldset{gap:var(--nabs-ui-density-dynamicform-fieldset-gap,.85rem);min-width:0;padding:var(--nabs-ui-density-dynamicform-fieldset-padding-y,1rem) var(--nabs-ui-density-dynamicform-fieldset-padding-x,1rem);margin:0;display:grid}.nabs-ui-dynamicform__legend{font-size:var(--nabs-ui-density-font-size-control,.95rem);padding:0 var(--nabs-ui-density-dynamicform-legend-padding-x,.25rem);font-weight:800}.nabs-ui-dynamicform__radioGroup{gap:var(--nabs-ui-density-dynamicform-radio-gap,.65rem);display:grid}
|
|
1
|
+
.nabs-ui-checkbox{box-sizing:border-box;cursor:pointer;font:inherit;align-items:center;gap:var(--nabs-ui-density-checkbox-gap,.75rem);min-width:0;padding:var(--nabs-ui-density-checkbox-padding-y,.8rem) var(--nabs-ui-density-checkbox-padding-x,1rem);transition:border-color .12s,box-shadow .12s,background-color .12s,transform .12s;display:inline-flex}.nabs-ui-checkbox:hover{transform:translateY(var(--nabs-ui-density-control-hover-translate-y,-1px))}.nabs-ui-checkbox__input{flex:none;margin:0}.nabs-ui-checkbox__label{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-checkbox--label-left{flex-direction:row-reverse}.nabs-ui-checkbox--label-top,.nabs-ui-checkbox--label-bottom{align-items:stretch;gap:var(--nabs-ui-density-checkbox-stack-gap,.5rem)}.nabs-ui-checkbox--label-top{flex-direction:column-reverse}.nabs-ui-checkbox--label-bottom{flex-direction:column}.nabs-ui-checkbox--label-top .nabs-ui-checkbox__label,.nabs-ui-checkbox--label-bottom .nabs-ui-checkbox__label{width:100%}.nabs-ui-checkbox--disabled{cursor:not-allowed}.nabs-ui-radiobutton{box-sizing:border-box;cursor:pointer;font:inherit;align-items:center;gap:var(--nabs-ui-density-radio-gap,.75rem);min-width:0;padding:var(--nabs-ui-density-radio-padding-y,.8rem) var(--nabs-ui-density-radio-padding-x,1rem);transition:border-color .12s,box-shadow .12s,background-color .12s,transform .12s;display:inline-flex}.nabs-ui-radiobutton:hover{transform:translateY(var(--nabs-ui-density-control-hover-translate-y,-1px))}.nabs-ui-radiobutton__input{flex:none;margin:0}.nabs-ui-radiobutton__label{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-radiobutton--label-left{flex-direction:row-reverse}.nabs-ui-radiobutton--label-top,.nabs-ui-radiobutton--label-bottom{align-items:stretch;gap:var(--nabs-ui-density-radio-stack-gap,.5rem)}.nabs-ui-radiobutton--label-top{flex-direction:column-reverse}.nabs-ui-radiobutton--label-bottom{flex-direction:column}.nabs-ui-radiobutton--label-top .nabs-ui-radiobutton__label,.nabs-ui-radiobutton--label-bottom .nabs-ui-radiobutton__label{width:100%}.nabs-ui-radiobutton--disabled{cursor:not-allowed}.nabs-ui-textarea{gap:var(--nabs-ui-density-gap-field,.5rem);min-width:0;display:grid}.nabs-ui-textarea__label{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-textarea__input{box-sizing:border-box;font:inherit;min-height:var(--nabs-ui-density-textarea-min-height,8rem);min-width:0;padding:var(--nabs-ui-density-textarea-padding-y,.85rem) var(--nabs-ui-density-textarea-padding-x,1rem);resize:vertical;width:100%;transition:border-color .12s,box-shadow .12s,background-color .12s}.nabs-ui-textarea__input[data-resize=none]{resize:none}.nabs-ui-textarea__input[data-resize=both]{resize:both}.nabs-ui-textarea__input[data-resize=horizontal]{resize:horizontal}.nabs-ui-textarea__input:disabled{cursor:not-allowed}.nabs-ui-textbox{gap:var(--nabs-ui-density-gap-field,.7rem);display:grid}.nabs-ui-textbox__label{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600}.nabs-ui-textbox__input{appearance:none;box-sizing:border-box;font:inherit;line-height:var(--nabs-ui-density-line-height-control,1.4);min-height:var(--nabs-ui-density-input-min-height,3rem);padding:var(--nabs-ui-density-input-padding-y,.8rem) var(--nabs-ui-density-input-padding-x,1rem);width:100%;transition:border-color .12s,box-shadow .12s,background-color .12s}.nabs-ui-textbox__input:disabled{cursor:not-allowed}.nabs-ui-textbox__currencyWrap{grid-template-columns:auto 1fr;align-items:center;display:grid}.nabs-ui-textbox__currencySymbol{min-width:var(--nabs-ui-density-textbox-currency-symbol-min-width,2rem);padding:var(--nabs-ui-density-textbox-currency-symbol-padding-y,.45rem) var(--nabs-ui-density-textbox-currency-symbol-padding-x,.65rem);justify-content:center;align-items:center;display:inline-flex}.nabs-ui-textbox--label-left{align-items:center;gap:var(--nabs-ui-density-gap-label-left,1rem);display:flex}.nabs-ui-textbox--label-left .nabs-ui-textbox__label{flex:0 0 var(--nabs-ui-density-label-width,9rem)}.nabs-ui-textbox--label-left .nabs-ui-textbox__input{flex:auto}@media (width<=640px){.nabs-ui-textbox--label-left{align-items:stretch;gap:var(--nabs-ui-density-gap-field,.7rem);flex-direction:column}.nabs-ui-textbox--label-left .nabs-ui-textbox__label{flex-basis:auto}}.nabs-ui-dynamicform{gap:var(--nabs-ui-density-dynamicform-gap,1rem);display:grid}.nabs-ui-dynamicform__header{gap:var(--nabs-ui-density-dynamicform-header-gap,.35rem);display:grid}.nabs-ui-dynamicform__title{font-size:var(--nabs-ui-density-dynamicform-title-font-size,1rem);font-weight:800;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-dynamicform__description{font-size:var(--nabs-ui-density-dynamicform-description-font-size,.9rem);margin:0;line-height:1.45}.nabs-ui-dynamicform__fields{gap:var(--nabs-ui-density-dynamicform-gap,1rem);display:grid}.nabs-ui-dynamicform__field{min-width:0}.nabs-ui-dynamicform__fieldset{gap:var(--nabs-ui-density-dynamicform-fieldset-gap,.85rem);min-width:0;padding:var(--nabs-ui-density-dynamicform-fieldset-padding-y,1rem) var(--nabs-ui-density-dynamicform-fieldset-padding-x,1rem);margin:0;display:grid}.nabs-ui-dynamicform__legend{font-size:var(--nabs-ui-density-font-size-control,.95rem);padding:0 var(--nabs-ui-density-dynamicform-legend-padding-x,.25rem);font-weight:800}.nabs-ui-dynamicform__radioGroup{gap:var(--nabs-ui-density-dynamicform-radio-gap,.65rem);display:grid}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -88,53 +88,84 @@ var d = {
|
|
|
88
88
|
none: "",
|
|
89
89
|
top: "nabs-ui-textbox--label-top",
|
|
90
90
|
left: "nabs-ui-textbox--label-left"
|
|
91
|
-
}
|
|
92
|
-
|
|
91
|
+
};
|
|
92
|
+
//#endregion
|
|
93
|
+
//#region ../nabs-ui-textbox/src/Textbox.tsx
|
|
94
|
+
function f(e) {
|
|
95
|
+
if (e === "" || e == null) return "";
|
|
96
|
+
if (typeof e == "number") return e.toFixed(2);
|
|
97
|
+
if (typeof e == "string") {
|
|
98
|
+
let t = e.trim();
|
|
99
|
+
if (!t) return "";
|
|
100
|
+
let n = Number.parseFloat(t);
|
|
101
|
+
return Number.isNaN(n) ? e : n.toFixed(2);
|
|
102
|
+
}
|
|
103
|
+
return e;
|
|
104
|
+
}
|
|
105
|
+
var p = e(({ label: e, labelPosition: t = "top", className: r = "", inputClassName: o = "", labelClassName: s = "", format: c = "default", currencySymbol: l = "$", id: u, type: p = "text", value: m, inputMode: h, ...g }, _) => {
|
|
106
|
+
let v = n(), y = u ?? `nabs-ui-textbox-${v.replace(/:/g, "")}`, b = [
|
|
93
107
|
"nabs-ui-textbox",
|
|
94
108
|
e ? d[t] ?? d.top : "",
|
|
95
109
|
r
|
|
96
|
-
].filter(Boolean).join(" "),
|
|
110
|
+
].filter(Boolean).join(" "), x = ["nabs-ui-textbox__input", o].filter(Boolean).join(" "), S = ["nabs-ui-textbox__label", s].filter(Boolean).join(" "), C = c === "currency", w = C ? "text" : p, T = C ? h ?? "decimal" : h, E = C ? f(m) : m;
|
|
97
111
|
return /* @__PURE__ */ a("div", {
|
|
98
|
-
className:
|
|
112
|
+
className: b,
|
|
99
113
|
children: [e ? /* @__PURE__ */ i("label", {
|
|
100
|
-
className:
|
|
101
|
-
htmlFor:
|
|
114
|
+
className: S,
|
|
115
|
+
htmlFor: y,
|
|
102
116
|
children: e
|
|
103
|
-
}) : null, /* @__PURE__ */
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
117
|
+
}) : null, C ? /* @__PURE__ */ a("div", {
|
|
118
|
+
className: "nabs-ui-textbox__currencyWrap",
|
|
119
|
+
children: [/* @__PURE__ */ i("span", {
|
|
120
|
+
className: "nabs-ui-textbox__currencySymbol",
|
|
121
|
+
"aria-hidden": "true",
|
|
122
|
+
children: l
|
|
123
|
+
}), /* @__PURE__ */ i("input", {
|
|
124
|
+
ref: _,
|
|
125
|
+
id: y,
|
|
126
|
+
className: x,
|
|
127
|
+
type: w,
|
|
128
|
+
inputMode: T,
|
|
129
|
+
value: E,
|
|
130
|
+
...g
|
|
131
|
+
})]
|
|
132
|
+
}) : /* @__PURE__ */ i("input", {
|
|
133
|
+
ref: _,
|
|
134
|
+
id: y,
|
|
135
|
+
className: x,
|
|
136
|
+
type: w,
|
|
137
|
+
inputMode: T,
|
|
138
|
+
value: E,
|
|
139
|
+
...g
|
|
109
140
|
})]
|
|
110
141
|
});
|
|
111
142
|
});
|
|
112
|
-
|
|
143
|
+
p.displayName = "Textbox";
|
|
113
144
|
//#endregion
|
|
114
145
|
//#region src/dynamicform.utils.ts
|
|
115
|
-
function p(e) {
|
|
116
|
-
return typeof e == "object" && !!e && !Array.isArray(e);
|
|
117
|
-
}
|
|
118
146
|
function m(e) {
|
|
119
|
-
return
|
|
147
|
+
return typeof e == "object" && !!e && !Array.isArray(e);
|
|
120
148
|
}
|
|
121
149
|
function h(e) {
|
|
122
|
-
|
|
150
|
+
return !e || e.type !== "object" || !m(e.properties) ? {} : Object.fromEntries(Object.entries(e.properties).map(([e, t]) => [e, g(t)]));
|
|
151
|
+
}
|
|
152
|
+
function g(e) {
|
|
153
|
+
if (!e || !m(e)) return "";
|
|
123
154
|
if (e.default !== void 0) return e.default;
|
|
124
155
|
if (Array.isArray(e.enum) && e.enum.length > 0) return e.enum[0];
|
|
125
156
|
switch (e.type) {
|
|
126
157
|
case "boolean": return !1;
|
|
127
158
|
case "integer":
|
|
128
159
|
case "number": return "";
|
|
129
|
-
case "object": return
|
|
160
|
+
case "object": return h(e);
|
|
130
161
|
default: return "";
|
|
131
162
|
}
|
|
132
163
|
}
|
|
133
|
-
function
|
|
134
|
-
if (!e || !
|
|
135
|
-
if (e.type === "object" &&
|
|
136
|
-
let n =
|
|
137
|
-
return Object.fromEntries(Object.entries(e.properties).map(([e, t]) => [e,
|
|
164
|
+
function _(e, t) {
|
|
165
|
+
if (!e || !m(e)) return t;
|
|
166
|
+
if (e.type === "object" && m(e.properties)) {
|
|
167
|
+
let n = m(t) ? t : {};
|
|
168
|
+
return Object.fromEntries(Object.entries(e.properties).map(([e, t]) => [e, _(t, n[e] === void 0 ? g(t) : n[e])]));
|
|
138
169
|
}
|
|
139
170
|
if (e.type === "boolean") return t === !0;
|
|
140
171
|
if (e.type === "integer") {
|
|
@@ -149,17 +180,25 @@ function g(e, t) {
|
|
|
149
180
|
}
|
|
150
181
|
return t ?? "";
|
|
151
182
|
}
|
|
152
|
-
function
|
|
153
|
-
|
|
183
|
+
function v(e) {
|
|
184
|
+
if (!e || !m(e)) return "textbox";
|
|
185
|
+
if (Array.isArray(e.enum) && e.enum.length > 0) return "radio";
|
|
186
|
+
if (e.type === "string") return e.maxLength !== void 0 && e.maxLength > 50 ? "textarea" : "textbox";
|
|
187
|
+
if (e.type === "integer") return "int";
|
|
188
|
+
if (e.type === "number") {
|
|
189
|
+
let t = String(e.format ?? "").toLowerCase(), n = String(e.currencySymbol ?? "").trim().length > 0;
|
|
190
|
+
return t === "decimal" ? n ? "currencyDecimal" : "decimal" : n ? "currencyDouble" : "double";
|
|
191
|
+
}
|
|
192
|
+
return e.type === "boolean" ? "bool" : "textbox";
|
|
154
193
|
}
|
|
155
194
|
//#endregion
|
|
156
195
|
//#region src/DynamicForm.tsx
|
|
157
|
-
var
|
|
196
|
+
var y = {
|
|
158
197
|
type: "object",
|
|
159
198
|
properties: {}
|
|
160
199
|
};
|
|
161
|
-
function
|
|
162
|
-
let o = e.title ?? t, c = e.description, d =
|
|
200
|
+
function b({ schema: e, name: t, value: n, onChange: r }) {
|
|
201
|
+
let o = e.title ?? t, c = e.description, d = v(e), f = n ?? g(e);
|
|
163
202
|
if (d === "radio") {
|
|
164
203
|
let n = Array.isArray(e.enum) ? e.enum : [];
|
|
165
204
|
return /* @__PURE__ */ a("fieldset", {
|
|
@@ -178,49 +217,53 @@ function y({ schema: e, name: t, value: n, onChange: r }) {
|
|
|
178
217
|
children: n.map((e) => /* @__PURE__ */ i(l, {
|
|
179
218
|
label: String(e),
|
|
180
219
|
name: t,
|
|
181
|
-
checked:
|
|
220
|
+
checked: f === e,
|
|
182
221
|
onChange: () => r(e)
|
|
183
222
|
}, String(e)))
|
|
184
223
|
})
|
|
185
224
|
]
|
|
186
225
|
});
|
|
187
226
|
}
|
|
188
|
-
|
|
227
|
+
if (d === "textarea") return /* @__PURE__ */ i(u, {
|
|
189
228
|
label: o,
|
|
190
229
|
rows: 5,
|
|
191
|
-
value: String(
|
|
230
|
+
value: String(f ?? ""),
|
|
192
231
|
placeholder: String(e.default ?? ""),
|
|
193
232
|
onChange: (e) => r(e.target.value)
|
|
194
|
-
})
|
|
233
|
+
});
|
|
234
|
+
if (d === "bool") return /* @__PURE__ */ i(s, {
|
|
195
235
|
label: o,
|
|
196
|
-
checked:
|
|
236
|
+
checked: f === !0,
|
|
197
237
|
onChange: (e) => r(e.target.checked)
|
|
198
|
-
})
|
|
238
|
+
});
|
|
239
|
+
let m = d === "currencyDecimal" || d === "currencyDouble", h = d === "int" || d === "decimal" || d === "double" || d === "currencyDecimal" || d === "currencyDouble", _ = h ? "number" : "text", y = d === "int" ? 1 : h ? "any" : void 0, b = String(e.currencySymbol ?? "").trim(), x = m && b.length > 0, S = (e) => {
|
|
240
|
+
if (d === "int") {
|
|
241
|
+
r(e === "" ? "" : Number.parseInt(e, 10));
|
|
242
|
+
return;
|
|
243
|
+
}
|
|
244
|
+
if (d === "decimal" || d === "double" || d === "currencyDecimal" || d === "currencyDouble") {
|
|
245
|
+
r(e === "" ? "" : Number.parseFloat(e));
|
|
246
|
+
return;
|
|
247
|
+
}
|
|
248
|
+
r(e);
|
|
249
|
+
};
|
|
250
|
+
return /* @__PURE__ */ i(p, {
|
|
199
251
|
label: o,
|
|
200
|
-
type:
|
|
201
|
-
step:
|
|
202
|
-
|
|
252
|
+
type: _,
|
|
253
|
+
step: y,
|
|
254
|
+
format: x ? "currency" : "default",
|
|
255
|
+
currencySymbol: x ? b : void 0,
|
|
256
|
+
value: String(f ?? ""),
|
|
203
257
|
placeholder: String(e.default ?? ""),
|
|
204
|
-
onChange: (e) =>
|
|
205
|
-
let t = e.target.value;
|
|
206
|
-
if (d === "int") {
|
|
207
|
-
r(t === "" ? "" : Number.parseInt(t, 10));
|
|
208
|
-
return;
|
|
209
|
-
}
|
|
210
|
-
if (d === "decimal" || d === "double") {
|
|
211
|
-
r(t === "" ? "" : Number.parseFloat(t));
|
|
212
|
-
return;
|
|
213
|
-
}
|
|
214
|
-
r(t);
|
|
215
|
-
}
|
|
258
|
+
onChange: (e) => S(e.target.value)
|
|
216
259
|
});
|
|
217
260
|
}
|
|
218
|
-
var
|
|
219
|
-
let
|
|
261
|
+
var x = e(function({ schema: e, value: o, onChange: s, className: c = "", id: l, disabled: u = !1, ...d }, f) {
|
|
262
|
+
let p = n(), g = l ?? `nabs-ui-dynamicform-${p.replace(/:/g, "")}`, v = e && e.type === "object" ? e : y, [x, S] = r(() => _(v, o ?? h(v)));
|
|
220
263
|
t(() => {
|
|
221
|
-
S(
|
|
222
|
-
}, [
|
|
223
|
-
let C =
|
|
264
|
+
S(_(v, o ?? h(v)));
|
|
265
|
+
}, [v, o]);
|
|
266
|
+
let C = m(x) ? x : {}, w = v.title ?? "Dynamic form", T = v.description, E = [
|
|
224
267
|
"nabs-ui-dynamicform",
|
|
225
268
|
u ? "nabs-ui-dynamicform--disabled" : "",
|
|
226
269
|
c
|
|
@@ -229,7 +272,7 @@ var b = e(function({ schema: e, value: o, onChange: s, className: c = "", id: l,
|
|
|
229
272
|
};
|
|
230
273
|
return u ? /* @__PURE__ */ a("div", {
|
|
231
274
|
ref: f,
|
|
232
|
-
id:
|
|
275
|
+
id: g,
|
|
233
276
|
className: E,
|
|
234
277
|
"aria-disabled": "true",
|
|
235
278
|
...d,
|
|
@@ -244,22 +287,22 @@ var b = e(function({ schema: e, value: o, onChange: s, className: c = "", id: l,
|
|
|
244
287
|
}) : null]
|
|
245
288
|
}), /* @__PURE__ */ i("div", {
|
|
246
289
|
className: "nabs-ui-dynamicform__fields",
|
|
247
|
-
children: Object.entries(
|
|
290
|
+
children: Object.entries(v.properties ?? {}).map(([e, t]) => /* @__PURE__ */ i("div", {
|
|
248
291
|
className: "nabs-ui-dynamicform__field",
|
|
249
|
-
children: /* @__PURE__ */ i(
|
|
292
|
+
children: /* @__PURE__ */ i(b, {
|
|
250
293
|
schema: t,
|
|
251
294
|
name: e,
|
|
252
295
|
value: C[e],
|
|
253
296
|
onChange: (n) => D({
|
|
254
297
|
...C,
|
|
255
|
-
[e]:
|
|
298
|
+
[e]: _(t, n)
|
|
256
299
|
})
|
|
257
300
|
})
|
|
258
301
|
}, e))
|
|
259
302
|
})]
|
|
260
303
|
}) : /* @__PURE__ */ a("div", {
|
|
261
304
|
ref: f,
|
|
262
|
-
id:
|
|
305
|
+
id: g,
|
|
263
306
|
className: E,
|
|
264
307
|
...d,
|
|
265
308
|
children: [/* @__PURE__ */ a("div", {
|
|
@@ -273,21 +316,21 @@ var b = e(function({ schema: e, value: o, onChange: s, className: c = "", id: l,
|
|
|
273
316
|
}) : null]
|
|
274
317
|
}), /* @__PURE__ */ i("div", {
|
|
275
318
|
className: "nabs-ui-dynamicform__fields",
|
|
276
|
-
children: Object.entries(
|
|
319
|
+
children: Object.entries(v.properties ?? {}).map(([e, t]) => /* @__PURE__ */ i("div", {
|
|
277
320
|
className: "nabs-ui-dynamicform__field",
|
|
278
|
-
children: /* @__PURE__ */ i(
|
|
321
|
+
children: /* @__PURE__ */ i(b, {
|
|
279
322
|
schema: t,
|
|
280
323
|
name: e,
|
|
281
324
|
value: C[e],
|
|
282
325
|
onChange: (n) => D({
|
|
283
326
|
...C,
|
|
284
|
-
[e]:
|
|
327
|
+
[e]: _(t, n)
|
|
285
328
|
})
|
|
286
329
|
})
|
|
287
330
|
}, e))
|
|
288
331
|
})]
|
|
289
332
|
});
|
|
290
333
|
});
|
|
291
|
-
|
|
334
|
+
x.displayName = "DynamicForm";
|
|
292
335
|
//#endregion
|
|
293
|
-
export {
|
|
336
|
+
export { x as DynamicForm };
|
package/package.json
CHANGED