adding disabled props

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=75055835e55f64e5398584bc38812765",
-    "/example/css/styles.css": "/example/css/styles.css?version=ba6581d3fd3989f7bda152d185e7a2ef"
+    "/example/js/example.js": "/example/js/example.js?version=9455356bf86236cbb26bff909feed586",
+    "/example/css/styles.css": "/example/css/styles.css?version=ab2e4c2ab96731939c29a93de815c70e"
 }

example/css/styles.css

@@ -2344,4 +2344,8 @@ svg.field-choice__checked {
   border-bottom: 0;
 }
 
+.field-select--disabled .panel, .field-select--disabled .sidebar__inner {
+  opacity: 0.5;
+}
+
 /*# sourceMappingURL=styles.css.map */

example/index.html

@@ -50,6 +50,12 @@
                             <tiny-field-select-api multiple searchable name="location"></tiny-field-select-api>
                         </label>
                     </div>
+                    <div class="field-group">
+                        <label class="field-label">
+                            Locations (Multiple + Filter)
+                            <tiny-field-select-api disabled multiple searchable name="location"></tiny-field-select-api>
+                        </label>
+                    </div>
                     <div class="field-group">
                         <label class="field-label">
                             Locations (Multiple + Default)

package.json

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

src/select.riot

@@ -1,5 +1,5 @@
 <tiny-field-select>
-    <div class="field-select">
+    <div class="{ getSelectClasses(['field-select']) }">
 
         <select name="{ props.name }" multiple style="display: none;">
             <option value="{ selected[ state.keys.value ] }" selected each={ selected in state.selected }></option>
@@ -7,7 +7,7 @@
         
         <div class="field-select__options">
             <div class="{ getFilterClasses(['field-select__options-filter']) }" if={ props.searchable !== undefined }>
-                <input type="text" class="field-text m-top-0" placeholder={ props.placeholderFilter } onkeyup={ (event) => { handleOnKeyUp(event) }} />
+                <input type="text" class="field-text m-top-0" placeholder={ props.placeholderFilter } onkeyup={ (event) => { handleOnKeyUp(event) }} disabled={ props.disabled !== undefined } />
                 <button type="button" class="field-select__options-filter-reset" onclick={ (event) => { handleResetSearchable(event) } }>
                     &#11198;
                 </button>
@@ -165,6 +165,12 @@
              *
              */
             handleToggle(event, option) {
+
+                if (this.props.disabled !== undefined) {
+                    event.preventDefault()
+                    return false
+                }
+
                 const index = this.searchSelected(option)
 
                 if (index !== false) {
@@ -180,6 +186,18 @@
                 this.update()
             },
 
+            /**
+             *  if item is in selected add css class
+             *
+             */
+            getSelectClasses(classes) {
+                if (this.props.disabled !== undefined) {
+                    classes.push('field-select--disabled')
+                }
+
+                return classes.join(' ')
+            },
+
             /**
              *  if item is in selected add css class
              *

src/styles.scss

@@ -99,3 +99,11 @@
         }
     }
 }
+
+.field-select {
+    &--disabled {
+        .panel {
+            opacity: 0.5;
+        }
+    }
+}