UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 3.69 kB
var a=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?a(...e):typeof e=="object"?Object.keys(e).map((l,o)=>e[o]||e[l]&&l||null).filter(l=>l!==null).join(" "):e).filter(e=>!!e).join(" ");var E=(t,e)=>a({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.fillMode}-${e.themeColor}`]:e.fillMode&&e.themeColor},{[`${t}-${e.themeColor}`]:e.themeColor&&e.fillMode===void 0},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full"}),A=(t,e)=>a({"k-valid":e.valid,"k-invalid":e.invalid,"k-hover":e.hover,"k-focus":e.focus,"k-checked":e.checked,"k-active":e.active,"k-selected":e.selected,"k-disabled":e.disabled,"k-indeterminate":e.indeterminate&&!e.checked,"k-loading":e.loading,"k-empty":e.empty,"k-readonly":e.readonly});var u={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var R={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly"};import{jsx as f,jsxs as $}from"react/jsx-runtime";var N="k-form-field",L=[R.disabled],s=t=>{let{label:e,orientation:l,optional:o,editor:r,hint:n,error:m,info:x,disabled:F,dir:i,colSpan:y}=t;return $("div",{className:a(N,t.className,A(N,{disabled:F}),{[`k-col-span-${y}`]:y}),dir:i,children:[e&&$("label",{className:a("k-label","k-form-label"),children:[e,o&&f("span",{className:"k-label-optional",children:"(Optional)"}),x&&f("span",{className:"k-field-info",children:"(field info)"})]}),l==="horizontal"&&!e&&f("span",{className:"k-label k-form-label k-label-empty"}),$("div",{className:"k-form-field-wrap",children:[r,n&&f("div",{className:"k-form-hint",children:n}),m&&f("div",{className:"k-form-error",children:m})]})]})};s.states=L;s.className=N;import{Fragment as T,jsx as S,jsxs as X}from"react/jsx-runtime";var K="k-form-fieldset",v=t=>{let{legend:e,layout:l,cols:o,gapX:r,gapY:n}=t;return X("fieldset",{className:a(K),children:[e&&S("legend",{className:"k-form-legend",children:e}),l==="grid"?S("div",{className:a("k-form-layout","k-d-grid",{[`k-grid-cols-${o}`]:o,[`k-gap-x-${r}`]:r,[`k-gap-y-${n}`]:n}),children:t.children}):S(T,{children:t.children})]})};v.className=K;import{Fragment as w,jsx as g,jsxs as D}from"react/jsx-runtime";import{createElement as M}from"react";var h="k-form",O=[],P={size:[u.small,u.medium,u.large]},p={size:u.medium,layout:"basic",tag:"form"},k=t=>{let{size:e=p.size,orientation:l,layout:o=p.layout,formButtons:r,cols:n,gapX:m,gapY:x,tag:F=p.tag,children:i}=t,y=({tag:c,className:b,children:z})=>c==="form"?g("form",{className:b,children:z}):g("div",{className:b,children:z}),d=[];return i&&(Array.isArray(i)?i.map((c,b)=>{c.type===s?d.push(M(s,{...c.props,orientation:l,key:b})):d.push(c)}):i.type===s?d.push(M(s,{...i.props,orientation:l,key:`${new Date().getTime()}`})):i.type===v&&d.push(M(v,{...i.props,key:`${new Date().getTime()}`}))),D(y,{tag:F,className:a(t.className,h,E(h,{size:e}),{[`${h}-${l}`]:l}),children:[o==="grid"?g("div",{className:a("k-form-layout","k-d-grid",{[`k-grid-cols-${n}`]:n,[`k-gap-x-${m}`]:m,[`k-gap-y-${x}`]:x}),children:d}):g(w,{children:d}),r&&g("div",{className:"k-form-buttons",children:r})]})};k.states=O;k.options=P;k.className=h;k.defaultOptions=p;var le=k;export{h as FORM_CLASSNAME,k as Form,le as default};