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"),z=require("../button/index.cjs"),m=require("../utils/index.cjs"),$={key:0,class:"input-search-prefix"},M=["value","placeholder","maxlength","disabled","onKeydown"],I={key:1,class:"input-search-suffix"},K={key:1,class:"input-search-count"},P={key:2,class:"suffix-item"},D=["onKeydown"],L=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(v,{emit:g}){const o=v,u=e.ref(null),r=e.ref(!1),n=e.ref(),{colorPalettes:d,shadowColor:C}=m.useInject("InputSearch"),l=g,s=m.useSlotsExist(["prefix","suffix","addonBefore"]),w=e.computed(()=>typeof o.width=="number"?`${o.width}px`:o.width),c=e.computed(()=>!o.disabled&&o.allowClear),y=e.computed(()=>o.maxlength?(n.value?n.value.length:0)+" / "+o.maxlength:n.value?n.value.length:0),B=e.computed(()=>s.prefix||o.prefix),f=e.computed(()=>s.suffix||o.suffix),S=e.computed(()=>c.value||o.showCount||f.value),p=e.computed(()=>s.addonBefore||o.addonBefore),h=e.computed(()=>"lazy"in o.valueModifiers);e.watch(()=>o.value,t=>{n.value!==t&&(n.value=t)},{immediate:!0});function k(t){r.value=!0,l("compositionstart",t)}function E(t){r.value=!1,l("compositionend",t);const a=new Event("change");t.target?.dispatchEvent(a)}function b(t){if(!r.value){const a=t.target;n.value=a.value,h.value||(l("update:value",a.value),l("change",t))}}function x(t){const a=t.target;a.value!==o.value&&(l("update:value",a.value),l("change",t))}function N(){n.value="",l("update:value",""),u.value?.focus()}function V(t){if(!(r.value||o.loading)&&(i(t),h.value)){const a=new Event("change");t.target?.dispatchEvent(a)}}function i(t){l("search",n.value,t)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",{class:"input-search-wrap",style:e.normalizeStyle(`
      --input-search-width: ${w.value};
      --input-search-primary-color-hover: ${e.unref(d)[4]};
      --input-search-primary-color-focus: ${e.unref(d)[4]};
      --input-search-primary-shadow-color: ${e.unref(C)};
    `)},[p.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-container",[`input-search-${t.size}`,{"input-search-before":p.value,"input-search-disabled":t.disabled}]])},[B.value?(e.openBlock(),e.createElementBlock("span",$,[e.renderSlot(t.$slots,"prefix",{},()=>[e.createTextVNode(e.toDisplayString(t.prefix),1)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("input",{ref_key:"inputRef",ref:u,class:"input-search",type:"text",value:n.value,placeholder:t.placeholder,maxlength:t.maxlength,disabled:t.disabled,onCompositionstart:k,onCompositionend:E,onInput:b,onChange:x,onKeydown:e.withKeys(e.withModifiers(V,["prevent"]),["enter"])},null,40,M),S.value?(e.openBlock(),e.createElementBlock("span",I,[c.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["input-search-clear",{"clear-hidden":!n.value}]),onClick:N},[...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",K,e.toDisplayString(y.value),1)):e.createCommentVNode("",!0),f.value?(e.openBlock(),e.createElementBlock("span",P,[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:i,onKeydown:e.withKeys(e.withModifiers(i,["prevent"]),["enter"])},[e.renderSlot(t.$slots,"search",{},()=>[e.createVNode(e.unref(z.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,D)],4))}});exports.default=L;