vexip-ui/lib/components/wheel/wheel.vue2.cjs

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

"use strict";const e=require("vue");require("../icon/index.cjs");require("../renderer/index.cjs");require("../scroll/index.cjs");require("../form/index.cjs");require("./wheel-item.vue.cjs");const c=require("@vexip-ui/config"),I=require("@vexip-ui/hooks"),g=require("@vexip-ui/utils"),ce=require("./props.cjs"),ve=require("./symbol.cjs"),fe=require("../form/helper.cjs"),L=require("../icon/icon.cjs"),me=require("../scroll/scroll.vue2.cjs"),he=require("./wheel-item.vue2.cjs"),be=require("../renderer/renderer.cjs"),pe=["id","aria-labelledby"],ge=e.defineComponent({name:"Wheel",__name:"wheel",props:ce.wheelProps,emits:["update:value"],setup(R,{expose:D,emit:W}){const{idFor:V,labelId:H,state:U,disabled:O,loading:j,validateField:K,getFieldValue:X,setFieldValue:Y}=fe.useFieldStore(()=>{var l;return(l=h.value)==null?void 0:l.focus()}),G=R,a=c.useProps("wheel",G,{state:c.createStateProp(U),horizontal:!1,value:{default:()=>X(),static:!0},candidate:{default:2,validator:l=>[0,1,2,3].includes(l)},arrow:!1,pointer:g.USE_TOUCH,options:{default:()=>[],static:!0},insertEmpty:!1,disabled:()=>O.value,loading:()=>j.value,loadingLock:!1,disabledItem:{default:g.toFalse,isFunc:!0},noTransition:!1,selectable:!1,slots:()=>({})}),J=W,o=c.useNameHelper("wheel"),v=c.useIcons(),w=e.ref(new Set),s=e.ref(0),x=e.ref(0),C=e.ref(0),i=e.ref(0),d=e.ref(0),f=e.ref(0),m=e.ref(0),S=e.ref(!1),{isRtl:B}=I.useRtl(),h=I.useDisplay(oe),b=e.ref();I.useModifier({target:h,passive:!1,onKeyDown:(l,t)=>{(t.up||t.down)&&(l.preventDefault(),t.up?M():$())}});const Q=e.computed(()=>{const l=a.options.map(t=>{if(typeof t=="object"){const{value:r,label:n,disabled:F=!1}=t;return{value:r,label:n||String(r),disabled:F,meta:t}}return{value:t,label:String(t),disabled:!1,meta:t}});return a.insertEmpty&&l.unshift({value:"",label:typeof a.insertEmpty=="string"?a.insertEmpty:"-",disabled:!1,meta:""}),l}),u=e.computed(()=>Array.from(w.value)),T=e.computed(()=>a.loading&&a.loadingLock),Z=e.computed(()=>[o.b(),o.bs("vars"),o.bm(a.horizontal?"horizontal":"vertical"),{[o.bm("inherit")]:a.inherit,[o.bm(a.state)]:a.state!=="default",[o.bm("disabled")]:a.disabled,[o.bm("readonly")]:T.value,[o.bm("loading")]:a.loading}]),ee=e.computed(()=>a.horizontal?{paddingRight:`${f.value}px`,paddingLeft:`${f.value}px`}:{paddingTop:`${m.value}px`,paddingBottom:`${m.value}px`}),P=e.computed(()=>a.horizontal?{width:f.value?`${f.value}px`:void 0}:{height:m.value?`${m.value}px`:void 0}),le=e.computed(()=>{const l={inset:a.horizontal?`0 ${f.value-1}px`:`${m.value-1}px 0`};return a.horizontal?(l.borderTop="0",l.borderBottom="0"):(l.borderRight="0",l.borderLeft="0"),l}),N=e.computed(()=>a.disabled||!u.value.slice(0,s.value).some(l=>!E(l))),q=e.computed(()=>a.disabled||s.value>=u.value.length-1||!u.value.slice(s.value+1,u.value.length).some(l=>!E(l))),ae=e.computed(()=>a.horizontal?B.value?v.value.angleRight:v.value.angleLeft:v.value.angleUp),te=e.computed(()=>a.horizontal?B.value?v.value.angleLeft:v.value.angleRight:v.value.angleDown);e.provide(ve.WHEEL_STATE,{increaseItem:re,decreaseItem:ne});const _=g.debounceMinor(()=>{const l=Math.max(u.value.findIndex(t=>t.value===a.value),0);p(k(l))}),y=g.debounceMinor(()=>{e.nextTick(()=>{const l=a.horizontal;u.value.forEach(n=>{n&&n.el&&(i.value=Math.max(i.value,n.el.offsetWidth),d.value=Math.max(d.value,n.el.offsetHeight))});const t=a.candidate,r=2*t+1;x.value=r*i.value,C.value=r*d.value,f.value=t*i.value,m.value=t*d.value,w.value.forEach(n=>{l?n.width=i.value:n.height=d.value}),setTimeout(()=>{var n;(n=b.value)==null||n.refresh()},0)})}),z=g.debounce(()=>{if(b.value){let l=0,t=0;a.horizontal?l=s.value*i.value:t=s.value*d.value,e.nextTick(()=>{var r;(r=b.value)==null||r.scrollTo(l,t)})}},20);e.watch(()=>a.value,()=>{_(),z()},{immediate:!0}),e.watch(()=>a.horizontal,y),e.watch(()=>a.candidate,y),D({idFor:V,currentActive:s,isInit:S,targetWidth:i,targetHeight:d,wrapperWidth:x,wrapperHeight:C,itemList:u,wrapper:h,scroll:b,refreshScroll:z,focus:l=>{var t;return(t=h.value)==null?void 0:t.focus(l)},blur:()=>{var l;return(l=h.value)==null?void 0:l.blur()}});function E(l){return l.disabled||a.disabledItem(l.value,l.meta)}function p(l){if(s.value===l)return;s.value=l;const t=u.value[l],r=t==null?void 0:t.value;z(),J("update:value",r),Y(r),c.emitEvent(a.onChange,r,t==null?void 0:t.meta),K()}function A(l,t){for(t=t/Math.abs(t);u.value[l].disabled&&(l+=t,!(l<0||l>=u.value.length)););return l}function k(l,t=1){return u.value[l]&&E(u.value[l])&&(l=A(l,1*t),(t>0?l>=u.value.length:l<0)&&(l=A(g.boundRange(l,0,u.value.length-1),-1*t),(t>0?l<0:l>=u.value.length)&&(l=0))),l}function re(l){w.value.add(l),y(),_()}function ne(l){w.value.delete(l),y(),_()}function oe(){var l;y(),(l=b.value)==null||l.refresh(),e.nextTick(()=>{S.value=!0,_(),z()})}function ue({signX:l,signY:t}){if(a.disabled||T.value)return!1;const r=a.horizontal?l:t;return!(r<0&&N.value||r>0&&q.value)}function se({clientX:l,clientY:t}){const r=a.horizontal?l/i.value:t/d.value,n=Math.round(r);n!==s.value?p(k(n,n>r?1:-1)):z()}function ie({sign:l,clientX:t,clientY:r}){const n=a.horizontal?Math.round(t/i.value):Math.round(r/d.value);p(k(n,l))}function M(){if(!N.value){p(k(s.value-1,-1));const l=u.value[s.value];c.emitEvent(a.onPrev,l==null?void 0:l.value,l==null?void 0:l.meta)}}function $(){if(!q.value){p(k(s.value+1,1));const l=u.value[s.value];c.emitEvent(a.onNext,l==null?void 0:l.value,l==null?void 0:l.meta)}}function de(l,t){a.selectable&&!E(u.value[t])&&p(t),c.emitEvent(a.onItemClick,l.value,l.meta)}return(l,t)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(V),ref_key:"wrapper",ref:h,class:e.normalizeClass(Z.value),tabindex:"0",role:"group","aria-labelledby":e.unref(H)},[e.unref(a).arrow?(e.openBlock(),e.createElementBlock("div",{key:0,ref:"prevArrow",class:e.normalizeClass([e.unref(o).be("arrow"),e.unref(o).bem("arrow","prev"),N.value?e.unref(o).bem("arrow","disabled"):""]),"aria-hidden":"",onClick:M},[e.createVNode(e.unref(L),e.normalizeProps(e.guardReactiveProps(ae.value)),null,16)],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("scroll")),role:"none"},[e.createVNode(e.unref(me),{ref_key:"scroll",ref:b,inherit:"","scroll-x":e.unref(a).horizontal?i.value*s.value:0,"scroll-y":e.unref(a).horizontal?0:d.value*s.value,width:e.unref(a).horizontal?x.value:"100%",height:e.unref(a).horizontal?"100%":C.value,pointer:e.unref(a).pointer,mode:e.unref(a).horizontal?"horizontal":"vertical","delta-x":i.value,"delta-y":d.value,"on-before-scroll":ue,"no-transition":e.unref(a).noTransition,onWheel:ie,onScrollEnd:se},{default:e.withCtx(()=>[e.createElementVNode("ul",{ref:"list",class:e.normalizeClass(e.unref(o).be("list")),style:e.normalizeStyle(ee.value)},[S.value?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(Q.value,(r,n)=>(e.openBlock(),e.createBlock(he,{key:n,value:r.value,disabled:r.disabled||e.unref(a).disabledItem(r.value,r),active:s.value===n,meta:r.meta,onClick:F=>de(r,n)},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default",{option:r,index:n},()=>[e.createVNode(e.unref(be),{renderer:e.unref(a).slots.default,data:{option:r,index:n}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.label),1)]),_:2},1032,["renderer","data"])])]),_:2},1032,["value","disabled","active","meta","onClick"]))),128)):e.createCommentVNode("",!0)],6)]),_:3},8,["scroll-x","scroll-y","width","height","pointer","mode","delta-x","delta-y","no-transition"]),e.unref(a).candidate?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(o).be("mask"),e.unref(o).bem("mask","top")]),style:e.normalizeStyle(P.value)},null,6),e.createElementVNode("div",{class:e.normalizeClass([e.unref(o).be("mask"),e.unref(o).bem("mask","bottom")]),style:e.normalizeStyle(P.value)},null,6)],64)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass({[e.unref(o).be("border")]:!0,[e.unref(o).bem("border","active")]:e.unref(a).loading,[e.unref(o).bem("border","vertical")]:e.unref(a).horizontal}),style:e.normalizeStyle(le.value)},null,6)],2),e.unref(a).arrow?(e.openBlock(),e.createElementBlock("div",{key:1,ref:"nextArrow",class:e.normalizeClass([e.unref(o).be("arrow"),e.unref(o).bem("arrow","next"),q.value?e.unref(o).bem("arrow","disabled"):""]),"aria-hidden":"",onClick:$},[e.createVNode(e.unref(L),e.normalizeProps(e.guardReactiveProps(te.value)),null,16)],2)):e.createCommentVNode("",!0)],10,pe))}});module.exports=ge;
//# sourceMappingURL=wheel.vue2.cjs.map