vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
8 lines (7 loc) • 11.5 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),ge=require("../empty/index.cjs"),we=require("../scrollbar/index.cjs"),N=require("../utils/index.cjs"),be={class:"select-search"},Ce=["readonly","disabled"],ye=["title"],Be=["title","onMouseenter","onClick"],Ee=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},placement:{default:"bottom"},flip:{type:Boolean,default:!0},to:{type:[String,Boolean],default:"body"},filter:{type:[Function,Boolean],default:!0},maxDisplay:{default:6},scrollbarProps:{default:()=>({})},modelValue:{default:void 0}},emits:["update:modelValue","change","openChange"],setup(n,{emit:G}){const l=n,R=e.ref(!1),v=e.ref([]),s=e.ref(),S=e.ref(null),d=e.ref(),m=e.ref(!1),k=e.ref(!1),c=e.ref(),u=e.ref(!1),p=e.ref(!0),b=e.ref(!1),D=e.ref(!1),g=e.ref(!1),V=e.ref(!1),{colorPalettes:O,shadowColor:J}=N.useInject("Select"),i=e.ref(null),q=e.ref(0),M=e.ref(0),I=e.ref("bottom"),P=e.ref(null),w=e.ref(),H=e.ref(null),z=e.ref(),W=e.ref(null),F=e.ref(),K=e.ref(document.documentElement.clientWidth),T=e.ref(document.documentElement.clientHeight),{isSupported:Q}=N.useOptionsSupported("passive"),E=G,Z=e.computed(()=>typeof l.width=="number"?`${l.width}px`:l.width),_=e.computed(()=>{const t={small:24,middle:32,large:40};return l.height!==void 0?`${l.height}px`:`${t[l.size]}px`});e.computed(()=>l.options.length>l.maxDisplay);const ee=e.computed(()=>({maxHeight:`${l.maxDisplay*32+8}px`})),te=e.computed(()=>{const t=w.value?.top??0,o=z.value?.top??0,a=t-o,h=w.value?.bottom??0,$=(z.value?.bottom??0)-h,f=w.value?.left??0,L=z.value?.left??0,r=f-L,B=w.value?.width??0;switch(I.value){case"bottom":return{transformOrigin:"0 0",top:`${a+M.value}px`,left:`${r}px`,minWidth:`${B}px`,width:`${B}px`};case"top":return{transformOrigin:"100% 100%",bottom:`${$+M.value}px`,left:`${r}px`,minWidth:`${B}px`,width:`${B}px`};default:return{transformOrigin:"0 0",top:`${a+M.value}px`,left:`${r}px`,minWidth:`${B}px`,width:`${B}px`}}});e.watch(()=>[l.placement,l.flip],()=>{x()},{deep:!0}),e.watch(u,t=>{t&&!R.value&&(R.value=!0)}),e.watch(u,t=>{E("openChange",t),l.search&&!t&&(d.value=void 0,k.value=!1)}),e.watchEffect(()=>{l.search?(d.value?v.value=l.options.filter(t=>typeof l.filter=="function"?l.filter(d.value,t):t[l.label].includes(d.value)):u.value?v.value=[...l.options]:setTimeout(()=>{v.value=[...l.options]},200),v.value.length&&d.value?c.value=v.value[0][l.value]:c.value=null):v.value=l.options}),e.watchEffect(()=>{se()}),e.onMounted(()=>{U()}),e.onBeforeUnmount(()=>{A()});const j=N.useMutationObserver(i,()=>{q.value!==i.value?.scrollTop&&(q.value=i.value?.scrollTop??0,x())},{subtree:!0,attributes:!0});N.useEventListener(window,"resize",oe);function le(){let t=W.value?.parentElement;for(;t;){if(t===document.documentElement){H.value=document.documentElement;return}const{position:o}=getComputedStyle(t);if(o!=="static"){H.value=t;return}t=t.parentElement}}function oe(){K.value=document.documentElement.clientWidth,T.value=document.documentElement.clientHeight,U(),x()}function U(){A(),i.value=X(P.value),i.value&&i.value.addEventListener("scroll",x,Q.value?{passive:!0}:void 0),i.value===document.documentElement?j.start():j.stop()}function A(){i.value&&i.value.removeEventListener("scroll",x),i.value=null}function ae(t){return t===document.documentElement?null:t.parentElement}function X(t){if(t===null)return null;const o=ae(t);return o===null?null:o===document.documentElement?document.documentElement:(h=>{const{overflow:y,overflowX:$,overflowY:f}=getComputedStyle(h);return/(auto|scroll|overlay)/.test(y+f+$)})(o)?o:X(o)}function x(){u.value&&Y()}async function Y(){await e.nextTick(),le(),z.value=H.value?.getBoundingClientRect(),w.value=P.value?.getBoundingClientRect(),F.value=W.value?.offsetHeight,M.value=w.value.height+4,l.flip&&(I.value=ue())}function ne(){if(i.value){const t=i.value.getBoundingClientRect();return{top:t.top<0?0:t.top,bottom:t.bottom>T.value?T.value:t.bottom}}return{top:0,bottom:T.value}}function ue(){const{top:t,bottom:o}=w.value,{top:a,bottom:h}=ne(),y=t-a,$=h-o;return f(l.placement,[]);function f(L,r){if(L==="bottom")if(r.includes("bottom")){if(!r.includes("top"))return f("top",r)}else return $<F.value+4?f("top",[...r,"bottom"]):"bottom";else if(L==="top")if(r.includes("top")){if(!r.includes("bottom"))return f("bottom",r)}else return y<F.value+4?f("bottom",[...r,"top"]):"top";return l.placement}}function se(){if(l.modelValue){const t=l.options.find(o=>o[l.value]===l.modelValue);t?(s.value=t[l.label],c.value=t[l.value]):(s.value=l.modelValue,c.value=null)}else s.value=null,c.value=null}function ie(){V.value=!0}function re(){V.value=!1,u.value&&(u.value=!1),l.search&&(g.value=!1,p.value=!0,k.value=!1)}function ce(){m.value=!0,l.allowClear&&(s.value||l.search&&d.value)&&(p.value=!1,b.value=!0,l.search&&(g.value=!1))}function ve(){m.value=!1,l.allowClear&&b.value&&(b.value=!1,l.search||(p.value=!0)),l.search&&(u.value?(g.value=!0,p.value=!1):(g.value=!1,p.value=!0))}function fe(t,o){m.value=!!o,c.value=t}async function de(){if(C(),!l.search&&S.value&&(S.value.style.opacity="0"),u.value=!u.value,u.value&&Y(),!c.value&&s.value){const t=l.options.find(o=>o[l.label]===s.value);c.value=t?t[l.value]:null}l.search&&(b.value||(p.value=!u.value,g.value=u.value))}function me(t){k.value=!!t.target?.value}function pe(){V.value&&(C(),D.value=!0),b.value=!1,s.value=null,c.value=null,u.value=!1,g.value=!1,p.value=!0,E("update:modelValue"),E("change")}function C(){S.value?.focus()}function he(t,o,a){l.modelValue!==t&&(s.value=o,c.value=t,E("update:modelValue",t),E("change",t,o,a)),D.value=!1,C()}return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["select-wrap",{"select-focused":V.value,"search-select":n.search,"select-small":n.size==="small","select-large":n.size==="large","select-disabled":n.disabled}]),style:e.normalizeStyle(`
--select-width: ${Z.value};
--select-height: ${_.value};
--select-primary-color-hover: ${e.unref(O)[4]};
--select-primary-color-focus: ${e.unref(O)[4]};
--select-primary-shadow-color: ${e.unref(J)};
`),onClick:o[7]||(o[7]=a=>n.disabled?()=>!1:de())},[e.createElementVNode("div",{ref_key:"selectContentRef",ref:P,class:"select-content-container",onMouseenter:ce,onMouseleave:ve},[e.createElementVNode("span",be,[e.withDirectives(e.createElementVNode("input",{ref_key:"inputRef",ref:S,class:e.normalizeClass(["search-input",{"caret-show":u.value||D.value}]),type:"text",autocomplete:"off",readonly:!n.search,disabled:n.disabled,onInput:me,"onUpdate:modelValue":o[0]||(o[0]=a=>d.value=a),onBlur:o[1]||(o[1]=a=>!m.value&&!n.disabled?re():()=>!1),onFocus:o[2]||(o[2]=a=>n.disabled?()=>!1:ie())},null,42,Ce),[[e.vModelText,d.value]])]),e.createElementVNode("span",{class:e.normalizeClass(["select-item",{"select-placeholder":!s.value||u.value,"select-item-hidden":k.value}]),title:s.value},e.toDisplayString(s.value||n.placeholder),11,ye),(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["arrow-svg",{"arrow-rotate":u.value,"show-svg":p.value}]),focusable:"false","data-icon":"down",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[...o[8]||(o[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":g.value}]),focusable:"false","data-icon":"search",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[...o[9]||(o[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":b.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(pe,["stop"])},[...o[10]||(o[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))],544),(e.openBlock(),e.createBlock(e.Teleport,{disabled:n.to===!1,to:n.to===!1?null:n.to},[e.createVNode(e.Transition,{name:"slide","enter-from-class":"slide-enter","enter-active-class":"slide-enter","enter-to-class":"slide-enter slide-enter-active","leave-from-class":"slide-leave","leave-active-class":"slide-leave slide-leave-active","leave-to-class":"slide-leave slide-leave-active"},{default:e.withCtx(()=>[R.value?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"selectPanelRef",ref:W,class:"select-panel-container",style:e.normalizeStyle({...te.value,"--select-option-bg-color-active":e.unref(O)[0]})},[e.withDirectives(e.createVNode(e.unref(we.default),e.mergeProps({style:{...ee.value,"--scrollbar-rail-vertical-right":"2px 0 2px auto"},class:"select-options-panel",onClick:e.withModifiers(C,["stop"]),onMouseenter:o[3]||(o[3]=a=>m.value=!0),onMouseleave:o[4]||(o[4]=a=>m.value=!1)},n.scrollbarProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,(a,h)=>(e.openBlock(),e.createElementBlock("p",{key:h,class:e.normalizeClass(["select-option",{"option-hover":!a.disabled&&a[n.value]===c.value,"option-selected":a[n.label]===s.value,"option-disabled":a.disabled}]),title:a[n.label],onMouseenter:y=>fe(a[n.value],a.disabled),onClick:e.withModifiers(y=>a.disabled?C():he(a[n.value],a[n.label],h),["stop"])},e.toDisplayString(a[n.label]),43,Be))),128))]),_:1},16,["style"]),[[e.vShow,v.value.length]]),e.withDirectives(e.createElementVNode("div",{class:"select-options-panel options-panel-empty",onClick:e.withModifiers(C,["stop"]),onMouseenter:o[5]||(o[5]=a=>m.value=!0),onMouseleave:o[6]||(o[6]=a=>m.value=!1)},[e.createVNode(e.unref(ge.default),{image:"outlined"})],544),[[e.vShow,!v.value.length]])],4)),[[e.vShow,u.value]]):e.createCommentVNode("",!0)]),_:1})],8,["disabled","to"]))],6))}});exports.default=Ee;