vue-mac-keyboard/dist/index.js

Macbook computer keyboard style for VueJS component.

var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};

// src/core.ts
import { computed, defineComponent, h } from "vue";

// src/constants.ts
var 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"] }
];

// src/types.ts
var UNDEFINED = void 0;
var NonDefaultBooleanType = {
  type: Boolean,
  default: UNDEFINED
};
var props = {
  /**
   * Active keys
   */
  keycode: Array,
  /**
   * Disabled keycode events
   */
  disabled: NonDefaultBooleanType
};
var EventKey = /* @__PURE__ */ ((EventKey2) => {
  EventKey2["KeycodeDown"] = "keycodeDown";
  EventKey2["KeycodeUp"] = "keycodeUp";
  EventKey2["KeycodeUpdate"] = "update:keycode";
  return EventKey2;
})(EventKey || {});
var emits = {
  /* eslint-disable @typescript-eslint/no-unused-vars */
  ["update:keycode" /* KeycodeUpdate */]: (keycode) => true,
  ["keycodeDown" /* KeycodeDown */]: (keycodeData) => true,
  ["keycodeUp" /* KeycodeUp */]: (keycodeData) => true
  /* eslint-enable @typescript-eslint/no-unused-vars */
};

// src/core.ts
var MacKeyboard = defineComponent({
  name: "MacKeyboard",
  props: __spreadValues({}, props),
  emits: __spreadValues({}, emits),
  setup(props2, context) {
    const keycode = computed({
      get() {
        return props2.keycode || [];
      },
      set(value) {
        context.emit("update:keycode" /* KeycodeUpdate */, value);
      }
    });
    function onKeycodeDown(keycodeData) {
      if (props2.disabled) return;
      context.emit("keycodeDown" /* KeycodeDown */, keycodeData);
      keycode.value = [keycodeData.keycode];
    }
    function onKeycodeUp(keycodeData) {
      if (props2.disabled) return;
      context.emit("keycodeUp" /* KeycodeUp */, keycodeData);
      keycode.value = [];
    }
    return () => h(
      "div",
      {
        class: "vue-mac-keyboard"
      },
      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))
          )
        )
      )
    );
  }
});

// src/index.ts
var plugin = {
  install(app) {
    app.component("MacKeyboard", MacKeyboard);
  }
};
var src_default = plugin;
export {
  EventKey,
  MacKeyboard,
  src_default as default,
  emits,
  keycodeDataList,
  plugin,
  props
};