vue-amazing-ui/lib/inputsearch/InputSearch.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),$=require("../button/index.cjs"),v=require("../utils/index.cjs"),M={key:0,class:"input-search-prefix"},I=["value","placeholder","maxlength","disabled","onKeydown"],K={key:1,class:"input-search-suffix"},P={key:1,class:"input-search-count"},D={key:2,class:"suffix-item"},L=["onKeydown"],T=e.defineComponent({__name:"InputSearch",props:{width:{default:"100%"},icon:{type:Boolean,default:!0},search:{default:void 0},searchProps:{default:()=>({})},size:{default:"middle"},allowClear:{type:Boolean,default:!1},addonBefore:{default:void 0},prefix:{default:void 0},suffix:{default:void 0},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{default:void 0},maxlength:{default:void 0},showCount:{type:Boolean,default:!1},value:{default:void 0},valueModifiers:{default:()=>({})}},emits:["update:value","compositionstart","compositionend","change","search"],setup(g,{emit:C}){const o=g,d=e.ref(null),r=e.ref(!1),n=e.ref(),{colorPalettes:c,shadowColor:w}=v.useInject("InputSearch"),l=C,i=v.useSlotsExist(["prefix","suffix","addonBefore"]),y=e.computed(()=>typeof o.width=="number"?`${o.width}px`:o.width),f=e.computed(()=>!o.disabled&&o.allowClear),B=e.computed(()=>o.maxlength?(n.value?n.value.length:0)+" / "+o.maxlength:n.value?n.value.length:0),S=e.computed(()=>i.prefix||o.prefix),p=e.computed(()=>i.suffix||o.suffix),k=e.computed(()=>f.value||o.showCount||p.value),h=e.computed(()=>i.addonBefore||o.addonBefore),m=e.computed(()=>"lazy"in o.valueModifiers);e.watch(()=>o.value,t=>{n.value!==t&&(n.value=t)},{immediate:!0});function E(t){r.value=!0,l("compositionstart",t)}function b(t){var s;r.value=!1,l("compositionend",t);const a=new Event("change");(s=t.target)==null||s.dispatchEvent(a)}function x(t){if(!r.value){const a=t.target;n.value=a.value,m.value||(l("update:value",a.value),l("change",t))}}function N(t){const a=t.target;a.value!==o.value&&(l("update:value",a.value),l("change",t))}function V(){var t;n.value="",l("update:value",""),(t=d.value)==null||t.focus()}function z(t){var a;if(!(r.value||o.loading)&&(u(t),m.value)){const s=new Event("change");(a=t.target)==null||a.dispatchEvent(s)}}function u(t){l("search",n.value,t)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",{class:"m-input-search",style:e.normalizeStyle(`
      --input-search-width: ${y.value};
      --input-search-primary-color-hover: ${e.unref(c)[4]};
      --input-search-primary-color-focus: ${e.unref(c)[4]};
      --input-search-primary-shadow-color: ${e.unref(w)};
    `)},[h.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["input-search-addon-before",`addon-before-${t.size}`])},[e.renderSlot(t.$slots,"addonBefore",{},()=>[e.createTextVNode(e.toDisplayString(t.addonBefore),1)],!0)],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{tabindex:"1",class:e.normalizeClass(["input-search-wrap",[`input-search-${t.size}`,{"input-search-before":h.value,"input-search-disabled":t.disabled}]])},[S.value?(e.openBlock(),e.createElementBlock("span",M,[e.renderSlot(t.$slots,"prefix",{},()=>[e.createTextVNode(e.toDisplayString(t.prefix),1)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("input",{ref_key:"inputRef",ref:d,class:"input-search",type:"text",value:n.value,placeholder:t.placeholder,maxlength:t.maxlength,disabled:t.disabled,onCompositionstart:E,onCompositionend:b,onInput:x,onChange:N,onKeydown:e.withKeys(e.withModifiers(z,["prevent"]),["enter"])},null,40,I),k.value?(e.openBlock(),e.createElementBlock("span",K,[f.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["input-search-clear",{"clear-hidden":!n.value}]),onClick:V},a[0]||(a[0]=[e.createElementVNode("svg",{class:"clear-svg",focusable:"false","data-icon":"close-circle",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"})],-1)]),2)):e.createCommentVNode("",!0),t.showCount?(e.openBlock(),e.createElementBlock("span",P,e.toDisplayString(B.value),1)):e.createCommentVNode("",!0),p.value?(e.openBlock(),e.createElementBlock("span",D,[e.renderSlot(t.$slots,"suffix",{},()=>[e.createTextVNode(e.toDisplayString(t.suffix),1)],!0)])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],2),e.createElementVNode("span",{class:"input-search-button",onClick:u,onKeydown:e.withKeys(e.withModifiers(u,["prevent"]),["enter"])},[e.renderSlot(t.$slots,"search",{},()=>[e.createVNode(e.unref($.default),e.mergeProps({class:"search-btn",size:t.size,disabled:t.disabled,loading:t.loading},t.searchProps),e.createSlots({default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(t.search),1)]),_:2},[t.icon?{name:"icon",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"icon",{},()=>[a[1]||(a[1]=e.createElementVNode("svg",{focusable:"false","data-icon":"search",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"})],-1))],!0)]),key:"0"}:void 0]),1040,["size","disabled","loading"])],!0)],40,L)],4))}});exports.default=T;