Needlessly Provoking Marsupials

    vue-keyboard-over

    0.4.1 • Public • Published

    vue-keyboard-over

    A Vue component that display pressed keys on the keyboard by the user right now.

    Install

    npm install vue-keyboard-over
    # or 
    yarn add vue-keyboard-over

    Import

    import KeyboardOver from "vue-keyboard-over";

    Usage

    <KeyboardOver />

    Advanced Usage

    Custom Print Format

    The format of keys it prints out is depends on:

    1. The key field and the code field of a KeyboardEvent object.
    2. <KeyboardOver> will determine using key or code "smartly" to match people's common cognitions.
    3. For some special KeyboardEvent without a brief key or code, <KeyboardOver> will print a pre-defined emoji or symbol.

    So you can customize the print format by:

    • nameType: string

      values: "smart" (default) | "key" | "code"

      • "key": print the key field of the KeyboardEvent object
      • "code": print the code field of the KeyboardEvent object
      • "smart" (default): print it in a "smart" way
    • nameMap: Record<string, string>: customized map over the pre-defined key map

      You can access the pre-defined key map by:

      export { defaultKeyMap } from "vue-keyboard-over";

      The value is below:

      {
        // modifiers
        Meta: "",
        Shift: "",
        Control: "",
        Alt: "",
       
        // action keys
        Enter: "",
        Backspace: "",
       
        // navigation keys
        ArrowUp: "",
        ArrowDown: "",
        ArrowLeft: "",
        ArrowRight: "",
       
        // special chars
        Backquote: "`",
        Minus: "-",
        Equal: "=",
        BracketLeft: "[",
        BracketRight: "]",
        Backslash: "\\",
        Semicolon: ";",
        Quote: "'",
        Comma: ",",
        Period: ".",
        Slash: "/"
      }

    Events

    • update(keys: Array<string>): It will be emitted with current keys when any key pressed down or released up. So you can use this to do more about current keys.

    Custom Style

    You can override the component style throught these CSS selectors:

    • .keyboard-over: The root element.
    • .keyboard-over > kbd: The printed key item.
    • .keyboard-over-list-*: The prefix of CSS transition classes. Or you can totally drop the default transition by set the prop transition which allows you to specify another prefix of CSS transition classes.

    API References

    Default Export <KeyboardOver>

    Props

    • nameType
    • nameMap
    • transition

    Events

    • update(keys)

    CSS Selectors

    • .keyboard-over
    • .keyboard-over > kbd
    • .keyboard-over-list-*

    Named Exports

    • defaultKeyMap: Record<string, string>

    Install

    npm i vue-keyboard-over

    DownloadsWeekly Downloads

    1

    Version

    0.4.1

    License

    MIT

    Unpacked Size

    21.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • jinjiang