Vuetensils 0.4: awesome components and helpful directives

The latest release of Vuetensils is out, and with it comes some exciting improvements including 2 brand new components (VFile, VResize), and some handy directives (autofocus, clickout, copy). These additions will make it faster and easier to create robust, accessible UIs with Vue.js with your own designs, and no bloat.

VFile — custom, accessible file selection

First up is a look at the VFile component. By default, it looks and behaves like an HTML 5 file input, and that’s because under the hood it is one. However, it goes a step further by allowing developers to easily create custom drag and drop file selectors while maintaining accessible UIs.

Take for example the following:

<template>
  <div id="app">
    <VFile v-model="files" label="File selection:" multiple>
      <template #default="{ droppable }">
        <div class="dropzone" :class="{ droppable, selected: files.length }" aria-hidden="true">
          <p v-if="droppable">Go on, you can let go.</p>

          <div v-else-if="files.length">
            <p>{{ files.length }} file(s) selected:</p>
            <ul>
              <li v-for="(file, index) in files" :key="index">{{ file.name }}</li>
            </ul>
          </div>

          <p v-else>Select files or drag and drop them…