@rsalianto/git-heatmap-vue 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"GitHeatmap.vue.d.ts","sourceRoot":"","sources":["../src/GitHeatmap.vue"],"names":[],"mappings":"AAqOA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAGtG,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;;;;;;YAVS,WAAW,EAAE;cACX,MAAM;aACP,MAAM;gBACH,MAAM;eACP,OAAO;gBACN,OAAO;qBACF,OAAO;mBACT,OAAO;WAEf,MAAM;;;;;AA6UhB,wBAUG"}
1
+ {"version":3,"file":"GitHeatmap.vue.d.ts","sourceRoot":"","sources":["../src/GitHeatmap.vue"],"names":[],"mappings":"AAuPA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAMtG,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;;;;;;YAVS,WAAW,EAAE;cACX,MAAM;aACP,MAAM;gBACH,MAAM;eACP,OAAO;gBACN,OAAO;qBACF,OAAO;mBACT,OAAO;WAEf,MAAM;;;;;AAqVhB,wBAUG"}
package/dist/index.cjs CHANGED
@@ -1,8 +1,10 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),p=require("@rsalianto/git-heatmap-core");function S(t){const y=e.ref(t.data??null),a=e.ref(t.data?"success":"idle"),f=e.ref(null);async function c(){if(t.data){y.value=t.data,a.value="success";return}const g=t.fetchData??(t.apiUrl?()=>fetch(t.apiUrl).then(d=>d.json()):null);if(g){a.value="loading";try{y.value=await g(),a.value="success"}catch(d){f.value=d instanceof Error?d:new Error(String(d)),a.value="error"}}}return e.onMounted(c),e.watch(()=>t.apiUrl,c),{data:y,status:a,error:f}}const D=["aria-label"],V={key:0,style:{opacity:"0.6",padding:"1rem 0"}},N={key:0,style:{height:"16px",width:"160px",background:"var(--ghm-text)","border-radius":"4px","margin-bottom":"12px",opacity:"0.2"}},R={key:0,style:{"margin-bottom":"12px",color:"var(--ghm-text)"}},M={style:{display:"flex"}},G=["aria-label","onMouseenter","onClick"],F={key:1,style:{"margin-top":"8px","font-size":"0.9em",background:"rgba(255,255,255,0.05)",border:"1px solid rgba(255,255,255,0.1)","border-radius":"4px",padding:"6px 12px"}},T={key:2,style:{display:"flex","align-items":"center","justify-content":"flex-end","margin-top":"8px"}},H={style:{display:"flex","align-items":"center",gap:"6px","font-size":"0.9em"}},U=["title"],z=e.defineComponent({__name:"GitHeatmap",props:{data:{},apiUrl:{},fetchData:{},levels:{default:()=>p.DEFAULT_LEVELS},cellSize:{default:p.CELL},cellGap:{default:p.GAP},cellRadius:{default:2},showTotal:{type:Boolean,default:!0},showLegend:{type:Boolean,default:!0},showMonthLabels:{type:Boolean,default:!0},showDayLabels:{type:Boolean,default:!0},theme:{},label:{default:"Contribution heatmap"}},emits:["day-click"],setup(t,{emit:y}){const a=t,f=y,{data:c,status:g,error:d}=S({data:a.data,apiUrl:a.apiUrl,fetchData:a.fetchData}),h=e.ref(null),x=e.ref(null),v=e.ref(null),m=e.ref(null),b=e.computed(()=>a.cellSize+a.cellGap),u=e.computed(()=>({...p.DEFAULT_THEME,...a.theme})),L=e.computed(()=>({"--ghm-color-l0":u.value.colorL0,"--ghm-color-l1":u.value.colorL1,"--ghm-color-l2":u.value.colorL2,"--ghm-color-l3":u.value.colorL3,"--ghm-color-l4":u.value.colorL4,"--ghm-text":u.value.textColor,"--ghm-tooltip-bg":u.value.tooltipBg,"--ghm-tooltip-border":u.value.tooltipBorderColor,"--ghm-tooltip-text":u.value.tooltipTextColor,"--ghm-font":u.value.fontFamily,"--ghm-fs":u.value.fontSize})),B=e.computed(()=>a.showMonthLabels&&c.value?p.buildMonthLabels(c.value.weeks):[]);function k(l){return l.count===0?`No contributions on ${l.date}`:`${l.count} contribution${l.count>1?"s":""} on ${l.date}`}function $(l){return`var(--ghm-color-l${l})`}function w(l,n){var i;const o=l.currentTarget.getBoundingClientRect(),r=(i=x.value)==null?void 0:i.getBoundingClientRect();r&&(m.value={day:n,x:o.left-r.left+a.cellSize/2,y:o.top-r.top})}function C(l){var n;v.value=((n=v.value)==null?void 0:n.date)===l.date?null:l,f("day-click",l)}return e.watch(c,l=>{l&&h.value&&(h.value.scrollLeft=h.value.scrollWidth)}),e.onMounted(()=>{if(typeof document>"u"||document.getElementById("ghm-style"))return;const l=document.createElement("style");l.id="ghm-style",l.textContent=`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),m=require("@rsalianto/git-heatmap-core");function M(t){const g=e.ref(t.data??null),a=e.ref(t.data?"success":"idle"),p=e.ref(null);async function r(){if(t.data){g.value=t.data,a.value="success";return}const v=t.fetchData??(t.apiUrl?()=>fetch(t.apiUrl).then(u=>u.json()):null);if(v){a.value="loading";try{g.value=await v(),a.value="success"}catch(u){p.value=u instanceof Error?u:new Error(String(u)),a.value="error"}}}return e.onMounted(r),e.watch(()=>t.apiUrl,r),{data:g,status:a,error:p}}const U=["aria-label"],Y={key:0,style:{opacity:"0.6",padding:"1rem 0"}},O={key:0,style:{height:"14px",width:"160px",background:"var(--ghm-text)","border-radius":"4px","margin-bottom":"12px",opacity:"0.2"}},P=["width","height"],j=["x","y","width","height","rx"],W={key:0,style:{"margin-bottom":"12px",color:"var(--ghm-text)"}},q=["width","height","aria-label"],I=["x","y"],X=["x","y"],_=["x","y","width","height","rx","fill","aria-label","onMouseenter","onClick"],J={key:1,style:{"margin-top":"8px","font-size":"0.9em",background:"rgba(255,255,255,0.05)",border:"1px solid rgba(255,255,255,0.1)","border-radius":"4px",padding:"6px 12px"}},K={key:2,style:{display:"flex","align-items":"center","justify-content":"flex-end","margin-top":"8px"}},Q={style:{display:"flex","align-items":"center",gap:"6px","font-size":"0.9em"}},Z=["width","height"],ee=["width","height","rx","fill"],N=32,V=16,F=e.defineComponent({__name:"GitHeatmap",props:{data:{},apiUrl:{},fetchData:{},levels:{default:()=>m.DEFAULT_LEVELS},cellSize:{default:m.CELL},cellGap:{default:m.GAP},cellRadius:{default:2},showTotal:{type:Boolean,default:!0},showLegend:{type:Boolean,default:!0},showMonthLabels:{type:Boolean,default:!0},showDayLabels:{type:Boolean,default:!0},theme:{},label:{default:"Contribution heatmap"}},emits:["day-click"],setup(t,{emit:g}){const a=t,p=g,{data:r,status:v,error:u}=M({data:a.data,apiUrl:a.apiUrl,fetchData:a.fetchData}),f=e.ref(null),L=e.ref(null),y=e.ref(null),h=e.ref(null),s=e.computed(()=>a.cellSize+a.cellGap),k=e.computed(()=>a.showDayLabels?N:0),B=e.computed(()=>a.showMonthLabels?V+a.cellGap:0),w=e.computed(()=>r.value?r.value.weeks.length*s.value+k.value:53*s.value+k.value),S=e.computed(()=>7*s.value-a.cellGap+B.value),c=e.computed(()=>({...m.DEFAULT_THEME,...a.theme})),A=e.computed(()=>({"--ghm-color-l0":c.value.colorL0,"--ghm-color-l1":c.value.colorL1,"--ghm-color-l2":c.value.colorL2,"--ghm-color-l3":c.value.colorL3,"--ghm-color-l4":c.value.colorL4,"--ghm-text":c.value.textColor,"--ghm-tooltip-bg":c.value.tooltipBg,"--ghm-tooltip-border":c.value.tooltipBorderColor,"--ghm-tooltip-text":c.value.tooltipTextColor,"--ghm-font":c.value.fontFamily,"--ghm-fs":c.value.fontSize})),H=e.computed(()=>a.showMonthLabels&&r.value?m.buildMonthLabels(r.value.weeks):[]),R=e.computed(()=>Array.from({length:53},(l,n)=>n)),T=e.computed(()=>Array.from({length:7},(l,n)=>n));function x(l){return l.count===0?`No contributions on ${l.date}`:`${l.count} contribution${l.count>1?"s":""} on ${l.date}`}function C(l){return k.value+l*s.value}function z(l){return B.value+l*s.value}function $(l,n){var i;const b=l.currentTarget.getBoundingClientRect(),o=(i=L.value)==null?void 0:i.getBoundingClientRect();o&&(h.value={day:n,x:b.left-o.left+a.cellSize/2,y:b.top-o.top})}function G(l){var n;y.value=((n=y.value)==null?void 0:n.date)===l.date?null:l,p("day-click",l)}return e.watch(r,l=>{l&&f.value&&(f.value.scrollLeft=f.value.scrollWidth)}),e.onMounted(()=>{if(typeof document>"u"||document.getElementById("ghm-style"))return;const l=document.createElement("style");l.id="ghm-style",l.textContent=`
2
2
  [data-git-heatmap] {
3
3
  display: block; position: relative; width: 100%;
4
4
  font-size: var(--ghm-fs); font-family: var(--ghm-font);
5
5
  color: var(--ghm-text); user-select: none; box-sizing: border-box;
6
6
  }
7
7
  [data-git-heatmap] * { box-sizing: border-box; }
8
- `,document.head.appendChild(l)}),(l,n)=>(e.openBlock(),e.createElementBlock("div",{"data-git-heatmap":"",style:e.normalizeStyle(L.value),"aria-label":t.label,ref_key:"wrapperRef",ref:x},[e.unref(d)?(e.openBlock(),e.createElementBlock("p",V,"Could not load contribution data.")):e.unref(g)==="loading"||e.unref(g)==="idle"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[t.showTotal?(e.openBlock(),e.createElementBlock("div",N)):e.createCommentVNode("",!0),e.createElementVNode("div",{style:e.normalizeStyle({display:"flex",gap:`${t.cellGap}px`,opacity:.4})},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(53,o=>e.createElementVNode("div",{key:o,style:e.normalizeStyle({display:"flex",flexDirection:"column",gap:`${t.cellGap}px`})},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(7,r=>e.createElementVNode("div",{key:r,style:e.normalizeStyle({width:`${t.cellSize}px`,height:`${t.cellSize}px`,borderRadius:`${t.cellRadius}px`,background:"var(--ghm-color-l0)"})},null,4)),64))],4)),64))],4)],64)):e.unref(c)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[t.showTotal?(e.openBlock(),e.createElementBlock("p",R,e.toDisplayString(e.unref(c).totalContributions.toLocaleString())+" contributions in the last year ",1)):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"scrollRef",ref:h,style:{"overflow-x":"auto","overflow-y":"visible","padding-bottom":"4px"}},[e.createElementVNode("div",{style:e.normalizeStyle({display:"inline-flex",flexDirection:"column",minWidth:`${e.unref(c).weeks.length*b.value}px`})},[t.showMonthLabels?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle({display:"flex",marginBottom:`${t.cellGap}px`,marginLeft:t.showDayLabels?"32px":"0"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(B.value,(o,r)=>{var i;return e.openBlock(),e.createElementBlock("div",{key:o.label+o.col,style:e.normalizeStyle({width:`${((((i=B.value[r+1])==null?void 0:i.col)??e.unref(c).weeks.length)-o.col)*b.value}px`,whiteSpace:"nowrap",fontSize:"0.9em"})},e.toDisplayString(o.label),5)}),128))],4)):e.createCommentVNode("",!0),e.createElementVNode("div",M,[t.showDayLabels?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle({display:"flex",flexDirection:"column",gap:`${t.cellGap}px`,marginRight:"6px"})},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(7,o=>e.createElementVNode("div",{key:o,style:e.normalizeStyle({height:`${t.cellSize}px`,lineHeight:`${t.cellSize}px`,width:"26px",textAlign:"right",paddingRight:"4px",fontSize:"0.9em"})},e.toDisplayString(e.unref(p.DAY_LABELS)[o-1]??""),5)),64))],4)):e.createCommentVNode("",!0),e.createElementVNode("div",{style:e.normalizeStyle({display:"flex",gap:`${t.cellGap}px`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(c).weeks,(o,r)=>(e.openBlock(),e.createElementBlock("div",{key:r,style:e.normalizeStyle({display:"flex",flexDirection:"column",gap:`${t.cellGap}px`})},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(7,i=>{var E;return e.openBlock(),e.createElementBlock(e.Fragment,{key:i},[(E=o.days[i-1])!=null&&E.date?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle({width:`${t.cellSize}px`,height:`${t.cellSize}px`,borderRadius:`${t.cellRadius}px`,background:$(o.days[i-1].level),cursor:"pointer",transition:"opacity 0.15s"}),"aria-label":k(o.days[i-1]),role:"button",tabindex:"0",onMouseenter:s=>w(s,o.days[i-1]),onMouseleave:n[0]||(n[0]=s=>m.value=null),onMouseover:n[1]||(n[1]=s=>s.currentTarget.style.opacity="0.7"),onMouseout:n[2]||(n[2]=s=>s.currentTarget.style.opacity="1"),onClick:s=>C(o.days[i-1])},null,44,G)):(e.openBlock(),e.createElementBlock("div",{key:1,style:e.normalizeStyle({width:`${t.cellSize}px`,height:`${t.cellSize}px`})},null,4))],64)}),64))],4))),128))],4)])],4)],512),v.value?(e.openBlock(),e.createElementBlock("div",F,e.toDisplayString(k(v.value)),1)):e.createCommentVNode("",!0),t.showLegend?(e.openBlock(),e.createElementBlock("div",T,[e.createElementVNode("div",H,[n[3]||(n[3]=e.createElementVNode("span",null,"Less",-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.levels,(o,r)=>(e.openBlock(),e.createElementBlock("div",{key:r,style:e.normalizeStyle({width:`${t.cellSize}px`,height:`${t.cellSize}px`,borderRadius:`${t.cellRadius}px`,background:`var(--ghm-color-l${r})`}),title:o.label},null,12,U))),128)),n[4]||(n[4]=e.createElementVNode("span",null,"More",-1))])])):e.createCommentVNode("",!0),m.value?(e.openBlock(),e.createElementBlock("div",{key:3,style:e.normalizeStyle({pointerEvents:"none",position:"absolute",zIndex:50,left:`${m.value.x}px`,top:`${m.value.y-6}px`,transform:"translate(-50%, -100%)",background:"var(--ghm-tooltip-bg)",border:"1px solid var(--ghm-tooltip-border)",color:"var(--ghm-tooltip-text)",fontSize:"0.9em",borderRadius:"4px",padding:"3px 8px",whiteSpace:"nowrap"})},e.toDisplayString(k(m.value.day)),5)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)],12,D))}}),A={install(t){t.component("GitHeatmap",z)}};exports.GitHeatmap=z;exports.GitHeatmapPlugin=A;exports.useHeatmapData=S;
8
+ [data-git-heatmap] rect { transition: opacity 0.15s; cursor: pointer; }
9
+ [data-git-heatmap] rect:hover { opacity: 0.7; }
10
+ `,document.head.appendChild(l)}),(l,n)=>{const b=e.resolveDirective("for-inner");return e.openBlock(),e.createElementBlock("div",{"data-git-heatmap":"",style:e.normalizeStyle(A.value),"aria-label":t.label,ref_key:"wrapperRef",ref:L},[e.unref(u)?(e.openBlock(),e.createElementBlock("p",Y,"Could not load contribution data.")):e.unref(v)==="loading"||e.unref(v)==="idle"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[t.showTotal?(e.openBlock(),e.createElementBlock("div",O)):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{width:w.value,height:S.value,style:{display:"block",opacity:"0.4"}},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(R.value,o=>e.withDirectives((e.openBlock(),e.createElementBlock("rect",{key:`s-${o}-${l.dow}`,x:k.value+o*s.value,y:B.value+l.dow*s.value,width:t.cellSize,height:t.cellSize,rx:t.cellRadius,fill:"var(--ghm-color-l0)"},null,8,j)),[[b,l.dow in T.value]])),128))],8,P))],64)):e.unref(r)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[t.showTotal?(e.openBlock(),e.createElementBlock("p",W,e.toDisplayString(e.unref(r).totalContributions.toLocaleString())+" contributions in the last year ",1)):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"scrollRef",ref:f,style:{"overflow-x":"auto","overflow-y":"visible","padding-bottom":"4px"}},[(e.openBlock(),e.createElementBlock("svg",{width:w.value,height:S.value,style:{display:"block",overflow:"visible"},role:"img","aria-label":t.label},[t.showMonthLabels?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(H.value,(o,i)=>(e.openBlock(),e.createElementBlock("text",{key:o.label+o.col,x:C(o.col),y:V-4,fill:"var(--ghm-text)","font-size":"10"},e.toDisplayString(o.label),9,I))),128)):e.createCommentVNode("",!0),t.showDayLabels?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.unref(m.DAY_LABELS)[l.dow-1]?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},e.renderList(7,o=>e.createElementVNode("text",{key:o,x:N-6,y:z(o-1)+t.cellSize,fill:"var(--ghm-text)","font-size":"10","text-anchor":"end"},e.toDisplayString(e.unref(m.DAY_LABELS)[o-1]),9,X)),64)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r).weeks,(o,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:i},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(7,d=>{var D;return e.openBlock(),e.createElementBlock(e.Fragment,{key:d},[(D=o.days[d-1])!=null&&D.date?(e.openBlock(),e.createElementBlock("rect",{key:0,x:C(i),y:z(d-1),width:t.cellSize,height:t.cellSize,rx:t.cellRadius,fill:`var(--ghm-color-l${o.days[d-1].level})`,"aria-label":x(o.days[d-1]),role:"button",onMouseenter:E=>$(E,o.days[d-1]),onMouseleave:n[0]||(n[0]=E=>h.value=null),onClick:E=>G(o.days[d-1])},null,40,_)):e.createCommentVNode("",!0)],64)}),64))],64))),128))],8,q))],512),y.value?(e.openBlock(),e.createElementBlock("div",J,e.toDisplayString(x(y.value)),1)):e.createCommentVNode("",!0),t.showLegend?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",Q,[n[1]||(n[1]=e.createElementVNode("span",null,"Less",-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.levels,(o,i)=>(e.openBlock(),e.createElementBlock("svg",{key:i,width:t.cellSize,height:t.cellSize,style:{display:"block"}},[e.createElementVNode("rect",{width:t.cellSize,height:t.cellSize,rx:t.cellRadius,fill:`var(--ghm-color-l${i})`},[e.createElementVNode("title",null,e.toDisplayString(o.label),1)],8,ee)],8,Z))),128)),n[2]||(n[2]=e.createElementVNode("span",null,"More",-1))])])):e.createCommentVNode("",!0),h.value?(e.openBlock(),e.createElementBlock("div",{key:3,style:e.normalizeStyle({pointerEvents:"none",position:"absolute",zIndex:50,left:`${h.value.x}px`,top:`${h.value.y-6}px`,transform:"translate(-50%, -100%)",background:"var(--ghm-tooltip-bg)",border:"1px solid var(--ghm-tooltip-border)",color:"var(--ghm-tooltip-text)",fontSize:"0.9em",borderRadius:"4px",padding:"3px 8px",whiteSpace:"nowrap"})},e.toDisplayString(x(h.value.day)),5)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)],12,U)}}}),te={install(t){t.component("GitHeatmap",F)}};exports.GitHeatmap=F;exports.GitHeatmapPlugin=te;exports.useHeatmapData=M;
package/dist/index.mjs CHANGED
@@ -1,48 +1,48 @@
1
- import { ref as x, onMounted as M, watch as T, defineComponent as V, computed as C, openBlock as t, createElementBlock as l, normalizeStyle as i, unref as p, Fragment as h, createCommentVNode as y, createElementVNode as g, renderList as f, toDisplayString as L } from "vue";
2
- import { GAP as N, CELL as j, DEFAULT_LEVELS as I, DEFAULT_THEME as P, buildMonthLabels as W, DAY_LABELS as Y } from "@rsalianto/git-heatmap-core";
3
- function q(e) {
4
- const k = x(e.data ?? null), r = x(e.data ? "success" : "idle"), w = x(null);
5
- async function d() {
1
+ import { ref as p, onMounted as O, watch as W, defineComponent as K, computed as c, resolveDirective as Q, openBlock as l, createElementBlock as o, normalizeStyle as F, unref as v, Fragment as u, createCommentVNode as d, renderList as x, withDirectives as Z, toDisplayString as k, createElementVNode as y } from "vue";
2
+ import { GAP as _, CELL as ee, DEFAULT_LEVELS as te, DEFAULT_THEME as le, buildMonthLabels as oe, DAY_LABELS as N } from "@rsalianto/git-heatmap-core";
3
+ function ae(e) {
4
+ const w = p(e.data ?? null), n = p(e.data ? "success" : "idle"), z = p(null);
5
+ async function r() {
6
6
  if (e.data) {
7
- k.value = e.data, r.value = "success";
7
+ w.value = e.data, n.value = "success";
8
8
  return;
9
9
  }
10
- const $ = e.fetchData ?? (e.apiUrl ? () => fetch(e.apiUrl).then((m) => m.json()) : null);
11
- if ($) {
12
- r.value = "loading";
10
+ const L = e.fetchData ?? (e.apiUrl ? () => fetch(e.apiUrl).then((g) => g.json()) : null);
11
+ if (L) {
12
+ n.value = "loading";
13
13
  try {
14
- k.value = await $(), r.value = "success";
15
- } catch (m) {
16
- w.value = m instanceof Error ? m : new Error(String(m)), r.value = "error";
14
+ w.value = await L(), n.value = "success";
15
+ } catch (g) {
16
+ z.value = g instanceof Error ? g : new Error(String(g)), n.value = "error";
17
17
  }
18
18
  }
19
19
  }
20
- return M(d), T(() => e.apiUrl, d), { data: k, status: r, error: w };
20
+ return O(r), W(() => e.apiUrl, r), { data: w, status: n, error: z };
21
21
  }
22
- const J = ["aria-label"], K = {
22
+ const ne = ["aria-label"], ie = {
23
23
  key: 0,
24
24
  style: { opacity: "0.6", padding: "1rem 0" }
25
- }, O = {
25
+ }, re = {
26
26
  key: 0,
27
- style: { height: "16px", width: "160px", background: "var(--ghm-text)", "border-radius": "4px", "margin-bottom": "12px", opacity: "0.2" }
28
- }, Q = {
27
+ style: { height: "14px", width: "160px", background: "var(--ghm-text)", "border-radius": "4px", "margin-bottom": "12px", opacity: "0.2" }
28
+ }, se = ["width", "height"], ue = ["x", "y", "width", "height", "rx"], ce = {
29
29
  key: 0,
30
30
  style: { "margin-bottom": "12px", color: "var(--ghm-text)" }
31
- }, X = { style: { display: "flex" } }, Z = ["aria-label", "onMouseenter", "onClick"], _ = {
31
+ }, de = ["width", "height", "aria-label"], he = ["x", "y"], ve = ["x", "y"], ge = ["x", "y", "width", "height", "rx", "fill", "aria-label", "onMouseenter", "onClick"], fe = {
32
32
  key: 1,
33
33
  style: { "margin-top": "8px", "font-size": "0.9em", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", "border-radius": "4px", padding: "6px 12px" }
34
- }, ee = {
34
+ }, me = {
35
35
  key: 2,
36
36
  style: { display: "flex", "align-items": "center", "justify-content": "flex-end", "margin-top": "8px" }
37
- }, te = { style: { display: "flex", "align-items": "center", gap: "6px", "font-size": "0.9em" } }, le = ["title"], ae = /* @__PURE__ */ V({
37
+ }, ye = { style: { display: "flex", "align-items": "center", gap: "6px", "font-size": "0.9em" } }, pe = ["width", "height"], be = ["width", "height", "rx", "fill"], V = 32, Y = 16, xe = /* @__PURE__ */ K({
38
38
  __name: "GitHeatmap",
39
39
  props: {
40
40
  data: {},
41
41
  apiUrl: {},
42
42
  fetchData: {},
43
- levels: { default: () => I },
44
- cellSize: { default: j },
45
- cellGap: { default: N },
43
+ levels: { default: () => te },
44
+ cellSize: { default: ee },
45
+ cellGap: { default: _ },
46
46
  cellRadius: { default: 2 },
47
47
  showTotal: { type: Boolean, default: !0 },
48
48
  showLegend: { type: Boolean, default: !0 },
@@ -52,187 +52,196 @@ const J = ["aria-label"], K = {
52
52
  label: { default: "Contribution heatmap" }
53
53
  },
54
54
  emits: ["day-click"],
55
- setup(e, { emit: k }) {
56
- const r = e, w = k, { data: d, status: $, error: m } = q({
57
- data: r.data,
58
- apiUrl: r.apiUrl,
59
- fetchData: r.fetchData
60
- }), S = x(null), E = x(null), z = x(null), b = x(null), R = C(() => r.cellSize + r.cellGap), c = C(() => ({ ...P, ...r.theme })), U = C(() => ({
61
- "--ghm-color-l0": c.value.colorL0,
62
- "--ghm-color-l1": c.value.colorL1,
63
- "--ghm-color-l2": c.value.colorL2,
64
- "--ghm-color-l3": c.value.colorL3,
65
- "--ghm-color-l4": c.value.colorL4,
66
- "--ghm-text": c.value.textColor,
67
- "--ghm-tooltip-bg": c.value.tooltipBg,
68
- "--ghm-tooltip-border": c.value.tooltipBorderColor,
69
- "--ghm-tooltip-text": c.value.tooltipTextColor,
70
- "--ghm-font": c.value.fontFamily,
71
- "--ghm-fs": c.value.fontSize
72
- })), B = C(
73
- () => r.showMonthLabels && d.value ? W(d.value.weeks) : []
74
- );
75
- function D(a) {
76
- return a.count === 0 ? `No contributions on ${a.date}` : `${a.count} contribution${a.count > 1 ? "s" : ""} on ${a.date}`;
55
+ setup(e, { emit: w }) {
56
+ const n = e, z = w, { data: r, status: L, error: g } = ae({
57
+ data: n.data,
58
+ apiUrl: n.apiUrl,
59
+ fetchData: n.fetchData
60
+ }), S = p(null), $ = p(null), C = p(null), b = p(null), f = c(() => n.cellSize + n.cellGap), E = c(() => n.showDayLabels ? V : 0), B = c(() => n.showMonthLabels ? Y + n.cellGap : 0), T = c(
61
+ () => r.value ? r.value.weeks.length * f.value + E.value : 53 * f.value + E.value
62
+ ), A = c(
63
+ () => 7 * f.value - n.cellGap + B.value
64
+ ), s = c(() => ({ ...le, ...n.theme })), j = c(() => ({
65
+ "--ghm-color-l0": s.value.colorL0,
66
+ "--ghm-color-l1": s.value.colorL1,
67
+ "--ghm-color-l2": s.value.colorL2,
68
+ "--ghm-color-l3": s.value.colorL3,
69
+ "--ghm-color-l4": s.value.colorL4,
70
+ "--ghm-text": s.value.textColor,
71
+ "--ghm-tooltip-bg": s.value.tooltipBg,
72
+ "--ghm-tooltip-border": s.value.tooltipBorderColor,
73
+ "--ghm-tooltip-text": s.value.tooltipTextColor,
74
+ "--ghm-font": s.value.fontFamily,
75
+ "--ghm-fs": s.value.fontSize
76
+ })), I = c(
77
+ () => n.showMonthLabels && r.value ? oe(r.value.weeks) : []
78
+ ), P = c(() => Array.from({ length: 53 }, (t, i) => i)), X = c(() => Array.from({ length: 7 }, (t, i) => i));
79
+ function M(t) {
80
+ return t.count === 0 ? `No contributions on ${t.date}` : `${t.count} contribution${t.count > 1 ? "s" : ""} on ${t.date}`;
77
81
  }
78
- function H(a) {
79
- return `var(--ghm-color-l${a})`;
82
+ function G(t) {
83
+ return E.value + t * f.value;
80
84
  }
81
- function A(a, n) {
82
- var s;
83
- const o = a.currentTarget.getBoundingClientRect(), u = (s = E.value) == null ? void 0 : s.getBoundingClientRect();
84
- u && (b.value = { day: n, x: o.left - u.left + r.cellSize / 2, y: o.top - u.top });
85
+ function H(t) {
86
+ return B.value + t * f.value;
85
87
  }
86
- function F(a) {
87
- var n;
88
- z.value = ((n = z.value) == null ? void 0 : n.date) === a.date ? null : a, w("day-click", a);
88
+ function q(t, i) {
89
+ var h;
90
+ const D = t.currentTarget.getBoundingClientRect(), a = (h = $.value) == null ? void 0 : h.getBoundingClientRect();
91
+ a && (b.value = { day: i, x: D.left - a.left + n.cellSize / 2, y: D.top - a.top });
89
92
  }
90
- return T(d, (a) => {
91
- a && S.value && (S.value.scrollLeft = S.value.scrollWidth);
92
- }), M(() => {
93
+ function J(t) {
94
+ var i;
95
+ C.value = ((i = C.value) == null ? void 0 : i.date) === t.date ? null : t, z("day-click", t);
96
+ }
97
+ return W(r, (t) => {
98
+ t && S.value && (S.value.scrollLeft = S.value.scrollWidth);
99
+ }), O(() => {
93
100
  if (typeof document > "u" || document.getElementById("ghm-style")) return;
94
- const a = document.createElement("style");
95
- a.id = "ghm-style", a.textContent = `
101
+ const t = document.createElement("style");
102
+ t.id = "ghm-style", t.textContent = `
96
103
  [data-git-heatmap] {
97
104
  display: block; position: relative; width: 100%;
98
105
  font-size: var(--ghm-fs); font-family: var(--ghm-font);
99
106
  color: var(--ghm-text); user-select: none; box-sizing: border-box;
100
107
  }
101
108
  [data-git-heatmap] * { box-sizing: border-box; }
102
- `, document.head.appendChild(a);
103
- }), (a, n) => (t(), l("div", {
104
- "data-git-heatmap": "",
105
- style: i(U.value),
106
- "aria-label": e.label,
107
- ref_key: "wrapperRef",
108
- ref: E
109
- }, [
110
- p(m) ? (t(), l("p", K, "Could not load contribution data.")) : p($) === "loading" || p($) === "idle" ? (t(), l(h, { key: 1 }, [
111
- e.showTotal ? (t(), l("div", O)) : y("", !0),
112
- g("div", {
113
- style: i({ display: "flex", gap: `${e.cellGap}px`, opacity: 0.4 })
114
- }, [
115
- (t(), l(h, null, f(53, (o) => g("div", {
116
- key: o,
117
- style: i({ display: "flex", flexDirection: "column", gap: `${e.cellGap}px` })
109
+ [data-git-heatmap] rect { transition: opacity 0.15s; cursor: pointer; }
110
+ [data-git-heatmap] rect:hover { opacity: 0.7; }
111
+ `, document.head.appendChild(t);
112
+ }), (t, i) => {
113
+ const D = Q("for-inner");
114
+ return l(), o("div", {
115
+ "data-git-heatmap": "",
116
+ style: F(j.value),
117
+ "aria-label": e.label,
118
+ ref_key: "wrapperRef",
119
+ ref: $
120
+ }, [
121
+ v(g) ? (l(), o("p", ie, "Could not load contribution data.")) : v(L) === "loading" || v(L) === "idle" ? (l(), o(u, { key: 1 }, [
122
+ e.showTotal ? (l(), o("div", re)) : d("", !0),
123
+ (l(), o("svg", {
124
+ width: T.value,
125
+ height: A.value,
126
+ style: { display: "block", opacity: "0.4" }
118
127
  }, [
119
- (t(), l(h, null, f(7, (u) => g("div", {
120
- key: u,
121
- style: i({ width: `${e.cellSize}px`, height: `${e.cellSize}px`, borderRadius: `${e.cellRadius}px`, background: "var(--ghm-color-l0)" })
122
- }, null, 4)), 64))
123
- ], 4)), 64))
124
- ], 4)
125
- ], 64)) : p(d) ? (t(), l(h, { key: 2 }, [
126
- e.showTotal ? (t(), l("p", Q, L(p(d).totalContributions.toLocaleString()) + " contributions in the last year ", 1)) : y("", !0),
127
- g("div", {
128
- ref_key: "scrollRef",
129
- ref: S,
130
- style: { "overflow-x": "auto", "overflow-y": "visible", "padding-bottom": "4px" }
131
- }, [
132
- g("div", {
133
- style: i({ display: "inline-flex", flexDirection: "column", minWidth: `${p(d).weeks.length * R.value}px` })
128
+ (l(!0), o(u, null, x(P.value, (a) => Z((l(), o("rect", {
129
+ key: `s-${a}-${t.dow}`,
130
+ x: E.value + a * f.value,
131
+ y: B.value + t.dow * f.value,
132
+ width: e.cellSize,
133
+ height: e.cellSize,
134
+ rx: e.cellRadius,
135
+ fill: "var(--ghm-color-l0)"
136
+ }, null, 8, ue)), [
137
+ [D, t.dow in X.value]
138
+ ])), 128))
139
+ ], 8, se))
140
+ ], 64)) : v(r) ? (l(), o(u, { key: 2 }, [
141
+ e.showTotal ? (l(), o("p", ce, k(v(r).totalContributions.toLocaleString()) + " contributions in the last year ", 1)) : d("", !0),
142
+ y("div", {
143
+ ref_key: "scrollRef",
144
+ ref: S,
145
+ style: { "overflow-x": "auto", "overflow-y": "visible", "padding-bottom": "4px" }
134
146
  }, [
135
- e.showMonthLabels ? (t(), l("div", {
136
- key: 0,
137
- style: i({ display: "flex", marginBottom: `${e.cellGap}px`, marginLeft: e.showDayLabels ? "32px" : "0" })
147
+ (l(), o("svg", {
148
+ width: T.value,
149
+ height: A.value,
150
+ style: { display: "block", overflow: "visible" },
151
+ role: "img",
152
+ "aria-label": e.label
138
153
  }, [
139
- (t(!0), l(h, null, f(B.value, (o, u) => {
140
- var s;
141
- return t(), l("div", {
142
- key: o.label + o.col,
143
- style: i({ width: `${((((s = B.value[u + 1]) == null ? void 0 : s.col) ?? p(d).weeks.length) - o.col) * R.value}px`, whiteSpace: "nowrap", fontSize: "0.9em" })
144
- }, L(o.label), 5);
145
- }), 128))
146
- ], 4)) : y("", !0),
147
- g("div", X, [
148
- e.showDayLabels ? (t(), l("div", {
149
- key: 0,
150
- style: i({ display: "flex", flexDirection: "column", gap: `${e.cellGap}px`, marginRight: "6px" })
151
- }, [
152
- (t(), l(h, null, f(7, (o) => g("div", {
153
- key: o,
154
- style: i({ height: `${e.cellSize}px`, lineHeight: `${e.cellSize}px`, width: "26px", textAlign: "right", paddingRight: "4px", fontSize: "0.9em" })
155
- }, L(p(Y)[o - 1] ?? ""), 5)), 64))
156
- ], 4)) : y("", !0),
157
- g("div", {
158
- style: i({ display: "flex", gap: `${e.cellGap}px` })
154
+ e.showMonthLabels ? (l(!0), o(u, { key: 0 }, x(I.value, (a, h) => (l(), o("text", {
155
+ key: a.label + a.col,
156
+ x: G(a.col),
157
+ y: Y - 4,
158
+ fill: "var(--ghm-text)",
159
+ "font-size": "10"
160
+ }, k(a.label), 9, he))), 128)) : d("", !0),
161
+ e.showDayLabels ? (l(), o(u, { key: 1 }, [
162
+ v(N)[t.dow - 1] ? (l(), o(u, { key: 0 }, x(7, (a) => y("text", {
163
+ key: a,
164
+ x: V - 6,
165
+ y: H(a - 1) + e.cellSize,
166
+ fill: "var(--ghm-text)",
167
+ "font-size": "10",
168
+ "text-anchor": "end"
169
+ }, k(v(N)[a - 1]), 9, ve)), 64)) : d("", !0)
170
+ ], 64)) : d("", !0),
171
+ (l(!0), o(u, null, x(v(r).weeks, (a, h) => (l(), o(u, { key: h }, [
172
+ (l(), o(u, null, x(7, (m) => {
173
+ var U;
174
+ return l(), o(u, { key: m }, [
175
+ (U = a.days[m - 1]) != null && U.date ? (l(), o("rect", {
176
+ key: 0,
177
+ x: G(h),
178
+ y: H(m - 1),
179
+ width: e.cellSize,
180
+ height: e.cellSize,
181
+ rx: e.cellRadius,
182
+ fill: `var(--ghm-color-l${a.days[m - 1].level})`,
183
+ "aria-label": M(a.days[m - 1]),
184
+ role: "button",
185
+ onMouseenter: (R) => q(R, a.days[m - 1]),
186
+ onMouseleave: i[0] || (i[0] = (R) => b.value = null),
187
+ onClick: (R) => J(a.days[m - 1])
188
+ }, null, 40, ge)) : d("", !0)
189
+ ], 64);
190
+ }), 64))
191
+ ], 64))), 128))
192
+ ], 8, de))
193
+ ], 512),
194
+ C.value ? (l(), o("div", fe, k(M(C.value)), 1)) : d("", !0),
195
+ e.showLegend ? (l(), o("div", me, [
196
+ y("div", ye, [
197
+ i[1] || (i[1] = y("span", null, "Less", -1)),
198
+ (l(!0), o(u, null, x(e.levels, (a, h) => (l(), o("svg", {
199
+ key: h,
200
+ width: e.cellSize,
201
+ height: e.cellSize,
202
+ style: { display: "block" }
159
203
  }, [
160
- (t(!0), l(h, null, f(p(d).weeks, (o, u) => (t(), l("div", {
161
- key: u,
162
- style: i({ display: "flex", flexDirection: "column", gap: `${e.cellGap}px` })
204
+ y("rect", {
205
+ width: e.cellSize,
206
+ height: e.cellSize,
207
+ rx: e.cellRadius,
208
+ fill: `var(--ghm-color-l${h})`
163
209
  }, [
164
- (t(), l(h, null, f(7, (s) => {
165
- var G;
166
- return t(), l(h, { key: s }, [
167
- (G = o.days[s - 1]) != null && G.date ? (t(), l("div", {
168
- key: 0,
169
- style: i({
170
- width: `${e.cellSize}px`,
171
- height: `${e.cellSize}px`,
172
- borderRadius: `${e.cellRadius}px`,
173
- background: H(o.days[s - 1].level),
174
- cursor: "pointer",
175
- transition: "opacity 0.15s"
176
- }),
177
- "aria-label": D(o.days[s - 1]),
178
- role: "button",
179
- tabindex: "0",
180
- onMouseenter: (v) => A(v, o.days[s - 1]),
181
- onMouseleave: n[0] || (n[0] = (v) => b.value = null),
182
- onMouseover: n[1] || (n[1] = (v) => v.currentTarget.style.opacity = "0.7"),
183
- onMouseout: n[2] || (n[2] = (v) => v.currentTarget.style.opacity = "1"),
184
- onClick: (v) => F(o.days[s - 1])
185
- }, null, 44, Z)) : (t(), l("div", {
186
- key: 1,
187
- style: i({ width: `${e.cellSize}px`, height: `${e.cellSize}px` })
188
- }, null, 4))
189
- ], 64);
190
- }), 64))
191
- ], 4))), 128))
192
- ], 4)
210
+ y("title", null, k(a.label), 1)
211
+ ], 8, be)
212
+ ], 8, pe))), 128)),
213
+ i[2] || (i[2] = y("span", null, "More", -1))
193
214
  ])
194
- ], 4)
195
- ], 512),
196
- z.value ? (t(), l("div", _, L(D(z.value)), 1)) : y("", !0),
197
- e.showLegend ? (t(), l("div", ee, [
198
- g("div", te, [
199
- n[3] || (n[3] = g("span", null, "Less", -1)),
200
- (t(!0), l(h, null, f(e.levels, (o, u) => (t(), l("div", {
201
- key: u,
202
- style: i({ width: `${e.cellSize}px`, height: `${e.cellSize}px`, borderRadius: `${e.cellRadius}px`, background: `var(--ghm-color-l${u})` }),
203
- title: o.label
204
- }, null, 12, le))), 128)),
205
- n[4] || (n[4] = g("span", null, "More", -1))
206
- ])
207
- ])) : y("", !0),
208
- b.value ? (t(), l("div", {
209
- key: 3,
210
- style: i({
211
- pointerEvents: "none",
212
- position: "absolute",
213
- zIndex: 50,
214
- left: `${b.value.x}px`,
215
- top: `${b.value.y - 6}px`,
216
- transform: "translate(-50%, -100%)",
217
- background: "var(--ghm-tooltip-bg)",
218
- border: "1px solid var(--ghm-tooltip-border)",
219
- color: "var(--ghm-tooltip-text)",
220
- fontSize: "0.9em",
221
- borderRadius: "4px",
222
- padding: "3px 8px",
223
- whiteSpace: "nowrap"
224
- })
225
- }, L(D(b.value.day)), 5)) : y("", !0)
226
- ], 64)) : y("", !0)
227
- ], 12, J));
215
+ ])) : d("", !0),
216
+ b.value ? (l(), o("div", {
217
+ key: 3,
218
+ style: F({
219
+ pointerEvents: "none",
220
+ position: "absolute",
221
+ zIndex: 50,
222
+ left: `${b.value.x}px`,
223
+ top: `${b.value.y - 6}px`,
224
+ transform: "translate(-50%, -100%)",
225
+ background: "var(--ghm-tooltip-bg)",
226
+ border: "1px solid var(--ghm-tooltip-border)",
227
+ color: "var(--ghm-tooltip-text)",
228
+ fontSize: "0.9em",
229
+ borderRadius: "4px",
230
+ padding: "3px 8px",
231
+ whiteSpace: "nowrap"
232
+ })
233
+ }, k(M(b.value.day)), 5)) : d("", !0)
234
+ ], 64)) : d("", !0)
235
+ ], 12, ne);
236
+ };
228
237
  }
229
- }), ie = {
238
+ }), Le = {
230
239
  install(e) {
231
- e.component("GitHeatmap", ae);
240
+ e.component("GitHeatmap", xe);
232
241
  }
233
242
  };
234
243
  export {
235
- ae as GitHeatmap,
236
- ie as GitHeatmapPlugin,
237
- q as useHeatmapData
244
+ xe as GitHeatmap,
245
+ Le as GitHeatmapPlugin,
246
+ ae as useHeatmapData
238
247
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rsalianto/git-heatmap-vue",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Vue 3 component for git contribution heatmap",
5
5
  "license": "MIT",
6
6
  "main": "./dist/index.cjs",