feat(toolbar): support custom content for buttons ( Vue 2.x )

[0biWanKenobi]

before:

• we could use custom text, or
• we could use a menu w/ one of the provided icons

after:

• we can provide a template for custom toolbar items;
• the template name is dynamically computed from the toolbar prop;
• each toolbar prop has two new settings:
  • slot: true if we want to render a custom template
  • preventNativeClick: defaults to true, can be set to false to allow eg. a select to work properly
• tooltip works even w/ custom templates; this is possible by listening to mousenter event, instead of mouseover

For example, we can obtain a customized toolbar like the one below:

by using a toolbar config like this:

const customToolbar = {
  myButton: {
    title: 'Options',
    slot: true,
    preventNativeClick: false,
  },
  my2ndButton: {
    title: 'Settings',
    slot: true,
    action() {
      console.log('opening the settings..');
    },
  },
};

Then we can provide custom templates for myButton and my2ndButton, like this:

<v-md-editor
  v-model="text"
  height="500px"     
  :toolbar="customToolbar"
  left-toolbar="undo redo | myButton my2ndButton"
> 
  <template #myButton>
    <select name="opts">
      <option value="opt1">
        option 1
      </option>
      <option value="opt2">
        option 2
      </option>
    </select>
  </template>
  <template #my2ndButton>
    <img
      src="https://www.svgrepo.com/show/131974/settings.svg"
      intrinsicsize="512 x 512"
      width="16"
      height="16"
      srcset="https://www.svgrepo.com/show/131974/settings.svg 4x"
      alt="Settings SVG Vector"
    >
  </template>
</v-md-editor>