quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 4.54 kB
JavaScript
import{_ as n,a as t}from"../typeof.js";import{_ as e,a as o,b as r,c as i,H as l,d as a,N as c,B as s}from"../index2.js";import{_ as d}from"../defineProperty.js";import"../index5.js";import"../index22.js";function f(n){var t=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(n){return!1}}();return function(){var r,i=e(n);if(t){var l=e(this).constructor;r=Reflect.construct(i,arguments,l)}else r=i.apply(this,arguments);return o(this,r)}}var h=function(e){r(a,l);var o=f(a);function a(){var t;n(this,a);for(var e=arguments.length,r=new Array(e),c=0;c<e;c++)r[c]=arguments[c];return t=o.call.apply(o,[this].concat(r)),d(i(t),"title",""),d(i(t),"icon",""),d(i(t),"desc",""),d(i(t),"to",""),d(i(t),"islink",!1),d(i(t),"handleNavigation",(function(){t.to&&(window.location.href=t.to)})),d(i(t),"renderIcon",(function(){return t.icon&&t.icon.includes("http")?l.h("img",{src:t.icon,class:"quark-cell-icon",style:{marginRight:4},part:"img"}):null})),t}return t(a,[{key:"render",value:function(){return l.h("div",{class:"quark-cell",onClick:this.handleNavigation,part:"root"},l.h("slot",{name:"icon"},this.renderIcon()),l.h("div",{class:"quark-cell-title",part:"title",id:"title"},l.h("slot",{name:"title"},this.title)),l.h("slot",null,this.desc&&l.h("div",{class:"quark-cell-desc",part:"desc",id:"desc"},this.desc),this.islink&&l.h("quark-icon-arrow-right",{id:"arrow"})))}}]),a}();a([c()],h.prototype,"title",void 0),a([c()],h.prototype,"icon",void 0),a([c()],h.prototype,"desc",void 0),a([c()],h.prototype,"to",void 0),a([c({type:Boolean})],h.prototype,"islink",void 0);var u=h=a([s({tag:"quark-cell",style:':host {\n display: block;\n font-size: 3.73333vw;\n position: relative;\n background: #fff;\n}\n\n:host .quark-cell {\n position: relative;\n display: flex;\n width: 100%;\n padding-left: var(--cell-hspacing, 4.26667vw);\n padding-right: var(--cell-hspacing, 4.26667vw);\n padding-top: var(--cell-vspacing, 3.46667vw);\n padding-bottom: var(--cell-vspacing, 3.46667vw);\n box-sizing: border-box;\n flex-direction: row;\n align-items: center;\n}\n\n:host([islink]) {\n cursor: pointer;\n}\n\n:host([islink])::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n background-color: #000;\n border: inherit;\n border-color: #000;\n border-radius: inherit;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n opacity: 0;\n content: " ";\n}\n:host([islink]:active)::before {\n opacity: 0.1;\n}\n\n:host .quark-cell-title {\n width: var(--cell-title-width);\n white-space: var(--cell-title-white-space, wrap);\n font-size: var(--cell-title-font-size, 3.73333vw);\n font-weight: var(--cell-title-font-weight);\n text-overflow: var(--cell-title-text-overflow);\n display: block;\n color: var(--cell-title-color, #666);\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n margin-right: 1.06667vw;\n}\n\n:host .quark-cell-desc {\n color: var(--cell-desc-color, #969799);\n width: var(--cell-desc-width);\n white-space: var(--cell-title-white-space, nowrap);\n font-size: var(--cell-desc-font-size, 3.73333vw);\n font-weight: var(--cell-desc-font-weight);\n text-overflow: var(--cell-desc-text-overflow);\n overflow: hidden;\n text-align: right;\n}\n\n:host quark-icon-arrow-right {\n font-size: var(--cell-icon-font-size, 4.26667vw);\n color: var(--cell-quark-icon-color, #969799);\n}\n\n:host .quark-cell-icon {\n width: var(--cell-icon-font-size, 4.26667vw);\n height: auto;\n}\n'})],h),v=function(e){r(i,l);var o=f(i);function i(){return n(this,i),o.apply(this,arguments)}return t(i,[{key:"render",value:function(){return l.h("slot",null)}}]),i}();v=a([s({tag:"quark-cell-group",style:':host {\n display: block;\n background: #fff;\n}\n::slotted(quark-cell) {\n position: relative;\n background-color: rgba(0, 0, 0, 0);\n}\n::slotted(quark-cell):after {\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: " ";\n pointer-events: none;\n right: 4.26667vw;\n bottom: 0;\n left: 4.26667vw;\n -webkit-transform: scaleY(0.5);\n transform: scaleY(0.5);\n border-bottom: 0.53333vw solid #f5f6f7;\n}\n::slotted(quark-cell:last-child):after {\n border: none;\n}\n'})],v);export{v as QuarkCellGroup,u as default};