<template>
  <jsv-filter-view :left="left" :top="top" :width="width" :height="height" :filterType="filterType">
    <slot></slot>
  </jsv-filter-view>
</template>

<script setup>
import { JsvFilterView } from "jsview";
import { shallowRef, watchEffect } from "vue";

const props = defineProps({
  open: {
    type: Boolean,
  },
  width: {
    type: Number,
  },
  height: {
    type: Number,
  },
  left: {
    type: Number,
  },
  top: {
    type: Number,
  }
});

const filterType = shallowRef(props.open ? "gray-down" : null);

watchEffect(() => {
  if (props.open) {
    filterType.value = "gray-down";
  } else {
    filterType.value = null;
  }
});
</script>
