bemer 0.3.0 → 0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +229 -6
- 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 +1 -1
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-bem_attrs_for.md +58 -0
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-bem_mix.md +0 -6
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-block_tag.md +10 -4
- data/docs//320/245/320/265/320/273/320/277/320/265/321/200-elem_tag.md +1 -1
- data/lib/bemer.rb +4 -3
- data/lib/bemer/configuration.rb +2 -0
- data/lib/bemer/entity.rb +1 -1
- data/lib/bemer/entity_builder.rb +44 -9
- data/lib/bemer/helpers.rb +10 -1
- data/lib/bemer/mixes.rb +43 -0
- data/lib/bemer/predicate.rb +1 -1
- data/lib/bemer/version.rb +1 -1
- data/spec/action_view/helpers/bem_attrs_for_spec.rb +35 -0
- data/spec/action_view/helpers/block_tag_spec.rb +1 -1
- data/spec/action_view/helpers/elem_tag_spec.rb +166 -0
- data/spec/rails_helper.rb +2 -0
- metadata +48 -31
- data/lib/bemer/mixin_list.rb +0 -74
- data/spec/bemer/mixin_list_spec.rb +0 -99
- data/spec/support/shared_examples/an_html_entity_tree_builder_method.rb +0 -21
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8d14fafeea2e51e9af1a6302e7b2c2615442c329edf9d02710363d760fa9b81c
|
|
4
|
+
data.tar.gz: 486f4bca3457d1b287f4dfe3b88a2d6443f025a6a7aa2e141e2c71f9a5732622
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4734a3841499b7c912640b62cc73bfb912b649d3aa283e2b98d6800c311d2b51e93e1a08296994b9db47c6b57dc4e4064db8a2fd12ee4b693cf59dfad9c95200
|
|
7
|
+
data.tar.gz: e75023ee5ced51f2063f4b022e6d932a4841396390556b15318677ab1e3b3fbd1d415de8cfd087891cd06d76ae83f246960c0eac872a7a528e9535da012e98a0
|
data/README.md
CHANGED
|
@@ -8,15 +8,16 @@
|
|
|
8
8
|
## Дополнительно
|
|
9
9
|
|
|
10
10
|
1. Статья на Хабре - [Переиспользуемые UI компоненты в приложениях на Ruby on Rails](https://habrahabr.ru/post/352938/).
|
|
11
|
-
1. [bemer-
|
|
12
|
-
1. [
|
|
11
|
+
1. [`bemer-simple_form`](https://github.com/vill/bemer-simple_form) - Использование соглашений из БЭМ методологии в формах `SimpleForm`.
|
|
12
|
+
1. [`bemer-bootstrap`](https://github.com/vill/bemer-bootstrap) - переиспользуемые компоненты Bootstrap v3.
|
|
13
|
+
1. [Пример приложения](https://github.com/vill/bemer-example) с использованием `bemer` и [`bemer-bootstrap`](https://github.com/vill/bemer-bootstrap).
|
|
13
14
|
|
|
14
15
|
## Установка
|
|
15
16
|
|
|
16
17
|
Добавить в `Gemfile`:
|
|
17
18
|
|
|
18
19
|
```ruby
|
|
19
|
-
gem 'bemer'
|
|
20
|
+
gem 'bemer'
|
|
20
21
|
```
|
|
21
22
|
|
|
22
23
|
Выполнить в терминале команду:
|
|
@@ -25,6 +26,226 @@ gem 'bemer', '~> 0.2.0'
|
|
|
25
26
|
|
|
26
27
|
## Использование
|
|
27
28
|
|
|
29
|
+
### Конфигурация
|
|
30
|
+
|
|
31
|
+
[Конфигурация](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) для `Bemer`:
|
|
32
|
+
|
|
33
|
+
```ruby
|
|
34
|
+
# config/initializers/bemer.rb
|
|
35
|
+
|
|
36
|
+
Bemer.setup do |config|
|
|
37
|
+
config.bem = true
|
|
38
|
+
config.modifier_name_separator = '--'
|
|
39
|
+
config.path = 'app/frontend/components' # или Webpacker.config.source_path
|
|
40
|
+
# config.default_path_prefix = lambda { |path, view|
|
|
41
|
+
# view.controller.class.name.split('::')[0].underscore
|
|
42
|
+
# }
|
|
43
|
+
end
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Если используется [`Webpacker`](https://github.com/rails/webpacker):
|
|
47
|
+
|
|
48
|
+
```yml
|
|
49
|
+
# config/webpacker.yml
|
|
50
|
+
|
|
51
|
+
default: &default
|
|
52
|
+
source_path: app/frontend/components
|
|
53
|
+
source_entry_path: ../packs
|
|
54
|
+
public_output_path: frontend/assets
|
|
55
|
+
# ...
|
|
56
|
+
|
|
57
|
+
development:
|
|
58
|
+
<<: *default
|
|
59
|
+
# ...
|
|
60
|
+
|
|
61
|
+
test:
|
|
62
|
+
<<: *default
|
|
63
|
+
# ...
|
|
64
|
+
|
|
65
|
+
production:
|
|
66
|
+
<<: *default
|
|
67
|
+
# ...
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Файловая структура
|
|
71
|
+
|
|
72
|
+
Пример [файловой структуры](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) при использовании [`Sprockets`](https://github.com/rails/sprockets-rails):
|
|
73
|
+
```
|
|
74
|
+
app/
|
|
75
|
+
├── assets/
|
|
76
|
+
| ├── javascripts/
|
|
77
|
+
| | ├── admin_panel/
|
|
78
|
+
| | | ├── application.js
|
|
79
|
+
| | | └── ...
|
|
80
|
+
| | ├── landing/
|
|
81
|
+
| | | ├── application.js
|
|
82
|
+
| | | └── ...
|
|
83
|
+
| | ├── user_panel/
|
|
84
|
+
| | | ├── application.js
|
|
85
|
+
| | | └── ...
|
|
86
|
+
| | └── ...
|
|
87
|
+
| ├── stylesheets/
|
|
88
|
+
| | ├── admin_panel/
|
|
89
|
+
| | | ├── application.scss
|
|
90
|
+
| | | └── ...
|
|
91
|
+
| | ├── landing/
|
|
92
|
+
| | | ├── application.scss
|
|
93
|
+
| | | └── ...
|
|
94
|
+
| | ├── user_panel/
|
|
95
|
+
| | | ├── application.scss
|
|
96
|
+
| | | └── ...
|
|
97
|
+
| | └── ...
|
|
98
|
+
| └── ...
|
|
99
|
+
├── frontend/
|
|
100
|
+
| ├── components/
|
|
101
|
+
| | ├── common/
|
|
102
|
+
| | | ├── carousel/
|
|
103
|
+
| | | | ├── index.slim
|
|
104
|
+
| | | | ├── index.bemhtml.slim
|
|
105
|
+
| | | | ├── index.js
|
|
106
|
+
| | | | ├── index.scss
|
|
107
|
+
| | | | └── ...
|
|
108
|
+
| | | ├── form/
|
|
109
|
+
| | | | ├── error_messages_elem/
|
|
110
|
+
| | | | | ├── index.slim
|
|
111
|
+
| | | | | ├── index.js
|
|
112
|
+
| | | | | ├── index.scss
|
|
113
|
+
| | | | | └── ...
|
|
114
|
+
| | | | ├── locales/
|
|
115
|
+
| | | | | ├── en.yml
|
|
116
|
+
| | | | | └── ...
|
|
117
|
+
| | | | ├── index.slim
|
|
118
|
+
| | | | ├── base.rb
|
|
119
|
+
| | | | ├── index.js
|
|
120
|
+
| | | | ├── index.scss
|
|
121
|
+
| | | | └── ...
|
|
122
|
+
| | | └── ...
|
|
123
|
+
| | ├── admin_panel/
|
|
124
|
+
| | | └── ...
|
|
125
|
+
| | ├── landing/
|
|
126
|
+
| | | └── ...
|
|
127
|
+
| | ├── user_panel/
|
|
128
|
+
| | | └── ...
|
|
129
|
+
| | └── ...
|
|
130
|
+
| └── ...
|
|
131
|
+
└── ...
|
|
132
|
+
```
|
|
133
|
+
Пример [файловой структуры](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) при использовании [`Webpacker`](https://github.com/rails/webpacker):
|
|
134
|
+
```
|
|
135
|
+
app/
|
|
136
|
+
├── frontend/
|
|
137
|
+
| ├── components/
|
|
138
|
+
| | ├── common/
|
|
139
|
+
| | | ├── carousel/
|
|
140
|
+
| | | | ├── index.slim
|
|
141
|
+
| | | | ├── index.bemhtml.slim
|
|
142
|
+
| | | | ├── index.js
|
|
143
|
+
| | | | ├── index.scss
|
|
144
|
+
| | | | └── ...
|
|
145
|
+
| | | ├── form/
|
|
146
|
+
| | | | ├── error_messages_elem/
|
|
147
|
+
| | | | | ├── index.slim
|
|
148
|
+
| | | | | ├── index.js
|
|
149
|
+
| | | | | ├── index.scss
|
|
150
|
+
| | | | | └── ...
|
|
151
|
+
| | | | ├── locales/
|
|
152
|
+
| | | | | ├── en.yml
|
|
153
|
+
| | | | | └── ...
|
|
154
|
+
| | | | ├── index.slim
|
|
155
|
+
| | | | ├── base.rb
|
|
156
|
+
| | | | ├── index.js
|
|
157
|
+
| | | | ├── index.scss
|
|
158
|
+
| | | | └── ...
|
|
159
|
+
| | | └── ...
|
|
160
|
+
| | ├── admin_panel/
|
|
161
|
+
| | | └── ...
|
|
162
|
+
| | ├── landing/
|
|
163
|
+
| | | └── ...
|
|
164
|
+
| | ├── user_panel/
|
|
165
|
+
| | | └── ...
|
|
166
|
+
| | └── ...
|
|
167
|
+
| ├── packs/
|
|
168
|
+
| | ├── admin_panel/
|
|
169
|
+
| | | ├── application.js
|
|
170
|
+
| | | └── ...
|
|
171
|
+
| | ├── landing/
|
|
172
|
+
| | | ├── application.js
|
|
173
|
+
| | | └── ...
|
|
174
|
+
| | ├── user_panel/
|
|
175
|
+
| | | ├── application.js
|
|
176
|
+
| | | └── ...
|
|
177
|
+
| | └── ...
|
|
178
|
+
| └── ...
|
|
179
|
+
└── ...
|
|
180
|
+
```
|
|
181
|
+
### Создание `HTML` структуры компонента
|
|
182
|
+
|
|
183
|
+
#### Простой компонент
|
|
184
|
+
Структура компонента [Сarousel из Bootstrap](https://getbootstrap.com/docs/4.3/components/carousel/#with-indicators):
|
|
185
|
+
|
|
186
|
+
```slim
|
|
187
|
+
/ app/frontend/components/common/carousel/index.slim
|
|
188
|
+
|
|
189
|
+
.carousel.slide data-ride="carousel" class=local_assigns[:cls]
|
|
190
|
+
ol.carousel-indicators
|
|
191
|
+
- image_urls.size.times do |i|
|
|
192
|
+
li data-target=".carousel" class=(:active if i.zero?) data-slide-to=i
|
|
193
|
+
.carousel-inner
|
|
194
|
+
- image_urls.each_with_index do |image_url, i|
|
|
195
|
+
.carousel-item class=(:active if i.zero?)
|
|
196
|
+
= image_tag image_url, class: 'd-block w-100'
|
|
197
|
+
a.carousel-control-prev data-slide="prev" data-target='.carousel' role="button"
|
|
198
|
+
span.carousel-control-prev-icon aria-hidden="true"
|
|
199
|
+
span.sr-only Предыдущий
|
|
200
|
+
a.carousel-control-next data-slide="next" data-target='.carousel' role="button"
|
|
201
|
+
span.carousel-control-next-icon aria-hidden="true"
|
|
202
|
+
span.sr-only Следующий
|
|
203
|
+
```
|
|
204
|
+
[Вызов компонента](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-render_component.md) `carousel` в любом представлении или в [других компонентах](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):
|
|
205
|
+
```slim
|
|
206
|
+
= render_component :carousel, prefix: :common, image_urls: image_urls, cls: 'carousel-fade'
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
#### Компонент к которому можно применять `BEMHTML` шаблоны
|
|
210
|
+
|
|
211
|
+
Структура компонента [Сarousel из Bootstrap](https://getbootstrap.com/docs/4.3/components/carousel/#with-indicators):
|
|
212
|
+
|
|
213
|
+
```slim
|
|
214
|
+
/ app/frontend/components/common/carousel/index.slim
|
|
215
|
+
|
|
216
|
+
= define_component do |component|
|
|
217
|
+
= component.block :carousel, 'data-ride': :carousel, 'data-interval': false, cls: :slide do |carousel|
|
|
218
|
+
= carousel.elem :indicators, tag: :ol, cls: 'carousel-indicators'
|
|
219
|
+
- image_urls.size.times do |i|
|
|
220
|
+
= carousel.elem :indicator, tag: :li, 'data-slide-to': i, mods: (:active if i.zero?), 'data-target': '.carousel'
|
|
221
|
+
= carousel.elem :inner, cls: 'carousel-inner'
|
|
222
|
+
- image_urls.each_with_index do |image_url, i|
|
|
223
|
+
= carousel.elem :item, cls: 'carousel-item', mods: (:active if i.zero?)
|
|
224
|
+
= carousel.elem :image, tag: :img, cls: 'd-block w-100', src: image_url
|
|
225
|
+
= carousel.elem :control_prev, tag: :a, cls: 'carousel-control-prev', 'data-slide': :prev, role: :button, 'data-target': '.carousel'
|
|
226
|
+
span.carousel-control-prev-icon aria-hidden="true"
|
|
227
|
+
span.sr-only Предыдущий
|
|
228
|
+
= carousel.elem :control_next, tag: :a, cls: 'carousel-control-next', 'data-slide': :next, role: :button, 'data-target': '.carousel'
|
|
229
|
+
span.carousel-control-next-icon aria-hidden="true"
|
|
230
|
+
span.sr-only Следующий
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
[Шаблон по умолчанию](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-define_templates.md):
|
|
234
|
+
```slim
|
|
235
|
+
/ app/frontend/components/common/carousel/index.bemhtml.slim
|
|
236
|
+
|
|
237
|
+
= define_templates do |template|
|
|
238
|
+
= template.elem(mods: :active).add_cls :active
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
[Вызов компонента](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-render_component.md) `carousel` в любом представлении или в [других компонентах](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) с применением [`BEMHTML`](docs/BEMHTML.md) [шаблонов](docs/%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%8B.md):
|
|
242
|
+
```slim
|
|
243
|
+
= render_component :carousel, prefix: :common, image_urls: image_urls do |template|
|
|
244
|
+
= template.block(:carousel).add_mix :carousel_fade
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
## Документация
|
|
248
|
+
|
|
28
249
|
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
250
|
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
251
|
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)
|
|
@@ -37,6 +258,7 @@ gem 'bemer', '~> 0.2.0'
|
|
|
37
258
|
1. [`component_asset_path`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-component_asset_path.md)
|
|
38
259
|
1. [`component_partial_path`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-component_partial_path.md)
|
|
39
260
|
1. Дополнительные хелперы для БЭМ методологии
|
|
261
|
+
1. [`bem_attrs_for`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-bem_attrs_for.md)
|
|
40
262
|
1. [`bem_mix`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-bem_mix.md)
|
|
41
263
|
1. [`bem_mods`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-bem_mods.md)
|
|
42
264
|
1. [`block_tag`](docs/%D0%A5%D0%B5%D0%BB%D0%BF%D0%B5%D1%80-block_tag.md)
|
|
@@ -49,9 +271,10 @@ gem 'bemer', '~> 0.2.0'
|
|
|
49
271
|
|
|
50
272
|
## Ссылки
|
|
51
273
|
|
|
52
|
-
1. https://
|
|
53
|
-
1. https://github.com/bem/bem-
|
|
54
|
-
1. https://github.com/bem
|
|
274
|
+
1. BEM methodology - https://bem.info/methodology/
|
|
275
|
+
1. Minimal stack for coding client-side JavaScript and templating - https://github.com/bem/bem-core
|
|
276
|
+
1. Declarative template engine for the browser and server with regular JS syntax - https://github.com/bem/bem-xjst
|
|
277
|
+
1. BEM Forum - https://bem.info/forum/
|
|
55
278
|
|
|
56
279
|
## Лицензия
|
|
57
280
|
|
|
@@ -125,7 +125,7 @@ HTML тег изменить на `small` если текущая сущност
|
|
|
125
125
|
|
|
126
126
|
### Метод `name`
|
|
127
127
|
|
|
128
|
-
**ВАЖНО**. *При
|
|
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
129
|
|
|
130
130
|
Возвращает название сущности.
|
|
131
131
|
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Хелпер bem_attrs_for
|
|
2
|
+
|
|
3
|
+
Хелпер `bem_attrs_for` генерирует `class` и `data-bem` атрибуты для указанной сущности.
|
|
4
|
+
|
|
5
|
+
## Допустимые параметры
|
|
6
|
+
|
|
7
|
+
`cls` (синоним `class`), `js`, `mix` и `mods`, все остальные переданные параметры с названиями не из этого списка будут считаться атрибутами, за исключением: `bem`, `bem_cascade`, `content` и `tag`.
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## Использование
|
|
11
|
+
|
|
12
|
+
```slim
|
|
13
|
+
= bem_attrs_for :block, :element
|
|
14
|
+
/ => { class: "block__element i-bem", "data-bem": "{\"block__element\":{}}" }
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
```slim
|
|
18
|
+
= bem_attrs_for :block, :element, js: { some: :value }
|
|
19
|
+
/ => { class: "block__element i-bem", "data-bem": "{\"block__element\":{\"some\":\"value\"}}" }
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```slim
|
|
23
|
+
= simple_form_for :form, url: '#' do |f|
|
|
24
|
+
= f.input :numbers, collection: (1..5).map { |n| [n, n, bem_attrs_for(:form, :number, js: { value: n })] }
|
|
25
|
+
= f.button :submit
|
|
26
|
+
/ =>
|
|
27
|
+
/ <form novalidate="novalidate" class="form" action="#" accept-charset="UTF-8" method="post">
|
|
28
|
+
/ <!-- ... -->
|
|
29
|
+
/ <select class="form__numbers form__numbers--select form__numbers--required" name="form[numbers]" id="form_numbers">
|
|
30
|
+
/ <option value=""></option>
|
|
31
|
+
/ <option class="form__number i-bem" data-bem="{"form__number":{"value":1}}" value="1">1</option>
|
|
32
|
+
/ <option class="form__number i-bem" data-bem="{"form__number":{"value":2}}" value="2">2</option>
|
|
33
|
+
/ <option class="form__number i-bem" data-bem="{"form__number":{"value":3}}" value="3">3</option>
|
|
34
|
+
/ <option class="form__number i-bem" data-bem="{"form__number":{"value":4}}" value="4">4</option>
|
|
35
|
+
/ <option class="form__number i-bem" data-bem="{"form__number":{"value":5}}" value="5">5</option>
|
|
36
|
+
/ </select>
|
|
37
|
+
/ <!-- ... -->
|
|
38
|
+
/ </form>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
```slim
|
|
42
|
+
= simple_form_for :form, url: '#' do |f|
|
|
43
|
+
= f.input :numbers, collection: (1..5).map { |n| [n, n, bem_attrs_for(:form, :number, js: false)] }
|
|
44
|
+
= f.button :submit
|
|
45
|
+
/ =>
|
|
46
|
+
/ <form novalidate="novalidate" class="form" action="#" accept-charset="UTF-8" method="post">
|
|
47
|
+
/ <!-- ... -->
|
|
48
|
+
/ <select class="form__numbers form__numbers--select form__numbers--required" name="form[numbers]" id="form_numbers">
|
|
49
|
+
/ <option value=""></option>
|
|
50
|
+
/ <option class="form__number" value="1">1</option>
|
|
51
|
+
/ <option class="form__number" value="2">2</option>
|
|
52
|
+
/ <option class="form__number" value="3">3</option>
|
|
53
|
+
/ <option class="form__number" value="4">4</option>
|
|
54
|
+
/ <option class="form__number" value="5">5</option>
|
|
55
|
+
/ </select>
|
|
56
|
+
/ <!-- ... -->
|
|
57
|
+
/ </form>
|
|
58
|
+
```
|
|
@@ -50,12 +50,6 @@ bem_mix 'block_name' => 'elem_name' # => 'block_name__elem_name'
|
|
|
50
50
|
bem_mix 'block_name', 'block_name__elem' # => 'block_name block_name__elem'
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
эквивалентная запись:
|
|
54
|
-
|
|
55
|
-
```ruby
|
|
56
|
-
bem_mix 'block_name block_name__elem' # => 'block_name block_name__elem'
|
|
57
|
-
```
|
|
58
|
-
|
|
59
53
|
Пустые аргументы возвращают пустую строку
|
|
60
54
|
```ruby
|
|
61
55
|
bem_mix nil, '', {} # => ''
|
|
@@ -16,7 +16,7 @@ block_tag js: true, bem: true # => <div></div>
|
|
|
16
16
|
## Название сущности
|
|
17
17
|
|
|
18
18
|
При вызове `block_tag` первым аргументом передается название блока (указывать не обязательно) допустимые типы:
|
|
19
|
-
1. `Symbol` ВСЕ символы нижнего подчеркивания будут преобразованы в тире, при
|
|
19
|
+
1. `Symbol` ВСЕ символы нижнего подчеркивания будут преобразованы в тире, при формировании css классов по методологии БЭМ
|
|
20
20
|
1. `String` возвращается без изменений
|
|
21
21
|
|
|
22
22
|
```ruby
|
|
@@ -81,7 +81,7 @@ block_tag :block, cls: ['cls_1', :cls_2], bem: false # => <div class="cls_1 cls-
|
|
|
81
81
|
Добавляет содержимое для блока.
|
|
82
82
|
|
|
83
83
|
```ruby
|
|
84
|
-
block_tag :block, content: 'Block content' # => <div>Block content</div>
|
|
84
|
+
block_tag :block, content: 'Block content' # => <div class="block">Block content</div>
|
|
85
85
|
```
|
|
86
86
|
Если передан `Ruby &block`, тогда параметр `content` игнорируется:
|
|
87
87
|
|
|
@@ -169,6 +169,12 @@ block_tag :block, mix: [:mix_1, block_1: :elem], bem: true
|
|
|
169
169
|
|
|
170
170
|
block_tag :block, mix: { block_1: :elem }, bem: true
|
|
171
171
|
# => <div class="block block-1__elem"></div>
|
|
172
|
+
|
|
173
|
+
block_tag :block, mix: { block_1: :elem, mods: :enabled }
|
|
174
|
+
# => <div class="block block-1__elem block-1__elem--enabled"></div>
|
|
175
|
+
|
|
176
|
+
block_tag :block, js: true, mix: { block_1: :elem, js: { key: :value } }
|
|
177
|
+
# => <div class="block block-1__elem i-bem" data-bem="{"block":{},"block-1__elem":{"key":"value"}}"></div>
|
|
172
178
|
```
|
|
173
179
|
|
|
174
180
|
### Параметр `mods`
|
|
@@ -192,7 +198,7 @@ block_tag :block, mods: { size: :small }, bem: true
|
|
|
192
198
|
|
|
193
199
|
```ruby
|
|
194
200
|
block_tag :block, tag: :span, content: 'Block content'
|
|
195
|
-
# => <span>Block content</span>
|
|
201
|
+
# => <span class="block">Block content</span>
|
|
196
202
|
|
|
197
203
|
block_tag :block, tag: '', content: 'Block content'
|
|
198
204
|
# => 'Block content'
|
|
@@ -202,7 +208,7 @@ block_tag :block, tag: false, content: 'Block content'
|
|
|
202
208
|
|
|
203
209
|
# Будет использован default_block_tag из конфига
|
|
204
210
|
block_tag :block, tag: nil, content: 'Block content'
|
|
205
|
-
# => <div>Block content</div>
|
|
211
|
+
# => <div class="block">Block content</div>
|
|
206
212
|
```
|
|
207
213
|
|
|
208
214
|
### Атрибуты
|
|
@@ -19,7 +19,7 @@ elem_tag '', :elem, js: true, bem: true # => <div></div>
|
|
|
19
19
|
## Название сущности
|
|
20
20
|
|
|
21
21
|
При вызове `elem_tag` первым аргументом передается название блока (указывать не обязательно), вторым название элемента (указывать не обязательно) допустимые типы:
|
|
22
|
-
1. `Symbol` ВСЕ символы нижнего подчеркивания будут преобразованы в тире, при
|
|
22
|
+
1. `Symbol` ВСЕ символы нижнего подчеркивания будут преобразованы в тире, при формировании css классов по БЭМ методологии
|
|
23
23
|
1. `String` возвращается без изменений
|
|
24
24
|
|
|
25
25
|
```ruby
|
data/lib/bemer.rb
CHANGED
|
@@ -20,7 +20,7 @@ module Bemer
|
|
|
20
20
|
autoload :DefaultTemplateList
|
|
21
21
|
autoload :Entity
|
|
22
22
|
autoload :EntityBuilder
|
|
23
|
-
autoload :
|
|
23
|
+
autoload :Mixes
|
|
24
24
|
autoload :ModifierList
|
|
25
25
|
autoload :PathResolver
|
|
26
26
|
autoload :Pipeline
|
|
@@ -44,7 +44,7 @@ module Bemer
|
|
|
44
44
|
class << self
|
|
45
45
|
extend Forwardable
|
|
46
46
|
|
|
47
|
-
# rubocop:disable Layout/
|
|
47
|
+
# rubocop:disable Layout/AlignArguments
|
|
48
48
|
def_delegators :config, :asset_paths,
|
|
49
49
|
:bem,
|
|
50
50
|
:can_use_new_matcher?,
|
|
@@ -57,7 +57,7 @@ module Bemer
|
|
|
57
57
|
:path,
|
|
58
58
|
:paths,
|
|
59
59
|
:prepend_asset_paths
|
|
60
|
-
# rubocop:enable Layout/
|
|
60
|
+
# rubocop:enable Layout/AlignArguments
|
|
61
61
|
|
|
62
62
|
alias prepend_asset_paths? prepend_asset_paths
|
|
63
63
|
|
|
@@ -76,6 +76,7 @@ module Bemer
|
|
|
76
76
|
end
|
|
77
77
|
|
|
78
78
|
# entity_class??
|
|
79
|
+
# bem
|
|
79
80
|
# Добавить в хелперы
|
|
80
81
|
def bem_class(block, element = nil)
|
|
81
82
|
return '' if block.blank? || (!element.nil? && element.blank?)
|