🎁 Adds the `FeathersVuexInputWrapper`
This release adds the new, renderless FeathersVuexInputWrapper
component which makes quick work of "edit-in-place" inputs:
<template>
<div class="p-3">
<FeathersVuexInputWrapper :item="user" prop="email">
<template #default="{ current, prop, createClone, handler }">
<input v-model="current[prop]" type="text" @focus="createClone" @blur="e => handler(e, save)" />
</template>
</FeathersVuexInputWrapper>
<!-- Simple readout to show that it's working. -->
<pre class="bg-black text-white text-xs mt-2 p-1">{{user}}</pre>
</div>
</template>
<script>
export default {
name: 'InputWrapperExample',
props: {
user: {
type: Object,
required: true
}
},
methods: {
// Optionally make the event handler async.
async save({ event, clone, prop, data }) {
const user = clone.commit()
return user.patch(data)
}
}
}
</script>