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