@composy/keyboard-core 0.0.1

package/es/managers/keyboard-manager.js

@@ -0,0 +1,374 @@
+/*!
+* ***********************************
+* @composy/keyboard-core v0.0.1   *
+* Built with rollup               *
+* Build time: 2024-08-17 11:33:29 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { getLayout } from "../layouts/index.js";
+import { EventEmitter } from "../utils/event-emitter.js";
+import { isMobile, vibrate } from "../utils/device.js";
+import { deleteCharBeforeCursor, getInputCursorPosition, insertTextAtCursor, setInputCursorPosition } from "../utils/dom.js";
+//#region src/managers/keyboard-manager.ts
+const DEFAULT_OPTIONS = {
+	type: "qwerty",
+	value: "",
+	maxLength: void 0,
+	defaultUpperCase: false,
+	closeOnClickOutside: true,
+	enableSound: false,
+	enableVibrate: true,
+	customLayouts: {}
+};
+var KeyboardManager = class extends EventEmitter {
+	constructor(options = {}) {
+		super();
+		/** 当前布局配置 */
+		this.currentLayout = null;
+		this.options = {
+			...DEFAULT_OPTIONS,
+			...options
+		};
+		if (options.customLayouts) Object.entries(options.customLayouts).forEach(([name, layout]) => {
+			this.options.customLayouts[name] = layout;
+		});
+		this.state = {
+			visible: false,
+			type: this.options.type,
+			isUpperCase: this.options.defaultUpperCase,
+			value: this.options.value,
+			cursorPosition: this.options.value.length,
+			maxLength: this.options.maxLength,
+			inputElement: null
+		};
+		this.loadLayout(this.options.type);
+	}
+	/**
+	* 获取当前状态
+	*/
+	getState() {
+		return { ...this.state };
+	}
+	/**
+	* 获取当前布局配置
+	*/
+	getLayout() {
+		return this.currentLayout;
+	}
+	/**
+	* 获取配置选项
+	*/
+	getOptions() {
+		return { ...this.options };
+	}
+	/**
+	* 加载键盘布局
+	*/
+	loadLayout(type) {
+		let layout = this.options.customLayouts[type];
+		if (!layout) layout = getLayout(type);
+		if (!layout) {
+			console.error(`[KeyboardManager] Layout "${type}" not found`);
+			return false;
+		}
+		this.currentLayout = layout;
+		if (layout.supportShift) this.state.isUpperCase = layout.defaultUpperCase ?? this.options.defaultUpperCase;
+		return true;
+	}
+	/**
+	* 显示键盘
+	*/
+	show(inputElement) {
+		if (this.state.visible) return;
+		this.state.visible = true;
+		this.state.inputElement = inputElement ?? null;
+		if (inputElement) {
+			this.state.value = inputElement.value;
+			this.state.cursorPosition = getInputCursorPosition(inputElement);
+		}
+		this.emitStateChange();
+		this.emit("show", { type: this.state.type });
+	}
+	/**
+	* 隐藏键盘
+	*/
+	hide() {
+		if (!this.state.visible) return;
+		const prevType = this.state.type;
+		this.state.visible = false;
+		this.state.inputElement = null;
+		this.emitStateChange();
+		this.emit("hide", { type: prevType });
+	}
+	/**
+	* 切换键盘显示/隐藏
+	*/
+	toggle(inputElement) {
+		if (this.state.visible) this.hide();
+		else this.show(inputElement);
+	}
+	/**
+	* 切换键盘类型
+	*/
+	switchType(type) {
+		if (this.state.type === type) return;
+		const fromType = this.state.type;
+		if (!this.loadLayout(type)) return;
+		this.state.type = type;
+		this.emitStateChange();
+		this.emit("switch", {
+			from: fromType,
+			to: type
+		});
+	}
+	/**
+	* 切换大小写
+	*/
+	toggleShift() {
+		if (!this.currentLayout?.supportShift) return;
+		this.state.isUpperCase = !this.state.isUpperCase;
+		this.emitStateChange();
+		this.emit("shift", { isUpperCase: this.state.isUpperCase });
+	}
+	/**
+	* 设置大小写状态
+	*/
+	setShift(isUpperCase) {
+		if (!this.currentLayout?.supportShift) return;
+		if (this.state.isUpperCase === isUpperCase) return;
+		this.state.isUpperCase = isUpperCase;
+		this.emitStateChange();
+		this.emit("shift", { isUpperCase });
+	}
+	/**
+	* 处理按键
+	*/
+	handleKey(key) {
+		if (this.options.enableVibrate && isMobile()) vibrate(10);
+		this.emit("keypress", {
+			key,
+			value: this.state.value
+		});
+		switch (key.type) {
+			case "char":
+			case "space":
+				this.handleCharKey(key);
+				break;
+			case "backspace":
+				this.handleBackspace();
+				break;
+			case "shift":
+				this.toggleShift();
+				break;
+			case "clear":
+				this.handleClear();
+				break;
+			case "enter":
+			case "done":
+				this.handleConfirm();
+				break;
+			case "close":
+				this.hide();
+				break;
+			case "tab":
+				this.handleTab(key);
+				break;
+			case "custom": break;
+		}
+	}
+	/**
+	* 处理字符输入
+	*/
+	handleCharKey(key) {
+		const keyValue = this.getKeyValue(key);
+		if (!keyValue) return;
+		const input = this.state.inputElement;
+		if (input) {
+			const result = insertTextAtCursor(input, keyValue, this.state.maxLength);
+			input.value = result.value;
+			setInputCursorPosition(input, result.cursorPosition);
+			this.state.value = result.value;
+			this.state.cursorPosition = result.cursorPosition;
+			input.dispatchEvent(new Event("input", { bubbles: true }));
+		} else {
+			if (this.state.maxLength && this.state.value.length >= this.state.maxLength) return;
+			const newValue = this.state.value.slice(0, this.state.cursorPosition) + keyValue + this.state.value.slice(this.state.cursorPosition);
+			this.state.value = newValue;
+			this.state.cursorPosition += keyValue.length;
+		}
+		this.emitStateChange();
+		this.emit("input", {
+			value: this.state.value,
+			key
+		});
+		this.autoSwitchLicensePlate();
+	}
+	/**
+	* 处理退格
+	*/
+	handleBackspace() {
+		const input = this.state.inputElement;
+		if (input) {
+			const result = deleteCharBeforeCursor(input);
+			input.value = result.value;
+			setInputCursorPosition(input, result.cursorPosition);
+			this.state.value = result.value;
+			this.state.cursorPosition = result.cursorPosition;
+			input.dispatchEvent(new Event("input", { bubbles: true }));
+			this.emitStateChange();
+			this.emit("backspace", {
+				deletedChar: result.deletedChar,
+				value: this.state.value
+			});
+		} else {
+			if (this.state.cursorPosition === 0) return;
+			const deletedChar = this.state.value.charAt(this.state.cursorPosition - 1);
+			this.state.value = this.state.value.slice(0, this.state.cursorPosition - 1) + this.state.value.slice(this.state.cursorPosition);
+			this.state.cursorPosition--;
+			this.emitStateChange();
+			this.emit("backspace", {
+				deletedChar,
+				value: this.state.value
+			});
+		}
+		this.autoSwitchLicensePlate();
+	}
+	/**
+	* 车牌号智能切换逻辑
+	* 根据当前值长度自动切换键盘布局
+	* 只有 2 种布局：省份键盘（第1位）和 字母+数字混合键盘（第2-8位）
+	*/
+	autoSwitchLicensePlate() {
+		if (!this.state.type.startsWith("license-plate")) return;
+		const len = this.state.value.length;
+		let targetType = null;
+		if (len === 0) targetType = "license-plate-province";
+		else targetType = "license-plate-alphanumeric";
+		if (targetType && this.state.type !== targetType) this.switchType(targetType);
+	}
+	/**
+	* 处理清空
+	*/
+	handleClear() {
+		const previousValue = this.state.value;
+		if (this.state.inputElement) {
+			this.state.inputElement.value = "";
+			this.state.inputElement.dispatchEvent(new Event("input", { bubbles: true }));
+		}
+		this.state.value = "";
+		this.state.cursorPosition = 0;
+		this.emitStateChange();
+		this.emit("clear", { previousValue });
+		this.autoSwitchLicensePlate();
+	}
+	/**
+	* 处理确认
+	*/
+	handleConfirm() {
+		this.emit("confirm", { value: this.state.value });
+		this.hide();
+	}
+	/**
+	* 处理切换键盘
+	*/
+	handleTab(key) {
+		const targetType = key.data?.targetType;
+		if (targetType) this.switchType(targetType);
+	}
+	/**
+	* 获取按键的实际输出值
+	*/
+	getKeyValue(key) {
+		const value = key.value ?? key.label;
+		if (typeof value === "string") return value;
+		return this.state.isUpperCase ? value.upper : value.lower;
+	}
+	/**
+	* 获取按键的显示文本
+	*/
+	getKeyLabel(key) {
+		const label = key.label;
+		if (typeof label === "string") return label;
+		return this.state.isUpperCase ? label.upper : label.lower;
+	}
+	/**
+	* 设置值
+	*/
+	setValue(value) {
+		this.state.value = value;
+		this.state.cursorPosition = value.length;
+		if (this.state.inputElement) {
+			this.state.inputElement.value = value;
+			setInputCursorPosition(this.state.inputElement, value.length);
+		}
+		this.emitStateChange();
+		this.autoSwitchLicensePlate();
+	}
+	/**
+	* 追加值（在光标位置插入文本）
+	*/
+	appendValue(text) {
+		if (!text) return;
+		const input = this.state.inputElement;
+		if (input) {
+			const result = insertTextAtCursor(input, text, this.state.maxLength);
+			input.value = result.value;
+			setInputCursorPosition(input, result.cursorPosition);
+			this.state.value = result.value;
+			this.state.cursorPosition = result.cursorPosition;
+			input.dispatchEvent(new Event("input", { bubbles: true }));
+		} else {
+			if (this.state.maxLength && this.state.value.length + text.length > this.state.maxLength) text = text.slice(0, this.state.maxLength - this.state.value.length);
+			const newValue = this.state.value.slice(0, this.state.cursorPosition) + text + this.state.value.slice(this.state.cursorPosition);
+			this.state.value = newValue;
+			this.state.cursorPosition += text.length;
+		}
+		this.emitStateChange();
+	}
+	/**
+	* 设置最大长度
+	*/
+	setMaxLength(maxLength) {
+		this.state.maxLength = maxLength;
+		this.emitStateChange();
+	}
+	/**
+	* 绑定输入框
+	*/
+	bindInput(input) {
+		this.state.inputElement = input;
+		this.state.value = input.value;
+		this.state.cursorPosition = getInputCursorPosition(input);
+		this.emitStateChange();
+	}
+	/**
+	* 解绑输入框
+	*/
+	unbindInput() {
+		this.state.inputElement = null;
+		this.emitStateChange();
+	}
+	/**
+	* 发送状态变化事件
+	*/
+	emitStateChange() {
+		this.emit("stateChange", { ...this.state });
+	}
+	/**
+	* 销毁
+	*/
+	destroy() {
+		this.hide();
+		this.clear();
+		this.state.inputElement = null;
+	}
+};
+function createKeyboardManager(options) {
+	return new KeyboardManager(options);
+}
+//#endregion
+export { KeyboardManager, createKeyboardManager };
+/*! End of @composy/keyboard-core | Powered by @composy/builder */
+//# sourceMappingURL=keyboard-manager.js.map

package/es/managers/keyboard-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-manager.js","names":[],"sources":["../../src/managers/keyboard-manager.ts"],"sourcesContent":["/**\n * 键盘管理器\n * @module managers/keyboard-manager\n */\n\nimport type {\n  KeyboardConfig,\n  KeyboardEventMap,\n  KeyboardOptions,\n  KeyboardState,\n  KeyboardType,\n  KeyDefinition,\n} from '../types'\nimport { getLayout } from '../layouts'\nimport { EventEmitter } from '../utils/event-emitter'\nimport { isMobile, vibrate } from '../utils/device'\nimport {\n  deleteCharBeforeCursor,\n  getInputCursorPosition,\n  insertTextAtCursor,\n  setInputCursorPosition,\n} from '../utils/dom'\n\n/**\n * 默认键盘选项\n */\nconst DEFAULT_OPTIONS: Required<KeyboardOptions> = {\n  type: 'qwerty',\n  value: '',\n  maxLength: undefined as unknown as number,\n  defaultUpperCase: false,\n  closeOnClickOutside: true,\n  enableSound: false,\n  enableVibrate: true,\n  customLayouts: {},\n}\n\n/**\n * 键盘管理器类\n * 处理键盘状态管理、输入处理等核心逻辑\n */\nexport class KeyboardManager extends EventEmitter<KeyboardEventMap> {\n  /** 配置选项 */\n  private options: Required<KeyboardOptions>\n\n  /** 当前状态 */\n  private state: KeyboardState\n\n  /** 当前布局配置 */\n  private currentLayout: KeyboardConfig | null = null\n\n  constructor(options: KeyboardOptions = {}) {\n    super()\n    this.options = { ...DEFAULT_OPTIONS, ...options }\n\n    // 注册自定义布局\n    if (options.customLayouts) {\n      Object.entries(options.customLayouts).forEach(([name, layout]) => {\n        // 这里不用 registerLayout 以避免覆盖内置布局的警告\n        this.options.customLayouts[name] = layout\n      })\n    }\n\n    // 初始化状态\n    this.state = {\n      visible: false,\n      type: this.options.type,\n      isUpperCase: this.options.defaultUpperCase,\n      value: this.options.value,\n      cursorPosition: this.options.value.length,\n      maxLength: this.options.maxLength,\n      inputElement: null,\n    }\n\n    // 加载初始布局\n    this.loadLayout(this.options.type)\n  }\n\n  /**\n   * 获取当前状态\n   */\n  getState(): Readonly<KeyboardState> {\n    return { ...this.state }\n  }\n\n  /**\n   * 获取当前布局配置\n   */\n  getLayout(): KeyboardConfig | null {\n    return this.currentLayout\n  }\n\n  /**\n   * 获取配置选项\n   */\n  getOptions(): Readonly<Required<KeyboardOptions>> {\n    return { ...this.options }\n  }\n\n  /**\n   * 加载键盘布局\n   */\n  private loadLayout(type: KeyboardType | string): boolean {\n    // 先从自定义布局查找\n    let layout = this.options.customLayouts[type]\n\n    // 再从内置布局查找\n    if (!layout) {\n      layout = getLayout(type) as KeyboardConfig\n    }\n\n    if (!layout) {\n      console.error(`[KeyboardManager] Layout \"${type}\" not found`)\n      return false\n    }\n\n    this.currentLayout = layout\n\n    // 更新大小写状态\n    if (layout.supportShift) {\n      this.state.isUpperCase = layout.defaultUpperCase ?? this.options.defaultUpperCase\n    }\n\n    return true\n  }\n\n  /**\n   * 显示键盘\n   */\n  show(inputElement?: HTMLInputElement | HTMLTextAreaElement): void {\n    if (this.state.visible) return\n\n    this.state.visible = true\n    this.state.inputElement = inputElement ?? null\n\n    // 同步输入框的值\n    if (inputElement) {\n      this.state.value = inputElement.value\n      this.state.cursorPosition = getInputCursorPosition(inputElement)\n    }\n\n    this.emitStateChange()\n    this.emit('show', { type: this.state.type })\n  }\n\n  /**\n   * 隐藏键盘\n   */\n  hide(): void {\n    if (!this.state.visible) return\n\n    const prevType = this.state.type\n    this.state.visible = false\n    this.state.inputElement = null\n\n    this.emitStateChange()\n    this.emit('hide', { type: prevType })\n  }\n\n  /**\n   * 切换键盘显示/隐藏\n   */\n  toggle(inputElement?: HTMLInputElement | HTMLTextAreaElement): void {\n    if (this.state.visible) {\n      this.hide()\n    }\n    else {\n      this.show(inputElement)\n    }\n  }\n\n  /**\n   * 切换键盘类型\n   */\n  switchType(type: KeyboardType | string): void {\n    if (this.state.type === type) return\n\n    const fromType = this.state.type\n    if (!this.loadLayout(type)) return\n\n    this.state.type = type as KeyboardType\n\n    this.emitStateChange()\n    this.emit('switch', { from: fromType, to: type as KeyboardType })\n  }\n\n  /**\n   * 切换大小写\n   */\n  toggleShift(): void {\n    if (!this.currentLayout?.supportShift) return\n\n    this.state.isUpperCase = !this.state.isUpperCase\n    this.emitStateChange()\n    this.emit('shift', { isUpperCase: this.state.isUpperCase })\n  }\n\n  /**\n   * 设置大小写状态\n   */\n  setShift(isUpperCase: boolean): void {\n    if (!this.currentLayout?.supportShift) return\n    if (this.state.isUpperCase === isUpperCase) return\n\n    this.state.isUpperCase = isUpperCase\n    this.emitStateChange()\n    this.emit('shift', { isUpperCase })\n  }\n\n  /**\n   * 处理按键\n   */\n  handleKey(key: KeyDefinition): void {\n    // 触发震动反馈\n    if (this.options.enableVibrate && isMobile()) {\n      vibrate(10)\n    }\n\n    this.emit('keypress', { key, value: this.state.value })\n\n    switch (key.type) {\n      case 'char':\n      case 'space':\n        this.handleCharKey(key)\n        break\n      case 'backspace':\n        this.handleBackspace()\n        break\n      case 'shift':\n        this.toggleShift()\n        break\n      case 'clear':\n        this.handleClear()\n        break\n      case 'enter':\n      case 'done':\n        this.handleConfirm()\n        break\n      case 'close':\n        this.hide()\n        break\n      case 'tab':\n        this.handleTab(key)\n        break\n      case 'custom':\n        // 自定义按键，只触发事件\n        break\n    }\n  }\n\n  /**\n   * 处理字符输入\n   */\n  private handleCharKey(key: KeyDefinition): void {\n    const keyValue = this.getKeyValue(key)\n    if (!keyValue) return\n\n    const input = this.state.inputElement\n\n    if (input) {\n      // 如果有绑定输入框，直接操作输入框\n      const result = insertTextAtCursor(input, keyValue, this.state.maxLength)\n      input.value = result.value\n      setInputCursorPosition(input, result.cursorPosition)\n      this.state.value = result.value\n      this.state.cursorPosition = result.cursorPosition\n\n      // 触发原生 input 事件\n      input.dispatchEvent(new Event('input', { bubbles: true }))\n    }\n    else {\n      // 没有输入框，直接修改内部值\n      if (this.state.maxLength && this.state.value.length >= this.state.maxLength) {\n        return\n      }\n      const newValue = this.state.value.slice(0, this.state.cursorPosition)\n        + keyValue\n        + this.state.value.slice(this.state.cursorPosition)\n      this.state.value = newValue\n      this.state.cursorPosition += keyValue.length\n    }\n\n    this.emitStateChange()\n    this.emit('input', { value: this.state.value, key })\n\n    // 车牌号智能切换\n    this.autoSwitchLicensePlate()\n  }\n\n  /**\n   * 处理退格\n   */\n  private handleBackspace(): void {\n    const input = this.state.inputElement\n\n    if (input) {\n      const result = deleteCharBeforeCursor(input)\n      input.value = result.value\n      setInputCursorPosition(input, result.cursorPosition)\n      this.state.value = result.value\n      this.state.cursorPosition = result.cursorPosition\n\n      // 触发原生 input 事件\n      input.dispatchEvent(new Event('input', { bubbles: true }))\n\n      this.emitStateChange()\n      this.emit('backspace', { deletedChar: result.deletedChar, value: this.state.value })\n    }\n    else {\n      if (this.state.cursorPosition === 0) return\n\n      const deletedChar = this.state.value.charAt(this.state.cursorPosition - 1)\n      this.state.value = this.state.value.slice(0, this.state.cursorPosition - 1)\n        + this.state.value.slice(this.state.cursorPosition)\n      this.state.cursorPosition--\n\n      this.emitStateChange()\n      this.emit('backspace', { deletedChar, value: this.state.value })\n    }\n\n    // 车牌号智能切换\n    this.autoSwitchLicensePlate()\n  }\n\n  /**\n   * 车牌号智能切换逻辑\n   * 根据当前值长度自动切换键盘布局\n   * 只有 2 种布局：省份键盘（第1位）和 字母+数字混合键盘（第2-8位）\n   */\n  private autoSwitchLicensePlate(): void {\n    // 只在车牌键盘类型时生效\n    if (!this.state.type.startsWith('license-plate')) return\n\n    const len = this.state.value.length\n    let targetType: string | null = null\n\n    if (len === 0) {\n      // 第1位：省份简称\n      targetType = 'license-plate-province'\n    }\n    else {\n      // 第2-8位：字母+数字混合键盘\n      // （第2位虽然只能输入字母，但显示混合键盘，用户自己知道不能输入数字）\n      targetType = 'license-plate-alphanumeric'\n    }\n\n    // 如果需要切换\n    if (targetType && this.state.type !== targetType) {\n      this.switchType(targetType)\n    }\n  }\n\n  /**\n   * 处理清空\n   */\n  private handleClear(): void {\n    const previousValue = this.state.value\n\n    if (this.state.inputElement) {\n      this.state.inputElement.value = ''\n      this.state.inputElement.dispatchEvent(new Event('input', { bubbles: true }))\n    }\n\n    this.state.value = ''\n    this.state.cursorPosition = 0\n\n    this.emitStateChange()\n    this.emit('clear', { previousValue })\n    \n    // 车牌号智能切换\n    this.autoSwitchLicensePlate()\n  }\n\n  /**\n   * 处理确认\n   */\n  private handleConfirm(): void {\n    this.emit('confirm', { value: this.state.value })\n    this.hide()\n  }\n\n  /**\n   * 处理切换键盘\n   */\n  private handleTab(key: KeyDefinition): void {\n    const targetType = key.data?.targetType as KeyboardType | string | undefined\n    if (targetType) {\n      this.switchType(targetType)\n    }\n  }\n\n  /**\n   * 获取按键的实际输出值\n   */\n  private getKeyValue(key: KeyDefinition): string {\n    const value = key.value ?? key.label\n\n    if (typeof value === 'string') {\n      return value\n    }\n\n    return this.state.isUpperCase ? value.upper : value.lower\n  }\n\n  /**\n   * 获取按键的显示文本\n   */\n  getKeyLabel(key: KeyDefinition): string {\n    const label = key.label\n\n    if (typeof label === 'string') {\n      return label\n    }\n\n    return this.state.isUpperCase ? label.upper : label.lower\n  }\n\n  /**\n   * 设置值\n   */\n  setValue(value: string): void {\n    this.state.value = value\n    this.state.cursorPosition = value.length\n\n    if (this.state.inputElement) {\n      this.state.inputElement.value = value\n      setInputCursorPosition(this.state.inputElement, value.length)\n    }\n\n    this.emitStateChange()\n    \n    // 车牌号智能切换\n    this.autoSwitchLicensePlate()\n  }\n\n  /**\n   * 追加值（在光标位置插入文本）\n   */\n  appendValue(text: string): void {\n    if (!text) return\n\n    const input = this.state.inputElement\n\n    if (input) {\n      const result = insertTextAtCursor(input, text, this.state.maxLength)\n      input.value = result.value\n      setInputCursorPosition(input, result.cursorPosition)\n      this.state.value = result.value\n      this.state.cursorPosition = result.cursorPosition\n\n      // 触发原生 input 事件\n      input.dispatchEvent(new Event('input', { bubbles: true }))\n    }\n    else {\n      if (this.state.maxLength && this.state.value.length + text.length > this.state.maxLength) {\n        text = text.slice(0, this.state.maxLength - this.state.value.length)\n      }\n      const newValue = this.state.value.slice(0, this.state.cursorPosition)\n        + text\n        + this.state.value.slice(this.state.cursorPosition)\n      this.state.value = newValue\n      this.state.cursorPosition += text.length\n    }\n\n    this.emitStateChange()\n  }\n\n  /**\n   * 设置最大长度\n   */\n  setMaxLength(maxLength?: number): void {\n    this.state.maxLength = maxLength\n    this.emitStateChange()\n  }\n\n  /**\n   * 绑定输入框\n   */\n  bindInput(input: HTMLInputElement | HTMLTextAreaElement): void {\n    this.state.inputElement = input\n    this.state.value = input.value\n    this.state.cursorPosition = getInputCursorPosition(input)\n    this.emitStateChange()\n  }\n\n  /**\n   * 解绑输入框\n   */\n  unbindInput(): void {\n    this.state.inputElement = null\n    this.emitStateChange()\n  }\n\n  /**\n   * 发送状态变化事件\n   */\n  private emitStateChange(): void {\n    this.emit('stateChange', { ...this.state })\n  }\n\n  /**\n   * 销毁\n   */\n  destroy(): void {\n    this.hide()\n    this.clear()\n    this.state.inputElement = null\n  }\n}\n\n/**\n * 创建键盘管理器实例\n */\nexport function createKeyboardManager(options?: KeyboardOptions): KeyboardManager {\n  return new KeyboardManager(options)\n}\n"],"mappings":"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"}

package/es/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/es/managers/keyboard-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-renderer.d.ts","sourceRoot":"","sources":["../../src/managers/keyboard-renderer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAEV,eAAe,EACf,YAAY,EAEZ,mBAAmB,EACpB,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAMpD;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,6BAA6B;IAC7B,SAAS,CAAC,EAAE,WAAW,CAAA;IACvB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IAC5B,YAAY;IACZ,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,aAAa;IACb,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,WAAW;IACX,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,aAAa;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;GAGG;AACH,qBAAa,gBAAgB;IAC3B,YAAY;IACZ,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAA;IAEjC,YAAY;IACZ,OAAO,CAAC,eAAe,CAAiB;IAExC,SAAS;IACT,OAAO,CAAC,OAAO,CAAyB;IAExC,aAAa;IACb,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,UAAU,CAA2B;IAE7C,WAAW;IACX,OAAO,CAAC,SAAS,CAAa;IAE9B,WAAW;IACX,OAAO,CAAC,KAAK,CAAa;IAE1B,aAAa;IACb,OAAO,CAAC,QAAQ,CAAsD;IAEtE,WAAW;IACX,OAAO,CAAC,UAAU,CAAwB;IAE1C,YAAY;IACZ,OAAO,CAAC,SAAS,CAAQ;gBAEb,OAAO,GAAE,uBAA4B;IAmBjD;;OAEG;IACH,OAAO,CAAC,WAAW;IA8BnB;;OAEG;IACH,IAAI,CAAC,MAAM,CAAC,EAAE,gBAAgB,GAAG,mBAAmB,GAAG,IAAI;IAK3D;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI;IAI7C;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAW3C;;OAEG;IACH,QAAQ,IAAI,MAAM;IAIlB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B;;OAEG;IACH,OAAO,CAAC,MAAM;IA8Ed;;OAEG;IACH,OAAO,CAAC,cAAc;IAiEtB;;OAEG;IACH,OAAO,CAAC,WAAW;IAQnB;;OAEG;IACH,OAAO,CAAC,OAAO;IAYf;;OAEG;IACH,OAAO,CAAC,YAAY;IAiCpB;;OAEG;IACH,SAAS,CAAC,KAAK,EAAE,gBAAgB,GAAG,mBAAmB,GAAG,MAAM,IAAI;IAepE;;OAEG;IACH,OAAO,IAAI,IAAI;CAUhB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,CAAC,EAAE,uBAAuB,GAAG,gBAAgB,CAE1F"}