Vue

by artur_arseniev

HTML

<script src="https://unpkg.com/vue-slider-component"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-slider-component/theme/default.css">
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/grapes.min.css">
<div id="gjs">
  <slider value="30"></slider>
  <br/><br/><br/>
  <slider value="75"></slider>
</div>

CSS

body, html {
  margin: 0;
  height: 100%;
}

Vue

const VueSlider = window['vue-slider-component'];

const hrefNextTrait = editor => {
  // Custom component
  editor.DomComponents.addType('slider', {
    isComponent: el => el.tagName === 'SLIDER',
    model: {
      defaults: {
        traits: [{ type: 'slider', name: 'value', label: false }]
      },
      init() {
      	this.on('change:attributes:value', this.handleChange);
        this.handleChange();
      },
      handleChange() {
      	const value = this.getAttributes().value || 0;
        this.components(`Slider: ${value}`);
      }
    }
  });
	
  // Custom trait type
  editor.TraitManager.addType('slider', {
    templateInput: '',
    createInput({ trait }) {
      const vueInst = new Vue({ render: h => h(VueSlider) }).$mount();
      const sliderInst = vueInst.$children[0];
      sliderInst.$on('change', ev => this.onChange(ev));
      this.sliderInst = sliderInst;
      return vueInst.$el;
    },

    onEvent({ component }) {
      const value = this.sliderInst.getValue() || 0;
      component.addAttributes({ value });
    },

    onUpdate({ component }) {
      const value = component.getAttributes().value || 0;
      this.sliderInst.setValue(value);
    },
  });
};

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: [hrefNextTrait],
});