light-cmd-palette

v0.1.2

Published

8 months ago

A lightweight and customizable command palette using only vanilla JS and CSS.

Downloads

0High
0Medium
0Low

julianmateu

command palette ui vanilla-js lightweight

Light Command Palette

A screenshot of the light command palette in a sample project

Description

Light Command Palette is a lightweight, customizable command palette built using vanilla JavaScript and CSS. It's designed for projects that require a simple yet powerful command interface without the overhead of additional dependencies.

Features

🪶 Lightweight: No heavy frameworks or libraries.
⚙️ Customizable: Easily style and configure to fit your project.
✅ Easy Integration: Simple setup for any web project.

Installation

NPM

npm install light-cmd-palette

import { initializeCommandPalette } from 'light-cmd-palette/src/commandPalette.js';
import 'light-cmd-palette/src/commandPalette.css'

const commands = [
    { name: "Print", action: () => window.print() },
    { name: "Alert", action: () => alert("Executed Command 2") },
    // Add more commands here
]

// These are the default options (optional), each element can be overriden when calling
// the initialize function
const options = {
    shortcutKey: 'H', // Default key
    ctrlKey: true,    // Use Ctrl key
    shiftKey: true,   // Use Shift key
    altKey: false     // Do not use Alt key by default
};

initializeCommandPalette(commands, options)

Static files

Light Command Palette can be included in your project by directly using the JavaScript and CSS files in the src directory.

Usage

The Light Command Palette is launched with the Ctrl+Shift+H command to avoid colissions with other shortcuts, but this can be customized to other combinations of Ctrl, Shift, Alt and letter keys.

To use Light Command Palette in your project, simply include the CSS and JS files in the src directory in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... other head elements ... -->
    <link rel="stylesheet" href="path/to/commandPalette.css">
</head>
<body>

    <!-- ... your HTML content ... -->

    <script type="module">
        import { initializeCommandPalette } from 'path/to/commandPalette.js';
        const commands = [
            { name: "Command 1", action: () => { /* Command 1 action */ } },
            { name: "Command 2", action: () => { /* Command 2 action */ } }
            // ... other commands ...
        ];
        initializeCommandPalette(commands);
    </script>
</body>
</html>

Or import the file in your JavaScript file directly:

import { initializeCommandPalette } from "path/to/commandPalette.js"

const commands = [
        { name: "Command 1", action: () => { /* Command 1 action */ } },
        { name: "Command 2", action: () => { /* Command 2 action */ } }
        // ... other commands ...
    ];

initializeCommandPalette(commands, { shortcutKey: "P" });

See examples/index.html for a complete example.

You can browse these examples with:

npx http-server examples

Running Tests

Light Command Palette uses Playwright for end-to-end testing. To run tests:

Install the dependencies:

npm install

Run the linter:

npm run lint

Run the tests:

npm run test

This command will execute the tests defined in the Playwright configuration.

Contributing

Contributions to Light Command Palette are welcome! Please read our contributing guidelines for details on how to submit pull requests, report issues, or request features.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme