@nuxt/ui
Version:
A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
53 lines (52 loc) • 1.36 kB
JavaScript
import { reactive, computed, onMounted } from "vue";
import { createSharedComposable } from "@vueuse/core";
export const kbdKeysMap = {
meta: "",
ctrl: "",
alt: "",
win: "\u229E",
command: "\u2318",
shift: "\u21E7",
option: "\u2325",
enter: "\u21B5",
delete: "\u2326",
backspace: "\u232B",
escape: "\u238B",
tab: "\u21E5",
capslock: "\u21EA",
arrowup: "\u2191",
arrowright: "\u2192",
arrowdown: "\u2193",
arrowleft: "\u2190",
pageup: "\u21DE",
pagedown: "\u21DF",
home: "\u2196",
end: "\u2198"
};
const _useKbd = () => {
const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/));
const kbdKeysSpecificMap = reactive({
meta: " ",
alt: " ",
ctrl: " "
});
onMounted(() => {
kbdKeysSpecificMap.meta = macOS.value ? kbdKeysMap.command : kbdKeysMap.win;
kbdKeysSpecificMap.alt = macOS.value ? kbdKeysMap.option : "alt";
kbdKeysSpecificMap.ctrl = macOS.value ? "\u2303" : "ctrl";
});
function getKbdKey(value) {
if (!value) {
return;
}
if (["meta", "alt", "ctrl"].includes(value)) {
return kbdKeysSpecificMap[value];
}
return kbdKeysMap[value] || value.toUpperCase();
}
return {
macOS,
getKbdKey
};
};
export const useKbd = /* @__PURE__ */ createSharedComposable(_useKbd);