bemer 0.3.0 → 0.4.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 +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?)
|