https://github.com/ntnyq/vue-mac-keyboard

:keyboard: Macbook computer keyboard style for VueJS component.
https://github.com/ntnyq/vue-mac-keyboard

keyboard mac vue vue-plugin

Last synced: 5 months ago
JSON representation

:keyboard: Macbook computer keyboard style for VueJS component.

• Host: GitHub
• URL: https://github.com/ntnyq/vue-mac-keyboard
• Owner: ntnyq
• License: mit
• Created: 2024-07-15T08:33:55.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-12T06:54:51.000Z (5 months ago)
• Last Synced: 2025-05-13T00:45:47.548Z (5 months ago)
• Topics: keyboard, mac, vue, vue-plugin
• Language: TypeScript
• Homepage: https://vue-mac-keyboard.ntnyq.com
• Size: 930 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# vue-mac-keyboard

[![CI](https://github.com/ntnyq/vue-mac-keyboard/workflows/CI/badge.svg)](https://github.com/ntnyq/vue-mac-keyboard/actions)

[![NPM VERSION](https://img.shields.io/npm/v/vue-mac-keyboard.svg)](https://www.npmjs.com/package/vue-mac-keyboard)

[![NPM DOWNLOADS](https://img.shields.io/npm/dy/vue-mac-keyboard.svg)](https://www.npmjs.com/package/vue-mac-keyboard)

[![CODECOV](https://codecov.io/github/ntnyq/vue-mac-keyboard/branch/main/graph/badge.svg)](https://codecov.io/github/ntnyq/vue-mac-keyboard)

[![LICENSE](https://img.shields.io/github/license/ntnyq/vue-mac-keyboard.svg)](https://github.com/ntnyq/vue-mac-keyboard/blob/main/LICENSE)

> ⌨️ Macbook computer keyboard style for VueJS component.

## Playground

[playground](https://vue-mac-keyboard.ntnyq.com)

## Install

**npm**:

```bash

npm i vue-mac-keyboard

```

**yarn**

```bash

yarn add vue-mac-keyboard

```

**pnpm**

```bash

pnpm add vue-mac-keyboard

```

## Screenshot

![Screenshot](https://raw.githubusercontent.com/ntnyq/vue-mac-keyboard/main/screenshots/keyboard.png)

## Usage

### Local Component

```vue

import { ref } from 'vue'

import { MacKeyboard } from 'vue-mac-keyboard'

import 'vue-mac-keyboard/style'

import type { KeycodeData } from 'vue-mac-keyboard'

const keycode = ref([])

  

```

### Global component registed via plugin

```ts

import { createApp } from 'vue'

import MacKeyboard from 'vue-mac-keyboard'

import App from '@/App.vue'

import 'vue-mac-keyboard/style'

const app = createApp(App)

app.use(MacKeyboard)

app.mount('#app')

```

Use it in component:

```vue

import { ref } from 'vue'

import type { KeycodeData } from 'vue-mac-keyboard'

const keycode = ref([])

function onKeycodeDown(keycodeData: KeycodeData) {

  keycode.value = [keycodeData.keycode]

}

function onKeycodeUp(keycodeData: KeycodeData) {

  keycode.value = []

}

  

```

## Props

### keycode/v-model:keycode

- **type**: `number[]`

- **default**: `[]`

Highlighted keys.

See **[keycodeDataList](https://github.com/ntnyq/vue-mac-keyboard/blob/main/src/constants.ts)** for all available keycodes.

### disabled

- **type**: `boolean`

- **default**: `undefined`

Disable the keyboard from interacting.

## Events

### keycodeDown

- **type**: `(keycodeData: KeycodeData) => void`

Triggered when a keycode is pressed.

### keycodeUp

- **type**: `(keycodeData: KeycodeData) => void`

Triggered when a keycode is released.

## Interfaces

```ts

interface KeycodeData {

  /**

   * keycode of the key

   */

  keycode: number

  /**

   * key names, used for rendering UI

   */

  name: string[]

}

```

## Credits

- [uiwjs/react-mac-keyboard](https://github.com/uiwjs/react-mac-keyboard) created by [jaywcjlove](https://github.com/jaywcjlove)

## Changelog

[See releases](https://github.com/ntnyq/vue-mac-keyboard/releases)

## License

[MIT](./LICENSE) License © 2024-PRESENT [ntnyq](https://github.com/ntnyq)