quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 8.82 kB
JavaScript
import{_ as n,a as e}from"../typeof.js";import{_ as t,a as o,b as a,c as r,H as i,d as c,N as s,B as l}from"../index2.js";import{_ as u}from"../defineProperty.js";import{c as h}from"../index3.js";import"../icon/index.js";import"../index9.js";import"../index4.js";import{d,a as p,f,r as v,w as k,s as y,M as g,h as b}from"../index22.js";import{Local as m}from"../locale/index.js";var x=function(n){f(a,n);var e,t,o=(e=a,t=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}}(),function(){var n,o=d(e);if(t){var a=d(this).constructor;n=Reflect.construct(o,arguments,a)}else n=o.apply(this,arguments);return p(this,n)});function a(){var n;return v(this,a),(n=o.call(this)).attachShadow({mode:"open"}).innerHTML="\n <style>\n ".concat(k,'\n </style>\n <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024">\n ').concat('<path d="M469.333333 85.333333a384 384 0 0 1 300.032 623.658667l156.8 156.842667a42.666667 42.666667 0 0 1-56.32 63.872l-4.010666-3.541334-156.842667-156.8A384 384 0 1 1 469.333333 85.333333z m0 85.333334a298.666667 298.666667 0 1 0 0 597.333333 298.666667 298.666667 0 0 0 0-597.333333z" p-id="3522"></path>',"\n </svg>\n "),n.icon=n.shadowRoot.getElementById("icon"),n}return y(a,[{key:"connectedCallback",value:function(){this.upgradeProperty()}},{key:"attributeChangedCallback",value:function(n,e,t){if("color"===n)this.icon.style.color=t;else if("size"===n){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(n){this.setAttribute("size",n)}},{key:"color",get:function(){return this.getAttribute("color")},set:function(n){this.setAttribute("color",n)}}],[{key:"observedAttributes",get:function(){return["size","color"]}}]),a}(b(HTMLElement));customElements.get("quark-icon-search")||customElements.define("quark-icon-search",x);function w(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,r=t(n);if(e){var i=t(this).constructor;a=Reflect.construct(r,arguments,i)}else a=r.apply(this,arguments);return o(this,a)}}var q=function(t){a(c,i);var o=w(c);function c(){var e;n(this,c);for(var t=arguments.length,a=new Array(t),i=0;i<t;i++)a[i]=arguments[i];return e=o.call.apply(o,[this].concat(a)),u(r(e),"value",""),u(r(e),"shape","square"),u(r(e),"dark",!1),u(r(e),"showback",!1),u(r(e),"hideaction",!1),u(r(e),"actiontext",m.current.cancel),u(r(e),"iconcolor","#242729"),u(r(e),"placeholder",m.current.search.placeholder),u(r(e),"maxlength",""),u(r(e),"autofocus",!1),u(r(e),"clearable",!0),u(r(e),"disabled",!1),u(r(e),"readonly",!1),u(r(e),"backEvent",(function(){e.$emit("back")})),u(r(e),"actionEvent",(function(){e.$emit("cancel")})),u(r(e),"clearEvent",(function(){e.value&&(e.value="",e.$emit("change",{detail:{value:e.value}}))})),u(r(e),"inputEvent",(function(n){var t=n.target;if(!t.flag){n.stopPropagation();var o=t.value;e.value=o,e.$emit("change",{detail:{value:o}})}})),u(r(e),"focusEvent",(function(n){n.stopPropagation(),e.$emit("focus",{detail:{value:e.value}})})),u(r(e),"blurEvent",(function(n){n.stopPropagation(),e.$emit("blur",{detail:{value:e.value}})})),u(r(e),"keypressEvent",(function(n){13===n.keyCode&&(n.stopPropagation(),e.$emit("search",{detail:{value:e.value}}))})),u(r(e),"onChoiceStart",(function(n){n.target.flag=!0})),u(r(e),"onChoiceEnd",(function(n){var t=n.target;t.flag&&(t.flag=!1,e.inputEvent(n))})),e}return e(c,[{key:"render",value:function(){var n=h("quark-search",{"quark-search-dark":this.dark}),e=h("quark-search-content",{round:"round"===this.shape}),t=this.value&&this.clearable&&!this.disabled&&!this.readonly;return i.h("div",{class:n,part:"root"},this.showback&&i.h("div",{class:"quark-search-back",part:"back",onClick:this.backEvent},i.h("quark-icon-arrow-left",{part:"back-icon",color:this.dark?"#fff":this.iconcolor,size:"24"})),i.h("div",{class:e,part:"content"},i.h("div",{class:"quark-search-content-left-icon",part:"content-left"},i.h("quark-icon-search",{part:"content-left-icon",color:"RGBA(188, 196, 204, 1)",size:"12"})),i.h("div",{class:"quark-search-input",part:"search-input"},i.h("input",{part:"input",disabled:this.disabled,readonly:this.readonly,autofocus:this.autofocus,maxlength:this.maxlength,placeholder:this.placeholder,oncompositionstart:this.onChoiceStart,oncompositionend:this.onChoiceEnd,oninput:this.inputEvent,onfocus:this.focusEvent,onblur:this.blurEvent,onkeypress:this.keypressEvent,value:this.value,type:"search",class:"quark-search-field-control"}),t&&i.h("quark-icon-close",{color:"RGBA(188, 196, 204, 1)",class:"quark-search-field-clear",part:"clear-icon",size:"13",onClick:this.clearEvent}))),!this.hideaction&&this.actiontext&&i.h("div",{class:"quark-search-action",part:"action",onClick:this.actionEvent},i.h("slot",{name:"action",class:"quark-search-action-slot"},this.actiontext)))}}]),c}();c([s()],q.prototype,"value",void 0),c([s()],q.prototype,"shape",void 0),c([s({type:Boolean})],q.prototype,"dark",void 0),c([s({type:Boolean})],q.prototype,"showback",void 0),c([s({type:Boolean})],q.prototype,"hideaction",void 0),c([s()],q.prototype,"actiontext",void 0),c([s()],q.prototype,"iconcolor",void 0),c([s()],q.prototype,"placeholder",void 0),c([s()],q.prototype,"maxlength",void 0),c([s({type:Boolean})],q.prototype,"autofocus",void 0),c([s({type:Boolean})],q.prototype,"clearable",void 0),c([s({type:Boolean})],q.prototype,"disabled",void 0),c([s({type:Boolean})],q.prototype,"readonly",void 0);var z=q=c([l({tag:"quark-search",style:':host {\n display: block;\n}\n\n.quark-search {\n display: flex;\n background: var(--search-background, #fff);\n padding: 1.6vw 4.26667vw 1.6vw 3.2vw;\n}\n\n.quark-search-content {\n box-sizing: border-box;\n flex: 1;\n height: 8.53333vw;\n background: #f0f3f5;\n border-radius: 2.13333vw;\n padding: 1.6vw 2.66667vw;\n display: flex;\n}\n\n.quark-search-content.round {\n border-radius: 266.4vw;\n}\n\n.quark-search-content-left-icon {\n margin-right: 2.13333vw;\n display: flex;\n align-items: center;\n}\n\n.quark-search-input {\n flex: 1;\n display: flex;\n align-items: center;\n}\n\n.quark-search-field-clear {\n cursor: pointer;\n}\n\ninput[type="search"] {\n -webkit-appearance: none;\n -webkit-box-sizing: content-box;\n}\n\ninput:-moz-placeholder,\ntextarea:-moz-placeholder {\n color: var(--field-placeholder-color, #c8c9cc);\n font-size: var(--field-placeholder-size, 3.73333vw);\n}\n\ninput:-ms-input-placeholder,\ntextarea:-ms-input-placeholder {\n color: var(--field-placeholder-color, #c8c9cc);\n font-size: var(--field-placeholder-size, 3.73333vw);\n}\n\ninput::-webkit-input-placeholder,\ntextarea::-webkit-input-placeholder {\n color: var(--field-placeholder-color, #c8c9cc);\n font-size: var(--field-placeholder-size, 3.73333vw);\n}\n\ninput::-webkit-search-decoration,\ninput::-webkit-search-cancel-button {\n display: none;\n}\n\n.quark-search-field-control {\n display: block;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n width: 100%;\n resize: none;\n border: 0;\n background: transparent;\n user-select: auto;\n color: var(--field-input-color, #242729);\n font-family: var(--field-input-family, PingFangSC-Regular, PingFang SC);\n outline: none;\n font-size: var(--field-font-size, 3.73333vw);\n}\n\n.quark-search-back {\n display: flex;\n align-items: center;\n margin-right: 2.13333vw;\n cursor: pointer;\n}\n\n.quark-search-action {\n margin-left: var(--search-action-text-margin-left, 4.26667vw);\n font-weight: 400;\n color: var(--search-action-text-color, #242729);\n font-size: var(--search-action-font-size, 4.26667vw);\n line-height: 8.53333vw;\n cursor: pointer;\n user-select: none;\n}\n\n.quark-search-action :active {\n background-color: #f2f3f5;\n}\n\n.quark-search-action-slot {\n padding: 0 1.6vw;\n}\n\n.quark-search-dark {\n background: var(--search-dark-background, #0088ff);\n}\n\n.quark-search-dark .quark-search-content {\n background: #fff;\n}\n\n.quark-search-dark .quark-search-action {\n color: #fff;\n}\n\n:host input[disabled] {\n opacity: 0.6;\n cursor: not-allowed;\n color: var(--field-disabled-color, #c8c9cc);\n}\n\n.hide {\n display: none;\n}'})],q);export{z as default};