@webkeypad/core/dist/index.mjs

Lightweight customizable on-screen keyboard core

// src/style-injector.ts
var style = `.webkeypad-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.webkeypad-row {
  display: flex;
  gap: 0.25rem;
}

.webkeypad-key {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f9f9f9;
  cursor: pointer;
  font-size: 1rem;
  user-select: none;
}

.webkeypad-key:hover {
  background-color: #e0e0e0;
}`;
function injectDefaultStyles() {
  if (document.querySelector("[data-webkeypad-style]")) return;
  const tag = document.createElement("style");
  tag.setAttribute("data-webkeypad-style", "true");
  tag.textContent = style;
  document.head.appendChild(tag);
}

// src/index.ts
var VirtualKeyboard = class {
  constructor(options) {
    this.container = null;
    injectDefaultStyles();
    this.layout = options.layout;
    this.onKeyPress = options.onKeyPress;
  }
  mount(container) {
    this.container = container;
    this.render();
  }
  updateLayout(layout) {
    this.layout = layout;
    this.render();
  }
  render() {
    var _a;
    const container = this.container;
    if (!container) return;
    container.innerHTML = "";
    container.className = ((_a = this.classNames) == null ? void 0 : _a.root) || "webkeypad-container";
    this.layout.forEach((row) => {
      var _a2;
      const rowEl = document.createElement("div");
      rowEl.className = ((_a2 = this.classNames) == null ? void 0 : _a2.row) || "webkeypad-row";
      row.forEach((key) => {
        var _a3;
        const keyEl = document.createElement("button");
        keyEl.className = ((_a3 = this.classNames) == null ? void 0 : _a3.key) || "webkeypad-key";
        keyEl.textContent = key;
        keyEl.onclick = () => {
          if (this.onKeyPress) {
            this.onKeyPress(key);
          }
        };
        rowEl.appendChild(keyEl);
      });
      container.appendChild(rowEl);
    });
  }
  destroy() {
    if (this.container) {
      this.container.innerHTML = "";
      this.container = null;
    }
  }
};
export {
  VirtualKeyboard
};