Merge pull request #953 from github-cyprien/add-clearable-and-chips-o…

…ptions-to-combobox

Add clearable and chips options to combobox

docs/nodes/widgets/ui-dropdown.md

@@ -12,6 +12,12 @@ props:
     Allow Multiple:
         description: Whether or not a user can select multiple options, if so, checkboxes are shown, and value is emitted in an array.
         dynamic: true
+    Chips:
+        description: Show selected elements in chips.
+        dynamic: false        
+    Clearable:
+        description: Clear selection with button.
+        dynamic: false        
 dynamic:
     Label:
         payload: msg.ui_update.label
@@ -62,3 +68,6 @@ To make a single selection, pass in the `value` of the option as `msg.payload`,
 
 ![Example of a dropdown](/images/node-examples/ui-dropdown.png "Example of a dropdown"){data-zoomable}
 *Example of a rendered dropdown in a Dashboard.*
+
+![Example of a multiple selection dropdown](/images/node-examples/ui-dropdown-multi-chips-clearable.png "Example of a multiple selection dropdown"){data-zoomable}
+*Dropdowm with multiple selection, chips and clear button.*

nodes/widgets/ui_dropdown.html

@@ -26,6 +26,8 @@
                 height: { value: 0 },
                 passthru: { value: false },
                 multiple: { value: false },
+                chips: { value: false },
+                clearable: { value: false },
                 options: {
                     value: [{ value: '', label: '' }],
                     validate: function (v) {
@@ -48,6 +50,12 @@
                 if (this.multiple === undefined) {
                     $('#node-input-multiple').prop('checked', false)
                 }
+                if (this.chips === undefined) {
+                    $('#node-input-chips').prop('checked', false)
+                }    
+                if (this.clearable === undefined) {
+                    $('#node-input-clearable').prop('checked', false)
+                }                              
                 // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
                 // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
                 if (RED.nodes.subflow(this.z)) {
@@ -213,6 +221,14 @@
         <label style="width:auto" for="node-input-multiple"><i class="fa fa-th-list"></i> Allow multiple selections from list: </label>
         <input type="checkbox" checked id="node-input-multiple" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
     </div>
+    <div class="form-row">
+        <label style="width:auto" for="node-input-chips"><i class="fa fa-circle-o"></i> Show selected elements in chips </label>
+        <input type="checkbox" checked id="node-input-chips" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
+    </div>
+    <div class="form-row">
+        <label style="width:auto" for="node-input-clearable"><i class="fa fa-times"></i> Clear selection with button </label>
+        <input type="checkbox" checked id="node-input-clearable" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
+    </div>    
     <div class="form-row">
         <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
         <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">

ui/src/widgets/ui-dropdown/UIDropdown.vue

@@ -5,6 +5,8 @@
         :class="className"
         :label="label"
         :multiple="multiple"
+        :chips="chips"
+        :clearable="clearable"
         :items="options"
         item-title="label"
         item-value="value"
@@ -34,7 +36,9 @@ export default {
             items: null,
             dynamic: {
                 label: null,
-                multiple: null
+                multiple: null,
+                chips: null,
+                clearable: null
             }
         }
     },
@@ -66,6 +70,12 @@ export default {
         multiple: function () {
             return this.dynamic.multiple === null ? this.props.multiple : this.dynamic.multiple
         },
+        chips: function () {
+            return this.dynamic.chips === null ? this.props.chips : this.dynamic.chips
+        },   
+        clearable: function () {
+            return this.dynamic.clearable === null ? this.props.clearable : this.dynamic.clearable
+        },               
         label: function () {
             return this.dynamic.label !== null ? this.dynamic.label : this.props.label
         }
@@ -115,10 +125,10 @@ export default {
                 }
                 if (typeof updates.label !== 'undefined') {
                     this.dynamic.label = updates.label
-                }
+                }       
                 if (typeof updates.multiple !== 'undefined') {
                     this.dynamic.multiple = updates.multiple
-                }
+                }                
             }
         },
         onChange () {