|
9 | 9 | * [Installation](#installation)
|
10 | 10 | * [Form and Field Validation](#form-and-field-validation)
|
11 | 11 | * [Phone Number Formatting](#phone-number-formatting)
|
| 12 | + * [blob-select](#blob-select) |
12 | 13 | * [Gravatar](#gravatar)
|
13 | 14 | * [License](#license)
|
14 | 15 |
|
@@ -224,6 +225,46 @@ If the phone number is valid and parseable, it will be returned in international
|
224 | 225 |
|
225 | 226 |
|
226 | 227 |
|
| 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 | + |
| 267 | + |
227 | 268 | ## Gravatar
|
228 | 269 |
|
229 | 270 | `vue-blob-forms` comes with a couple [Gravatar](https://en.gravatar.com/) helpers in case you wanted to personalize email entries.
|
|
0 commit comments