Рефакторинг: field-select

package.json

@@ -32,7 +32,6 @@
     "autoprefixer": "^9.3.1",
     "babel-loader": "^8.0.4",
     "browser-sync": "^2.18.8",
-    "closest": "0.0.1",
     "cpy": "^7.0.1",
     "cross-env": "^5.0.0",
     "css-mqpacker": "^7.0.0",
@@ -74,6 +73,8 @@
   },
   "dependencies": {
     "baron": "^3.0.3",
+    "choices.js": "^4.1.3",
+    "closest": "0.0.1",
     "jquery": "^3.1.1",
     "object-fit-images": "^3.2.3",
     "svg4everybody": "^2.1.8"

src/blocks/blocks-library/blocks-library.js

 require('../main-nav/main-nav.js');
 require('../burger/burger.js');
 require('../field-file/field-file.js');
+require('../field-select/field-select.js');
 require('../scroll-link/scroll-link.js');
 require('../to-top/to-top.js');
 require('../off-canvas/off-canvas.js');

src/blocks/field-select/field-select.js

+const Choices = require('choices.js');
+
+const choices = new Choices('.field-select__select', {
+  searchEnabled: false,
+  placeholderValue: 'Выберите',
+});

src/blocks/field-select/field-select.pug

@@ -98,6 +98,7 @@ mixin field-select(title, attrs, options, helpText, mods)
   .field-select(class=allMods)&attributes(attributes)
     if(typeof(title) !== 'undefined' && title)
       .field-select__name!= title
+    .field-select__select-wrap
       select.field-select__select&attributes(attrs)
         each option in options
           //- option= option

src/blocks/field-select/field-select.scss

@@ -13,59 +13,167 @@
     @include field-name;
   }
 
-  &__input-wrap {}
+  &__select-wrap {}
+
+  // &__select {
+  //   display: inline-block;
+  //   vertical-align: middle;
+  //   width: 100%;
+  //   line-height: $line-height;
+  //   padding: $field-padding-vertical $field-padding-horizontal;
+  //   padding-right: 35px;
+  //   font-size: inherit;
+  //   font-family: inherit;
+  //   border: 1px solid $border-color;
+  //   border-radius: $border-radius;
+  //   appearance: none;
+  //   background-color: #fff;
+
+  //   &[multiple] {
+  //     background-image: none;
+  //     min-height: 6.8em;
+  //   }
+
+  //   &::-ms-expand {
+  //     display: none;
+  //   }
+
+  //   &:active,
+  //   &:focus {
+  //     @include field-focus;
+  //   }
+
+  //   &[disabled],
+  //   &[readonly] {
+  //     cursor: default;
+  //     background-color: $gray-lightest;
+  //   }
+  // }
+
+  &__help-text {
+    @include field-help-text;
+  }
 
-  &__select {
-    display: inline-block;
-    vertical-align: middle;
-    width: 100%;
-    line-height: $line-height;
-    padding: $field-padding-vertical $field-padding-horizontal;
-    font-size: inherit;
-    font-family: inherit;
-    border: 1px solid $border-color;
-    border-radius: $border-radius;
-    appearance: none;
-    background-color: #fff;
 
-    &[multiple] {
-      background-image: none;
-      min-height: 6.8em;
+
+  &--error {
+    color: $color-danger;
+
+    #{$block-name}__name,
+    #{$block-name}__select,
+    #{$block-name}__help-text {
+      color: $color-danger;
     }
 
-    &::-ms-expand {
-      display: none;
+    #{$block-name}__select {
+      border-color: $color-danger;
+      background-color: lighten($color-danger, 35%);
     }
+  }
+}
+
+
+
+.choices {
+
+  $block-name:                &; // #{$block-name}__element
+
+  position: relative;
 
-    &:active,
   &:focus {
+    outline: 0;
+
+    &:not(.is-disabled) {
+
+      #{$block-name}__inner {
         @include field-focus;
       }
+    }
+  }
 
-    &[disabled],
-    &[readonly] {
-      cursor: default;
-      background-color: $gray-lightest;
+  &:after {
+    content: '';
+    position: absolute;
+    top: 7px;
+    right: 16px;
+    height: 14px;
+    width: 14px;
+    border-left: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+    pointer-events: none;
+    transform: rotate(-45deg);
+    transition: all 0.3s;
   }
+
+  &.is-open:after {
+    transform: translateY(7px) rotate(135deg);
   }
 
-  &__help-text {
-    @include field-help-text;
+  .is-hidden {
+    display: none !important;
   }
 
+  &__inner {
+    padding: $field-padding-vertical 40px $field-padding-vertical $field-padding-horizontal;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
+    background: #fff;
+    font-size: 1em;
+    line-height: 1.5;
+    cursor: pointer;
+
+    #{$block-name}__item--selectable {
+      max-width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 
+  &__list--dropdown {
+    display: none;
+    z-index: 1;
+    position: absolute;
+    width: 100%;
+    background-color: #fff;
+    border: 1px solid $border-color;
+    top: 100%;
+    margin-top: -1px;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    overflow: hidden;
+    word-break: break-all;
+
+    #{$block-name}__item {
+      padding: $field-padding-vertical $field-padding-horizontal;
+      cursor: pointer;
 
-  &--error {
+      &.is-highlighted {
+        background: $gray-lightest;
+      }
+    }
+  }
 
-    #{$block-name}__name,
-    #{$block-name}__select,
-    #{$block-name}__help-text {
-      color: $color-danger;
+  &__heading {
+    padding: $field-padding-vertical $field-padding-horizontal;
+    font-size: $font-size--small;
+    font-weight: 700;
+    opacity: 0.5;
+    cursor: default;
   }
 
-    #{$block-name}__select {
-      border-color: $color-danger;
-      background-color: lighten($color-danger, 35%);
+  &.is-open {
+
+    #{$block-name}__list--dropdown {
+      display: block;
+    }
+  }
+
+  &.is-disabled {
+
+    #{$block-name}__inner {
+      background-color: $gray-lighter;
+      cursor: default;
     }
   }
 }

src/blocks/page/page.scss

@@ -69,6 +69,9 @@ body {
   text-align: left;
   color: $text-color;
   background-color: $body-bg;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
 }
 
 [tabindex='-1']:focus {

src/pages/blocks-demo.pug

@@ -559,7 +559,7 @@ block content
       },
       [
         {
-          title: 'Опция 1',
+          title: 'Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 ',
           attrs: {
             value: 'val06',
           }
@@ -578,7 +578,8 @@ block content
       'Название селекта',
       {
         name: 'select',
-        id: 'select-demo'
+        id: 'select-demo',
+        disabled: true,
       },
       [
         {
@@ -610,6 +611,42 @@ block content
       'Подсказка',
       ''
     )
+    +field-select(
+      'Название селекта',
+      {
+        name: 'select1',
+        id: 'select-demo1',
+      },
+      [
+        {
+          attrs: {
+            label: 'Группа',
+          },
+          child: [
+            {
+              title: 'Опция1',
+              attrs: {
+                value: 'val01',
+              }
+            },
+            {
+              title: 'Опция2',
+              attrs: {
+                value: 'val02',
+              }
+            },
+          ]
+        },
+        {
+          title: 'Опция вне группы',
+          attrs: {
+            value: 'val03',
+          }
+        }
+      ],
+      'Подсказка',
+      'error'
+    )
     +block-lib-code()
       include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/field-select/field-select.pug
 
@@ -627,7 +664,8 @@ block content
         +field-text({
           helpText: 'Подсказка',
           attrs: {
-            placeholder: 'Пример'
+            placeholder: 'Пример',
+            disabled: true,
           }
         })
         +field-text({

src/scss/variables.scss

@@ -79,8 +79,8 @@ $grid-gutter-width:           30px;
 
 // Разное
 
-$field-padding-vertical:      0.3em;
-$field-padding-horizontal:    0.7em;
+$field-padding-vertical:      5px;
+$field-padding-horizontal:    12px;
 
 $border-radius:               3px;
 $opacity:                     0.7;