@highloop/feedback-vue/src/component.ts

import { createInlineWidget } from '@highloop/feedback';
import { h } from 'vue';

export default {
  name: 'Feedback',
  props: {
    id: {
      type: String,
      required: true
    },
    theme: Object,
    meta: Object,
    text: Object,
    expanded: Boolean,
    resetOnSubmit: Boolean
  },
  render: function() {
    return h('div', { ref: 'root' });
  },
  data: function() {
    return {
      instance: undefined
    };
  },
  mounted: function() {
    this.$nextTick(function() {
      if (!this.id) return console.warn('[highloop-feedback] missing id prop');

      createInlineWidget(this.id, this.$refs.root, {
        theme: this.theme,
        meta: this.meta,
        text: this.text,
        expanded: this.expanded,
        resetOnSubmit: this.resetOnSubmit
      })
        .then(instance => {
          this.instance = instance;
        })
        .catch(err => console.warn('[highloop-feedback]: Could not create widget', err));
    });
  },
  updated: function() {
    this.$nextTick(function() {
      if (!this.instance) return;

      this.instance.setTheme(this.theme);
      this.instance.setMeta(this.meta);
    });
  },
  unmounted: function() {
    if (!this.instance) return;
    this.instance.destroy();
  }
};