quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 4.53 kB
JavaScript
import{_ as t,a as n}from"../typeof.js";import{_ as e,a as o,b as r,c as i,P as a,H as c,d as s,N as l,B as u}from"../index2.js";import{_ as f}from"../defineProperty.js";import{d as p,a as d,f as h,r as y,w as v,s as m,M as g,h as w}from"../index22.js";var k=function(t){h(r,t);var n,e,o=(n=r,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(t){return!1}}(),function(){var t,o=p(n);if(e){var r=p(this).constructor;t=Reflect.construct(o,arguments,r)}else t=o.apply(this,arguments);return d(this,t)});function r(){var t;return y(this,r),(t=o.call(this)).attachShadow({mode:"open"}).innerHTML="\n <style>\n ".concat(v,'\n </style>\n <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024">\n ').concat('<path d="M140.544 311.125333a42.666667 42.666667 0 0 1 56.32-3.498666l4.010667 3.584 310.314666 311.082666 312.021334-311.168a42.666667 42.666667 0 0 1 56.32-3.498666l4.010666 3.584a42.666667 42.666667 0 0 1 3.498667 56.32l-3.584 4.010666-342.186667 341.333334a42.666667 42.666667 0 0 1-56.32 3.498666l-4.010666-3.584-340.48-341.333333a42.666667 42.666667 0 0 1 0.085333-60.330667z" p-id="3930"></path>',"\n </svg>\n "),t.icon=t.shadowRoot.getElementById("icon"),t}return m(r,[{key:"connectedCallback",value:function(){this.upgradeProperty()}},{key:"attributeChangedCallback",value:function(t,n,e){if("color"===t)this.icon.style.color=e;else if("size"===t){var o=this.getFontSize();this.icon.style.fontSize="".concat(o)}}},{key:"upgradeProperty",value:function(){this.size=this.size,this.color=this.color}},{key:"getFontSize",value:function(){return g(this.size)}},{key:"size",get:function(){return this.getAttribute("size")},set:function(t){this.setAttribute("size",t)}},{key:"color",get:function(){return this.getAttribute("color")},set:function(t){this.setAttribute("color",t)}}],[{key:"observedAttributes",get:function(){return["size","color"]}}]),r}(w(HTMLElement));customElements.get("quark-icon-arrow-down")||customElements.define("quark-icon-arrow-down",k);function b(t){var n=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(t){return!1}}();return function(){var r,i=e(t);if(n){var a=e(this).constructor;r=Reflect.construct(i,arguments,a)}else r=i.apply(this,arguments);return o(this,r)}}var z=function(e){r(s,c);var o=b(s);function s(){var n;t(this,s);for(var e=arguments.length,r=new Array(e),c=0;c<e;c++)r[c]=arguments[c];return n=o.call.apply(o,[this].concat(r)),f(i(n),"open",!1),f(i(n),"title",""),f(i(n),"detailsEl",a()),n}return n(s,[{key:"componentDidMount",value:function(){this.open&&(this.detailsEl.current.open=!0)}},{key:"shouldComponentUpdate",value:function(t,n,e){"open"===t&&n!==e&&(this.detailsEl.current.open=e);return!0}},{key:"render",value:function(){return c.h("details",{ref:this.detailsEl,part:"root"},c.h("summary",{part:"summary"},c.h("slot",{name:"title"},this.title),c.h("slot",{name:"icon"},c.h("quark-icon-arrow-down",{class:"collapse-icon",size:"16"})),c.h("div",{class:"line",part:"line"})),c.h("div",{class:"expander-content",part:"content"},c.h("slot",null)))}}]),s}();s([l({type:Boolean})],z.prototype,"open",void 0),s([l({type:String})],z.prototype,"title",void 0);var R=z=s([u({tag:"quark-collapse",style:"details {\n background-color: #fff;\n}\n\ndetails[open] quark-icon-arrow-down{\n transform: rotate(180deg);\n}\n\nsummary {\n padding: 3.46667vw 6.93333vw;\n color: var(--callapse-title-color, #666);;\n font-size: var(--callapse-title-fontsize, 3.73333vw);\n position: relative;\n cursor: pointer;\n transition: all .4s;\n}\n\nsummary:first-of-type {\n list-style-type: none;\n}\n\n.collapse-icon {\n position: absolute;\n right: 6.93333vw;\n top: 4vw;\n}\n\n.line {\n width: calc(100% - 13.86667vw);\n height: 1px;\n background: #ebedf0;\n position: absolute;\n bottom: 0;\n}\n\n.expander-content {\n color: var(--callapse-content-color, #666);\n font-size: var(--callapse-content-fontsize, 3.73333vw);\n line-height: 1.5;\n background-color: #fff;\n padding: 3.2vw 7.46667vw;\n}\n\n:host([iconhide]) quark-icon-arrow-down{\n display: none;\n}"})],z);export{R as default};