Added support for uk-sortable.

.gitignore

@@ -16,6 +16,7 @@
 npm-debug.log*
 yarn-error.log
 testem.log
+.DS_Store
 
 # ember-try
 .node_modules.ember-try/

addon/components/uk-sortable.js

@@ -0,0 +1,82 @@
+/* global UIkit */
+import Component from '@ember/component';
+import { A } from '@ember/array';
+import { dasherize } from '@ember/string';
+import { set } from '@ember/object';
+
+export default Component.extend({
+  classNames: ['uk-sortable'],
+  attributeBindings: ['ukSortable:uk-sortable'],
+
+  ukSortable: '',
+
+  // Component Options
+  group: null,
+  animation: null,
+  threshold: null,
+  clsItem: null,
+  clsPlaceholder: null,
+  clsDrag: null,
+  clsDragState: null,
+  clsBase: null,
+  clsNoDrag: null,
+  clsEmpty: null,
+  clsCustom: null,
+  handle: null,
+
+  //Events
+  // All an action as a named parameter named `action`.
+  ukSortStart: null,
+  ukSortStop: null,
+  ukSortMoved: null,
+  ukSortAdded: null,
+  ukSortRemoved: null,
+
+  setEvents() {
+    let events = {
+      start: this.ukSortStart,
+      stop: this.ukSortStop,
+      moved: this.ukSortMoved,
+      added: this.ukSortAdded,
+      removed: this.ukSortRemoved
+    };
+
+    for (let event in events) {
+      if (events[event] !== null) {
+        UIkit.util.on(this.element, event, events[event]);
+      }
+    }
+  },
+
+  setOptions() {
+    let ukOptions = A();
+    let options = {
+      group: this.group,
+      animation: this.animation,
+      threshold: this.threshold,
+      clsItem: this.clsItem,
+      clsPlaceholder: this.clsPlaceholder,
+      clsDrag: this.clsDrag,
+      clsDragState: this.clsDragState,
+      clsBase: this.clsBase,
+      clsNoDrag: this.clsNoDrag,
+      clsEmpty: this.clsEmpty,
+      clsCustom: this.clsCustom,
+      handle: this.handle
+    };
+
+    for (let option in options) {
+      if (options[option] !== null) {
+        ukOptions.push(`${dasherize(option)}: ${options[option]}`);
+      }
+    }
+
+    set(this, 'ukSortable', ukOptions.join('; '));
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+    this.setEvents();
+    this.setOptions();
+  }
+});

addon/templates/components/uk-sortable.hbs

@@ -0,0 +1 @@
+{{yield}}

app/components/uk-sortable.js

@@ -0,0 +1 @@
+export { default } from 'ember-uikit/components/uk-sortable';

tests/dummy/app/router.js

@@ -14,6 +14,7 @@ Router.map(function() {
     this.route('icon');
     this.route('label');
     this.route('list');
+    this.route('sortable');
     this.route('spinner');
     this.route('subnav');
     this.route('switcher');

tests/dummy/app/templates/application.hbs

@@ -13,6 +13,7 @@
             <li>{{#link-to 'components.icon'}}Icon{{/link-to}}</li>
             <li>{{#link-to 'components.label'}}Label{{/link-to}}</li>
             <li>{{#link-to 'components.list'}}List{{/link-to}}</li>
+            <li>{{#link-to 'components.sortable'}}Sortable{{/link-to}}</li>
             <li>{{#link-to 'components.spinner'}}Spinner{{/link-to}}</li>
             <li>{{#link-to 'components.subnav'}}Subnav{{/link-to}}</li>
             <li>{{#link-to 'components.switcher'}}Switcher{{/link-to}}</li>
@@ -60,4 +61,4 @@
       Licensed under the <a href="https://opensource.org/licenses/mit-license.php">MIT license</a>.
     </p>
   </div>
-</div>
+</div>

tests/dummy/app/templates/components/sortable.hbs

@@ -0,0 +1,174 @@
+<h2>Sortable</h2>
+
+<div class='uk-padding uk-box-shadow-medium uk-margin'>
+  {{#uk-sortable tagName='ul' class='uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center uk-sortable uk-grid'}}
+    <li class='uk-grid-margin uk-first-column'>
+        <div class='uk-card uk-card-default uk-card-body'>Item 1</div>
+    </li>
+    <li class='uk-grid-margin'>
+        <div class='uk-card uk-card-default uk-card-body'>Item 5</div>
+    </li>
+    <li class='uk-grid-margin'>
+        <div class='uk-card uk-card-default uk-card-body'>Item 2</div>
+    </li>
+    <li class='uk-grid-margin'>
+        <div class='uk-card uk-card-default uk-card-body'>Item 7</div>
+    </li>
+    <li class='uk-grid-margin uk-first-column'>
+        <div class='uk-card uk-card-default uk-card-body'>Item 6</div>
+    </li>
+    <li class='uk-grid-margin'>
+        <div class='uk-card uk-card-default uk-card-body'>Item 3</div>
+    </li>
+    <li class='uk-grid-margin'>
+        <div class='uk-card uk-card-default uk-card-body'>Item 4</div>
+    </li>
+    <li class='uk-grid-margin'>
+        <div class='uk-card uk-card-default uk-card-body'>Item 8</div>
+    </li>
+  {{/uk-sortable}}
+</div>
+
+{{!-- {{#uk-switcher animation='uk-animation-fade' as |switcher|}}
+  {{#switcher.nav type='tab' as |nav|}}
+    {{#nav.component as |tab|}}
+      {{#tab.item}}Props{{/tab.item}}
+      {{#tab.item}}Yields{{/tab.item}}
+      {{#tab.item}}Example{{/tab.item}}
+    {{/nav.component}}
+  {{/switcher.nav}}
+
+  {{#switcher.content as |content|}}
+    {{#content.item}}
+      <div class='uk-overflow-auto'>
+        <table class='uk-table uk-table-divider'>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Default</th>
+              <th>Description</th>
+              <th>Demo</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>left</code></td>
+              <td><code>Boolean</code></td>
+              <td><code>false</code></td>
+              <td>Whether to enable left alignment</td>
+              <td>
+                {{input type='checkbox' class='uk-checkbox' checked=left}}
+              </td>
+            </tr>
+            <tr>
+              <td><code>right</code></td>
+              <td><code>Boolean</code></td>
+              <td><code>false</code></td>
+              <td>Whether to enable right alignment</td>
+              <td>
+                {{input type='checkbox' class='uk-checkbox' checked=right}}
+              </td>
+            </tr>
+            <tr>
+              <td><code>bottom</code></td>
+              <td><code>Boolean</code></td>
+              <td><code>false</code></td>
+              <td>Whether to enable bottom alignment</td>
+              <td>
+                {{input type='checkbox' class='uk-checkbox' checked=bottom}}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    {{/content.item}}
+    {{#content.item}}
+      <small class='uk-text-muted'>
+        The demo on the yielded components always counts for the first
+        appearance of said component.
+      </small>
+
+      <p>
+        <code>item</code>
+      </p>
+      <p>
+        The tab yields an <code>item</code> component which can be used to
+        create a navigation item inside the tab. The <code>item</code>
+        component takes the following properties:
+      </p>
+
+      <div class='uk-overflow-auto'>
+        <table class='uk-table uk-table-divider'>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Default</th>
+              <th>Description</th>
+              <th>Demo</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>active</code></td>
+              <td><code>Boolean</code></td>
+              <td><code>false</code></td>
+              <td>Whether the item is active</td>
+              <td>
+                {{input type='checkbox' class='uk-checkbox' checked=itemActive}}
+              </td>
+            </tr>
+            <tr>
+              <td><code>disabled</code></td>
+              <td><code>Boolean</code></td>
+              <td><code>false</code></td>
+              <td>Whether the item is disabled</td>
+              <td>
+                {{input type='checkbox' class='uk-checkbox' checked=itemDisabled}}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <p>
+        <code>link-item</code>
+      </p>
+      <p>
+        The tab yields an <code>link-item</code> component which behaves
+        almost the same way as <code>item</code> but is an ember
+        <code>link-to</code> component. The <code>link-item</code> component
+        takes the following properties:
+      </p>
+
+      <div class='uk-overflow-auto'>
+        <table class='uk-table uk-table-divider'>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Default</th>
+              <th>Description</th>
+              <th>Demo</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>disabled</code></td>
+              <td><code>Boolean</code></td>
+              <td><code>false</code></td>
+              <td>Whether the link item is disabled</td>
+              <td>
+                {{input type='checkbox' class='uk-checkbox' checked=linkItemDisabled}}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    {{/content.item}}
+    {{#content.item}}
+      {{code-snippet name='tab.hbs'}}
+    {{/content.item}}
+  {{/switcher.content}}
+{{/uk-switcher}} --}}

tests/integration/components/uk-sortable-test.js

@@ -0,0 +1,46 @@
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { setupComponentTest } from 'ember-mocha';
+import hbs from 'htmlbars-inline-precompile';
+import { find, triggerEvent } from 'ember-native-dom-helpers';
+
+describe('Integration | Component | uk sortable', function() {
+  setupComponentTest('uk-sortable', {
+    integration: true
+  });
+
+  it('renders sortable', function() {
+    this.render(hbs`{{uk-sortable}}`);
+    expect(find('[uk-sortable]')).to.be.ok;
+  });
+
+  it('has custom events', async function() {
+    this.set('sortStarted', false);
+    this.set('sortStopped', false);
+    this.set('sortMoved', false);
+    this.set('sortAdded', false);
+    this.set('sortRemoved', false);
+    this.render(
+      hbs`{{#uk-sortable
+        ukSortStart=(action (mut sortStarted) true)
+        ukSortStop=(action (mut sortStopped) true)
+        ukSortMoved=(action (mut sortMoved) true)
+        ukSortAdded=(action (mut sortAdded) true)
+        ukSortRemoved=(action (mut sortRemoved) true)
+      }}
+        <div />
+      {{/uk-sortable}}`
+    );
+    await triggerEvent('.uk-sortable', 'start');
+    await triggerEvent('.uk-sortable', 'stop');
+    await triggerEvent('.uk-sortable', 'moved');
+    await triggerEvent('.uk-sortable', 'added');
+    await triggerEvent('.uk-sortable', 'removed');
+
+    expect(this.get('sortStarted')).to.be.true;
+    expect(this.get('sortStopped')).to.be.true;
+    expect(this.get('sortMoved')).to.be.true;
+    expect(this.get('sortAdded')).to.be.true;
+    expect(this.get('sortRemoved')).to.be.true;
+  });
+});