bemer 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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.
|