Skip to content
This repository was archived by the owner on Feb 12, 2020. It is now read-only.

Commit 837d3f0

Browse files
committed
blob-select support
1 parent 4c90b6e commit 837d3f0

File tree

7 files changed

+1601
-77
lines changed

7 files changed

+1601
-77
lines changed

README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
* [Installation](#installation)
1010
* [Form and Field Validation](#form-and-field-validation)
1111
* [Phone Number Formatting](#phone-number-formatting)
12+
* [blob-select](#blob-select)
1213
* [Gravatar](#gravatar)
1314
* [License](#license)
1415

@@ -224,6 +225,46 @@ If the phone number is valid and parseable, it will be returned in international
224225

225226
 
226227

228+
## blob-select
229+
230+
`vue-blob-forms` comes with a wrapper for [blob-select](https://github.com/Blobfolio/blob-select). To use this feature, download and add the `blob-select` library to your project.
231+
232+
### Directive: v-blobselect
233+
234+
Normally, `blob-select` is initialized on an element because it includes a `data-blobselect` attribute. To do it the Vue way, replace that with `v-blobselect`.
235+
236+
Note: if the element is conditionally rendered via `v-if`, etc., you will probably need to add a unique `key` attribute to the `<SELECT>` field's parent container, otherwise Vue's cache will get confused.
237+
238+
```html
239+
<div v-if="showingSelect" key="myFirstSelect">
240+
<select name="myFirstSelect" v-blobselect></select>
241+
</div>
242+
```
243+
244+
#### Arguments
245+
246+
The following optional arguments can be passed with the directive to alter the behavior of the element:
247+
248+
| Type | Name | Description | Default |
249+
| ---- | ---- | ----------- | ------- |
250+
| *string* | orderType | Resort options based on their values. Can be `string` or `numeric`. | `NULL` (no sorting) |
251+
| *string* | order | Sort `ASC` or `DESC`. Only applies if `orderType` is set. | `ASC` |
252+
| *string* | placeholder | Text to display when no value is selected. | `---` |
253+
| *string* | placeholderOption | Text to use for the placeholder dropdown label. | `---` |
254+
| *bool* | search | Enable search. | `FALSE` |
255+
| *int* | watch | Check for DOM changes every X milliseconds and repaint if needed. | `0` (disabled) |
256+
| *bool* | debug | Print event activity to the console log. | `FALSE` |
257+
258+
#### Example
259+
260+
```html
261+
<select v-blobselect="{placeholder: 'Choose Something'}">
262+
...
263+
</select>
264+
```
265+
266+
&nbsp;
267+
227268
## Gravatar
228269

229270
`vue-blob-forms` comes with a couple [Gravatar](https://en.gravatar.com/) helpers in case you wanted to personalize email entries.

demo/assets/blobselect.css

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)