select input component

data/index.html

@@ -39,28 +39,12 @@
             data-mode="2"
             data-name="color2" 
             data-label="Color 2">
-          </li>          
+          </li>    
-          <li class="form-row LedStripPatternSwitch" 
+          <li class="form-row ParamSelect"
-            data-group="stripPattern" 
+            data-label="Pattern"
-            data-id="1"
+            data-name="pattern"
-            data-mode="3"
+            data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]'
-            data-name="Rainbow" 
+            ></li>      
-            data-label="Rainbow">
-          </li>
-          <li class="form-row LedStripPatternSwitch" 
-            data-group="stripPattern" 
-            data-name="TheaterChase" 
-            data-label="Theater Chase" 
-            data-id="2"
-            data-mode="3">
-          </li>
-          <li class="form-row LedStripPatternSwitch" 
-            data-group="stripPattern" 
-            data-name="Scanner" 
-            data-label="Scanner" 
-            data-id="4"
-            data-mode="3">
-          </li>
         </ul>
       </div>
     </form>

data/script.js

@@ -60,7 +60,7 @@
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 8);
+/******/ 	return __webpack_require__(__webpack_require__.s = 9);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -10442,8 +10442,8 @@ return jQuery;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Mediator__ = __webpack_require__(5);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__DataStore__ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__DataStore__ = __webpack_require__(17);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__StoreAction__ = __webpack_require__(17);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__StoreAction__ = __webpack_require__(18);
 
 
 
@@ -10490,11 +10490,11 @@ class RestStore extends __WEBPACK_IMPORTED_MODULE_2__DataStore__["a" /* default
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mustache__ = __webpack_require__(12);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mustache__ = __webpack_require__(13);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mustache___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_mustache__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_jquery__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_jquery__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__data_DataField__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__data_DataField__ = __webpack_require__(14);
 
 
 
@@ -10547,7 +10547,7 @@ class Component {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(2);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__TextInput_html__ = __webpack_require__(15);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__TextInput_html__ = __webpack_require__(16);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__TextInput_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__TextInput_html__);
 
 
@@ -10585,7 +10585,7 @@ class TextInput extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* def
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(2);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Switch_html__ = __webpack_require__(18);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Switch_html__ = __webpack_require__(19);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Switch_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__Switch_html__);
 
 
@@ -10657,7 +10657,7 @@ class Mediator {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(2);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Slider_html__ = __webpack_require__(19);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Slider_html__ = __webpack_require__(20);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Slider_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__Slider_html__);
 
 
@@ -10695,7 +10695,41 @@ class Slider extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* defaul
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(2);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__ColorPicker_html__ = __webpack_require__(20);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Select_html__ = __webpack_require__(21);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Select_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__Select_html__);
+
+
+
+
+
+class Select extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* default */] {
+
+    constructor(ctx, node, template) {
+        super(ctx, node, template || __WEBPACK_IMPORTED_MODULE_2__Select_html___default.a);
+        this.render(this.config);
+    }
+
+    onChange(evt) {
+        console.log(evt.target.value);
+    }
+
+    subscribe() {
+        this.node.delegate('select', 'change', this.onChange.bind(this));
+    }
+
+}
+/* harmony export (immutable) */ __webpack_exports__["a"] = Select;
+
+
+/***/ }),
+/* 8 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__ColorPicker_html__ = __webpack_require__(22);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__ColorPicker_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__ColorPicker_html__);
 
 
@@ -10735,15 +10769,15 @@ class ColorPicker extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* d
 
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_App__ = __webpack_require__(9);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_App__ = __webpack_require__(10);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_exports__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__components_exports__ = __webpack_require__(11);
 
 
 
@@ -10843,7 +10877,7 @@ Sui.ready(() => {
 }); */
 
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10936,33 +10970,39 @@ class App {
 
 
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__base_Form_Form__ = __webpack_require__(11);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__base_Form_Form__ = __webpack_require__(12);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Form", function() { return __WEBPACK_IMPORTED_MODULE_0__base_Form_Form__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__base_Switch_Switch__ = __webpack_require__(4);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Switch", function() { return __WEBPACK_IMPORTED_MODULE_1__base_Switch_Switch__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__base_Slider_Slider__ = __webpack_require__(6);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return __WEBPACK_IMPORTED_MODULE_2__base_Slider_Slider__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__base_TextInput_TextInput__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__base_Select_Select__ = __webpack_require__(7);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "TextInput", function() { return __WEBPACK_IMPORTED_MODULE_3__base_TextInput_TextInput__["a"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Select", function() { return __WEBPACK_IMPORTED_MODULE_3__base_Select_Select__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__base_ColorPicker_ColorPicker__ = __webpack_require__(7);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__base_TextInput_TextInput__ = __webpack_require__(3);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return __WEBPACK_IMPORTED_MODULE_4__base_ColorPicker_ColorPicker__["a"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "TextInput", function() { return __WEBPACK_IMPORTED_MODULE_4__base_TextInput_TextInput__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__PresetSwitch__ = __webpack_require__(21);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__base_ColorPicker_ColorPicker__ = __webpack_require__(8);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "PresetSwitch", function() { return __WEBPACK_IMPORTED_MODULE_5__PresetSwitch__["a"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return __WEBPACK_IMPORTED_MODULE_5__base_ColorPicker_ColorPicker__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__ParamSlider__ = __webpack_require__(22);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__PresetSwitch__ = __webpack_require__(23);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamSlider", function() { return __WEBPACK_IMPORTED_MODULE_6__ParamSlider__["a"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "PresetSwitch", function() { return __WEBPACK_IMPORTED_MODULE_6__PresetSwitch__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__ParamText__ = __webpack_require__(23);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__ParamSlider__ = __webpack_require__(24);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamText", function() { return __WEBPACK_IMPORTED_MODULE_7__ParamText__["a"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamSlider", function() { return __WEBPACK_IMPORTED_MODULE_7__ParamSlider__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__ParamColor__ = __webpack_require__(24);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__ParamText__ = __webpack_require__(25);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamColor", function() { return __WEBPACK_IMPORTED_MODULE_8__ParamColor__["a"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamText", function() { return __WEBPACK_IMPORTED_MODULE_8__ParamText__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__ParamWs__ = __webpack_require__(25);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__ParamColor__ = __webpack_require__(26);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamWs", function() { return __WEBPACK_IMPORTED_MODULE_9__ParamWs__["a"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamColor", function() { return __WEBPACK_IMPORTED_MODULE_9__ParamColor__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__LedStripPatternSwitch__ = __webpack_require__(26);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__ParamWs__ = __webpack_require__(27);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "LedStripPatternSwitch", function() { return __WEBPACK_IMPORTED_MODULE_10__LedStripPatternSwitch__["a"]; });
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamWs", function() { return __WEBPACK_IMPORTED_MODULE_10__ParamWs__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__ParamSelect__ = __webpack_require__(28);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamSelect", function() { return __WEBPACK_IMPORTED_MODULE_11__ParamSelect__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__LedStripPatternSwitch__ = __webpack_require__(29);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "LedStripPatternSwitch", function() { return __WEBPACK_IMPORTED_MODULE_12__LedStripPatternSwitch__["a"]; });
+
+
 
 
 
@@ -10977,7 +11017,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11033,7 +11073,7 @@ class Form extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* default
 
 
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -11672,11 +11712,11 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
 
 /***/ }),
-/* 13 */
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__DataBinding__ = __webpack_require__(14);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__DataBinding__ = __webpack_require__(15);
 
 
 class DataField {
@@ -11704,7 +11744,7 @@ class DataField {
 
 
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11742,13 +11782,13 @@ class DataBinding {
 
 
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (function(module, exports) {
 
 module.exports = "<label for=\"{{name}}\">{{label}}</label>\n<input type=\"text\" class=\"{{name}}\" name=\"{{name}}\" placeholder=\"{{placeholder}}\">"
 
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11766,7 +11806,7 @@ class DataStore {
 
 
 /***/ }),
-/* 17 */
+/* 18 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11779,25 +11819,31 @@ class DataStore {
 
 
 /***/ }),
-/* 18 */
+/* 19 */
 /***/ (function(module, exports) {
 
 module.exports = "<label for=\"{{name}}\">{{label}}</label>\n<label class=\"switch {{name}}\" name=\"{{name}}\">\n  <input type=\"checkbox\" name=\"{{name}}\">\n  <span class=\"slider round\"></span>\n</label>"
 
 /***/ }),
-/* 19 */
+/* 20 */
 /***/ (function(module, exports) {
 
 module.exports = "<label>{{label}}</label>\n<input type=\"range\" name=\"{{name}}\" value=\"{{value}}\" min=\"{{min}}\" max=\"{{max}}\">"
 
 /***/ }),
-/* 20 */
+/* 21 */
+/***/ (function(module, exports) {
+
+module.exports = "<label for=\"{{name}}\">{{label}}</label>\n<select name=\"{{name}}\">\n    {{#entries}}\n        <option value=\"{{value}}\">{{text}}</option>\n    {{/entries}}\n</select>"
+
+/***/ }),
+/* 22 */
 /***/ (function(module, exports) {
 
 module.exports = "<label for=\"{{name}}\">{{label}}</label>\n<input type=\"color\" class=\"{{name}} ColorPicker\" name=\"{{name}}\">"
 
 /***/ }),
-/* 21 */
+/* 23 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11844,7 +11890,7 @@ class PresetSwitch extends __WEBPACK_IMPORTED_MODULE_1__base_Switch_Switch__["a"
 
 
 /***/ }),
-/* 22 */
+/* 24 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11875,7 +11921,7 @@ class ParamSlider extends __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__["a"
 
 
 /***/ }),
-/* 23 */
+/* 25 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11906,13 +11952,13 @@ class ParamText extends __WEBPACK_IMPORTED_MODULE_1__base_TextInput_TextInput__[
 
 
 /***/ }),
-/* 24 */
+/* 26 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPicker__ = __webpack_require__(7);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPicker__ = __webpack_require__(8);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
 
 
@@ -11949,7 +11995,7 @@ class ParamColor extends __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPick
 
 
 /***/ }),
-/* 25 */
+/* 27 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -11998,7 +12044,41 @@ class ParamWs extends __WEBPACK_IMPORTED_MODULE_1__base_TextInput_TextInput__["a
 
 
 /***/ }),
-/* 26 */
+/* 28 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__ = __webpack_require__(7);
+
+
+
+
+class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a" /* default */] {
+
+    constructor(ctx, node) {
+        super(ctx, node);
+        this.render({
+            label: this.config.label,
+            name: this.config.name,
+            entries: this.config.entries
+        });
+    }
+
+    onChange(evt) {
+        let obj = {};
+        obj[this.config.name] = evt.target.value;
+        this.ctx.ws.send(JSON.stringify(obj));
+        
+    }
+
+}
+/* harmony export (immutable) */ __webpack_exports__["a"] = ParamSelect;
+
+
+/***/ }),
+/* 29 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

data/styles.css

@@ -252,14 +252,14 @@ form .form-row input[type="checkbox"] {
   background: transparent;
   border: none;
   color: #eeeeee;
+  border-bottom: solid 1px #097479;
 }
 .sui input[type="text"]:focus,
 .sui input[type="password"]:focus,
 .sui input[type="text"]:hover,
 .sui input[type="password"]:hover {
   outline: none;
-  border-bottom: solid 1px #097479;
+  border-bottom: 1px solid #0eb8c0;
-  box-shadow: 3px #097479;
 }
 .sui input[type="checkbox"] {
   transform: scale(2);
@@ -268,6 +268,22 @@ form .form-row input[type="checkbox"] {
   flex: none !important;
   background-color: transparent;
   border: 0;
-  height: 50px;
+  height: 42px;
-  width: 75px;
+  width: 42px;
+}
+.sui select {
+  padding: .5em;
+  color: #eeeeee;
+  background: none;
+  border: none;
+  border-bottom: solid 1px #097479;
+}
+.sui select:focus,
+.sui select:hover {
+  outline: none;
+  border: none;
+  border-bottom: solid 1px #0eb8c0 !important;
+}
+.sui select option {
+  background: #333333;
 }

data/test-controls.html

@@ -12,7 +12,7 @@
 
 <body class="sui">
   <div class="content">
-      <form class="param-control container  open collapsible">
+<!--       <form class="param-control container  open collapsible">
           <span class="heading">Debug</span>
           <div class="content">
               <ul>
@@ -25,33 +25,45 @@
               </ul>
             <br>
           </div>
-        </form>
+        </form> -->
     <form class="param-control container collapsible open" action="#" method="POST">
       <span class="heading">Strip</span>
       <div class="content">
         <ul>
           <li class="form-row ParamColor" 
+            data-mode="2"
             data-name="color" 
-            data-label="Color" 
+            data-label="Color">
-            data-endpoint="/patterns">
           </li>
+          <li class="form-row ParamColor" 
+            data-mode="2"
+            data-name="color2" 
+            data-label="Color 2">
+          </li>    
+          <li class="form-row ParamSelect"
+            data-label="Pattern"
+            data-name="pattern"
+            ></li>      
           <li class="form-row LedStripPatternSwitch" 
             data-group="stripPattern" 
+            data-id="1"
+            data-mode="3"
             data-name="Rainbow" 
-            data-label="Rainbow" 
+            data-label="Rainbow">
-            data-endpoint="/strip/pattern">
-          </li>
-          <li class="form-row LedStripPatternSwitch" 
-            data-group="stripPattern" 
-            data-name="Scanner" 
-            data-label="Scanner" 
-            data-endpoint="/strip/pattern">
           </li>
           <li class="form-row LedStripPatternSwitch" 
             data-group="stripPattern" 
             data-name="TheaterChase" 
             data-label="Theater Chase" 
-            data-endpoint="/strip/pattern">
+            data-id="2"
+            data-mode="3">
+          </li>
+          <li class="form-row LedStripPatternSwitch" 
+            data-group="stripPattern" 
+            data-name="Scanner" 
+            data-label="Scanner" 
+            data-id="4"
+            data-mode="3">
           </li>
         </ul>
       </div>
@@ -59,6 +71,7 @@
     <div class="settings container collapsible open">
       <span class="heading">WiFi Settings</span>
       <div class="content">
+        <!-- <div class="Form" data-name="configForm" data-endpoint="/config.json"></div> -->
         <form action="/wifiConfig" method="POST">
           <!-- <li class="form-row">
             <label for="ap">AP Mode</label>

src/app/components/ParamSelect.js

@@ -0,0 +1,23 @@
+
+import $ from 'jquery';
+import Select from './base/Select/Select';
+
+export default class ParamSelect extends Select {
+
+    constructor(ctx, node) {
+        super(ctx, node);
+        this.render({
+            label: this.config.label,
+            name: this.config.name,
+            entries: this.config.entries
+        });
+    }
+
+    onChange(evt) {
+        let obj = {};
+        obj[this.config.name] = evt.target.value;
+        this.ctx.ws.send(JSON.stringify(obj));
+        
+    }
+
+}

src/app/components/base/Select/Select.html

@@ -0,0 +1,6 @@
+<label for="{{name}}">{{label}}</label>
+<select name="{{name}}">
+    {{#entries}}
+        <option value="{{value}}">{{text}}</option>
+    {{/entries}}
+</select>

src/app/components/base/Select/Select.js

@@ -0,0 +1,21 @@
+
+import $ from 'jquery';
+import Component from '../../../core/Component';
+import markup from './Select.html';
+
+export default class Select extends Component {
+
+    constructor(ctx, node, template) {
+        super(ctx, node, template || markup);
+        this.render(this.config);
+    }
+
+    onChange(evt) {
+        console.log(evt.target.value);
+    }
+
+    subscribe() {
+        this.node.delegate('select', 'change', this.onChange.bind(this));
+    }
+
+}

src/app/components/exports.js

@@ -1,6 +1,7 @@
 export { default as Form } from './base/Form/Form'
 export { default as Switch } from './base/Switch/Switch'
 export { default as Slider } from './base/Slider/Slider'
+export { default as Select } from './base/Select/Select'
 export { default as TextInput } from './base/TextInput/TextInput'
 export { default as ColorPicker } from './base/ColorPicker/ColorPicker'
 export { default as PresetSwitch } from './PresetSwitch'
@@ -8,4 +9,5 @@ export { default as ParamSlider } from './ParamSlider'
 export { default as ParamText } from './ParamText'
 export { default as ParamColor } from './ParamColor'
 export { default as ParamWs } from './ParamWs'
+export { default as ParamSelect } from './ParamSelect'
 export { default as LedStripPatternSwitch } from './LedStripPatternSwitch'

src/pages/index.html

@@ -39,28 +39,12 @@
             data-mode="2"
             data-name="color2" 
             data-label="Color 2">
-          </li>          
+          </li>    
-          <li class="form-row LedStripPatternSwitch" 
+          <li class="form-row ParamSelect"
-            data-group="stripPattern" 
+            data-label="Pattern"
-            data-id="1"
+            data-name="pattern"
-            data-mode="3"
+            data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]'
-            data-name="Rainbow" 
+            ></li>      
-            data-label="Rainbow">
-          </li>
-          <li class="form-row LedStripPatternSwitch" 
-            data-group="stripPattern" 
-            data-name="TheaterChase" 
-            data-label="Theater Chase" 
-            data-id="2"
-            data-mode="3">
-          </li>
-          <li class="form-row LedStripPatternSwitch" 
-            data-group="stripPattern" 
-            data-name="Scanner" 
-            data-label="Scanner" 
-            data-id="4"
-            data-mode="3">
-          </li>
         </ul>
       </div>
     </form>

src/pages/test-controls.html

@@ -12,7 +12,7 @@
 
 <body class="sui">
   <div class="content">
-      <form class="param-control container  open collapsible">
+<!--       <form class="param-control container  open collapsible">
           <span class="heading">Debug</span>
           <div class="content">
               <ul>
@@ -25,33 +25,45 @@
               </ul>
             <br>
           </div>
-        </form>
+        </form> -->
     <form class="param-control container collapsible open" action="#" method="POST">
       <span class="heading">Strip</span>
       <div class="content">
         <ul>
           <li class="form-row ParamColor" 
+            data-mode="2"
             data-name="color" 
-            data-label="Color" 
+            data-label="Color">
-            data-endpoint="/patterns">
           </li>
+          <li class="form-row ParamColor" 
+            data-mode="2"
+            data-name="color2" 
+            data-label="Color 2">
+          </li>    
+          <li class="form-row ParamSelect"
+            data-label="Pattern"
+            data-name="pattern"
+            ></li>      
           <li class="form-row LedStripPatternSwitch" 
             data-group="stripPattern" 
+            data-id="1"
+            data-mode="3"
             data-name="Rainbow" 
-            data-label="Rainbow" 
+            data-label="Rainbow">
-            data-endpoint="/strip/pattern">
-          </li>
-          <li class="form-row LedStripPatternSwitch" 
-            data-group="stripPattern" 
-            data-name="Scanner" 
-            data-label="Scanner" 
-            data-endpoint="/strip/pattern">
           </li>
           <li class="form-row LedStripPatternSwitch" 
             data-group="stripPattern" 
             data-name="TheaterChase" 
             data-label="Theater Chase" 
-            data-endpoint="/strip/pattern">
+            data-id="2"
+            data-mode="3">
+          </li>
+          <li class="form-row LedStripPatternSwitch" 
+            data-group="stripPattern" 
+            data-name="Scanner" 
+            data-label="Scanner" 
+            data-id="4"
+            data-mode="3">
           </li>
         </ul>
       </div>
@@ -59,6 +71,7 @@
     <div class="settings container collapsible open">
       <span class="heading">WiFi Settings</span>
       <div class="content">
+        <!-- <div class="Form" data-name="configForm" data-endpoint="/config.json"></div> -->
         <form action="/wifiConfig" method="POST">
           <!-- <li class="form-row">
             <label for="ap">AP Mode</label>

src/styles/form/color.less

@@ -2,6 +2,6 @@
     flex: none !important;
     background-color: transparent;
     border: 0;
-    height: 50px;
+    height: 42px;
-    width: 75px;
+    width: 42px;
 }

src/styles/form/input.less

@@ -9,10 +9,10 @@
         background: transparent;
         border: none;
         color: @color-white;
+        border-bottom: solid 1px @color-main;
         &:focus, &:hover {
             outline: none;
-            border-bottom: solid 1px @color-main;
+            border-bottom: 1px solid @color-main-light;
-            box-shadow: 3px @color-main;
         }
     }
     input[type="checkbox"] {

src/styles/form/select.less

@@ -0,0 +1,17 @@
+.sui {
+    select {
+        padding: .5em;
+        color: @color-white;
+        background: none;
+        border: none;
+        border-bottom: solid 1px @color-main;
+        &:focus, &:hover {
+            outline: none;
+            border: none;
+            border-bottom: solid 1px @color-main-light  !important;
+        }
+        option {
+            background: @color-container;
+        }
+    }
+}

src/styles/main.less

@@ -9,3 +9,4 @@
 @import "form/layout.less";
 @import "form/input.less";
 @import "form/color.less";
+@import "form/select.less";