quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 6.87 kB
JavaScript
import{_ as n,a as o}from"../typeof.js";import{_ as t,a as r,b as a,c as e,P as i,H as s,d as l,N as c,B as u}from"../index2.js";import{_ as d}from"../defineProperty.js";import"../loading/index.js";import{p as h}from"../util.js";function p(n){var o=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 a,e=t(n);if(o){var i=t(this).constructor;a=Reflect.construct(e,arguments,i)}else a=e.apply(this,arguments);return r(this,a)}}var b=function(t){a(l,s);var r=p(l);function l(){var o;n(this,l);for(var t=arguments.length,a=new Array(t),c=0;c<t;c++)a[c]=arguments[c];return o=r.call.apply(r,[this].concat(a)),d(e(o),"disabled",!1),d(e(o),"type",""),d(e(o),"icon",void 0),d(e(o),"loading",!1),d(e(o),"plain",!1),d(e(o),"light",!1),d(e(o),"slotRef",i()),d(e(o),"renderIcon",(function(){return o.icon&&o.icon.startsWith("http")?s.h("img",{part:"img",class:"quark-button-icon",src:o.icon}):o.loading?s.h("quark-loading",{class:"quark-button-load",color:o.loadingcolor?o.loadingcolor:"#fff",size:o.loadingsize?h(o.loadingsize):h(20),type:o.loadtype?o.loadtype:"spinner"}):null})),o}return o(l,[{key:"componentDidMount",value:function(){var n=this;this.slotRef.current.addEventListener("click",(function(o){(n.disabled||n.loading)&&o.stopPropagation()})),this.slotRef.current.addEventListener("touchstart",(function(){}))}},{key:"render",value:function(){return s.h("div",{ref:this.slotRef,class:"quark-button",part:"root"},this.renderIcon(),s.h("slot",null))}}]),l}();l([c({type:Boolean})],b.prototype,"disabled",void 0),l([c()],b.prototype,"size",void 0),l([c()],b.prototype,"type",void 0),l([c()],b.prototype,"icon",void 0),l([c()],b.prototype,"shape",void 0),l([c({type:Boolean})],b.prototype,"loading",void 0),l([c()],b.prototype,"loadtype",void 0),l([c()],b.prototype,"loadingcolor",void 0),l([c()],b.prototype,"loadingsize",void 0),l([c({type:Boolean})],b.prototype,"plain",void 0),l([c({type:Boolean})],b.prototype,"light",void 0);var v=b=l([u({tag:"quark-button",style:':host {\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n height: var(--button-height, 8.53333vw);\n line-height: var(--button-height, 8.53333vw);\n text-align: center;\n border-radius: var(--button-border-radius, 4.26667vw);\n padding-left: var(--button-hspacing, 3.2vw);\n padding-right: var(--button-hspacing, 3.2vw);\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n:host .quark-button {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n border-radius: var(--button-border-radius, 4.26667vw);\n cursor: unset;\n -webkit-tap-highlight-color: transparent;\n}\n\n/* :host([shape="round"]) {\n border-radius: var(--button-height, 32px);\n} */\n\n:host(:not([size])) {\n font-size: var(--button-font-size, 3.73333vw);\n}\n\n:host([size="small"]) {\n height: var(--button-height, 6.4vw);\n line-height: var(--button-height, 6.4vw);\n font-size: var(--button-font-size, 3.2vw);\n}\n\n:host([size="big"]) {\n height: var(--button-height, 10.66667vw);\n line-height: var(--button-height, 10.66667vw);\n font-size: var(--button-font-size, 4.26667vw);\n border-radius: var(--button-big-border-radius, 2.13333vw);\n width: 100%;\n}\n\n:host([size="large"]) {\n height: var(--button-height, 12.8vw);\n line-height: var(--button-height, 12.8vw);\n font-size: var(--button-font-size, 4.8vw);\n border-radius: var(--button-big-border-radius, 2.13333vw);\n width: 100%;\n}\n\n:host([shape="square"]) {\n border-radius: 0;\n}\n\n:host(:not([type])) {\n color: var(--button-color, #5A6066);\n border: 1px solid #E1E6EB;\n}\n\n:host([type="primary"]) {\n color: var(--button-color, #fff);\n background: var(--quark-theme-color, #0088ff);\n}\n\n:host([type="warning"]) {\n color: var(--button-color, #fff);\n background: var(--quark-warning-color, #FB990F);\n}\n\n:host([type="danger"]) {\n color: var(--button-color, #fff);\n background: var(--quark-danger-color, #F72626);\n}\n\n:host([type="success"]) {\n color: var(--button-color, #fff);\n background: var(--quark-success-color, #07C160);\n}\n\n:host([plain]) {\n border: 1px solid;\n}\n\n:host([plain][type="primary"]) {\n color: var(--button-color, #0088ff);\n border-color: var(--quark-theme-color, #7FC3FF);\n background: var(--button-fill-base-color, transparent);\n}\n\n:host([plain][type="warning"]) {\n color: var(--button-color, #FB990F);\n border-color: var(--quark-warning-color, #FCCC87);\n background: var(--button-fill-base-color, transparent);\n}\n\n:host([plain][type="danger"]) {\n color: var(--button-color, #F72626);\n border-color: var(--quark-danger-color, #FB9292);\n background: var(--button-fill-base-color, transparent);\n}\n\n:host([plain][type="success"]) {\n color: var(--button-color, #07C160);\n border-color: var(--quark-success-color, #83E0AF);\n background: var(--button-fill-base-color, transparent);\n}\n\n:host([light]) {\n background: var(--quark-light-color, #E1E6EB);\n}\n\n:host([light][type="primary"]) {\n background: var(--quark-primary-light-color, #E6F4FF);\n color: var(--button-color, #0088ff);\n}\n\n:host([light][type="warning"]) {\n background: var(--quark-warning-light-color, #FEF4E7);\n color: var(--button-color, #FB990F);\n}\n\n:host([light][type="danger"]) {\n background: var(--quark-danger-light-color, #FEE9E9);\n color: var(--button-color, #F72626);\n}\n\n:host([light][type="success"]) {\n background: var(--quark-success-light-color, #E6F8EF);\n color: var(--button-color, #07C160);\n}\n\n:host([loading]) {\n cursor: not-allowed;\n user-select: none;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n /* opacity: 0.68; */\n user-select: none;\n color: #BCC4CC;\n}\n\n:host([disabled][type]) {\n background: #D3DAE0;\n color: #fff;\n}\n\n:host(:active) .quark-button::before {\n opacity: 0.05;\n}\n\n:host([disabled]) .quark-button::before,\n:host([loading]) .quark-button::before {\n display: none;\n}\n\n:host .quark-button::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 transform: translate(-50%, -50%);\n opacity: 0;\n content: "";\n}\n\n.quark-button:not([disabled]):active::after {\n transform: translate(-50%, -50%) scale(0);\n opacity: 0.05;\n transition: 0s;\n}\n\n:host .quark-button-load {\n margin-right: var(--button-icon-hspacing, 1.6vw);\n}\n\n:host .quark-button-icon {\n width: var(--button-icon-size, 1em);\n height: auto;\n margin-right: var(--button-icon-hspacing, 1.33333vw);\n}'})],b);export{v as default};