Support pnpm about ruler HOT 4 CLOSED

<script setup lang="ts">
import Ruler from '@scena/ruler'
import dayjs from 'dayjs'

const timelineRef = ref<HTMLDivElement>()
const ruler = ref<Ruler>()

function initRuler(timeline: HTMLDivElement) {
  ruler.value = new Ruler(timeline, {
    type: 'horizontal',
    unit: 20 / 3,
    direction: 'start',
    zoom: 45,
    textColor: '#555555',
    font: '14px sans-serif',
    backgroundColor: '#1f1f1f',
    textFormat: scale =>
      dayjs(scale * 9000)
        .subtract(8, 'hour')
        .format('HH:mm:ss'),
  })
  nextTick(onRulerResize)
}

function onRulerResize() {
  console.info('resize')
  ruler.value?.resize()
}

onMounted(() => {
  initRuler(timelineRef.value!)
})
</script>

<template>
  <div ref="timelineRef" sticky top-0 z-9 w-full h-36px />
</template>