Skip to content

K
kpp
Commit 6139de63 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

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

parent 3d66a889
Hide whitespace changes
Inline Side-by-side
Showing with 210 additions and 52 deletions
package.json
View file @ 6139de63
...@@ -32,7 +32,6 @@ ...@@ -32,7 +32,6 @@
"autoprefixer": "^9.3.1", "autoprefixer": "^9.3.1",
"babel-loader": "^8.0.4", "babel-loader": "^8.0.4",
"browser-sync": "^2.18.8", "browser-sync": "^2.18.8",
"closest": "0.0.1",
"cpy": "^7.0.1", "cpy": "^7.0.1",
"cross-env": "^5.0.0", "cross-env": "^5.0.0",
"css-mqpacker": "^7.0.0", "css-mqpacker": "^7.0.0",
...@@ -74,6 +73,8 @@ ...@@ -74,6 +73,8 @@
}, },
"dependencies": { "dependencies": {
"baron": "^3.0.3", "baron": "^3.0.3",
"choices.js": "^4.1.3",
"closest": "0.0.1",
"jquery": "^3.1.1", "jquery": "^3.1.1",
"object-fit-images": "^3.2.3", "object-fit-images": "^3.2.3",
"svg4everybody": "^2.1.8" "svg4everybody": "^2.1.8"
......
src/blocks/blocks-library/blocks-library.js
View file @ 6139de63
require('../main-nav/main-nav.js'); require('../main-nav/main-nav.js');
require('../burger/burger.js'); require('../burger/burger.js');
require('../field-file/field-file.js'); require('../field-file/field-file.js');
require('../field-select/field-select.js');
require('../scroll-link/scroll-link.js'); require('../scroll-link/scroll-link.js');
require('../to-top/to-top.js'); require('../to-top/to-top.js');
require('../off-canvas/off-canvas.js'); require('../off-canvas/off-canvas.js');
......
src/blocks/field-select/field-select.js 0 → 100644
View file @ 6139de63
const Choices = require('choices.js');
const choices = new Choices('.field-select__select', {
searchEnabled: false,
placeholderValue: 'Выберите',
});
src/blocks/field-select/field-select.pug
View file @ 6139de63
...@@ -98,14 +98,15 @@ mixin field-select(title, attrs, options, helpText, mods) ...@@ -98,14 +98,15 @@ mixin field-select(title, attrs, options, helpText, mods)
.field-select(class=allMods)&attributes(attributes) .field-select(class=allMods)&attributes(attributes)
if(typeof(title) !== 'undefined' && title) if(typeof(title) !== 'undefined' && title)
.field-select__name!= title .field-select__name!= title
select.field-select__select&attributes(attrs) .field-select__select-wrap
each option in options select.field-select__select&attributes(attrs)
//- option= option each option in options
if(typeof(option.child) !== 'undefined' && option.child) //- option= option
optgroup(label=option.attrs.label) if(typeof(option.child) !== 'undefined' && option.child)
each subOption in option.child optgroup(label=option.attrs.label)
option&attributes(subOption.attrs)= subOption.title each subOption in option.child
else if(typeof(option.title) !== 'undefined' && option.title) option&attributes(subOption.attrs)= subOption.title
option&attributes(option.attrs)= option.title else if(typeof(option.title) !== 'undefined' && option.title)
if(typeof(helpText) !== 'undefined' && helpText) option&attributes(option.attrs)= option.title
span.field-select__help-text!= helpText if(typeof(helpText) !== 'undefined' && helpText)
span.field-select__help-text!= helpText
src/blocks/field-select/field-select.scss
View file @ 6139de63
...@@ -13,41 +13,42 @@ ...@@ -13,41 +13,42 @@
@include field-name; @include field-name;
} }
&__input-wrap {} &__select-wrap {}
&__select { // &__select {
display: inline-block; // display: inline-block;
vertical-align: middle; // vertical-align: middle;
width: 100%; // width: 100%;
line-height: $line-height; // line-height: $line-height;
padding: $field-padding-vertical $field-padding-horizontal; // padding: $field-padding-vertical $field-padding-horizontal;
font-size: inherit; // padding-right: 35px;
font-family: inherit; // font-size: inherit;
border: 1px solid $border-color; // font-family: inherit;
border-radius: $border-radius; // border: 1px solid $border-color;
appearance: none; // border-radius: $border-radius;
background-color: #fff; // appearance: none;
// background-color: #fff;
&[multiple] {
background-image: none; // &[multiple] {
min-height: 6.8em; // background-image: none;
} // min-height: 6.8em;
// }
&::-ms-expand {
display: none; // &::-ms-expand {
} // display: none;
// }
&:active,
&:focus { // &:active,
@include field-focus; // &:focus {
} // @include field-focus;
// }
&[disabled],
&[readonly] { // &[disabled],
cursor: default; // &[readonly] {
background-color: $gray-lightest; // cursor: default;
} // background-color: $gray-lightest;
} // }
// }
&__help-text { &__help-text {
@include field-help-text; @include field-help-text;
...@@ -56,6 +57,7 @@ ...@@ -56,6 +57,7 @@
&--error { &--error {
color: $color-danger;
#{$block-name}__name, #{$block-name}__name,
#{$block-name}__select, #{$block-name}__select,
...@@ -69,3 +71,109 @@ ...@@ -69,3 +71,109 @@
} }
} }
} }
.choices {
$block-name: &; // #{$block-name}__element
position: relative;
&:focus {
outline: 0;
&:not(.is-disabled) {
#{$block-name}__inner {
@include field-focus;
}
}
}
&: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);
}
.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;
&.is-highlighted {
background: $gray-lightest;
}
}
}
&__heading {
padding: $field-padding-vertical $field-padding-horizontal;
font-size: $font-size--small;
font-weight: 700;
opacity: 0.5;
cursor: default;
}
&.is-open {
#{$block-name}__list--dropdown {
display: block;
}
}
&.is-disabled {
#{$block-name}__inner {
background-color: $gray-lighter;
cursor: default;
}
}
}
src/blocks/page/page.scss
View file @ 6139de63
...@@ -69,6 +69,9 @@ body { ...@@ -69,6 +69,9 @@ body {
text-align: left; text-align: left;
color: $text-color; color: $text-color;
background-color: $body-bg; background-color: $body-bg;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
} }
[tabindex='-1']:focus { [tabindex='-1']:focus {
......
src/pages/blocks-demo.pug
View file @ 6139de63
...@@ -559,7 +559,7 @@ block content ...@@ -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: { attrs: {
value: 'val06', value: 'val06',
} }
...@@ -578,7 +578,8 @@ block content ...@@ -578,7 +578,8 @@ block content
'Название селекта', 'Название селекта',
{ {
name: 'select', name: 'select',
id: 'select-demo' id: 'select-demo',
disabled: true,
}, },
[ [
{ {
...@@ -610,6 +611,42 @@ block content ...@@ -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() +block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/field-select/field-select.pug include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/field-select/field-select.pug
...@@ -627,7 +664,8 @@ block content ...@@ -627,7 +664,8 @@ block content
+field-text({ +field-text({
helpText: 'Подсказка', helpText: 'Подсказка',
attrs: { attrs: {
placeholder: 'Пример' placeholder: 'Пример',
disabled: true,
} }
}) })
+field-text({ +field-text({
......
src/scss/variables.scss
View file @ 6139de63
...@@ -79,8 +79,8 @@ $grid-gutter-width: 30px; ...@@ -79,8 +79,8 @@ $grid-gutter-width: 30px;
// Разное // Разное
$field-padding-vertical: 0.3em; $field-padding-vertical: 5px;
$field-padding-horizontal: 0.7em; $field-padding-horizontal: 12px;
$border-radius: 3px; $border-radius: 3px;
$opacity: 0.7; $opacity: 0.7;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment