@composy/keyboard-core 0.0.1

package/lib/managers/keyboard-renderer.cjs

@@ -0,0 +1,285 @@
+/*!
+* ***********************************
+* @composy/keyboard-core v0.0.1   *
+* Built with rollup               *
+* Build time: 2024-08-17 11:33:29 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_device = require("../utils/device.cjs");
+const require_dom = require("../utils/dom.cjs");
+const require_keyboard_manager = require("./keyboard-manager.cjs");
+const require_position_manager = require("./position-manager.cjs");
+const require_presets = require("../themes/presets.cjs");
+const require_index = require("../themes/index.cjs");
+//#region src/managers/keyboard-renderer.ts
+var KeyboardRenderer = class {
+	constructor(options = {}) {
+		/** DOM 元素 */
+		this.rootEl = null;
+		this.maskEl = null;
+		this.keyboardEl = null;
+		/** 当前目标元素 */
+		this.targetEl = null;
+		/** 清理函数 */
+		this.cleanupFns = [];
+		/** 是否已销毁 */
+		this.destroyed = false;
+		this.options = options;
+		this.container = options.container || document.body;
+		this.manager = new require_keyboard_manager.KeyboardManager(options);
+		this.positionManager = new require_position_manager.PositionManager(options.position);
+		if (typeof options.theme === "string") this.theme = require_index.getTheme(options.theme);
+		else if (options.theme) this.theme = options.theme;
+		else this.theme = require_presets.defaultTheme;
+		this.setupEvents();
+	}
+	/**
+	* 设置事件监听
+	*/
+	setupEvents() {
+		this.manager.on("stateChange", (state) => {
+			if (state.visible) this.render();
+			else this.unmount();
+		});
+		this.manager.on("input", ({ value }) => {
+			this.options.onInput?.(value);
+		});
+		this.manager.on("confirm", ({ value }) => {
+			this.options.onConfirm?.(value);
+		});
+		this.manager.on("switch", () => {
+			if (this.manager.getState().visible) this.render();
+		});
+		this.manager.on("shift", () => {
+			if (this.manager.getState().visible) this.render();
+		});
+	}
+	/**
+	* 打开键盘
+	*/
+	open(target) {
+		this.targetEl = target ?? null;
+		this.manager.show(target);
+	}
+	/**
+	* 关闭键盘
+	*/
+	close() {
+		this.manager.hide();
+		this.options.onClose?.();
+	}
+	/**
+	* 切换键盘类型
+	*/
+	switchType(type) {
+		this.manager.switchType(type);
+	}
+	/**
+	* 设置主题
+	*/
+	setTheme(theme) {
+		if (typeof theme === "string") this.theme = require_index.getTheme(theme);
+		else this.theme = theme;
+		if (this.manager.getState().visible) this.render();
+	}
+	/**
+	* 获取当前值
+	*/
+	getValue() {
+		return this.manager.getState().value;
+	}
+	/**
+	* 设置值
+	*/
+	setValue(value) {
+		this.manager.setValue(value);
+	}
+	/**
+	* 渲染键盘 DOM
+	*/
+	render() {
+		const layout = this.manager.getLayout();
+		if (!layout) return;
+		this.unmount();
+		this.rootEl = document.createElement("div");
+		this.rootEl.className = "lk-renderer-root";
+		const isMobileDevice = require_device.isMobile();
+		if (isMobileDevice) {
+			this.maskEl = document.createElement("div");
+			this.maskEl.className = "lk-mask";
+			this.maskEl.addEventListener("click", () => this.close());
+			this.rootEl.appendChild(this.maskEl);
+		}
+		this.keyboardEl = document.createElement("div");
+		this.keyboardEl.className = `lk-popup lk-popup--${isMobileDevice ? "mobile" : "desktop"}`;
+		const cssVars = require_index.themeToCSS(this.theme);
+		Object.entries(cssVars).forEach(([key, value]) => {
+			if (value) this.keyboardEl.style.setProperty(key, value);
+		});
+		const contentEl = this.renderKeyboard(layout);
+		this.keyboardEl.appendChild(contentEl);
+		this.rootEl.appendChild(this.keyboardEl);
+		this.container.appendChild(this.rootEl);
+		if (!isMobileDevice && this.targetEl) {
+			const rect = this.keyboardEl.getBoundingClientRect();
+			const result = this.positionManager.calculate(this.targetEl, {
+				width: rect.width,
+				height: rect.height
+			});
+			this.keyboardEl.style.position = "fixed";
+			this.keyboardEl.style.left = `${result.position.x}px`;
+			this.keyboardEl.style.top = `${result.position.y}px`;
+			this.keyboardEl.style.zIndex = "10000";
+		} else if (isMobileDevice) {
+			this.keyboardEl.style.position = "fixed";
+			this.keyboardEl.style.left = "0";
+			this.keyboardEl.style.right = "0";
+			this.keyboardEl.style.bottom = "0";
+			this.keyboardEl.style.zIndex = "10000";
+		}
+		requestAnimationFrame(() => {
+			this.keyboardEl?.classList.add("lk-popup--visible");
+			this.maskEl?.classList.add("lk-mask--visible");
+		});
+		if (this.options.closeOnClickOutside !== false && this.keyboardEl) {
+			const cleanup = require_dom.onClickOutside(this.keyboardEl, (event) => {
+				if (this.targetEl && this.targetEl.contains(event.target)) return;
+				this.close();
+			});
+			this.cleanupFns.push(cleanup);
+		}
+		this.injectStyles();
+	}
+	/**
+	* 渲染键盘内容
+	*/
+	renderKeyboard(layout) {
+		const el = document.createElement("div");
+		el.className = "lk-keyboard";
+		const state = this.manager.getState();
+		layout.rows.forEach((row) => {
+			const rowEl = document.createElement("div");
+			rowEl.className = `lk-row ${row.className || ""}`;
+			const isNumpad = row.className === "numpad-row";
+			row.keys.forEach((key) => {
+				const wrapperEl = document.createElement("div");
+				wrapperEl.className = "lk-key-wrapper";
+				if (isNumpad) wrapperEl.style.flex = String(key.width ?? 1);
+				else if (key.width) {
+					const baseW = 36;
+					const gap = this.theme.sizes?.keyGap ?? 6;
+					const w = baseW * key.width + (key.width - 1) * gap;
+					wrapperEl.style.width = `${w}px`;
+				}
+				const btnEl = document.createElement("button");
+				btnEl.type = "button";
+				btnEl.className = this.getKeyClass(key, state.isUpperCase);
+				if (key.disabled) btnEl.disabled = true;
+				if (key.icon) btnEl.innerHTML = key.icon;
+				else btnEl.textContent = typeof key.label === "string" ? key.label : state.isUpperCase ? key.label.upper : key.label.lower;
+				const handler = (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					if (!key.disabled) this.manager.handleKey(key);
+				};
+				btnEl.addEventListener("mousedown", handler);
+				btnEl.addEventListener("touchstart", handler, { passive: false });
+				wrapperEl.appendChild(btnEl);
+				rowEl.appendChild(wrapperEl);
+			});
+			el.appendChild(rowEl);
+		});
+		return el;
+	}
+	/**
+	* 获取按键 CSS 类名
+	*/
+	getKeyClass(key, isUpperCase) {
+		const classes = ["lk-key", `lk-key--${key.type}`];
+		if (key.className) classes.push(key.className);
+		if (key.disabled) classes.push("lk-key--disabled");
+		if (key.type === "shift" && isUpperCase) classes.push("lk-key--active");
+		return classes.join(" ");
+	}
+	/**
+	* 卸载 DOM
+	*/
+	unmount() {
+		this.cleanupFns.forEach((fn) => fn());
+		this.cleanupFns = [];
+		if (this.rootEl && this.rootEl.parentNode) this.rootEl.parentNode.removeChild(this.rootEl);
+		this.rootEl = null;
+		this.maskEl = null;
+		this.keyboardEl = null;
+	}
+	/**
+	* 注入样式（单例）
+	*/
+	injectStyles() {
+		if (document.getElementById("lk-renderer-styles")) return;
+		const style = document.createElement("style");
+		style.id = "lk-renderer-styles";
+		style.textContent = `
+      .lk-renderer-root { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+      .lk-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 9999; opacity: 0; transition: opacity 0.3s ease; }
+      .lk-mask--visible { opacity: 1; }
+      .lk-popup { background: var(--keyboard-bg, #d1d5db); box-shadow: 0 -2px 16px rgba(0,0,0,0.15); overflow: hidden; transform: translateY(20px); opacity: 0; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease; }
+      .lk-popup--visible { transform: translateY(0); opacity: 1; }
+      .lk-popup--desktop { border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1); min-width: 320px; }
+      .lk-popup--mobile { border-top-left-radius: 16px; border-top-right-radius: 16px; padding-bottom: env(safe-area-inset-bottom, 0); }
+      .lk-keyboard { display: flex; flex-direction: column; gap: var(--keyboard-key-gap, 6px); padding: var(--keyboard-padding, 6px); user-select: none; -webkit-user-select: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; }
+      .lk-row { display: flex; justify-content: center; gap: var(--keyboard-key-gap, 6px); padding: 0 2px; }
+      .lk-row.numpad-row { justify-content: stretch; }
+      .lk-row.numpad-row .lk-key-wrapper { flex: 1; }
+      .lk-key-wrapper { position: relative; display: inline-flex; }
+      .lk-key { display: inline-flex; align-items: center; justify-content: center; height: var(--keyboard-key-height, 42px); min-width: 32px; width: 100%; padding: 0 6px; border: none; border-radius: var(--keyboard-key-radius, 6px); background: var(--keyboard-key-bg, #fff); color: var(--keyboard-key-color, #333); font-size: var(--keyboard-font-size, 16px); font-weight: 500; cursor: pointer; touch-action: manipulation; box-shadow: var(--keyboard-key-shadow, 0 1px 3px rgba(0,0,0,0.1)); transition: background-color 0.1s, transform 0.1s; }
+      .lk-key:active { background: var(--keyboard-key-active-bg, #e0e0e0); transform: scale(0.95); }
+      .lk-key--disabled { opacity: 0.4; cursor: not-allowed; }
+      .lk-key--disabled:active { transform: none; background: var(--keyboard-key-bg, #fff); }
+      .lk-key--backspace, .lk-key--shift, .lk-key--tab, .lk-key--clear, .lk-key--close { background: var(--keyboard-fn-key-bg, #d4d6dc); color: var(--keyboard-fn-key-color, #333); font-size: var(--keyboard-fn-font-size, 14px); }
+      .lk-key--backspace:active, .lk-key--shift:active, .lk-key--tab:active, .lk-key--clear:active, .lk-key--close:active { background: var(--keyboard-fn-key-active-bg, #b8bac0); }
+      .lk-key--active { background: var(--keyboard-key-active-bg, #007aff) !important; color: #fff !important; }
+      .lk-key--done, .lk-key--enter { background: var(--keyboard-primary-bg, #007aff); color: var(--keyboard-primary-color, #fff); font-size: var(--keyboard-fn-font-size, 14px); }
+      .lk-key--done:active, .lk-key--enter:active { background: var(--keyboard-primary-active-bg, #0062cc); }
+      .lk-key--space { background: var(--keyboard-key-bg, #fff); }
+      .lk-key svg { pointer-events: none; }
+    `;
+		document.head.appendChild(style);
+	}
+	/**
+	* 绑定到输入框（聚焦时自动打开键盘）
+	*/
+	bindInput(input) {
+		const handleFocus = () => this.open(input);
+		input.addEventListener("focus", handleFocus);
+		input.setAttribute("readonly", "readonly");
+		input.style.caretColor = "transparent";
+		return () => {
+			input.removeEventListener("focus", handleFocus);
+			input.removeAttribute("readonly");
+			input.style.caretColor = "";
+		};
+	}
+	/**
+	* 销毁渲染器
+	*/
+	destroy() {
+		if (this.destroyed) return;
+		this.destroyed = true;
+		this.unmount();
+		this.manager.destroy();
+		const styleEl = document.getElementById("lk-renderer-styles");
+		if (styleEl) styleEl.remove();
+	}
+};
+function createKeyboardRenderer(options) {
+	return new KeyboardRenderer(options);
+}
+//#endregion
+exports.KeyboardRenderer = KeyboardRenderer;
+exports.createKeyboardRenderer = createKeyboardRenderer;
+/*! End of @composy/keyboard-core | Powered by @composy/builder */
+//# sourceMappingURL=keyboard-renderer.cjs.map

package/lib/managers/keyboard-renderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-renderer.cjs","names":[],"sources":["../../src/managers/keyboard-renderer.ts"],"sourcesContent":["/**\n * 键盘 DOM 渲染器\n * 框架无关的键盘渲染器，用于原生 JS 项目\n * @module managers/keyboard-renderer\n */\n\nimport type {\n  KeyboardConfig,\n  KeyboardOptions,\n  KeyboardType,\n  KeyDefinition,\n  PopupPositionConfig,\n} from '../types'\nimport type { ThemeConfig } from '../themes/types'\nimport { KeyboardManager } from './keyboard-manager'\nimport { PositionManager } from './position-manager'\nimport { getTheme, themeToCSS, defaultTheme } from '../themes'\nimport { isMobile } from '../utils/device'\nimport { onClickOutside } from '../utils/dom'\n\n/**\n * 渲染器配置\n */\nexport interface KeyboardRendererOptions extends KeyboardOptions {\n  /** 挂载容器（默认 document.body） */\n  container?: HTMLElement\n  /** 主题名称或主题配置 */\n  theme?: string | ThemeConfig\n  /** 弹出层配置 */\n  position?: PopupPositionConfig\n  /** 点击外部关闭 */\n  closeOnClickOutside?: boolean\n  /** 确认回调 */\n  onConfirm?: (value: string) => void\n  /** 输入变化回调 */\n  onInput?: (value: string) => void\n  /** 关闭回调 */\n  onClose?: () => void\n}\n\n/**\n * 键盘 DOM 渲染器\n * 提供完整的键盘 DOM 创建、事件绑定、位置管理\n */\nexport class KeyboardRenderer {\n  /** 键盘管理器 */\n  readonly manager: KeyboardManager\n\n  /** 位置管理器 */\n  private positionManager: PositionManager\n\n  /** 配置 */\n  private options: KeyboardRendererOptions\n\n  /** DOM 元素 */\n  private rootEl: HTMLElement | null = null\n  private maskEl: HTMLElement | null = null\n  private keyboardEl: HTMLElement | null = null\n\n  /** 挂载容器 */\n  private container: HTMLElement\n\n  /** 主题配置 */\n  private theme: ThemeConfig\n\n  /** 当前目标元素 */\n  private targetEl: HTMLInputElement | HTMLTextAreaElement | null = null\n\n  /** 清理函数 */\n  private cleanupFns: Array<() => void> = []\n\n  /** 是否已销毁 */\n  private destroyed = false\n\n  constructor(options: KeyboardRendererOptions = {}) {\n    this.options = options\n    this.container = options.container || document.body\n    this.manager = new KeyboardManager(options)\n    this.positionManager = new PositionManager(options.position)\n\n    // 解析主题\n    if (typeof options.theme === 'string') {\n      this.theme = getTheme(options.theme)\n    } else if (options.theme) {\n      this.theme = options.theme\n    } else {\n      this.theme = defaultTheme\n    }\n\n    // 绑定事件\n    this.setupEvents()\n  }\n\n  /**\n   * 设置事件监听\n   */\n  private setupEvents(): void {\n    this.manager.on('stateChange', (state) => {\n      if (state.visible) {\n        this.render()\n      } else {\n        this.unmount()\n      }\n    })\n\n    this.manager.on('input', ({ value }) => {\n      this.options.onInput?.(value)\n    })\n\n    this.manager.on('confirm', ({ value }) => {\n      this.options.onConfirm?.(value)\n    })\n\n    this.manager.on('switch', () => {\n      if (this.manager.getState().visible) {\n        this.render()\n      }\n    })\n\n    this.manager.on('shift', () => {\n      if (this.manager.getState().visible) {\n        this.render()\n      }\n    })\n  }\n\n  /**\n   * 打开键盘\n   */\n  open(target?: HTMLInputElement | HTMLTextAreaElement): void {\n    this.targetEl = target ?? null\n    this.manager.show(target)\n  }\n\n  /**\n   * 关闭键盘\n   */\n  close(): void {\n    this.manager.hide()\n    this.options.onClose?.()\n  }\n\n  /**\n   * 切换键盘类型\n   */\n  switchType(type: KeyboardType | string): void {\n    this.manager.switchType(type)\n  }\n\n  /**\n   * 设置主题\n   */\n  setTheme(theme: string | ThemeConfig): void {\n    if (typeof theme === 'string') {\n      this.theme = getTheme(theme)\n    } else {\n      this.theme = theme\n    }\n    if (this.manager.getState().visible) {\n      this.render()\n    }\n  }\n\n  /**\n   * 获取当前值\n   */\n  getValue(): string {\n    return this.manager.getState().value\n  }\n\n  /**\n   * 设置值\n   */\n  setValue(value: string): void {\n    this.manager.setValue(value)\n  }\n\n  /**\n   * 渲染键盘 DOM\n   */\n  private render(): void {\n    const layout = this.manager.getLayout()\n    if (!layout) return\n\n    // 清理旧的 DOM\n    this.unmount()\n\n    // 创建根元素\n    this.rootEl = document.createElement('div')\n    this.rootEl.className = 'lk-renderer-root'\n\n    const isMobileDevice = isMobile()\n\n    // 移动端创建遮罩\n    if (isMobileDevice) {\n      this.maskEl = document.createElement('div')\n      this.maskEl.className = 'lk-mask'\n      this.maskEl.addEventListener('click', () => this.close())\n      this.rootEl.appendChild(this.maskEl)\n    }\n\n    // 创建键盘容器\n    this.keyboardEl = document.createElement('div')\n    this.keyboardEl.className = `lk-popup lk-popup--${isMobileDevice ? 'mobile' : 'desktop'}`\n\n    // 应用主题 CSS 变量\n    const cssVars = themeToCSS(this.theme)\n    Object.entries(cssVars).forEach(([key, value]) => {\n      if (value) {\n        this.keyboardEl!.style.setProperty(key, value)\n      }\n    })\n\n    // 渲染键盘内容\n    const contentEl = this.renderKeyboard(layout)\n    this.keyboardEl.appendChild(contentEl)\n\n    this.rootEl.appendChild(this.keyboardEl)\n    this.container.appendChild(this.rootEl)\n\n    // 计算位置\n    if (!isMobileDevice && this.targetEl) {\n      const rect = this.keyboardEl.getBoundingClientRect()\n      const result = this.positionManager.calculate(this.targetEl, {\n        width: rect.width,\n        height: rect.height,\n      })\n      this.keyboardEl.style.position = 'fixed'\n      this.keyboardEl.style.left = `${result.position.x}px`\n      this.keyboardEl.style.top = `${result.position.y}px`\n      this.keyboardEl.style.zIndex = '10000'\n    } else if (isMobileDevice) {\n      this.keyboardEl.style.position = 'fixed'\n      this.keyboardEl.style.left = '0'\n      this.keyboardEl.style.right = '0'\n      this.keyboardEl.style.bottom = '0'\n      this.keyboardEl.style.zIndex = '10000'\n    }\n\n    // 添加动画类\n    requestAnimationFrame(() => {\n      this.keyboardEl?.classList.add('lk-popup--visible')\n      this.maskEl?.classList.add('lk-mask--visible')\n    })\n\n    // 点击外部关闭\n    if (this.options.closeOnClickOutside !== false && this.keyboardEl) {\n      const cleanup = onClickOutside(this.keyboardEl, (event) => {\n        if (this.targetEl && this.targetEl.contains(event.target as Node)) return\n        this.close()\n      })\n      this.cleanupFns.push(cleanup)\n    }\n\n    // 注入样式\n    this.injectStyles()\n  }\n\n  /**\n   * 渲染键盘内容\n   */\n  private renderKeyboard(layout: KeyboardConfig): HTMLElement {\n    const el = document.createElement('div')\n    el.className = 'lk-keyboard'\n\n    const state = this.manager.getState()\n\n    layout.rows.forEach((row) => {\n      const rowEl = document.createElement('div')\n      rowEl.className = `lk-row ${row.className || ''}`\n\n      const isNumpad = row.className === 'numpad-row'\n\n      row.keys.forEach((key) => {\n        const wrapperEl = document.createElement('div')\n        wrapperEl.className = 'lk-key-wrapper'\n\n        if (isNumpad) {\n          wrapperEl.style.flex = String(key.width ?? 1)\n        } else if (key.width) {\n          const baseW = 36\n          const gap = this.theme.sizes?.keyGap ?? 6\n          const w = baseW * key.width + (key.width - 1) * gap\n          wrapperEl.style.width = `${w}px`\n        }\n\n        const btnEl = document.createElement('button')\n        btnEl.type = 'button'\n        btnEl.className = this.getKeyClass(key, state.isUpperCase)\n\n        if (key.disabled) {\n          btnEl.disabled = true\n        }\n\n        // 内容\n        if (key.icon) {\n          btnEl.innerHTML = key.icon\n        } else {\n          const label = typeof key.label === 'string'\n            ? key.label\n            : state.isUpperCase ? key.label.upper : key.label.lower\n          btnEl.textContent = label\n        }\n\n        // 事件\n        const handler = (e: Event) => {\n          e.preventDefault()\n          e.stopPropagation()\n          if (!key.disabled) {\n            this.manager.handleKey(key)\n          }\n        }\n\n        btnEl.addEventListener('mousedown', handler)\n        btnEl.addEventListener('touchstart', handler, { passive: false })\n\n        wrapperEl.appendChild(btnEl)\n        rowEl.appendChild(wrapperEl)\n      })\n\n      el.appendChild(rowEl)\n    })\n\n    return el\n  }\n\n  /**\n   * 获取按键 CSS 类名\n   */\n  private getKeyClass(key: KeyDefinition, isUpperCase: boolean): string {\n    const classes = ['lk-key', `lk-key--${key.type}`]\n    if (key.className) classes.push(key.className)\n    if (key.disabled) classes.push('lk-key--disabled')\n    if (key.type === 'shift' && isUpperCase) classes.push('lk-key--active')\n    return classes.join(' ')\n  }\n\n  /**\n   * 卸载 DOM\n   */\n  private unmount(): void {\n    this.cleanupFns.forEach(fn => fn())\n    this.cleanupFns = []\n\n    if (this.rootEl && this.rootEl.parentNode) {\n      this.rootEl.parentNode.removeChild(this.rootEl)\n    }\n    this.rootEl = null\n    this.maskEl = null\n    this.keyboardEl = null\n  }\n\n  /**\n   * 注入样式（单例）\n   */\n  private injectStyles(): void {\n    if (document.getElementById('lk-renderer-styles')) return\n\n    const style = document.createElement('style')\n    style.id = 'lk-renderer-styles'\n    style.textContent = `\n      .lk-renderer-root { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }\n      .lk-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 9999; opacity: 0; transition: opacity 0.3s ease; }\n      .lk-mask--visible { opacity: 1; }\n      .lk-popup { background: var(--keyboard-bg, #d1d5db); box-shadow: 0 -2px 16px rgba(0,0,0,0.15); overflow: hidden; transform: translateY(20px); opacity: 0; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease; }\n      .lk-popup--visible { transform: translateY(0); opacity: 1; }\n      .lk-popup--desktop { border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1); min-width: 320px; }\n      .lk-popup--mobile { border-top-left-radius: 16px; border-top-right-radius: 16px; padding-bottom: env(safe-area-inset-bottom, 0); }\n      .lk-keyboard { display: flex; flex-direction: column; gap: var(--keyboard-key-gap, 6px); padding: var(--keyboard-padding, 6px); user-select: none; -webkit-user-select: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; }\n      .lk-row { display: flex; justify-content: center; gap: var(--keyboard-key-gap, 6px); padding: 0 2px; }\n      .lk-row.numpad-row { justify-content: stretch; }\n      .lk-row.numpad-row .lk-key-wrapper { flex: 1; }\n      .lk-key-wrapper { position: relative; display: inline-flex; }\n      .lk-key { display: inline-flex; align-items: center; justify-content: center; height: var(--keyboard-key-height, 42px); min-width: 32px; width: 100%; padding: 0 6px; border: none; border-radius: var(--keyboard-key-radius, 6px); background: var(--keyboard-key-bg, #fff); color: var(--keyboard-key-color, #333); font-size: var(--keyboard-font-size, 16px); font-weight: 500; cursor: pointer; touch-action: manipulation; box-shadow: var(--keyboard-key-shadow, 0 1px 3px rgba(0,0,0,0.1)); transition: background-color 0.1s, transform 0.1s; }\n      .lk-key:active { background: var(--keyboard-key-active-bg, #e0e0e0); transform: scale(0.95); }\n      .lk-key--disabled { opacity: 0.4; cursor: not-allowed; }\n      .lk-key--disabled:active { transform: none; background: var(--keyboard-key-bg, #fff); }\n      .lk-key--backspace, .lk-key--shift, .lk-key--tab, .lk-key--clear, .lk-key--close { background: var(--keyboard-fn-key-bg, #d4d6dc); color: var(--keyboard-fn-key-color, #333); font-size: var(--keyboard-fn-font-size, 14px); }\n      .lk-key--backspace:active, .lk-key--shift:active, .lk-key--tab:active, .lk-key--clear:active, .lk-key--close:active { background: var(--keyboard-fn-key-active-bg, #b8bac0); }\n      .lk-key--active { background: var(--keyboard-key-active-bg, #007aff) !important; color: #fff !important; }\n      .lk-key--done, .lk-key--enter { background: var(--keyboard-primary-bg, #007aff); color: var(--keyboard-primary-color, #fff); font-size: var(--keyboard-fn-font-size, 14px); }\n      .lk-key--done:active, .lk-key--enter:active { background: var(--keyboard-primary-active-bg, #0062cc); }\n      .lk-key--space { background: var(--keyboard-key-bg, #fff); }\n      .lk-key svg { pointer-events: none; }\n    `\n    document.head.appendChild(style)\n  }\n\n  /**\n   * 绑定到输入框（聚焦时自动打开键盘）\n   */\n  bindInput(input: HTMLInputElement | HTMLTextAreaElement): () => void {\n    const handleFocus = () => this.open(input)\n    input.addEventListener('focus', handleFocus)\n\n    // 阻止移动端原生键盘\n    input.setAttribute('readonly', 'readonly')\n    input.style.caretColor = 'transparent'\n\n    return () => {\n      input.removeEventListener('focus', handleFocus)\n      input.removeAttribute('readonly')\n      input.style.caretColor = ''\n    }\n  }\n\n  /**\n   * 销毁渲染器\n   */\n  destroy(): void {\n    if (this.destroyed) return\n    this.destroyed = true\n    this.unmount()\n    this.manager.destroy()\n\n    // 移除样式\n    const styleEl = document.getElementById('lk-renderer-styles')\n    if (styleEl) styleEl.remove()\n  }\n}\n\n/**\n * 创建键盘渲染器\n */\nexport function createKeyboardRenderer(options?: KeyboardRendererOptions): KeyboardRenderer {\n  return new KeyboardRenderer(options)\n}\n"],"mappings":"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"}

package/lib/managers/keyboard-renderer.d.ts

@@ -0,0 +1,115 @@
+/**
+ * 键盘 DOM 渲染器
+ * 框架无关的键盘渲染器，用于原生 JS 项目
+ * @module managers/keyboard-renderer
+ */
+import type { KeyboardOptions, KeyboardType, PopupPositionConfig } from '../types';
+import type { ThemeConfig } from '../themes/types';
+import { KeyboardManager } from './keyboard-manager';
+/**
+ * 渲染器配置
+ */
+export interface KeyboardRendererOptions extends KeyboardOptions {
+    /** 挂载容器（默认 document.body） */
+    container?: HTMLElement;
+    /** 主题名称或主题配置 */
+    theme?: string | ThemeConfig;
+    /** 弹出层配置 */
+    position?: PopupPositionConfig;
+    /** 点击外部关闭 */
+    closeOnClickOutside?: boolean;
+    /** 确认回调 */
+    onConfirm?: (value: string) => void;
+    /** 输入变化回调 */
+    onInput?: (value: string) => void;
+    /** 关闭回调 */
+    onClose?: () => void;
+}
+/**
+ * 键盘 DOM 渲染器
+ * 提供完整的键盘 DOM 创建、事件绑定、位置管理
+ */
+export declare class KeyboardRenderer {
+    /** 键盘管理器 */
+    readonly manager: KeyboardManager;
+    /** 位置管理器 */
+    private positionManager;
+    /** 配置 */
+    private options;
+    /** DOM 元素 */
+    private rootEl;
+    private maskEl;
+    private keyboardEl;
+    /** 挂载容器 */
+    private container;
+    /** 主题配置 */
+    private theme;
+    /** 当前目标元素 */
+    private targetEl;
+    /** 清理函数 */
+    private cleanupFns;
+    /** 是否已销毁 */
+    private destroyed;
+    constructor(options?: KeyboardRendererOptions);
+    /**
+     * 设置事件监听
+     */
+    private setupEvents;
+    /**
+     * 打开键盘
+     */
+    open(target?: HTMLInputElement | HTMLTextAreaElement): void;
+    /**
+     * 关闭键盘
+     */
+    close(): void;
+    /**
+     * 切换键盘类型
+     */
+    switchType(type: KeyboardType | string): void;
+    /**
+     * 设置主题
+     */
+    setTheme(theme: string | ThemeConfig): void;
+    /**
+     * 获取当前值
+     */
+    getValue(): string;
+    /**
+     * 设置值
+     */
+    setValue(value: string): void;
+    /**
+     * 渲染键盘 DOM
+     */
+    private render;
+    /**
+     * 渲染键盘内容
+     */
+    private renderKeyboard;
+    /**
+     * 获取按键 CSS 类名
+     */
+    private getKeyClass;
+    /**
+     * 卸载 DOM
+     */
+    private unmount;
+    /**
+     * 注入样式（单例）
+     */
+    private injectStyles;
+    /**
+     * 绑定到输入框（聚焦时自动打开键盘）
+     */
+    bindInput(input: HTMLInputElement | HTMLTextAreaElement): () => void;
+    /**
+     * 销毁渲染器
+     */
+    destroy(): void;
+}
+/**
+ * 创建键盘渲染器
+ */
+export declare function createKeyboardRenderer(options?: KeyboardRendererOptions): KeyboardRenderer;
+//# sourceMappingURL=keyboard-renderer.d.ts.map

package/lib/managers/position-manager.cjs

@@ -0,0 +1,201 @@
+/*!
+* ***********************************
+* @composy/keyboard-core v0.0.1   *
+* Built with rollup               *
+* Build time: 2024-08-17 11:33:29 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_device = require("../utils/device.cjs");
+const require_dom = require("../utils/dom.cjs");
+//#region src/managers/position-manager.ts
+const DEFAULT_CONFIG = {
+	offset: {
+		x: 0,
+		y: 8
+	},
+	autoAdjust: true,
+	viewportPadding: 8,
+	desktopPlacement: "bottom",
+	mobilePlacement: "bottom-sheet",
+	showMask: true,
+	maskClosable: true,
+	animationDuration: 300
+};
+var PositionManager = class {
+	constructor(config = {}) {
+		this.config = {
+			...DEFAULT_CONFIG,
+			...config
+		};
+	}
+	/**
+	* 更新配置
+	*/
+	updateConfig(config) {
+		Object.assign(this.config, config);
+	}
+	/**
+	* 获取配置
+	*/
+	getConfig() {
+		return { ...this.config };
+	}
+	/**
+	* 计算弹出位置
+	* @param targetElement - 目标元素（如 input）
+	* @param popupSize - 弹出层尺寸
+	* @returns 位置计算结果
+	*/
+	calculate(targetElement, popupSize) {
+		const viewport = require_device.getViewportInfo();
+		const isMobileDevice = require_device.isMobile();
+		if (isMobileDevice && this.config.mobilePlacement === "bottom-sheet") return this.calculateBottomSheet(viewport, popupSize);
+		if (!targetElement) return this.calculateCentered(viewport, popupSize);
+		const targetRect = require_dom.getBoundingRect(targetElement);
+		const placement = isMobileDevice ? this.config.mobilePlacement : this.config.desktopPlacement;
+		const relativePlace = placement === "bottom-sheet" ? "bottom" : placement;
+		return this.calculateRelativeToTarget(targetRect, popupSize, viewport, relativePlace);
+	}
+	/**
+	* 计算 bottom-sheet 位置（移动端从底部滑出）
+	*/
+	calculateBottomSheet(viewport, popupSize) {
+		const safeAreaBottom = viewport.safeArea?.bottom ?? 0;
+		return {
+			position: {
+				x: 0,
+				y: viewport.height - popupSize.height - safeAreaBottom
+			},
+			placement: "bottom-sheet",
+			flipped: false,
+			maxHeight: viewport.height * .6,
+			maxWidth: viewport.width,
+			transform: "translateY(0)"
+		};
+	}
+	/**
+	* 计算居中位置
+	*/
+	calculateCentered(viewport, popupSize) {
+		return {
+			position: {
+				x: (viewport.width - popupSize.width) / 2,
+				y: (viewport.height - popupSize.height) / 2
+			},
+			placement: "bottom",
+			flipped: false
+		};
+	}
+	/**
+	* 计算相对于目标元素的位置
+	*/
+	calculateRelativeToTarget(targetRect, popupSize, viewport, preferredPlacement) {
+		const { offset, viewportPadding, autoAdjust } = this.config;
+		let position;
+		let placement = preferredPlacement;
+		let flipped = false;
+		const bottomPosition = {
+			x: targetRect.x + (offset.x ?? 0),
+			y: targetRect.y + targetRect.height + (offset.y ?? 8)
+		};
+		const topPosition = {
+			x: targetRect.x + (offset.x ?? 0),
+			y: targetRect.y - popupSize.height - (offset.y ?? 8)
+		};
+		if (preferredPlacement === "bottom") {
+			position = bottomPosition;
+			if (autoAdjust && position.y + popupSize.height > viewport.height - viewportPadding) {
+				if (topPosition.y >= viewportPadding) {
+					position = topPosition;
+					placement = "top";
+					flipped = true;
+				}
+			}
+		} else {
+			position = topPosition;
+			if (autoAdjust && position.y < viewportPadding) {
+				if (bottomPosition.y + popupSize.height <= viewport.height - viewportPadding) {
+					position = bottomPosition;
+					placement = "bottom";
+					flipped = true;
+				}
+			}
+		}
+		if (autoAdjust) {
+			if (position.x < viewportPadding) position.x = viewportPadding;
+			if (position.x + popupSize.width > viewport.width - viewportPadding) position.x = viewport.width - popupSize.width - viewportPadding;
+		}
+		const maxHeight = placement === "bottom" ? viewport.height - position.y - viewportPadding : targetRect.y - viewportPadding;
+		return {
+			position,
+			placement,
+			flipped,
+			maxHeight: Math.max(200, maxHeight),
+			maxWidth: viewport.width - viewportPadding * 2
+		};
+	}
+	/**
+	* 获取弹出层初始样式（用于动画）
+	*/
+	getInitialStyles(placement) {
+		switch (placement) {
+			case "bottom-sheet": return {
+				transform: "translateY(100%)",
+				opacity: "1"
+			};
+			case "bottom": return {
+				transform: "translateY(-10px)",
+				opacity: "0"
+			};
+			case "top": return {
+				transform: "translateY(10px)",
+				opacity: "0"
+			};
+			default: return { opacity: "0" };
+		}
+	}
+	/**
+	* 获取弹出层最终样式（动画结束）
+	*/
+	getFinalStyles(placement) {
+		return {
+			transform: "translateY(0)",
+			opacity: "1"
+		};
+	}
+	/**
+	* 获取弹出层退出样式
+	*/
+	getExitStyles(placement) {
+		return this.getInitialStyles(placement);
+	}
+	/**
+	* 获取动画时长
+	*/
+	getAnimationDuration() {
+		return this.config.animationDuration;
+	}
+	/**
+	* 检查是否显示遮罩
+	*/
+	shouldShowMask() {
+		return require_device.isMobile() && this.config.showMask;
+	}
+	/**
+	* 检查遮罩是否可点击关闭
+	*/
+	isMaskClosable() {
+		return this.config.maskClosable;
+	}
+};
+function createPositionManager(config) {
+	return new PositionManager(config);
+}
+//#endregion
+exports.PositionManager = PositionManager;
+exports.createPositionManager = createPositionManager;
+/*! End of @composy/keyboard-core | Powered by @composy/builder */
+//# sourceMappingURL=position-manager.cjs.map

package/lib/managers/position-manager.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"position-manager.cjs","names":[],"sources":["../../src/managers/position-manager.ts"],"sourcesContent":["/**\n * 弹出位置管理器\n * @module managers/position-manager\n */\n\nimport type {\n  BoundingRect,\n  PopupPlacement,\n  PopupPositionConfig,\n  PopupPositionResult,\n  Position,\n} from '../types'\nimport { getBoundingRect } from '../utils/dom'\nimport { getViewportInfo, isMobile } from '../utils/device'\n\n/**\n * 默认位置配置\n */\nconst DEFAULT_CONFIG: Required<PopupPositionConfig> = {\n  offset: { x: 0, y: 8 },\n  autoAdjust: true,\n  viewportPadding: 8,\n  desktopPlacement: 'bottom',\n  mobilePlacement: 'bottom-sheet',\n  showMask: true,\n  maskClosable: true,\n  animationDuration: 300,\n}\n\n/**\n * 位置管理器类\n * 计算键盘弹出层的位置，支持 PC 和移动端自适应\n */\nexport class PositionManager {\n  private config: Required<PopupPositionConfig>\n\n  constructor(config: PopupPositionConfig = {}) {\n    this.config = { ...DEFAULT_CONFIG, ...config }\n  }\n\n  /**\n   * 更新配置\n   */\n  updateConfig(config: Partial<PopupPositionConfig>): void {\n    Object.assign(this.config, config)\n  }\n\n  /**\n   * 获取配置\n   */\n  getConfig(): Readonly<Required<PopupPositionConfig>> {\n    return { ...this.config }\n  }\n\n  /**\n   * 计算弹出位置\n   * @param targetElement - 目标元素（如 input）\n   * @param popupSize - 弹出层尺寸\n   * @returns 位置计算结果\n   */\n  calculate(\n    targetElement: HTMLElement | null,\n    popupSize: { width: number; height: number },\n  ): PopupPositionResult {\n    const viewport = getViewportInfo()\n    const isMobileDevice = isMobile()\n\n    // 移动端使用 bottom-sheet\n    if (isMobileDevice && this.config.mobilePlacement === 'bottom-sheet') {\n      return this.calculateBottomSheet(viewport, popupSize)\n    }\n\n    // PC 端或移动端非 bottom-sheet\n    if (!targetElement) {\n      // 无目标元素，居中显示\n      return this.calculateCentered(viewport, popupSize)\n    }\n\n    const targetRect = getBoundingRect(targetElement)\n    const placement = isMobileDevice\n      ? this.config.mobilePlacement\n      : this.config.desktopPlacement\n\n    // bottom-sheet 已经在前面处理，这里只会是 'bottom' 或 'top'\n    const relativePlace = placement === 'bottom-sheet' ? 'bottom' : placement\n    return this.calculateRelativeToTarget(targetRect, popupSize, viewport, relativePlace)\n  }\n\n  /**\n   * 计算 bottom-sheet 位置（移动端从底部滑出）\n   */\n  private calculateBottomSheet(\n    viewport: { width: number; height: number; scrollY: number; safeArea?: { bottom: number } },\n    popupSize: { width: number; height: number },\n  ): PopupPositionResult {\n    const safeAreaBottom = viewport.safeArea?.bottom ?? 0\n\n    return {\n      position: {\n        x: 0,\n        y: viewport.height - popupSize.height - safeAreaBottom,\n      },\n      placement: 'bottom-sheet',\n      flipped: false,\n      maxHeight: viewport.height * 0.6, // 最大占屏幕高度的 60%\n      maxWidth: viewport.width,\n      transform: 'translateY(0)',\n    }\n  }\n\n  /**\n   * 计算居中位置\n   */\n  private calculateCentered(\n    viewport: { width: number; height: number },\n    popupSize: { width: number; height: number },\n  ): PopupPositionResult {\n    return {\n      position: {\n        x: (viewport.width - popupSize.width) / 2,\n        y: (viewport.height - popupSize.height) / 2,\n      },\n      placement: 'bottom',\n      flipped: false,\n    }\n  }\n\n  /**\n   * 计算相对于目标元素的位置\n   */\n  private calculateRelativeToTarget(\n    targetRect: BoundingRect,\n    popupSize: { width: number; height: number },\n    viewport: { width: number; height: number; scrollX: number; scrollY: number },\n    preferredPlacement: Exclude<PopupPlacement, 'bottom-sheet'>,\n  ): PopupPositionResult {\n    const { offset, viewportPadding, autoAdjust } = this.config\n\n    let position: Position\n    let placement = preferredPlacement\n    let flipped = false\n\n    // 计算 bottom 位置（左对齐）\n    const bottomPosition: Position = {\n      x: targetRect.x + (offset.x ?? 0),\n      y: targetRect.y + targetRect.height + (offset.y ?? 8),\n    }\n\n    // 计算 top 位置（左对齐）\n    const topPosition: Position = {\n      x: targetRect.x + (offset.x ?? 0),\n      y: targetRect.y - popupSize.height - (offset.y ?? 8),\n    }\n\n    if (preferredPlacement === 'bottom') {\n      position = bottomPosition\n\n      // 检查是否需要翻转到顶部\n      if (autoAdjust && position.y + popupSize.height > viewport.height - viewportPadding) {\n        // 检查顶部是否有足够空间\n        if (topPosition.y >= viewportPadding) {\n          position = topPosition\n          placement = 'top'\n          flipped = true\n        }\n      }\n    }\n    else {\n      position = topPosition\n\n      // 检查是否需要翻转到底部\n      if (autoAdjust && position.y < viewportPadding) {\n        // 检查底部是否有足够空间\n        if (bottomPosition.y + popupSize.height <= viewport.height - viewportPadding) {\n          position = bottomPosition\n          placement = 'bottom'\n          flipped = true\n        }\n      }\n    }\n\n    // 水平方向调整，确保不超出视口\n    if (autoAdjust) {\n      // 左边界检查\n      if (position.x < viewportPadding) {\n        position.x = viewportPadding\n      }\n\n      // 右边界检查\n      if (position.x + popupSize.width > viewport.width - viewportPadding) {\n        position.x = viewport.width - popupSize.width - viewportPadding\n      }\n    }\n\n    // 计算最大可用高度\n    const maxHeight = placement === 'bottom'\n      ? viewport.height - position.y - viewportPadding\n      : targetRect.y - viewportPadding\n\n    return {\n      position,\n      placement,\n      flipped,\n      maxHeight: Math.max(200, maxHeight), // 最小高度 200px\n      maxWidth: viewport.width - viewportPadding * 2,\n    }\n  }\n\n  /**\n   * 获取弹出层初始样式（用于动画）\n   */\n  getInitialStyles(placement: PopupPlacement): Partial<CSSStyleDeclaration> {\n    switch (placement) {\n      case 'bottom-sheet':\n        return {\n          transform: 'translateY(100%)',\n          opacity: '1',\n        }\n      case 'bottom':\n        return {\n          transform: 'translateY(-10px)',\n          opacity: '0',\n        }\n      case 'top':\n        return {\n          transform: 'translateY(10px)',\n          opacity: '0',\n        }\n      default:\n        return {\n          opacity: '0',\n        }\n    }\n  }\n\n  /**\n   * 获取弹出层最终样式（动画结束）\n   */\n  getFinalStyles(placement: PopupPlacement): Partial<CSSStyleDeclaration> {\n    return {\n      transform: 'translateY(0)',\n      opacity: '1',\n    }\n  }\n\n  /**\n   * 获取弹出层退出样式\n   */\n  getExitStyles(placement: PopupPlacement): Partial<CSSStyleDeclaration> {\n    return this.getInitialStyles(placement)\n  }\n\n  /**\n   * 获取动画时长\n   */\n  getAnimationDuration(): number {\n    return this.config.animationDuration\n  }\n\n  /**\n   * 检查是否显示遮罩\n   */\n  shouldShowMask(): boolean {\n    return isMobile() && this.config.showMask\n  }\n\n  /**\n   * 检查遮罩是否可点击关闭\n   */\n  isMaskClosable(): boolean {\n    return this.config.maskClosable\n  }\n}\n\n/**\n * 创建位置管理器实例\n */\nexport function createPositionManager(config?: PopupPositionConfig): PositionManager {\n  return new PositionManager(config)\n}\n"],"mappings":"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"}