Vuetensils 0.4: awesome components and helpful directives

VFile — custom, accessible file selection

<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 here.</p>
</div>
</template>
</VFile>

<button v-if="files.length" @click="files = []" class="clear">Clear files</button>
</div>
</template>

<script>
import { VFile } from "vuetensils";

export default {
components: {
VFile
},

data: () => ({
files: []
})
};
</script>

VResize — container queries made easy

<template>
<div id="app">
<p>Resize the browser to see changes</p>
<div class="grid">
<VResize>
<template #default="{ width }">
<div class="bio" :class="{ small: width < 450 }">
<img src="https://www.fillmurray.com/200/200">
<p>This content is {{ width }}px wide.</p>
</div>
</template>
</VResize>

<VResize>
<template #default="{ width }">
<div class="bio" :class="{ small: width < 450 }">
<img src="https://www.fillmurray.com/200/200">
<p>This content is {{ width }}px wide.</p>
</div>
</template>
</VResize>

<VResize>
<template #default="{ width }">
<div class="bio" :class="{ small: width < 450 }">
<img src="https://www.fillmurray.com/200/200">
<p>This content is {{ width }}px wide.</p>
</div>
</template>
</VResize>

<VResize>
<template #default="{ width }">
<div class="bio" :class="{ small: width < 450 }">
<img src="https://www.fillmurray.com/200/200">
<p>This content is {{ width }}px wide.</p>
</div>
</template>
</VResize>
</div>
</div>
</template>

<script>
import { VResize } from "vuetensils";

export default {
components: {
VResize
}
};
</script>

Autofocus directive

<template>
<label>
Search for something
<input type="search" v-autofocus />
</label>
</template>

Clickout directive

<template>
<div v-clickout="onClickout">Click outside and see.</div>
</template>

<script>
export default {
methods: {
onClickout() {
alert('you clicked outside the div')
}
}
}

Copy directive

<template>
<button v-copy="`hello world`">Click to copy</button>
</template>

Full Stack @Revealbio | Author of Vuetensils & Particles CSS | Panelist @ViewsOnVue | Board Member @sandiegojs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store