Bulma Liquid Tether

components.dialog-step-one.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.dialog-step-three.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.dialog-step-two.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.profile.js

import Ember from 'ember';

export default Ember.Controller.extend({
  showDialogStepOne: Ember.computed.equal('currentDialogStep', 1),
  showDialogStepTwo: Ember.computed.equal('currentDialogStep', 2),
  showDialogStepThree: Ember.computed.equal('currentDialogStep', 3),
  
  actions: {
    cancel() {
      console.log("cancel");
      this.set('currentDialogStep', 0);
    },
    
    save() {
      console.log("save");
      this.set('currentDialogStep', 0);
    },
    
    next() {
      console.log("next");
      this.incrementProperty('currentDialogStep');
    },
    
    prev() {
      console.log("prev");
      this.decrementProperty('currentDialogStep');
    }
  }
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('profile');
});

export default Router;

routes.profile.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates.application.hbs

<section class="section">
  <div class="container">
    <h1>Welcome to {{appName}}</h1>
    <br>
    {{#link-to 'profile'}}Profile{{/link-to}}
    <br>
		{{outlet}}
	</div>
</section>

templates.components.dialog-step-one.hbs

    <header class="modal-card-head">
      <p class="modal-card-title">Dialog - Step One</p>
      <button class="delete" {{action cancel}}></button>
    </header>
    <section class="modal-card-body">
      <p>This is step one</p>
    </section>
    <footer class="modal-card-foot" style="justify-content: flex-end">
      <a class="button" {{action cancel}}>Cancel</a>
      <a class="button is-success" {{action next}}>Next</a>
    </footer>

templates.components.dialog-step-three.hbs

    <header class="modal-card-head">
      <p class="modal-card-title">Dialog - Step Three</p>
      <button class="delete" {{action cancel}}></button>
    </header>
    <section class="modal-card-body">
      <p>This is step three</p>
    </section>
    <footer class="modal-card-foot" style="justify-content: space-between">
      <a class="button" {{action prev}}>Back</a>
      <div>
        <a class="button" {{action cancel}}>Cancel</a>
        <a class="button is-success" {{action save}}>Save</a>
      </div>
    </footer>

templates.components.dialog-step-two.hbs

    <header class="modal-card-head">
      <p class="modal-card-title">Dialog - Step Two</p>
      <button class="delete" {{action cancel}}></button>
    </header>
    <section class="modal-card-body">
      <p>This is step two</p>
    </section>
    <footer class="modal-card-foot" style="justify-content: space-between">
      <a class="button" {{action prev}}>Back</a>
      <div>
        <a class="button" {{action cancel}}>Cancel</a>
        <a class="button is-success" {{action next}}>Next</a>
      </div>
    </footer>

templates.profile.hbs

<a class="button" {{action (mut currentDialogStep) 1}}>
  Open Dialog
</a>

{{#if showDialogStepOne}}
  <div class="modal is-active">
    {{liquid-wormhole stack="modal-background" class="modal-background"
                      click=(action 'cancel')}}
	  {{liquid-tether stack="modal-dialog" value=1 target="document.body"
                    targetModifier="visible" attachment="middle center"
                    class="modal-card" send=(component "dialog-step-one"
                                                  cancel=(action 'cancel')
                                                  next=(action 'next'))}}
  </div>
{{/if}}

{{#if showDialogStepTwo}}
  <div class="modal is-active">
    {{liquid-wormhole stack="modal-background" class="modal-background"
                      click=(action 'cancel')}}
	  {{liquid-tether stack="modal-dialog" value=2 target="document.body"
                    targetModifier="visible" attachment="middle center"
                    class="modal-card" send=(component "dialog-step-two"
                                                  cancel=(action 'cancel')
                                                  prev=(action 'prev')      
                                                  next=(action 'next'))}}
  </div>
{{/if}}

{{#if showDialogStepThree}}
  <div class="modal is-active">
    {{liquid-wormhole stack="modal-background" class="modal-background"
                      click=(action 'cancel')}}
	  {{liquid-tether stack="modal-dialog" value=3 target="document.body"
                    targetModifier="visible" attachment="middle center"
                    class="modal-card" send=(component "dialog-step-three"
                                                  cancel=(action 'cancel')
                                                  prev=(action 'prev')      
                                                  save=(action 'save'))}}
  </div>
{{/if}}

transitions.js

export default function() { 
  
  this.transition(
    this.matchSelector('#modal-background'),
    this.toValue((newValue, oldValue) => newValue === null || oldValue === null),
    this.use('fade'),
    this.debug(),
  );
  
  this.transition(
    this.matchSelector('#modal-dialog'),
    this.toValue((newValue, oldValue) => newValue === null || oldValue === null),
    this.use('fade'),
    this.debug(),
  );
  
  this.transition(
    this.matchSelector('#modal-dialog'),
    this.toValue((newValue, oldValue) => newValue && oldValue && newValue > oldValue),
    this.use('to-left', { duration: 700, easing: [0.175, 0.885, 0.32, 1.275] }),
    this.reverse('to-right', { duration: 700, easing: [0.175, 0.885, 0.32, 1.275] }),
    this.debug(),
  );

};

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0",
    "bulma": "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css",
    "font-awesome": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
  },
  "addons": {
    "ember-data": "2.12.1",
    "liquid-tether": "2.0.4"
  }
}