@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 9.01 kB
JavaScript
var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((o,s)=>e[s]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var v=(t,e)=>l({[`${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"}),b=(t,e)=>l({"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,"k-highlighted":e.highlighted});var r={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},y={small:"small",medium:"medium",large:"large",full:"full"};var i={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},p={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",highlighted:"highlighted"};import{jsx as E}from"react/jsx-runtime";import{createElement as Z}from"react";var _="k-treeview",ve=[],we={size:[r.small,r.medium,r.large]},j={size:r.medium},u=t=>{let{size:e=j.size,children:o,dir:s,...m}=t,c=[];return o&&(Array.isArray(o)?o.map((n,x)=>{n.type===a&&c.push(Z(a,{...n.props,dir:s,key:x})),n.type===d&&c.push(Z(d,{...n.props,dir:s,key:x}))}):(o.type===a&&c.push(E(a,{...o.props,dir:s})),o.type===d&&c.push(E(d,{...o.props,dir:s})))),E("div",{...m,dir:s,className:l(t.className,_,v(_,{size:e})),children:E(d,{className:"k-treeview-lines",dir:s,children:c})})};u.states=ve;u.options=we;u.className=_;u.defaultOptions=j;import{jsx as ee}from"react/jsx-runtime";var M="k-checkbox",be=[p.hover,p.focus,p.valid,p.invalid,p.required,p.disabled,p.checked,p.indeterminate],ke={size:[r.small,r.medium,r.large],rounded:[y.small,y.medium,y.large,y.full]},X={size:r.medium,rounded:y.medium},w=t=>{let{id:e,checked:o,indeterminate:s,hover:m,focus:c,disabled:n,invalid:x,valid:f,required:C,size:A=X.size,rounded:O=X.rounded,...K}=t;return ee("span",{className:"k-checkbox-wrap",children:ee("input",{...K,id:e,type:"checkbox",defaultChecked:o,required:C,className:l(t.className,M,v(M,{size:A,rounded:O}),b(M,{hover:m,focus:c,disabled:n,invalid:x,valid:f,indeterminate:s,checked:o}))})})};w.states=be;w.options=ke;w.className=M;w.defaultOptions=X;import{jsx as Te}from"react/jsx-runtime";var te="k-checkbox-list",Ce=[],ye={},oe={layout:"vertical"},T=t=>{let{layout:e=oe.layout,...o}=t;return Te("ul",{...o,className:l(t.className,te,{[`k-list-${e}`]:e}),children:t.children})};T.states=Ce;T.options=ye;T.className=te;T.defaultOptions=oe;import{jsx as Se}from"react/jsx-runtime";var re="k-checkbox-list-item",ge=[],Ie={},Ne={},g=t=>{let{...e}=t;return Se("li",{...e,className:l(t.className,re),children:t.children})};g.states=ge;g.options=Ie;g.className=re;g.defaultOptions=Ne;import{Fragment as bt,jsx as wt,jsxs as kt}from"react/jsx-runtime";import{Fragment as It,jsx as gt,jsxs as Nt}from"react/jsx-runtime";import{Fragment as Mt,jsx as Et,jsxs as Gt}from"react/jsx-runtime";import{Fragment as Ht,jsx as Kt,jsxs as $t}from"react/jsx-runtime";import{jsx as Xt}from"react/jsx-runtime";import{jsx as qt}from"react/jsx-runtime";import{Fragment as Me,jsx as ie}from"react/jsx-runtime";var J="k-icon k-font-icon",ze=[],Le={size:[r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.light,i.dark]},Ee={},N=t=>{let{size:e,themeColor:o,icon:s,rotate:m,flip:c,...n}=t;return s?ie("span",{...n,className:l(t.className,J,v(J,{size:e}),{[`k-i-${s}`]:s,[`k-color-${o}`]:o,[`k-rotate-${m}`]:m,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"})}):ie(Me,{})};N.states=ze;N.options=Le;N.className=J;N.defaultOptions=Ee;var se=N;import{Fragment as Ae,jsx as G}from"react/jsx-runtime";var V="k-icon k-svg-icon",Ge=[],Re={size:[r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.light,i.dark]},ne={viewBox:"0 0 24 24"},S=t=>{let{size:e,themeColor:o,rotate:s,flip:m,viewBox:c=ne.viewBox,icon:n,...x}=t;if(!n)return G(Ae,{});n==="none"&&{...x,className:l(t.className,V,"k-none")};let f=typeof n=="object"&&n.name&&n.name;return G("span",{...x,className:l(t.className,V,v("k-icon",{size:e}),{[`k-svg-i-${f}`]:f,[`k-color-${o}`]:o,[`k-rotate-${s}`]:s,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),children:G("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof n=="object"?n.viewBox:c,dangerouslySetInnerHTML:typeof n=="object"?{__html:n.content}:void 0,children:n?void 0:t.children})})};S.states=Ge;S.options=Re;S.className=V;S.defaultOptions=ne;var q=S;import*as le from"@progress/kendo-svg-icons";import{Fragment as ae,jsx as z}from"react/jsx-runtime";var Oe=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ke=[],He={size:[r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.light,i.dark]},W={viewBox:"0 0 24 24",type:"svg"},k=t=>{let{size:e,themeColor:o,icon:s,type:m=W.type,rotate:c,flip:n,viewBox:x=W.viewBox,...f}=t;if(!s)return z(ae,{});if(m==="svg"){if(s==="none")return z(q,{...f,icon:s,size:e});let C=Oe(`${s}-icon`);return le[C]?z(q,{...f,icon:le[C],size:e,themeColor:o,rotate:c,flip:n,viewBox:x}):z(ae,{})}return z(se,{...f,icon:s,size:e,themeColor:o,rotate:c,flip:n})};k.states=Ke;k.options=He;k.defaultOptions=W;import{jsx as ce}from"react/jsx-runtime";import{createElement as Pe}from"react";var $e="k-treeview-group",d=t=>{let{children:e,dir:o}=t,s=[];return e&&(Array.isArray(e)?e.map((m,c)=>{m.type===L&&s.push(Pe(L,{...m.props,dir:o,key:c}))}):e.type===L&&s.push(ce(L,{...e.props,dir:o}))),ce("ul",{className:l(t.className,$e),children:s})};import{jsx as me,jsxs as Xe}from"react/jsx-runtime";var U="k-treeview-leaf",Be=[p.hover,p.focus,p.selected],_e={},R=t=>{let{text:e,showIcon:o,icon:s,hover:m,focus:c,selected:n,...x}=t;return Xe("span",{...x,className:l(t.className,U,b(U,{hover:m,focus:c,selected:n})),children:[o&&me(k,{icon:s}),me("span",{className:"k-treeview-leaf-text",children:e})]})};R.states=Be;R.options=_e;R.className=U;var pe=R;import{Fragment as We,jsx as I,jsxs as de}from"react/jsx-runtime";import{createElement as qe}from"react";var xe="k-treeview-item",Fe=[p.hover,p.focus,p.selected,p.disabled],Je={},Ve={},a=t=>{let{leafClassName:e,children:o,hasChildren:s,expanded:m,text:c,showIcon:n,icon:x,showCheckbox:f,checked:C,hover:A,focus:O,selected:K,disabled:H,top:D,bottom:Q,dir:$,...fe}=t,Y=s||o,P=[];return o&&(Array.isArray(o)?o.map((B,ue)=>{B.type===d&&P.push(qe(d,{...B.props,dir:$,key:ue},B.props.children))}):o.type===d&&P.push(I(d,{...o.props,dir:$,children:o.props.children}))),de("li",{...fe,className:l(t.className,xe),children:[de("span",{className:l({"k-treeview-top":D,"k-treeview-bot":Q,"k-treeview-mid":!D&&!Q}),children:[Y&&I("span",{className:l("k-treeview-toggle",b("k-treeview-toggle",{disabled:H})),children:I(k,{icon:m?"caret-alt-down":$==="rtl"?"caret-alt-left":"caret-alt-right"})}),f&&I(w,{checked:C,disabled:H}),I(pe,{className:l(e,b(e,{disabled:H})),text:c,showIcon:n,icon:x,hover:A,focus:O,selected:K})]}),m&&Y&&I(We,{children:P})]})};a.states=Fe;a.options=Je;a.className=xe;a.defaultOptions=Ve;var L=a;import{jsx as Po}from"react/jsx-runtime";import{jsx as Fo,jsxs as Jo}from"react/jsx-runtime";import{jsx as Uo,jsxs as Do}from"react/jsx-runtime";import{jsx as jo,jsxs as er}from"react/jsx-runtime";import{jsx as h,jsxs as he}from"react/jsx-runtime";var xr=t=>h(u,{children:[h(a,{top:!0,text:"Root 1",showCheckbox:!0},"treeview-item-1"),h(a,{text:"Root 2",showCheckbox:!0,expanded:!0,children:he(d,{children:[h(a,{top:!0,text:"Child 2.1",showCheckbox:!0}),h(a,{text:"Child 2.2",showCheckbox:!0,children:h(d,{children:h(a,{bottom:!0,text:"Child 2.2.1"})})}),h(a,{bottom:!0,text:"Child 2.3",showCheckbox:!0})]})},"treeview-item-2"),he(a,{bottom:!0,text:"Root 3",showCheckbox:!0,children:[h(a,{top:!0,text:"Child 3.1"}),h(a,{text:"Child 3.2"}),h(a,{bottom:!0,text:"Child 3.3"})]},"treeview-item-3")],...t});export{xr as TreeviewCheckboxes};