vue-mac-keyboard
Version:
Macbook computer keyboard style for VueJS component.
230 lines (223 loc) • 7.13 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
EventKey: () => EventKey,
MacKeyboard: () => MacKeyboard,
default: () => src_default,
emits: () => emits,
keycodeDataList: () => keycodeDataList,
plugin: () => plugin,
props: () => props
});
module.exports = __toCommonJS(src_exports);
// src/core.ts
var import_vue = require("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 = (0, import_vue.defineComponent)({
name: "MacKeyboard",
props: __spreadValues({}, props),
emits: __spreadValues({}, emits),
setup(props2, context) {
const keycode = (0, import_vue.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 () => (0, import_vue.h)(
"div",
{
class: "vue-mac-keyboard"
},
(0, import_vue.h)(
"ul",
{},
keycodeDataList.map(
(keycodeData) => (0, import_vue.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) => (0, import_vue.h)("span", {}, name))
)
)
)
);
}
});
// src/index.ts
var plugin = {
install(app) {
app.component("MacKeyboard", MacKeyboard);
}
};
var src_default = plugin;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
EventKey,
MacKeyboard,
emits,
keycodeDataList,
plugin,
props
});