matestack_form my_form_config do form_select key::status,options:Conversation.statusesend
disabled_values
Defines which options (by value) should be disabled. Pass in as Array.
matestack_form my_form_config do form_select key::status,options: [1,2,3],disabled_values: [1,2]end
or
matestack_form my_form_config do form_select key::status,options: { 'active':1,'deactive':0 },disabled_values: [1]end
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:
matestack_form my_form_config do form_select key::status, [1,2,3],multiple:true,init: [1,2]end
when multiple is set to false/not specified
Pass in an Integer:
matestack_form my_form_config do form_select key::status, [1,2,3],init:1end
placeholder
Defines the placeholder which will be rendered as first, disabled option.
label
Defines the label which will be rendered right before the select 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
classComponents::MyFormSelect<Matestack::Ui::VueJs::Components::Form::Select vue_name "my-form-select"# optionally add some data here, which will be accessible within your Vue.js component# Make sure to merge your custom data into super. That way you're still able to bootstrap# your custom component with the base vue_propsdefvue_propssuper.merge({foo:"bar" })enddefresponse# exactly one root element is required since this is a Vue.js component template div do label text:"my select input"select select_attributes.merge(class:"select2") do render_optionsend render_errorsendendend
Create the corresponding Vue.js component:
Generic code:
constmyFormSelect= { mixins: [MatestackUiVueJs.componentMixin,MatestackUiVueJs.formSelectMixin], template:MatestackUiVueJs.componentHelpers.inlineTemplate,data() {return {}; }, methods: {afterInitialize:function(value){// optional: if you need to modify the initial value// use this.setValue(xyz) in order to change the value// this method can be used in other methods or mounted hook of this component as well!this.setValue(xyz) } },mounted:function(){// use/initialize any third party library here// you can access the default initial value via this.componentConfig["init_value"]// if you need to, you can access your own component config data which added// within the prepare method of the corresponding Ruby class// this.props["foo"] would be "bar" in this case }}exportdefault myFormSelect// and register in your application js file like:appInstance.component('my-form-select', myFormSelect) // register at appInstance
In order to support the select2.js library, you would do something like this:
app/matestack/componenst/my_form_select.js
constmyFormSelect= { mixins: [MatestackUiVueJs.componentMixin,MatestackUiVueJs.formSelectMixin], template:MatestackUiVueJs.componentHelpers.inlineTemplate,data() {return {}; }, methods: {afterInitialize:function(value){$('.select2').val(value).trigger("change"); } },mounted:function(){constself=this;//activate$('.select2').select2();//handle change event$('.select2').on('select2:select',function (e) {self.setValue(e.params.data.id) }); }}exportdefault myFormSelect// and register in your application js file like:appInstance.component('my-form-select', myFormSelect) // register at appInstance
Don't forget to require and register the custom component JavaScript according to your JS setup!