bemer 0.1.0 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/{LICENSE-RU → LICENSE-RU.txt} +0 -0
- data/{LICENSE → LICENSE.txt} +5 -5
- data/README.md +47 -16
- data/docs/BEMHTML.md +5 -0
- data/docs//320/232/320/276/320/275/321/202/320/265/320/272/321/201/321/202-/321/203/320/267/320/273/320/260.md +275 -0
- data/docs//320/232/320/276/320/275/321/204/320/270/320/263/321/203/321/200/320/260/321/206/320/270/321/217.md +158 -0
- data/docs//320/237/321/200/320/265/320/264/320/270/320/272/320/260/321/202/321/213.md +205 -0
- data/docs//320/240/320/265/320/266/320/270/320/274/321/213.md +274 -0
- data/docs//320/241/320/276/320/267/320/264/320/260/320/275/320/270/320/265-/320/270-/320/270/321/201/320/277/320/276/320/273/321/214/320/267/320/276/320/262/320/260/320/275/320/270/320/265-UI-/320/272/320/276/320/274/320/277/320/276/320/275/320/265/320/275/321/202.md +173 -0
- data/docs//320/244/320/260/320/270/314/206/320/273/320/276/320/262/320/260/321/217-/321/201/321/202/321/200/321/203/320/272/321/202/321/203/321/200/320/260.md +167 -0
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-bem_mix.md +62 -0
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-bem_mods.md +63 -0
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-block_tag.md +215 -0
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-component_asset_path.md +71 -0
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-component_pack.md +101 -0
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-component_partial_path.md +28 -0
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-define_component.md +154 -0
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-define_templates.md +96 -0
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-elem_tag.md +38 -0
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-refine_component.md +114 -0
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-render_component.md +108 -0
- data/docs//320/250/320/260/320/261/320/273/320/276/320/275/321/213.md +44 -0
- data/lib/bemer.rb +3 -1
- data/lib/bemer/builders.rb +8 -0
- data/lib/bemer/builders/tree.rb +0 -8
- data/lib/bemer/configuration.rb +3 -1
- data/lib/bemer/context_extentions/structure.rb +2 -3
- data/lib/bemer/entity.rb +2 -2
- data/lib/bemer/entity_builder.rb +5 -9
- data/lib/bemer/helpers.rb +10 -0
- data/lib/bemer/mixin_list.rb +1 -1
- data/lib/bemer/modifier_list.rb +2 -2
- data/lib/bemer/path_resolver.rb +23 -0
- data/lib/bemer/pipeline/handler.rb +4 -6
- data/lib/bemer/railtie.rb +22 -9
- data/lib/bemer/renderer.rb +1 -1
- data/lib/bemer/template_list.rb +2 -4
- data/lib/bemer/tree.rb +3 -3
- data/lib/bemer/tree/node.rb +5 -7
- data/lib/bemer/version.rb +1 -1
- data/spec/bemer/railtie_spec.rb +95 -0
- data/spec/dummy/config/application.rb +30 -12
- data/spec/dummy/config/initializers/backtrace_silencers.rb +1 -5
- data/spec/dummy/config/initializers/bemer.rb +1 -3
- data/spec/rails_helper.rb +5 -9
- metadata +87 -129
- data/.gitignore +0 -17
- data/.overcommit.yml +0 -59
- data/.rspec +0 -4
- data/.rubocop.yml +0 -21
- data/.rubocop_todo.yml +0 -11
- data/Gemfile +0 -12
- data/Rakefile +0 -12
- data/bemer.gemspec +0 -43
- data/spec/dummy/Rakefile +0 -8
- data/spec/dummy/app/controllers/concerns/.keep +0 -0
- data/spec/dummy/app/helpers/application_helper.rb +0 -4
- data/spec/dummy/app/jobs/application_job.rb +0 -4
- data/spec/dummy/app/mailers/application_mailer.rb +0 -6
- data/spec/dummy/app/models/application_record.rb +0 -5
- data/spec/dummy/app/models/concerns/.keep +0 -0
- data/spec/dummy/app/views/layouts/mailer.html.erb +0 -13
- data/spec/dummy/app/views/layouts/mailer.text.erb +0 -1
- data/spec/dummy/bin/bundle +0 -5
- data/spec/dummy/bin/rails +0 -6
- data/spec/dummy/bin/rake +0 -6
- data/spec/dummy/bin/setup +0 -39
- data/spec/dummy/bin/update +0 -31
- data/spec/dummy/bin/yarn +0 -13
- data/spec/dummy/config/cable.yml +0 -10
- data/spec/dummy/config/database.yml +0 -25
- data/spec/dummy/config/environments/development.rb +0 -51
- data/spec/dummy/config/environments/production.rb +0 -84
- data/spec/dummy/config/environments/test.rb +0 -44
- data/spec/dummy/config/initializers/application_controller_renderer.rb +0 -7
- data/spec/dummy/config/initializers/cookies_serializer.rb +0 -7
- data/spec/dummy/config/initializers/filter_parameter_logging.rb +0 -6
- data/spec/dummy/config/initializers/inflections.rb +0 -17
- data/spec/dummy/config/initializers/mime_types.rb +0 -5
- data/spec/dummy/config/initializers/wrap_parameters.rb +0 -16
- data/spec/dummy/config/locales/en.yml +0 -33
- data/spec/dummy/config/puma.rb +0 -58
- data/spec/dummy/config/routes.rb +0 -5
- data/spec/dummy/config/secrets.yml +0 -32
- data/spec/dummy/config/spring.rb +0 -8
- data/spec/dummy/lib/assets/.keep +0 -0
- data/spec/dummy/log/.keep +0 -0
- data/spec/dummy/package.json +0 -5
- data/spec/dummy/public/404.html +0 -67
- data/spec/dummy/public/422.html +0 -67
- data/spec/dummy/public/500.html +0 -66
- data/spec/dummy/public/apple-touch-icon-precomposed.png +0 -0
- data/spec/dummy/public/apple-touch-icon.png +0 -0
- data/spec/dummy/public/favicon.ico +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
|
-
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: bcd184e6311cfaf5b2e13259388684f7060d3a2dcadb82ee746f0535554700c5
|
4
|
+
data.tar.gz: 294e3d815a456c4dff418bd8d2afbf221a43a0f78bfb0f90a1cbb1581eb76259
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b2e40d1341a003a9755ac895cf0a032b516c30afefa9bf13cc811512188401b32d243022f1a534b2cdb801627b9d366333a1ef95841e9885d548882de1bf8b23
|
7
|
+
data.tar.gz: 1e81f6b5e9e76e58a8e90679816277318deadd39182e117b9231f94eb9a4bae647d58fac9e34ba0b91097bedb2f74aeceaeefef3847ef83f3d9b969544c8f251
|
File without changes
|
data/{LICENSE → LICENSE.txt}
RENAMED
@@ -1,4 +1,4 @@
|
|
1
|
-
|
1
|
+
MIT License
|
2
2
|
|
3
3
|
Copyright (c) 2017-2018 Alexander Grigorev
|
4
4
|
|
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
9
|
copies of the Software, and to permit persons to whom the Software is
|
10
10
|
furnished to do so, subject to the following conditions:
|
11
11
|
|
12
|
-
The above copyright notice and this permission notice shall be included in
|
13
|
-
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
14
|
|
15
15
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
16
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
17
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
18
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
19
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
-
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
data/README.md
CHANGED
@@ -1,27 +1,58 @@
|
|
1
1
|
# Bemer
|
2
2
|
|
3
|
-
|
3
|
+
**ВАЖНО**. *Для работы с UI компонентами не обязательно использовать методологию БЭМ.*
|
4
4
|
|
5
|
-
|
5
|
+
1. Позволяет создавать переиспользуемые UI компоненты для приложений на Ruby on Rails.
|
6
|
+
1. Предоставляет функционал для разработки приложений на Ruby on Rails с использованием методологии БЭМ.
|
6
7
|
|
7
|
-
|
8
|
+
## Дополнительно
|
8
9
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
And then execute:
|
14
|
-
|
15
|
-
$ bundle
|
10
|
+
1. Статья на Хабре - [Переиспользуемые UI компоненты в приложениях на Ruby on Rails](https://habrahabr.ru/post/352938/).
|
11
|
+
1. [bemer-bootstrap](https://github.com/vill/bemer-bootstrap) - переиспользуемые компоненты Bootstrap v3.
|
12
|
+
1. [Пример приложения](https://github.com/vill/bemer-example) с использованием `bemer` и [bemer-bootstrap](https://github.com/vill/bemer-bootstrap).
|
16
13
|
|
17
|
-
|
14
|
+
## Установка
|
18
15
|
|
19
|
-
|
16
|
+
Добавить в `Gemfile`:
|
20
17
|
|
21
|
-
|
18
|
+
```ruby
|
19
|
+
gem 'bemer', '~> 0.1.0'
|
20
|
+
```
|
22
21
|
|
23
|
-
|
22
|
+
Выполнить в терминале команду:
|
24
23
|
|
25
|
-
|
24
|
+
$ bundle
|
26
25
|
|
27
|
-
|
26
|
+
## Использование
|
27
|
+
|
28
|
+
1. [Файловая структура](docs/%D0%A4%D0%B0%D0%B8%CC%86%D0%BB%D0%BE%D0%B2%D0%B0%D1%8F-%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0.md)
|
29
|
+
1. [Конфигурация](docs/%D0%9A%D0%BE%D0%BD%D1%84%D0%B8%D0%B3%D1%83%D1%80%D0%B0%D1%86%D0%B8%D1%8F.md)
|
30
|
+
1. [Создание и использование UI компонент](docs/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B8-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-UI-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82.md)
|
31
|
+
1. Хелперы для работы с компонентами
|
32
|
+
1. [`define_component`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-define_component.md)
|
33
|
+
1. [`define_templates`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-define_templates.md)
|
34
|
+
1. [`render_component`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-render_component.md)
|
35
|
+
1. [`refine_component`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-refine_component.md)
|
36
|
+
1. [`component_pack`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-component_pack.md)
|
37
|
+
1. [`component_asset_path`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-component_asset_path.md)
|
38
|
+
1. [`component_partial_path`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-component_partial_path.md)
|
39
|
+
1. Дополнительные хелперы для БЭМ методологии
|
40
|
+
1. [`bem_mix`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-bem_mix.md)
|
41
|
+
1. [`bem_mods`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-bem_mods.md)
|
42
|
+
1. [`block_tag`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-block_tag.md)
|
43
|
+
1. [`elem_tag`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-elem_tag.md)
|
44
|
+
1. [BEMHTML](docs/BEMHTML.md)
|
45
|
+
1. [Шаблоны](docs/%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%8B.md)
|
46
|
+
1. [Контекст узла](docs/%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82-%D1%83%D0%B7%D0%BB%D0%B0.md)
|
47
|
+
1. [Предикаты](docs/%D0%9F%D1%80%D0%B5%D0%B4%D0%B8%D0%BA%D0%B0%D1%82%D1%8B.md)
|
48
|
+
1. [Режимы](docs/%D0%A0%D0%B5%D0%B6%D0%B8%D0%BC%D1%8B.md)
|
49
|
+
|
50
|
+
## Ссылки
|
51
|
+
|
52
|
+
1. https://ru.bem.info/methodology/
|
53
|
+
1. https://github.com/bem/bem-xjst
|
54
|
+
1. https://github.com/bem-site/bem-forum-content-ru/issues
|
55
|
+
|
56
|
+
## Лицензия
|
57
|
+
|
58
|
+
Copyright (c) 2017 - 2018 Александр Григорьев. Более подробную информацию о лицензии можно получить в файле [LICENSE.txt](LICENSE.txt).
|
data/docs/BEMHTML.md
ADDED
@@ -0,0 +1,5 @@
|
|
1
|
+
# BEMHTML
|
2
|
+
|
3
|
+
**ВАЖНО**. *Только для компонент, [структура (дерево) которых была создана](Создание-и-использование-UI-компонент.md) с помощью [хелпера `define_component`](Хелпер-define_component.md) доступно использование [BEMHTML шаблонов](Шаблоны.md).*
|
4
|
+
|
5
|
+
Текущая реализация BEMHTML позволяет преобразовывать данные, полученные при использовании хелперов [`block_tag`](Хелпер-block_tag.md), [`elem_tag`](Хелпер-elem_tag.md) и [`define_component`](Хелпер-define_component.md) в выходной HTML код.
|
@@ -0,0 +1,275 @@
|
|
1
|
+
# Контекст узла
|
2
|
+
|
3
|
+
**ВАЖНО**. *Методы `apply` и `apply_next` доступны ТОЛЬКО в теле шаблона*.
|
4
|
+
|
5
|
+
**ВАЖНО**. *Методы `ctx` и `content` доступны ТОЛЬКО в теле шаблона при режимах `replace` и `content`*.
|
6
|
+
|
7
|
+
Контекст текущего узла доступен в предикате и теле шаблона, если они являются `Proc`, `lambda` или `&block`.
|
8
|
+
|
9
|
+
## Список основных методов доступных в предикате и теле шаблона
|
10
|
+
|
11
|
+
`attrs`, `bem`, `bem_cascade`, `block`, `cls`, `elem`, `first?`, `js`, `last?`, `mix`, `mods`, `name`, `params`, `position`, `tag`.
|
12
|
+
|
13
|
+
### Метод `attrs`
|
14
|
+
|
15
|
+
Возвращает список атрибутов в виде хеша (`Hash`) ключи которого ВСЕГДА имеют тип `Symbol`.
|
16
|
+
|
17
|
+
Добавить `key: :value` к изначальным атрибутам блока с названием `alert`:
|
18
|
+
```slim
|
19
|
+
/ Эквивалентные записи
|
20
|
+
= render_component :alert do |template|
|
21
|
+
= template.block(:alert).attrs ->(node) { { **node.attrs, key: :value } }
|
22
|
+
|
23
|
+
= render_component :alert do |template|
|
24
|
+
= template.block(:alert).attrs ->(node) { node.attrs.merge!(key: :value) }
|
25
|
+
```
|
26
|
+
Добавить css класс `css-class` если текущая сущность является блоком с названием `alert` и имеет атрибут с названием `:role`:
|
27
|
+
```slim
|
28
|
+
= render_component :alert do |template|
|
29
|
+
= template.block(:alert, ->(node) { node.attrs.key?(:role) }).add_cls :css_class
|
30
|
+
```
|
31
|
+
### Метод `bem`
|
32
|
+
|
33
|
+
Возвращает значение параметра `bem`. Если параметр не был передан, тогда возвращаемое значение будет `nil`.
|
34
|
+
|
35
|
+
### Метод `bem_cascade`
|
36
|
+
|
37
|
+
Возвращает значение параметра `bem_cascade`. Если параметр не был передан, тогда возвращаемое значение будет `nil`.
|
38
|
+
|
39
|
+
### Метод `block`
|
40
|
+
|
41
|
+
Возвращает значение параметра `block`. Если параметр не был передан, тогда возвращаемое значение будет пустая строка `''`.
|
42
|
+
|
43
|
+
### Метод `cls`
|
44
|
+
|
45
|
+
Возвращает нормализованный список css классов ввиде массива (`Array`) строк (`String`).
|
46
|
+
|
47
|
+
В шаблоне и предикате метод `cls` вернет: `['css-class1', 'css-class2']`:
|
48
|
+
```slim
|
49
|
+
/ Содержимое файла index.html.slim компонента simple_component
|
50
|
+
= define_component do |component|
|
51
|
+
= component.block :block1, cls: 'css-class1 css-class2'
|
52
|
+
```
|
53
|
+
Добавить css класс `css-class` если текущая сущность является блоком с названием `block1` и имеет css класс `css-class1`:
|
54
|
+
```slim
|
55
|
+
= render_component :simple_component do |template|
|
56
|
+
= template.block(:block1, ->(node) { node.cls.include?('css-class1') }).add_cls :css_class
|
57
|
+
```
|
58
|
+
Добавить css класс `css-class` к изначальным css классам блока с названием `block1`:
|
59
|
+
```slim
|
60
|
+
/ Эквивалентные записи
|
61
|
+
= render_component :simple_component do |template|
|
62
|
+
= template.block(:block1).cls ->(node) { [node.cls, :css_class] }
|
63
|
+
|
64
|
+
= render_component :simple_component do |template|
|
65
|
+
= template.block(:block1).cls ->(node) { node.cls << :css_class }
|
66
|
+
```
|
67
|
+
|
68
|
+
### Метод `elem`
|
69
|
+
|
70
|
+
Возвращает значение параметра `elem`, если сущность является блоком, тогда значение будет `nil`, если сущность является элементом и параметр не был передан, тогда возвращаемое значение будет пустая строка `''`.
|
71
|
+
|
72
|
+
### Метод `first?`
|
73
|
+
|
74
|
+
Возвращает `true` если текущий узел среди своих братьев/сестер (siblings) занимает первую позицию, если это не так, возвращает `false`.
|
75
|
+
|
76
|
+
```slim
|
77
|
+
= render_component :menu do |template|
|
78
|
+
= template.elem(:item, ->(node) { node.first? }).add_cls :first
|
79
|
+
```
|
80
|
+
|
81
|
+
### Метод `js`
|
82
|
+
|
83
|
+
Возвращает значение параметра `js`.
|
84
|
+
|
85
|
+
### Метод `last?`
|
86
|
+
|
87
|
+
Возвращает `true` если текущий узел среди своих братьев/сестер (siblings) занимает последнюю позицию, если это не так, возвращает `false`.
|
88
|
+
|
89
|
+
```slim
|
90
|
+
= render_component :menu do |template|
|
91
|
+
= template.elem(:item, ->(node) { node.last? }).add_cls :last
|
92
|
+
```
|
93
|
+
|
94
|
+
### Метод `mix`
|
95
|
+
|
96
|
+
Возвращает нормализованный список миксов ввиде массива (`Array`) строк (`String`).
|
97
|
+
|
98
|
+
В шаблоне и предикате метод `mix` вернет `['block', 'block2__elem1', 'block2__elem2']`:
|
99
|
+
```slim
|
100
|
+
/ Содержимое файла index.html.slim компонента simple_component
|
101
|
+
= define_component do |component|
|
102
|
+
= component.block :block1, mix: [:block, block2: [:elem1, :elem2]]
|
103
|
+
```
|
104
|
+
|
105
|
+
### Метод `mods`
|
106
|
+
|
107
|
+
Возвращает нормализованный список модификаторов в виде хеша ([`ActiveSupport::HashWithIndifferentAccess`](http://api.rubyonrails.org/v5.0/classes/ActiveSupport/HashWithIndifferentAccess.html)) со строковыми `String` и `true` значениями.
|
108
|
+
|
109
|
+
В шаблоне и предикате метод `mods` вернет `{'enabled' => true, 'theme' => 'green-islands'}`:
|
110
|
+
```slim
|
111
|
+
/ Содержимое файла index.html.slim компонента simple_component
|
112
|
+
= define_component do |component|
|
113
|
+
= component.block :block1, mods: [:enabled, theme: :green_islands]]
|
114
|
+
```
|
115
|
+
HTML тег изменить на `span` если текущая сущность является блоком с названием `block1` и имеет модификатор с названием `theme` и любым значением этого модификатора:
|
116
|
+
```slim
|
117
|
+
= render_component :simple_component do |template|
|
118
|
+
= template.block(:block1, ->(node) { node.mods.key?(:theme) }).tag :span
|
119
|
+
```
|
120
|
+
HTML тег изменить на `small` если текущая сущность является блоком с названием `block1` и имеет модификатор с названием `theme` и значением `green-islands` этого модификатора:
|
121
|
+
```slim
|
122
|
+
= render_component :simple_component do |template|
|
123
|
+
= template.block(:block1, mods: { theme: :green_islands }).tag :small
|
124
|
+
```
|
125
|
+
|
126
|
+
### Метод `name`
|
127
|
+
|
128
|
+
**ВАЖНО**. *При формирование названия сущности, действуют [правила преобразования знаков нижнего подчеркивания `_` в тире `-` для `Symbol` и `String`](%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-block_tag.md#%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%81%D1%83%D1%89%D0%BD%D0%BE%D1%81%D1%82%D0%B8)*
|
129
|
+
|
130
|
+
Возвращает название сущности.
|
131
|
+
|
132
|
+
Для блока без названия метод `name` вернет пустую строку `''`:
|
133
|
+
```slim
|
134
|
+
/ Содержимое файла index.html.slim компонента simple_component
|
135
|
+
= define_component do |component|
|
136
|
+
= component.block
|
137
|
+
```
|
138
|
+
Для элемента без названия метод `name` вернет указанный в [конфиге разделитель между блоком и элементом `'__'`](%D0%9A%D0%BE%D0%BD%D1%84%D0%B8%D0%B3%D1%83%D1%80%D0%B0%D1%86%D0%B8%D1%8F.md#%D0%9F%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80-element_name_separator):
|
139
|
+
```slim
|
140
|
+
/ Содержимое файла index.html.slim компонента simple_component
|
141
|
+
= define_component do |component|
|
142
|
+
= component.elem
|
143
|
+
```
|
144
|
+
|
145
|
+
Для элемента без указания блока метод `name` вернет `'__elem-name'`:
|
146
|
+
```slim
|
147
|
+
/ Содержимое файла index.html.slim компонента simple_component
|
148
|
+
= define_component do |component|
|
149
|
+
= component.elem '', :elem_name
|
150
|
+
```
|
151
|
+
Для элемента с указанием только блока метод `name` вернет `'block-name__'`:
|
152
|
+
```slim
|
153
|
+
/ Содержимое файла index.html.slim компонента simple_component
|
154
|
+
= define_component do |component|
|
155
|
+
= component.elem :block_name
|
156
|
+
```
|
157
|
+
|
158
|
+
### Метод `params`
|
159
|
+
|
160
|
+
Хеш (`Hash`) содержит данные которые были переданы при вызове методов `ctx`, `content`, `apply` и `apply_next`.
|
161
|
+
|
162
|
+
### Метод `position`
|
163
|
+
|
164
|
+
Возвращает порядковый номер узла, который он занимает среди своих братьев/сестер (siblings), нумерация начинается с 1.
|
165
|
+
|
166
|
+
### Метод `tag`
|
167
|
+
|
168
|
+
Возвращает нормализованное значение параметра `tag` как `Symbol` (все значения с типом `Symbol` возвращаются как есть а не пустые строки `String` преобразуются с помощью `to_sym`), `''` (для `false` и пустой строки `''`) или `nil`.
|
169
|
+
|
170
|
+
## Список дополнительных методов доступных в теле шаблона
|
171
|
+
|
172
|
+
`apply`, `apply_next`, `ctx`, `content`.
|
173
|
+
|
174
|
+
### Метод `apply(mode, **params)`
|
175
|
+
|
176
|
+
**ВАЖНО**. *Методы `apply` и `apply_next` доступны ТОЛЬКО в теле шаблона*.
|
177
|
+
|
178
|
+
Позволяет вызвать любой основной режим (`Symbol`) в контексте текущего узла, дополнительно можно передать параметры которые будут доступны в `params`.
|
179
|
+
|
180
|
+
```slim
|
181
|
+
/ Содержимое файла index.bemhtml.slim компонента alert
|
182
|
+
= define_templates do |template|
|
183
|
+
= template.block(:alert).add_cls ->(node) { "alert-#{node.params.fetch(:type, :info)}" }
|
184
|
+
```
|
185
|
+
Вызов компонента `alert` с указанием значения `type` в `params`:
|
186
|
+
```slim
|
187
|
+
= render_component :alert do |template|
|
188
|
+
= template.block(:alert).cls ->(node) { node.apply(:cls, type: :success) }
|
189
|
+
```
|
190
|
+
|
191
|
+
### Метод `apply_next(**params)`
|
192
|
+
|
193
|
+
**ВАЖНО**. *Методы `apply` и `apply_next` доступны ТОЛЬКО в теле шаблона*.
|
194
|
+
|
195
|
+
Позволяет вызвать следующий по очередности шаблон для текущего режима, дополнительно можно передать параметры которые будут доступны в `params`.
|
196
|
+
|
197
|
+
```slim
|
198
|
+
/ Содержимое файла index.bemhtml.slim компонента alert
|
199
|
+
= define_templates do |template|
|
200
|
+
= template.block(:alert).add_cls ->(node) { "alert-#{node.params.fetch(:type, :info)}" }
|
201
|
+
```
|
202
|
+
Вызов компонента `alert` с указанием значения `type` в `params`:
|
203
|
+
```slim
|
204
|
+
= render_component :alert do |template|
|
205
|
+
= template.block(:alert) do |alert|
|
206
|
+
= alert.cls ->(node) { node.apply(:cls, type: node.params.fetch(:type, :success)) }
|
207
|
+
= alert.cls ->(node) { node.apply_next(type: :danger) }
|
208
|
+
```
|
209
|
+
|
210
|
+
### Метод `ctx(**params)`
|
211
|
+
|
212
|
+
**ВАЖНО**. *Методы `ctx` и `content` доступны ТОЛЬКО в теле шаблона при режимах `replace` и `content`*.
|
213
|
+
|
214
|
+
Ссылка на текущий узел, дополнительно можно передать параметры которые будут доступны в `params` у самого узла и всех его дочерних узлов.
|
215
|
+
|
216
|
+
Заменить блок `alert` на самого себя:
|
217
|
+
|
218
|
+
```slim
|
219
|
+
/ Эквивалентный результат
|
220
|
+
= render_component :alert do |template|
|
221
|
+
= template.block(:alert).replace do |node|
|
222
|
+
= node.ctx
|
223
|
+
|
224
|
+
= render_component :alert
|
225
|
+
```
|
226
|
+
|
227
|
+
Обернуть блок `alert` в дополнительный блок и элемент:
|
228
|
+
|
229
|
+
```slim
|
230
|
+
= render_component :alert do |template|
|
231
|
+
= template.block(:alert).replace do |node, builder|
|
232
|
+
= builder.block :top_block do |top_block|
|
233
|
+
= top_block.elem :elem_name
|
234
|
+
= node.ctx
|
235
|
+
```
|
236
|
+
|
237
|
+
### Метод `content(**params)`
|
238
|
+
|
239
|
+
**ВАЖНО**. *Методы `ctx` и `content` доступны ТОЛЬКО в теле шаблона при режимах `replace` и `content`*.
|
240
|
+
|
241
|
+
Ссылка на содержимое текущего узла, дополнительно можно передать параметры которые будут доступны в `params` у всех дочерних узлов.
|
242
|
+
|
243
|
+
Заменить содержимое блока `alert` на само себя:
|
244
|
+
|
245
|
+
```slim
|
246
|
+
/ Эквивалентный результат
|
247
|
+
= render_component :alert do |template|
|
248
|
+
= template.block(:alert).content do |node|
|
249
|
+
= node.content
|
250
|
+
|
251
|
+
= render_component :alert
|
252
|
+
```
|
253
|
+
|
254
|
+
Обернуть содержимое блока `alert` в дополнительный блок и элемент:
|
255
|
+
|
256
|
+
```slim
|
257
|
+
= render_component :alert do |template|
|
258
|
+
= template.block(:alert).content do |node, builder|
|
259
|
+
= builder.block :top_block do |top_block|
|
260
|
+
= top_block.elem :elem_name
|
261
|
+
= node.content
|
262
|
+
```
|
263
|
+
|
264
|
+
Заменить блок `alert` его содержимым:
|
265
|
+
|
266
|
+
```slim
|
267
|
+
/ Эквивалентный результат
|
268
|
+
= render_component :alert do |template|
|
269
|
+
= template.block(:alert).replace do |node|
|
270
|
+
= node.content
|
271
|
+
|
272
|
+
/ Будет быстрее
|
273
|
+
= render_component :alert do |template|
|
274
|
+
= template.block(:alert).tag false
|
275
|
+
```
|
@@ -0,0 +1,158 @@
|
|
1
|
+
# Конфигурация
|
2
|
+
|
3
|
+
Для изменения настроек, необходимо создать файл `config/initializers/bemer.rb` и переопределить параметры по умолчанию:
|
4
|
+
|
5
|
+
```ruby
|
6
|
+
# Параметры по умолчанию
|
7
|
+
Bemer.setup do |config|
|
8
|
+
config.bem = false
|
9
|
+
config.default_block_tag = :div
|
10
|
+
config.default_element_tag = :div
|
11
|
+
config.default_path_prefix = nil
|
12
|
+
config.element_name_separator = '__'
|
13
|
+
config.modifier_name_separator = '_'
|
14
|
+
config.modifier_value_separator = '_'
|
15
|
+
config.path = 'app/bemer_components'
|
16
|
+
config.prepend_asset_paths = true
|
17
|
+
end
|
18
|
+
```
|
19
|
+
|
20
|
+
## Параметр `bem`
|
21
|
+
|
22
|
+
Глобально включает или выключает генерацию данных связанных с БЭМ методологией, используется только в [хелпере `define_component`](Хелпер-define_component.md). Порядок применения параметра `bem`:
|
23
|
+
```slim
|
24
|
+
/ config.bem = false
|
25
|
+
|
26
|
+
= define_component do |component|
|
27
|
+
= component.block :block
|
28
|
+
|
29
|
+
/ => <div></div>
|
30
|
+
```
|
31
|
+
```slim
|
32
|
+
/ config.bem = true
|
33
|
+
|
34
|
+
= define_component do |component|
|
35
|
+
= component.block :block
|
36
|
+
|
37
|
+
/ => <div class="block"></div>
|
38
|
+
```
|
39
|
+
```slim
|
40
|
+
/ config.bem = false # Самый низкий приоритет
|
41
|
+
|
42
|
+
= define_component bem: true do |component| # `config.bem` переопределен
|
43
|
+
= component.block :block
|
44
|
+
|
45
|
+
/ => <div class="block"></div>
|
46
|
+
```
|
47
|
+
```slim
|
48
|
+
/ config.bem = true # Самый низкий приоритет
|
49
|
+
|
50
|
+
= define_component bem: false do |component| # `config.bem` переопределен
|
51
|
+
= component.block :block
|
52
|
+
|
53
|
+
/ => <div></div>
|
54
|
+
```
|
55
|
+
```slim
|
56
|
+
/ config.bem = false # Самый низкий приоритет
|
57
|
+
|
58
|
+
= define_component bem: false do |component| # Следующий приоритет после `config.bem`
|
59
|
+
= component.block :block, bem: true # Самый высокий приоритет
|
60
|
+
|
61
|
+
/ => <div class="block"></div>
|
62
|
+
```
|
63
|
+
```slim
|
64
|
+
/ config.bem = true # Самый низкий приоритет
|
65
|
+
|
66
|
+
= define_component bem: true do |component| # Следующий приоритет после `config.bem`
|
67
|
+
= component.block :block, bem: false # Самый высокий приоритет
|
68
|
+
|
69
|
+
/ => <div></div>
|
70
|
+
```
|
71
|
+
|
72
|
+
## Параметр `default_block_tag`
|
73
|
+
|
74
|
+
Устанавливает тег по умолчанию для сущностей типа блок, используется когда у сущности не указан (равен `nil`) HTML тег:
|
75
|
+
|
76
|
+
```ruby
|
77
|
+
config.default_block_tag = :span
|
78
|
+
```
|
79
|
+
|
80
|
+
## Параметр `default_element_tag`
|
81
|
+
|
82
|
+
Устанавливает тег по умолчанию для сущностей типа элемент, используется когда у сущности не указан (равен `nil`) HTML тег:
|
83
|
+
|
84
|
+
```ruby
|
85
|
+
config.default_element_tag = :span
|
86
|
+
```
|
87
|
+
|
88
|
+
## Параметр `default_path_prefix`
|
89
|
+
|
90
|
+
Добавляет префикс к пути/названию всех компонент, может быть `Symbol`, `String`, `false`, `nil` а также `Proc` и `lambda` которые должны возвращать `Symbol`, `String`, `false` или `nil`:
|
91
|
+
|
92
|
+
```ruby
|
93
|
+
# Эквивалентные записи
|
94
|
+
config.default_path_prefix = 'common'
|
95
|
+
config.default_path_prefix = :common
|
96
|
+
config.default_path_prefix = proc { :common }
|
97
|
+
config.default_path_prefix = ->(path, view) { :common }
|
98
|
+
```
|
99
|
+
Если `default_path_prefix` является `Proc` или `lambda` тогда, при вызове будут переданы указанный путь/название компонента (как `String`) и представление (экземпляр Action View):
|
100
|
+
```ruby
|
101
|
+
config.default_path_prefix = proc { |path| path.start_with?('admin') ? '' : :user }
|
102
|
+
```
|
103
|
+
```ruby
|
104
|
+
config.default_path_prefix = lambda { |path, view|
|
105
|
+
view.controller.instance_of?(Admin::ApplicationController) ? :admin : :user
|
106
|
+
}
|
107
|
+
```
|
108
|
+
```ruby
|
109
|
+
config.default_path_prefix = lambda { |path, view|
|
110
|
+
view.controller.class.name.deconstantize.underscore
|
111
|
+
}
|
112
|
+
```
|
113
|
+
При вызове `render_component`, `refine_component` параметр `default_path_prefix` будет использоваться:
|
114
|
+
```ruby
|
115
|
+
# Эквивалентные записи
|
116
|
+
render_component(:modal)
|
117
|
+
refine_component(:modal, prefix: true)
|
118
|
+
```
|
119
|
+
параметр `default_path_prefix` не будет использоваться и путь/название компонента будет иметь следующие значения:
|
120
|
+
```ruby
|
121
|
+
# Эквивалентные записи
|
122
|
+
render_component(:modal, prefix: '') # => 'modal'
|
123
|
+
refine_component(:modal, prefix: false) # => 'modal'
|
124
|
+
refine_component(:modal, prefix: nil) # => 'modal'
|
125
|
+
```
|
126
|
+
```ruby
|
127
|
+
# Эквивалентные записи
|
128
|
+
render_component(:modal, prefix: :common) # => 'common/modal'
|
129
|
+
render_component(:modal, prefix: 'common') # => 'common/modal'
|
130
|
+
refine_component('common/modal', prefix: false) # => 'common/modal'
|
131
|
+
```
|
132
|
+
|
133
|
+
## Параметр `element_name_separator`
|
134
|
+
|
135
|
+
Устанавливает разделитель [между названием блока и названием элемента](https://ru.bem.info/methodology/naming-convention/).
|
136
|
+
|
137
|
+
## Параметр `modifier_name_separator`
|
138
|
+
|
139
|
+
Устанавливает разделитель [между названием модификатора и названием блока или элемента](https://ru.bem.info/methodology/naming-convention/):
|
140
|
+
```ruby
|
141
|
+
config.modifier_name_separator = '--' # block__elem--modifier-name
|
142
|
+
```
|
143
|
+
|
144
|
+
## Параметр `modifier_value_separator`
|
145
|
+
|
146
|
+
Устанавливает разделитель [между названием модификатора и значением модификатора](https://ru.bem.info/methodology/naming-convention/).
|
147
|
+
|
148
|
+
## Параметр `path`
|
149
|
+
|
150
|
+
Устанавливает каталог в котором будут храниться все компоненты приложения, например если используется [Webpacker](https://github.com/rails/webpacker), тогда можно указать подкаталог в его каталоге:
|
151
|
+
|
152
|
+
```ruby
|
153
|
+
config.path = Webpacker.config.source_path.join('components')
|
154
|
+
```
|
155
|
+
|
156
|
+
## Параметр `prepend_asset_paths`
|
157
|
+
|
158
|
+
Разрешает или запрещает добавлять пути до каталогов с компонентами в начало списка `assets.paths`, актуально только если приложение использует Sprockets.
|