simple-piano-keyboard/dist/simple-piano-keyboard.umd.js

Can display simple piano keyboard. (Note: No include sound)

(function(e,m){typeof exports=="object"&&typeof module<"u"?module.exports=m(require("vue")):typeof define=="function"&&define.amd?define(["vue"],m):(e=typeof globalThis<"u"?globalThis:e||self,e.SimplePianoKeyboard=m(e.Vue))})(this,function(e){"use strict";const m="",C=(l,s)=>{const a=l.__vccOpts||l;for(const[o,r]of s)a[o]=r;return a},h={C:3,"C#":1.7,D:1.3,"D#":2.3,E:.7,F:3,"F#":1.35,G:1.65,"G#":1.9,A:1.1,"A#":2.45,B:.55},f={whiteKey:"#FFFFFF",blackKey:"#222222",selectedWhiteKey:"#B2EBF2",selectedBlackKey:"#B2EBF2",keyBorder:"#212121",frameBorder:"#e0e0e0",noteName:"#212121"},k={keyBorder:1,frameBorder:2},v={type:"none",target:"A"},E={name:"SimplePianoKeyboard",props:{modelValue:{default:[]},lowestNote:{default:"A0"},highestNote:{default:"C8"},keyHeightSize:{default:10},keyWidthSize:{default:10},padding:{default:8},width:{default:380},color:{default:f},thickness:{default:k},noteNameDisplay:{default:v},noteOutputType:{default:"intl"},isReadOnly:{default:!1}},emits:["update:modelValue"],setup(l,{emit:s}){const{modelValue:a,lowestNote:o,highestNote:r,keyHeightSize:N,keyWidthSize:c,padding:$,width:V,color:O,thickness:z,noteNameDisplay:F,noteOutputType:I,isReadOnly:G}=e.toRefs(l);e.watch(a,(t,i)=>{(t.length!==i.length||t.some((n,B)=>n!==i[B]))&&(p.value=S())});const d=e.computed(()=>o.value||o.value===0?isNaN(o.value)?g(o.value):o.value:33),q=e.computed(()=>{let t=108;return(r.value||r.value===0)&&(t=isNaN(r.value)?g(r.value):r.value),t<d.value&&(t=d.value),t}),u=e.computed(()=>({height:12*N.value,width:3*c.value})),L=e.computed(()=>({height:u.value.height*.65,width:u.value.width*.7})),M=e.computed(()=>u.value.height*.76),y=e.computed(()=>typeof O.value=="object"?Object.assign(f,O.value):f),b=e.computed(()=>typeof z.value=="object"?Object.assign(k,z.value):k),J=e.computed(()=>typeof F.value=="object"?Object.assign(v,F.value):v),W=e.computed(()=>a.value&&a.value.length>0?a.value.map(t=>isNaN(t)?g(t):t):[]),S=()=>{const t=[];let i=0;t.push({left:i,isBlackKey:x(d.value),selected:!!W.value.includes(d.value),num:d.value,intl:K(d.value)});for(let n=d.value+1;n<q.value+1;n++)i+=c.value*h[w(n)],t.push({left:i,isBlackKey:x(n),selected:!!W.value.includes(n),num:n,intl:K(n),char:w(n)});return t},p=e.ref(S());e.watch(p,t=>{s("update:modelValue",t.filter(i=>i.selected).map(i=>I.value==="intl"?i.intl:i.num))},{deep:!0}),e.watch([o,r],()=>{p.value=S()});const Q=e.computed(()=>p.value.filter(t=>!t.isBlackKey).length),U=t=>{const{type:i,target:n}=J.value;return i==="none"?"":t.char===n||n==="all"?i==="intl"?t.intl:t.num:""},X=t=>{G.value||(t.selected=!t.selected)},Y=t=>{const{left:i,isBlackKey:n,selected:B}=t,{blackKey:ee,whiteKey:te,keyBorder:le}=y.value,T=n?L.value:u.value,oe=n?ee:te,ne=n?y.value.selectedBlackKey:y.value.selectedWhiteKey,j=b.value.keyBorder;return`height: ${T.height}px; width: ${T.width}px; left: ${i}px; border: solid ${j}px ${le}; border-radius: ${j*3}px; background-color: ${B?ne:oe}; z-index: ${n?2:1}`},Z=e.computed(()=>{const t=b.value.keyBorder;return`height: ${u.value.height+t*2}px; width: ${u.value.width*Q.value+t*2}px; border-radius: ${t*3}px; border: solid ${t}px ${y.value.keyBorder}`}),A=e.computed(()=>{const{frameBorder:t}=b.value;return`width: ${V.value-t}px; padding: ${$.value}px; border: solid ${t}px ${y.value.frameBorder}; font-size: ${N.value*1.4}px; color: ${y.value.noteName};`});return{spacerHeight:M,keys:p,getNoteName:U,changeSelectionOfKey:X,keyStyle:Y,keysWrapperStyle:Z,keyboardWrapperStyle:A}}};function K(l){const{char:s,num:a}=_(l);return s+a}function _(l){const s=Math.floor(l/12),a=l%12,o=a<9?s-1:s;return{char:Object.keys(h)[a],num:o}}function g(l){const s=l.includes("#")?l.slice(0,2):l.slice(0,1),a=l.includes("#")?Number(l.slice(2)):Number(l.slice(1)),o=Object.keys(h).indexOf(s);return(o<9?a+1:a)*12+o}function x(l){const s=l%12;return[1,3,6,8,10].some(o=>o===s)}function w(l){const{char:s}=_(l);return s}const D=["onClick"],H={class:"note-name"};function R(l,s,a,o,r,N){return e.openBlock(),e.createElementBlock("div",{class:"keyboard-wrapper",style:e.normalizeStyle(o.keyboardWrapperStyle)},[e.createElementVNode("div",{class:"keys-wrapper",style:e.normalizeStyle(o.keysWrapperStyle)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.keys,c=>(e.openBlock(),e.createElementBlock("div",{key:c.num,style:e.normalizeStyle(o.keyStyle(c)),onClick:$=>o.changeSelectionOfKey(c),class:"one-key"},[e.createElementVNode("div",{style:e.normalizeStyle(`height: ${o.spacerHeight}px`)},null,4),e.createElementVNode("div",H,e.toDisplayString(o.getNoteName(c)),1)],12,D))),128))],4)],4)}const P=C(E,[["render",R],["__scopeId","data-v-dc080436"]]);return{install:(l,s)=>{l.component("SimplePianoKeyboard",P)}}});