Can't set alternative layout

[slowdream]

<template>
  <div>
    <input type="text" placeholder="Text input" @focus="show" data-layout="normal" />
    <vue-touch-keyboard v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" />
  </div>
</template>

<script>

  import layoutRu from "@/components/parts/keyboard-layout-ru"; // load default style

  export default {
    name: 'keyboard',
    data () {
      return {
        visible: false,
        layout: layoutRu,
        input: null,
        options: {
          useKbEvents: false
        }
      }
    }
.....
  }
</script>

keyboard-layout-ru.js

module.exports = {

	"normal": {

		_meta: {
			"tab": { key: "\t", text: "Tab", width: 60, classes: "control"},
			"shiftl": { keySet: "shifted", text: "Shift", width: 100, classes: "control"},
			"shiftr": { keySet: "shifted", text: "Shift", width: 100, classes: "control"},
			"caps": { keySet: "capsed", text: "Caps lock", width: 80, classes: "control"},
			"space": { key: " ", text: "Space", width: 180},
			"enter": { key: "\r\n", text: "Enter", width: 80, classes: "control"},
			"backspace": { func: "backspace", classes: "control backspace", width: 65},
			"accept": { func: "accept", text: "Close", classes: "control featured"},
			"next": { func: "next", text: "Next", classes: "control featured"}
		},

		default: [
			"` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
			"{tab} й ц у к е н г ш щ з х ъ \\",
			"{caps} ф ы в а п р о л д ж э {enter}",
			"{shiftl} я ч с м и т ь б ю . {shiftr}",
			"{next} {space} , {accept}"
		],
		shifted: [
			"~ ! @ # $ % ^ & * ( ) _ + {backspace}",
			"{tab} Й Ц У К Е Н Г Ш Щ З Х Ъ |",
			"{caps} Ф Ы В А П Р О Л Д Ж Э {enter}",
			"{shiftl} Я Ч С М И Т Ь Б Ю . {shiftr}",
			"{next} {space} , {accept}"
		],
		
		capsed: [
			"` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
			"{tab} Й Ц У К Е Н Г Ш Щ З Х Ъ |",
			"{caps} Ф Ы В А П Р О Л Д Ж Э {enter}",
			"{shiftl} Я Ч С М И Т Ь Б Ю . {shiftr}",
			"{next} {space} , {accept}"
		]		
	},

	"compact": {

		_meta: {
			"default": { keySet: "default", text: "abc", classes: "control"},
			"alpha": { keySet: "default", text: "Abc", classes: "control"},
			"shift": { keySet: "shifted", text: "ABC", classes: "control"},
			"numbers": { keySet: "numbers", text: "123", classes: "control"},
			"space": { key: " ", text: "Space", width: 200},
			"backspace": { func: "backspace", classes: "control"},
			"accept": { func: "accept", text: "Close", classes: "control featured"},
			"next": { func: "next", text: "Next", classes: "featured"},
			"zero": { key: "0", width: 130}
		},

		default: [
			"й ц у к е н г ш щ з х ъ",
			" ф ы в а п р о л д ж э ",
			"{shift} я ч с м и т ь б ю {backspace}",
			"{numbers} , {space} . {next} {accept}"
		],

		shifted: [
			"Й Ц У К Е Н Г Ш Щ З Х Ъ",
			" Ф Ы В А П Р О Л Д Ж Э ",
			"{default} Я Ч С М И Т Ь Б Ю ",
			"{numbers} _ {space} {backspace} {next} {accept}"
		],

		numbers: [
			"1 2 3",
			"4 5 6",
			"7 8 9",
			"  {alpha} . {zero} {backspace} {next} {accept}"
		]
	},

	"numeric": {

		_meta: {
			"backspace": { func: "backspace", classes: "control"},
			"accept": { func: "accept", text: "Close", classes: "control featured"},
			"next": { func: "next", text: "Next", classes: "control featured"},
			"zero": { key: "0", width: 130}
		},

		default: [
			"1 2 3",
			"4 5 6",
			"7 8 9",
			"_ - . {zero} {backspace} {next} {accept}"
		]
	}

};

[reals79]

Should be:

<script>
import layoutRu from "@/components/parts/keyboard-layout-ru"; // load default style

  export default {
    name: 'keyboard',
    data () {
      return {
        visible: false,
        layout: layoutRu.normal,  //or layoutRu.compact or layoutRu.numeric
        input: null,
        options: {
          useKbEvents: false
        }
      }
    }
.....
  }
</script>

[ijpatricio]

thanks @reals79 !!

using vue with webpack (Laravel Mix)

let LayoutPt = require('./../../../../components/infrastructure/vue-touch-keyboard/layoutPt');

(...)

window.Laravel.vm = new Vue({
    el: '#app',

(...)

keyboard: {
            enabled: false,
            visible: false,
            layout: "numeric",
            layoutPt: LayoutPt,
            input: null,
            options: {
                useKbEvents: false
            },
        },

later on.. decide the layout from the vueData

 kbShow(e){
            this.keyboard.input = e.target;
            // this.keyboard.layout = e.target.dataset.layout;
            this.keyboard.layout = this.keyboard.layoutPt.numeric;

            if (!this.keyboard.visible && this.keyboard.enabled) this.keyboard.visible = true
        },

Cheers

[viniciusdeliz]

@ijpatricio did you managed to implement accented characters in the PT keyboard?

[ijpatricio]

Hello @viniciusdeliz

Ouuf it was so long time ago, I can't even remember, sorry 😓

From the comment I put here https://github.com/icebob/vue-touch-keyboard/issues/11#issuecomment-373790154 it seems that's the way to do it.. Copy the source file from the package to somewhere in your project, import it and provide it on the configuration.