Vue 3 element overlay wrapper

FillOverlay.vue

<template>
  <div class="FillOverlay" ref="element">
    <slot class="overlay-content"></slot>
    <div class="overlay" :style="currentOverlayStyle" :key="percent"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted } from "vue";
import { useInterval } from "../../composables/forms";

function px(val: number): string {
  return `${val}px`;
}
export default defineComponent({
  name: "FillOverlay",
  props: {
    percent: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const isChromium = !!(window as any).chrome;
    const element = ref<HTMLDivElement | null>(null);

    const percent_ = computed(() => props.percent);
    const currentOverlayStyle = ref<Partial<CSSStyleDeclaration>>({});
    const overlayStyle = (): Partial<CSSStyleDeclaration> => {
      if (element.value == null) {
        console.error("percentage for overlay is missing");
        return {};
      }
      const height = element.value.offsetHeight * percent_.value;
      const heightOffset =
        element.value.offsetHeight * (1 - percent_.value) * 0.5;
      return {
        width: px(element.value.offsetWidth),
        height: px(height),
        ...(isChromium && {
          transform: `translate3d(-1rem, calc(${px(
            heightOffset * 2
          )} - 1rem), 0)`,
        }),
        ...(!isChromium && {
          transform: `translate3d(-1rem, calc(${px(heightOffset)} - 1rem), 0)`,
        }),
      };
    };

    const setOverlay = async () => {
      const newStyle = overlayStyle();
      currentOverlayStyle.value = newStyle;
    };
    const overlayHash = computed(() =>
      JSON.stringify(currentOverlayStyle.value)
    );
    onMounted(() => {
      setOverlay();
      useInterval(setOverlay, 1000);
    });
    return { currentOverlayStyle, element, overlayHash, percent_ };
  },
});
</script>

<style scoped lang="scss">
@import "@/styles/main";
.FillOverlay {
  cursor: pointer;
  display: grid;
  .overlay-content,
  .overlay {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  .overlay {
    position: absolute;
    background-color: $petroleum-primary;
    transition: opacity 0.2s ease-in-out;
    opacity: 0.05;
    border-radius: 1rem;
    pointer-events: none;
  }

  &:hover {
    .overlay {
      opacity: 0.2;
    }
  }
}
</style>