Merge pull request #3 from const-se/v2.0.2

Version 2.0.2
const-se · Sep 16, 2018 · 0a84cad · 0a84cad
2 parents 60acae1 + 3e36145
commit 0a84cad
Show file tree

Hide file tree

Showing 11 changed files with 126 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/const-se/selectize-bootstrap4-theme/archive/v2.0.1.zip)
+- [Download the latest release](https://github.com/const-se/selectize-bootstrap4-theme/archive/v2.0.2.zip)
 - Clone the repo: `git clone git@github.com:const-se/selectize-bootstrap4-theme.git`
 - Install with [npm](https://www.npmjs.com/): `npm install selectize-bootstrap4-theme`
 - Install with [yarn](https://yarnpkg.com/): `yarn add selectize-bootstrap4-theme`
@@ -35,8 +35,8 @@ Read the [Documentation](docs/en/index.md) for more information.
 ## TODO
 
 - Attribute `readonly` support
+- Pseudo-classes `:valid`, `:invalid` support
 - Bootstrap class `custom-select` support
-- Bootstrap form validation support
 - Selectize plugin styles support
 
 ## Creators

diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
   "name": "const-se/selectize-bootstrap4-theme",
   "type": "library",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "license": "Apache-2.0",
   "description": "Selectize Theme for Bootstrap 4",
   "keywords": [

diff --git a/dist/css/selectize.bootstrap4.css b/dist/css/selectize.bootstrap4.css
@@ -1,5 +1,5 @@
 /*!
- * Selectize Theme for Bootstrap 4 v2.0.1
+ * Selectize Theme for Bootstrap 4 v2.0.2
  *
  * Copyright 2018 Constantine Seleznyoff <const.seoff@gmail.com>
  *
@@ -275,6 +275,24 @@
   margin: 0 0 0 3px;
 }
 
+.form-control.selectize-control.is-valid .selectize-input {
+  border-color: #28a745;
+}
+
+.form-control.selectize-control.is-valid .selectize-input:focus {
+  border-color: #28a745;
+  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+}
+
+.form-control.selectize-control.is-invalid .selectize-input {
+  border-color: #dc3545;
+}
+
+.form-control.selectize-control.is-invalid .selectize-input:focus {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+
 .form-control-lg.selectize-control {
   height: calc(2.875rem + 2px);
   padding: 0;

diff --git a/dist/examples.html b/dist/examples.html
@@ -96,6 +96,20 @@ <h2>Single Select</h2>
                 </optgroup>
               </select>
             </div>
+            <div class="form-group">
+              <label for="select-15">Valid Select Value</label>
+              <select class="form-control is-valid selectize-single" id="select-15">
+                <option value="green" selected>Green</option>
+              </select>
+              <div class="valid-feedback">Looks good!</div>
+            </div>
+            <div class="form-group">
+              <label for="select-16">Invalid Select Value</label>
+              <select class="form-control is-invalid selectize-single" id="select-16">
+                <option value="red" selected>Red</option>
+              </select>
+              <div class="invalid-feedback">Please provide valid color.</div>
+            </div>
           </form>
           <form class="form-inline my-2">
             <label class="mr-2" for="select-6">Inline</label>
@@ -177,6 +191,20 @@ <h2>Multiple Select</h2>
               <label for="select-11">Custom Options</label>
               <select class="form-control selectize-custom" id="select-11" multiple></select>
             </div>
+            <div class="form-group">
+              <label for="select-17">Valid Select Value</label>
+              <select class="form-control is-valid selectize-multiple" id="select-17" multiple>
+                <option value="green" selected>Green</option>
+              </select>
+              <div class="valid-feedback">Looks good!</div>
+            </div>
+            <div class="form-group">
+              <label for="select-18">Invalid Select Value</label>
+              <select class="form-control is-invalid selectize-multiple" id="select-18" multiple>
+                <option value="red" selected>Red</option>
+              </select>
+              <div class="invalid-feedback">Please provide valid color.</div>
+            </div>
           </form>
           <form class="form-inline my-2">
             <label class="mr-2" for="select-12">Inline</label>

diff --git a/docs/en/index.md b/docs/en/index.md
@@ -18,7 +18,7 @@ Selectize Theme (SCSS) based on the Bootstrap 4 components.
 
 ## Install
 
-- [Download the latest release](https://github.com/const-se/selectize-bootstrap4-theme/archive/v2.0.1.zip)
+- [Download the latest release](https://github.com/const-se/selectize-bootstrap4-theme/archive/v2.0.2.zip)
 - Clone the repo: `git clone git@github.com:const-se/selectize-bootstrap4-theme.git`
 - Install with [npm](https://www.npmjs.com/): `npm install selectize-bootstrap4-theme`
 - Install with [yarn](https://yarnpkg.com/): `yarn add selectize-bootstrap4-theme`

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "selectize-bootstrap4-theme",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "license": "Apache-2.0",
   "main": "index.js",
   "description": "Selectize Theme for Bootstrap 4",

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -0,0 +1,42 @@
+@mixin selectize-control-size($height, $border-radius, $font-size, $padding-x, $padding-y) {
+  height: $height;
+  padding: 0;
+
+  .selectize-input {
+    font-size: $font-size;
+    padding: $padding-y $padding-x;
+    @include border-radius($border-radius);
+  }
+
+  &.single {
+    $arrow-padding: calc(#{$padding-x} + #{$selectize-input-arrow-width} + #{$padding-y});
+
+    .selectize-input {
+      padding-right: $arrow-padding;
+    }
+
+    &.rtl {
+      .selectize-input {
+        padding-left: $arrow-padding;
+        padding-right: $padding-x;
+      }
+    }
+  }
+
+  &.multi {
+    min-height: $height;
+  }
+}
+
+@mixin selectize-control-validation-state($state, $color, $spread) {
+  &.is-#{$state} {
+    .selectize-input {
+      border-color: $color;
+
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 $spread rgba($color, .25);
+      }
+    }
+  }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -5,10 +5,14 @@ $selectize-input-bg-disabled: $input-disabled-bg !default;
 $selectize-input-bg-focus: $input-focus-bg !default;
 $selectize-input-border-color: $input-border-color !default;
 $selectize-input-border-color-focus: $input-focus-border-color !default;
+$selectize-input-border-color-invalid: $form-feedback-invalid-color !default;
+$selectize-input-border-color-valid: $form-feedback-valid-color !default;
 $selectize-input-border-radius: $input-border-radius !default;
 $selectize-input-border-width: $input-border-width !default;
 $selectize-input-box-shadow: $input-box-shadow !default;
 $selectize-input-box-shadow-focus: $input-focus-box-shadow !default;
+$selectize-input-box-shadow-spread-invalid: $input-focus-width !default;
+$selectize-input-box-shadow-spread-valid: $input-focus-width !default;
 $selectize-input-color: $input-color !default;
 $selectize-input-color-disabled: $selectize-input-color !default;
 $selectize-input-color-focus: $input-focus-color !default;

diff --git a/scss/selectize.bootstrap4.scss b/scss/selectize.bootstrap4.scss
@@ -1,5 +1,5 @@
 /*!
- * Selectize Theme for Bootstrap 4 v2.0.1
+ * Selectize Theme for Bootstrap 4 v2.0.2
  *
  * Copyright 2018 Constantine Seleznyoff <const.seoff@gmail.com>
  *
@@ -20,6 +20,7 @@
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
 @import "variables";
+@import "mixins";
 
 .form-control {
   &.selectize-control {
@@ -302,66 +303,21 @@
         }
       }
     }
+
+    @include selectize-control-validation-state('valid', $selectize-input-border-color-valid, $selectize-input-box-shadow-spread-valid);
+    @include selectize-control-validation-state('invalid', $selectize-input-border-color-invalid, $selectize-input-box-shadow-spread-invalid);
   }
 }
 
 .form-control-lg {
   &.selectize-control {
-    height: $selectize-input-height-lg;
-    padding: 0;
-
-    .selectize-input {
-      font-size: $selectize-input-font-size-lg;
-      padding: $selectize-input-padding-y-lg $selectize-input-padding-x-lg;
-      @include border-radius($selectize-input-border-radius-lg);
-    }
-
-    &.single {
-      .selectize-input {
-        padding-right: calc(#{$selectize-input-padding-x-lg} + #{$selectize-input-arrow-width} + #{$selectize-input-padding-y-lg});
-      }
-
-      &.rtl {
-        .selectize-input {
-          padding-left: calc(#{$selectize-input-padding-x-lg} + #{$selectize-input-arrow-width} + #{$selectize-input-padding-y-lg});
-          padding-right: $selectize-input-padding-x-lg;
-        }
-      }
-    }
-
-    &.multi {
-      min-height: $selectize-input-height-lg;
-    }
+    @include selectize-control-size($selectize-input-height-lg, $selectize-input-border-radius-lg, $selectize-input-font-size-lg, $selectize-input-padding-x-lg, $selectize-input-padding-y-lg);
   }
 }
 
 .form-control-sm {
   &.selectize-control {
-    height: $selectize-input-height-sm;
-    padding: 0;
-
-    .selectize-input {
-      font-size: $selectize-input-font-size-sm;
-      padding: $selectize-input-padding-y-sm $selectize-input-padding-x-sm;
-      @include border-radius($selectize-input-border-radius-sm);
-    }
-
-    &.single {
-      .selectize-input {
-        padding-right: calc(#{$selectize-input-padding-x-sm} + #{$selectize-input-arrow-width} + #{$selectize-input-padding-y-sm});
-      }
-
-      &.rtl {
-        .selectize-input {
-          padding-left: calc(#{$selectize-input-padding-x-sm} + #{$selectize-input-arrow-width} + #{$selectize-input-padding-y-sm});
-          padding-right: $selectize-input-padding-x-sm;
-        }
-      }
-    }
-
-    &.multi {
-      min-height: $selectize-input-height-sm;
-    }
+    @include selectize-control-size($selectize-input-height-sm, $selectize-input-border-radius-sm, $selectize-input-font-size-sm, $selectize-input-padding-x-sm, $selectize-input-padding-y-sm);
   }
 }
 

diff --git a/template/examples.pug b/template/examples.pug
@@ -46,6 +46,16 @@ html
                                 optgroup(label='Skiing')
                                     each option, index in ['Poles', 'Skins', 'Skis']
                                         option(value='skiing' + index)= option
+                        div(class='form-group')
+                            label(for='select-15') Valid Select Value
+                            select(id='select-15' class='form-control is-valid selectize-single')
+                                option(value='green' selected) Green
+                            div(class='valid-feedback') Looks good!
+                        div(class='form-group')
+                            label(for='select-16') Invalid Select Value
+                            select(id='select-16' class='form-control is-invalid selectize-single')
+                                option(value='red' selected) Red
+                            div(class='invalid-feedback') Please provide valid color.
                     form(class='form-inline my-2')
                         label(for='select-6' class='mr-2') Inline
                         select(id='select-6' class='form-control w-50 selectize-single')
@@ -89,6 +99,16 @@ html
                         div(class='form-group')
                             label(for='select-11') Custom Options
                             select(id='select-11' class='form-control selectize-custom' multiple)
+                        div(class='form-group')
+                            label(for='select-17') Valid Select Value
+                            select(id='select-17' class='form-control is-valid selectize-multiple' multiple)
+                                option(value='green' selected) Green
+                            div(class='valid-feedback') Looks good!
+                        div(class='form-group')
+                            label(for='select-18') Invalid Select Value
+                            select(id='select-18' class='form-control is-invalid selectize-multiple' multiple)
+                                option(value='red' selected) Red
+                            div(class='invalid-feedback') Please provide valid color.
                     form(class='form-inline my-2')
                         label(for='select-12' class='mr-2') Inline
                         select(id='select-12' class='form-control w-50 selectize-multiple' multiple)