{"version":3,"file":"vitepress-plugin-life-progress.umd.cjs","sources":["../src/template.vue","../src/index.ts"],"sourcesContent":["<template>\n  <div class=\"life-progress\">\n    <ul>\n      <li\n        v-for=\"(i, idx) in months\"\n        :key=\"i\"\n      >\n        <span class=\"filler\" :style=\"{\n          width: `${i.width}%`\n        }\" />\n        <div v-if=\"idx === month\" :style=\"{\n          opacity: showLabel ? 1 : 0,\n          width: `${i.width}%`,\n        }\" class=\"label-box\">\n          <span class=\"month\">{{i.name}}</span>\n          <span class=\"day\">{{date}}</span>\n        </div>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {ref, computed, onUnmounted} from 'vue'\n\nconst props = defineProps<{\n  customEventName: string\n}>()\nconst showLabel = ref(false)\nconst handleChangeLabelStatus = (visible: boolean = true) => showLabel.value = visible\n\nconst monthShortNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']\n\nconst getToday = () => new Date()\nconst getFullDayNumber = (year, mon) => new Date(year, mon, 0).getDate() \nconst today = ref(getToday())\nconst year = computed(() => today.value.getFullYear())\nconst month = computed(() => today.value.getMonth())\nconst date = computed(() => today.value.getDate())\nconst fullDayNum = computed(() => getFullDayNumber(year.value, month.value))\nconst months = computed(() => monthShortNames.map((mon, index) => ({\n  name: mon,\n  width: index < month.value ? 100 : index === month.value ? date.value / fullDayNum.value * 100 : 0\n})))\n\n// CustomEvent\nconst event = (ev) => handleChangeLabelStatus(ev.detail)\nwindow.addEventListener(props.customEventName, event)\nonUnmounted(() => {\n  window.removeEventListener(props.customEventName, event)\n})\n\n// Why can't I get handleChangeLabelStatus in index.ts?...\n// defineExpose({\n//   handleChangeLabelStatus,\n// })\n</script>\n\n<style lang=\"postcss\">\n.VPNavBar{\n  /* z-index: 1; */\n}\n.life-progress{\n  width: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  ul {\n    display: flex;\n    width: 100%;\n    li {\n      position: relative;\n      flex-grow: 1;\n      height: 2px;\n      list-style: none;\n      font-size: 12px;\n      line-height: 24px;\n      background-color: var(--vp-c-text-4);\n      color: var(--vp-c-text-2);\n      &:not(:last-child) {\n        margin-right: 2px;\n      }\n      .filler {\n        position: absolute;\n        display: inline-block;\n        height: 100%;\n        background-color: var(--vp-c-text-1);\n      }\n      .label-box {\n        position: absolute;\n        display: flex;\n        justify-content: space-between;\n        transition: 500ms;\n        .month {}\n        .day {\n          transform: translateX(50%);\n        }\n      }\n    }\n  }\n}\n</style>","import {render, createVNode, onMounted} from 'vue'\nimport type {ComponentInternalInstance, ComponentPublicInstance} from 'vue'\nimport LifeProgressCom from './template.vue'\n\nconst customEventName = 'vitepress-life-progress'\nconst mountLifeProgressDom = () => {\n  /**\n   * Why is it mounted on VPNav instead of body?\n   *  - We need the VPNav element as the trigger tagert for LifeProgressCom, so we finally need to get the VPNav element...\n   */\n  const vpNav = document.getElementsByClassName('VPNav')[0]\n  const vnode = createVNode(LifeProgressCom, {\n    customEventName,\n  })\n  const boxEl = document.createElement('div')\n  vpNav.appendChild(boxEl)\n  render(vnode, boxEl)\n\n  const instance = vnode.component as ComponentInternalInstance\n  const vm = instance.proxy as ComponentPublicInstance\n  return {\n    mountEl: vpNav,\n    vm,\n  }\n}\nconst mountTriggerEvent = (el: Element) => {\n  el.addEventListener('mouseenter', () => window.dispatchEvent(new CustomEvent(customEventName, {detail: true})))\n  el.addEventListener('mouseleave', () => window.dispatchEvent(new CustomEvent(customEventName, {detail: false})))\n}\n\nconst vitepressLifeProgress = () => {\n  if (typeof window === 'undefined') return\n\n  onMounted(() => {\n    const {mountEl} = mountLifeProgressDom()\n    mountTriggerEvent(mountEl)\n  })\n}\n\nexport default vitepressLifeProgress\n"],"names":["showLabel","ref","handleChangeLabelStatus","visible","monthShortNames","getToday","getFullDayNumber","year","mon","today","computed","month","date","fullDayNum","months","index","event","ev","props","onUnmounted","customEventName","mountLifeProgressDom","vpNav","vnode","createVNode","LifeProgressCom","boxEl","render","vm","mountTriggerEvent","el","onMounted","mountEl"],"mappings":";wLA4BMA,EAAYC,MAAI,EAAK,EACrBC,EAA0B,CAACC,EAAmB,KAASH,EAAU,MAAQG,EAEzEC,EAAkB,CAAC,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,OAAQ,MAAO,MAAO,KAAK,EAEtGC,EAAW,IAAM,IAAI,KACrBC,EAAmB,CAACC,EAAMC,IAAQ,IAAI,KAAKD,EAAMC,EAAK,CAAC,EAAE,UACzDC,EAAQR,EAAAA,IAAII,EAAA,CAAU,EACtBE,EAAOG,EAAAA,SAAS,IAAMD,EAAM,MAAM,aAAa,EAC/CE,EAAQD,EAAAA,SAAS,IAAMD,EAAM,MAAM,UAAU,EAC7CG,EAAOF,EAAAA,SAAS,IAAMD,EAAM,MAAM,SAAS,EAC3CI,EAAaH,WAAS,IAAMJ,EAAiBC,EAAK,MAAOI,EAAM,KAAK,CAAC,EACrEG,EAASJ,EAAAA,SAAS,IAAMN,EAAgB,IAAI,CAACI,EAAKO,KAAW,CACjE,KAAMP,EACN,MAAOO,EAAQJ,EAAM,MAAQ,IAAMI,IAAUJ,EAAM,MAAQC,EAAK,MAAQC,EAAW,MAAQ,IAAM,GACjG,CAAC,EAGGG,EAASC,GAAOf,EAAwBe,EAAG,MAAM,EAChD,cAAA,iBAAiBC,EAAM,gBAAiBF,CAAK,EACpDG,EAAAA,YAAY,IAAM,CACT,OAAA,oBAAoBD,EAAM,gBAAiBF,CAAK,CAAA,CACxD,woBC9CKI,EAAkB,0BAClBC,EAAuB,IAAM,CAKjC,MAAMC,EAAQ,SAAS,uBAAuB,OAAO,EAAE,GACjDC,EAAQC,cAAYC,EAAiB,CACzC,gBAAAL,CAAA,CACD,EACKM,EAAQ,SAAS,cAAc,KAAK,EAC1CJ,EAAM,YAAYI,CAAK,EACvBC,SAAOJ,EAAOG,CAAK,EAGnB,MAAME,EADWL,EAAM,UACH,MACb,MAAA,CACL,QAASD,EACT,GAAAM,CAAA,CAEJ,EACMC,EAAqBC,GAAgB,CACzCA,EAAG,iBAAiB,aAAc,IAAM,OAAO,cAAc,IAAI,YAAYV,EAAiB,CAAC,OAAQ,EAAK,CAAA,CAAC,CAAC,EAC9GU,EAAG,iBAAiB,aAAc,IAAM,OAAO,cAAc,IAAI,YAAYV,EAAiB,CAAC,OAAQ,EAAM,CAAA,CAAC,CAAC,CACjH,QAE8B,IAAM,CAC9B,OAAO,OAAW,KAEtBW,EAAAA,UAAU,IAAM,CACR,KAAA,CAAC,QAAAC,GAAWX,IAClBQ,EAAkBG,CAAO,CAAA,CAC1B,CACH"}