Vuetensils 0.6: Simpler Forms, Better Accessibility, & Useful Filters!

Some really cool news is coming to Vuetensils users. The latest version has some really cool features: new VForm component and other improvements to form authoring, really nice accessibility updates, and brand new filters to make life easier, as well as some important bug fixes.

Let’s take a look:

Simplifying Forms with Automatic Validation

The new VForm component is one of my favorite new features. Combined with the latest updates to VInput and you have a really excellent form authoring experience.

VInput had some basic form validation built in. It’s always been built on top of the HTML5 validation standards, so using it is great from an accessibility and semantic perspective, and it also make it super easy to get started. There is nothing more to learn than the native API.

<VInput label="Name" name="name" required minlength="2">
  <template #description="input">
    <template v-if="input.error">
      <small v-if="input.invalid.required">This field is required.</small>
      <small v-if="input.invalid.minlength">Must be more than 2 characters</small>
    </template>
  </template>
</VInput>

But the story doesn’t stop there. It’s one thing to validate a single input, but in many cases, you want to track the state of an entire form. That’s where VForm comes in.

VForm provides the same automated form validation for every input it wraps, based on the HTML5 validation attributes. This is helpful for preventing form submission if ANY of the inputs are invalid. And note that this feature is available for any HTML input, not just the ones provided by VInput. So if you want to use the native input, or inputs from a different library, you can do so.

<VForm @submit.prevent>
  <template #default="form">
    <label>
      Name:
      <input name="name" required />
    </label>

    <button type="submit" :disabled="!form.valid">Submit</button>

    <pre>{{ form }}</pre>
  </template>
</VForm>

Both of these components also track keep track on whether any of the input have received user focus. Once any input’s blur event is fired, the input will update it’s dirty state. This is helpful if you only want to show error messages after a user has interacted with the form. And there is a convenient error state which is true if the valid state is false and the dirty state is true.

Accessibility Improvements

From the beginning, Vuetensils has simplified the process of creating accessible Dialog and Drawer components. These two include the right ARIA roles for the components themselves, but until now, there’s been something lacking. The <button> to toggle these elements always depended on the developer to implement. This usually meant missing other critical ARIA roles (aria-haspopup and aria-expanded).

Today, the recommended approach to adding these components is to take advantage of a new toggle slot which provides an easy way to create more accessible <button>. The resulting output looks like this:

<button type="button" role="button" aria-haspopup="true" aria-expanded="false">
  Open dialog
</button>

Another minor accessibility improvement is to change VInput‘s implicit label to an explicit label. This was done without introducing a breaking change by leaving the wrapping <label> where it was, but simply adding the for attribute.

Hello Filters

Prior to v0.6, Vuetensils did not provide any filters. For those unfamiliar, filters provide a very easy way to manipulate content inside you templates. They’re great for common needs such as:

• capitalize: Capitalizes the first letter of a string.
• currency: Formats a string number to a currency number using the browser’s Intl object.
• number: Formats a string number to a user friendly number using the browser’s Intl object.
• placeholder: Provides fallback content in the case of empty strings.
• plural: Provides options for pluralizing a string based on input count.
• truncate: Truncates a string based on provided length.

Bug Fixes

• Some elements had automated ID attributes for various reasons. The previous version had a small performance bug which is now fixed.
• There was a small logical bug in the VAsync component which is now fixed.
• The VInput used to have some validation logic built in, but it’s been improved.

Stay Updated

If you’re a Vuetensils user, please update to the latest version and let me know what you think. And if you’re new to the library or interested in getting started, then I’d love to hear how it can be improved. GitHub is the best place to do so.

Also, I highly recommend you sign up for my newsletter of follow me on Twitter to get notifications about the latest releases. The project is still pre-version 1, so there may be some breaking changes.