Skip to content

A virtual keyboard VUE component developed using VUE 3 and Typescript. And using VITE as the bundler and dev server

License

Notifications You must be signed in to change notification settings

gwinnem/vue-keyboard-component

Repository files navigation

Vue Keyboard Component

A virtual keyboard component built with VUE 3 and VITE.

Inspired from simple-keyboard by Francisco Hedge and from Keyboard(jQuery plugin) by Rob Garrison.

Dark mode example.

dark mode keyboard

German keyboard layout example, with custom buttons.

dark mode keyboard

Light mode example.

dark mode keyboard

✏ Features:

  • Fully responsive.
  • Supports unicode values in the layout. Both images and special characters.
  • Supports dark and light theme out of the box. Using the user's preferred color scheme.
  • Theme can be set with the built-in theme switcher. It uses local storage to remember the selected theme.
  • 150 microsoft keyboard layouts included in the package.

✏ Upcoming Features:

  • Add support for physical keyboard.
  • Support for filtering layouts with includedLayouts prop.
  • Support for providing default display option as prop.
  • Add possibility to style one or more buttons different from the rest.
  • Refactor keyboard button to accept multiple layout values and display them in the button.

📔 TODO's:

  • Fix function button issues.
  • Fix issue with button rendering the space button. It gets the wrong css class so the styling is incorrect.
  • Check missing microsoft layouts.
  • Create new documentation (WIP).

📚 Documentation

👓 Customizing dark and light mode

List of css variables.

🏁 Demo's

  • Default with theme and layout selector.
  • Styled buttons.
  • Demo with customized layout from app.
  • Playground where devs can test their layouts(sandbox).

⌨ Supported Layouts (150 different layouts)

🔗 References

🌟 Contributing

Contributions are always welcome!


Help is needed defining which images or text to use for the different keyboard layouts. Look at the German display definition below:

  display: {
    // eslint-disable sort-keys
    '{alt}': `Alt`,
    '{altleft}': `Alt`,
    '{altright}': `Alt Gr`,
    '{bksp}': `\u232b`,
    '{caps}': `\u21ea`,
    '{ctrl}': `Strg`,
    '{ctrlleft}': `Strg`,
    '{ctrlright}': `Strg`,
    '{empty}': ` `,
    '{enter}': `\u21A9`,
    '{lock}': `caps \u21ea`,
    '{shift}': `\u2191`,
    '{shiftleft}': `\u2191`,
    '{shiftright}': `\u2191`,
    '{space}': ` `,
    '{tab}': `\u2b7e`,
  },

📓 Bug and Issue creation

Create a new issue or report a bug.

💲 Donate

donate

If you enjoyed this project — or just feeling generous, consider buying me a beer. Cheers! 🍻


📦 Installation & Usage

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Lints code files

npm run lint

Lints style files

npm run lint:style

Fixes linting errors

npm run lint:fix

Building the library

npm run build

Publishing the library

In order to publish the package, you need to follow these steps

Bumping the package version

npm version patch -m "message"

Adding a git tag

git tag

Pushing to git with tags

 git push --follow-tags

Publishing the package to the registry

 npm publish

About

A virtual keyboard VUE component developed using VUE 3 and Typescript. And using VITE as the bundler and dev server

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published