quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 3.94 kB
JavaScript
import{_ as t,a as n}from"../typeof.js";import{_ as e,a as o,b as r,c as i,H as a,d as s,N as l,O as c,B as d,P as u}from"../index2.js";import{_ as f}from"../defineProperty.js";import{s as p}from"../public.js";function v(t){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var r,i=e(t);if(n){var a=e(this).constructor;r=Reflect.construct(i,arguments,a)}else r=i.apply(this,arguments);return o(this,r)}}var g=function(e){r(s,a);var o=v(s);function s(){var n;t(this,s);for(var e=arguments.length,r=new Array(e),l=0;l<e;l++)r[l]=arguments[l];return n=o.call.apply(o,[this].concat(r)),f(i(n),"text",""),f(i(n),"icon",""),f(i(n),"iconsize",void 0),f(i(n),"style",{}),f(i(n),"setStyle",(function(t){n.style=t})),f(i(n),"renderIcon",(function(){return n.icon&&n.icon&&n.icon.includes("http")?a.h("img",{src:n.icon,class:"quark-grid-icon",style:{width:n.iconsize}}):null})),n}return n(s,[{key:"render",value:function(){return a.h("div",{class:"quark-grid-item",style:this.style},a.h("slot",null,this.renderIcon(),a.h("span",{class:"quark-grid-text"},this.text)))}}]),s}();s([l()],g.prototype,"text",void 0),s([l()],g.prototype,"icon",void 0),s([l()],g.prototype,"iconsize",void 0),s([c()],g.prototype,"style",void 0),g=s([d({tag:"quark-grid-item",style:":host {\n position: relative;\n display: inline-flex;\n}\n\n:host .quark-grid-item {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding-left: var(--grid-item-hspacing, 4.26667vw);\n padding-right: var(--grid-item-hspacing, 4.26667vw);\n padding-top: var(--grid-item-vspacing, 4.26667vw);\n padding-bottom: var(--grid-item-vspacing, 4.26667vw);\n background-color: var(--grid-item-background-color, white);\n}\n\n:host .quark-grid-text {\n font-size: var(--grid-item-text-font-size, 3.2vw);\n color: var(--grid-item-text-color, #242729);\n line-height: 1.5;\n word-break: break-all;\n margin-top: var(--grid-item-text-margin-top, 2.13333vw);\n}\n\n:host .quark-grid-icon {\n font-size: var(--grid-item-icon-font-size, 7.46667vw);\n width: var(--grid-item-icon-font-size, 7.46667vw);\n height: auto;\n}\n"})],g);var h=function(e){r(s,a);var o=v(s);function s(){var n;t(this,s);for(var e=arguments.length,r=new Array(e),a=0;a<e;a++)r[a]=arguments[a];return n=o.call.apply(o,[this].concat(r)),f(i(n),"column","4"),f(i(n),"noborder",!1),f(i(n),"square",!1),f(i(n),"slotRef",u()),f(i(n),"getNodeStyle",(function(t){var e,o=null===(e=n.slotRef.current)||void 0===e?void 0:e.assignedNodes(),r=p(o),i="".concat(.5,"px solid #dddddd"),a="".concat(.5,"px solid #dddddd"),s=parseInt(n.column),l=(document.body.clientWidth-.5*(s-1))/s;(t+1)%s!=0&&t!==r.length-1||(a=void 0);var c=r.length%s>0?Math.floor(r.length/s)+1:r.length/s;return((t+1)%s>0?Math.floor((t+1)/s)+1:(t+1)/s)===c&&(i=void 0),n.noborder&&(a=void 0,i=void 0),{width:"".concat(l,"px"),height:n.square?"".concat(l,"px"):"auto",borderRight:a,borderBottom:i}})),f(i(n),"handleSlotChange",(function(){var t=n.slotRef.current;t&&p(t.assignedNodes()).forEach((function(t,e){var o=n.getNodeStyle(e);t.setStyle(o)}))})),n}return n(s,[{key:"render",value:function(){return a.h("div",{class:"quark-grid",part:"root"},a.h("slot",{onslotchange:this.handleSlotChange,ref:this.slotRef}))}}]),s}();s([l()],h.prototype,"column",void 0),s([l({type:Boolean})],h.prototype,"noborder",void 0),s([l({type:Boolean})],h.prototype,"square",void 0);var y=h=s([d({tag:"quark-grid",style:":host {\n position: relative;\n display: inline-flex;\n}\n\n:host .quark-grid {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n flex-wrap: wrap;\n}\n"})],h);export{g as QuarkGridItem,y as default};