Чекбоксы и радиокнопки

src/blocks-library.pug

@@ -193,30 +193,78 @@ block content
   +block-lib('field-text', 'Текстовое поле', false)
     include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-text/readme.md
     +field-text({
-      type: 'text',
       title: 'Текстовое поле',
-      placeholder: 'Как заполнять',
-      helpText: 'Подсказка',
-    })
-    +field-text({
-      title: 'Многострочное текстовое поле',
-      textarea: true,
-      placeholder: 'Как заполнять',
-      helpText: 'Подсказка',
+      helpText: 'Подсказка под полем',
+      isTextarea: true,
+      mods: '',
+      attrs: {
+        name: 'test',
+        placeholder: 'Подсказка',
+      }
     })
     +field-text({
-      type: 'number',
-      title: 'Текстовое поле (number), ошибочный ввод',
-      placeholder: 'Как заполнять',
-      helpText: 'Подсказка',
-      props: 'Подсказка',
+      title: 'Текстовое поле',
+      helpText: 'Описание ошибки',
       mods: 'error',
-      inputAttrs: {'id': '200', 'max': '200', 'min': '2'},
     })
     +field-text()
     +block-lib-code()
       include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-text/field-text.pug
 
+  +block-lib('field-checkbox', 'Флажок/чекбокс', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-checkbox/readme.md
+    +field-checkbox([
+      {
+        title: 'Чекбокс без группы',
+        helpText: 'Отдельно расположенный чекбокс',
+        attrs: {
+          name: 'check0',
+        }
+      },
+    ])
+    +field-checkbox([
+      {
+        title: 'Чекбокс первый',
+        helpText: 'И, возможно, единственный',
+        mods: 'error',
+        attrs: {
+          name: 'check1',
+          checked: true,
+        }
+      },
+      {
+        title: 'Чекбокс второй',
+        helpText: 'А, нет. Не единственный...',
+        attrs: {
+          name: 'check2',
+        }
+      },
+    ], 'Общее необязательное название')
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-checkbox/field-checkbox.pug
+
+  +block-lib('field-radio', 'Радиокнопки', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-radio/readme.md
+    +field-radio([
+      {
+        title: 'Первый',
+        helpText: 'И, возможно, единственный',
+        attrs: {
+          name: 'radio',
+          checked: true,
+        }
+      },
+      {
+        title: 'Второй',
+        helpText: 'А, нет. Не единственный...',
+        attrs: {
+          name: 'radio',
+        }
+      },
+    ], 'Общее необязательное название')
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-radio/field-radio.pug
+
 
 
   .burger.blocks-library__menu-toggler(data-toggle="off-canvas")

src/blocks/alert/alert.pug

@@ -6,14 +6,14 @@ mixin alert(title, mods)
   //-   title {string} - заголовок
   //-   mods {string}  - стилевые модификаторы
   //- Вызов:
-  //-   +alert()
-  //-     p Успех
-  //-   +alert('Внимание!', 'warning, some-mod-name')
-  //-     p Текст
-  //-   +alert()
-  //-     p Сообщение без модификаторов
-  //-   +alert('Заголовok', 'danger')
-  //-     p Проблема
+        +alert()
+          p Успех
+        +alert('Внимание!', 'warning, some-mod-name')
+          p Текст
+        +alert()
+          p Сообщение без модификаторов
+        +alert('Заголовok', 'danger')
+          p Проблема
 
   -
     //- список модификаторов

src/blocks/btn/btn.pug

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

src/blocks/burger/burger.pug

 //- Все примеси в этом файле должны начинаться c имени блока (burger)
 
-mixin burger(label, targetId, className)
+mixin burger(label, targetId, switchableClass)
 
   //- Принимает:
   //-   label {string}           - описание, значение атрибута aria-label
   //-   targetId {string}        - атрибут id целевого элемента (без символа #), на котором по клику будет меняться класс
-  //-   className {string} - класс, добавляемый/убираемый с целевого элемента
+  //-   switchableClass {string} - класс, добавляемый/убираемый с целевого элемента
   //- Вызов:
-  //-   +burger('Показать пример кода', 'burger-code', 'blocks-library__code--shown')
-  //-   +burger('Показать ничто')(data-some="SOME")
+        +burger('Показать пример кода', 'burger-code', 'blocks-library__code--shown')
+        +burger('Показать ничто')(data-some="SOME")
 
   -
     label = label || 'Toggle block ' + targetId
     if (typeof(targetId) !== 'undefined' && targetId !== '') attributes['data-target-id'] = targetId
-    if (typeof(className) !== 'undefined' && className !== '') attributes['data-target-class-toggle'] = className
+    if (typeof(switchableClass) !== 'undefined' && switchableClass !== '') attributes['data-target-class-toggle'] = switchableClass
 
   button.burger(aria-label=label)&attributes(attributes)
     span= label

src/blocks/close/close.pug

@@ -5,7 +5,7 @@ mixin close(label)
   //- Принимает:
   //-   label {string} - описание, значение атрибута aria-label
   //- Вызов:
-  //-   +close('Закрыть')
+        +close('Закрыть')
 
   button.close(aria-label=label)&attributes(attributes)
     span= label

src/blocks/code/code.pug

@@ -3,9 +3,9 @@
 mixin code()
 
   //- Вызов:
-  //-   +code()
-  //-     code <div class="some">...</div>
-  //-     code <div class="some">...</div>
+        +code()
+          code <div class="some">...</div>
+          code <div class="some">...</div>
 
   pre.code&attributes(attributes)
     block

src/blocks/field-checkbox/field-checkbox.html

-<!--DEV
-
-Для использования этого файла как шаблона:
-
-@ @include('blocks/field-checkbox/field-checkbox.html')
-
-(Нужно убрать пробел между символами @)
-Подробнее: https://www.npmjs.com/package/gulp-file-include
-
-
-
-<div class="field-checkbox">
-  <label class="field-checkbox__name">
-    <input class="field-checkbox__input" type="checkbox" id="" name="" checked>
-    <span class="field-checkbox__name-text">Текст у флажка</span>
-  </label>
-</div>
-
-<div class="field-checkbox">
-  <div class="field-checkbox__title">Необязательный общий заголовок</div>
-  <div class="field-checkbox__input-wrap">
-    <label class="field-checkbox__name">
-      <input class="field-checkbox__input" type="checkbox" id="" name="" checked>
-      <span class="field-checkbox__name-text">Текст у флажка</span>
-    </label>
-    <div class="field-checkbox__help-text-wrap">
-      <div class="field-checkbox__help-text">Пояснение</div>
-    </div>
-  </div>
-  <div class="field-checkbox__input-wrap">
-    <label class="field-checkbox__name">
-      <input class="field-checkbox__input" type="checkbox" id="" name="">
-      <span class="field-checkbox__name-text">Текст у флажка</span>
-    </label>
-  </div>
-  <div class="field-checkbox__input-wrap">
-    <label class="field-checkbox__name">
-      <input class="field-checkbox__input" type="checkbox" id="" name="">
-      <span class="field-checkbox__name-text">Текст у флажка</span>
-    </label>
-  </div>
-</div>
-
--->

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

+//- Все примеси в этом файле должны начинаться c имени блока (field-checkbox)
+
+mixin field-checkbox(checkboxes, title)
+
+  //- Принимает:
+  //-   checkboxes {array}
+  //-     {
+  //-       title: ''         {string} - текст рядом с чекбоксом
+  //-       helpText: ''      {string} - пояснение под полем
+  //-       mods: ''          {string} - модификаторы блока
+  //-       attrs: {          {object} - любые атрибуты для input
+  //-         type:           {string}
+  //-         placeholder:    {string}
+  //-         ...
+  //-       }
+  //-     },
+  //-     ...
+  //- Вызов:
+        +field-checkbox([
+          {
+            title: 'Чекбокс0',
+            helpText: 'Подсказка',
+            attrs: {
+              name: 'check0',
+            }
+          },
+        ])
+        +field-checkbox([
+          {
+            title: 'Чекбокс1',
+            helpText: 'Подсказка',
+            mods: 'error',
+            attrs: {
+              name: 'check1',
+              checked: true,
+            }
+          },
+          {
+            title: 'Чекбокс2',
+            helpText: 'Подсказка',
+            mods: 'error',
+            attrs: {
+              name: 'check2',
+            }
+          },
+        ], 'ОбщееНазваниеБлока')
+
+  .field-checkbox&attributes(attributes)
+    if(typeof(title) !== 'undefined' && title)
+      .field-checkbox__title!= title
+    each checkbox in checkboxes
+      -
+        var allMods = '';
+        if(typeof(checkbox.mods) !== 'undefined' && checkbox.mods) {
+          var modsList = checkbox.mods.split(',');
+          for (var i = 0; i < modsList.length; i++) {
+            allMods = allMods + ' field-checkbox__input-wrap--' + modsList[i].trim();
+          }
+        }
+      .field-checkbox__input-wrap(class=allMods)
+        label.field-checkbox__name
+          input.field-checkbox__input(type='checkbox')&attributes(checkbox.attrs)
+          span.field-checkbox__name-text!= checkbox.title
+        if(typeof(checkbox.helpText) !== 'undefined' && checkbox.helpText)
+          .field-checkbox__help-text-wrap
+            .field-checkbox__help-text!= checkbox.helpText

src/blocks/field-checkbox/field-checkbox.scss

@@ -83,6 +83,7 @@ $line-height:                 1.375em !default;
       border-bottom: 2px solid currentColor;
       transform: rotate(-45deg);
       transition: opacity $transition-time;
+      box-shadow: 1px 2px 0 #fff, inset 0 -2px 0 #fff;
 
       @at-root input:checked ~ & {
         opacity: 1;

src/blocks/field-checkbox/readme.md

+В стилевом файле есть закомментированные фрагменты для замены нативного элемента своим (svg).

src/blocks/field-radio/field-radio.html

-<!--DEV
-
-Для использования этого файла как шаблона:
-
-@ @include('blocks/field-radio/field-radio.html')
-
-(Нужно убрать пробел между символами @)
-Подробнее: https://www.npmjs.com/package/gulp-file-include
-
-<div class="field-radio">
-  <label class="field-radio__name">
-    <input class="field-radio__input" type="radio" id="" checked>
-    <span class="field-radio__name-text">Текст у радиобаттона</span>
-  </label>
-</div>
-
-<div class="field-radio">
-  <div class="field-radio__title">Необязательный общий заголовок</div>
-  <div class="field-radio__input-wrap">
-    <label class="field-radio__name">
-      <input class="field-radio__input" type="radio" id="" name="demo-radio" checked>
-      <span class="field-radio__name-text">Текст у радиобаттона</span>
-    </label>
-    <div class="field-radio__help-text-wrap">
-      <div class="field-radio__help-text">Пояснение.</div>
-    </div>
-  </div>
-  <div class="field-radio__input-wrap">
-    <label class="field-radio__name">
-      <input class="field-radio__input" type="radio" id="" name="demo-radio">
-      <span class="field-radio__name-text">Текст у радиобаттона</span>
-    </label>
-  </div>
-  <div class="field-radio__input-wrap">
-    <label class="field-radio__name">
-      <input class="field-radio__input" type="radio" id="" name="demo-radio">
-      <span class="field-radio__name-text">Текст у радиобаттона</span>
-    </label>
-  </div>
-</div>
-
--->

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

+//- Все примеси в этом файле должны начинаться c имени блока (field-radio)
+
+mixin field-radio(radiobuttons, title)
+
+  //- Принимает:
+  //-   radiobuttons {array}
+  //-     {
+  //-       title: ''         {string} - текст рядом с чекбоксом
+  //-       helpText: ''      {string} - пояснение под полем
+  //-       mods: ''          {string} - модификаторы блока
+  //-       attrs: {          {object} - любые атрибуты для input
+  //-         type:           {string}
+  //-         placeholder:    {string}
+  //-         ...
+  //-       }
+  //-     },
+  //-     ...
+  //- Вызов:
+        +field-radio([
+          {
+            title: 'Радиокнопка1',
+            helpText: 'Подсказка',
+            mods: '',
+            attrs: {
+              name: 'radio',
+              checked: true,
+            }
+          },
+          {
+            title: 'Радиокнопка2',
+            helpText: 'Подсказка',
+            mods: '',
+            attrs: {
+              name: 'radio',
+            }
+          },
+        ], 'ОбщееНазваниеБлока')
+
+  .field-radio&attributes(attributes)
+    if(typeof(title) !== 'undefined' && title)
+      .field-radio__title!= title
+    each checkbox in radiobuttons
+      -
+        var allMods = '';
+        if(typeof(checkbox.mods) !== 'undefined' && checkbox.mods) {
+          var modsList = checkbox.mods.split(',');
+          for (var i = 0; i < modsList.length; i++) {
+            allMods = allMods + ' field-radio__input-wrap--' + modsList[i].trim();
+          }
+        }
+      .field-radio__input-wrap(class=allMods)
+        label.field-radio__name
+          input.field-radio__input(type='radio')&attributes(checkbox.attrs)
+          span.field-radio__name-text!= checkbox.title
+        if(typeof(checkbox.helpText) !== 'undefined' && checkbox.helpText)
+          .field-radio__help-text-wrap
+            .field-radio__help-text!= checkbox.helpText

src/blocks/field-radio/readme.md

+В стилевом файле есть закомментированные фрагменты для замены нативного элемента своим (svg).

src/blocks/field-text/field-text.pug

@@ -5,25 +5,25 @@ mixin field-text(props)
   //- Принимает:
   //-   props {
   //-     title: ''         {string} - текст с названием (выводится над полем)
-  //-     type: ''        {string} - тип для input [text|email|number...]
-  //-     placeholder: '' {string} - подсказка в поле
-  //-     name: ''        {string} - атрибут name у input/textarea
-  //-     inputAttrs: {}  {object} - дополнительные атрибуты для input/textarea
-  //-     mods: ''        {string} - модификаторы блока
-  //-     textarea: false {bool}   - флаг input/textarea
+  //-     isTextarea: false {bool}   - флаг input/textarea
   //-     helpText: ''      {string} - пояснение под полем
+  //-     mods: ''          {string} - модификаторы блока
+  //-     attrs: {          {object} - любые атрибуты для input/textarea
+  //-       type:           {string}
+  //-       placeholder:    {string}
+  //-       ...
+  //-     }
   //-   }
   //- Вызов:
-  //-   +field-text({
-  //-     title: 'Текст',
-  //-     type: 'text',
-  //-     placeholder: '',
-  //-     name: '',
-  //-     inputAttrs: {'id': 'some-input-id', 'max': '200', 'min': '2'},
-  //-     mods: '',
-  //-     textarea: false,
-  //-     helpText: '',
-  //-   })
+        +field-text({
+          title: 'Название',
+          isTextarea: true,
+          helpText: 'Подсказка',
+          mods: '',
+          attrs: {
+            name: 'comment',
+          }
+        })
 
   -
     if(typeof(props) === 'undefined') {
@@ -41,17 +41,13 @@ mixin field-text(props)
     if(typeof(props.title) !== 'undefined' && props.title)
       span.field-text__name!= props.title
     span.field-text__input-wrap
-      if(typeof(props.textarea) !== 'undefined' && props.textarea)
+      if(typeof(props.isTextarea) !== 'undefined' && props.isTextarea)
         textarea.field-text__input(
-          placeholder=props.placeholder ? props.placeholder : ''
-          name=props.name ? props.name : ''
-        )&attributes(props.inputAttrs)
+        )&attributes(props.attrs)
       else
         input.field-text__input(
-          type=props.type ? props.type : 'text'
-          placeholder=props.placeholder ? props.placeholder : ''
-          name=props.name ? props.name : ''
-        )&attributes(props.inputAttrs)
+          type=(typeof(props.attrs) !== 'undefined' && props.attrs.type) ? props.attrs.type : 'text'
+        )&attributes(props.attrs)
       if(typeof(props.helpText) !== 'undefined' && props.helpText)
         span.field-text__help-text!= props.helpText
       block

src/blocks/main-nav/main-nav.pug

@@ -3,9 +3,9 @@
 mixin main-nav(selectedID)
 
   //- Принимает:
-  //-   selectedID {string} - id пункта меню, указанное в main-nav.json
+  //-   selectedID {string} - id пункта меню ( по умолчанию — из main-nav.json)
   //- Вызов:
-  //-   +main-nav('1')
+        +main-nav('1')
 
   nav.main-nav#nav&attributes(attributes)
     +burger('Показать главное меню', 'nav', 'main-nav--open')(class="main-nav__toggler")

src/blocks/main-nav/readme.md

+По умолчанию данные меню берутся из `main-nav/main-nav.json` и передаются в компилятор pug (см. `gulpfile.js`).
+
 По получению ссылками фокуса на их родителей с `.main-nav__item` добавляется модификатор `.main-nav__item--show-child`, что позволяет работать со вложенными меню с клавиатуры (предусмотрено 3 уровня).
 
 На малых ширинах преобразуется в мобильный вид, скрывается/показывается по клику на бургер, если JS включен (на `html` есть класс `js`).

src/blocks/menu/menu.pug

@@ -5,19 +5,19 @@ mixin menu(menu)
   //- Принимает:
   //-   menu {array} - массив с пунктами меню
   //- Вызов:
-  //-    -
-  //-      var myMenu = [
-  //-        {
-  //-          'text':'Пункт1',
-  //-          'url':'/',
-  //-        },
-  //-        {
-  //-          'text':'Пункт2',
-  //-          'url':'/',
-  //-          'mods': 'separator, active',
-  //-        },
-  //-      ];
-  //-    +menu(myMenu)
+      -
+        var myMenu = [
+          {
+            'text':'Пункт1',
+            'url':'/',
+          },
+          {
+            'text':'Пункт2',
+            'url':'/',
+            'mods': 'separator, active',
+          },
+        ];
+      +menu(myMenu)
 
   -
     if (typeof(menu) === 'undefined') {

src/blocks/thumb/thumb.pug

@@ -8,8 +8,8 @@ mixin thumb(url, alt, width, height)
   //-   width {string}  - соотв. атрибут тега картинки
   //-   height {string} - соотв. атрибут тега картинки
   //- Вызов:
-  //-   +thumb('img/joker.jpg', 'Джокер', 300, 200)
-  //-   +thumb('img/joker.jpg', 'Джокер', 300)
+        +thumb('img/joker.jpg', 'Джокер', 300, 200)
+        +thumb('img/joker.jpg', 'Джокер', 300)
 
   - if (typeof(url) !== 'undefined')
     img.thumb(src=url, alt=alt, width=width, height=height)&attributes(attributes)

src/pug/mixins.pug

@@ -9,3 +9,5 @@ include ../blocks/alert/alert.pug
 include ../blocks/menu/menu.pug
 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