@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 5.13 kB
JavaScript
var c=(...o)=>o.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?c(...t):typeof t=="object"?Object.keys(t).map((e,s)=>t[s]||t[e]&&e||null).filter(e=>e!==null).join(" "):t).filter(t=>!!t).join(" ");var N={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as C}from"react/jsx-runtime";var _=[],O={orientation:["horizontal","vertical"],alignItems:["start","center","end","stretch"],justifyContent:["start","center","end","stretch"],justifyItems:["start","center","end","stretch"]},f={orientation:null,alignItems:null,justifyContent:null,justifyItems:null,wrap:!1},a=o=>{let{gap:t,orientation:e=f.orientation,alignItems:s=f.alignItems,justifyContent:r=f.justifyContent,justifyItems:i=f.justifyItems,wrap:l=f.wrap,style:p,...v}=o;return C("div",{...v,style:{gap:t,...p},className:c(o.className,{[`k-${N.orientationMap[e]||e}`]:e,[`k-align-items-${s}`]:s,[`k-justify-content-${r}`]:r,[`k-justify-items-${i}`]:i,"k-flex-wrap":l}),children:o.children})};a.states=_;a.options=O;a.defaultOptions=f;var b="stack-layout",A="stacklayout",S="grid-layout",M="gridlayout";import{jsx as j}from"react/jsx-runtime";var I="k-grid-layout",E=[],K={},m=o=>{let{className:t,...e}=o;return j(a,{...e,className:c(t,I),children:o.children})};m.states=E;m.options=K;m.className=I;m.moduleName=S;m.folderName=M;import{jsx as $}from"react/jsx-runtime";var T="k-stack-layout",D=[],G={},d=o=>{let{className:t,...e}=o;return $(a,{...e,className:c(t,T),children:o.children})};d.states=D;d.options=G;d.className=T;d.moduleName=b;d.folderName=A;import{Fragment as R,jsx as u,jsxs as P}from"react/jsx-runtime";var g=({alignItems:o="start",justifyItems:t="start",...e})=>u(m,{alignItems:o,justifyItems:t,children:P(R,{children:[u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"})]}),...e});import{Fragment as jt,jsx as Kt,jsxs as Dt}from"react/jsx-runtime";import{Fragment as Y,jsx as y,jsxs as F}from"react/jsx-runtime";var w=a.options,B=a.states,U={...a.defaultOptions,variant:"stretch"},z=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],H=[],x=o=>{let{variant:t,modifiers:e,...s}={...o},r={orientation:"vertical"};Object.keys(e||{}).forEach(v=>{v==="vertical"&&(r.orientation=e?.[v]?"vertical":"horizontal")});let i="k-border-solid k-border-secondary-subtle k-p-3",l={width:"228px",height:"228px",gap:"8px"},p=F(Y,{children:[y("div",{className:"k-p-5 k-bg-primary-subtle"}),y("div",{className:"k-p-5 k-bg-primary-emphasis"}),y("div",{className:"k-p-5 k-bg-primary"})]});switch(t){case"start":return y(h,{...s,...r,style:l,className:i,alignItems:"stretch",justifyContent:"start",children:p});case"middle":return y(h,{...s,...r,style:l,className:i,alignItems:"stretch",justifyContent:"center",children:p});case"end":return y(h,{...s,...r,style:l,className:i,alignItems:"stretch",justifyContent:"end",children:p});default:return y(h,{...s,...r,style:l,className:i,alignItems:"stretch",justifyContent:"stretch",children:p})}};x.options=w;x.states=B;x.variants=z;x.defaultOptions=U;x.modifiers=H;x.className=d.className;import{Fragment as X,jsx as n,jsxs as Z}from"react/jsx-runtime";var q=a.options,V=a.states,W={...a.defaultOptions,variant:"stretch"},J=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],Q=[],k=o=>{let{variant:t,modifiers:e,...s}={...o},r="k-border-solid k-border-secondary-subtle k-p-3",i={width:"228px",height:"228px",gap:"8px",gridTemplateColumns:"1fr 1fr 1fr",gridTemplateRows:"1fr 1fr 1fr"},l=Z(X,{children:[n("div",{className:"k-p-5 k-bg-primary-subtle"}),n("div",{className:"k-p-5 k-bg-primary-emphasis"}),n("div",{className:"k-p-5 k-bg-primary"}),n("div",{className:"k-p-5 k-bg-primary"}),n("div",{className:"k-p-5 k-bg-primary-subtle"}),n("div",{className:"k-p-5 k-bg-primary-emphasis"}),n("div",{className:"k-p-5 k-bg-primary-emphasis"}),n("div",{className:"k-p-5 k-bg-primary"}),n("div",{className:"k-p-5 k-bg-primary-subtle"})]});switch(t){case"start":return n(g,{...s,style:i,className:r,alignItems:"stretch",justifyItems:"start",children:l});case"middle":return n(g,{...s,style:i,className:r,alignItems:"stretch",justifyItems:"center",children:l});case"end":return n(g,{...s,style:i,className:r,alignItems:"stretch",justifyItems:"end",children:l});default:return n(g,{...s,style:i,className:r,alignItems:"stretch",justifyItems:"stretch",children:l})}};k.options=q;k.states=V;k.variants=J;k.defaultOptions=W;k.modifiers=Q;k.className=m.className;import{Fragment as tt,jsx as L,jsxs as et}from"react/jsx-runtime";var h=({alignItems:o="start",justifyContent:t="start",...e})=>L(d,{orientation:"horizontal",alignItems:o,justifyContent:t,children:et(tt,{children:[L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"})]}),...e});export{h as StackLayoutNormal};