@rsalianto/git-heatmap-vue 0.1.0

package/dist/GitHeatmap.vue.d.ts

@@ -0,0 +1,36 @@
+import { HeatmapData, HeatmapDay, HeatmapTheme, LevelConfig } from '@rsalianto/git-heatmap-core';
+type __VLS_Props = {
+    data?: HeatmapData;
+    apiUrl?: string;
+    fetchData?: () => Promise<HeatmapData>;
+    levels?: LevelConfig[];
+    cellSize?: number;
+    cellGap?: number;
+    cellRadius?: number;
+    showTotal?: boolean;
+    showLegend?: boolean;
+    showMonthLabels?: boolean;
+    showDayLabels?: boolean;
+    theme?: Partial<HeatmapTheme>;
+    label?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "day-click": (day: HeatmapDay) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onDay-click"?: ((day: HeatmapDay) => any) | undefined;
+}>, {
+    levels: LevelConfig[];
+    cellSize: number;
+    cellGap: number;
+    cellRadius: number;
+    showTotal: boolean;
+    showLegend: boolean;
+    showMonthLabels: boolean;
+    showDayLabels: boolean;
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    wrapperRef: HTMLDivElement;
+    scrollRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=GitHeatmap.vue.d.ts.map

package/dist/GitHeatmap.vue.d.ts.map

@@ -0,0 +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"}

package/dist/index.cjs

@@ -0,0 +1,8 @@
+"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=`
+    [data-git-heatmap] {
+      display: block; position: relative; width: 100%;
+      font-size: var(--ghm-fs); font-family: var(--ghm-font);
+      color: var(--ghm-text); user-select: none; box-sizing: border-box;
+    }
+    [data-git-heatmap] * { box-sizing: border-box; }
+  `,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;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+import { default as GitHeatmapVue } from './GitHeatmap.vue';
+export { GitHeatmapVue as GitHeatmap };
+export { useHeatmapData } from './useHeatmapData';
+export type { HeatmapStatus } from './useHeatmapData';
+export declare const GitHeatmapPlugin: {
+    install(app: App): void;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,IAAI,UAAU,EAAE,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,gBAAgB;iBACd,GAAG;CAGjB,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,238 @@
+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";
+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";
+function q(e) {
+  const k = x(e.data ?? null), r = x(e.data ? "success" : "idle"), w = x(null);
+  async function d() {
+    if (e.data) {
+      k.value = e.data, r.value = "success";
+      return;
+    }
+    const $ = e.fetchData ?? (e.apiUrl ? () => fetch(e.apiUrl).then((m) => m.json()) : null);
+    if ($) {
+      r.value = "loading";
+      try {
+        k.value = await $(), r.value = "success";
+      } catch (m) {
+        w.value = m instanceof Error ? m : new Error(String(m)), r.value = "error";
+      }
+    }
+  }
+  return M(d), T(() => e.apiUrl, d), { data: k, status: r, error: w };
+}
+const J = ["aria-label"], K = {
+  key: 0,
+  style: { opacity: "0.6", padding: "1rem 0" }
+}, O = {
+  key: 0,
+  style: { height: "16px", width: "160px", background: "var(--ghm-text)", "border-radius": "4px", "margin-bottom": "12px", opacity: "0.2" }
+}, Q = {
+  key: 0,
+  style: { "margin-bottom": "12px", color: "var(--ghm-text)" }
+}, X = { style: { display: "flex" } }, Z = ["aria-label", "onMouseenter", "onClick"], _ = {
+  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" }
+}, ee = {
+  key: 2,
+  style: { display: "flex", "align-items": "center", "justify-content": "flex-end", "margin-top": "8px" }
+}, te = { style: { display: "flex", "align-items": "center", gap: "6px", "font-size": "0.9em" } }, le = ["title"], ae = /* @__PURE__ */ V({
+  __name: "GitHeatmap",
+  props: {
+    data: {},
+    apiUrl: {},
+    fetchData: {},
+    levels: { default: () => I },
+    cellSize: { default: j },
+    cellGap: { default: N },
+    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(e, { emit: k }) {
+    const r = e, w = k, { data: d, status: $, error: m } = q({
+      data: r.data,
+      apiUrl: r.apiUrl,
+      fetchData: r.fetchData
+    }), 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(() => ({
+      "--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
+    })), B = C(
+      () => r.showMonthLabels && d.value ? W(d.value.weeks) : []
+    );
+    function D(a) {
+      return a.count === 0 ? `No contributions on ${a.date}` : `${a.count} contribution${a.count > 1 ? "s" : ""} on ${a.date}`;
+    }
+    function H(a) {
+      return `var(--ghm-color-l${a})`;
+    }
+    function A(a, n) {
+      var s;
+      const o = a.currentTarget.getBoundingClientRect(), u = (s = E.value) == null ? void 0 : s.getBoundingClientRect();
+      u && (b.value = { day: n, x: o.left - u.left + r.cellSize / 2, y: o.top - u.top });
+    }
+    function F(a) {
+      var n;
+      z.value = ((n = z.value) == null ? void 0 : n.date) === a.date ? null : a, w("day-click", a);
+    }
+    return T(d, (a) => {
+      a && S.value && (S.value.scrollLeft = S.value.scrollWidth);
+    }), M(() => {
+      if (typeof document > "u" || document.getElementById("ghm-style")) return;
+      const a = document.createElement("style");
+      a.id = "ghm-style", a.textContent = `
+    [data-git-heatmap] {
+      display: block; position: relative; width: 100%;
+      font-size: var(--ghm-fs); font-family: var(--ghm-font);
+      color: var(--ghm-text); user-select: none; box-sizing: border-box;
+    }
+    [data-git-heatmap] * { box-sizing: border-box; }
+  `, document.head.appendChild(a);
+    }), (a, n) => (t(), l("div", {
+      "data-git-heatmap": "",
+      style: i(U.value),
+      "aria-label": e.label,
+      ref_key: "wrapperRef",
+      ref: E
+    }, [
+      p(m) ? (t(), l("p", K, "Could not load contribution data.")) : p($) === "loading" || p($) === "idle" ? (t(), l(h, { key: 1 }, [
+        e.showTotal ? (t(), l("div", O)) : y("", !0),
+        g("div", {
+          style: i({ display: "flex", gap: `${e.cellGap}px`, opacity: 0.4 })
+        }, [
+          (t(), l(h, null, f(53, (o) => g("div", {
+            key: o,
+            style: i({ display: "flex", flexDirection: "column", gap: `${e.cellGap}px` })
+          }, [
+            (t(), l(h, null, f(7, (u) => g("div", {
+              key: u,
+              style: i({ width: `${e.cellSize}px`, height: `${e.cellSize}px`, borderRadius: `${e.cellRadius}px`, background: "var(--ghm-color-l0)" })
+            }, null, 4)), 64))
+          ], 4)), 64))
+        ], 4)
+      ], 64)) : p(d) ? (t(), l(h, { key: 2 }, [
+        e.showTotal ? (t(), l("p", Q, L(p(d).totalContributions.toLocaleString()) + " contributions in the last year ", 1)) : y("", !0),
+        g("div", {
+          ref_key: "scrollRef",
+          ref: S,
+          style: { "overflow-x": "auto", "overflow-y": "visible", "padding-bottom": "4px" }
+        }, [
+          g("div", {
+            style: i({ display: "inline-flex", flexDirection: "column", minWidth: `${p(d).weeks.length * R.value}px` })
+          }, [
+            e.showMonthLabels ? (t(), l("div", {
+              key: 0,
+              style: i({ display: "flex", marginBottom: `${e.cellGap}px`, marginLeft: e.showDayLabels ? "32px" : "0" })
+            }, [
+              (t(!0), l(h, null, f(B.value, (o, u) => {
+                var s;
+                return t(), l("div", {
+                  key: o.label + o.col,
+                  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" })
+                }, L(o.label), 5);
+              }), 128))
+            ], 4)) : y("", !0),
+            g("div", X, [
+              e.showDayLabels ? (t(), l("div", {
+                key: 0,
+                style: i({ display: "flex", flexDirection: "column", gap: `${e.cellGap}px`, marginRight: "6px" })
+              }, [
+                (t(), l(h, null, f(7, (o) => g("div", {
+                  key: o,
+                  style: i({ height: `${e.cellSize}px`, lineHeight: `${e.cellSize}px`, width: "26px", textAlign: "right", paddingRight: "4px", fontSize: "0.9em" })
+                }, L(p(Y)[o - 1] ?? ""), 5)), 64))
+              ], 4)) : y("", !0),
+              g("div", {
+                style: i({ display: "flex", gap: `${e.cellGap}px` })
+              }, [
+                (t(!0), l(h, null, f(p(d).weeks, (o, u) => (t(), l("div", {
+                  key: u,
+                  style: i({ display: "flex", flexDirection: "column", gap: `${e.cellGap}px` })
+                }, [
+                  (t(), l(h, null, f(7, (s) => {
+                    var G;
+                    return t(), l(h, { key: s }, [
+                      (G = o.days[s - 1]) != null && G.date ? (t(), l("div", {
+                        key: 0,
+                        style: i({
+                          width: `${e.cellSize}px`,
+                          height: `${e.cellSize}px`,
+                          borderRadius: `${e.cellRadius}px`,
+                          background: H(o.days[s - 1].level),
+                          cursor: "pointer",
+                          transition: "opacity 0.15s"
+                        }),
+                        "aria-label": D(o.days[s - 1]),
+                        role: "button",
+                        tabindex: "0",
+                        onMouseenter: (v) => A(v, o.days[s - 1]),
+                        onMouseleave: n[0] || (n[0] = (v) => b.value = null),
+                        onMouseover: n[1] || (n[1] = (v) => v.currentTarget.style.opacity = "0.7"),
+                        onMouseout: n[2] || (n[2] = (v) => v.currentTarget.style.opacity = "1"),
+                        onClick: (v) => F(o.days[s - 1])
+                      }, null, 44, Z)) : (t(), l("div", {
+                        key: 1,
+                        style: i({ width: `${e.cellSize}px`, height: `${e.cellSize}px` })
+                      }, null, 4))
+                    ], 64);
+                  }), 64))
+                ], 4))), 128))
+              ], 4)
+            ])
+          ], 4)
+        ], 512),
+        z.value ? (t(), l("div", _, L(D(z.value)), 1)) : y("", !0),
+        e.showLegend ? (t(), l("div", ee, [
+          g("div", te, [
+            n[3] || (n[3] = g("span", null, "Less", -1)),
+            (t(!0), l(h, null, f(e.levels, (o, u) => (t(), l("div", {
+              key: u,
+              style: i({ width: `${e.cellSize}px`, height: `${e.cellSize}px`, borderRadius: `${e.cellRadius}px`, background: `var(--ghm-color-l${u})` }),
+              title: o.label
+            }, null, 12, le))), 128)),
+            n[4] || (n[4] = g("span", null, "More", -1))
+          ])
+        ])) : y("", !0),
+        b.value ? (t(), l("div", {
+          key: 3,
+          style: i({
+            pointerEvents: "none",
+            position: "absolute",
+            zIndex: 50,
+            left: `${b.value.x}px`,
+            top: `${b.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"
+          })
+        }, L(D(b.value.day)), 5)) : y("", !0)
+      ], 64)) : y("", !0)
+    ], 12, J));
+  }
+}), ie = {
+  install(e) {
+    e.component("GitHeatmap", ae);
+  }
+};
+export {
+  ae as GitHeatmap,
+  ie as GitHeatmapPlugin,
+  q as useHeatmapData
+};

package/dist/useHeatmapData.d.ts

@@ -0,0 +1,32 @@
+import { HeatmapData } from '@rsalianto/git-heatmap-core';
+export type HeatmapStatus = "idle" | "loading" | "success" | "error";
+export declare function useHeatmapData(options: {
+    data?: HeatmapData;
+    apiUrl?: string;
+    fetchData?: () => Promise<HeatmapData>;
+}): {
+    data: import('vue').Ref<{
+        totalContributions: number;
+        weeks: {
+            days: {
+                date: string;
+                count: number;
+                level: 0 | 1 | 2 | 3 | 4;
+            }[];
+        }[];
+        source: "github" | "gitlab" | "manual";
+    } | null, HeatmapData | {
+        totalContributions: number;
+        weeks: {
+            days: {
+                date: string;
+                count: number;
+                level: 0 | 1 | 2 | 3 | 4;
+            }[];
+        }[];
+        source: "github" | "gitlab" | "manual";
+    } | null>;
+    status: import('vue').Ref<HeatmapStatus, HeatmapStatus>;
+    error: import('vue').Ref<Error | null, Error | null>;
+};
+//# sourceMappingURL=useHeatmapData.d.ts.map

package/dist/useHeatmapData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeatmapData.d.ts","sourceRoot":"","sources":["../src/useHeatmapData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE/D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAErE,wBAAgB,cAAc,CAAC,OAAO,EAAE;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;CACxC;;;;;;;;;;;;;;;;;;;;;;;;EA6BA"}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@rsalianto/git-heatmap-vue",
+  "version": "0.1.0",
+  "description": "Vue 3 component for git contribution heatmap",
+  "license": "MIT",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": ["dist", "README.md"],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@rsalianto/git-heatmap-core": "*"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "devDependencies": {
+    "typescript": "*",
+    "vitest": "*",
+    "vue": "^3.5.0",
+    "vite": "^6.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite-plugin-dts": "^4.0.0"
+  }
+}