vue-amazing-ui/lib/select/Select.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"),x=require("../empty/index.cjs"),A=require("../scrollbar/index.cjs"),U=require("../utils/index.cjs"),W={class:"select-search"},G=["readonly","disabled"],J=["title"],K=["title","onMouseenter","onClick"],Q=e.defineComponent({__name:"Select",props:{options:{default:()=>[]},label:{default:"label"},value:{default:"value"},placeholder:{default:"请选择"},disabled:{type:Boolean,default:!1},width:{default:"auto"},height:{default:void 0},size:{default:"middle"},allowClear:{type:Boolean,default:!1},search:{type:Boolean,default:!1},filter:{type:[Function,Boolean],default:!0},maxDisplay:{default:6},scrollbarProps:{default:()=>({})},modelValue:{default:void 0}},emits:["update:modelValue","change","openChange"],setup(V,{emit:$}){const a=V,r=e.ref(),u=e.ref(),w=e.ref(null),i=e.ref(),c=e.ref(!1),g=e.ref(!1),n=e.ref(),m=e.ref(),k=e.ref(0),o=e.ref(!1),v=e.ref(!0),f=e.ref(!1),C=e.ref(!1),d=e.ref(!1),b=e.ref(!1),{colorPalettes:y,shadowColor:M}=U.useInject("Select"),h=$,E=e.computed(()=>typeof a.width=="number"?`${a.width}px`:a.width),z=e.computed(()=>{const l={small:24,middle:32,large:40};return a.height!==void 0?`${a.height}px`:`${l[a.size]}px`}),S=e.computed(()=>a.options.length>a.maxDisplay),N=e.computed(()=>({maxHeight:`${a.maxDisplay*32+8}px`}));e.watchEffect(()=>{a.search?(i.value?(o.value=!0,r.value=a.options.filter(l=>typeof a.filter=="function"?a.filter(i.value,l):l[a.label].includes(i.value))):r.value=[...a.options],r.value.length&&i.value?n.value=r.value[0][a.value]:n.value=null):r.value=a.options}),e.watchEffect(()=>{L()}),e.watch(o,async l=>{if(S.value)if(l)await e.nextTick(),m.value&&m.value.scrollTo({top:k.value,behavior:"instant"});else{const t=m.value&&m.value.getScrollData();k.value=(t==null?void 0:t.scrollTop)||0}h("openChange",l),a.search&&!l&&(i.value=void 0,g.value=!1)});function L(){if(a.modelValue){const l=a.options.find(t=>t[a.value]===a.modelValue);l?(u.value=l[a.label],n.value=l[a.value]):(u.value=a.modelValue,n.value=null)}else u.value=null,n.value=null}function T(){b.value=!0}function D(){b.value=!1,o.value&&(o.value=!1),a.search&&(d.value=!1,v.value=!0,g.value=!1)}function F(){c.value=!0,a.allowClear&&(u.value||a.search&&i.value)&&(v.value=!1,f.value=!0,a.search&&(d.value=!1))}function P(){c.value=!1,a.allowClear&&f.value&&(f.value=!1,a.search||(v.value=!0)),a.search&&(o.value?(d.value=!0,v.value=!1):(d.value=!1,v.value=!0))}function q(l,t){c.value=!!t,n.value=l}function R(){if(p(),!a.search&&w.value&&(w.value.style.opacity="0"),o.value=!o.value,!n.value&&u.value){const l=a.options.find(t=>t[a.label]===u.value);n.value=l?l[a.value]:null}a.search&&(f.value||(v.value=!o.value,d.value=o.value))}function H(l){var t;g.value=!!((t=l.target)!=null&&t.value)}function I(){b.value&&(p(),C.value=!0),f.value=!1,u.value=null,n.value=null,o.value=!1,d.value=!1,v.value=!0,h("update:modelValue"),h("change")}function p(){var l;(l=w.value)==null||l.focus()}function O(l,t,s){a.modelValue!==l&&(u.value=t,n.value=l,h("update:modelValue",l),h("change",l,t,s)),C.value=!1,p()}return(l,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-select",{"select-focused":b.value,"search-select":l.search,"select-small":l.size==="small","select-large":l.size==="large","select-disabled":l.disabled}]),style:e.normalizeStyle(`
      --select-width: ${E.value};
      --select-height: ${z.value};
      --select-primary-color-hover: ${e.unref(y)[4]};
      --select-primary-color-focus: ${e.unref(y)[4]};
      --select-primary-shadow-color: ${e.unref(M)};
      --select-item-bg-color-active: ${e.unref(y)[0]};
    `),onClick:t[7]||(t[7]=s=>l.disabled?()=>!1:R())},[e.createElementVNode("div",{class:"select-wrap",onMouseenter:F,onMouseleave:P},[e.createElementVNode("span",W,[e.withDirectives(e.createElementVNode("input",{ref_key:"inputRef",ref:w,class:e.normalizeClass(["search-input",{"caret-show":o.value||C.value}]),type:"text",autocomplete:"off",readonly:!l.search,disabled:l.disabled,onInput:H,"onUpdate:modelValue":t[0]||(t[0]=s=>i.value=s),onBlur:t[1]||(t[1]=s=>!c.value&&!l.disabled?D():()=>!1),onFocus:t[2]||(t[2]=s=>l.disabled?()=>!1:T())},null,42,G),[[e.vModelText,i.value]])]),e.createElementVNode("span",{class:e.normalizeClass(["select-item",{"select-placeholder":!u.value||o.value,"select-item-hidden":g.value}]),title:u.value},e.toDisplayString(u.value||l.placeholder),11,J),(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["arrow-svg",{"arrow-rotate":o.value,"show-svg":v.value}]),focusable:"false","data-icon":"down",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},t[8]||(t[8]=[e.createElementVNode("path",{d:"M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"},null,-1)]),2)),(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["search-svg",{"show-svg":d.value}]),focusable:"false","data-icon":"search",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},t[9]||(t[9]=[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"},null,-1)]),2)),(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["clear-svg",{"show-svg":f.value}]),focusable:"false","data-icon":"close-circle",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true","fill-rule":"evenodd",viewBox:"64 64 896 896",onClick:e.withModifiers(I,["stop"])},t[10]||(t[10]=[e.createElementVNode("path",{d:"M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"},null,-1)]),2))],32),e.createVNode(e.Transition,{name:"slide-down","enter-from-class":"slide-down-enter","enter-active-class":"slide-down-enter","enter-to-class":"slide-down-enter slide-down-enter-active","leave-from-class":"slide-down-leave","leave-active-class":"slide-down-leave slide-down-leave-active","leave-to-class":"slide-down-leave slide-down-leave-active"},{default:e.withCtx(()=>[o.value&&r.value&&r.value.length?(e.openBlock(),e.createElementBlock("div",{key:0,class:"select-options-panel",onClick:e.withModifiers(p,["stop"]),onMouseenter:t[3]||(t[3]=s=>c.value=!0),onMouseleave:t[4]||(t[4]=s=>c.value=!1)},[e.createVNode(e.unref(A.default),e.mergeProps({ref_key:"scrollbarRef",ref:m,"content-style":{padding:"4px"},style:N.value},l.scrollbarProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(s,B)=>(e.openBlock(),e.createElementBlock("p",{key:B,class:e.normalizeClass(["select-option",{"option-hover":!s.disabled&&s[l.value]===n.value,"option-selected":s[l.label]===u.value,"option-disabled":s.disabled}]),title:s[l.label],onMouseenter:j=>q(s[l.value],s.disabled),onClick:e.withModifiers(j=>s.disabled?p():O(s[l.value],s[l.label],B),["stop"])},e.toDisplayString(s[l.label]),43,K))),128))]),_:1},16,["style"])],32)):o.value&&r.value&&!r.value.length?(e.openBlock(),e.createElementBlock("div",{key:1,class:"select-options-panel options-empty",onClick:e.withModifiers(p,["stop"]),onMouseenter:t[5]||(t[5]=s=>c.value=!0),onMouseleave:t[6]||(t[6]=s=>c.value=!1)},[e.createVNode(e.unref(x.default),{image:"outlined"})],32)):e.createCommentVNode("",!0)]),_:1})],6))}});exports.default=Q;