vexip-ui/lib/components/date-picker/time-picker.vue2.cjs

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

"use strict";const e=require("vue");require("../button/index.cjs");require("../icon/index.cjs");require("../popper/index.cjs");require("../form/index.cjs");require("../renderer/index.cjs");require("./time-wheel.vue.cjs");require("./time-control.vue.cjs");const u=require("@vexip-ui/config"),P=require("@vexip-ui/hooks"),y=require("@vexip-ui/utils"),Qe=require("./props.cjs"),me=require("./helper.cjs"),Xe=require("./symbol.cjs"),Ye=require("../form/helper.cjs"),J=require("../renderer/renderer.cjs"),B=require("../icon/icon.cjs"),pe=require("./time-control.vue2.cjs"),Ze=require("../popper/popper.vue.cjs"),ve=require("./time-wheel.vue2.cjs"),be=require("../button/button.cjs"),en=["id","aria-disabled","aria-expanded","aria-labelledby"],nn=["onKeydown"],tn=["aria-label"],rn=["aria-labelledby"],ln=["title","onClick"],on=e.defineComponent({name:"TimePicker",__name:"time-picker",props:Qe.timePickerProps,emits:["update:value","update:visible"],setup(he,{expose:ge,emit:Ce}){const{idFor:Q,labelId:z,state:Ve,disabled:ke,loading:xe,size:ye,validateField:Ee,clearField:we,getFieldValue:Se,setFieldValue:Ne}=Ye.useFieldStore(()=>{var n;return(n=g.value)==null?void 0:n.focus()}),o=u.useNameHelper("time-picker"),$e=he,t=u.useProps("timePicker",$e,{size:u.createSizeProp(ye),state:u.createStateProp(Ve),locale:null,visible:!1,placement:{default:"bottom-start",validator:n=>P.placementWhileList.includes(n)},transfer:!1,format:"HH:mm:ss",separator:":",value:{default:()=>Se(),static:!0},filler:{default:"-",validator:n=>n.length===1},clearable:!1,noAction:!1,noArrow:!1,pointer:y.USE_TOUCH,candidate:{default:3,validator:n=>[0,1,2,3].includes(n)},steps:()=>[1,1,1],labels:()=>({}),shortcuts:()=>[],range:null,disabled:()=>ke.value,transitionName:()=>o.ns("drop"),confirmText:null,cancelText:null,ctrlSteps:()=>[5,5,5],prefix:u.createIconProp(),prefixColor:"",suffix:u.createIconProp(),suffixColor:"",noSuffix:!1,exchange:!1,loading:()=>xe.value,loadingIcon:u.createIconProp(),loadingLock:!1,loadingEffect:null,min:null,max:null,outsideClose:!0,outsideCancel:!1,placeholder:null,unitReadonly:!1,popperAlive:null,shortcutsPlacement:"left",slots:()=>({})}),H=Ce,Pe=e.useSlots(),b=u.useLocale("timePicker",e.toRef(t,"locale")),h=u.useIcons(),X=u.useWordSpace(),Be=e.toRef(t,"placement"),ze=e.toRef(t,"transfer"),c=e.ref(t.visible),m=e.ref(!1),E=e.ref(""),a=re(),i=re(),f=e.ref("start"),k=e.ref(!1),{timer:Y}=P.useSetTimeout(),w=P.useClickOutside(Ke),L=e.ref(),{reference:g,transferTo:Z,updatePopper:ee}=P.usePopper({placement:Be,transfer:ze,wrapper:w,popper:e.computed(()=>{var n;return(n=L.value)==null?void 0:n.wrapper}),isDrop:!0}),{isHover:ne}=P.useHover(g),{isTimeDisabled:p}=me.useTimeBound(e.toRef(t,"min"),e.toRef(t,"max")),A=e.ref(),I=e.ref(),Ae=e.computed(()=>{if(t.placeholder)return Array.isArray(t.placeholder)?t.placeholder[0]:t.placeholder;const{select:n,start:r,time:l}=b.value.placeholder;return u.makeSentence(t.range?`${r} ${l}`:`${n} ${l}`,X.value)}),Ie=e.computed(()=>{if(t.placeholder)return Array.isArray(t.placeholder)?t.placeholder[1]||t.placeholder[0]:t.placeholder;const{end:n,time:r}=b.value.placeholder;return u.makeSentence(`${n} ${r}`,X.value)}),qe=e.computed(()=>[o.b(),o.ns("input-vars"),o.bs("vars"),{[o.bm("inherit")]:t.inherit,[o.bm("disabled")]:t.disabled,[o.bm(t.size)]:t.size!=="default",[o.bm("no-hour")]:!a.enabled.hour,[o.bm("no-minute")]:!a.enabled.minute,[o.bm("no-second")]:!a.enabled.second,[o.bm("visible")]:c.value,[o.bm(t.state)]:t.state!=="default",[o.bm("is-range")]:t.range}]),S=e.computed(()=>t.loading&&t.loadingLock),Te=e.computed(()=>{const n=o.be("selector");return{[n]:!0,[`${n}--disabled`]:t.disabled,[`${n}--readonly`]:S.value,[`${n}--loading`]:t.loading,[`${n}--${t.size}`]:t.size!=="default",[`${n}--focused`]:m.value,[`${n}--${t.state}`]:t.state!=="default"}}),Fe=e.computed(()=>!!(Pe.prefix||t.prefix||t.slots.prefix)),C=e.computed(()=>{const n=[a,i].map(r=>Object.values(r.timeValue).map(y.doubleDigits).join(":"));return t.range?n:n[0]}),te=e.computed(()=>!t.disabled&&!S.value&&t.clearable&&ne.value&&!!E.value),q=e.computed(()=>{const{hour:n,minute:r,second:l}=a.timeValue;return p.hour(n)||p.minute(n,r)||p.second(n,r,l)}),T=e.computed(()=>{if(!t.range)return!1;const{hour:n,minute:r,second:l}=i.timeValue;return p.hour(n)||p.minute(n,r)||p.second(n,r,l)});e.watch(()=>t.value,n=>{N(n),E.value=(Array.isArray(n)?n[0]||n[1]:n)?O():""},{immediate:!0}),e.watch(()=>t.format,Me,{immediate:!0}),e.watch(()=>t.visible,n=>{c.value=n}),e.watch(c,n=>{n&&ee()}),e.watch(m,n=>{n?u.emitEvent(t.onFocus):u.emitEvent(t.onBlur)}),e.watch(f,n=>{!t.unitReadonly&&c.value&&u.emitEvent(t.onChangeCol,d().column,n)}),e.watch(()=>a.column,n=>{!t.unitReadonly&&c.value&&f.value==="start"&&u.emitEvent(t.onChangeCol,n,"start")}),e.watch(()=>i.column,n=>{!t.unitReadonly&&c.value&&f.value==="end"&&u.emitEvent(t.onChangeCol,n,"end")}),e.watch(()=>t.disabled,n=>{n&&(M(!1),R())}),e.watch(S,n=>{n&&M(!1)}),ge({idFor:Q,isHover:ne,currentVisible:c,focused:m,startState:a,endState:i,currentState:f,currentValue:C,startError:q,endError:T,wrapper:w,reference:g,popper:L,start:A,end:I,updatePopper:ee,focus:n=>{var r;return(r=g.value)==null?void 0:r.focus(n)},blur:()=>{var n;return(n=g.value)==null?void 0:n.blur()}});function re(){const{currentColumn:n,enabled:r,resetColumn:l,enterColumn:s}=me.useColumn(["hour","minute","second"]),V=e.reactive({hour:0,minute:0,second:0}),v=e.reactive({hour:!1,minute:!1,second:!1});return e.reactive({column:n,enabled:r,activated:v,timeValue:V,resetColumn:l,enterColumn:s})}function d(){return f.value==="start"?a:i}function N(n){Array.isArray(n)||(n=[n,n]);const r=new Date;for(let l=0;l<2;++l){const s=Xe.TIME_REG.exec(n[l]||""),V=l===0?a:i,{timeValue:v}=V;if(s){F(!0,l===0?"start":"end");const _e=parseInt(s[1]),Ge=s[2]?parseInt(s[2].slice(1)):0,Je=s[3]?parseInt(s[3].slice(1)):0,G=new Date(2e3,1,1,_e,Ge,Je);v.hour=G.getHours(),v.minute=G.getMinutes(),v.second=G.getSeconds()}else v.hour=r.getHours(),v.minute=r.getMinutes(),v.second=r.getSeconds(),F(!1,l===0?"start":"end");if(!t.range)break}}function Me(){[a,i].forEach(n=>{n.enabled.hour=t.format.includes("H"),n.enabled.minute=t.format.includes("m"),n.enabled.second=t.format.includes("s")})}function F(n,r){(r?r==="start"?[a]:[i]:[a,i]).forEach(s=>{Object.keys(s.activated).forEach(V=>{s.activated[V]=n})})}function O(){return Array.isArray(C.value)?C.value.join("|"):C.value}function Re(){(q.value||t.range&&T.value)&&N(t.value)}function M(n){c.value!==n&&(c.value=n,H("update:visible",n),u.emitEvent(t.onToggle,n))}function Ue(){Re(),E.value!==O()&&(E.value=O(),F(!0),H("update:value",C.value),Ne(C.value),u.emitEvent(t.onChange,C.value),Ee())}function le(){t.disabled||(m.value=!0,Y.focus=setTimeout(()=>{var n,r;m.value&&(f.value==="start"?(n=A.value)==null||n.focus():(r=I.value)==null||r.focus())},120))}function R(){var n,r;clearTimeout(Y.focus),m.value=!1,(n=A.value)==null||n.blur(),(r=I.value)==null||r.blur()}function oe(n){if(t.disabled||S.value)return;const r=n.target;M(!0),le(),w.value&&r&&(Array.from(w.value.querySelectorAll(`.${o.be("unit")}`)).some(s=>s===r||s.contains(r))||(a.column=null,i.column=null))}function $(n=!0){M(!1),n&&Ue(),a.resetColumn(),i.resetColumn()}function ae(n=!0){t.disabled||S.value||t.clearable&&e.nextTick(()=>{const r=t.range?[]:"";N(null),n&&$(!1),H("update:value",r),u.emitEvent(t.onChange,r),u.emitEvent(t.onClear),we(r),n&&R(),E.value="",e.nextTick(()=>{F(!1)})})}function ue(n){c.value&&(d().activated[n]=!0)}function se(n){d().column=n}function ie(n){const r=d(),l=r.column;l&&(De(l,n),r.column!=="second"&&r.timeValue[l]>=10&&r.enterColumn("next",!1))}function De(n,r){const l=d(),s=l.timeValue[n];l.activated[n]&&s>0&&s<10?l.timeValue[n]=s*10+r:l.timeValue[n]=r,j(n),l.activated[n]=!0,u.emitEvent(t.onInput,n,l.timeValue[n])}function j(n){const r=d().timeValue;r[n]=y.boundRange(r[n],0,n==="hour"?23:59),r[n]=Math.round(r[n]/U(n))*U(n)}function ce(n){const r=d(),l=r.column;l&&r.enabled[l]&&(r.timeValue[l]+=n?de(l):U(l),j(l),u.emitEvent(t.onPlus,l,r.timeValue[l]))}function fe(n){const r=d(),l=r.column;l&&r.enabled[l]&&(r.timeValue[l]-=n?de(l):U(l),j(l),u.emitEvent(t.onMinus,l,r.timeValue[l]))}function U(n){return t.steps[n==="hour"?0:n==="minute"?1:2]||1}function de(n){return t.ctrlSteps[n==="hour"?0:n==="minute"?1:2]||1}function W(){requestAnimationFrame(()=>{var n;R(),(n=g.value)==null||n.focus()})}function K(){W(),$(),u.emitEvent(t.onEnter)}function _(){W(),N(t.value),$(!1),u.emitEvent(t.onCancel)}function He(n){const{value:r,name:l}=t.shortcuts[n],s=y.callIfFunc(r);W(),N(s),u.emitEvent(t.onShortcut,l,s),$()}function x(n){f.value=n}function D(n){if(t.range){n==="prev"&&f.value==="start"&&!a.column&&x("end");const r=d(),l=r.column;if(r.enterColumn(n,!l),l===r.column){const s=f.value==="start";(s?i:a).resetColumn(n==="prev"?"second":"hour",n==="prev"),x(s?"end":"start")}}else a.enterColumn(n)}function Le(n){x("start"),se(n)}function Oe(n){x("end"),se(n)}function je(){Object.keys(a.timeValue).forEach(n=>{const r=i.timeValue[n];i.timeValue[n]=a.timeValue[n],a.timeValue[n]=r})}function We(n){t.exchange&&(!c.value&&n.stopPropagation(),je())}function Ke(){u.emitEvent(t.onClickOutside),t.outsideClose&&c.value&&($(!t.outsideCancel),R(),u.emitEvent(t.onOutsideClose))}return(n,r)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(Q),ref_key:"wrapper",ref:w,class:e.normalizeClass(qe.value),role:"group","aria-disabled":e.unref(y.toAttrValue)(e.unref(t).disabled),"aria-expanded":e.unref(y.toAttrValue)(c.value),"aria-haspopup":"dialog","aria-labelledby":e.unref(z),onClick:oe},[e.createElementVNode("div",{ref_key:"reference",ref:g,class:e.normalizeClass(Te.value),tabindex:"0",onKeydown:[e.withKeys(e.withModifiers(oe,["prevent"]),["space"]),r[7]||(r[7]=e.withKeys(e.withModifiers(l=>ae(!1),["prevent"]),["backspace"]))]},[Fe.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(o).be("icon"),e.unref(o).be("prefix")]),style:e.normalizeStyle({color:e.unref(t).prefixColor})},[e.renderSlot(n.$slots,"prefix",{},()=>[e.createVNode(e.unref(J),{renderer:e.unref(t).slots.prefix},{default:e.withCtx(()=>[e.createVNode(e.unref(B),{icon:e.unref(t).prefix},null,8,["icon"])]),_:1},8,["renderer"])])],6)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("control"))},[e.createVNode(pe,{ref_key:"startInput",ref:A,"unit-type":f.value==="start"?e.unref(a).column:"",enabled:e.unref(a).enabled,activated:e.unref(a).activated,"time-value":e.unref(a).timeValue,steps:e.unref(t).steps,"ctrl-steps":e.unref(t).ctrlSteps,focused:m.value,visible:c.value,separator:e.unref(t).separator,filler:e.unref(t).filler,labels:e.unref(t).labels,"has-error":q.value,placeholder:Ae.value,readonly:e.unref(t).unitReadonly,"labeled-by":e.unref(z),locale:e.unref(b),onInput:ie,onPlus:ce,onMinus:fe,onEnter:K,onCancel:_,onUnitFocus:Le,onPrevUnit:r[0]||(r[0]=l=>D("prev")),onNextUnit:r[1]||(r[1]=l=>D("next")),onBlur:r[2]||(r[2]=l=>e.unref(a).column=null)},null,8,["unit-type","enabled","activated","time-value","steps","ctrl-steps","focused","visible","separator","filler","labels","has-error","placeholder","readonly","labeled-by","locale"]),e.unref(t).range?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(o).be("exchange"),e.unref(t).exchange?e.unref(o).bem("exchange","enabled"):""]),onClick:We},[e.renderSlot(n.$slots,"exchange",{},()=>[e.createVNode(e.unref(J),{renderer:e.unref(t).slots.exchange},{default:e.withCtx(()=>[e.createVNode(e.unref(B),e.mergeProps(e.unref(h).exchange,{style:{"padding-top":"1px"}}),null,16)]),_:1},8,["renderer"])])],2),e.createVNode(pe,{ref_key:"endInput",ref:I,"unit-type":f.value==="end"?e.unref(i).column:"",enabled:e.unref(i).enabled,activated:e.unref(i).activated,"time-value":e.unref(i).timeValue,steps:e.unref(t).steps,"ctrl-steps":e.unref(t).ctrlSteps,focused:m.value,visible:c.value,separator:e.unref(t).separator,filler:e.unref(t).filler,labels:e.unref(t).labels,"has-error":T.value,placeholder:Ie.value,readonly:e.unref(t).unitReadonly,"labeled-by":e.unref(z),locale:e.unref(b),onInput:ie,onPlus:ce,onMinus:fe,onEnter:K,onCancel:_,onUnitFocus:Oe,onPrevUnit:r[3]||(r[3]=l=>D("prev")),onNextUnit:r[4]||(r[4]=l=>D("next")),onBlur:r[5]||(r[5]=l=>e.unref(i).column=null)},null,8,["unit-type","enabled","activated","time-value","steps","ctrl-steps","focused","visible","separator","filler","labels","has-error","placeholder","readonly","labeled-by","locale"])],64)):e.createCommentVNode("",!0)],2),e.unref(t).noSuffix?e.unref(t).clearable||e.unref(t).loading?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass([e.unref(o).be("icon"),e.unref(o).bem("icon","placeholder"),e.unref(o).be("suffix")])},null,2)):e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([e.unref(o).be("icon"),e.unref(o).be("suffix")]),style:e.normalizeStyle({color:e.unref(t).suffixColor,opacity:te.value||e.unref(t).loading?"0%":""})},[e.renderSlot(n.$slots,"suffix",{},()=>[e.createVNode(e.unref(J),{renderer:e.unref(t).slots.suffix},{default:e.withCtx(()=>[e.createVNode(e.unref(B),e.mergeProps(e.unref(h).clock,{icon:e.unref(t).suffix||e.unref(h).clock.icon}),null,16,["icon"])]),_:1},8,["renderer"])])],6)),e.createVNode(e.Transition,{name:e.unref(o).ns("fade"),appear:""},{default:e.withCtx(()=>[te.value?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass([e.unref(o).be("icon"),e.unref(o).be("clear")]),type:"button",tabindex:"-1","aria-label":e.unref(b).ariaLabel.clear,onClick:r[6]||(r[6]=e.withModifiers(l=>ae(),["stop"]))},[e.createVNode(e.unref(B),e.normalizeProps(e.guardReactiveProps(e.unref(h).clear)),null,16)],10,tn)):e.unref(t).loading?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([e.unref(o).be("icon"),e.unref(o).be("loading")])},[e.createVNode(e.unref(B),e.mergeProps(e.unref(h).loading,{effect:e.unref(t).loadingEffect||e.unref(h).loading.effect,icon:e.unref(t).loadingIcon||e.unref(h).loading.icon}),null,16,["effect","icon"])],2)):e.createCommentVNode("",!0)]),_:1},8,["name"])],42,nn),e.createVNode(e.unref(Ze),{ref_key:"popper",ref:L,class:e.normalizeClass([e.unref(o).be("popper"),e.unref(o).bs("vars")]),visible:c.value,to:e.unref(Z),transition:e.unref(t).transitionName,alive:e.unref(t).popperAlive??!e.unref(Z),onClick:e.withModifiers(le,["stop"]),onBeforeEnter:r[16]||(r[16]=l=>k.value=!0),onBeforeLeave:r[17]||(r[17]=l=>k.value=!0),onAfterEnter:r[18]||(r[18]=l=>k.value=!1),onAfterLeave:r[19]||(r[19]=l=>k.value=!1)},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass({[e.unref(o).be("panel")]:!0,[e.unref(o).bem("panel","vertical")]:e.unref(t).shortcuts.length&&(e.unref(t).shortcutsPlacement==="top"||e.unref(t).shortcutsPlacement==="bottom")}),"aria-labelledby":e.unref(z)},[e.unref(t).shortcuts.length?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(o).be("list"),e.unref(o).bem("list","sub"),e.unref(o).be("shortcuts"),e.unref(o).bem("shortcuts",e.unref(t).shortcutsPlacement)])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t).shortcuts,(l,s)=>(e.openBlock(),e.createElementBlock("div",{key:s,class:e.normalizeClass(e.unref(o).be("shortcut")),title:l.name,onClick:V=>He(s)},e.toDisplayString(l.name),11,ln))),128))],2)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("list"))},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("wheels"))},[e.createVNode(ve,{hour:e.unref(a).timeValue.hour,"onUpdate:hour":r[8]||(r[8]=l=>e.unref(a).timeValue.hour=l),minute:e.unref(a).timeValue.minute,"onUpdate:minute":r[9]||(r[9]=l=>e.unref(a).timeValue.minute=l),second:e.unref(a).timeValue.second,"onUpdate:second":r[10]||(r[10]=l=>e.unref(a).timeValue.second=l),"no-arrow":e.unref(t).noArrow,candidate:e.unref(t).candidate,steps:e.unref(t).steps,pointer:e.unref(t).pointer,"disabled-time":e.unref(p),"no-transition":k.value,onChange:ue,onToggleCol:r[11]||(r[11]=l=>x("start"))},null,8,["hour","minute","second","no-arrow","candidate","steps","pointer","disabled-time","no-transition"]),e.unref(t).range?(e.openBlock(),e.createBlock(ve,{key:0,hour:e.unref(i).timeValue.hour,"onUpdate:hour":r[12]||(r[12]=l=>e.unref(i).timeValue.hour=l),minute:e.unref(i).timeValue.minute,"onUpdate:minute":r[13]||(r[13]=l=>e.unref(i).timeValue.minute=l),second:e.unref(i).timeValue.second,"onUpdate:second":r[14]||(r[14]=l=>e.unref(i).timeValue.second=l),"no-arrow":e.unref(t).noArrow,candidate:e.unref(t).candidate,steps:e.unref(t).steps,pointer:e.unref(t).pointer,"disabled-time":e.unref(p),"no-transition":k.value,onChange:ue,onToggleCol:r[15]||(r[15]=l=>x("end"))},null,8,["hour","minute","second","no-arrow","candidate","steps","pointer","disabled-time","no-transition"])):e.createCommentVNode("",!0)],2),e.unref(t).noAction?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(o).be("action"))},[e.createVNode(e.unref(be),{inherit:"",text:"",size:"small",onClick:e.withModifiers(_,["stop"])},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(t).cancelText||e.unref(b).cancel),1)]),_:1}),e.createVNode(e.unref(be),{inherit:"",type:"primary",size:"small",disabled:q.value||T.value,onClick:e.withModifiers(K,["stop"])},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(t).confirmText||e.unref(b).confirm),1)]),_:1},8,["disabled"])],2))],2)],10,rn)]),_:1},8,["class","visible","to","transition","alive"])],10,en))}});module.exports=on;
//# sourceMappingURL=time-picker.vue2.cjs.map