@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 5.41 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 b={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as E}from"react/jsx-runtime";var O=[],C={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 E("div",{...v,style:{gap:t,...p},className:c(o.className,{[`k-${b.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=O;a.options=C;a.defaultOptions=f;var A="stack-layout",S="stacklayout",M="grid-layout",I="gridlayout";import{jsx as D}from"react/jsx-runtime";var T="k-grid-layout",K=[],j={},m=o=>{let{className:t,...e}=o;return D(a,{...e,className:c(t,T),children:o.children})};m.states=K;m.options=j;m.className=T;m.moduleName=M;m.folderName=I;import{jsx as R}from"react/jsx-runtime";var _="k-stack-layout",G=[],$={},d=o=>{let{className:t,...e}=o;return R(a,{...e,className:c(t,_),children:o.children})};d.states=G;d.options=$;d.className=_;d.moduleName=A;d.folderName=S;import{Fragment as P,jsx as u,jsxs as w}from"react/jsx-runtime";var g=({alignItems:o="start",justifyItems:t="start",...e})=>u(m,{alignItems:o,justifyItems:t,children:w(P,{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 B,jsx as L,jsxs as U}from"react/jsx-runtime";var h=({alignItems:o="start",justifyContent:t="start",...e})=>L(d,{orientation:"horizontal",alignItems:o,justifyContent:t,children:U(B,{children:[L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"})]}),...e});import{Fragment as V,jsx as y,jsxs as W}from"react/jsx-runtime";var z=a.options,H=a.states,Y={...a.defaultOptions,variant:"stretch"},F=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],q=[],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=W(V,{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=z;x.states=H;x.variants=F;x.defaultOptions=Y;x.modifiers=q;x.className=d.className;import{Fragment as et,jsx as n,jsxs as ot}from"react/jsx-runtime";var J=a.options,Q=a.states,X={...a.defaultOptions,variant:"stretch"},Z=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],tt=[],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=ot(et,{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=J;k.states=Q;k.variants=Z;k.defaultOptions=X;k.modifiers=tt;k.className=m.className;import{Fragment as at,jsx as N,jsxs as st}from"react/jsx-runtime";var re=({alignItems:o="start",justifyContent:t="start",...e})=>N(d,{orientation:"vertical",alignItems:o,justifyContent:t,children:st(at,{children:[N("div",{className:"box",children:"Box"}),N("div",{className:"box",children:"Box"}),N("div",{className:"box",children:"Box"})]}),...e});export{re as StackLayoutVertical};