Added slot support for buttons

[lochstar]

Hi,

I've added support for named slots for each key in a layout. This enables you to render SVGs, images or whatever you'd like instead of plain text keys. This should close off https://github.com/martywallace/vue-keyboard/issues/14 and does not break existing functionality.

Slots use the action name for named actions, or the value for all other keys.

Example usage:

<vue-keyboard
  v-show="keyboardVisible"
  v-model="keyboardInput"
  :layouts="compactLayout"
>
  <template #backspace>
    <font-awesome icon="backspace" />
  </template>
  <template #q>
    <img src="q.png">
  </template>
</vue-keyboard>

I've also added the key attribute on the v-for loops as it's generally recommended and my linter complains. If you'd rather I remove this please let me know.

[martywallace]

That's pretty sweet, thanks a lot.

[gchoza]

Having trouble using slots. I can make CSS take effect by using v-deep: (::v-deep .vue-keyboard button {}) but cannot use slots. I may be missing something obvious. Using version 3.1.0.

        <keyboard
          v-show="dobActive"
          @input="changed"
          @today="today"
          @minus="minus"
          @plus="plus"
          layouts="/{-1:minus}{today:today}{+1:plus}/|123|456|789|{clr:clear}0{del:backspace}"
          v-model="patDOB"
        >
          <template #backspace
            ><img
              src="GCAT/Images/back.png"
              style="height: 18px; width: 18px;"
            />
          </template>
        </keyboard>

import keyboard from "vue-keyboard"; components: { keyboard },

[lochstar]

Hey @gchoza, 3.1.0 was released Jun 2017 and this PR was made this year. Unless @martywallace can publish an update, you'll have to checkout master manually in your project to use this feature.

[gchoza]

Thanks, that explains it. I copied master and I'm OK. I'll keep checking to see when there's an update. This is a very nice keyboard. Thank you @martywallace !

@lochstar thanks for helping.