Meteor Community Logo

Meteor Community

Packosphere

undefined's Avatar

aldeed:autoform-select2

v4.0.0-rc.0•Published 3 weeks ago

aldeed:autoform-select2

An add-on Meteor package for aldeed:autoform. Provides a single custom input type, "select2", which renders an input using the select2 plugin.

Prerequisites

Select2 Library

You must use select2 4.0+.

Option 1:

Add this to <head>:

1<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
2<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

Option 2:

Install the NPM package (and its jQuery dependency):

1$ meteor npm i --save jquery select2

Then in your client/main.js:

1import 'select2';
2import 'select2/dist/css/select2.css';

Option 3:

Get the files from GitHub and add them directly in your app /client/lib folder.

AutoForm

In a Meteor app directory, enter:

$ meteor add aldeed:autoform

Select2 Bootstrap CSS (optional)

If using with Bootstrap, you can add the theme.

$ meteor npm i --save select2-bootstrap-theme

And add an additional import AFTER the other two in your client/main.js:

1import 'select2';
2import 'select2/dist/css/select2.css';
3import 'select2-bootstrap-theme/dist/select2-bootstrap.css';

Installation

In a Meteor app directory, enter:

$ meteor add aldeed:autoform-select2

You can import this library dynamically or statically.

Dynamically, in your client/main.js:

1import { AutoFormSelect2 } from 'meteor/aldeed:autoform-select2';
2// ...
3await AutoFormSelect2.load()

Or statically, in your client/main.js:

1import 'meteor/aldeed:autoform-select2/static';

Installing Bootstrap theme

As of version 4.x there is no tight coupling to Bootstrap themes anymore. If you want to use the Bootstrap theme, you can install create use the following code:

1const from = Template.afSelect2
2from.helpers({
3  atts: function addFormControlAtts () {
4    const { select2Options, ...rest } = this.atts
5    // Add bootstrap class
6    return AutoForm.Utility.addClass(rest, 'form-control')
7  }
8})

Usage

Specify "select2" for the type attribute of any input. This can be done in a number of ways:

In the schema, which will then work with a quickForm or afQuickFields:

1{
2  tags: {
3    type: Array,
4    autoform: {
5      type: 'select2',
6      afFieldInput: {
7        multiple: true
8      }
9    }
10  },
11  'tags.$': String
12}

Or on the afFieldInput component or any component that passes along attributes to afFieldInput:

1{{> afQuickField name="tags" type="select2" multiple=true}}
2
3{{> afFormGroup name="tags" type="select2" multiple=true}}
4
5{{> afFieldInput name="tags" type="select2" multiple=true}}

Setting Select2 Options

To provide select2 options, set a select2Options attribute equal to a helper function that returns the options object. Most of the data- attributes that the plugin recognizes should also work.

Example:

1{{> afFieldInput name="tags" type="select2" multiple=true select2Options=s2Opts}}
1Template.example.helpers({
2  s2Opts() {
3    return { placeholder: 'foo', tags: true };
4  },
5});

Demo

Live

Contributing

Anyone is welcome to contribute. Fork, make your changes, and then submit a pull request.