quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 6.19 kB
JavaScript
import{_ as n,a as e}from"../typeof.js";import{_ as o,a as t,b as a,c,P as i,H as r,d as s,N as h,O as l,B as u}from"../index2.js";import{_ as d}from"../defineProperty.js";import{c as k,s as p}from"../public.js";var b=':host {\n font-size: var(--checkbox-font-size, 4.26667vw);\n color: var(--checkbox-color, #242729);\n display: inline-flex;\n justify-content: center;\n align-items: center;\n}\n\n:host([disabled]) * {\n cursor: not-allowed;\n}\n\n:host .quark-checkbox-container {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n:host label {\n margin-left: 1.06667vw;\n height: var(--checkbox-label-height, 100%);\n display: inline-flex;\n align-items: center;\n}\n\n:host label.quark-checkbox-hide {\n display: none;\n}\n\n:host .quark-checkbox {\n position: relative;\n display: inline-flex;\n height: var(--checkbox-size, 4.26667vw);\n width: var(--checkbox-size, 4.26667vw);\n flex-shrink: 0;\n}\n\n:host .quark-checkbox-icon {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n /* z-index: 1; */\n visibility: hidden;\n opacity: 0;\n transition-duration: 0.2s;\n transition-property: visibility, opacity;\n}\n\n:host([size="big"]) .quark-checkbox {\n height: var(--checkbox-size, 5.33333vw);\n width: var(--checkbox-size, 5.33333vw);\n}\n\n:host .quark-checkbox input {\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n\n:host .quark-checkbox span {\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n:host .quark-checkbox .quark-checkbox-show {\n background: #ffffff;\n border: 0.5px solid #bcc4cc;\n border-radius: 50%;\n}\n\n:host([disabled]) .quark-checkbox .quark-checkbox-show {\n background: #f0f3f5;\n}\n\n:host .quark-checkbox .quark-checkbox-disabled {\n display: none;\n}\n\n:host([disabled][checked]) .quark-checkbox .quark-checkbox-disabled {\n display: block;\n background: rgba(255, 255, 255, 0.7);\n border-radius: 50%;\n z-index: 3;\n}\n\n:host([shape="square"]) .quark-checkbox .quark-checkbox-show {\n border-radius: 1.06667vw;\n}\n\n:host([disabled][checked][shape="square"])\n .quark-checkbox\n .quark-checkbox-disabled {\n border-radius: 1.06667vw;\n}\n\n:host([shape="square"][size="big"]) .quark-checkbox span {\n border-radius: 1.33333vw;\n}\n\n:host([checked]) .quark-checkbox .quark-checkbox-show {\n border: none;\n background: var(--checkbox-background, #0088ff);\n}\n\n:host([checked]) .quark-checkbox-icon {\n visibility: visible;\n opacity: 1;\n transition-duration: 0.2s;\n transition-property: visibility, opacity;\n}\n\n:host input[type="checkbox"i] {\n margin: 0;\n}\n\n:host .quark-checkbox-group-wrapper {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\nquark-checkbox-group quark-checkbox {\n margin-right: var(--checkbox-group-margin, 1.33333vw);\n}\n\nquark-checkbox-group quark-checkbox:last-child {\n margin-right: 0;\n}';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 a,c=o(n);if(e){var i=o(this).constructor;a=Reflect.construct(c,arguments,i)}else a=c.apply(this,arguments);return t(this,a)}}var v=function(o){a(s,r);var t=f(s);function s(){var e;n(this,s);for(var o=arguments.length,a=new Array(o),r=0;r<o;r++)a[r]=arguments[r];return e=t.call.apply(t,[this].concat(a)),d(c(e),"shape","round"),d(c(e),"size","normal"),d(c(e),"name",""),d(c(e),"value",!1),d(c(e),"disabled",!1),d(c(e),"checked",!1),d(c(e),"classNames",""),d(c(e),"slotRef",i()),d(c(e),"handleCheck",(function(){e.disabled||e.$emit("change",{detail:{value:!e.checked}})})),e}return e(s,[{key:"componentDidUpdate",value:function(){this.value!==this.checked&&(this.value=this.checked)}},{key:"render",value:function(){return r.h("div",{class:"quark-checkbox-container",onClick:this.handleCheck},r.h("span",{class:"quark-checkbox",part:"checkbox"},r.h("input",{type:"checkbox"}),r.h("span",{class:"quark-checkbox-show",part:"checkbox-show"}),r.h("img",{class:"quark-checkbox-icon",part:"icon",src:"https://m.hellobike.com/resource/quark/images/Kr6fLjveFHjjvVXIfDwye.png"}),r.h("span",{class:"quark-checkbox-disabled",part:"checkbox-disabled"})),r.h("label",{for:"checkbox",class:this.classNames,part:"label"},r.h("slot",{ref:this.slotRef})))}}]),s}();s([h()],v.prototype,"shape",void 0),s([h()],v.prototype,"size",void 0),s([h()],v.prototype,"name",void 0),s([h({type:Boolean})],v.prototype,"value",void 0),s([h({type:Boolean})],v.prototype,"disabled",void 0),s([h({type:Boolean})],v.prototype,"checked",void 0),s([l()],v.prototype,"classNames",void 0);var x=v=s([u({tag:"quark-checkbox",style:b})],v),y=function(o){a(s,r);var t=f(s);function s(){var e;n(this,s);for(var o=arguments.length,a=new Array(o),r=0;r<o;r++)a[r]=arguments[r];return e=t.call.apply(t,[this].concat(a)),d(c(e),"value",""),d(c(e),"slotRef",i()),d(c(e),"handleSlotChange",(function(){e.init()})),d(c(e),"eventListener",(function(n){if(n.target!==c(e)){var o=e.value?e.value.split(","):[];k(n.detail.value)?o.splice(o.findIndex((function(e){return e===n.target.name})),1):o.push(n.target.name),e.$emit("change",{detail:{value:o}}),n.stopPropagation()}})),e}return e(s,[{key:"componentDidMount",value:function(){this.$on("change",this.eventListener)}},{key:"shouldComponentUpdate",value:function(n,e,o){return"value"===n&&e!==o&&this.init(),!0}},{key:"init",value:function(){var n,e=null===(n=this.slotRef.current)||void 0===n?void 0:n.assignedNodes(),o=p(e),t=this.value?this.value.split(","):[];null!=o&&o.length&&o.forEach((function(n){t.includes(n.name)?n.checked=!0:n.checked=!1}))}},{key:"render",value:function(){return r.h("div",{class:"quark-checkbox-group-wrapper",part:"root"},r.h("slot",{onslotchange:this.handleSlotChange,ref:this.slotRef}))}}]),s}();s([h()],y.prototype,"value",void 0),y=s([u({tag:"quark-checkbox-group",style:b})],y);export{y as QuarkCheckboxGroup,x as default};