Implement is-draggable feature

[acirinelli]

Allows user to turn on draggable sorting of tags.

[acirinelli]

Not sure how you feel about another package included in this one, but I am in need of the ability to tag things and then sort them. I implemented the vue-draggable package into this in a lightweight way.

[AlexMordred]

Hmm, I'm not sure either. I just realized my dist js file is only 14kb and this package is 70kb. How do you mean "in a lightweight way"?

[acirinelli]

Hmm, I'm not sure either. I just realized my dist js file is only 14kb and this package is 70kb. How do you mean "in a lightweight way"?

I just mean that I didn't go into depth of the package trying to implement many of their possible features. It's just the ability to rearrange tags. If you don't want to implement it, I will use my own fork.

There might be a way to implement a draggable/sortable feature in your package without adding a 3rd party package to keep the size down and stay in control of the code, but it will be harder and more work. The vue-draggable package already works really well.

[rangermeier]

I'd also be interested in this feature but I totally understand the concerns of adding vue-draggable as dependency.

Didn't try it out, but maybe it would be sufficient to allow the user to configure the wrapper element? If it was possible to pass a custom component and objects for props and event listeners which are applied on the wrapper tag?

E.g. if VoerroTagsInput.vue looked something like this:

<template>
    <div class="tags-input-root" style="position: relative;">
        <component 
            :is="wrapperComponent"
            v-bind="wrapperProps"
            v-on="wrapperEvents"
            :class="{
                [wrapperClass + ' tags-input']: true,
                'active': isActive,
                'disabled': disabled,
        }">
<!-- removed for brevity -->
       </component>
    </div>
</template>

<script>
export default {
    // Only new props shown:
    props: {
        wrapperComponent: {
            type: [String, Object],
            default: 'div'
        },
        wrapperProps: {
            type: Object,
            default: {}
        },,
        wrapperEvents: {
            type: Object,
            default: {}
        },
    }
}
</script>

If this works as I expect, we could then inject in the draggable component at runtime, we can't pass v-model directly to the draggable component but we can split it up into value prop and input event listener: Usage in MyApp.vue:

<template>
    <TagsInput
        v-model="tags"
        :wrapperComponent="$options.draggable"
        :wrapperProps="{value: tags, style: '100%'}"
        :wrapperEvents="{input: (newList) => tags = newList}"
    />
</template>

<script>
import draggable from "@/vuedraggable";
export default {
    data() {
        return {
            tags: []
        }
    },
    draggable,
}
</script>