pouyamiralayi / showcase-grapes Goto Github PK

editor.DomComponents.addType('div', {
    isComponent: el => el.tagName == 'DIV',
    model: {
      defaults: {
        traits: [
          {
            type: 'select', // Type of the trait
            label: 'Type', // The label you will see in Settings
            name: 'type', // The name of the attribute/property to use on component
            options: [
              { id: 'top-center', name: 'TopCenter'},
              { id: 'top-right', name: 'TopRight'},
              { id: 'top-left', name: 'TopLeft'},
              { id: 'center', name: 'Center'},
              { id: 'center-left', name: 'CenterLeft'},
              { id: 'center-right', name: 'CenterRight'},
              { id: 'bottom-center', name: 'BottomCenter'},
              { id: 'bottom-right', name: 'BottomRight'},
              { id: 'bottom-left', name: 'BottomLeft'},
            ]
          }
          
        ],
      },
      init() {
        this.on('change:attributes:type', this.handleTypeChange);
      },
  
      handleTypeChange() {
        console.log('Input type changed to: ', this.getAttributes().type);
      },
    },
});