rails_bootstrap_form 0.7.1 → 0.8.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +10 -0
- data/Gemfile.lock +1 -1
- data/README.md +273 -1
- data/demo/app/models/user.rb +3 -0
- data/demo/app/views/users/_form.html.erb +10 -2
- data/demo/app/views/users/_horizontal_form.html.erb +4 -5
- data/demo/app/views/users/_inline_form.html.erb +13 -0
- data/demo/app/views/users/_vertical_form.html.erb +4 -5
- data/demo/config/locales/en.rb +3 -1
- data/lib/rails_bootstrap_form/bootstrap_form_builder.rb +10 -1
- data/lib/rails_bootstrap_form/bootstrap_form_options.rb +40 -37
- data/lib/rails_bootstrap_form/field_wrapper_builder.rb +8 -4
- data/lib/rails_bootstrap_form/helpers/buttons.rb +7 -1
- data/lib/rails_bootstrap_form/helpers/check_box.rb +3 -1
- data/lib/rails_bootstrap_form/helpers/labels.rb +16 -7
- data/lib/rails_bootstrap_form/helpers/radio_button.rb +3 -1
- data/lib/rails_bootstrap_form/inputs/check_box.rb +2 -0
- data/lib/rails_bootstrap_form/inputs/radio_button.rb +2 -0
- data/lib/rails_bootstrap_form/inputs/rich_text_area.rb +21 -0
- data/lib/rails_bootstrap_form/inputs.rb +2 -0
- data/lib/rails_bootstrap_form/version.rb +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 831ca7bb90715c33bd12b94176eecf4e229142b7b7c3b8a1d0366e5f287fb0fd
|
4
|
+
data.tar.gz: 6915c42e2221adce489e7a6564d6a88c31b52ce119dabb27a9e03ae51767d2d5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 31e6404b0c40f4ea07c148cee2b1b66edbe3a71a8290195705e8ab6507c754148b80ad601b84f4afa0908ed42ec3098d5f971d8c92eb33085b3fb100926aa015
|
7
|
+
data.tar.gz: 5bd3c08a5b50abef3af433b93b2ae518c9d7e5807a1c5aef9105dddaa5e52f17e5ec8e8f09ea7931298a24be195694b48eb8b6c98f26a34f5f8df7f0f04d0e32
|
data/CHANGELOG.md
CHANGED
@@ -4,6 +4,16 @@ You can find recent releases with docs in GitHub:
|
|
4
4
|
|
5
5
|
https://github.com/shivam091/rails_bootstrap_form/releases
|
6
6
|
|
7
|
+
## [0.8.0](https://github.com/shivam091/rails_bootstrap_form/compare/v0.7.2...v0.8.0) - 2023-05-26
|
8
|
+
|
9
|
+
### What's new
|
10
|
+
- Added support for `inline` layout for forms.
|
11
|
+
|
12
|
+
## [0.7.2](https://github.com/shivam091/rails_bootstrap_form/compare/v0.7.1...v0.7.2) - 2023-05-25
|
13
|
+
|
14
|
+
### What's new
|
15
|
+
- Added wrapper method for `rich_text_area`.
|
16
|
+
|
7
17
|
## [0.7.1](https://github.com/shivam091/rails_bootstrap_form/compare/v0.7.0...v0.7.1) - 2023-05-24
|
8
18
|
|
9
19
|
### What's new
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -22,7 +22,7 @@ And follow the remaining instructions in the [official bootstrap installation gu
|
|
22
22
|
Add the `rails_bootstrap_form` gem to your `Gemfile`:
|
23
23
|
|
24
24
|
```ruby
|
25
|
-
gem "rails_bootstrap_form", "~> 0.
|
25
|
+
gem "rails_bootstrap_form", "~> 0.7.2"
|
26
26
|
```
|
27
27
|
|
28
28
|
Then:
|
@@ -66,3 +66,275 @@ The current configuration options are:
|
|
66
66
|
| Option | Default value | Description |
|
67
67
|
|---------------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
68
68
|
| `default_form_attributes` | | Set this option to `{role: "form"}` to make forms non-compliant with W3C, but generate the `role="form"` attribute. |
|
69
|
+
|
70
|
+
## Usage
|
71
|
+
|
72
|
+
### bootstrap_form_for
|
73
|
+
|
74
|
+
To get started, use the `bootstrap_form_for` helper in place of the Rails `form_for` helper. Here's an example:
|
75
|
+
|
76
|
+

|
77
|
+
|
78
|
+
```erb
|
79
|
+
<%= bootstrap_form_for(@user) do |f| %>
|
80
|
+
<%= f.email_field :email %>
|
81
|
+
<%= f.password_field :password %>
|
82
|
+
<%= f.check_box :remember_me %>
|
83
|
+
<%= f.primary "Log In" %>
|
84
|
+
<% end %>
|
85
|
+
```
|
86
|
+
|
87
|
+
This generates the following HTML:
|
88
|
+
|
89
|
+
|
90
|
+
```html
|
91
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
92
|
+
<div class="mb-3">
|
93
|
+
<label class="form-label required" for="user_email">Email address</label>
|
94
|
+
<input class="form-control" aria-required="true" required="required" type="email" name="user[email]" id="user_email">
|
95
|
+
</div>
|
96
|
+
<div class="mb-3">
|
97
|
+
<label class="form-label required" for="user_password">Password</label>
|
98
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
99
|
+
</div>
|
100
|
+
<div class="form-check mb-3">
|
101
|
+
<input name="user[remember_me]" type="hidden" value="0" autocomplete="off">
|
102
|
+
<input class="form-check-input" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me">
|
103
|
+
<label class="form-check-label" for="user_remember_me">Remember me</label>
|
104
|
+
</div>
|
105
|
+
<input type="submit" name="commit" value="Log In" class="btn btn-primary" data-disable-with="Log In">
|
106
|
+
</form>
|
107
|
+
```
|
108
|
+
|
109
|
+
### bootstrap_form_with
|
110
|
+
|
111
|
+
To get started, use the `bootstrap_form_with` helper in place of the Rails `form_with` helper. Here's an example:
|
112
|
+
|
113
|
+

|
114
|
+
|
115
|
+
```erb
|
116
|
+
<%= bootstrap_form_with(model: @user) do |f| %>
|
117
|
+
<%= f.email_field :email %>
|
118
|
+
<%= f.password_field :password %>
|
119
|
+
<%= f.check_box :remember_me %>
|
120
|
+
<%= f.primary "Log In" %>
|
121
|
+
<% end %>
|
122
|
+
```
|
123
|
+
|
124
|
+
This generates the following HTML:
|
125
|
+
|
126
|
+
|
127
|
+
```html
|
128
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
129
|
+
<div class="mb-3">
|
130
|
+
<label class="form-label required" for="user_email">Email address</label>
|
131
|
+
<input class="form-control" aria-required="true" required="required" type="email" name="user[email]" id="user_email">
|
132
|
+
</div>
|
133
|
+
<div class="mb-3">
|
134
|
+
<label class="form-label required" for="user_password">Password</label>
|
135
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
136
|
+
</div>
|
137
|
+
<div class="form-check mb-3">
|
138
|
+
<input name="user[remember_me]" type="hidden" value="0" autocomplete="off">
|
139
|
+
<input class="form-check-input" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me">
|
140
|
+
<label class="form-check-label" for="user_remember_me">Remember me</label>
|
141
|
+
</div>
|
142
|
+
<input type="submit" name="commit" value="Log In" class="btn btn-primary" data-disable-with="Log In">
|
143
|
+
</form>
|
144
|
+
```
|
145
|
+
|
146
|
+
## Bootstrap configuration options
|
147
|
+
|
148
|
+
Here's a list of all possible options you can pass via `bootstrap_form` option that can be attached to the `bootstrap_form_for` or `bootstrap_form_with` or any field helpers inside of it:
|
149
|
+
|
150
|
+
| Option | Description | Default value |
|
151
|
+
| ------ | ------------- | ----------- |
|
152
|
+
| `layout` | Controls layout of form and field helpers. It can be `vertical` `horizontal`, or `inline`. | `vertical` |
|
153
|
+
| `field_class` | A CSS class that will be applied to all form fields. | `form-control` |
|
154
|
+
| `additional_field_class` | An additional CSS class that will be added along with the existing css classes of field helpers. | `nil` |
|
155
|
+
| `help_text` | Describes help text for the HTML field. Help text is automatically read from translation file. If you want to customize it, you can pass a string. You can also set it `false` if you do not want help text displayed. | `nil` |
|
156
|
+
| `label_text` | An option to customize automatically generated label text. | `nil` |
|
157
|
+
| `skip_label` | An option to control whether the label is to be displayed or not. | `false` |
|
158
|
+
| `hide_label` | An option to control whether the label is only accessible to a screen readers. | `false` |
|
159
|
+
| `hide_class` | A CSS class that will be used when the label is only accessible to a screen readers. | `visually-hidden` |
|
160
|
+
| `label_class` | A CSS class that will be applied to all labels when layout is `vertical`. | `form-label` |
|
161
|
+
| `additional_label_class` | An additional CSS class that will be added along with the existing label css classes. | `nil` |
|
162
|
+
| `prepend` | Raw or HTML content to be prepended to the field. | `nil` |
|
163
|
+
| `append` | Raw or HTML content to be appended to the field. | `nil` |
|
164
|
+
| `additional_input_group_class` | An additional CSS class that will be added to existing input group wrapper css classes. | `nil` |
|
165
|
+
| `floating` | An option to control whether the field should have a floating label. | `false` |
|
166
|
+
| `static_field_class` | A CSS class that will be applied to all static fields. | `form-control-plaintext` |
|
167
|
+
| `switch` | An option to control whether the check box should look like Bootstrap switches. | `false` |
|
168
|
+
| `wrapper_options` | An option to control the HTML attributes and options that will be added to a field wrapper. | `{}` |
|
169
|
+
| `size` | An option to control the size of input groups, buttons, labels, and fields. It can be `sm` or `lg`. | `nil` |
|
170
|
+
| `inline` | An option to group checkboxes and radio buttons on the same horizontal row. | `false` |
|
171
|
+
| `label_col_class` | A CSS class that will be applied to all labels when layout is `horizontal`. | `col-form-label` |
|
172
|
+
| `label_col_wrapper_class` | A CSS class for label column when layout is `horizontal`. | `col-sm-2` |
|
173
|
+
| `field_col_wrapper_class` | A CSS class for field column when layout is `horizontal`. | `col-sm-10` |
|
174
|
+
| `render_as_button` | An option to render submit button using `<button type="submit">` instead of `<input type="submit">`. | `false` |
|
175
|
+
|
176
|
+
Options applied on the form level will apply to all field helpers. Options applied on field helpers will override form-level options.
|
177
|
+
Here's an example of a form where one field uses different layout:
|
178
|
+
|
179
|
+

|
180
|
+
|
181
|
+
```erb
|
182
|
+
<%= bootstrap_form_for @user do |form| %>
|
183
|
+
<%= form.text_field :name %>
|
184
|
+
<%= form.email_field :email %>
|
185
|
+
<%= form.password_field :password, bootstrap_form: {layout: :horizontal} %>
|
186
|
+
<%= form.check_box :terms, required: true %>
|
187
|
+
<%= form.primary "Register" %>
|
188
|
+
<% end %>
|
189
|
+
```
|
190
|
+
|
191
|
+
This generates the following HTML:
|
192
|
+
|
193
|
+
```html
|
194
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
195
|
+
<div class="mb-3">
|
196
|
+
<label class="form-label required" for="user_name">Name</label>
|
197
|
+
<input class="form-control" aria-required="true" required="required" type="text" name="user[name]" id="user_name">
|
198
|
+
</div>
|
199
|
+
<div class="mb-3">
|
200
|
+
<label class="form-label required" for="user_email">Email address</label>
|
201
|
+
<input class="form-control" aria-required="true" required="required" type="email" name="user[email]" id="user_email">
|
202
|
+
</div>
|
203
|
+
<div class="row mb-3">
|
204
|
+
<label class="col-form-label col-sm-2 required" for="user_password">Password</label>
|
205
|
+
<div class="col-sm-10">
|
206
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
207
|
+
</div>
|
208
|
+
</div>
|
209
|
+
<div class="form-check mb-3">
|
210
|
+
<input name="user[terms]" type="hidden" value="0" autocomplete="off">
|
211
|
+
<input required="required" class="form-check-input" type="checkbox" value="1" name="user[terms]" id="user_terms">
|
212
|
+
<label class="form-check-label required" for="user_terms">I accept terms and conditions</label>
|
213
|
+
<div class="form-text text-muted">You must first accept terms and conditions in order to continue</div>
|
214
|
+
</div>
|
215
|
+
<input type="submit" name="commit" value="Register" class="btn btn-primary" data-disable-with="Register">
|
216
|
+
</form>
|
217
|
+
```
|
218
|
+
|
219
|
+
## Supported form helpers
|
220
|
+
|
221
|
+
This gem wraps most of the form field helpers. Here's the current list:
|
222
|
+
|
223
|
+
```
|
224
|
+
check_box collection_check_boxes collection_radio_buttons
|
225
|
+
collection_select color_field date_field
|
226
|
+
date_select datetime_field datetime_local_field
|
227
|
+
datetime_select email_field file_field
|
228
|
+
grouped_collection_select hidden_field month_field
|
229
|
+
number_field password_field phone_field
|
230
|
+
radio_button range_field rich_text_area
|
231
|
+
search_field select static_field
|
232
|
+
telephone_field text_area text_field
|
233
|
+
time_field time_select time_zone_select
|
234
|
+
url_field week_field weekday_select
|
235
|
+
```
|
236
|
+
|
237
|
+
## Supported form layouts
|
238
|
+
|
239
|
+
### Vertical layout
|
240
|
+
|
241
|
+
This layout is default layout for the form in which labels are above the fields and labels and fields take 100% of the width.
|
242
|
+
|
243
|
+
Here's an example of how it looks like:
|
244
|
+
|
245
|
+

|
246
|
+
|
247
|
+
```erb
|
248
|
+
<%= bootstrap_form_for @user do |form| %>
|
249
|
+
<%= form.email_field :email %>
|
250
|
+
<%= form.password_field :password %>
|
251
|
+
<%= form.primary "Sign in" %>
|
252
|
+
<% end %>
|
253
|
+
```
|
254
|
+
|
255
|
+
This generates the following HTML:
|
256
|
+
|
257
|
+
```html
|
258
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
259
|
+
<div class="mb-3">
|
260
|
+
<label class="form-label required" for="user_email">Email address</label>
|
261
|
+
<input class="form-control" aria-required="true" required="required" type="email" name="user[email]" id="user_email">
|
262
|
+
</div>
|
263
|
+
<div class="mb-3">
|
264
|
+
<label class="form-label required" for="user_password">Password</label>
|
265
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
266
|
+
</div>
|
267
|
+
<input type="submit" name="commit" value="Sign in" class="btn btn-primary" data-disable-with="Sign in">
|
268
|
+
</form>
|
269
|
+
```
|
270
|
+
|
271
|
+
### Horizontal layout
|
272
|
+
|
273
|
+
If you want to align label and field side by side, you can use horizontal layout for the form.
|
274
|
+
You can optionally override `label_col_wrapper_class` and `field_col_wrapper_class` at either form level or field helpers if want to customize
|
275
|
+
space between label and field.
|
276
|
+
|
277
|
+
Here's an example of how it looks like by default:
|
278
|
+
|
279
|
+

|
280
|
+
|
281
|
+
```erb
|
282
|
+
<%= bootstrap_form_for @user, bootstrap_form: {layout: :horizontal} do |form| %>
|
283
|
+
<%= form.email_field :email %>
|
284
|
+
<%= form.password_field :password %>
|
285
|
+
<%= form.primary "Sign in" %>
|
286
|
+
<% end %>
|
287
|
+
```
|
288
|
+
This generates the following HTML:
|
289
|
+
|
290
|
+
```html
|
291
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
292
|
+
<div class="row mb-3">
|
293
|
+
<label class="col-form-label col-sm-2 required" for="user_email">Email address</label>
|
294
|
+
<div class="col-sm-10">
|
295
|
+
<input class="form-control" aria-required="true" required="required" type="email" name="user[email]" id="user_email">
|
296
|
+
</div>
|
297
|
+
</div>
|
298
|
+
<div class="row mb-3">
|
299
|
+
<label class="col-form-label col-sm-2 required" for="user_password">Password</label>
|
300
|
+
<div class="col-sm-10">
|
301
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
302
|
+
</div>
|
303
|
+
</div>
|
304
|
+
<input type="submit" name="commit" value="Sign in" class="btn btn-primary" data-disable-with="Sign in">
|
305
|
+
</form>
|
306
|
+
```
|
307
|
+
|
308
|
+
### Inline layout
|
309
|
+
|
310
|
+
You may choose to render form elements in one line. Please note that this layout won't render all form elements perfectly. Things like errors messages and help text won't show up right.
|
311
|
+
|
312
|
+
Here's an example of how it looks like:
|
313
|
+
|
314
|
+

|
315
|
+
|
316
|
+
```erb
|
317
|
+
<%= bootstrap_form_for @user, bootstrap_form: {layout: :inline} do |form| %>
|
318
|
+
<%= form.email_field :email %>
|
319
|
+
<%= form.password_field :password %>
|
320
|
+
<%= form.primary "Sign in" %>
|
321
|
+
<% end %>
|
322
|
+
```
|
323
|
+
|
324
|
+
This generates the following HTML:
|
325
|
+
|
326
|
+
```html
|
327
|
+
<form role="form" novalidate="novalidate" class="new_user row row-cols-lg-auto g-3 align-items-center" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
328
|
+
<div class="col-12">
|
329
|
+
<label class="form-label visually-hidden required" for="user_email">Email address</label>
|
330
|
+
<input class="form-control" aria-required="true" required="required" placeholder="Email address" type="email" name="user[email]" id="user_email">
|
331
|
+
</div>
|
332
|
+
<div class="col-12">
|
333
|
+
<label class="form-label visually-hidden required" for="user_password">Password</label>
|
334
|
+
<input class="form-control" aria-required="true" required="required" placeholder="Password" type="password" name="user[password]" id="user_password">
|
335
|
+
</div>
|
336
|
+
<div class="col-12">
|
337
|
+
<input type="submit" name="commit" value="Sign in" class="btn btn-primary" data-disable-with="Sign in">
|
338
|
+
</div>
|
339
|
+
</form>
|
340
|
+
```
|
data/demo/app/models/user.rb
CHANGED
@@ -2,6 +2,14 @@
|
|
2
2
|
<%= render partial: "users/form_without_bootstrap_helpers" %>
|
3
3
|
<% end %>
|
4
4
|
|
5
|
-
|
5
|
+
<% if true %>
|
6
|
+
<%= render partial: "users/inline_form" %>
|
7
|
+
<% end %>
|
8
|
+
|
9
|
+
<% if true %>
|
10
|
+
<%= render partial: "users/vertical_form" %>
|
11
|
+
<% end %>
|
6
12
|
|
7
|
-
|
13
|
+
<% if true %>
|
14
|
+
<%= render partial: "users/horizontal_form" %>
|
15
|
+
<% end %>
|
@@ -1,10 +1,11 @@
|
|
1
1
|
<div class="card card-primary my-3">
|
2
2
|
<div class="card-header fw-bold">
|
3
|
-
|
3
|
+
Horizontal layout
|
4
4
|
</div>
|
5
5
|
<div class="card-body">
|
6
6
|
<%= bootstrap_form_for @user, bootstrap_form: {layout: :horizontal} do |form| %>
|
7
7
|
<%= form.text_field :name, autocomplete: "new-name" %>
|
8
|
+
<%= form.text_field :username, autocomplete: "new-username" %>
|
8
9
|
<%= form.email_field :email, autocomplete: "new-email" %>
|
9
10
|
<%= form.password_field :password, autocomplete: "new-password" %>
|
10
11
|
<%= form.phone_field :mobile_number %>
|
@@ -23,10 +24,8 @@
|
|
23
24
|
{include_blank: "Select Country"} %>
|
24
25
|
<% end %>
|
25
26
|
<%= form.check_box :terms, required: true %>
|
26
|
-
|
27
|
-
|
28
|
-
<%= link_to "Cancel", users_path, class: "btn btn-secondary" %>
|
29
|
-
</div>
|
27
|
+
<%= form.primary "Register" %>
|
28
|
+
<%= link_to "Cancel", users_path, class: "btn btn-secondary" %>
|
30
29
|
<% end %>
|
31
30
|
</div>
|
32
31
|
</div>
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<div class="card card-primary my-3">
|
2
|
+
<div class="card-header fw-bold">
|
3
|
+
Inline layout
|
4
|
+
</div>
|
5
|
+
<div class="card-body">
|
6
|
+
<%= bootstrap_form_for @user, bootstrap_form: {layout: :inline} do |form| %>
|
7
|
+
<%= form.text_field :username, autocomplete: "new-username" %>
|
8
|
+
<%= form.password_field :password, autocomplete: "new-password" %>
|
9
|
+
<%= form.check_box :remember_me %>
|
10
|
+
<%= form.primary "Login" %>
|
11
|
+
<% end %>
|
12
|
+
</div>
|
13
|
+
</div>
|
@@ -1,10 +1,11 @@
|
|
1
1
|
<div class="card card-primary my-3">
|
2
2
|
<div class="card-header fw-bold">
|
3
|
-
|
3
|
+
Vertical layout
|
4
4
|
</div>
|
5
5
|
<div class="card-body">
|
6
6
|
<%= bootstrap_form_for @user do |form| %>
|
7
7
|
<%= form.text_field :name, autocomplete: "new-name" %>
|
8
|
+
<%= form.text_field :username, autocomplete: "new-username" %>
|
8
9
|
<%= form.email_field :email, autocomplete: "new-email" %>
|
9
10
|
<%= form.password_field :password, autocomplete: "new-password" %>
|
10
11
|
<%= form.phone_field :mobile_number %>
|
@@ -23,10 +24,8 @@
|
|
23
24
|
{include_blank: "Select Country"} %>
|
24
25
|
<% end %>
|
25
26
|
<%= form.check_box :terms, required: true %>
|
26
|
-
|
27
|
-
|
28
|
-
<%= link_to "Cancel", users_path, class: "btn btn-secondary" %>
|
29
|
-
</div>
|
27
|
+
<%= form.primary "Register" %>
|
28
|
+
<%= link_to "Cancel", users_path, class: "btn btn-secondary" %>
|
30
29
|
<% end %>
|
31
30
|
</div>
|
32
31
|
</div>
|
data/demo/config/locales/en.rb
CHANGED
@@ -27,6 +27,8 @@
|
|
27
27
|
terms: "I accept terms and conditions",
|
28
28
|
excellence: "Excellence",
|
29
29
|
skill_ids: "Skills",
|
30
|
+
username: "Username",
|
31
|
+
remember_me: "Keep me signed in",
|
30
32
|
},
|
31
33
|
user_skill: {
|
32
34
|
user_id: "User",
|
@@ -45,7 +47,7 @@
|
|
45
47
|
email: "Please use official email address",
|
46
48
|
terms: "You must first accept terms and conditions in order to continue",
|
47
49
|
skill_ids: "Select your strong skills",
|
48
|
-
fruit_id: "Select your favorite fruit"
|
50
|
+
fruit_id: "Select your favorite fruit",
|
49
51
|
}
|
50
52
|
},
|
51
53
|
}
|
@@ -17,6 +17,7 @@ module RailsBootstrapForm
|
|
17
17
|
def initialize(object_name, object, template, options)
|
18
18
|
@bootstrap_form_options = RailsBootstrapForm::BootstrapFormOptions.new(options[:bootstrap_form])
|
19
19
|
apply_default_form_options(options)
|
20
|
+
apply_default_form_classes(options)
|
20
21
|
super(object_name, object, template, options)
|
21
22
|
end
|
22
23
|
|
@@ -31,12 +32,20 @@ module RailsBootstrapForm
|
|
31
32
|
options[:html].reverse_merge!(RailsBootstrapForm.config.default_form_attributes)
|
32
33
|
end
|
33
34
|
|
35
|
+
def apply_default_form_classes(options)
|
36
|
+
return unless @bootstrap_form_options.layout_inline?
|
37
|
+
|
38
|
+
options[:html][:class] =
|
39
|
+
([*options[:html][:class]&.split(/\s+/)] + %w[row row-cols-lg-auto g-3 align-items-center])
|
40
|
+
.compact.uniq.join(" ")
|
41
|
+
end
|
42
|
+
|
34
43
|
def fields_for_options(record_object, fields_options)
|
35
44
|
field_options = record_object if record_object.is_a?(Hash) && record_object.extractable_options?
|
36
45
|
field_options = {bootstrap_form: options[:bootstrap_form]}.deep_merge!(field_options)
|
37
46
|
field_options
|
38
47
|
end
|
39
48
|
|
40
|
-
private :apply_default_form_options, :fields_for_options
|
49
|
+
private :apply_default_form_options, :fields_for_options, :apply_default_form_classes
|
41
50
|
end
|
42
51
|
end
|
@@ -16,47 +16,47 @@ module RailsBootstrapForm
|
|
16
16
|
#
|
17
17
|
class BootstrapFormOptions
|
18
18
|
|
19
|
-
# Controls form and field
|
20
|
-
#
|
19
|
+
# Controls layout of form and field helpers. It can be "vertical,
|
20
|
+
# "horizontal", or "inline". The default value is `vertical`.
|
21
21
|
attr_accessor :layout
|
22
22
|
|
23
|
-
# A CSS class that will be applied to all form fields
|
24
|
-
#
|
23
|
+
# A CSS class that will be applied to all form fields.
|
24
|
+
# The default value is `form-control`.
|
25
25
|
attr_accessor :field_class
|
26
26
|
|
27
27
|
# An additional CSS class that will be added along with the existing
|
28
|
-
#
|
28
|
+
# css classes of field helpers. The default value is nil.
|
29
29
|
attr_accessor :additional_field_class
|
30
30
|
|
31
31
|
# Describes help text for the HTML field. Help text is automatically read
|
32
32
|
# from translation file. If you want to customize it, you can pass string.
|
33
33
|
# You can also set it false if you do not want help text displayed.
|
34
|
-
#
|
34
|
+
# The default value is nil.
|
35
35
|
attr_accessor :help_text
|
36
36
|
|
37
|
-
# An option to
|
38
|
-
#
|
37
|
+
# An option to customize automatically generated label text.
|
38
|
+
# The default value is `nil`.
|
39
39
|
attr_accessor :label_text
|
40
40
|
|
41
|
-
# An option to
|
42
|
-
#
|
41
|
+
# An option to control whether the label is to be displayed or not.
|
42
|
+
# The default value is `false`.
|
43
43
|
attr_accessor :skip_label
|
44
44
|
|
45
|
-
# An option to
|
46
|
-
#
|
45
|
+
# An option to control whether the label is only visible to a screen readers.
|
46
|
+
# The default value is `false`.
|
47
47
|
attr_accessor :hide_label
|
48
48
|
|
49
|
-
# The CSS class that will be used when the label is only accessible
|
50
|
-
# readers.
|
49
|
+
# The CSS class that will be used when the label is only accessible to a
|
50
|
+
# screen readers. The default value is `visually-hidden`.
|
51
51
|
attr_accessor :hide_class
|
52
52
|
|
53
|
-
#
|
53
|
+
# A CSS class that will be applied to all label tags when layout is
|
54
54
|
# vertical.
|
55
55
|
# The default value is `form-label`.
|
56
56
|
attr_accessor :label_class
|
57
57
|
|
58
|
-
# An additional CSS class that will be added along with the existing
|
59
|
-
#
|
58
|
+
# An additional CSS class that will be added along with the existing label
|
59
|
+
# css classes. The default value is `nil`.
|
60
60
|
attr_accessor :additional_label_class
|
61
61
|
|
62
62
|
# Input group specific options. Input groups allow prepending and appending
|
@@ -68,58 +68,57 @@ module RailsBootstrapForm
|
|
68
68
|
# form.text_field :search, bootstrap_form: {input_group: {append: button_tag("Go", type: :submit, class: "btn btn-secondary")}}
|
69
69
|
#
|
70
70
|
# Raw or HTML content to be prepended to the field.
|
71
|
-
#
|
71
|
+
# The default value is `nil`.
|
72
72
|
attr_accessor :prepend
|
73
73
|
|
74
74
|
# Raw or HTML content to be appended to the field.
|
75
|
-
#
|
75
|
+
# The default value is `nil`.
|
76
76
|
attr_accessor :append
|
77
77
|
|
78
|
-
#
|
79
|
-
#
|
78
|
+
# An additional CSS class that will be added to existing input group wrapper
|
79
|
+
# css classes. The default value is `nil`.
|
80
80
|
attr_accessor :additional_input_group_class
|
81
81
|
|
82
|
-
#
|
83
|
-
#
|
82
|
+
# An option to control whether the field should have a floating label.
|
83
|
+
# The default value is false.
|
84
84
|
attr_accessor :floating
|
85
85
|
|
86
|
-
#
|
87
|
-
#
|
86
|
+
# A CSS class that will be applied to all static fields.
|
87
|
+
# The default value is `form-control-plaintext`.
|
88
88
|
attr_accessor :static_field_class
|
89
89
|
|
90
|
-
#
|
91
|
-
#
|
90
|
+
# An option to control whether the check box should look like Bootstrap switches.
|
91
|
+
# The default value is `false`.
|
92
92
|
attr_accessor :switch
|
93
93
|
|
94
|
-
#
|
95
|
-
#
|
94
|
+
# An option to control the HTML attributes and options that will be added to
|
95
|
+
# the field wrapper. The default value is `{}`.
|
96
96
|
attr_accessor :wrapper_options
|
97
97
|
|
98
|
-
#
|
98
|
+
# An option to control the size of input groups, buttons, labels, and fields.
|
99
99
|
# The valid values are `sm` and `lg`. The default value is `nil`.
|
100
100
|
attr_accessor :size
|
101
101
|
|
102
|
-
#
|
103
|
-
# The default value
|
102
|
+
# An option to group checkboxes and radio buttons on the same horizontal row.
|
103
|
+
# The default value is `false`.
|
104
104
|
#
|
105
105
|
# Example:
|
106
106
|
# form.collection_radio_buttons :choices, ["yes", "no"], :to_s, :to_s, bootstrap_form: {inline: true}
|
107
107
|
attr_accessor :inline
|
108
108
|
|
109
|
-
#
|
110
|
-
# horizontal.
|
109
|
+
# A CSS class that will be applied to all labels when layout is horizontal.
|
111
110
|
# The default value is `col-form-label`.
|
112
111
|
attr_accessor :label_col_class
|
113
112
|
|
114
|
-
#
|
113
|
+
# A CSS class for label column when layout is horizontal.
|
115
114
|
# The default value is `col-sm-2`.
|
116
115
|
attr_accessor :label_col_wrapper_class
|
117
116
|
|
118
|
-
#
|
117
|
+
# A CSS class for field column when layout is horizontal.
|
119
118
|
# The default value is `col-sm-10`.
|
120
119
|
attr_accessor :field_col_wrapper_class
|
121
120
|
|
122
|
-
#
|
121
|
+
# An option to render submit button using `<button type="submit">` instead of
|
123
122
|
# `<input type="submit">`.
|
124
123
|
# The default value is `false`.
|
125
124
|
attr_accessor :render_as_button
|
@@ -181,6 +180,10 @@ module RailsBootstrapForm
|
|
181
180
|
@label_class = "form-label"
|
182
181
|
@additional_label_class = nil
|
183
182
|
|
183
|
+
@prepend = nil
|
184
|
+
@append = nil
|
185
|
+
@additional_input_group_class = nil
|
186
|
+
|
184
187
|
@floating = false
|
185
188
|
|
186
189
|
@static_field_class = "form-control-plaintext"
|
@@ -58,12 +58,12 @@ module RailsBootstrapForm
|
|
58
58
|
def field_wrapper_classes(bootstrap_options)
|
59
59
|
classes = []
|
60
60
|
classes << "row" if bootstrap_options.layout_horizontal?
|
61
|
-
classes << form_wrapper_default_class
|
61
|
+
classes << form_wrapper_default_class(bootstrap_options)
|
62
62
|
classes.flatten.compact
|
63
63
|
end
|
64
64
|
|
65
|
-
def form_wrapper_default_class
|
66
|
-
"mb-3"
|
65
|
+
def form_wrapper_default_class(bootstrap_options)
|
66
|
+
bootstrap_options.layout_inline? ? "col-12" : "mb-3"
|
67
67
|
end
|
68
68
|
|
69
69
|
def field_css_options(attribute, bootstrap_options, options, html_options)
|
@@ -82,7 +82,7 @@ module RailsBootstrapForm
|
|
82
82
|
css_options[:class] = field_classes.flatten.compact
|
83
83
|
css_options.merge!(required_field_options(attribute, options))
|
84
84
|
|
85
|
-
if (bootstrap_options
|
85
|
+
if placeholder_required?(bootstrap_options)
|
86
86
|
css_options[:placeholder] ||= label_text(attribute, bootstrap_options)
|
87
87
|
end
|
88
88
|
|
@@ -97,6 +97,10 @@ module RailsBootstrapForm
|
|
97
97
|
classes
|
98
98
|
end
|
99
99
|
|
100
|
+
def placeholder_required?(bootstrap_options)
|
101
|
+
(bootstrap_options.floating? && !bootstrap_options.layout_horizontal?) || bootstrap_options.layout_inline?
|
102
|
+
end
|
103
|
+
|
100
104
|
private :field_wrapper, :field_wrapper_classes, :form_wrapper_default_class,
|
101
105
|
:field_css_options, :floating_label_classes
|
102
106
|
end
|
@@ -12,11 +12,17 @@ module RailsBootstrapForm
|
|
12
12
|
value, options = nil, value if value.is_a?(Hash)
|
13
13
|
bootstrap_options = bootstrap_form_options.scoped(options.delete(:bootstrap_form))
|
14
14
|
|
15
|
-
if (bootstrap_options.render_as_button? || block)
|
15
|
+
button_html = if (bootstrap_options.render_as_button? || block)
|
16
16
|
button(value, options, &block)
|
17
17
|
else
|
18
18
|
submit(value, options)
|
19
19
|
end
|
20
|
+
|
21
|
+
if bootstrap_options.layout_inline?
|
22
|
+
tag.div(class: "col-12") { button_html }
|
23
|
+
else
|
24
|
+
button_html
|
25
|
+
end
|
20
26
|
end
|
21
27
|
|
22
28
|
def secondary(value = nil, options = {}, &block)
|
@@ -62,7 +62,9 @@ module RailsBootstrapForm
|
|
62
62
|
classes = Array("form-check")
|
63
63
|
classes << "form-switch" if bootstrap_options.switch?
|
64
64
|
classes << "form-check-inline" if bootstrap_options.inline?
|
65
|
-
|
65
|
+
if (bootstrap_options.layout_vertical? && !bootstrap_options.inline?)
|
66
|
+
classes << "mb-3"
|
67
|
+
end
|
66
68
|
classes.flatten.compact
|
67
69
|
end
|
68
70
|
|
@@ -22,23 +22,32 @@ module RailsBootstrapForm
|
|
22
22
|
|
23
23
|
def label_classes(attribute, bootstrap_options)
|
24
24
|
classes = []
|
25
|
-
classes <<
|
26
|
-
[bootstrap_options.label_col_class, bootstrap_options.label_col_wrapper_class]
|
27
|
-
else
|
28
|
-
bootstrap_options.label_class
|
29
|
-
end
|
25
|
+
classes << label_layout_classes(bootstrap_options)
|
30
26
|
classes << bootstrap_options.additional_label_class
|
31
|
-
classes << bootstrap_options.hide_class if bootstrap_options
|
27
|
+
classes << bootstrap_options.hide_class if hide_class_required?(bootstrap_options)
|
32
28
|
classes << "required" if is_attribute_required?(attribute)
|
33
29
|
classes << "is-invalid" if is_invalid?(attribute)
|
34
30
|
classes.flatten.compact
|
35
31
|
end
|
36
32
|
|
33
|
+
def label_layout_classes(bootstrap_options)
|
34
|
+
if bootstrap_options.layout_horizontal?
|
35
|
+
[bootstrap_options.label_col_class, bootstrap_options.label_col_wrapper_class]
|
36
|
+
else
|
37
|
+
bootstrap_options.label_class
|
38
|
+
end
|
39
|
+
end
|
40
|
+
|
37
41
|
def label_text(attribute, bootstrap_options)
|
38
42
|
bootstrap_options.label_text || object&.class.try(:human_attribute_name, attribute)
|
39
43
|
end
|
40
44
|
|
41
|
-
|
45
|
+
def hide_class_required?(bootstrap_options)
|
46
|
+
bootstrap_options.hide_label? || (bootstrap_options.layout_inline? && !bootstrap_options.floating?)
|
47
|
+
end
|
48
|
+
|
49
|
+
private :draw_label, :label_classes, :label_text, :label_layout_classes,
|
50
|
+
:hide_class_required?
|
42
51
|
end
|
43
52
|
end
|
44
53
|
end
|
@@ -58,7 +58,9 @@ module RailsBootstrapForm
|
|
58
58
|
def radio_button_wrapper_class(bootstrap_options)
|
59
59
|
classes = Array("form-check")
|
60
60
|
classes << "form-check-inline" if bootstrap_options.inline?
|
61
|
-
|
61
|
+
if (bootstrap_options.layout_vertical? && !bootstrap_options.inline?)
|
62
|
+
classes << "mb-3"
|
63
|
+
end
|
62
64
|
classes.flatten.compact
|
63
65
|
end
|
64
66
|
|
@@ -0,0 +1,21 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
# -*- frozen_string_literal: true -*-
|
3
|
+
# -*- warn_indent: true -*-
|
4
|
+
|
5
|
+
module RailsBootstrapForm
|
6
|
+
module Inputs
|
7
|
+
module RichTextArea
|
8
|
+
extend ActiveSupport::Concern
|
9
|
+
|
10
|
+
included do
|
11
|
+
def rich_text_area(attribute, options = {})
|
12
|
+
options[:class] = ["trix-content", options[:class]].compact.join(" ")
|
13
|
+
|
14
|
+
field_wrapper_builder(attribute, options) do
|
15
|
+
super(attribute, options)
|
16
|
+
end
|
17
|
+
end
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
21
|
+
end
|
@@ -27,6 +27,7 @@ module RailsBootstrapForm
|
|
27
27
|
autoload :PhoneField
|
28
28
|
autoload :RadioButton
|
29
29
|
autoload :RangeField
|
30
|
+
autoload :RichTextArea
|
30
31
|
autoload :SearchField
|
31
32
|
autoload :Select
|
32
33
|
autoload :StaticField
|
@@ -61,6 +62,7 @@ module RailsBootstrapForm
|
|
61
62
|
include PhoneField
|
62
63
|
include RadioButton
|
63
64
|
include RangeField
|
65
|
+
include RichTextArea
|
64
66
|
include SearchField
|
65
67
|
include Select
|
66
68
|
include StaticField
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: rails_bootstrap_form
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.8.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Harshal LADHE (shivam091)
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-05-
|
11
|
+
date: 2023-05-26 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: generator_spec
|
@@ -94,6 +94,7 @@ files:
|
|
94
94
|
- demo/app/views/users/_form.html.erb
|
95
95
|
- demo/app/views/users/_form_without_bootstrap_helpers.html.erb
|
96
96
|
- demo/app/views/users/_horizontal_form.html.erb
|
97
|
+
- demo/app/views/users/_inline_form.html.erb
|
97
98
|
- demo/app/views/users/_vertical_form.html.erb
|
98
99
|
- demo/app/views/users/edit.html.erb
|
99
100
|
- demo/app/views/users/index.html.erb
|
@@ -173,6 +174,7 @@ files:
|
|
173
174
|
- lib/rails_bootstrap_form/inputs/phone_field.rb
|
174
175
|
- lib/rails_bootstrap_form/inputs/radio_button.rb
|
175
176
|
- lib/rails_bootstrap_form/inputs/range_field.rb
|
177
|
+
- lib/rails_bootstrap_form/inputs/rich_text_area.rb
|
176
178
|
- lib/rails_bootstrap_form/inputs/search_field.rb
|
177
179
|
- lib/rails_bootstrap_form/inputs/select.rb
|
178
180
|
- lib/rails_bootstrap_form/inputs/static_field.rb
|