Допилил некоторые элементы форм

src/blocks-library.pug

@@ -265,6 +265,144 @@ block content
     +block-lib-code()
       include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-radio/field-radio.pug
 
+  +block-lib('field-toggler', 'Переключатель', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-toggler/readme.md
+    +field-toggler([
+      {
+        title: 'Одиночный переключатель',
+        helpText: 'Это чекбокс, на самом деле',
+        attrs: {
+          name: 'check10',
+        }
+      },
+    ])
+    +field-toggler([
+      {
+        title: 'Переключатель 1',
+        helpText: 'Подсказка',
+        attrs: {
+          name: 'check11',
+          checked: true,
+        }
+      },
+      {
+        title: 'Переключатель 2',
+        helpText: 'Подсказка',
+        mods: 'some',
+        attrs: {
+          name: 'check11',
+        }
+      },
+    ], 'Две радиокнопки', true)
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-toggler/field-toggler.pug
+
+  +block-lib('field-file', 'Файл', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-file/readme.md
+    +field-file({
+      title: 'Название',
+      helpText: 'Подсказка',
+      attrs: {
+        name: 'commentFile',
+        multiple: true,
+      },
+      text: {
+        selectText: 'Выберите файл(ы)',
+        nothingText: 'Ничего не выбрано',
+        flesSelectedText: 'Выбрано файлов:',
+      },
+    })
+    +field-file({
+      helpText: 'Ошибка',
+      mods: 'error',
+      attrs: {
+        name: 'commentFile3',
+      },
+    })
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-file/field-file.pug
+
+  +block-lib('field-range', 'Ползунок', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-range/readme.md
+    +field-range({
+      title: 'Название',
+      helpText: 'Подсказка',
+      mods: '',
+      attrs: {
+        name: 'counter',
+        min: '1',
+        max: '100',
+        step: '1',
+        value: '40'
+      }
+    })
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-range/field-range.pug
+
+  +block-lib('field-select', 'Селекты', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-select/readme.md
+    +field-select(
+      'Название селекта',
+      {
+        name: 'select0',
+        id: 'select-demo0'
+      },
+      [
+        {
+          title: 'Опция 1',
+          attrs: {
+            value: 'val06',
+          }
+        },
+        {
+          title: 'Опция 2',
+          attrs: {
+            value: 'val05',
+          }
+        },
+      ],
+      'Подсказка',
+      ''
+    )
+    +field-select(
+      'Название селекта',
+      {
+        name: 'select',
+        id: 'select-demo'
+      },
+      [
+        {
+          attrs: {
+            label: 'Группа',
+          },
+          child: [
+            {
+              title: 'Опция1',
+              attrs: {
+                value: 'val01',
+              }
+            },
+            {
+              title: 'Опция2',
+              attrs: {
+                value: 'val02',
+              }
+            },
+          ]
+        },
+        {
+          title: 'Опция вне группы',
+          attrs: {
+            value: 'val03',
+          }
+        }
+      ],
+      'Подсказка',
+      ''
+    )
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-select/field-select.pug
+
 
 
   .burger.blocks-library__menu-toggler(data-toggle="off-canvas")

src/blocks/btn/btn.pug

@@ -3,9 +3,9 @@
 mixin btn(text, mods, isInput)
 
   //- Принимает:
-  //-   text {string}  - текст кнопки
-  //-   mods {string}  - список модификаторов
-  //-   isInput {bool} - флаг «это тег input»
+  //-   text    {string} - текст кнопки
+  //-   mods    {string} - список модификаторов
+  //-   isInput {bool}   - флаг «это тег input»
   //- Вызов:
         +btn('Кнопка-ссылка')(href='/')  - есть href, это точно ссылка
         +btn('Кнопка-input', '', true)   - есть флаг isInput, это input

src/blocks/burger/burger.pug

@@ -3,8 +3,8 @@
 mixin burger(label, targetId, switchableClass)
 
   //- Принимает:
-  //-   label {string}           - описание, значение атрибута aria-label
-  //-   targetId {string}        - атрибут id целевого элемента (без символа #), на котором по клику будет меняться класс
+  //-   label           {string} - описание, значение атрибута aria-label
+  //-   targetId        {string} - атрибут id целевого элемента (без символа #), на котором по клику будет меняться класс
   //-   switchableClass {string} - класс, добавляемый/убираемый с целевого элемента
   //- Вызов:
         +burger('Показать пример кода', 'burger-code', 'blocks-library__code--shown')

src/blocks/field-checkbox/field-checkbox.pug

@@ -7,10 +7,9 @@ mixin field-checkbox(checkboxes, title)
   //-     {
   //-       title: ''         {string} - текст рядом с чекбоксом
   //-       helpText: ''      {string} - пояснение под полем
-  //-       mods: ''          {string} - модификаторы блока
+  //-       mods: ''          {string} - модификаторы обертки чекбокса
   //-       attrs: {          {object} - любые атрибуты для input
-  //-         type:           {string}
-  //-         placeholder:    {string}
+  //-         name:           {string}
   //-         ...
   //-       }
   //-     },

src/blocks/field-file/field-file.html

-<!--DEV
-
-<div class="field-file">
-  <div class="field-file__name">Выбор файлов</div>
-  <label class="field-file__input-wrap">
-    <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" id="" name="" multiple>
-    <div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
-    <div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
-  </label>
-</div>
-
--->

src/blocks/field-file/field-file.pug

+//- Все примеси в этом файле должны начинаться c имени блока (field-file)
+
+mixin field-file(props)
+
+  //- Принимает:
+  //-   props {
+  //-     title: ''           {string} - текст с названием (выводится над полем)
+  //-     helpText: ''        {string} - пояснение под полем
+  //-     mods: ''            {string} - модификаторы блока
+  //-     attrs: {            {object} - любые атрибуты для input
+  //-       name:             {string}
+  //-       ...
+  //-     },
+  //-     text: {             {object} - тексты
+  //-       selectText:       {string} - текст на кнопке «выберите файл(ы)»
+  //-       nothingText:      {string} - текст, показываемый, пока ничего не выбрано
+  //-       flesSelectedText: {string} - текст, показываемый, если выбрано более одного файла («файлов выбрано: 2»)
+  //-     },
+  //-   }
+  //- Вызов:
+        +field-file({
+          title: 'Название',
+          helpText: 'Подсказка',
+          mods: '',
+          attrs: {
+            name: 'commentFile',
+            multiple: true,
+          },
+          text: {
+            selectText: 'Выберите файл(ы)',
+            nothingText: 'Ничего не выбрано',
+            flesSelectedText: 'Выбрано файлов:',
+          },
+        })
+
+  -
+    if(typeof(props) === 'undefined') {
+      var props = {};
+    }
+    var allMods = '';
+    if(typeof(props.mods) !== 'undefined' && props.mods) {
+      var modsList = props.mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' field-file--' + modsList[i].trim();
+      }
+    }
+
+    var selectText = 'Выберите файл(ы)'; // Select file(s)
+    var nothingText = ''; // Nothing selected
+    var flesSelectedText = 'Выбрано файлов: {count}'; // Selected files: {count}
+
+    if (typeof(props.text) !== 'undefined' && props.text !== '') {
+      if (typeof(props.text.selectText) !== 'undefined') selectText = props.text.selectText;
+      if (typeof(props.text.nothingText) !== 'undefined') nothingText = props.text.nothingText;
+      if (typeof(props.text.flesSelectedText) !== 'undefined') flesSelectedText = props.text.flesSelectedText + ' {count}';
+    }
+
+  .field-file(class=allMods)&attributes(attributes)
+    if(typeof(props.title) !== 'undefined' && props.title)
+      .field-file__name!= props.title
+    label.field-file__input-wrap
+      input.field-file__input(type='file', data-multiple-caption=flesSelectedText)&attributes(props.attrs)
+      .field-file__name-text(data-button-text=selectText)= nothingText
+      if(typeof(props.helpText) !== 'undefined' && props.helpText)
+        .field-file__help-text!= props.helpText
+      block

src/blocks/field-radio/field-radio.pug

@@ -5,12 +5,11 @@ mixin field-radio(radiobuttons, title)
   //- Принимает:
   //-   radiobuttons {array}
   //-     {
-  //-       title: ''         {string} - текст рядом с чекбоксом
+  //-       title: ''         {string} - текст рядом с радиокнопкой
   //-       helpText: ''      {string} - пояснение под полем
-  //-       mods: ''          {string} - модификаторы блока
+  //-       mods: ''          {string} - модификаторы обертки радиокнопки
   //-       attrs: {          {object} - любые атрибуты для input
-  //-         type:           {string}
-  //-         placeholder:    {string}
+  //-         name:           {string}
   //-         ...
   //-       }
   //-     },

src/blocks/field-range/field-range.pug

+//- Все примеси в этом файле должны начинаться c имени блока (field-range)
+
+mixin field-range(props)
+
+  //- Принимает:
+  //-   props {
+  //-     title: ''         {string} - текст с названием (выводится над полем)
+  //-     helpText: ''      {string} - пояснение под полем
+  //-     mods: ''          {string} - модификаторы блока
+  //-     attrs: {          {object} - любые атрибуты для input
+  //-       name:           {string}
+  //-       ...
+  //-     }
+  //-   }
+  //- Вызов:
+        +field-range({
+          title: 'Название',
+          helpText: 'Подсказка',
+          mods: '',
+          attrs: {
+            name: 'counter',
+            min: '1',
+            max: '100',
+            step: '1',
+            value: '40'
+          }
+        })
+
+  -
+    if(typeof(props) === 'undefined') {
+      var props = {};
+    }
+    var allMods = '';
+    if(typeof(props.mods) !== 'undefined' && props.mods) {
+      var modsList = props.mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' field-range--' + modsList[i].trim();
+      }
+    }
+
+  label.field-range(class=allMods)&attributes(attributes)
+    if(typeof(props.title) !== 'undefined' && props.title)
+      span.field-range__name!= props.title
+    span.field-range__input-wrap
+      input.field-range__input(type='range')&attributes(props.attrs)
+      if(typeof(props.helpText) !== 'undefined' && props.helpText)
+        span.field-range__help-text!= props.helpText
+      block

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

+//- Все примеси в этом файле должны начинаться c имени блока (field-select)
+
+mixin field-select(title, attrs, options, helpText, mods)
+
+  //- Принимает:
+  //-   title: '' {string}     - название селекта
+  //-   attrs:    {object}      - атрибуты селекта
+  //-     name: '' {string}
+  //-   options {array}
+  //-     {object}
+  //-       title: '' {string} - текст пункта
+  //-       attrs:    {object} - любые атрибуты пункта
+  //-         value:  {string}
+  //-     {object}
+  //-       attrs:    {object} - любые атрибуты пункта
+  //-         label:  {string}
+  //-       child:    {array} - потомки (если есть этот элемент, то его родитель — optgroup)
+  //-         {object}
+  //-           title: '' {string}
+  //-           attrs:    {object}
+  //-             value:  {string}
+  //-     {object}
+  //-       title: '' {string} - текст пункта
+  //-       attrs:    {object} - любые атрибуты пункта
+  //-         value:  {string}
+  //-   helpText: '' {string}  - текст подсказки
+  //-   mods: '' {string}      - модификаторы блока
+  //- Вызов:
+        +field-select(
+          'Название',
+          {
+            name: 'select',
+            id: 'select'
+          },
+          [
+            {
+              title: 'Опция',
+              attrs: {
+                value: '',
+              }
+            },
+            {
+              title: 'Опция',
+              attrs: {
+                value: '',
+              }
+            },
+          ],
+          'Подсказка',
+          ''
+        )
+        +field-select(
+          'Название',
+          {
+            name: '',
+            id: ''
+          },
+          [
+            {
+              attrs: {
+                label: 'Группа',
+              },
+              child: [
+                {
+                  title: 'Опция1',
+                  attrs: {
+                    value: 'val01',
+                  }
+                },
+                {
+                  title: 'Опция2',
+                  attrs: {
+                    value: 'val02',
+                  }
+                },
+              ]
+            },
+            {
+              title: 'Опция',
+              attrs: {
+                value: 'val03',
+              }
+            }
+          ],
+          'Подсказка',
+          ''
+        )
+
+  -
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' field-select--' + modsList[i].trim();
+      }
+    }
+
+  .field-select(class=allMods)&attributes(attributes)
+    if(typeof(title) !== 'undefined' && title)
+      .field-select__name!= title
+    select.field-select__select&attributes(attrs)
+      each option in options
+        //- option= option
+        if(typeof(option.child) !== 'undefined' && option.child)
+          optgroup(label=option.attrs.label)
+            each subOption in option.child
+              option&attributes(subOption.attrs)= subOption.title
+        else if(typeof(option.title) !== 'undefined' && option.title)
+          option&attributes(option.attrs)= option.title
+    if(typeof(helpText) !== 'undefined' && helpText)
+      span.field-select__help-text!= helpText

src/blocks/field-toggler/field-toggler.html

-<!--DEV
-
-Для использования этого файла как шаблона:
-
-@ @include('blocks/field-text/field-text.html')
-
-(Нужно убрать пробел между символами @)
-Подробнее: https://www.npmjs.com/package/gulp-file-include
-
-
-
-<div class="field-toggler">
-  <div class="field-toggler__title">Переключатель-флажок</div>
-  <div class="field-toggler__input-wrap">
-    <label class="field-toggler__name">
-      <input class="field-toggler__input" type="checkbox" id="" name="">
-      <span class="field-toggler__name-text">Использовать</span>
-    </label>
-    <div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
-  </div>
-</div>
-
-<div class="field-toggler">
-  <div class="field-toggler__title">Переключатели-флажки</div>
-  <div class="field-toggler__input-wrap">
-    <label class="field-toggler__name">
-      <input class="field-toggler__input" type="checkbox" id="" name="" checked>
-      <span class="field-toggler__name-text">Использовать</span>
-    </label>
-    <label class="field-toggler__name">
-      <input class="field-toggler__input" type="checkbox" id="" name="">
-      <span class="field-toggler__name-text">Не использовать</span>
-    </label>
-    <div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
-  </div>
-</div>
-
--->

src/blocks/field-toggler/field-toggler.pug

+//- Все примеси в этом файле должны начинаться c имени блока (field-toggler)
+
+mixin field-toggler(togglers, title, isRadio)
+
+  //- Принимает:
+  //-   togglers {array}
+  //-     {
+  //-       title: ''         {string} - текст рядом с переключателем
+  //-       helpText: ''      {string} - пояснение под полем
+  //-       mods: ''          {string} - модификаторы обёртки переключателя
+  //-       attrs: {          {object} - любые атрибуты для input
+  //-         name:           {string}
+  //-         ...
+  //-       },
+  //-       isRadio: false      {bool}  - флаг «это радиокнопки, а не чекбоксы»
+  //-     },
+  //-     ...
+  //- Вызов:
+        +field-toggler([
+          {
+            title: 'Переключатель0',
+            helpText: 'Подсказка',
+            attrs: {
+              name: 'check0',
+            }
+          },
+        ])
+        +field-toggler([
+          {
+            title: 'Переключатель1',
+            helpText: 'Подсказка',
+            attrs: {
+              name: 'check1',
+              checked: true,
+            }
+          },
+          {
+            title: 'Переключатель2',
+            helpText: 'Подсказка',
+            mods: 'some',
+            attrs: {
+              name: 'check2',
+            }
+          },
+        ], 'ОбщееНазваниеБлока', true)
+
+  -
+    if(typeof(isRadio) !== 'undefined' && isRadio)
+      var type = 'radio';
+    else
+      var type = 'checkbox';
+
+  .field-toggler&attributes(attributes)
+    if(typeof(title) !== 'undefined' && title)
+      .field-toggler__title!= title
+    each toggler in togglers
+      -
+        var allMods = '';
+        if(typeof(toggler.mods) !== 'undefined' && toggler.mods) {
+          var modsList = toggler.mods.split(',');
+          for (var i = 0; i < modsList.length; i++) {
+            allMods = allMods + ' field-toggler__input-wrap--' + modsList[i].trim();
+          }
+        }
+      .field-toggler__input-wrap(class=allMods)
+        label.field-toggler__name
+          input.field-toggler__input(type=type)&attributes(toggler.attrs)
+          span.field-toggler__name-text!= toggler.title
+        if(typeof(toggler.helpText) !== 'undefined' && toggler.helpText)
+          .field-toggler__help-text-wrap
+            .field-toggler__help-text!= toggler.helpText

src/blocks/field-toggler/field-toggler.scss

@@ -80,7 +80,7 @@ $line-height:                 1.375em !default;
   }
 
   &__help-text-wrap {
-    padding-left: 1.5em;
+    padding-left: 3.2em;
   }
 
   &__help-text {

src/pug/mixins.pug

@@ -11,3 +11,7 @@ include ../blocks/btn/btn.pug
 include ../blocks/field-text/field-text.pug
 include ../blocks/field-checkbox/field-checkbox.pug
 include ../blocks/field-radio/field-radio.pug
+include ../blocks/field-toggler/field-toggler.pug
+include ../blocks/field-file/field-file.pug
+include ../blocks/field-range/field-range.pug
+include ../blocks/field-select/field-select.pug