updated app

first-project/node_modules/derby/test/fixtures/components/ui/dropdown/index.html

@@ -0,0 +1,15 @@
+<dropdown:>
+  <!-- a :self path alias is automatically created per component -->
+  <!-- x-as can be used to pass a reference to an element to the script -->
+  <div x-as="container" class="{#if :self.open}open{/}">
+    <button x-bind="click: clickButton">{{{value}}} <i class="caret"></i></button>
+    <menu x-bind="click: clickMenu">
+      {{{#each list}}}
+        {{#if separator}}
+          <hr>
+        {{else}}
+          <li>{{text}}</li>
+        {{/}}
+      {{{/}}}
+    </menu>
+  </div>

first-project/node_modules/derby/test/fixtures/components/ui/dropdown/index.js

@@ -0,0 +1,29 @@
+// Components must export a create function
+
+// Components are passed a scoped model underneath _$component.{uid}
+
+exports.create = function(self, dom, elements) {
+  var container = elements.container
+    , open = self.at('open')
+
+  // Listeners added inside of a component should be automatically
+  // removed when the instance is removed from the DOM
+  dom.addListener(document.documentElement, 'click', function(e) {
+    if (!container.contains(e.target)) {
+      open.set(false)
+    }
+  })
+
+  exports.clickButton = function() {
+    open.set(!open.get())
+  }
+
+  exports.clickMenu = function(e, el) {
+    var item = model.at(el)
+      , value = item.get()
+    open.set(false)
+    if (value.text == null) return
+    self.set('value', value.text)
+    self.set('index', +item.leaf())
+  }
+}