<template>
  <v-container class="template-style">
    <h2 class="mb-0 font-weight-bold">Template Style</h2>
    <p class="mb-2 grey--text">
      Control graphic styles shared throughout this template
    </p>
    <p class="p-h mb-0">-- This componenet is only visible in edit mode --</p>
  </v-container>
</template>

<script>
export default {
  name: "TemplateStyle",
  props: { widget: Object },
  created() {
    this.$emit("templateStyle", this.widget.sharedStyle);
  },
  watch: {
    "widget.sharedStyle": {
      handler: function (val) {
        this.$emit("templateStyle", this.widget.sharedStyle);
      },
      deep: true,
    },
  },
};
</script>

<style>
.template-style {
  border-bottom: dashed grey 1px;
  text-align: center;
}
</style>
