default value propagation

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
	remodal: Ember.inject.service(),
  name: 'Name',

  actions: {
    rename (name) {
      this.set('name', name)
    },
    showRenameModal () {
    	this.get('remodal').open('rename-form')
    },
    hideRenameModal () {
    	this.get('remodal').close('rename-form')
    }
  }
});

name-prompt.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});
/**
 * name-prompt component
 *
 * Allow prompting with a default name
 */

import Ember from 'ember'
const {Component, isEmpty} = Ember
import PropTypesMixin, {PropTypes} from 'ember-prop-types'
import computed, {readOnly} from 'ember-computed-decorators'
import layout from './template'

const bunsenModel = {
  type: 'object',
  properties: {
    name: {
      type: 'string'
    }
  },
  required: ['name']
}


const bunsenView = {
  version: '1.0',
  type: 'form',
  rootContainers: [
    {
      label: 'Main',
      container: 'main'
    }
  ],
  containers: [
    {
      id: 'main',
      rows: [
        [{model: 'name'}]
      ]
    }
  ]
}

export default Component.extend(PropTypesMixin, {

  // == Dependencies ==========================================================

  // == Properties ============================================================

  bunsenModel,
  bunsenView,
  layout,
  validationResult: null,

  propTypes: {
    accountId: PropTypes.number.isRequired,
    bunsenValue: PropTypes.object,
    defaultName: PropTypes.string,
    modalName: PropTypes.string,
    labels: PropTypes.shape({
      addSite: PropTypes.string,
      addNewSite: PropTypes.string,
      addNewSiteDescription: PropTypes.string,
      cancel: PropTypes.string
    })
  },

  // == Computed Properties ===================================================

  @readOnly
  @computed('validationResult')
  /**
   * Simple flag for if the validation result included errors or not
   * @param {ValidationResult} result - the bunsen validation result
   * @returns {Boolean} true if valid
   */
  isValid (result) {
    return isEmpty(result.errors)
  },

  @readOnly
  @computed('isValid', 'validationResult.errors.[]')
  /**
   * A summary error message for the whole form
   * @param {Boolean} isValid - flag that's false if there are errors
   * @param {ValidationError[]} errors - the bunsen validation result errors
   * @returns {String} a summary error message
   */
  errorMessage (isValid, errors) {
    if (isValid) {
      return ''
    }

    return `${errors.length} errors`
  },

  // == Functions =============================================================

  /**
   * Fill in default properties for those that were not passed in
   * @returns {Object} the default values for properties not provided by the consumer
   */
  getDefaultProps () {
    return {
      bunsenValue: {},
      defaultName: '',
      labels: {
        title: 'Add quote revision',
        description: 'Make a copy of the currently selected revision',
        confirm: 'Add revision',
        cancel: 'Cancel'
      },
      modalName: 'add-revision'
    }
  },

  // == Events ================================================================

  // == Actions ===============================================================

  actions: {
    /**
     * Handle a value change from the busnen form by saving it to bunsenValue
     * @param {Object} value - the current value
     */
    handleValueChange (value) {
      this.set('bunsenValue', value)
    },

    /**
     * Handle a bunsen validation result by saving the result so computed properties can update
     * @param {ValidationResult} result - the bunsen validation result
     */
    handleValidation (result) {
      this.set('validationResult', result)
    },

    /**
     * Call our onCancel callback, which normally will hide our form.
     */
    cancel () {
      this.onCancel()
    },

    /**
     * Called by the onOpen callback, this ensures that our
     * model starts off with a default name.
     */
    setDefaultName () {
      this.set('bunsenValue', {name: this.get('defaultName')})
    },

    /**
     * Clear our form values so that the user doesn't see a stale value the next time they open it.
     */
    resetForm () {
      this.set('bunsenValue', {})
    }

    // implicit bundling of onSave
  }
})

name-prompt.template.hbs

{{#frost-modal-input
  modalName=modalName
  subtitle=labels.description
  title=labels.title
  onOpen=(action 'setDefaultName')
  onClose=(action 'resetForm')
  as |slot|
}}
  {{#block-slot slot 'body' as |content|}}
    {{! This logging is required or else default propagation doesn't work }}
    {{log bunsenValue}}
    {{content.form
      bunsenModel=bunsenModel
      onChange=(action 'handleValueChange')
      onValidation=(action 'handleValidation')
      value=bunsenValue
      bunsenView=bunsenView
    }}
  {{/block-slot}}

  {{#block-slot slot 'footer' as |controls close|}}
    {{frost-button
      disabled=false
      onClick=onCancel
      priority='secondary'
      size='medium'
      text=labels.cancel
    }}
    {{frost-button
      disabled=(not isValid)
      onClick=(action onSave bunsenValue)
      priority='primary'
      size='medium'
      text=labels.confirm
    }}
  {{/block-slot}}
{{/frost-modal-input}}

templates.application.hbs

<h1>{{name}}</h1>

<div>
{{! modal for renaming a new revision}}
{{name-prompt
  modalName='rename-form'
  labels=(hash
    title='Rename'
    description='Pick a new name'
    confirm='Save'
    cancel='Cancel'
  )
  onCancel=(action 'hideRenameModal')
  onSave=(action 'rename')
  defaultName=model.revision.name
}}
</div>

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.7.0",
    "ember-data": "2.7.0",
    "ember-prop-types": "2.5.6",
    "ember-remodal": "1.2.0",
    "ember-frost-bunsen": "6.6.13",
    "ember-frost-core": "0.25.0",    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}