quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 3.98 kB
JavaScript
import{_ as n,a as e}from"../typeof.js";import{_ as t,a,b as o,c as r,P as d,H as i,d as s,N as l,O as c,B as g}from"../index2.js";import{_ as u}from"../defineProperty.js";import{c as v}from"../index3.js";function f(n){var e=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 o,r=t(n);if(e){var d=t(this).constructor;o=Reflect.construct(r,arguments,d)}else o=r.apply(this,arguments);return a(this,o)}}var p=function(t){o(s,i);var a=f(s);function s(){var e;n(this,s);for(var t=arguments.length,o=new Array(t),i=0;i<t;i++)o[i]=arguments[i];return e=a.call.apply(a,[this].concat(o)),u(r(e),"type","round"),u(r(e),"content",""),u(r(e),"size","normal"),u(r(e),"border",!1),u(r(e),"max","99"),u(r(e),"classNames",""),u(r(e),"slotRef",d()),u(r(e),"dealClass",(function(){var n;e.classNames=v("quark-badge-dealclass",{"quark-badge-fixed":null===(n=e.slotRef.current)||void 0===n?void 0:n.assignedNodes().length,"quark-badge-hide":"dot"!==e.type&&(null===e.content||void 0===e.content||!e.content)})})),u(r(e),"renderContent",(function(){return/\d/g.test(e.content)&&/\d/g.test(e.max)&&Number(e.content)>Number(e.max)?"...":e.content})),e}return e(s,[{key:"componentDidMount",value:function(){this.dealClass()}},{key:"componentDidUpdate",value:function(n,e,t){e!==t&&this.dealClass()}},{key:"render",value:function(){return i.h("div",{class:"quark-badge",part:"root"},i.h("div",{class:this.classNames,part:"content"},this.renderContent()),i.h("slot",{ref:this.slotRef,onslotchange:this.dealClass}))}}]),s}();s([l()],p.prototype,"type",void 0),s([l()],p.prototype,"content",void 0),s([l()],p.prototype,"size",void 0),s([l({type:Boolean})],p.prototype,"border",void 0),s([l()],p.prototype,"max",void 0),s([c()],p.prototype,"classNames",void 0);var h=p=s([g({tag:"quark-badge",style:':host {\n position: relative;\n display: inline-flex;\n}\n\n:host .quark-badge {\n display: flex;\n}\n\n:host .quark-badge-dealclass {\n white-space: nowrap;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--badge-font-size, 2.66667vw);\n line-height: var(--badge-line-height, 3.73333vw);\n border-radius: 266.4vw;\n padding: var(--badge-padding-column, 0px) var(--badge-padding-row, 1.06667vw);\n /* min-width: 14px; */\n font-weight: var(--badge-font-weight, 500);\n color: var(--badge-text-color, #fff);\n background: var(--badge-background, #F72626);\n font-family: var(--badge-font-family);\n box-sizing: border-box;\n}\n\n:host .quark-badge-fixed {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n z-index: 1;\n}\n\n:host([type="dot"]) .quark-badge-dealclass {\n height: var(--badge-dot-size, 2.13333vw);\n width: var(--badge-dot-size, 2.13333vw);\n border-radius: 50%;\n min-width: 0;\n padding: 0;\n}\n\n:host .quark-badge-dealclass.quark-badge-hide {\n display: none;\n}\n\n:host([type="label"]) .quark-badge-dealclass {\n font-size: var(--badge-font-size, 2.93333vw);\n line-height: var(--badge-line-height, 3.2vw);\n padding: var(--badge-padding-column, 0.53333vw) var(--badge-padding-row, 1.06667vw);\n border-radius: 266.4vw 266.4vw 266.4vw 1px;\n font-weight: 400;\n}\n\n:host([size="big"]) .quark-badge-dealclass {\n padding: var(--badge-padding-column, 1.06667vw) var(--badge-padding-row, 1.6vw);\n font-size: var(--badge-font-size, 3.2vw);\n line-height: var(--badge-line-height, 3.2vw);\n min-width: 5.33333vw;\n font-weight: 500;\n}\n\n:host([border]) .quark-badge-dealclass {\n border: 1px solid var(--badge-border-color, #fff);\n}\n\n:host([size="big"][type="dot"]) .quark-badge-dealclass {\n height: var(--badge-dot-size, 2.66667vw);\n width: var(--badge-dot-size, 2.66667vw);\n min-width: 0;\n padding: 0;\n}'})],p);export{h as default};