<script setup lang="ts">
import { VERTICAL, JsvScrollBox, SeamlessSlide, ScrollBoxStyle } from "jsview";

let rProps = defineProps({
  scrollStyle: Object,
  scrollBlockStyle: Object,
});

let { left: cScrollLeft, ...cScrollSubStyle } = rProps.scrollStyle as any;
</script>
<template>
  <jsv-scroll-box
    linkName="ScrollBarTextArea"
    syncWith="ScrollBoxTextArea"
    :style="{
      left: cScrollLeft,
      width: cScrollSubStyle.width,
      height: cScrollSubStyle.height,
    }"
    :direction="VERTICAL"
    :mode="ScrollBoxStyle.PinMode"
    :sliderSize="{
      height: (rProps.scrollBlockStyle as any).height,
    }"
  >
    <template #FixedBox>
      <div :style="{ ...cScrollSubStyle }" />
    </template>
    <template #SliderBox>
      <div :style="{ ...rProps.scrollBlockStyle }" />
    </template>
  </jsv-scroll-box>
</template>
