Adapt components that require $listeners to Vue 3 API

[rafaelcamargo]

Component's Name

<t-button>, <t-close-button>, <t-input>, <t-textarea>, <t-select>

Common pattern to be abstracted

The attribute $listeners was removed on Vue 3. Listeners were incorporated to the attribute $attrs. The components listed above should now being able to handle with this differentiation between Vue versions. One possible strategy would be handle this conditional in a separate service and use it in every component that requires $listeners:

// vue/services/vm/vm.js
const _public = {};

_public.getListeners = vm => vm.$listeners || {}

export default _public

// vue/services/vm/vm.js
const _public = {};

_public.getListeners = vm => vm.$listeners || {}

export default _public

// vue/components/button/button.js
import vmService from '@vue/services/vm/vm';

export const tButton = {
  name: 't-button',
  // ...
  methods: {
    getListeners(){
      return vmService.getListeners(this);
    }
  }
}

<!-- vue/components/button/button.html -->
<component :is="tagName" :class="classes" :type="buttonType" tabindex="0" v-on="getListeners()">
  <!-- ... -->
</component>

Requirements

• Create vmService and apply it to the components that require $listeners

Properties

N/A