adding label for selected counter, adding selected default

README.md

@@ -42,6 +42,7 @@ Default Options for Start
 import observable from '@riotjs/observable'
 
 let store = observable({
+
     locations: [{
         'label' : 'A',
         'value' : 'a'
@@ -74,23 +75,35 @@ let store = observable({
         'value' : 'j'
     }],
 
-    query(value) {
+    queryOptions(value) {
         if (value !== undefined) {
             const results = []
 
-            // run through locations and check string contains value
             for (let i = 0; i < this.locations.length; i++) {
                 if (this.locations[i].value.includes(value)) {
                     results.push(this.locations[i])
                 }
             }
 
-            this.trigger('update', results)
+            this.trigger('update.options', results)
         } else {
+            this.trigger('update.options', this.locations)
+        }
+    },
+
+    querySelected(values) {
+
+        const results = []
 
-            // if value is undefined, adding all locations
+        for (let i = 0; i < values.length; i++) {
-            this.trigger('update', this.locations)
+            for (let j = 0; j < this.locations.length; j++) {
+                if (this.locations[j].value === values[i]) {
+                    results.push(this.locations[j])
+                }
+            }
         }
+
+        this.trigger('update.selected', results)
     }
 })
 ```

example/assets-manifest.json

@@ -1,5 +1,5 @@
 {
     "/example/js/spritemap.js": "/example/js/spritemap.js?version=7ce719c9e00cdc31c694d971b9a5e812",
-    "/example/js/example.js": "/example/js/example.js?version=2451e89d416b448c318a4c3866f1ebf8",
+    "/example/js/example.js": "/example/js/example.js?version=d36f184da8866862da78caa577eeac1b",
-    "/example/css/styles.css": "/example/css/styles.css?version=aa01e6a7dccff39e3f40dcf35c9e9576"
+    "/example/css/styles.css": "/example/css/styles.css?version=ba6581d3fd3989f7bda152d185e7a2ef"
 }

example/css/styles.css

@@ -2266,6 +2266,10 @@ svg.field-choice__checked {
  *
  */
 
+.justify-content-end {
+  justify-content: end;
+}
+
 .field-select__options-panel {
   overflow-x: scroll;
   max-height: 15vh;

example/index.html

@@ -47,7 +47,13 @@
                     <div class="field-group">
                         <label class="field-label">
                             Locations (Multiple + Filter)
-                            <tiny-field-select-api multiple searchable name="location" placeholder-filter="Filter Items"></tiny-field-select-api>
+                            <tiny-field-select-api multiple searchable name="location"></tiny-field-select-api>
+                        </label>
+                    </div>
+                    <div class="field-group">
+                        <label class="field-label">
+                            Locations (Multiple + Default)
+                            <tiny-field-select-default multiple name="location"></tiny-field-select-default>
                         </label>
                     </div>
                 </form>
@@ -94,6 +100,11 @@
             riot.mount('tiny-field-select-api', {
                 store: LocationStore
             })
+
+            riot.mount('tiny-field-select-default', {
+                store: LocationDefaultStore,
+                selected: [ 'f', 'd' ]
+            })
         })
     </script>
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tiny-components/select",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "Select with filter for Desktop and Mobile",
     "repository": {
         "type": "git",

src/example.js

@@ -37,7 +37,7 @@ window.LocationStore = observable({
         'value' : 'j'
     }],
 
-    query(value) {
+    queryOptions(value) {
         if (value !== undefined) {
             const results = []
 
@@ -47,12 +47,94 @@ window.LocationStore = observable({
                 }
             }
 
-            this.trigger('update', results)
+            this.trigger('update.options', results)
         } else {
-            this.trigger('update', this.locations)
+            this.trigger('update.options', this.locations)
         }
+    },
+
+    querySelected(values) {
+
+        const results = []
+
+        for (let i = 0; i < values.length; i++) {
+            for (let j = 0; j < this.locations.length; j++) {
+                if (this.locations[j].value === values[i]) {
+                    results.push(this.locations[j])
+                }
+            }
+        }
+
+        this.trigger('update.selected', results)
+    }
+})
+
+window.LocationDefaultStore = observable({
+
+    locations: [{
+        'label' : 'A',
+        'value' : 'a'
+    },{
+        'label' : 'B',
+        'value' : 'b'
+    },{
+        'label' : 'C',
+        'value' : 'c'
+    },{
+        'label' : 'D',
+        'value' : 'd'
+    },{
+        'label' : 'E',
+        'value' : 'e'
+    },{
+        'label' : 'F',
+        'value' : 'f'
+    },{
+        'label' : 'G',
+        'value' : 'g'
+    },{
+        'label' : 'H',
+        'value' : 'h'
+    },{
+        'label' : 'I',
+        'value' : 'i'
+    },{
+        'label' : 'J',
+        'value' : 'j'
+    }],
+
+    queryOptions(value) {
+        if (value !== undefined) {
+            const results = []
+
+            for (let i = 0; i < this.locations.length; i++) {
+                if (this.locations[i].value.includes(value)) {
+                    results.push(this.locations[i])
+                }
+            }
+
+            this.trigger('update.options', results)
+        } else {
+            this.trigger('update.options', this.locations)
+        }
+    },
+
+    querySelected(values) {
+
+        const results = []
+
+        for (let i = 0; i < values.length; i++) {
+            for (let j = 0; j < this.locations.length; j++) {
+                if (this.locations[j].value === values[i]) {
+                    results.push(this.locations[j])
+                }
+            }
+        }
+
+        this.trigger('update.selected', results)
     }
 })
 
 riot.register('tiny-field-select', Select)
 riot.register('tiny-field-select-api', Select)
+riot.register('tiny-field-select-default', Select)

src/select.riot

@@ -13,6 +13,11 @@
                 </button>
             </div>
             <div class="panel">
+                <div class="bar justify-content-end">
+                    <div class="bar__end">
+                        { state.selected.length } / { state.options.length } &#128455;
+                    </div>
+                </div>
                 <div class="field-select__options-panel">
                     <ul class="field-select__options-list">
                         <li class="{ getItemClasses(['field-select__options-item'], option) }" each={ option in state.options } onclick={ (event) => { handleToggle(event, option) } }>
@@ -81,7 +86,7 @@
 
                 // if store update, add data to options
                 if (this.props.store) {
-                    this.props.store.on('update', (data) => {
+                    this.props.store.on('update.options', (data) => {
 
                         if (this.state.selected.length > 0) {
                             for (let i = 0; i < this.state.selected.length; i++) {
@@ -104,7 +109,16 @@
                         this.update()
                     })
 
-                    this.props.store.query()
+                    this.props.store.queryOptions()
+
+                    if (this.props.selected) {
+                        this.props.store.on('update.selected', (data) => {
+                            this.state.selected = data 
+                            this.update()
+                        })
+
+                        this.props.store.querySelected(this.props.selected)
+                    }
                 }
 
                 // getting closet form-element and add reset
@@ -134,7 +148,7 @@
             handleResetSearchable(event) {
                 event.target.previousElementSibling.value = ''
                 this.state.query = ''
-                this.props.store.query(this.state.query)
+                this.props.store.queryOptions(this.state.query)
             },
 
             /**
@@ -143,7 +157,7 @@
              */
             handleOnKeyUp(event) {
                 this.state.query = event.target.value.trim()
-                this.props.store.query(this.state.query)
+                this.props.store.queryOptions(this.state.query)
             },
 
             /**

src/styles.scss

@@ -1,3 +1,7 @@
+.justify-content-end {
+    justify-content: end;
+}
+
 .field-select {
 
     &__options-panel {