vexip-ui/lib/components/cascader/cascader-panel.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../checkbox/index.cjs");require("../icon/index.cjs");require("../option/index.cjs");require("../virtual-list/index.cjs");const I=require("@vexip-ui/config"),z=require("@vexip-ui/hooks"),M=require("@vexip-ui/utils"),E=require("../virtual-list/virtual-list.cjs"),H=require("../option/option.vue2.cjs"),L=require("../checkbox/checkbox.vue2.cjs"),b=require("../icon/icon.cjs"),R=["aria-labelledby"],$=e.defineComponent({name:"CascaderPanel",__name:"cascader-panel",props:{options:{type:Array,default:()=>[]},openedId:{type:Number,default:null},values:{type:Array,default:()=>[]},ready:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},checkIcon:{type:Object,default:null},isAsync:{type:Boolean,default:!1},merged:{type:Boolean,default:!1},noCascaded:{type:Boolean,default:!1},visible:{type:Boolean,default:!1},labeledBy:{type:String,default:void 0}},emits:["select","check","hover","open","back","close"],setup(r,{expose:w,emit:P}){const a=r,f=P,u=I.useNameHelper("cascader"),p=I.useIcons(),{isRtl:S}=z.useRtl(),s=e.ref(-1),i=e.ref(),{target:T}=z.useModifier({passive:!1,onKeyDown:(l,n)=>{if(n.escape){f("close");return}M.decide([[()=>n.up||n.down,()=>{if(s.value<0){s.value=a.options.findIndex(h),s.value<0&&(s.value=0);return}s.value=M.boundRange(A(s.value+(n.up?-1:1),n.up?-1:1),0,a.options.length-1),N(s.value,n.up?"top":"bottom")}],[()=>n.left||n.right,()=>{if(n.right){const t=a.options[s.value];t&&d(t)&&f("open",t)}else f("back")}],[()=>n.enter||n.space,()=>{l.stopPropagation();const t=a.options[s.value];t&&(a.multiple?m(t):y(t,s.value))}]],{beforeMatchAny:()=>l.preventDefault(),afterMatchAny:n.resetAll})}});let v=0,g;e.watch([()=>a.ready,()=>a.options],()=>{var l;requestAnimationFrame(B),a.ready?((l=i.value)==null||l.refresh(),s.value=a.options.findIndex(h)):s.value=-1}),e.onMounted(()=>{requestAnimationFrame(B)}),e.onBeforeUnmount(C),w({currentHitting:s});function d(l){var n;return!!(l.hasChild||(n=l.children)!=null&&n.length)}function h(l){return d(l)&&l.id===a.openedId||a.values.includes(l.fullValue)}function k(l){return l.disabled||!a.merged&&a.multiple&&a.isAsync&&d(l)&&!l.childrenLoaded}function y(l,n){l.disabled||(s.value=n,a.multiple||a.noCascaded?d(l)?f("select",l):m(l):f("select",l))}function m(l){!k(l)&&f("check",l)}function V(l){clearTimeout(g),g=setTimeout(()=>{!l.disabled&&f("hover",l)},100)}function C(){clearTimeout(g)}function B(){var n;const l=(n=i.value)==null?void 0:n.wrapper;if(l){const t=getComputedStyle(l),o=parseInt(t.paddingTop),c=parseInt(t.paddingBottom);v=l.offsetHeight-o-c}}function q(l,n){var o;const t=a.options;for(n=n/Math.abs(n);(o=t[l])!=null&&o.disabled&&(l+=n,!(l<0||l>=t.length)););return l}function A(l,n=1){var o;const t=a.options;return(o=t[l])!=null&&o.disabled&&(l=q(l,n),(n>0?l>=t.length:l<0)&&(l=q(l,-n),(n>0?l<0:l>=t.length)&&(l=-1))),l}function N(l,n){const t=a.options[l],o=32;if(!(!t||!i.value))if(n==="bottom"){const c=(l+1)*o;i.value.scrollOffset+v<c&&i.value.scrollTo(c-v)}else{const c=l*o;i.value.scrollOffset>c&&i.value.scrollTo(c)}}return(l,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:T,class:e.normalizeClass(e.unref(u).be("panel")),tabindex:"-1","aria-labelledby":r.labeledBy,onMouseleave:C},[e.createVNode(e.unref(E),{ref_key:"list",ref:i,inherit:"",items:r.options,"item-size":32,height:"100%","id-key":"id","items-attrs":{class:[e.unref(u).be("options"),r.multiple?e.unref(u).bem("options","multiple"):null,r.noCascaded?e.unref(u).bem("options","no-cascaded"):null],role:"listbox",ariaMultiselectable:r.multiple},onResize:B},{default:e.withCtx(({item:t,index:o})=>[e.createVNode(e.unref(H),{class:e.normalizeClass({[e.unref(u).ns("option--error")]:t.error}),value:t.value,label:t.label,disabled:t.disabled,selected:h(t),hitting:o===s.value,onSelect:c=>y(t,o),onMouseenter:c=>V(t)},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default",{option:t,index:o,selected:h(t),canCheck:k(t),hasChild:d(t)},()=>[r.multiple||r.noCascaded?(e.openBlock(),e.createBlock(e.unref(L),{key:0,inherit:"",class:e.normalizeClass(e.unref(u).be("checkbox")),checked:t.checked,control:d(t),partial:t.partial,disabled:k(t),size:"small",onClick:e.withModifiers(c=>m(t),["prevent","stop"])},null,8,["class","checked","control","partial","disabled","onClick"])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(e.unref(u).be("label"))},[e.renderSlot(l.$slots,"label",{option:t,index:o,selected:h(t),canCheck:k(t),hasChild:d(t),handleSelect:()=>y(t,o)},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(u).be("icon"))},[t.loading?(e.openBlock(),e.createBlock(e.unref(b),e.normalizeProps(e.mergeProps({key:0},e.unref(p).loading)),null,16)):t.error?(e.openBlock(),e.createBlock(e.unref(b),e.normalizeProps(e.mergeProps({key:1},e.unref(p).refresh)),null,16)):d(t)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.unref(S)?(e.openBlock(),e.createBlock(e.unref(b),e.normalizeProps(e.mergeProps({key:0},e.unref(p).angleLeft)),null,16)):(e.openBlock(),e.createBlock(e.unref(b),e.normalizeProps(e.mergeProps({key:1},e.unref(p).angleRight)),null,16))],64)):!r.multiple&&!r.noCascaded&&r.checkIcon&&r.values.includes(t.fullValue)?(e.openBlock(),e.createBlock(e.unref(b),e.mergeProps({key:3},e.unref(p).check,{icon:r.checkIcon||e.unref(p).check.icon}),null,16,["icon"])):e.createCommentVNode("",!0)],2)])]),_:2},1032,["class","value","label","disabled","selected","hitting","onSelect","onMouseenter"])]),_:3},8,["items","items-attrs"])],42,R))}});module.exports=$;
//# sourceMappingURL=cascader-panel.vue2.cjs.map