vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
3 lines (2 loc) • 5.09 kB
JavaScript
"use strict";const e=require("vue"),E=require("@vexip-ui/config"),x=require("@vexip-ui/utils"),S=require("./helper.cjs"),V=["aria-label","aria-valuenow","aria-valuetext","aria-labelledby"],w=["aria-label","aria-valuenow","aria-valuetext","aria-labelledby"],N=["aria-label","aria-valuenow","aria-valuetext","aria-labelledby"],z=e.defineComponent({name:"TimeControl",__name:"time-control",props:{unitType:{type:String,default:""},enabled:{type:Object,default:()=>({})},activated:{type:Object,default:()=>({})},timeValue:{type:Object,default:()=>({})},separator:{type:String,default:":"},visible:{type:Boolean,default:!1},focused:{type:Boolean,default:!1},filler:{type:String,default:"-",validator:a=>a.length===1},steps:{type:Array,default:()=>[1,1,1]},ctrlSteps:{type:Array,default:()=>[5,5,5]},labels:{type:Object,default:()=>({})},hasError:{type:Boolean,default:!1},placeholder:{type:String,default:""},readonly:{type:Boolean,default:!1},labeledBy:{type:String,default:void 0},locale:{type:Object,default:()=>({})}},emits:["input","plus","minus","enter","cancel","unit-focus","unit-blur","prev-unit","next-unit","blur"],setup(a,{expose:k,emit:p}){const n=a,i=p,r=E.useNameHelper("time-picker"),c=e.ref(),s=e.computed(()=>n.locale.ariaLabel??{}),b=e.computed(()=>Object.keys(n.enabled).every(t=>!n.enabled[t]||n.activated[t])),f=e.computed(()=>d("hour")),y=e.computed(()=>d("minute")),v=e.computed(()=>d("second"));k({isActivated:b,wrapper:c,focus:()=>{var t;(t=c.value)==null||t.focus()},blur:()=>{var t;(t=c.value)==null||t.blur()}});function d(t){return n.activated[t]?x.doubleDigits(n.timeValue[t]):`${n.filler}${n.filler}`}function m(t){return n.visible&&n.unitType===t?r.bem("unit","focused"):null}function o(t){n.readonly||i("unit-focus",t)}function B(t){if(!n.visible)return;const l=S.handleKeyEnter(t);if(n.readonly){switch(l){case"ok":{i("enter");break}case"esc":{i("cancel");break}}return}switch(l){case"next":{i("next-unit");break}case"prev":{i("prev-unit");break}case"up":{i("minus",t.ctrlKey);break}case"down":{i("plus",t.ctrlKey);break}case"ok":{C();break}case"esc":{h();break}default:typeof l=="number"&&i("input",l)}}function C(){i("enter")}function h(){i("cancel")}function g(){i("blur")}return(t,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:c,class:e.normalizeClass([e.unref(r).be("input"),a.hasError&&e.unref(r).bem("input","error")]),role:"none",tabindex:"-1",onKeydown:B,onBlur:g},[!a.focused&&!b.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(r).be("placeholder"))},e.toDisplayString(a.placeholder),3)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[a.enabled.hour?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(r).be("unit"),m("hour")]),role:"spinbutton","aria-label":s.value.hour,"aria-valuenow":n.timeValue.hour,"aria-valuetext":f.value,"aria-valuemin":0,"aria-valuemax":23,"aria-labelledby":a.labeledBy,onClick:l[0]||(l[0]=u=>o("hour"))},e.toDisplayString(f.value),11,V)):e.createCommentVNode("",!0),a.labels.hour?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(r).be("label")),"aria-hidden":"",onClick:l[1]||(l[1]=u=>o("hour"))},e.toDisplayString(a.labels.hour),3)):e.createCommentVNode("",!0),a.enabled.minute?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[a.enabled.hour?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(r).be("separator")),"aria-hidden":""},e.toDisplayString(a.separator),3)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass([e.unref(r).be("unit"),m("minute")]),role:"spinbutton","aria-label":s.value.minute,"aria-valuenow":n.timeValue.minute,"aria-valuetext":y.value,"aria-valuemin":0,"aria-valuemax":59,"aria-labelledby":a.labeledBy,onClick:l[2]||(l[2]=u=>o("minute"))},e.toDisplayString(y.value),11,w),a.labels.minute?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(r).be("label")),"aria-hidden":"",onClick:l[3]||(l[3]=u=>o("minute"))},e.toDisplayString(a.labels.minute),3)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0),a.enabled.second?(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[a.enabled.minute||a.enabled.hour?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(r).be("separator")),"aria-hidden":""},e.toDisplayString(a.separator),3)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass([e.unref(r).be("unit"),m("second")]),role:"spinbutton","aria-label":s.value.second,"aria-valuenow":n.timeValue.second,"aria-valuetext":v.value,"aria-valuemin":0,"aria-valuemax":59,"aria-labelledby":a.labeledBy,onClick:l[4]||(l[4]=u=>o("second"))},e.toDisplayString(v.value),11,N),a.labels.second?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(r).be("label")),"aria-hidden":"",onClick:l[5]||(l[5]=u=>o("second"))},e.toDisplayString(a.labels.second),3)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)],64))],34))}});module.exports=z;
//# sourceMappingURL=time-control.vue2.cjs.map