semantic-org / semantic-ui-ember

Official Semantic UI Integration for Ember

Semantic-UI-Ember

This is the official Ember library for the Semantic-UI modules.

Support

The NodeJS and EmberJS versions respective tags are tested on. It might work with versions not listed as well

3.0

2.1

2.0

Installation

v3

Install this through Ember CLI. We support Ember 2.12 LTS through 3.x

ember install semantic-ui-ember

v2.1

Install this add-on through Ember CLI. We support Ember versions 2.x and above

NOTE: This is a bower-less install

ember install [email protected]

That's it.

v2.0 and below only

Install this add-on through Ember CLI. We support Ember versions 1.13 latest - 2.X.

NOTE: Ember 2.x only without fastboot is supported

ember install [email protected]

Run the library's blueprint to pull in its Bower dependencies. This only needs to be done once.

ember generate semantic-ui-ember

Documentation

Detailed documentation on using Semantic-UI-Ember.

Changelog

semantic-ui-ember's Issues

Accordion: The method you called is not defined ["set"]

Open http://localhost:4200/modules/accordion

Accordion: The method you called is not defined ["set"]module.error @ semantic.js:2428(anonymous function) @ semantic.js:2513jQuery.extend.each @ jquery.js:384module.invoke @ semantic.js:2493(anonymous function) @ semantic.js:2540jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136$.fn.accordion @ semantic.js:2050execute @ base.js:106didInsertElement @ base.js:89_emberRuntimeSystemObject.default.extend.trigger @ ember.debug.js:41549superWrapper @ ember.debug.js:21134Renderer.didInsertElement @ ember.debug.js:11984Renderer_dispatchLifecycleHooks @ ember.debug.js:11906Renderer_revalidateTopLevelView @ ember.debug.js:11888_emberViewsViewsCore_view.default.extend.revalidate @ ember.debug.js:43942Queue.invoke @ ember.debug.js:978Queue.flush @ ember.debug.js:1042DeferredActionQueues.flush @ ember.debug.js:838Backburner.end @ ember.debug.js:166Backburner.run @ ember.debug.js:288Backburner.join @ ember.debug.js:323run.join @ ember.debug.js:19144exports.default._emberRuntimeSystemObject.default.extend._bubbleEvent @ ember.debug.js:40088(anonymous function) @ ember.debug.js:40030jQuery.event.dispatch @ jquery.js:4670elemData.handle @ jquery.js:4338

Ember 2.3 "Uncaught TypeError"

Running into an error when trying to use this with ember 2.3.0-beta.1, ember-cli 2.2.0-beta.1, and jquery 2.1.4. The Chrome error is "Uncaught TypeError: Can't add property DEBUG, object is not extensible" coming from the // Static properties to ignore code in the base Mixin.

Can't get modal view to work

I've followed the README docs for the setup, but the modal template doesn't get displayed. The template itself does get inserted into DOM, but nothing appears. Is there anything i'm missing here?

Assertion fail when using an ui-dropdown

When I use the {{ui-dropdown}} component in my template, I got this error :

Uncaught Error: Assertion Failed: You must use Ember.set() to set the `childViews` property (of <bml-admin@component:ui-dropdown::ember1047>) to ``.

Ember 1.13.5 & Ember-data 1.13.5

Full Assets with no URLs

I am building an Ember app and would like to use Semantic UI. However, I cannot have external access to URLs. It will be on a closed off system that will need to have everything it needs locally in order to work, so the links to things like 'fonts.gstatic.com', for instance, won't work.

Is there a way to download a complete package of Semantic UI somewhere? If not, is there a way to quickly update it so that I can use it without needing those external URLs?

Thanks!

How to run the test/dummy app

When I install the addon and I copy test/dummy/app into my ember project, I can't get it to run. Is there any steps that I need to do to run the test app directly within the addon.

Thanks,

is there an option to use semantic-ui-ember withough npm or Ember CLI?

just looking to download and include another JS i can use with require.js, to take care of the integration.

Support for dropdown using selection option

Hey there, really interested in this project as I'm currently using Semantic on a project and have implemented many of these components on my own. Definitely interested in contributing to this project in the future.

Anyway, one of the components I have the most problems with is ui-dropdown specifically when trying to bind to objects rather than values by using the selection option rather than value. Do you have any support for this or a method of working around it?

Build error when using ui-dropdown

I'm getting the following build error when using the ui-dropdown component with the onChange action.

Parse error on line 14:
...n class="selection" onChange(action 'upd
-----------------------^
Expecting 'CLOSE_RAW_BLOCK', 'CLOSE', 'CLOSE_UNESCAPED', 'OPEN_SEXPR', 'CLOSE_SEXPR', 'ID', 'OPEN_BLOCK_PARAMS', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'INVALID'

Posting my Ember info below because I'm thinking it's probably a version thing

Ember Inspector 1.9.3
Ember 1.13.7
Ember Data 1.13.9
jQuery 1.11.3
Ember Simple Auth 0.8.0
Ember Simple Auth Torii 0.8.0

prep-1.0: How to set an initial value for ui-dropdown lists?

I'm using the ui-dropdown module to display a selection. How can I set a certain entry to be active/selected? In my case settings.user.currentLanguage would map to language.code.

{{#ui-dropdown  class="selection"
                value=settings.user.currentLanguage
                onChange=(action "changeI18nLanguage")}}
  <div class="default text">{{t "settings.language"}}</div>
  <i class="dropdown icon"></i>
  <div class="menu">
  {{#each availableLanguages as |language|}}
    <div class="item" data-value={{language.code}}>
      {{language.name}}
    </div>
  {{/each}}
  </div>
{{/ui-dropdown}}

can't get property bind in ui-radio

use the code in readme, the fruit property is always undefined

<div class="ui form">
  <div class="grouped inline fields">
    <div class="field">
      {{ui-radio name="fruit" label="Once a week" checked=fruit}}
    </div>
    <div class="field">
      {{ui-radio name="fruit" label="2-3 times a week" checked=fruit}}
    </div>
    <div class="field">
      {{ui-radio name="fruit" label="Once a day" checked=fruit}}
    </div>
  </div>
</div>

ui-radio always checks last option on first click

The first time I select any option, it selects the last option in the list and a subsequent click is required to get the desired option.
routes/decide.js:

import Ember from 'ember';

export default Ember.Route.extend({
  ...
  setupController: function(controller, model) {
    this._super(controller, model);
    controller.set('attrs', {});
    controller.set('attrs.status', null);
  }
...
});

templates/decide.hbs:

<div class="ui form">
  <div class="grouped fields">
    <div class="field">
      <div class="ui radio checkbox">
        <i class="big green thumbs outline up icon"></i> {{ui-radio name="status" label="Closed" value="closed" current=attrs.status}}
      </div>
    </div>
    <br>
    <div class="field">
      <div class="ui radio checkbox">
        <i class="big orange thumbs outline up icon"></i> {{ui-radio name="status" label="Suspended" value="suspended" current=attrs.status}}
      </div>
    </div>
    <br>
    <div class="field">
      <div class="ui radio checkbox">
        <i class="big red thumbs outline down icon"></i> {{ui-radio name="status" label="Open" value="open" current=attrs.status}}
      </div>
    </div>
  </div>
  <br>
  <button class="ui right floated labeled icon positive button" {{action "finish"}}>
    <i class="save icon"></i> Finish
  </button>
</div>

The HTML rendered by this is:

<div class="ui form">
  <div class="grouped fields">
    <div class="field">
      <div class="ui radio checkbox">
        <i class="big green thumbs outline up icon"></i> 
        <div id="ember2623" class="ember-view ui checkbox radio">
          <input type="radio" name="status" tabindex="0" class="hidden">
          <label>Closed</label>
        </div>
      </div>
    </div>
    <br>
    <div class="field">
      <div class="ui radio checkbox">
        <i class="big orange thumbs outline up icon"></i> 
        <div id="ember2624" class="ember-view ui checkbox radio">
          <input type="radio" name="status" tabindex="0" class="hidden">
          <label>Suspended</label>
        </div>
      </div>
    </div>
    <br>
    <div class="field">
      <div class="ui radio checkbox">
        <i class="big red thumbs outline down icon"></i> 
        <div id="ember2625" class="ember-view ui checkbox radio checked">
          <input type="radio" name="status" tabindex="0" class="hidden">
          <label>Open</label>
        </div>
      </div>
    </div>
  </div>
  <br>
  <button class="ui right floated labeled icon positive button" data-ember-action="2626">
    <i class="save icon"></i> Finish
  </button>
</div>

Icons dont work on animated buttons

The following doesnt seem to work. The animation works, but no icon displays right after.

<div class="ui animated button">
  <div class="visible content">Next</div>
  <div class="hidden content">
    <i class="right arrow icon"></i>
  </div>
</div>

Missing name attribute

This code created input without name attribute

{{ui-dropdown
            class="ui search dropdown selection"
            prompt="Cчет"
            content=accounts
            optionValuePath="content.id"
            optionLabelPath="content.name"
            selection=transaction.toAccount
            name="account"
        }}

Does not work w/ Ember 2.0

master⚡ ⇒ ember serve --proxy http://localhost:3000

version: 1.13.8
Proxying to http://localhost:3000
Livereload server on http://localhost:49153
Serving on http://localhost:4200/
File: templates/components/ui-dropdown.hbs
Assertion Failed: Using `{{view}}` or any path based on it ('templates/components/ui-dropdown.hbs' @ L1:C18) has been removed in Ember 2.0
Error: Assertion Failed: Using `{{view}}` or any path based on it ('templates/components/ui-dropdown.hbs' @ L1:C18) has been removed in Ember 2.0

Use assuming Semantic UI CSS & JS were already loaded

We would love to use this add-on in our project. However, the addon currently loads and includes the Semantic UI JS and CSS as vendor files through ember-cli. We already have Semantic UI JS and CSS included elsewhere in the project.

Is there a way to exclude the core Semantic UI JS and CSS and only use these wrapper components?

Is there an option to remove them from the Broccoli tree?

Thank you!

Don't work with Bootstrap

After I installed Bootstrap via bower and imported less and js files, semantic-ui component like dropdown aren't working, throwing Uncaught TypeError: Cannot read property 'call' of undefined [bootstrap.js:880]
When i bower install semantic-ui and import semantic css and js everything's working

Dropdown get selected

Hello.
I'm searching in docs and i cannot find how to get the selected item in the dropdown to pass it as a parameter in action. I'm trying to get it by jquery from the "content tag" but content tag doesnt change anything. Any ideas?

Questions about Form Validation and Issue with "clear button" ...

ember.js @ 1.13.1
semantic-ui-ember @ 0.0.1-rc.6

I have the following form code:

<div class="sign-up">
  <h1>
    {{t signUp.header}}
  </h1>
  <form class="ui form">
    <div class="field">
      {{input id="username" name="username" type="text" placeholder=usernamePlaceholder}}
    </div>
    <div class="field">
      {{input name="email" type="text" placeholder=emailPlaceholder}}
    </div>
    <div class="field">
      {{input name="password" type="password" placeholder=passwordPlaceholder}}
    </div>
    <div class="ui blue submit button">Submit</div>
    <div class="ui clear button">Clear</div>
  </form>
</div>

However, the clear button is not working, as per the Semantic UI Form Validation examples found here.

Also, I have no idea where I would place the actual validation set-up code, like the following:

$('.sign-up form').form({
  fields: {
    name: {
      identifer: 'username',
      rules: [
        {
          type: 'empty',
          prompt: "You must provide a user name!"
        }
      ]
    }
  },
  inline: true,
  on: 'blur'
});

Note, if I paste the above into the Chrome console, the validation is not working, still, but somehow the clear button starts to work!

Any help with this would be greatly appreciated...

Customise Modal

Hey,

Using this package is it possible to do some more complex models? Such as the allowMultiple?

http://semantic-ui.com/modules/modal.html#/examples

Semantic-UI 2.0

Are you planning on supporting the new features that are to be released in semantic-ui 2.0 (specifically multi-select)?

Popup/dropdown not working ember 2

Another issue with popup component:
index.hbs
{{ui-popup content="The text you'd like to show"}}
{{ui-popup tagName="i" class="icon link" content="The text you'd like to show"}}

If a look into html i get this code

Welcome to Ember

<div id="ember427" data-content="The text you'd like to show" class="ember-view"><!----></div>
<hr>
<i id="ember428" data-content="The text you'd like to show" class="icon link ember-view"><!---></i>
</div>

And nothing is visibile.

The same problem with dropdown component

DEBUG: -------------------------------
DEBUG: Ember      : 2.0.0
DEBUG: Ember Data : 2.0.0
DEBUG: jQuery     : 1.11.3
DEBUG: -------------------------------
ember -v
version: 1.13.8

node: 4.1.1
npm: 2.13.4
os: linux x64

Getting rejected by sanitizer error

On Ember CLI 0.2.3. I get this in Ember Inspector, console tab:

downloadable font: rejected by sanitizer (font-family: "Icons" style:normal weight:normal stretch:normal src index:1) source: http://localhost:4099/assets/themes/default/assets/fonts/icons.woff2

I am also using Firefox. Any ideas?

Error on template using modules

When I put on my template, for example {{ui-checkbox checked=rememberMe}} I got this error in my console :

Cannot call compile without the template compiler loaded. Please load ember-template-compiler.js prior to calling compile.

And the application crash. However, when I'm not using your modules it's perfectly ok. Any idea ?

I use ember 1.13.3 and ember-cli 1.13.1

Accordion: The method you called is not defined

ember -v
version: 1.13.8
node: 4.1.1
npm: 2.13.4
os: linux x64`

Using accordion all seems to work but in console a get this error:

DEBUG: -------------------------------
DEBUG: Ember      : 2.0.0
DEBUG: Ember Data : 2.0.0
DEBUG: jQuery     : 1.11.3
DEBUG: -------------------------------
Ember Inspector Active
Accordion: The method you called is not defined ["set"]

Any chance the search feature will be implemented as an Ember component?

http://semantic-ui.com/modules/search.html#/definition

Handle closing modal

In the latest semantic ui update, closeModal is deprecated. Checking the code, i found this

// if controller handles approves, they must manually call view.execute('hide')

How do i access view from controller, and run execute on it. AFAIK, ember only works in one direction. You can only bubble upward, but you can't call view nor send it events. Is there something I'm missing here?

Cannot read property 'name' of undefined

Installing with ember-cli 0.2.4 gives the error:

Cannot read property 'name' of undefined                                                                       
TypeError: Cannot read property 'name' of undefined                                                            
    at C:\Projects\property-system\front-end\node_modules\ember-cli\lib\models\project.js:475:53               
    at baseFindIndex (C:\Projects\property-system\front-end\node_modules\ember-cli\node_modules\lodash\internal
\baseFindIndex.js:16:9)                                                                                        
    at C:\Projects\property-system\front-end\node_modules\ember-cli\node_modules\lodash\internal\createFind.js:
18:19                                                                                                          
    at Project.findAddonByName (C:\Projects\property-system\front-end\node_modules\ember-cli\lib\models\project
.js:474:20)                                                                                                    
    at Class.module.exports.Task.extend.findDefaultBlueprintName (C:\Projects\property-system\front-end\node_mo
dules\ember-cli\lib\tasks\addon-install.js:63:30)                                                              
    at Class.module.exports.Task.extend.installBlueprint (C:\Projects\property-system\front-end\node_modules\em
ber-cli\lib\tasks\addon-install.js:52:30)                                                                      
    at Class.<anonymous> (C:\Projects\property-system\front-end\node_modules\ember-cli\lib\tasks\addon-install.
js:42:19)                                                                                                      
    at lib$rsvp$$internal$$tryCatch (C:\Projects\property-system\front-end\node_modules\ember-cli\node_modules\
rsvp\dist\rsvp.js:489:16)                                                                                      
    at lib$rsvp$$internal$$invokeCallback (C:\Projects\property-system\front-end\node_modules\ember-cli\node_mo
dules\rsvp\dist\rsvp.js:501:17)                                                                                
    at lib$rsvp$$internal$$publish (C:\Projects\property-system\front-end\node_modules\ember-cli\node_modules\r
svp\dist\rsvp.js:472:11)                                                                                       

Execute action when checkbox value changes

I'm looking for a way to execute controller actions whenever i click and change a ui-checkbox component. With the current master branch it's possible to write a template like this:

{{ui-checkbox class="toggle"
              checked=reminderIsEnabled
              label=(boolean-to-yesno reminderIsEnabled)
              action="saveSettings"}}

While master is not compatible with Ember 2.0 I'm using the prep-1.0 branch where the template above won't run the default action any more.

Is there another way to declare default actions in the template? I don't want to rely on observers for this case.

prep-1.0: Modal: approve handler does not get called when clicking on button

I just cloned the semantic-ui-ember project, checked out the prep-1.0 branch, and run npm install && bower install && ember serve.

I selected the menu item modal and clicked and the button "Open Profile", then clicked the green and black button. The modal closes but no alert dialog appears. Guess this is a bug 😉

Let me know if u need further information.

[Dropdown] Usage of the onLabelCreate($label) callback

same as here Semantic-Org/Semantic-UI#2977
but calling $(this) I'm getting controller's instance.

Grids don't seem to be working in an Ember CLI app

On an Ember CLI app 0.2.3. The grid displays funny. As in, instead of the grid taking up 1440px, it takes up 1444px, which forces the horizontal scroll bar to show.

I have app/pods/application/template.hbs

    <div class="ui grid">
      <div class="row">
        <div class="four wide column green">4</div>
        <div class="four wide column blue">4</div>
        <div class="four wide column yellow">4</div>
        <div class="four wide column red">4</div>
      </div>
    </div>

It looks like:

Any ideas?

Closing modal on approve

By default after approval, modal view doesn't get dismissed. But calling this.send('closeModal'); doesn't respect transition settings from the view. Also returns this error Uncaught TypeError: Cannot read property 'height' of undefined

How can i change color variables, like @grey ?

HTML markup in Dropdown?

Hi,

Is there a way to add HTML markup to dropdown items? For example, a label or icon next to an item name entry? Maybe something like this, which would include a template/partial for rendering the item:

{{ui-dropdown content=myContent optionLabelTemplate="foo"}}

The template would need to be aware of which item it is rendering so it can access its properties.

Any thoughts?

Regards,
Justin

sidebar unexpected errors in conosle

I'm trying to use semantic-ui sidebar according to https://github.com/Semantic-Org/Semantic-UI-Ember/tree/prep-1.0#sidebar

templates\application.hbs

{{#ui-sidebar class="ui left vertical menu"}}
  <a class="item"> 1 </a>
  <a class="item"> 2 </a>
  <a class="item"> 3 </a>
{{/ui-sidebar}}
<div class="pusher">
  <h2 id="title">Welcome to Ember</h2>
  <a {{action 'show_sidebar'}}> SHOW SIDEBAR </a>
  {{outlet}}
</div>

controllers\application.js

import Ember from 'ember';
export default Ember.Controller.extend({
  actions:{
      show_sidebar(){
        $('.ui.sidebar').sidebar('toggle');
      }
    }
});

output result:

<body class="ember-application pushable">
  <div id="ember422" class="ui left vertical menu ember-view ui sidebar">
    <a class="item"> 1 </a>
    <a class="item"> 2 </a>
    <a class="item"> 3 </a>
  </div>
  <script src="./xxxxxx_files/vendor.js"></script>
  <script src="./xxxxxx_files/xxxxxx.js"></script>
  <div class="pusher">
    <div data-label="layer-div" style="display: none;"></div>
    <div data-label="preview-div" style="pointer-events: none; display: none;"></div>
    <div id="ember400" class="ember-view">
      <div class="pusher">
        <h2 id="title">Welcome to Ember</h2>
        <a data-ember-action="423"> SHOW SIDEBAR </a>
      </div>
    </div>
  </div>
</body>

But i get this message in console

semantic.js:15229Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusher element
semantic.js:14753Sidebar: Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag <div id=​"ember422" class=​"ui left vertical menu ember-view ui sidebar">​…​</div>

Sidebar seems to work correctly but i don't know how to fix messages in console.

Ember & ember cli version info

DEBUG: Ember      : 2.0.0
ember.debug.js:5165 DEBUG: Ember Data : 2.0.0
ember.debug.js:5165 DEBUG: jQuery     : 1.11.3

ember -v
version: 1.13.8
node: 4.1.1
npm: 2.13.4
os: linux x64

Add a disabled to the ui-dropdown component

I'm migrating my UI to use Semantic UI and hit a little sticking point with preventing users from selecting an item in a select box. Currently; the select view has a disabled property. Would it be possible to add this as a property to the component rather than a class?

Here is an example of how it could be setup:

{{ui-dropdown
    optionValuePath='content.id'
    optionLabelPath='content.label'
    disabled=is_own
    content=roles
    value=model.role
    class='ui selection dropdown'}}

Thanks!

Ui-radio with object not `checked`

Hello and thank you for this project.

I'm trying to use the ui-radioand setting the value and current to objects, it does the binding well, but it doesn't check the one that is already pre-selected.

{{#each shippingMethod in shippingMethods}}
  <div class="field">
    {{ui-radio name="shippingMethod" label=shippingMethod.name value=shippingMethod current=model.shippingMethod}}
  </div>
{{/each}}

Ember-based demo

It's hard to decide in favor of an Ember addon if the addon does not provide a live demo.

Please add one and publish it via gh-pages. Thank you. ^_^

TypeError: Cannot read property 'set' of undefined

When I served the production version of my application issuing the openModal action led to the following error:
TypeError: Cannot read property 'set' of undefined at exports.default.Ember.default.Mixin.create.actions.openModal (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:72591:21) at Object.triggerEvent (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:33812:36) at trigger (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:53760:16) at Object.Router.trigger (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:52484:9) at EmberObject.default.extend.send (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:33310:40) at mixin.Mixin.create.send (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:36968:29) at confirm (http://localhost:4200/assets/my-blog-aa713d0569e9c7329f64b9279bff4503.js:118:14) at mixin.Mixin.create.send (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:36961:54) at runRegisteredAction (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:28506:25) at Object.Backburner.run (http://localhost:4200/assets/vendor-f3c503d5f352702ca4f036b6c6b3aea8.js:10778:27)

Any idea what I am doing wrong?

Dropdown features

Is it possible to use "multiple select"? Or search or images in content? Like examples on page: http://semantic-ui.com/modules/dropdown.html

I also can't figure optionValuePath. I have always get "model.label" in "selection" variable.

{{ui-dropdown
content=model
optionValuePath="content.id"
optionLabelPath="content.label"
value=selection
prompt="Select"
}}

Modal approval click closes modal but doesn't trigger callback

The following set up doesn't seem to work for me. I have a ui-modal like:

{{#ui-modal name="update" class="basic" onApprove=( action "update")}}
  // ...
  <div class="actions">
    <div class="ui approve button">OK</div>
  </div>
{{/ui-modal}}

and the action set as well:

UpdateComponent = Ember.Component.extend
  actions:
      update: () ->
        alert('updated')

Clicking the OK approval button closes the modal, but the alert is never fired. I am using the prep-1.0 branch and changed from approve to onApprove but can't get this to work.

Are all module callbacks exposed?

I've seen a couple examples in the readme where the module callback was exposed for parent actions. Is this the case for all module callbacks? If not, it would be nice if they were. Ex:

{{ui-modal name="foobar" onHide=(action "hidingModal")}}

Dropdown Value Not Set

After setting the content and value for a dropdown after an AJAX request, the value isn't being properly set.

Steps to reproduce:

1. Add dropdown, bind content and value.
2. Fill the bound fields via AJAX request.
3. Notice that the placeholder is selected rather than the value set.

This is not an issue as long as both content and value are pre-filled.

Icons font with ember-cli

The font-awesome icons.* font files are 404-ing on page load with ember-cli. In semantic.css the src property is src: url("themes/default/assets/fonts/icons.eot"); but the font assets are not making it to the dist folder so they can be served by ember-cli.

Dropdown Items not Clickable

When using ui-dropdown, the elements in the dropdown are not clickable.

After debugging, it looks like this is caused by the fact that the content for the dropdown is being set inside the then block of a promise. The Semantic component is only being initialized by BaseMixin.didInsertElement which doesn't fire in this case.

Provide backward compatibility for the value binding breaking change on ui-dropdown

Just to make sure we're not breaking apps we need to detect if value is bound too and update it onChange -- The 0.9.1 release changed it to selected.

Changing the site theme not possible?

I have installed Semantic-UI-Ember into my ember-cli app and it looks like the default theme is working, however, I would like to change the default theme to one of the other prepackaged themes (like github).

It looks like your project is not using Gulp, which is what Semantic uses for its build, so I assume changing only the theme.config file will not work. In this case, why is it even necessary to include all the Semantic-UI project, rather than simply the default .css, .js and font files?

Is it intended that we can use the build tools in the semantic-ui directory ourselves?

Sorry if I am missing something obvious...new to this system. ;^)

Two way sync of dropdown value

If I have a dropdown like

{{#ui-dropdown class="selection" onChange=(action 'change') value=variable}}
// something
{{/ui-dropdown}}

changing variable changes dropdown's value internally, but the does not update the display

Expose Module Usage Behaviors as Ember Actions

It would be nice to have each modules usage behaviors (I think that's what Semantic UI calls them) be exposed as ember component actions. For example; a sidebar "toggle" behavior/method:

actions: {
  toggle() {
    this.$().sidebar('toggle');
  }
}

Then code that has access to the sidebar instance (parent/child component, controller, whatever) can call upon the action instead of using the jQuery plugin. Seems more Ember'ish anyway.

sidebarComponent.send('toggle');

I'd be willing to work on a PR if I could get some guidance on how you'd like to see it implemented.