quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 3.98 kB
JavaScript
import{_ as n,r as e}from"../index7.js";import{_ as t,a as o}from"../typeof.js";import{_ as i,a as r,b as a,c as s,H as c,d as l,N as d,B as h}from"../index2.js";import{_ as p}from"../defineProperty.js";import"../loading/index.js";function u(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 t,o=i(n);if(e){var a=i(this).constructor;t=Reflect.construct(o,arguments,a)}else t=o.apply(this,arguments);return r(this,t)}}var f=function(i){a(l,c);var r=u(l);function l(){var o;t(this,l);for(var i=arguments.length,a=new Array(i),c=0;c<i;c++)a[c]=arguments[c];return o=r.call.apply(r,[this].concat(a)),p(s(o),"disabled",!1),p(s(o),"checked",!1),p(s(o),"loading",!1),p(s(o),"size",""),p(s(o),"color","#08f"),p(s(o),"inactivecolor","#e1e6eb"),p(s(o),"name",""),p(s(o),"beforechange",""),p(s(o),"handleChange",n(e.mark((function n(){var t;return e.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:if(!o.disabled&&!o.loading){n.next=2;break}return n.abrupt("return");case 2:t=!o.checked,o.$emit("change",{detail:{value:t}});case 4:case"end":return n.stop()}}),n)})))),o}return o(l,[{key:"render",value:function(){var n={fontSize:this.size?16*+this.size/30:16,"--switch-active-color":this.color,"--switch-inactive-color":this.inactivecolor};return c.h("div",{style:n,class:this.loading&&"quark-switch-loading",part:"root"},c.h("input",{type:"checkbox",id:"quark-switch",class:"quark-switch",part:"switch",onClick:this.handleChange}),c.h("label",{for:"quark-switch",part:"label"},this.loading&&c.h("div",{class:"quark-switch-loading-wrapper",part:"switch-loading"},c.h("quark-loading",{part:"loading-icon",size:+this.size?16*+this.size/30:16,color:this.checked?this.color:this.inactivecolor,type:"spinner"}))))}}]),l}();l([d({type:Boolean})],f.prototype,"disabled",void 0),l([d({type:Boolean})],f.prototype,"checked",void 0),l([d({type:Boolean})],f.prototype,"loading",void 0),l([d()],f.prototype,"size",void 0),l([d()],f.prototype,"color",void 0),l([d()],f.prototype,"inactivecolor",void 0),l([d()],f.prototype,"name",void 0),l([d()],f.prototype,"beforechange",void 0);var b=f=l([h({tag:"quark-switch",style:':host {\n display: inline-block;\n -webkit-tap-highlight-color: transparent;\n}\n\nlabel {\n cursor: pointer;\n display: flex;\n width: var(--switch-label-width, 3.125em);\n height: 1.875em;\n padding: 0.0625em;\n border-radius: 1.2em;\n background: var(--switch-inactive-color, #e1e6eb);\n transition: 0.3s width, 0.3s height, 0.3s background-color;\n box-sizing: border-box;\n}\n\n:host([disabled]),\n:host([loading]) {\n pointer-events: none;\n}\n\n:host([disabled]) {\n opacity: 0.6;\n}\n\n:host([disabled]) label,\n:host([loading]) label {\n pointer-events: all;\n cursor: not-allowed;\n}\n\n.quark-switch {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n}\n\nlabel::after {\n content: "";\n width: 1.75em;\n height: 1.75em;\n border-radius: 1em;\n background: #fff;\n transition: 0.3s background, 0.3s padding, 0.3s width, 0.3s height,\n 0.3s border-radius, 0.3s border;\n box-shadow: 0 0.125em 0.25em 0 rgb(0 35 11 / 20%);\n}\n\n.quark-switch-loading label::after {\n display: none;\n}\n\n.quark-switch-loading-wrapper {\n width: 1.75em;\n height: 1.75em;\n border-radius: 1em;\n background: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n:host(:focus-within) #switch,\n:host(:active) .quark-switch {\n z-index: 2;\n}\n\nlabel::before {\n content: "";\n flex: 0;\n transition: 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) flex;\n}\n\nlabel:active::after {\n padding: 0 0.3em;\n}\n\n:host([checked]) label {\n background: var(--theme-color, var(--switch-active-color, #08f));\n}\n\n:host([checked]) label::before {\n flex: 1;\n}\n'})],f);export{b as default};