add proje

.editorconfig

+# Универсальные настройки редактора
+#
+# http://editorconfig.org
+# https://habrahabr.ru/post/220131/
+# https://packagecontrol.io/packages/EditorConfig
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
\ No newline at end of file

.eslintignore

+src/js/head-script.js

.eslintrc

+{
+  "parser": "babel-eslint",
+  "extends": "eslint:recommended",
+  "globals": {
+    "require": true,
+  },
+  "rules": {
+    "strict": 0
+  }
+}

.gitattributes

+* text=auto

.gitignore

+design/
+build/*
+!build/readme.md
+
+src/pug/mixins.pug
+src/js/entry.js
+src/scss/style.scss
+
+src/blocks/sprite-svg/img/sprite.svg
+src/blocks/sprite-png/sprite-png.scss
+src/blocks/sprite-png/img/sprite-*.png
+
+__MACOSX
+.Saved/
+_arc/
+bower_components/
+node_modules/
+package-lock.json
+.vscode/
+.publish/
+.DS_Store
+*.log
+*.sublime-*
+*.rar
+*.zip
+.idea
+ex_files
+Thumbs.db

.pug-lintrc

+{
+  "validateExtensions": true,
+  "validateDivTags": true,
+  "validateAttributeSeparator": { "separator": ", ", "multiLineSeparator": ",\n " },
+  "validateAttributeQuoteMarks": "'",
+  "requireSpecificAttributes": [ { "img": [ "src", "alt" ] } ],
+  "requireSpaceAfterCodeOperator": true,
+  "requireLowerCaseTags": true,
+  "requireClassLiteralsBeforeIdLiterals": true,
+  "requireClassLiteralsBeforeAttributes": true,
+  "disallowTrailingSpaces": true,
+  "disallowSpacesInsideAttributeBrackets": true,
+  "disallowLegacyMixinCall": true,
+  "disallowDuplicateAttributes": true
+}

.stylelintignore

+# перечисление игнорируемых stylelint-ом файлов
+src/scss/blocks-lib.scss
+src/scss/style.scss
+src/blocks/sprite-png/sprite-png.scss
+src/blocks/page/page.scss
+src/blocks/blocks-library/blocks-library.scss

.travis.yml

+language: node_js
+
+node_js:
+  - "8.11"
+
+notifications:
+  email: true

LICENSE

+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                    Version 2, December 2004
+
+ Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.

blocks.js

+/* eslint-disable */
+'use strict';
+
+// Генератор файлов блока
+
+// Использование: node createBlock.js [имя блока] [доп. расширения через пробел]
+
+const fs = require('fs');
+const projectConfig = require('./config.js');
+
+const dir = projectConfig.dir;
+const mkdirp = require('mkdirp');
+
+const blockName = process.argv[2];
+const defaultExtensions = ['scss', 'img', 'bg-img']; // расширения по умолчанию
+const extensions = uniqueArray(defaultExtensions.concat(process.argv.slice(3)));
+
+// Если есть имя блока
+if (blockName) {
+  const dirPath = `${dir.blocks}${blockName}/`; // полный путь к создаваемой папке блока
+  mkdirp(dirPath, (err) => {                    // создаем
+    // Если какая-то ошибка — покажем
+    if (err) {
+      console.error(`[NTH] Отмена операции: ${err}`);
+    }
+
+    // Нет ошибки, поехали!
+    else {
+      console.log(`[NTH] Создание папки: ${dirPath} (если отсутствует)`);
+
+      // Обходим массив расширений и создаем файлы, если они еще не созданы
+      extensions.forEach((extension) => {
+        const filePath = `${dirPath + blockName}.${extension}`; // полный путь к создаваемому файлу
+        let fileContent = '';                                   // будущий контент файла
+        let fileCreateMsg = '';                                 // будущее сообщение в консоли при создании файла
+
+        if (extension === 'scss') {
+          fileContent = `// В этом файле должны быть стили для БЭМ-блока ${blockName}, его элементов,\n// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...\n// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority\n\n.${blockName} {\n\n\t$block-name:                &; // #{$block-name}__element\n}\n`;
+          // fileCreateMsg = '';
+        }
+
+        else if (extension === 'js') {
+          fileContent = `/* global document */\n\n// const ready = require('../../js/utils/documentReady.js');\n\n// ready(function(){\n//   \n// });\n`;
+        }
+
+        else if (extension === 'md') {
+          fileContent = '';
+        }
+
+        else if (extension === 'pug') {
+          fileContent = `//- Все примеси в этом файле должны начинаться c имени блока (${blockName})\n\nmixin ${blockName}(text, mods)\n\n\t//- Принимает:\n\t//-   text    {string} - текст\n\t//-   mods    {string} - список модификаторов\n\t//- Вызов:\n\t\t+${blockName}('Текст', 'some-mod')\n\n\t-\n\t\t// список модификаторов\n\t\tvar allMods = '';\n\t\tif(typeof(mods) !== 'undefined' && mods) {\n\t\t\tvar modsList = mods.split(',');\n\t\t\tfor (var i = 0; i < modsList.length; i++) {\n\t\t\t\tallMods = allMods + ' ${blockName}_' + modsList[i].trim();\n\t\t\t}\n\t\t}\n\n\t.${blockName}(class=allMods)&attributes(attributes)\n\t\t.${blockName}__inner\n\t\t\tblock\n`;
+        }
+
+        else if (extension === 'img') {
+          const imgFolder = `${dirPath}img/`;
+          if (fileExist(imgFolder) === false) {
+            mkdirp(imgFolder, (err) => {
+              if (err) console.error(err);
+              else console.log(`[NTH] Создание папки: ${imgFolder} (если отсутствует)`);
+            });
+          } else {
+            console.log(`[NTH] Папка ${imgFolder} НЕ создана (уже существует) `);
+          }
+        }
+
+        else if (extension === 'bg-img') {
+          const imgFolder = `${dirPath}bg-img/`;
+          if (fileExist(imgFolder) === false) {
+            mkdirp(imgFolder, (err) => {
+              if (err) console.error(err);
+              else console.log(`[NTH] Создание папки: ${imgFolder} (если отсутствует)`);
+            });
+          } else {
+            console.log(`[NTH] Папка ${imgFolder} НЕ создана (уже существует) `);
+          }
+        }
+
+        if (fileExist(filePath) === false && extension !== 'img' && extension !== 'bg-img' && extension !== 'md') {
+          fs.writeFile(filePath, fileContent, (err) => {
+            if (err) {
+              return console.log(`[NTH] Файл НЕ создан: ${err}`);
+            }
+            console.log(`[NTH] Файл создан: ${filePath}`);
+            if (fileCreateMsg) {
+              console.warn(fileCreateMsg);
+            }
+          });
+        }
+        else if (extension !== 'img' && extension !== 'bg-img' && extension !== 'md') {
+          console.log(`[NTH] Файл НЕ создан: ${filePath} (уже существует)`);
+        }
+        else if (extension === 'md') {
+          fs.writeFile(`${dirPath}readme.md`, fileContent, (err) => {
+            if (err) {
+              return console.log(`[NTH] Файл НЕ создан: ${err}`);
+            }
+            console.log(`[NTH] Файл создан: ${dirPath}readme.md`);
+            if (fileCreateMsg) {
+              console.warn(fileCreateMsg);
+            }
+          });
+        }
+      });
+
+    }
+  });
+} else {
+  console.log('[NTH] Отмена операции: не указан блок');
+}
+
+
+
+function uniqueArray(arr) {
+  const objectTemp = {};
+  for (let i = 0; i < arr.length; i++) {
+    const str = arr[i];
+    objectTemp[str] = true;
+  }
+  return Object.keys(objectTemp);
+}
+
+function fileExist(path) {
+  const fs = require('fs');
+  try {
+    fs.statSync(path);
+  } catch (err) {
+    return !(err && err.code === 'ENOENT');
+  }
+}

config.js

+/* global module */
+
+let config = {
+  "notGetBlocks": [],
+  "ignoredBlocks": [
+    "no-js"
+  ],
+  "alwaysAddBlocks": [
+    "vue",
+    "fias-lib",
+    "field-text-vue",
+    "field-file-vue",
+    "field-select-vue",
+    "filter",
+    "app-registration",
+    "app-registration-form",
+    "app-ex-registration",
+    "app-ex-registration-form",
+    "app-waste-utilisation-order",
+    "app-waste-utilisation-order-record",
+    "app-waste-utilisation-order-form",
+    "app-registration-order",
+    "app-registration-order-header",
+    "app-registration-order-form",
+    "order-registration-header",
+    "order-registration",
+    "block",
+    "table",
+    "form-validation",
+    "sprite-svg",
+    "utilization-table",
+    "toggler",
+    "tooltip"
+    // "sprite-png",
+    // "object-fit-polyfill",
+  ],
+  "addStyleBefore": [
+    "src/scss/fw.scss"
+  ],
+  "addStyleAfter": [
+    // "src/scss/print.scss"
+  ],
+  "addJsBefore": [
+    "./utils/polyfills.js"
+  ],
+  "addJsAfter": [
+    "./script.js"
+  ],
+  "addAssets": {
+    "src/fonts/*.{eot,svg,ttf,woff,woff2}": "fonts/",
+    "src/img/*.{png,svg,jpg,jpeg}": "img/",
+    "src/js/vue.js": "js/",
+    "src/php/bd.php": "/"
+    // "src/favicon/*.{png,ico,svg,xml,webmanifest}": "img/favicon",
+  },
+  "dir": {
+    "src": "src/",
+    "build": "build/",
+    "blocks": "src/blocks/"
+  }
+};
+
+module.exports = config;

db.json

+{
+	"communal": [
+		{
+			"label": "Выберите группу отходов",
+			"value": "0",
+			"disabled": true
+		},
+		{
+			"label": "Отходы щелочей и кислот",
+			"value": "1"
+		},
+		{
+			"label": "Грунты загрязненные",
+			"value": "2"
+		},
+		{
+			"label": "Отходы лаков, красок, смол, мастик, растворителей, спиртов",
+			"value": "3"
+		},
+		{
+			"label": "Масла, жиры, смазочно-охлаждающие жидкости",
+			"value": "4"
+		},
+		{
+			"label": "Тара загрязненная",
+			"value": "5"
+		}
+	],
+	"fluid": [
+		{
+			"label": "Выберите группу отходов",
+			"value": "0",
+			"disabled": true
+		},
+		{
+			"label": "Промышленные стоки",
+			"value": "1"
+		},
+		{
+			"label": "Жидкие бытовые отходы",
+			"value": "2"
+		},
+		{
+			"label": "Жидкие промышленные отходы",
+			"value": "3"
+		}
+	],
+	"industrial": [
+		{
+			"label": "Выберите группу отходов",
+			"value": "0",
+			"disabled": true
+		},
+		{
+			"label": "Отходы щелочей и кислот",
+			"value": "1"
+		},
+		{
+			"label": "Грунты загрязненные",
+			"value": "2"
+		},
+		{
+			"label": "Отходы лаков, красок, смол, мастик, растворителей, спиртов",
+			"value": "3"
+		},
+		{
+			"label": "Масла, жиры, смазочно-охлаждающие жидкости",
+			"value": "4"
+		},
+		{
+			"label": "Тара загрязненная",
+			"value": "5"
+		},
+		{
+			"label": "Пищевые отходы",
+			"value": "6"
+		},
+		{
+			"label": "Лабораторные отходы, химикалии",
+			"value": "7"
+		},
+		{
+			"label": "Отходы металла, стекла, дерева, текстиля",
+			"value": "8"
+		},
+		{
+			"label": "Гальванические шламы",
+			"value": "9"
+		},
+		{
+			"label": "Утилизация промасленной ветоши, загрязненных фильтров",
+			"value": "10"
+		},
+		{
+			"label": "Чистящие, моющие средства, отходы косметики",
+			"value": "11"
+		},
+		{
+			"label": "Отходы оргтехники, трансформаторы, конденсаторы",
+			"value": "12"
+		},
+		{
+			"label": "Утилизация шин, резины, пластмасс",
+			"value": "13"
+		},
+		{
+			"label": "Утилизация нефтесодержащих отходов, отходы ГСМ",
+			"value": "14"
+		},
+		{
+			"label": "Биологические отходы",
+			"value": "15"
+		},
+		{
+			"label": "Промышленные стоки",
+			"value": "16"
+		},
+		{
+			"label": "Аварийно химически опасные вещества",
+			"value": "17"
+		}
+	],
+	"medical": [
+		{
+			"label": "Выберите группу отходов",
+			"value": "0",
+			"disabled": true
+		},
+		{
+			"label": "Утилизация медицинских отходов класса А",
+			"value": "1"
+		},
+		{
+			"label": "Утилизация медицинских отходов класса Б",
+			"value": "2"
+		},
+		{
+			"label": "Утилизация медицинских отходов класса В",
+			"value": "3"
+		},
+		{
+			"label": "Утилизация медицинских отходов класса Г",
+			"value": "4"
+		}
+	]
+
+}
\ No newline at end of file

package.json

+{
+  "name": "base",
+  "version": "4.0.0",
+  "description": "Startkit for HTML/CSS/JS pages layout.",
+  "author": "Nikolay Gromov",
+  "license": "WTFPL",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "scripts": {
+    "test": "npm run test:pug && npm run test:style && npm run test:js",
+    "test:pug": "glob-exec \"src/**/*.pug\" -- \"pug-lint {{files.join(' ')}}\"",
+    "test:style": "stylelint \"src/**/*.scss\" --syntax=scss",
+    "test:js": "eslint src/blocks/**/*.js src/js/**/*.js",
+    "start": "gulp",
+    "wlib": "cross-env BUILD_LIBRARY=yes gulp",
+    "build": "gulp build",
+    "lint-staged": "lint-staged",
+    "fake": "json-server --watch db.json"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "lint-staged": {
+    "*.{js,pug,md}": "editorconfig-cli",
+    "*.pug": "pug-lint",
+    "*.scss": "stylelint --syntax=scss",
+    "*.js": "eslint"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "@htmlacademy/editorconfig-cli": "^1.0.0",
+    "autoprefixer": "^9.3.1",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.4",
+    "browser-sync": "^2.18.8",
+    "cpy": "^7.0.1",
+    "cross-env": "^5.0.0",
+    "css-mqpacker": "^7.0.0",
+    "del": "^3.0.0",
+    "eslint": "^5.12.0",
+    "get-classes-from-html": "^1.0.1",
+    "gh-pages": "^2.0.1",
+    "glob-exec": "^0.1.1",
+    "gulp": "^4.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-csso": "^3.0.1",
+    "gulp-debug": "^4.0.0",
+    "gulp-imagemin": "^5.0.3",
+    "gulp-plumber": "^1.1.0",
+    "gulp-postcss": "^8.0.0",
+    "gulp-pretty-html": "^2.0.9",
+    "gulp-pug": "^4.0.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-replace": "^1.0.0",
+    "gulp-sass": "^4.0.1",
+    "gulp-sourcemaps": "^2.4.1",
+    "gulp-svgmin": "^2.1.0",
+    "gulp-svgstore": "^7.0.0",
+    "gulp.spritesmith": "^6.3.0",
+    "husky": "^1.1.4",
+    "json-server": "^0.15.0",
+    "jstransformer-markdown-it": "^2.0.0",
+    "lint-staged": "^8.0.4",
+    "merge-stream": "^1.0.1",
+    "mkdirp": "^0.5.1",
+    "path": "^0.12.7",
+    "postcss-import": "^12.0.1",
+    "postcss-inline-svg": "^3.0.0",
+    "postcss-object-fit-images": "^1.1.2",
+    "pug-lint": "^2.5.0",
+    "stylelint": "^9.10.0",
+    "stylelint-order": "^2.0.0",
+    "stylelint-selector-bem-pattern": "^2.0.0",
+    "through2": "^3.0.0",
+    "vinyl-buffer": "^1.0.1",
+    "webpack": "^4.27.1",
+    "webpack-stream": "^5.2.1"
+  },
+  "dependencies": {
+    "autosize": "^4.0.2",
+    "axios": "^0.19.0",
+    "baron": "^3.0.3",
+    "choices.js": "^6.0.0",
+    "closest": "0.0.1",
+    "jquery": "^3.1.1",
+    "object-fit-images": "^3.2.3",
+    "svg4everybody": "^2.1.8",
+    "vee-validate": "^3.0.3",
+    "vue": "^2.6.10"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }
+}

src/blocks/add-btn/add-btn.scss

+// В этом файле должны быть стили для БЭМ-блока add-btn, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
+
+.add-btn {
+
+	$block-name:                &; // #{$block-name}__element
+
+	position: absolute;
+	
+	top: 22px;
+	right: -60px;
+	
+	@include media-breakpoint-down(xs) {
+		position: static;
+		@include vertical-rhythm((t), purple, padding);
+	}
+}

src/blocks/add-btn/readme.md

+Кнопка добавление полей
+На болших экранах справа, на мобильниках опускается вниз
\ No newline at end of file

src/blocks/alert/alert.pug

+//- Все примеси в этом файле должны начинаться c имени блока (alert)
+
+mixin alert(title, mods)
+
+	//- Принимает:
+	//-   title {string} - заголовок
+	//-   mods {string}  - стилевые модификаторы
+	//- Вызов:
+				+alert()
+					p Текст
+				+alert('Внимание', 'warning, some-mod-name')
+					p Предупреждение
+					+close('Закрыть', 'sm')(class='alert__close', aria-label='Закрыть')
+				+alert('Внимание', 'danger')
+					p Проблема
+					+close('Закрыть', 'sm')(class='alert__close', aria-label='Закрыть')
+				+alert('Внимание', 'success')
+					p Успех
+					+close('Закрыть', 'sm')(class='alert__close', aria-label='Закрыть')
+
+	-
+		//- список модификаторов
+		var allMods = '';
+		if(typeof(mods) !== 'undefined' && mods) {
+			var modsList = mods.split(',');
+			for (var i = 0; i < modsList.length; i++) {
+				allMods = allMods + ' alert_' + modsList[i].trim();
+			}
+		}
+
+	.alert(class=allMods, role='alert')&attributes(attributes)
+		span.alert__icon
+			+icon('i-info', '')
+
+		+remove('')(class="alert__close")
+		if (typeof(title) !== 'undefined' && title !== '')
+			.alert__header!= title
+		block

src/blocks/alert/alert.scss

+// В этом файле должны быть стили для БЭМ-блока alert, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
+
+.alert {
+	position: relative;
+	padding: 1em 2em 1em 50px;
+	border-radius: $border-radius;
+	font-size: 1.4rem;
+	color: $text-color;
+	background-color: #fff;
+	@include notification-shadow;
+
+	& > * { // stylelint-disable-line  selector-combinator-blacklist
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+	& > * + * { // stylelint-disable-line  selector-combinator-blacklist
+		margin-top: 1em;
+	}
+
+	&__header {
+		display: block;
+		margin-top: 0;
+		margin-bottom: 1rem;
+		font-weight: normal;
+		line-height: 1.2;
+		color: $red;
+
+		& + * {
+			margin-top: 0;
+		}
+	}
+
+	&__close.remove {
+		position: absolute;
+		top: 10px;
+		right: 10px;
+		margin: 0;
+	}
+	
+	&__icon {
+		position: absolute;
+		left: 15px;
+		top: 50%;
+		transform: translateY(-50%);
+		color: $red;
+		font-size: 2rem;
+	}
+	// Модификатор фиксированное положение внизу экрана слева
+	&_float {
+		position: fixed;
+		left: 30px;
+		bottom: 100px;
+		z-index: $zindex-alert-float;
+		width: 380px;
+		
+		@include media-breakpoint-down(xs) {
+			left: 0;
+			bottom: 0;
+			width: 100%;
+		}
+	}
+
+
+	&_warning {
+		background-color: lighten($color-warning, 30%);
+		color: $text-color;
+	}
+
+	&_danger {
+		background-color: $color-danger;
+		color: #fff;
+
+		a {
+			color: inherit;
+			text-decoration: underline;
+
+			&:hover,
+			&:focus {
+				text-decoration: none;
+			}
+		}
+	}
+
+	&_success {
+		background-color: $color-success;
+		color: #fff;
+
+		a {
+			color: inherit;
+			text-decoration: underline;
+
+			&:hover,
+			&:focus {
+				text-decoration: none;
+			}
+		}
+	}
+}

src/blocks/app-ex-registration/app-ex-registration.js

+Vue.component('app-ex-registration', {
+	data: function () {
+		return {
+			persons: {
+				juridical: 'Юридическое лицо',
+				natural: 'Физическое лицо',
+			},
+			activeType: 'juridical'
+		}
+	},
+	template: `
+		<div class="row">
+			<div class="offset-lg-1 col-lg-10 offset-xl-2 col-xl-8">
+			
+				<div class="order-registration__user-types">
+
+					<a 	href="" 
+							:class="['order-registration__user-type-item', (activeType == key) ? 'active' : '']"
+							v-for="(name, key, index) in persons"
+							:key="index"
+							@click.prevent="activeType = key"
+					>
+						<span>{{ name }}</span>
+					</a>
+					
+				</div>
+
+				<app-ex-registration-form
+					:personType="activeType"
+				></app-ex-registration-form>
+
+			</div>
+		</div>
+	`
+})
\ No newline at end of file

src/blocks/app-registration-order-form/readme.md

+#Компонент "app-registration-order-form" для вывода формы оформления заявки
+
+на странице Оформление заявки (order-registration.html)
\ No newline at end of file

src/blocks/app-registration-order/app-registration-order.js

+Vue.component('app-registration-order', {
+	data: function () {
+		return {
+			persons: {
+				juridical: 'Юридическое лицо',
+				natural: 'Физическое лицо',
+			},
+			activeType: 'juridical'
+		}
+	},
+	template: `
+		<div class="row">
+			<div class="offset-lg-1 col-lg-10 offset-xl-2 col-xl-8">
+			
+				<div class="order-registration__user-types">
+
+					<a 	href="" 
+							:class="['order-registration__user-type-item', (activeType == key) ? 'active' : '']"
+							v-for="(name, key, index) in persons"
+							:key="index"
+							@click.prevent="activeType = key"
+					>
+						<span>{{ name }}</span>
+					</a>
+					
+				</div>
+
+				<app-registration-order-form
+					:personType="activeType"
+				></app-registration-order-form>
+
+			</div>
+		</div>
+	`
+})
\ No newline at end of file

src/blocks/app-registration-order/readme.md

+#app-registration-order - компонент страницы оформления заявки (order-registration.html)
+
+состоит из компонент:
+1) app-registration-order-header -верхушка
+2) app-registration-order-form - форма
\ No newline at end of file

src/blocks/app-registration/app-registration.js

+Vue.component('app-registration', {
+	data: function () {
+		return {
+			persons: {
+				juridical: 'Юридическое лицо',
+				natural: 'Физическое лицо',
+			},
+			activeType: 'juridical'
+		}
+	},
+	template: `
+		<div class="row">
+			<div class="offset-lg-1 col-lg-10 offset-xl-2 col-xl-8">
+			
+				<div class="order-registration__user-types">
+
+					<a 	href="" 
+							:class="['order-registration__user-type-item', (activeType == key) ? 'active' : '']"
+							v-for="(name, key, index) in persons"
+							:key="index"
+							@click.prevent="activeType = key"
+					>
+						<span>{{ name }}</span>
+					</a>
+					
+				</div>
+
+				<app-registration-form
+					:personType="activeType"
+				></app-registration-form>
+
+			</div>
+		</div>
+	`
+})
\ No newline at end of file

src/blocks/app-waste-utilisation-order-form/readme.md

+#Компонент для вывода формы добавления - редактирования типа отхода
+
+страница "Заявка на утилизацию отходов"
\ No newline at end of file

src/blocks/app-waste-utilisation-order-record/app-waste-utilisation-order-record.js

+/* eslint-disable no-undef */
+Vue.component('app-waste-utilisation-order-record', {
+  data: function () {
+    return {
+
+    }
+  },
+  props: {
+    record: {
+      type: Object
+    }
+  },
+  methods: {
+    clickOnRecordRemoveBtn() {
+      this.$emit('clickOnRecordRemoveBtn')
+    },
+    dblclickonrecord() {
+      this.$emit('dblСlickOnRecord')
+    }
+  },
+  computed: {
+      wasteTotalPrice : function () {
+        var totalPrice = Number(0);
+
+        if (this.record["wCost"]["value"]) {
+          var price = this.record["wCost"]["value"];
+          totalPrice = Number(price);
+        }
+        
+        return totalPrice;
+      },
+      TransportTotalPrice : function () {
+        let totalPrice = Number(0);
+
+          if (this.record["wTransportCost"]["value"]) {
+            var price = this.record["wTransportCost"]["value"];
+            totalPrice = Number(price);
+          }
+
+        return totalPrice;
+    },
+  },
+  template: `
+    <div  class="row utilization-table__row"
+          @dblclick="dblclickonrecord"
+    >
+      <!-- Debug --->
+          <div style="display: none; position: absolute; left: 0;top: 0; background-color:#fff; z-index:1000; width: 300px; padding: 10px; border: 1px solid #999;">
+            <pre>
+              {{ record }}
+            </pre>
+          </div>
+      <!-- end Debug --->
+      <div class="offset-lg-2 col-lg-8">
+        <div class="utilization-table__tr">
+          <div class="utilization-table__td utilization-table__td_type">
+            <div class="d-flex align-items-center">
+              <span class="iconsvg iconsvg_pr10">
+                <svg style="width: 25px; height: 25px;">
+                  <use :xlink:href="'/local/templates/ecouniversal/img/sprite.svg#' + record.wType.name + '-sm'"></use>
+                </svg>
+              </span>
+              <span>{{ record.wGroup.caption }}</span>
+            </div>
+          </div>
+          <div class="utilization-table__td utilization-table__td_name">
+            <span>{{ record.wFKKO.code }}<br>{{ record.wFKKO.description }}</span>
+          </div>
+          <div class="utilization-table__td utilization-table__td_quantity">
+            <span>{{ record.wAmount }} {{ record.wUnit.caption }}</span>
+          </div>
+          <div class="utilization-table__td utilization-table__td_sum">
+            <span>{{ wasteTotalPrice + TransportTotalPrice}}</span>
+          </div>
+          <div class="utilization-table__td utilization-table__td_remove">
+            <div 
+                class="remove"
+                @click="clickOnRecordRemoveBtn"
+            >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+})
\ No newline at end of file

src/blocks/app-waste-utilisation-order-record/readme.md

+#app-waste-utilisation-order-record -  компонент записи (строка)
+
+выводится на странице Заявка на утилизацию отходов (возможно будет выводиться и на странице Результаты расчёта)
\ No newline at end of file

src/blocks/app-waste-utilisation-order/readme.md

+#app-waste-utilisation-order - компонент страницы формирования заявки
+состоит из таких компонент как:
+1. app-waste-utilisation-order-record 
+    запись, появляющаяся после сохранения формы заявки
+
+2. app-waste-utilisation-order-form 
+    сама форма заявки
\ No newline at end of file

src/blocks/baron/baron.js

+const ready = require('../../js/utils/documentReady.js');
+const baron = require('baron');
+
+ready(function(){
+
+  baron({
+    root: '#baron-demo',
+    scroller: '.baron__scroller',
+    bar: '.baron__bar',
+    scrollingCls: 'baron--scrolling',
+    draggingCls: 'baron--dragging',
+    barOnCls: 'baron--scrollbar',
+  });
+
+});

src/blocks/baron/baron.pug

+//- Блок для кастомного скролла baron: https://github.com/Diokuz/baron
+//- Нуждается в соотв. зависимости: https://www.npmjs.com/package/baron
+//- (должна быть указана в ./projectConfig.json, есть по умолчанию)
+//- ВНИМАНИЕ! Помимо вызова примеси, нужно включить baron на блоке! см. blocks/baron/baron.js
+
+mixin baron(id, mods, tag)
+
+  //- Принимает:
+  //-   id     {string} - ID этого конкретного блока с кастомным скроллом
+  //-   mods    {string} - список модификаторов
+  //-   tag     {string} - тег
+  //- Вызов:
+        +baron('some-mod')(style='width:100px; height: 100px')
+          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta aliquid nemo, sit possimus, eveniet tempore minus, doloremque incidunt, nihil quos aperiam ab iure quia. Ipsa sit porro incidunt, sed!
+        .some-block
+          +baron('', 'section')(class='some-block__demo')
+            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta aliquid nemo, sit possimus, eveniet tempore minus, doloremque incidunt, nihil quos aperiam ab iure quia. Ipsa sit porro incidunt, sed!
+
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' baron--' + modsList[i].trim();
+      }
+    }
+    var parentTag = 'div';
+    if(typeof(tag) !== 'undefined' && tag) {
+      parentTag = tag;
+    }
+
+  #{parentTag}.baron(id=id, class=allMods)&attributes(attributes)
+    .baron__scroller
+      block
+    .baron__track
+      //- .baron__control.baron__up ▲
+      .baron__free
+        .baron__bar
+      //- .baron__control.baron__down ▼

src/blocks/baron/readme.md

+Кастомный скролл c [baron](https://www.npmjs.com/package/baron). [Демо кастомного скролла](http://diokuz.github.io/baron/).
+
+Для каждого блока нужно включать baron в `blocks/baron/baron.js`.
+
+Оставлена одна тема оформления (используется по умолчанию). Стили берутся из `blocks/baron/baron.scss`. См. [стилизацию оригинальных тем](https://github.com/Diokuz/baron/blob/master/skins/styles.css).

src/blocks/blocks-library/readme.md

+Оформление одного блока при описании в библиотеке блоков.

src/blocks/burger/readme.md

+Анимированное превращение в крестик по добавлению модификатора. <br />
+JS блока берет переданный в data-атрибуте идентификатор и, по клику на бургере, добавляет переданный в data-атрибуте класс на элемент с этим модификатором.

src/blocks/card/readme.md

+Карточка товара (миниатюра-ссылка на страницу товара).

src/blocks/close/readme.md

+Иконка закрытия.

src/blocks/code/readme.md

+Оформление блочных вставок кода.

src/blocks/db/readme.md

+блок сданными JSON
\ No newline at end of file

src/blocks/embed-responsive/readme.md

+По умолчанию предназначен для встраивания роликов 16:9. C модификатором позволяет встраивать ролики 4:3.

src/blocks/field-checkbox/readme.md

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