Select Component API
The form_select component is Vue.js driven child component of the matestack_form component and is used to collect user input.
1
matestack_form my_form_config do
2
form_select key: :status, options: { 'active': 1, 'deactive': 0 }, #...
3
end
Copied!

Parameters

key - required

Defines the key which should be used when posting the form data to the server.

options - required

Can either be an Array or Hash:
Array usage
1
matestack_form my_form_config do
2
form_select key: :status, options: [0, 1]
3
end
Copied!
will render:
1
<select>
2
<option value="0">0</option>
3
<option value="1">1</option>
4
</select>
Copied!
Hash usage
1
matestack_form my_form_config do
2
form_select key: :status, options: { 'active': 1, 'deactive': 0 }
3
end
Copied!
will render:
1
<select>
2
<option value="0">deactive</option>
3
<option value="1">active</option>
4
</select>
Copied!
The hash values will be used as values for the options, the keys as displayed values.
ActiveRecord Enum Mapping
If you want to use ActiveRecord enums as options for your select input, you can use the enum class method:
1
class Conversation < ActiveRecord::Base
2
enum status: { active: 0, archived: 1 }
3
end
Copied!
1
matestack_form my_form_config do
2
form_select key: :status, options: Conversation.statuses
3
end
Copied!

disabled_values

Defines which options (by value) should be disabled. Pass in as Array.
1
matestack_form my_form_config do
2
form_select key: :status, options: [1,2,3], disabled_values: [1, 2]
3
end
Copied!
or
1
matestack_form my_form_config do
2
form_select key: :status, options: { 'active': 1, 'deactive': 0 }, disabled_values: [1]
3
end
Copied!

multiple

If set to true, a native HTML multiple select will be rendered. Selected values will be posted as an Array to the server.

init

Defines the init value of the select input. If mapped to an ActiveRecord model, the init value will be derived automatically from the model instance.
when multiple is set to true
Pass in an Array of init values:
1
matestack_form my_form_config do
2
form_select key: :status, [1,2,3], multiple: true, init: [1,2]
3
end
Copied!
when multiple is set to false/not specified
Pass in an Integer:
1
matestack_form my_form_config do
2
form_select key: :status, [1,2,3], init: 1
3
end
Copied!

placeholder

Defines the placeholder which will be rendered as first, disabled option.

label

Defines the label which will be rendered right before the textarea tag. You can also use the label component in order to create more complex label structures.

Custom Select

If you want to create your own select component, that's easily done since v.1.3.0. Imagine, you want to use select2.js and therefore need to adjust the select rendering and need to initialize the third party library:
  • Create your own Ruby component:
app/matestack/components/my_form_select.rb
1
class Components::MyFormSelect < Matestack::Ui::VueJs::Components::Form::Select
2
3
vue_name "my-form-select"
4
5
# optionally add some data here, which will be accessible within your Vue.js component
6
def vue_props
7
{
8
foo: "bar"
9
}
10
end
11
12
def response
13
# exactly one root element is required since this is a Vue.js component template
14
div do
15
label text: "my select input"
16
select select_attributes.merge(class: "select2") do
17
render_options
18
end
19
render_errors
20
end
21
end
22
23
end
Copied!
  • Create the corresponding Vue.js component:
Generic code:
1
const myFormSelect = {
2
mixins: [MatestackUiVueJs.componentMixin, MatestackUiVueJs.formSelectMixin],
3
template: MatestackUiVueJs.componentHelpers.inlineTemplate,
4
data() {
5
return {};
6
},
7
methods: {
8
afterInitialize: function(value){
9
// optional: if you need to modify the initial value
10
// use this.setValue(xyz) in order to change the value
11
// this method can be used in other methods or mounted hook of this component as well!
12
this.setValue(xyz)
13
}
14
},
15
mounted: function(){
16
// use/initialize any third party library here
17
// you can access the default initial value via this.componentConfig["init_value"]
18
// if you need to, you can access your own component config data which added
19
// within the prepare method of the corresponding Ruby class
20
// this.props["foo"] would be "bar" in this case
21
}
22
}
23
export default myFormSelect
24
25
// and register in your application js file like:
26
appInstance.component('my-form-select', myFormSelect) // register at appInstance
Copied!
In order to support the select2.js library, you would do something like this:
app/matestack/componenst/my_form_select.js
1
const myFormSelect = {
2
mixins: [MatestackUiVueJs.componentMixin, MatestackUiVueJs.formSelectMixin],
3
template: MatestackUiVueJs.componentHelpers.inlineTemplate,
4
data() {
5
return {};
6
},
7
methods: {
8
afterInitialize: function(value){
9
$('.select2').val(value).trigger("change");
10
}
11
},
12
mounted: function(){
13
const self = this;
14
//activate
15
$('.select2').select2();
16
17
//handle change event
18
$('.select2').on('select2:select', function (e) {
19
self.setValue(e.params.data.id)
20
});
21
}
22
}
23
export default myFormSelect
24
25
// and register in your application js file like:
26
appInstance.component('my-form-select', myFormSelect) // register at appInstance
Copied!
  • Don't forget to require and register the custom component JavaScript according to your JS setup!
  • Finally, use it within a matestack_form:
1
matestack_form some_form_config do
2
Components::MyFormSelect.call(key: :foo, options: [1,2,3])
3
end
Copied!