
<template>
  <div>
    <FontOption v-if="fontAt" />
    <CellOption :borderStyle="styleSheet.borderStyle" v-if="cellAt" />
    <BackgroundOption
      :background_style="styleSheet.background_style"
      v-if="backgroundAt"
    />
  </div>
</template>

<script>
import BackgroundOption from "./BackgroundOption.vue";
import CellOption from "./CellOption.vue";
import FontOption from "./FontOption.vue";

export default {
  props: {
    styleSheet: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      fontAt: false,
      cellAt: false,
      backgroundAt: false,
    };
  },
  watch: {
    styleSheet: function (v) {
      this.cellAt = v.borderStyle != null;
      this.backgroundAt = v.background_style != null;
    },
  },
  components: {
    BackgroundOption: BackgroundOption,
    CellOption: CellOption,
    FontOption: FontOption,
  },
};
</script>
