vue-mac-keyboard/dist/index.mjs

Macbook computer keyboard style for VueJS component.

import { defineComponent, computed, h } from 'vue';

const keycodeDataList = [
  { keycode: 27, name: ["esc"] },
  { keycode: 112, name: ["F1"] },
  { keycode: 113, name: ["F2"] },
  { keycode: 114, name: ["F3"] },
  { keycode: 115, name: ["F4"] },
  { keycode: 116, name: ["F5"] },
  { keycode: 117, name: ["F6"] },
  { keycode: 118, name: ["F7"] },
  { keycode: 119, name: ["F8"] },
  { keycode: 120, name: ["F9"] },
  { keycode: 121, name: ["F10"] },
  { keycode: 122, name: ["F11"] },
  { keycode: 123, name: ["F12"] },
  { keycode: -1, name: ["\u3007"] },
  { keycode: 192, name: ["~", "`"] },
  { keycode: 49, name: ["!", "1"] },
  { keycode: 50, name: ["@", "2"] },
  { keycode: 51, name: ["#", "3"] },
  { keycode: 52, name: ["$", "4"] },
  { keycode: 53, name: ["%", "5"] },
  { keycode: 54, name: ["^", "6"] },
  { keycode: 55, name: ["&", "7"] },
  { keycode: 56, name: ["*", "8"] },
  { keycode: 57, name: ["(", "9"] },
  { keycode: 48, name: [")", "0"] },
  { keycode: 189, name: ["\uFF3F", "-"] },
  { keycode: 187, name: ["\uFF0B", ": "] },
  { keycode: 8, name: ["delete"] },
  { keycode: 9, name: ["tab"] },
  { keycode: 81, name: ["Q"] },
  { keycode: 87, name: ["W"] },
  { keycode: 69, name: ["E"] },
  { keycode: 82, name: ["R"] },
  { keycode: 84, name: ["T"] },
  { keycode: 89, name: ["Y"] },
  { keycode: 85, name: ["U"] },
  { keycode: 73, name: ["I"] },
  { keycode: 79, name: ["O"] },
  { keycode: 80, name: ["P"] },
  { keycode: 219, name: ["{", "["] },
  { keycode: 221, name: ["}", "]"] },
  { keycode: 220, name: ["|", "\\"] },
  { keycode: 20, name: ["", "CapsLock"] },
  { keycode: 65, name: ["A"] },
  { keycode: 83, name: ["S"] },
  { keycode: 68, name: ["D"] },
  { keycode: 70, name: ["F"] },
  { keycode: 71, name: ["G"] },
  { keycode: 72, name: ["H"] },
  { keycode: 74, name: ["J"] },
  { keycode: 75, name: ["K"] },
  { keycode: 76, name: ["L"] },
  { keycode: 186, name: [":", ";"] },
  { keycode: 222, name: ['"', "'"] },
  { keycode: 13, name: ["enter", "return"] },
  { keycode: 16, name: ["\u21E7"] },
  { keycode: 90, name: ["Z"] },
  { keycode: 88, name: ["X"] },
  { keycode: 67, name: ["C"] },
  { keycode: 86, name: ["V"] },
  { keycode: 66, name: ["B"] },
  { keycode: 78, name: ["N"] },
  { keycode: 77, name: ["M"] },
  { keycode: 188, name: ["<", ","] },
  { keycode: 190, name: [">", "."] },
  { keycode: 191, name: ["?", "/"] },
  { keycode: 16, name: ["\u21E7"] },
  { keycode: -1, name: ["fn"] },
  { keycode: 17, name: ["control"] },
  { keycode: 18, name: ["alt", "option"] },
  { keycode: 91, name: ["command"] },
  { keycode: 32, name: [""] },
  { keycode: 91, name: ["command"] },
  { keycode: 18, name: ["alt", "option"] },
  { keycode: 37, name: ["\u25C0"] },
  { keycode: 38, name: ["\u25B2"] },
  { keycode: 39, name: ["\u25B6"] },
  { keycode: 40, name: ["\u25BC"] }
];

const UNDEFINED = void 0;
const NonDefaultBooleanType = {
  type: Boolean,
  default: UNDEFINED
};
const props = {
  /**
   * Active keys
   */
  keycode: Array,
  /**
   * Disabled keycode events
   */
  disabled: NonDefaultBooleanType
};
const EventKey = Object.freeze({
  KeycodeDown: "keycodeDown",
  KeycodeUp: "keycodeUp",
  /**
   * suport `v-model:keycode`
   */
  KeycodeUpdate: "update:keycode"
});
const emits = {
  /* eslint-disable @typescript-eslint/no-unused-vars */
  [EventKey.KeycodeUpdate]: (keycode) => true,
  [EventKey.KeycodeDown]: (keycodeData) => true,
  [EventKey.KeycodeUp]: (keycodeData) => true
  /* eslint-enable @typescript-eslint/no-unused-vars */
};

const MacKeyboard = defineComponent({
  name: "MacKeyboard",
  props: {
    ...props
  },
  emits: {
    ...emits
  },
  setup(props2, context) {
    const keycode = computed({
      get() {
        return props2.keycode || [];
      },
      set(value) {
        context.emit(EventKey.KeycodeUpdate, value);
      }
    });
    function onKeycodeDown(keycodeData) {
      if (props2.disabled) return;
      context.emit(EventKey.KeycodeDown, keycodeData);
      keycode.value = [keycodeData.keycode];
    }
    function onKeycodeUp(keycodeData) {
      if (props2.disabled) return;
      context.emit(EventKey.KeycodeUp, keycodeData);
      keycode.value = [];
    }
    return () => h(
      "div",
      {
        class: ["vue-mac-keyboard", props2.disabled ? "is-disabled" : ""]
      },
      h(
        "ul",
        {},
        keycodeDataList.map(
          (keycodeData) => h(
            "li",
            {
              onMousedown: () => onKeycodeDown(keycodeData),
              onMouseup: () => onKeycodeUp(keycodeData),
              class: [
                keycode.value.includes(keycodeData.keycode) ? "is-pressed" : "",
                props2.disabled ? "is-disabled" : ""
              ],
              "data-key": keycodeData.keycode
            },
            keycodeData.name.map((name) => h("span", {}, name))
          )
        )
      )
    );
  }
});

const plugin = {
  install(app) {
    app.component("MacKeyboard", MacKeyboard);
  }
};

export { EventKey, MacKeyboard, plugin as default, emits, keycodeDataList, plugin, props };