@script-development/heatmap - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/heatmap.es.js

@@ -1,2 +0,2 @@
-import { openBlock, createElementBlock, createElementVNode, defineComponent, computed, normalizeStyle, unref, normalizeClass, toDisplayString, createCommentVNode, Fragment, renderList, ref, createVNode, createBlock } from "vue";
+import { openBlock, createElementBlock, createElementVNode, defineComponent, computed, normalizeStyle, unref, normalizeClass, toDisplayString, createCommentVNode, ref, onMounted, onUnmounted, Fragment, renderList, createVNode, createBlock } from "vue";
 import dayjs from "dayjs";
@@ -44,3 +44,3 @@ var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var weekOfYear = weekOfYear$1.exports;
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   preserveAspectRatio: "xMidYMid meet",
@@ -51,3 +51,3 @@ viewBox: "0 0 24 24",
 };
-const _hoisted_2$2 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("path", {
   fill: "none",
@@ -61,9 +61,9 @@ stroke: "currentColor",
 const _hoisted_3$1 = [
-  _hoisted_2$2
+  _hoisted_2$3
 ];
 function render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$1);
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_3$1);
 }
 var ArrowLeft = { name: "tabler-arrow-left", render: render$1 };
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   preserveAspectRatio: "xMidYMid meet",
@@ -74,3 +74,3 @@ viewBox: "0 0 24 24",
 };
-const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_2$2 = /* @__PURE__ */ createElementVNode("path", {
   fill: "none",
@@ -84,6 +84,6 @@ stroke: "currentColor",
 const _hoisted_3 = [
-  _hoisted_2$1
+  _hoisted_2$2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_3);
+  return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3);
 }
@@ -129,3 +129,3 @@ var ArrowRight = { name: "tabler-arrow-right", render };
 };
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   key: 0,
@@ -180,3 +180,3 @@ class: "heatmap-tooltip group-hover:block group-hover:opacity-100 group-hover:z-10"
         }, toDisplayString(unref(dayjs)(__props.day.date).format("D")), 3),
-        __props.value > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$1, toDisplayString(__props.value), 1)) : createCommentVNode("", true)
+        __props.value > 0 && __props.day.currentMonth ? (openBlock(), createElementBlock("div", _hoisted_1$2, toDisplayString(__props.value), 1)) : createCommentVNode("", true)
       ], 6);
@@ -186,2 +186,16 @@ };
 });
+const mobileMax = 640;
+const smallScreenMax = 768;
+function useBreakpoints() {
+  const windowWidth = ref(window.innerWidth);
+  const onWidthChange = () => windowWidth.value = window.innerWidth;
+  onMounted(() => window.addEventListener("resize", onWidthChange));
+  onUnmounted(() => window.removeEventListener("resize", onWidthChange));
+  const isMobile = computed(() => windowWidth.value < mobileMax);
+  const isSmallScreen = computed(() => windowWidth.value < smallScreenMax);
+  const width = computed(() => windowWidth.value);
+  return { width, isSmallScreen, isMobile };
+}
+const _hoisted_1$1 = { key: 0 };
+const _hoisted_2$1 = { key: 1 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -195,19 +209,19 @@ props: {
   setup(__props) {
+    const { isSmallScreen } = useBreakpoints();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("ol", null, [
+      return unref(isSmallScreen) ? (openBlock(), createElementBlock("ol", _hoisted_1$1, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(weekDays)[__props.locale], (day) => {
           return openBlock(), createElementBlock("li", {
             key: day,
-            class: "heatmap-week-day",
-            display: "sm:hidden"
+            class: "heatmap-week-day"
           }, toDisplayString(day), 1);
-        }), 128)),
+        }), 128))
+      ])) : (openBlock(), createElementBlock("ol", _hoisted_2$1, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(weekDaysFull)[__props.locale], (day) => {
           return openBlock(), createElementBlock("li", {
             key: day,
-            class: "heatmap-week-day",
-            display: "hidden sm:block"
+            class: "heatmap-week-day"
           }, toDisplayString(day), 1);
         }), 128))
-      ]);
+      ]));
     };
@@ -214,0 +228,0 @@ }

dist/heatmap.umd.js

@@ -1,1 +0,1 @@
-(function(e,h){typeof exports=="object"&&typeof module!="undefined"?module.exports=h(require("vue"),require("dayjs")):typeof define=="function"&&define.amd?define(["vue","dayjs"],h):(e=typeof globalThis!="undefined"?globalThis:e||self,e["@script-development/components"]=h(e.Vue,e.Dayjs))})(this,function(e,h){"use strict";function w(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var a=w(h),g=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},$={exports:{}};(function(t,o){(function(l,n){t.exports=n()})(g,function(){return function(l,n){n.prototype.weekday=function(d){var m=this.$locale().weekStart||0,c=this.$W,s=(c<m?c+7:c)-m;return this.$utils().u(d)?s:this.subtract(s,"day").add(d,"day")}}})})($);var x=$.exports,B={exports:{}};(function(t,o){(function(l,n){t.exports=n()})(g,function(){var l="week",n="year";return function(d,m,c){var s=m.prototype;s.week=function(i){if(i===void 0&&(i=null),i!==null)return this.add(7*(i-this.week()),"day");var p=this.$locale().yearStart||1;if(this.month()===11&&this.date()>25){var y=c(this).startOf(n).add(1,n).date(p),M=c(this).endOf(l);if(y.isBefore(M))return 1}var b=c(this).startOf(n).date(p).startOf(l).subtract(1,"millisecond"),r=this.diff(b,l,!0);return r<0?c(this).startOf("week").week():Math.ceil(r)},s.weeks=function(i){return i===void 0&&(i=null),this.week(i)}}})})(B);var S=B.exports;const Y={preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},_=[e.createElementVNode("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 12h14M5 12l6 6m-6-6l6-6"},null,-1)];function N(t,o){return e.openBlock(),e.createElementBlock("svg",Y,_)}var E={name:"tabler-arrow-left",render:N};const O={preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},C=[e.createElementVNode("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 12h14m-6 6l6-6m-6-6l6 6"},null,-1)];function A(t,o){return e.openBlock(),e.createElementBlock("svg",O,C)}var V={name:"tabler-arrow-right",render:A};const j={"nl-NL":["Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December"],"en-US":["January","February","March","April","May","June","July","August","September","October","November","December"]},F={"nl-NL":["Ma","Di","Wo","Do","Vr","Za","Zo"],"en-US":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]},T={"nl-NL":["M","T","W","T","F","S","S"],"en-US":["M","T","W","T","F","S","S"]},L={key:0,class:"heatmap-tooltip group-hover:block group-hover:opacity-100 group-hover:z-10"},q=e.defineComponent({props:{day:{type:Object,required:!0},value:{type:Number,required:!1,default:()=>0},max:{type:Number,required:!0},today:{type:Boolean,required:!0},color:{type:String,required:!0}},setup(t){const o=t,l=e.computed(()=>o.day.currentMonth?`rgba(${o.color}, ${Math.round(o.value/o.max*100)}%)`:"#E5E7EB"),n=e.computed(()=>o.day.currentMonth?Math.round(o.value/o.max*100)>50:!1);return(d,m)=>(e.openBlock(),e.createElementBlock("li",{style:e.normalizeStyle({"background-color":e.unref(l)}),class:e.normalizeClass([{"!text-white":e.unref(n)},"heatmap-day group relative"])},[e.createElementVNode("div",{class:e.normalizeClass({today:t.today})},e.toDisplayString(e.unref(a.default)(t.day.date).format("D")),3),t.value>0?(e.openBlock(),e.createElementBlock("div",L,e.toDisplayString(t.value),1)):e.createCommentVNode("",!0)],6))}}),J=e.defineComponent({props:{locale:{type:String,default:"en-US"}},setup(t){return(o,l)=>(e.openBlock(),e.createElementBlock("ol",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(T)[t.locale],n=>(e.openBlock(),e.createElementBlock("li",{key:n,class:"heatmap-week-day",display:"sm:hidden"},e.toDisplayString(n),1))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(F)[t.locale],n=>(e.openBlock(),e.createElementBlock("li",{key:n,class:"heatmap-week-day",display:"hidden sm:block"},e.toDisplayString(n),1))),128))]))}}),W={class:"heatmap-container"},U={key:0,class:"heatmap-pagination"},z=e.defineComponent({props:{values:{type:Object,required:!0},locale:{type:String,default:"en-US"},color:{type:String,default:"153, 27, 27"},enablePagination:{type:Boolean,default:!0}},setup(t){a.default.extend(x),a.default.extend(S);const o=e.ref(a.default()),l=a.default().format("YYYY-MM-DD"),n=e.computed(()=>Number(o.value.format("M"))),d=e.computed(()=>Number(o.value.format("YYYY"))),m=e.computed(()=>a.default(o.value).daysInMonth()),c=e.computed(()=>{const r=y(s.value[0].date),u=a.default(`${d.value}-${n.value}-01`).subtract(1,"month"),f=r?r-1:6,k=a.default(s.value[0].date).subtract(f,"day").date();return[...Array(f)].map((D,P)=>({date:a.default(`${u.year()}-${u.month()+1}-${k+P}`).format("YYYY-MM-DD"),currentMonth:!1}))}),s=e.computed(()=>[...Array(m.value)].map((r,u)=>({date:a.default(`${d.value}-${n.value}-${u+1}`).format("YYYY-MM-DD"),currentMonth:!0}))),i=e.computed(()=>{const r=y(`${d.value}-${n.value}-${s.value.length}`),u=a.default(`${d.value}-${n.value}-01`).add(1,"month"),f=r&&7-r;return[...Array(f)].map((k,D)=>({date:a.default(`${u.year()}-${u.month()+1}-${D+1}`).format("YYYY-MM-DD"),currentMonth:!1}))}),p=e.computed(()=>[...c.value,...s.value,...i.value]),y=r=>a.default(r).weekday(),M=()=>{o.value=a.default(o.value).subtract(1,"month")},b=()=>{o.value=a.default(o.value).add(1,"month")};return(r,u)=>(e.openBlock(),e.createElementBlock("div",W,[e.createVNode(J,{locale:t.locale},null,8,["locale"]),e.createElementVNode("ol",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p),(f,k)=>(e.openBlock(),e.createBlock(q,{key:k,day:f,value:t.values[String(f.date).split("T")[0]]||0,max:t.values.max,today:e.unref(l)===f.date,color:t.color},null,8,["day","value","max","today","color"]))),128))]),t.enablePagination?(e.openBlock(),e.createElementBlock("div",U,[e.createVNode(E,{class:"icon",onClick:M}),e.createElementVNode("h5",null,e.toDisplayString(e.unref(j)[t.locale][e.unref(a.default)(o.value).month()])+" "+e.toDisplayString(e.unref(a.default)(o.value).year()),1),o.value.isAfter(e.unref(l))?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(V,{key:0,class:"icon",onClick:b}))])):e.createCommentVNode("",!0)]))}});var I="";return z});
+(function(e,h){typeof exports=="object"&&typeof module!="undefined"?module.exports=h(require("vue"),require("dayjs")):typeof define=="function"&&define.amd?define(["vue","dayjs"],h):(e=typeof globalThis!="undefined"?globalThis:e||self,e["@script-development/components"]=h(e.Vue,e.Dayjs))})(this,function(e,h){"use strict";function x(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var r=x(h),b=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},g={exports:{}};(function(t,n){(function(l,o){t.exports=o()})(b,function(){return function(l,o){o.prototype.weekday=function(a){var m=this.$locale().weekStart||0,i=this.$W,s=(i<m?i+7:i)-m;return this.$utils().u(a)?s:this.subtract(s,"day").add(a,"day")}}})})(g);var D=g.exports,B={exports:{}};(function(t,n){(function(l,o){t.exports=o()})(b,function(){var l="week",o="year";return function(a,m,i){var s=m.prototype;s.week=function(d){if(d===void 0&&(d=null),d!==null)return this.add(7*(d-this.week()),"day");var p=this.$locale().yearStart||1;if(this.month()===11&&this.date()>25){var y=i(this).startOf(o).add(1,o).date(p),M=i(this).endOf(l);if(y.isBefore(M))return 1}var w=i(this).startOf(o).date(p).startOf(l).subtract(1,"millisecond"),c=this.diff(w,l,!0);return c<0?i(this).startOf("week").week():Math.ceil(c)},s.weeks=function(d){return d===void 0&&(d=null),this.week(d)}}})})(B);var S=B.exports;const _={preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},Y=[e.createElementVNode("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 12h14M5 12l6 6m-6-6l6-6"},null,-1)];function E(t,n){return e.openBlock(),e.createElementBlock("svg",_,Y)}var N={name:"tabler-arrow-left",render:E};const O={preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em"},C=[e.createElementVNode("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 12h14m-6 6l6-6m-6-6l6 6"},null,-1)];function A(t,n){return e.openBlock(),e.createElementBlock("svg",O,C)}var V={name:"tabler-arrow-right",render:A};const j={"nl-NL":["Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December"],"en-US":["January","February","March","April","May","June","July","August","September","October","November","December"]},F={"nl-NL":["Ma","Di","Wo","Do","Vr","Za","Zo"],"en-US":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]},L={"nl-NL":["M","T","W","T","F","S","S"],"en-US":["M","T","W","T","F","S","S"]},T={key:0,class:"heatmap-tooltip group-hover:block group-hover:opacity-100 group-hover:z-10"},W=e.defineComponent({props:{day:{type:Object,required:!0},value:{type:Number,required:!1,default:()=>0},max:{type:Number,required:!0},today:{type:Boolean,required:!0},color:{type:String,required:!0}},setup(t){const n=t,l=e.computed(()=>n.day.currentMonth?`rgba(${n.color}, ${Math.round(n.value/n.max*100)}%)`:"#E5E7EB"),o=e.computed(()=>n.day.currentMonth?Math.round(n.value/n.max*100)>50:!1);return(a,m)=>(e.openBlock(),e.createElementBlock("li",{style:e.normalizeStyle({"background-color":e.unref(l)}),class:e.normalizeClass([{"!text-white":e.unref(o)},"heatmap-day group relative"])},[e.createElementVNode("div",{class:e.normalizeClass({today:t.today})},e.toDisplayString(e.unref(r.default)(t.day.date).format("D")),3),t.value>0&&t.day.currentMonth?(e.openBlock(),e.createElementBlock("div",T,e.toDisplayString(t.value),1)):e.createCommentVNode("",!0)],6))}}),q=640,z=768;function J(){const t=e.ref(window.innerWidth),n=()=>t.value=window.innerWidth;e.onMounted(()=>window.addEventListener("resize",n)),e.onUnmounted(()=>window.removeEventListener("resize",n));const l=e.computed(()=>t.value<q),o=e.computed(()=>t.value<z);return{width:e.computed(()=>t.value),isSmallScreen:o,isMobile:l}}const U={key:0},P={key:1},R=e.defineComponent({props:{locale:{type:String,default:"en-US"}},setup(t){const{isSmallScreen:n}=J();return(l,o)=>e.unref(n)?(e.openBlock(),e.createElementBlock("ol",U,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(L)[t.locale],a=>(e.openBlock(),e.createElementBlock("li",{key:a,class:"heatmap-week-day"},e.toDisplayString(a),1))),128))])):(e.openBlock(),e.createElementBlock("ol",P,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(F)[t.locale],a=>(e.openBlock(),e.createElementBlock("li",{key:a,class:"heatmap-week-day"},e.toDisplayString(a),1))),128))]))}}),I={class:"heatmap-container"},Z={key:0,class:"heatmap-pagination"},G=e.defineComponent({props:{values:{type:Object,required:!0},locale:{type:String,default:"en-US"},color:{type:String,default:"153, 27, 27"},enablePagination:{type:Boolean,default:!0}},setup(t){r.default.extend(D),r.default.extend(S);const n=e.ref(r.default()),l=r.default().format("YYYY-MM-DD"),o=e.computed(()=>Number(n.value.format("M"))),a=e.computed(()=>Number(n.value.format("YYYY"))),m=e.computed(()=>r.default(n.value).daysInMonth()),i=e.computed(()=>{const c=y(s.value[0].date),u=r.default(`${a.value}-${o.value}-01`).subtract(1,"month"),f=c?c-1:6,k=r.default(s.value[0].date).subtract(f,"day").date();return[...Array(f)].map(($,v)=>({date:r.default(`${u.year()}-${u.month()+1}-${k+v}`).format("YYYY-MM-DD"),currentMonth:!1}))}),s=e.computed(()=>[...Array(m.value)].map((c,u)=>({date:r.default(`${a.value}-${o.value}-${u+1}`).format("YYYY-MM-DD"),currentMonth:!0}))),d=e.computed(()=>{const c=y(`${a.value}-${o.value}-${s.value.length}`),u=r.default(`${a.value}-${o.value}-01`).add(1,"month"),f=c&&7-c;return[...Array(f)].map((k,$)=>({date:r.default(`${u.year()}-${u.month()+1}-${$+1}`).format("YYYY-MM-DD"),currentMonth:!1}))}),p=e.computed(()=>[...i.value,...s.value,...d.value]),y=c=>r.default(c).weekday(),M=()=>{n.value=r.default(n.value).subtract(1,"month")},w=()=>{n.value=r.default(n.value).add(1,"month")};return(c,u)=>(e.openBlock(),e.createElementBlock("div",I,[e.createVNode(R,{locale:t.locale},null,8,["locale"]),e.createElementVNode("ol",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p),(f,k)=>(e.openBlock(),e.createBlock(W,{key:k,day:f,value:t.values[String(f.date).split("T")[0]]||0,max:t.values.max,today:e.unref(l)===f.date,color:t.color},null,8,["day","value","max","today","color"]))),128))]),t.enablePagination?(e.openBlock(),e.createElementBlock("div",Z,[e.createVNode(N,{class:"icon",onClick:M}),e.createElementVNode("h5",null,e.toDisplayString(e.unref(j)[t.locale][e.unref(r.default)(n.value).month()])+" "+e.toDisplayString(e.unref(r.default)(n.value).year()),1),n.value.isAfter(e.unref(l))?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(V,{key:0,class:"icon",onClick:w}))])):e.createCommentVNode("",!0)]))}});var Q="";return G});

package.json

 {
   "name": "@script-development/heatmap",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "typings": "types/index.d.ts",
@@ -5,0 +5,0 @@ "repository": "github:script-development/heatmap",

No alert changes

Improved metrics

Total package byte prevSize

26032

increased by4.74%

Lines of code

384

increased by4.35%

No dependency changes