simple_form 3.0.1 → 3.1.1
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/CHANGELOG.md +75 -25
- data/MIT-LICENSE +1 -1
- data/README.md +251 -93
- data/lib/generators/simple_form/install_generator.rb +3 -3
- data/lib/generators/simple_form/templates/README +3 -4
- data/lib/generators/simple_form/templates/config/initializers/simple_form.rb +29 -9
- data/lib/generators/simple_form/templates/config/initializers/simple_form_bootstrap.rb +128 -24
- data/lib/generators/simple_form/templates/config/initializers/simple_form_foundation.rb +86 -5
- data/lib/generators/simple_form/templates/config/locales/simple_form.en.yml +7 -2
- data/lib/simple_form/action_view_extensions/builder.rb +1 -0
- data/lib/simple_form/action_view_extensions/form_helper.rb +6 -2
- data/lib/simple_form/components/errors.rb +28 -2
- data/lib/simple_form/components/hints.rb +2 -2
- data/lib/simple_form/components/html5.rb +5 -5
- data/lib/simple_form/components/label_input.rb +20 -2
- data/lib/simple_form/components/labels.rb +11 -7
- data/lib/simple_form/components/maxlength.rb +1 -1
- data/lib/simple_form/components/min_max.rb +1 -1
- data/lib/simple_form/components/pattern.rb +1 -1
- data/lib/simple_form/components/placeholders.rb +2 -2
- data/lib/simple_form/components/readonly.rb +1 -1
- data/lib/simple_form/form_builder.rb +127 -76
- data/lib/simple_form/helpers.rb +5 -5
- data/lib/simple_form/inputs/base.rb +33 -11
- data/lib/simple_form/inputs/block_input.rb +1 -1
- data/lib/simple_form/inputs/boolean_input.rb +28 -15
- data/lib/simple_form/inputs/collection_input.rb +30 -9
- data/lib/simple_form/inputs/collection_radio_buttons_input.rb +7 -12
- data/lib/simple_form/inputs/collection_select_input.rb +4 -2
- data/lib/simple_form/inputs/date_time_input.rb +23 -9
- data/lib/simple_form/inputs/file_input.rb +4 -2
- data/lib/simple_form/inputs/grouped_collection_select_input.rb +15 -3
- data/lib/simple_form/inputs/hidden_input.rb +4 -2
- data/lib/simple_form/inputs/numeric_input.rb +5 -4
- data/lib/simple_form/inputs/password_input.rb +4 -2
- data/lib/simple_form/inputs/priority_input.rb +4 -2
- data/lib/simple_form/inputs/range_input.rb +1 -1
- data/lib/simple_form/inputs/string_input.rb +4 -2
- data/lib/simple_form/inputs/text_input.rb +4 -2
- data/lib/simple_form/railtie.rb +7 -0
- data/lib/simple_form/tags.rb +6 -0
- data/lib/simple_form/version.rb +1 -1
- data/lib/simple_form/wrappers/builder.rb +6 -6
- data/lib/simple_form/wrappers/leaf.rb +28 -0
- data/lib/simple_form/wrappers/many.rb +6 -6
- data/lib/simple_form/wrappers/root.rb +1 -1
- data/lib/simple_form/wrappers/single.rb +5 -3
- data/lib/simple_form/wrappers.rb +1 -0
- data/lib/simple_form.rb +59 -8
- data/test/action_view_extensions/builder_test.rb +36 -36
- data/test/action_view_extensions/form_helper_test.rb +33 -14
- data/test/components/label_test.rb +37 -37
- data/test/form_builder/association_test.rb +52 -35
- data/test/form_builder/button_test.rb +10 -10
- data/test/form_builder/error_notification_test.rb +1 -1
- data/test/form_builder/error_test.rb +144 -24
- data/test/form_builder/general_test.rb +107 -71
- data/test/form_builder/hint_test.rb +18 -18
- data/test/form_builder/input_field_test.rb +86 -56
- data/test/form_builder/label_test.rb +55 -13
- data/test/form_builder/wrapper_test.rb +136 -20
- data/test/generators/simple_form_generator_test.rb +4 -4
- data/test/inputs/boolean_input_test.rb +62 -6
- data/test/inputs/collection_check_boxes_input_test.rb +85 -17
- data/test/inputs/collection_radio_buttons_input_test.rb +134 -36
- data/test/inputs/collection_select_input_test.rb +146 -41
- data/test/inputs/datetime_input_test.rb +120 -48
- data/test/inputs/disabled_test.rb +15 -15
- data/test/inputs/discovery_test.rb +56 -6
- data/test/inputs/file_input_test.rb +2 -2
- data/test/inputs/general_test.rb +20 -20
- data/test/inputs/grouped_collection_select_input_test.rb +44 -8
- data/test/inputs/hidden_input_test.rb +4 -4
- data/test/inputs/numeric_input_test.rb +43 -43
- data/test/inputs/priority_input_test.rb +13 -13
- data/test/inputs/readonly_test.rb +19 -19
- data/test/inputs/required_test.rb +25 -13
- data/test/inputs/string_input_test.rb +50 -30
- data/test/inputs/text_input_test.rb +14 -7
- data/test/simple_form_test.rb +8 -0
- data/test/support/discovery_inputs.rb +32 -2
- data/test/support/misc_helpers.rb +84 -5
- data/test/support/models.rb +60 -24
- data/test/test_helper.rb +11 -1
- metadata +22 -33
data/README.md
CHANGED
|
@@ -2,10 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
By [Plataformatec](http://plataformatec.com.br/).
|
|
4
4
|
|
|
5
|
-
[](http://badge.fury.io/rb/simple_form)
|
|
6
|
-
[](http://travis-ci.org/plataformatec/simple_form)
|
|
7
|
-
[](https://codeclimate.com/github/plataformatec/simple_form)
|
|
8
|
-
|
|
9
5
|
Rails forms made easy.
|
|
10
6
|
|
|
11
7
|
**Simple Form** aims to be as flexible as possible while helping you with powerful components to create
|
|
@@ -14,7 +10,7 @@ you find the better design for your eyes. Most of the DSL was inherited from For
|
|
|
14
10
|
which we are thankful for and should make you feel right at home.
|
|
15
11
|
|
|
16
12
|
INFO: This README is [also available in a friendly navigable format](http://simple-form.plataformatec.com.br/)
|
|
17
|
-
and refers to **Simple Form** 3.
|
|
13
|
+
and refers to **Simple Form** 3.1. For older releases, check the related branch for your version.
|
|
18
14
|
|
|
19
15
|
## Installation
|
|
20
16
|
|
|
@@ -36,34 +32,25 @@ Run the generator:
|
|
|
36
32
|
rails generate simple_form:install
|
|
37
33
|
```
|
|
38
34
|
|
|
39
|
-
|
|
40
|
-
[country_select gem](https://rubygems.org/gems/country_select), add it to your Gemfile:
|
|
41
|
-
|
|
42
|
-
```ruby
|
|
43
|
-
gem 'country_select'
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
### Twitter Bootstrap
|
|
35
|
+
### Bootstrap
|
|
47
36
|
|
|
48
|
-
**Simple Form** can be easily integrated to the [
|
|
37
|
+
**Simple Form** can be easily integrated to the [Bootstrap](http://getbootstrap.com/).
|
|
49
38
|
To do that you have to use the `bootstrap` option in the install generator, like this:
|
|
50
39
|
|
|
51
40
|
```console
|
|
52
41
|
rails generate simple_form:install --bootstrap
|
|
53
42
|
```
|
|
54
43
|
|
|
55
|
-
You have to be sure that you added a copy of the [
|
|
44
|
+
You have to be sure that you added a copy of the [Bootstrap](http://getbootstrap.com/)
|
|
56
45
|
assets on your application.
|
|
57
46
|
|
|
58
47
|
For more information see the generator output, our
|
|
59
48
|
[example application code](https://github.com/rafaelfranca/simple_form-bootstrap) and
|
|
60
49
|
[the live example app](http://simple-form-bootstrap.plataformatec.com.br/).
|
|
61
50
|
|
|
62
|
-
|
|
51
|
+
### Zurb Foundation 5
|
|
63
52
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
To generate wrappers that are compatible with [Zurb Foundation 3](http://foundation.zurb.com/), pass
|
|
53
|
+
To generate wrappers that are compatible with [Zurb Foundation 5](http://foundation.zurb.com/), pass
|
|
67
54
|
the `foundation` option to the generator, like this:
|
|
68
55
|
|
|
69
56
|
```console
|
|
@@ -74,14 +61,30 @@ Please note that the Foundation wrapper does not support the `:hint` option by d
|
|
|
74
61
|
enable hints, please uncomment the appropriate line in `config/initializers/simple_form_foundation.rb`.
|
|
75
62
|
You will need to provide your own CSS styles for hints.
|
|
76
63
|
|
|
77
|
-
Please see the [instructions on how to install Foundation in a Rails app](http://foundation.zurb.com/
|
|
64
|
+
Please see the [instructions on how to install Foundation in a Rails app](http://foundation.zurb.com/docs/applications.html).
|
|
65
|
+
|
|
66
|
+
### Country Select
|
|
67
|
+
|
|
68
|
+
If you want to use the country select, you will need the
|
|
69
|
+
[country_select gem](https://rubygems.org/gems/country_select), add it to your Gemfile:
|
|
70
|
+
|
|
71
|
+
```ruby
|
|
72
|
+
gem 'country_select'
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
If you don't want to use the gem you can easily override this behaviour by mapping the
|
|
76
|
+
country inputs to something else, with a line like this in your `simple_form.rb` initializer:
|
|
77
|
+
|
|
78
|
+
```ruby
|
|
79
|
+
config.input_mappings = { /country/ => :string }
|
|
80
|
+
```
|
|
78
81
|
|
|
79
82
|
## Usage
|
|
80
83
|
|
|
81
84
|
**Simple Form** was designed to be customized as you need to. Basically it's a stack of components that
|
|
82
85
|
are invoked to create a complete html input for you, which by default contains label, hints, errors
|
|
83
86
|
and the input itself. It does not aim to create a lot of different logic from the default Rails
|
|
84
|
-
form helpers, as they do a great
|
|
87
|
+
form helpers, as they do a great job by themselves. Instead, **Simple Form** acts as a DSL and just
|
|
85
88
|
maps your input type (retrieved from the column definition in the database) to a specific helper method.
|
|
86
89
|
|
|
87
90
|
To start using **Simple Form** you just have to use the helper it provides:
|
|
@@ -97,12 +100,12 @@ To start using **Simple Form** you just have to use the helper it provides:
|
|
|
97
100
|
This will generate an entire form with labels for user name and password as well, and render errors
|
|
98
101
|
by default when you render the form with invalid data (after submitting for example).
|
|
99
102
|
|
|
100
|
-
You can overwrite the default label by passing it to the input method. You can also add a hint
|
|
101
|
-
even a placeholder. For boolean inputs, you can add an inline label as well:
|
|
103
|
+
You can overwrite the default label by passing it to the input method. You can also add a hint,
|
|
104
|
+
an error, or even a placeholder. For boolean inputs, you can add an inline label as well:
|
|
102
105
|
|
|
103
106
|
```erb
|
|
104
107
|
<%= simple_form_for @user do |f| %>
|
|
105
|
-
<%= f.input :username, label: 'Your username please' %>
|
|
108
|
+
<%= f.input :username, label: 'Your username please', error: 'Username is mandatory, please specify one' %>
|
|
106
109
|
<%= f.input :password, hint: 'No special characters.' %>
|
|
107
110
|
<%= f.input :email, placeholder: 'user@domain.com' %>
|
|
108
111
|
<%= f.input :remember_me, inline_label: 'Yes, remember me' %>
|
|
@@ -176,6 +179,13 @@ And of course, the `required` property of any input can be overwritten as needed
|
|
|
176
179
|
<% end %>
|
|
177
180
|
```
|
|
178
181
|
|
|
182
|
+
By default, **Simple Form** will look at the column type in the database and use an
|
|
183
|
+
appropriate input for the column. For example, a column created with type
|
|
184
|
+
`:text` in the database will use a `textarea` input by default. See the section
|
|
185
|
+
[Available input types and defaults for each column
|
|
186
|
+
type](https://github.com/plataformatec/simple_form#available-input-types-and-defaults-for-each-column-type)
|
|
187
|
+
for a complete list of defaults.
|
|
188
|
+
|
|
179
189
|
**Simple Form** also lets you overwrite the default input type it creates:
|
|
180
190
|
|
|
181
191
|
```erb
|
|
@@ -189,11 +199,11 @@ And of course, the `required` property of any input can be overwritten as needed
|
|
|
189
199
|
```
|
|
190
200
|
|
|
191
201
|
So instead of a checkbox for the *accepts* attribute, you'll have a pair of radio buttons with yes/no
|
|
192
|
-
labels and a
|
|
202
|
+
labels and a textarea instead of a text field for the description. You can also render boolean
|
|
193
203
|
attributes using `as: :select` to show a dropdown.
|
|
194
204
|
|
|
195
205
|
It is also possible to give the `:disabled` option to **Simple Form**, and it'll automatically mark
|
|
196
|
-
the wrapper as disabled with a
|
|
206
|
+
the wrapper as disabled with a CSS class, so you can style labels, hints and other components inside
|
|
197
207
|
the wrapper as well:
|
|
198
208
|
|
|
199
209
|
```erb
|
|
@@ -210,6 +220,7 @@ the wrapper as well:
|
|
|
210
220
|
<%= f.input :date_of_birth, as: :date, start_year: Date.today.year - 90,
|
|
211
221
|
end_year: Date.today.year - 12, discard_day: true,
|
|
212
222
|
order: [:month, :year] %>
|
|
223
|
+
<%= f.input :accepts, as: :boolean, checked_value: true, unchecked_value: false %>
|
|
213
224
|
<%= f.button :submit %>
|
|
214
225
|
<% end %>
|
|
215
226
|
```
|
|
@@ -241,9 +252,41 @@ Example:
|
|
|
241
252
|
```ruby
|
|
242
253
|
simple_form_for @user do |f|
|
|
243
254
|
f.input_field :name
|
|
255
|
+
f.input_field :remember_me, as: :boolean
|
|
244
256
|
end
|
|
245
257
|
```
|
|
246
258
|
|
|
259
|
+
```html
|
|
260
|
+
<form>
|
|
261
|
+
...
|
|
262
|
+
<input class="string required" id="user_name" maxlength="255" name="user[name]" size="255" type="text">
|
|
263
|
+
<input name="user[remember_me]" type="hidden" value="0">
|
|
264
|
+
<label class="checkbox">
|
|
265
|
+
<input class="boolean optional" id="user_published" name="user[remember_me]" type="checkbox" value="1">
|
|
266
|
+
</label>
|
|
267
|
+
</form>
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
For check boxes and radio buttons you can remove the label changing `boolean_style` from default value `:nested` to `:inline`.
|
|
271
|
+
|
|
272
|
+
Example:
|
|
273
|
+
|
|
274
|
+
```ruby
|
|
275
|
+
simple_form_for @user do |f|
|
|
276
|
+
f.input_field :name
|
|
277
|
+
f.input_field :remember_me, as: :boolean, boolean_style: :inline
|
|
278
|
+
end
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
```html
|
|
282
|
+
<form>
|
|
283
|
+
...
|
|
284
|
+
<input class="string required" id="user_name" maxlength="255" name="user[name]" size="255" type="text">
|
|
285
|
+
<input name="user[remember_me]" type="hidden" value="0">
|
|
286
|
+
<input class="boolean optional" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
|
|
287
|
+
</form>
|
|
288
|
+
```
|
|
289
|
+
|
|
247
290
|
Produces:
|
|
248
291
|
|
|
249
292
|
```html
|
|
@@ -269,14 +312,14 @@ overriding the `:collection` option:
|
|
|
269
312
|
Collections can be arrays or ranges, and when a `:collection` is given the `:select` input will be
|
|
270
313
|
rendered by default, so we don't need to pass the `as: :select` option. Other types of collection
|
|
271
314
|
are `:radio_buttons` and `:check_boxes`. Those are added by **Simple Form** to Rails set of form
|
|
272
|
-
helpers (read Extra Helpers
|
|
315
|
+
helpers (read Extra Helpers section below for more information).
|
|
273
316
|
|
|
274
317
|
Collection inputs accept two other options beside collections:
|
|
275
318
|
|
|
276
|
-
*
|
|
319
|
+
* *label_method* => the label method to be applied to the collection to retrieve the label (use this
|
|
277
320
|
instead of the `text_method` option in `collection_select`)
|
|
278
321
|
|
|
279
|
-
*
|
|
322
|
+
* *value_method* => the value method to be applied to the collection to retrieve the value
|
|
280
323
|
|
|
281
324
|
Those methods are useful to manipulate the given collection. Both of these options also accept
|
|
282
325
|
lambda/procs in case you want to calculate the value or label in a special way eg. custom
|
|
@@ -284,8 +327,9 @@ translation. All other options given are sent straight to the underlying helper.
|
|
|
284
327
|
can give prompt as:
|
|
285
328
|
|
|
286
329
|
```ruby
|
|
287
|
-
f.input :age, collection: 18..60, prompt: "Select your age"
|
|
330
|
+
f.input :age, collection: 18..60, prompt: "Select your age", selected: 21
|
|
288
331
|
```
|
|
332
|
+
Extra options are passed into helper [`collection_select`](http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_select).
|
|
289
333
|
|
|
290
334
|
It is also possible to create grouped collection selects, that will use the html *optgroup* tags, like this:
|
|
291
335
|
|
|
@@ -296,24 +340,24 @@ f.input :country_id, collection: @continents, as: :grouped_select, group_method:
|
|
|
296
340
|
Grouped collection inputs accept the same `:label_method` and `:value_method` options, which will be
|
|
297
341
|
used to retrieve label/value attributes for the `option` tags. Besides that, you can give:
|
|
298
342
|
|
|
299
|
-
*
|
|
343
|
+
* *group_method* => the method to be called on the given collection to generate the options for
|
|
300
344
|
each group (required)
|
|
301
345
|
|
|
302
|
-
*
|
|
346
|
+
* *group_label_method* => the label method to be applied on the given collection to retrieve the label
|
|
303
347
|
for the _optgroup_ (**Simple Form** will attempt to guess the best one the same way it does with
|
|
304
348
|
`:label_method`)
|
|
305
349
|
|
|
306
350
|
### Priority
|
|
307
351
|
|
|
308
352
|
**Simple Form** also supports `:time_zone` and `:country`. When using such helpers, you can give
|
|
309
|
-
`:priority` as option to select which time zones and/or countries should be given higher priority:
|
|
353
|
+
`:priority` as an option to select which time zones and/or countries should be given higher priority:
|
|
310
354
|
|
|
311
355
|
```ruby
|
|
312
356
|
f.input :residence_country, priority: [ "Brazil" ]
|
|
313
357
|
f.input :time_zone, priority: /US/
|
|
314
358
|
```
|
|
315
359
|
|
|
316
|
-
Those values can also be configured with a default value to be used site
|
|
360
|
+
Those values can also be configured with a default value to be used on the site through the
|
|
317
361
|
`SimpleForm.country_priority` and `SimpleForm.time_zone_priority` helpers.
|
|
318
362
|
|
|
319
363
|
Note: While using `country_select` if you want to restrict to only a subset of countries for a specific
|
|
@@ -325,8 +369,8 @@ f.input :shipping_country, priority: [ "Brazil" ], collection: [ "Australia", "B
|
|
|
325
369
|
|
|
326
370
|
### Associations
|
|
327
371
|
|
|
328
|
-
To deal with associations, **Simple Form** can generate select inputs, a series of radios buttons or
|
|
329
|
-
Lets see how it works: imagine you have a user model that belongs to a company and has_and_belongs_to_many
|
|
372
|
+
To deal with associations, **Simple Form** can generate select inputs, a series of radios buttons or checkboxes.
|
|
373
|
+
Lets see how it works: imagine you have a user model that belongs to a company and `has_and_belongs_to_many`
|
|
330
374
|
roles. The structure would be something like:
|
|
331
375
|
|
|
332
376
|
```ruby
|
|
@@ -357,7 +401,7 @@ Now we have the user form:
|
|
|
357
401
|
|
|
358
402
|
Simple enough, right? This is going to render a `:select` input for choosing the `:company`, and another
|
|
359
403
|
`:select` input with `:multiple` option for the `:roles`. You can, of course, change it to use radio
|
|
360
|
-
buttons and
|
|
404
|
+
buttons and checkboxes as well:
|
|
361
405
|
|
|
362
406
|
```ruby
|
|
363
407
|
f.association :company, as: :radio_buttons
|
|
@@ -369,7 +413,7 @@ The association helper just invokes `input` under the hood, so all options avail
|
|
|
369
413
|
the collection by hand, all together with the prompt:
|
|
370
414
|
|
|
371
415
|
```ruby
|
|
372
|
-
f.association :company, collection: Company.active.
|
|
416
|
+
f.association :company, collection: Company.active.order(:name), prompt: "Choose a Company"
|
|
373
417
|
```
|
|
374
418
|
|
|
375
419
|
In case you want to declare different labels and values:
|
|
@@ -394,6 +438,22 @@ All web forms need buttons, right? **Simple Form** wraps them in the DSL, acting
|
|
|
394
438
|
|
|
395
439
|
The above will simply call submit. You choose to use it or not, it's just a question of taste.
|
|
396
440
|
|
|
441
|
+
The button method also accepts optional parameters, that are delegated to the underlying submit call:
|
|
442
|
+
|
|
443
|
+
```erb
|
|
444
|
+
<%= f.button :submit, "Custom Button Text", class: "my-button" %>
|
|
445
|
+
```
|
|
446
|
+
|
|
447
|
+
To create a `<button>` element, use the following syntax:
|
|
448
|
+
|
|
449
|
+
```erb
|
|
450
|
+
<%= f.button :button, "Custom Button Text" %>
|
|
451
|
+
|
|
452
|
+
<%= f.button :button do %>
|
|
453
|
+
Custom Button Text
|
|
454
|
+
<% end %>
|
|
455
|
+
```
|
|
456
|
+
|
|
397
457
|
### Wrapping Rails Form Helpers
|
|
398
458
|
|
|
399
459
|
Say you wanted to use a rails form helper but still wrap it in **Simple Form** goodness? You can, by
|
|
@@ -446,7 +506,7 @@ end
|
|
|
446
506
|
|
|
447
507
|
#### Collection Check Boxes
|
|
448
508
|
|
|
449
|
-
Creates a collection of
|
|
509
|
+
Creates a collection of checkboxes with labels associated (same API as `collection_select`):
|
|
450
510
|
|
|
451
511
|
```ruby
|
|
452
512
|
form_for @user do |f|
|
|
@@ -471,36 +531,37 @@ form_for @user do |f|
|
|
|
471
531
|
end
|
|
472
532
|
```
|
|
473
533
|
|
|
474
|
-
##
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
534
|
+
## Available input types and defaults for each column type
|
|
535
|
+
|
|
536
|
+
The following table shows the html element you will get for each attribute
|
|
537
|
+
according to its database definition. These defaults can be changed by
|
|
538
|
+
specifying the helper method in the column `Mapping` as the `as:` option.
|
|
539
|
+
|
|
540
|
+
Mapping | Generated HTML Element | Database Column Type
|
|
541
|
+
--------------- |:-------------------------------------|:--------------------
|
|
542
|
+
`boolean` | `input[type=checkbox]` | `boolean`
|
|
543
|
+
`string` | `input[type=text]` | `string`
|
|
544
|
+
`email` | `input[type=email]` | `string` with `name =~ /email/`
|
|
545
|
+
`url` | `input[type=url]` | `string` with `name =~ /url/`
|
|
546
|
+
`tel` | `input[type=tel]` | `string` with `name =~ /phone/`
|
|
547
|
+
`password` | `input[type=password]` | `string` with `name =~ /password/`
|
|
548
|
+
`search` | `input[type=search]` | -
|
|
549
|
+
`uuid` | `input[type=text]` | `uuid`
|
|
550
|
+
`text` | `textarea` | `text`
|
|
551
|
+
`file` | `input[type=file]` | `string` responding to file methods
|
|
552
|
+
`hidden` | `input[type=hidden]` | -
|
|
553
|
+
`integer` | `input[type=number]` | `integer`
|
|
554
|
+
`float` | `input[type=number]` | `float`
|
|
555
|
+
`decimal` | `input[type=number]` | `decimal`
|
|
556
|
+
`range` | `input[type=range]` | -
|
|
557
|
+
`datetime` | `datetime select` | `datetime/timestamp`
|
|
558
|
+
`date` | `date select` | `date`
|
|
559
|
+
`time` | `time select` | `time`
|
|
560
|
+
`select` | `select` | `belongs_to`/`has_many`/`has_and_belongs_to_many` associations
|
|
561
|
+
`radio_buttons` | collection of `input[type=radio]` | `belongs_to` associations
|
|
562
|
+
`check_boxes` | collection of `input[type=checkbox]` | `has_many`/`has_and_belongs_to_many` associations
|
|
563
|
+
`country` | `select` (countries as options) | `string` with `name =~ /country/`
|
|
564
|
+
`time_zone` | `select` (timezones as options) | `string` with `name =~ /time_zone/`
|
|
504
565
|
|
|
505
566
|
## Custom inputs
|
|
506
567
|
|
|
@@ -510,8 +571,10 @@ that extends the string one, you just need to add this file:
|
|
|
510
571
|
```ruby
|
|
511
572
|
# app/inputs/currency_input.rb
|
|
512
573
|
class CurrencyInput < SimpleForm::Inputs::Base
|
|
513
|
-
def input
|
|
514
|
-
|
|
574
|
+
def input(wrapper_options)
|
|
575
|
+
merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
|
|
576
|
+
|
|
577
|
+
"$ #{@builder.text_field(attribute_name, merged_input_options)}".html_safe
|
|
515
578
|
end
|
|
516
579
|
end
|
|
517
580
|
```
|
|
@@ -521,6 +584,7 @@ And use it in your views:
|
|
|
521
584
|
```ruby
|
|
522
585
|
f.input :money, as: :currency
|
|
523
586
|
```
|
|
587
|
+
Note, you may have to create the `app/inputs/` directory and restart your webserver.
|
|
524
588
|
|
|
525
589
|
You can also redefine existing **Simple Form** inputs by creating a new class with the same name. For
|
|
526
590
|
instance, if you want to wrap date/time/datetime in a div, you can do:
|
|
@@ -528,7 +592,7 @@ instance, if you want to wrap date/time/datetime in a div, you can do:
|
|
|
528
592
|
```ruby
|
|
529
593
|
# app/inputs/date_time_input.rb
|
|
530
594
|
class DateTimeInput < SimpleForm::Inputs::DateTimeInput
|
|
531
|
-
def input
|
|
595
|
+
def input(wrapper_options)
|
|
532
596
|
template.content_tag(:div, super)
|
|
533
597
|
end
|
|
534
598
|
end
|
|
@@ -545,6 +609,28 @@ class CollectionSelectInput < SimpleForm::Inputs::CollectionSelectInput
|
|
|
545
609
|
end
|
|
546
610
|
```
|
|
547
611
|
|
|
612
|
+
If needed, you can namespace your custom inputs in a module and tell **Simple Form** to look for
|
|
613
|
+
their definitions in this module. This can avoid conflicts with other form libraries (like Formtastic) that look up
|
|
614
|
+
the global context to find inputs definition too.
|
|
615
|
+
|
|
616
|
+
```ruby
|
|
617
|
+
# app/inputs/custom_inputs/numeric_input
|
|
618
|
+
module CustomInputs
|
|
619
|
+
class NumericInput < SimpleForm::Inputs::NumericInput
|
|
620
|
+
def input_html_classes
|
|
621
|
+
super.push('no-spinner')
|
|
622
|
+
end
|
|
623
|
+
end
|
|
624
|
+
end
|
|
625
|
+
```
|
|
626
|
+
|
|
627
|
+
And in the **SimpleForm** initializer :
|
|
628
|
+
|
|
629
|
+
```ruby
|
|
630
|
+
# config/simple_form.rb
|
|
631
|
+
config.custom_inputs_namespaces << "CustomInputs"
|
|
632
|
+
```
|
|
633
|
+
|
|
548
634
|
## Custom form builder
|
|
549
635
|
|
|
550
636
|
You can create a custom form builder that uses **Simple Form**.
|
|
@@ -563,15 +649,14 @@ Create a form builder class that inherits from `SimpleForm::FormBuilder`.
|
|
|
563
649
|
```ruby
|
|
564
650
|
class CustomFormBuilder < SimpleForm::FormBuilder
|
|
565
651
|
def input(attribute_name, options = {}, &block)
|
|
566
|
-
options
|
|
567
|
-
super
|
|
652
|
+
super(attribute_name, options.merge(label: false), &block)
|
|
568
653
|
end
|
|
569
654
|
end
|
|
570
655
|
```
|
|
571
656
|
|
|
572
657
|
## I18n
|
|
573
658
|
|
|
574
|
-
**Simple Form** uses all power of I18n API to lookup labels, hints and placeholders. To customize your
|
|
659
|
+
**Simple Form** uses all power of I18n API to lookup labels, hints, prompts and placeholders. To customize your
|
|
575
660
|
forms you can create a locale file like this:
|
|
576
661
|
|
|
577
662
|
```yaml
|
|
@@ -589,12 +674,18 @@ en:
|
|
|
589
674
|
user:
|
|
590
675
|
username: 'Your username'
|
|
591
676
|
password: '****'
|
|
677
|
+
include_blanks:
|
|
678
|
+
user:
|
|
679
|
+
age: 'Rather not say'
|
|
680
|
+
prompts:
|
|
681
|
+
user:
|
|
682
|
+
gender: 'Select your gender'
|
|
592
683
|
```
|
|
593
684
|
|
|
594
685
|
And your forms will use this information to render the components for you.
|
|
595
686
|
|
|
596
|
-
**Simple Form** also lets you be more specific, separating lookups through actions
|
|
597
|
-
|
|
687
|
+
**Simple Form** also lets you be more specific, separating lookups through actions.
|
|
688
|
+
Let's say you want a different label for new and edit actions, the locale file would
|
|
598
689
|
be something like:
|
|
599
690
|
|
|
600
691
|
```yaml
|
|
@@ -633,13 +724,19 @@ en:
|
|
|
633
724
|
```
|
|
634
725
|
|
|
635
726
|
**Simple Form** will always look for a default attribute translation under the "defaults" key if no
|
|
636
|
-
specific is found inside the model key.
|
|
637
|
-
the new syntax, just move "labels.#{attribute}" to "labels.defaults.#{attribute}".
|
|
727
|
+
specific is found inside the model key.
|
|
638
728
|
|
|
639
|
-
In addition, **Simple Form** will fallback to default human_attribute_name from Rails when no other
|
|
729
|
+
In addition, **Simple Form** will fallback to default `human_attribute_name` from Rails when no other
|
|
640
730
|
translation is found for labels. Finally, you can also overwrite any label, hint or placeholder
|
|
641
731
|
inside your view, just by passing the option manually. This way the I18n lookup will be skipped.
|
|
642
732
|
|
|
733
|
+
For `:prompt` and `:include_blank` the I18n lookup is optional and to enable it is necessary to pass
|
|
734
|
+
`:translate` as value.
|
|
735
|
+
|
|
736
|
+
```ruby
|
|
737
|
+
f.input :gender, prompt: :translate
|
|
738
|
+
```
|
|
739
|
+
|
|
643
740
|
**Simple Form** also has support for translating options in collection helpers. For instance, given a
|
|
644
741
|
User with a `:gender` attribute, you might want to create a select box showing translated labels
|
|
645
742
|
that would post either `male` or `female` as value. With **Simple Form** you could create an input
|
|
@@ -711,6 +808,22 @@ object itself. Thus, similarly, if a form for an `Admin::User` object is defined
|
|
|
711
808
|
`simple_form_for @admin_user, as: :some_user`, **Simple Form** will look for translations
|
|
712
809
|
under `some_user` instead of `admin_user`.
|
|
713
810
|
|
|
811
|
+
When translate `simple_fields_for` attributes be sure to use the same name you pass to it, e.g. `simple_fields_for :posts` should be placed under `posts` not `post`:
|
|
812
|
+
|
|
813
|
+
```yaml
|
|
814
|
+
en:
|
|
815
|
+
simple_form:
|
|
816
|
+
labels:
|
|
817
|
+
posts:
|
|
818
|
+
title: 'Post title'
|
|
819
|
+
hints:
|
|
820
|
+
posts:
|
|
821
|
+
title: 'A good title'
|
|
822
|
+
placeholders:
|
|
823
|
+
posts:
|
|
824
|
+
title: 'Once upon a time...'
|
|
825
|
+
```
|
|
826
|
+
|
|
714
827
|
## Configuration
|
|
715
828
|
|
|
716
829
|
**Simple Form** has several configuration options. You can read and change them in the initializer
|
|
@@ -770,13 +883,23 @@ end
|
|
|
770
883
|
|
|
771
884
|
this will wrap the hint and error components within a `div` tag using the class `'separator'`.
|
|
772
885
|
|
|
886
|
+
You can customize _Form components_ passing options to them:
|
|
887
|
+
|
|
888
|
+
```ruby
|
|
889
|
+
config.wrappers do |b|
|
|
890
|
+
b.use :label_input, class: 'label-input-class'
|
|
891
|
+
end
|
|
892
|
+
```
|
|
893
|
+
|
|
894
|
+
This you set the input and label class to `'label-input-class'`.
|
|
895
|
+
|
|
773
896
|
If you want to customize the custom _Form components_ on demand you can give it a name like this:
|
|
774
897
|
|
|
775
898
|
```ruby
|
|
776
899
|
config.wrappers do |b|
|
|
777
900
|
b.use :placeholder
|
|
778
901
|
b.use :label_input
|
|
779
|
-
b.wrapper :my_wrapper, tag: :div, class: 'separator' do |component|
|
|
902
|
+
b.wrapper :my_wrapper, tag: :div, class: 'separator', html: { id: 'my_wrapper_id' } do |component|
|
|
780
903
|
component.use :hint, wrap_with: { tag: :span, class: :hint }
|
|
781
904
|
component.use :error, wrap_with: { tag: :span, class: :error }
|
|
782
905
|
end
|
|
@@ -838,6 +961,15 @@ end
|
|
|
838
961
|
By setting it as `optional`, a hint will only be generated when `hint: true` is explicitly used.
|
|
839
962
|
The same for placeholder.
|
|
840
963
|
|
|
964
|
+
It is also possible to give the option `:unless_blank` to the wrapper if you want to render it only
|
|
965
|
+
when the content is present.
|
|
966
|
+
|
|
967
|
+
```ruby
|
|
968
|
+
b.wrapper tag: :span, class: 'hint', unless_blank: true do |component|
|
|
969
|
+
component.optional :hint
|
|
970
|
+
end
|
|
971
|
+
```
|
|
972
|
+
|
|
841
973
|
## HTML 5 Notice
|
|
842
974
|
|
|
843
975
|
By default, **Simple Form** will generate input field types and attributes that are supported in HTML5,
|
|
@@ -850,10 +982,25 @@ required attribute to force a value into an input and will prevent form submissi
|
|
|
850
982
|
Depending on the design of the application this may or may not be desired. In many cases it can
|
|
851
983
|
break existing UI's.
|
|
852
984
|
|
|
853
|
-
It is possible to disable all HTML 5 extensions in **Simple Form**
|
|
985
|
+
It is possible to disable all HTML 5 extensions in **Simple Form** removing the `html5` component
|
|
986
|
+
from the wrapper used to render the inputs.
|
|
987
|
+
|
|
988
|
+
For example, change:
|
|
989
|
+
|
|
990
|
+
```ruby
|
|
991
|
+
config.wrappers tag: :div do |b|
|
|
992
|
+
b.use :html5
|
|
993
|
+
|
|
994
|
+
b.use :label_input
|
|
995
|
+
end
|
|
996
|
+
```
|
|
997
|
+
|
|
998
|
+
To:
|
|
854
999
|
|
|
855
1000
|
```ruby
|
|
856
|
-
|
|
1001
|
+
config.wrappers tag: :div do |b|
|
|
1002
|
+
b.use :label_input
|
|
1003
|
+
end
|
|
857
1004
|
```
|
|
858
1005
|
|
|
859
1006
|
If you want to have all other HTML 5 features, such as the new field types, you can disable only
|
|
@@ -870,14 +1017,23 @@ help you to use some generic javascript validation.
|
|
|
870
1017
|
You can also add `novalidate` to a specific form by setting the option on the form itself:
|
|
871
1018
|
|
|
872
1019
|
```erb
|
|
873
|
-
<%= simple_form_for(resource, html: {novalidate: true}) do |form| %>
|
|
1020
|
+
<%= simple_form_for(resource, html: { novalidate: true }) do |form| %>
|
|
874
1021
|
```
|
|
875
1022
|
|
|
876
|
-
Please notice that
|
|
877
|
-
which is an HTML 5 feature. We believe most of the newest browsers are handling this attribute
|
|
878
|
-
and if they aren't, any plugin you use would take of
|
|
879
|
-
|
|
880
|
-
list in **Simple Form** configuration file.
|
|
1023
|
+
Please notice that none of the configurations above will disable the `placeholder` component,
|
|
1024
|
+
which is an HTML 5 feature. We believe most of the newest browsers are handling this attribute
|
|
1025
|
+
just fine, and if they aren't, any plugin you use would take care of applying the placeholder.
|
|
1026
|
+
In any case, you can disable it if you really want to, by removing the placeholder component
|
|
1027
|
+
from the components list in the **Simple Form** configuration file.
|
|
1028
|
+
|
|
1029
|
+
HTML 5 date / time inputs are not generated by **Simple Form** by default, so using `date`,
|
|
1030
|
+
`time` or `datetime` will all generate select boxes using normal Rails helpers. We believe
|
|
1031
|
+
browsers are not totally ready for these yet, but you can easily opt-in on a per-input basis
|
|
1032
|
+
by passing the html5 option:
|
|
1033
|
+
|
|
1034
|
+
```erb
|
|
1035
|
+
<%= f.input :expires_at, as: :date, html5: true %>
|
|
1036
|
+
```
|
|
881
1037
|
|
|
882
1038
|
## Information
|
|
883
1039
|
|
|
@@ -894,9 +1050,6 @@ You can view the **Simple Form** documentation in RDoc format here:
|
|
|
894
1050
|
|
|
895
1051
|
http://rubydoc.info/github/plataformatec/simple_form/master/frames
|
|
896
1052
|
|
|
897
|
-
If you need to use **Simple Form** with Rails 2.3, you can always run `gem server` from the command line
|
|
898
|
-
after you install the gem to access the old documentation.
|
|
899
|
-
|
|
900
1053
|
### Bug reports
|
|
901
1054
|
|
|
902
1055
|
If you discover any bugs, feel free to create an issue on GitHub. Please add as much information as
|
|
@@ -912,9 +1065,14 @@ https://github.com/plataformatec/simple_form/issues
|
|
|
912
1065
|
* Rafael Mendonça França (https://github.com/rafaelfranca)
|
|
913
1066
|
* Vasiliy Ermolovich (https://github.com/nashby)
|
|
914
1067
|
|
|
1068
|
+
[](http://badge.fury.io/rb/simple_form)
|
|
1069
|
+
[](http://travis-ci.org/plataformatec/simple_form)
|
|
1070
|
+
[](https://codeclimate.com/github/plataformatec/simple_form)
|
|
1071
|
+
[](http://inch-ci.org/github/plataformatec/simple_form)
|
|
1072
|
+
|
|
915
1073
|
## License
|
|
916
1074
|
|
|
917
|
-
MIT License. Copyright 2009-
|
|
1075
|
+
MIT License. Copyright 2009-2015 Plataformatec. http://plataformatec.com.br
|
|
918
1076
|
|
|
919
1077
|
You are not granted rights or licenses to the trademarks of the Plataformatec, including without
|
|
920
1078
|
limitation the Simple Form name or logo.
|
|
@@ -4,12 +4,12 @@ module SimpleForm
|
|
|
4
4
|
desc "Copy SimpleForm default files"
|
|
5
5
|
source_root File.expand_path('../templates', __FILE__)
|
|
6
6
|
class_option :template_engine, desc: 'Template engine to be invoked (erb, haml or slim).'
|
|
7
|
-
class_option :bootstrap, type: :boolean, desc: 'Add the
|
|
8
|
-
class_option :foundation, type: :boolean, desc: 'Add the Zurb Foundation
|
|
7
|
+
class_option :bootstrap, type: :boolean, desc: 'Add the Bootstrap wrappers to the SimpleForm initializer.'
|
|
8
|
+
class_option :foundation, type: :boolean, desc: 'Add the Zurb Foundation 5 wrappers to the SimpleForm initializer.'
|
|
9
9
|
|
|
10
10
|
def info_bootstrap
|
|
11
11
|
return if options.bootstrap? || options.foundation?
|
|
12
|
-
puts "SimpleForm
|
|
12
|
+
puts "SimpleForm 3 supports Bootstrap and Zurb Foundation 5. If you want "\
|
|
13
13
|
"a configuration that is compatible with one of these frameworks, then please " \
|
|
14
14
|
"re-run this generator with --bootstrap or --foundation as an option."
|
|
15
15
|
end
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
===============================================================================
|
|
2
2
|
|
|
3
3
|
Be sure to have a copy of the Bootstrap stylesheet available on your
|
|
4
|
-
application, you can get it on http://
|
|
4
|
+
application, you can get it on http://getbootstrap.com/.
|
|
5
5
|
|
|
6
6
|
Inside your views, use the 'simple_form_for' with one of the Bootstrap form
|
|
7
|
-
classes, '.form-horizontal'
|
|
8
|
-
'.form-vertical', as the following:
|
|
7
|
+
classes, '.form-horizontal' or '.form-inline', as the following:
|
|
9
8
|
|
|
10
|
-
= simple_form_for(@user, html: {class: 'form-horizontal' }) do |form|
|
|
9
|
+
= simple_form_for(@user, html: { class: 'form-horizontal' }) do |form|
|
|
11
10
|
|
|
12
11
|
===============================================================================
|