@composy/keyboard-vue 0.0.1 → 0.0.2

package/lib/composables/useKeyboard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboard.cjs","names":[],"sources":["../../src/composables/useKeyboard.ts"],"sourcesContent":["/**\n * 键盘管理 Composable\n * @module composables/useKeyboard\n */\n\nimport { computed, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue'\nimport type { Ref } from 'vue'\nimport {\n  createKeyboardManager,\n  type KeyboardConfig,\n  type KeyboardEventMap,\n  type KeyboardOptions,\n  type KeyboardState,\n  type KeyboardType,\n  type KeyDefinition,\n} from '@composy/keyboard-core'\n\n/**\n * useKeyboard 选项\n */\nexport interface UseKeyboardOptions extends KeyboardOptions {\n  /**\n   * 是否立即显示\n   */\n  immediate?: boolean\n}\n\n/**\n * useKeyboard 返回值\n */\nexport interface UseKeyboardReturn {\n  /**\n   * 键盘是否可见\n   */\n  visible: Ref<boolean>\n\n  /**\n   * 当前键盘类型\n   */\n  type: Ref<KeyboardType>\n\n  /**\n   * 是否大写状态\n   */\n  isUpperCase: Ref<boolean>\n\n  /**\n   * 当前输入值\n   */\n  value: Ref<string>\n\n  /**\n   * 光标位置\n   */\n  cursorPosition: Ref<number>\n\n  /**\n   * 当前布局配置\n   */\n  layout: Ref<KeyboardConfig | null>\n\n  /**\n   * 完整状态\n   */\n  state: KeyboardState\n\n  /**\n   * 显示键盘\n   */\n  show: (input?: HTMLInputElement | HTMLTextAreaElement) => void\n\n  /**\n   * 隐藏键盘\n   */\n  hide: () => void\n\n  /**\n   * 切换显示/隐藏\n   */\n  toggle: (input?: HTMLInputElement | HTMLTextAreaElement) => void\n\n  /**\n   * 切换键盘类型\n   */\n  switchType: (type: KeyboardType | string) => void\n\n  /**\n   * 切换大小写\n   */\n  toggleShift: () => void\n\n  /**\n   * 处理按键\n   */\n  handleKey: (key: KeyDefinition) => void\n\n  /**\n   * 获取按键显示文本\n   */\n  getKeyLabel: (key: KeyDefinition) => string\n\n  /**\n   * 设置值\n   */\n  setValue: (value: string) => void\n\n  /**\n   * 追加值（在光标位置插入文本）\n   */\n  appendValue: (text: string) => void\n\n  /**\n   * 设置最大长度\n   */\n  setMaxLength: (maxLength?: number) => void\n\n  /**\n   * 绑定输入框\n   */\n  bindInput: (input: HTMLInputElement | HTMLTextAreaElement) => void\n\n  /**\n   * 解绑输入框\n   */\n  unbindInput: () => void\n\n  /**\n   * 事件监听\n   */\n  on: <K extends keyof KeyboardEventMap>(\n    event: K,\n    handler: (data: KeyboardEventMap[K]) => void\n  ) => () => void\n\n  /**\n   * 单次事件监听\n   */\n  once: <K extends keyof KeyboardEventMap>(\n    event: K,\n    handler: (data: KeyboardEventMap[K]) => void\n  ) => () => void\n\n  /**\n   * 销毁\n   */\n  destroy: () => void\n}\n\n/**\n * 键盘管理 Composable\n */\nexport function useKeyboard(options: UseKeyboardOptions = {}): UseKeyboardReturn {\n  const { immediate = false, ...keyboardOptions } = options\n\n  // 创建键盘管理器\n  const manager = createKeyboardManager(keyboardOptions)\n\n  // 响应式状态\n  const visible = ref(false)\n  const type = ref<KeyboardType>(keyboardOptions.type ?? 'qwerty')\n  const isUpperCase = ref(keyboardOptions.defaultUpperCase ?? false)\n  const value = ref(keyboardOptions.value ?? '')\n  const cursorPosition = ref(keyboardOptions.value?.length ?? 0)\n  const layout = shallowRef<KeyboardConfig | null>(manager.getLayout())\n\n  // 完整状态（响应式对象）\n  const state = reactive<KeyboardState>({\n    visible: false,\n    type: keyboardOptions.type ?? 'qwerty',\n    isUpperCase: keyboardOptions.defaultUpperCase ?? false,\n    value: keyboardOptions.value ?? '',\n    cursorPosition: keyboardOptions.value?.length ?? 0,\n    maxLength: keyboardOptions.maxLength,\n    inputElement: null,\n  })\n\n  // 同步管理器状态到 Vue 响应式状态\n  const syncState = (newState: KeyboardState) => {\n    visible.value = newState.visible\n    type.value = newState.type\n    isUpperCase.value = newState.isUpperCase\n    value.value = newState.value\n    cursorPosition.value = newState.cursorPosition\n\n    Object.assign(state, newState)\n  }\n\n  // 监听状态变化\n  manager.on('stateChange', syncState)\n\n  // 监听键盘类型切换，更新布局\n  manager.on('switch', () => {\n    layout.value = manager.getLayout()\n  })\n\n  // 立即显示\n  if (immediate) {\n    manager.show()\n  }\n\n  // 组件卸载时销毁\n  onBeforeUnmount(() => {\n    manager.destroy()\n  })\n\n  return {\n    visible,\n    type,\n    isUpperCase,\n    value,\n    cursorPosition,\n    layout,\n    state,\n    show: (input?: HTMLInputElement | HTMLTextAreaElement) => manager.show(input),\n    hide: () => manager.hide(),\n    toggle: (input?: HTMLInputElement | HTMLTextAreaElement) => manager.toggle(input),\n    switchType: (t: KeyboardType | string) => manager.switchType(t),\n    toggleShift: () => manager.toggleShift(),\n    handleKey: (key: KeyDefinition) => manager.handleKey(key),\n    getKeyLabel: (key: KeyDefinition) => manager.getKeyLabel(key),\n    setValue: (v: string) => manager.setValue(v),\n    appendValue: (text: string) => manager.appendValue(text),\n    setMaxLength: (maxLength?: number) => manager.setMaxLength(maxLength),\n    bindInput: (input: HTMLInputElement | HTMLTextAreaElement) => manager.bindInput(input),\n    unbindInput: () => manager.unbindInput(),\n    on: (event, handler) => manager.on(event, handler),\n    once: (event, handler) => manager.once(event, handler),\n    destroy: () => manager.destroy(),\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAuJO,SAAS,YAAY,UAA8B,CAAC,GAAsB;CAC/E,MAAM,EAAE,YAAY,OAAO,GAAG,oBAAoB;CAGlD,MAAM,WAAA,GAAA,uBAAA,sBAAA,CAAgC,eAAe;CAGrD,MAAM,WAAA,GAAA,IAAA,IAAA,CAAc,KAAK;CACzB,MAAM,QAAA,GAAA,IAAA,IAAA,CAAyB,gBAAgB,QAAQ,QAAQ;CAC/D,MAAM,eAAA,GAAA,IAAA,IAAA,CAAkB,gBAAgB,oBAAoB,KAAK;CACjE,MAAM,SAAA,GAAA,IAAA,IAAA,CAAY,gBAAgB,SAAS,EAAE;CAC7C,MAAM,kBAAA,GAAA,IAAA,IAAA,CAAqB,gBAAgB,OAAO,UAAU,CAAC;CAC7D,MAAM,UAAA,GAAA,IAAA,WAAA,CAA2C,QAAQ,UAAU,CAAC;CAGpE,MAAM,SAAA,GAAA,IAAA,SAAA,CAAgC;EACpC,SAAS;EACT,MAAM,gBAAgB,QAAQ;EAC9B,aAAa,gBAAgB,oBAAoB;EACjD,OAAO,gBAAgB,SAAS;EAChC,gBAAgB,gBAAgB,OAAO,UAAU;EACjD,WAAW,gBAAgB;EAC3B,cAAc;CAChB,CAAC;CAGD,MAAM,aAAa,aAA4B;EAC7C,QAAQ,QAAQ,SAAS;EACzB,KAAK,QAAQ,SAAS;EACtB,YAAY,QAAQ,SAAS;EAC7B,MAAM,QAAQ,SAAS;EACvB,eAAe,QAAQ,SAAS;EAEhC,OAAO,OAAO,OAAO,QAAQ;CAC/B;CAGA,QAAQ,GAAG,eAAe,SAAS;CAGnC,QAAQ,GAAG,gBAAgB;EACzB,OAAO,QAAQ,QAAQ,UAAU;CACnC,CAAC;CAGD,IAAI,WACF,QAAQ,KAAK;CAIf,CAAA,GAAA,IAAA,gBAAA,OAAsB;EACpB,QAAQ,QAAQ;CAClB,CAAC;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAAO,UAAmD,QAAQ,KAAK,KAAK;EAC5E,YAAY,QAAQ,KAAK;EACzB,SAAS,UAAmD,QAAQ,OAAO,KAAK;EAChF,aAAa,MAA6B,QAAQ,WAAW,CAAC;EAC9D,mBAAmB,QAAQ,YAAY;EACvC,YAAY,QAAuB,QAAQ,UAAU,GAAG;EACxD,cAAc,QAAuB,QAAQ,YAAY,GAAG;EAC5D,WAAW,MAAc,QAAQ,SAAS,CAAC;EAC3C,cAAc,SAAiB,QAAQ,YAAY,IAAI;EACvD,eAAe,cAAuB,QAAQ,aAAa,SAAS;EACpE,YAAY,UAAkD,QAAQ,UAAU,KAAK;EACrF,mBAAmB,QAAQ,YAAY;EACvC,KAAK,OAAO,YAAY,QAAQ,GAAG,OAAO,OAAO;EACjD,OAAO,OAAO,YAAY,QAAQ,KAAK,OAAO,OAAO;EACrD,eAAe,QAAQ,QAAQ;CACjC;AACF"}
+{"version":3,"file":"useKeyboard.cjs","names":[],"sources":["../../src/composables/useKeyboard.ts"],"sourcesContent":["/**\r\n * 键盘管理 Composable\r\n * @module composables/useKeyboard\r\n */\r\n\r\nimport type {\r\n  KeyboardConfig,\r\n  KeyboardEventMap,\r\n  KeyboardOptions,\r\n  KeyboardState,\r\n  KeyboardType,\r\n  KeyDefinition,\r\n} from '@composy/keyboard-core'\r\nimport type { Ref } from 'vue'\r\nimport { createKeyboardManager } from '@composy/keyboard-core'\r\nimport { onBeforeUnmount, reactive, ref, shallowRef } from 'vue'\r\n\r\n/**\r\n * useKeyboard 选项\r\n */\r\nexport interface UseKeyboardOptions extends KeyboardOptions {\r\n  /**\r\n   * 是否立即显示\r\n   */\r\n  immediate?: boolean\r\n}\r\n\r\n/**\r\n * useKeyboard 返回值\r\n */\r\nexport interface UseKeyboardReturn {\r\n  /**\r\n   * 键盘是否可见\r\n   */\r\n  visible: Ref<boolean>\r\n\r\n  /**\r\n   * 当前键盘类型\r\n   */\r\n  type: Ref<KeyboardType>\r\n\r\n  /**\r\n   * 是否大写状态\r\n   */\r\n  isUpperCase: Ref<boolean>\r\n\r\n  /**\r\n   * 当前输入值\r\n   */\r\n  value: Ref<string>\r\n\r\n  /**\r\n   * 光标位置\r\n   */\r\n  cursorPosition: Ref<number>\r\n\r\n  /**\r\n   * 当前布局配置\r\n   */\r\n  layout: Ref<KeyboardConfig | null>\r\n\r\n  /**\r\n   * 完整状态\r\n   */\r\n  state: KeyboardState\r\n\r\n  /**\r\n   * 显示键盘\r\n   */\r\n  show: (input?: HTMLInputElement | HTMLTextAreaElement) => void\r\n\r\n  /**\r\n   * 隐藏键盘\r\n   */\r\n  hide: () => void\r\n\r\n  /**\r\n   * 切换显示/隐藏\r\n   */\r\n  toggle: (input?: HTMLInputElement | HTMLTextAreaElement) => void\r\n\r\n  /**\r\n   * 切换键盘类型\r\n   */\r\n  switchType: (type: KeyboardType | string) => void\r\n\r\n  /**\r\n   * 切换大小写\r\n   */\r\n  toggleShift: () => void\r\n\r\n  /**\r\n   * 处理按键\r\n   */\r\n  handleKey: (key: KeyDefinition) => void\r\n\r\n  /**\r\n   * 获取按键显示文本\r\n   */\r\n  getKeyLabel: (key: KeyDefinition) => string\r\n\r\n  /**\r\n   * 设置值\r\n   */\r\n  setValue: (value: string) => void\r\n\r\n  /**\r\n   * 追加值（在光标位置插入文本）\r\n   */\r\n  appendValue: (text: string) => void\r\n\r\n  /**\r\n   * 设置最大长度\r\n   */\r\n  setMaxLength: (maxLength?: number) => void\r\n\r\n  /**\r\n   * 绑定输入框\r\n   */\r\n  bindInput: (input: HTMLInputElement | HTMLTextAreaElement) => void\r\n\r\n  /**\r\n   * 解绑输入框\r\n   */\r\n  unbindInput: () => void\r\n\r\n  /**\r\n   * 事件监听\r\n   */\r\n  on: <K extends keyof KeyboardEventMap>(\r\n    event: K,\r\n    handler: (data: KeyboardEventMap[K]) => void\r\n  ) => () => void\r\n\r\n  /**\r\n   * 单次事件监听\r\n   */\r\n  once: <K extends keyof KeyboardEventMap>(\r\n    event: K,\r\n    handler: (data: KeyboardEventMap[K]) => void\r\n  ) => () => void\r\n\r\n  /**\r\n   * 销毁\r\n   */\r\n  destroy: () => void\r\n}\r\n\r\n/**\r\n * 键盘管理 Composable\r\n */\r\nexport function useKeyboard(\r\n  options: UseKeyboardOptions = {}\r\n): UseKeyboardReturn {\r\n  const { immediate = false, ...keyboardOptions } = options\r\n\r\n  // 创建键盘管理器\r\n  const manager = createKeyboardManager(keyboardOptions)\r\n  const initialState = manager.getState()\r\n\r\n  // 响应式状态\r\n  const visible = ref(initialState.visible)\r\n  const type = ref<KeyboardType>(initialState.type)\r\n  const isUpperCase = ref(initialState.isUpperCase)\r\n  const value = ref(initialState.value)\r\n  const cursorPosition = ref(initialState.cursorPosition)\r\n  const layout = shallowRef<KeyboardConfig | null>(manager.getLayout())\r\n\r\n  // 完整状态（响应式对象）\r\n  const state = reactive<KeyboardState>({\r\n    ...initialState,\r\n  })\r\n\r\n  // 同步管理器状态到 Vue 响应式状态\r\n  const syncState = (newState: KeyboardState) => {\r\n    visible.value = newState.visible\r\n    type.value = newState.type\r\n    isUpperCase.value = newState.isUpperCase\r\n    value.value = newState.value\r\n    cursorPosition.value = newState.cursorPosition\r\n\r\n    Object.assign(state, newState)\r\n  }\r\n\r\n  // 监听状态变化\r\n  manager.on('stateChange', syncState)\r\n\r\n  // 监听键盘类型切换，更新布局\r\n  manager.on('switch', () => {\r\n    layout.value = manager.getLayout()\r\n  })\r\n\r\n  // 立即显示\r\n  if (immediate) {\r\n    manager.show()\r\n  }\r\n\r\n  // 组件卸载时销毁\r\n  onBeforeUnmount(() => {\r\n    manager.destroy()\r\n  })\r\n\r\n  return {\r\n    visible,\r\n    type,\r\n    isUpperCase,\r\n    value,\r\n    cursorPosition,\r\n    layout,\r\n    state,\r\n    show: (input?: HTMLInputElement | HTMLTextAreaElement) =>\r\n      manager.show(input),\r\n    hide: () => manager.hide(),\r\n    toggle: (input?: HTMLInputElement | HTMLTextAreaElement) =>\r\n      manager.toggle(input),\r\n    switchType: (t: KeyboardType | string) => manager.switchType(t),\r\n    toggleShift: () => manager.toggleShift(),\r\n    handleKey: (key: KeyDefinition) => manager.handleKey(key),\r\n    getKeyLabel: (key: KeyDefinition) => manager.getKeyLabel(key),\r\n    setValue: (v: string) => manager.setValue(v),\r\n    appendValue: (text: string) => manager.appendValue(text),\r\n    setMaxLength: (maxLength?: number) => manager.setMaxLength(maxLength),\r\n    bindInput: (input: HTMLInputElement | HTMLTextAreaElement) =>\r\n      manager.bindInput(input),\r\n    unbindInput: () => manager.unbindInput(),\r\n    on: (event, handler) => manager.on(event, handler),\r\n    once: (event, handler) => manager.once(event, handler),\r\n    destroy: () => manager.destroy(),\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;AAuJO,SAAS,YACd,UAA8B,CAAC,GACZ;CACnB,MAAM,EAAE,YAAY,OAAO,GAAG,oBAAoB;CAGlD,MAAM,WAAA,GAAA,uBAAA,sBAAA,CAAgC,eAAe;CACrD,MAAM,eAAe,QAAQ,SAAS;CAGtC,MAAM,WAAA,GAAA,IAAA,IAAA,CAAc,aAAa,OAAO;CACxC,MAAM,QAAA,GAAA,IAAA,IAAA,CAAyB,aAAa,IAAI;CAChD,MAAM,eAAA,GAAA,IAAA,IAAA,CAAkB,aAAa,WAAW;CAChD,MAAM,SAAA,GAAA,IAAA,IAAA,CAAY,aAAa,KAAK;CACpC,MAAM,kBAAA,GAAA,IAAA,IAAA,CAAqB,aAAa,cAAc;CACtD,MAAM,UAAA,GAAA,IAAA,WAAA,CAA2C,QAAQ,UAAU,CAAC;CAGpE,MAAM,SAAA,GAAA,IAAA,SAAA,CAAgC,EACpC,GAAG,aACL,CAAC;CAGD,MAAM,aAAa,aAA4B;EAC7C,QAAQ,QAAQ,SAAS;EACzB,KAAK,QAAQ,SAAS;EACtB,YAAY,QAAQ,SAAS;EAC7B,MAAM,QAAQ,SAAS;EACvB,eAAe,QAAQ,SAAS;EAEhC,OAAO,OAAO,OAAO,QAAQ;CAC/B;CAGA,QAAQ,GAAG,eAAe,SAAS;CAGnC,QAAQ,GAAG,gBAAgB;EACzB,OAAO,QAAQ,QAAQ,UAAU;CACnC,CAAC;CAGD,IAAI,WACF,QAAQ,KAAK;CAIf,CAAA,GAAA,IAAA,gBAAA,OAAsB;EACpB,QAAQ,QAAQ;CAClB,CAAC;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAAO,UACL,QAAQ,KAAK,KAAK;EACpB,YAAY,QAAQ,KAAK;EACzB,SAAS,UACP,QAAQ,OAAO,KAAK;EACtB,aAAa,MAA6B,QAAQ,WAAW,CAAC;EAC9D,mBAAmB,QAAQ,YAAY;EACvC,YAAY,QAAuB,QAAQ,UAAU,GAAG;EACxD,cAAc,QAAuB,QAAQ,YAAY,GAAG;EAC5D,WAAW,MAAc,QAAQ,SAAS,CAAC;EAC3C,cAAc,SAAiB,QAAQ,YAAY,IAAI;EACvD,eAAe,cAAuB,QAAQ,aAAa,SAAS;EACpE,YAAY,UACV,QAAQ,UAAU,KAAK;EACzB,mBAAmB,QAAQ,YAAY;EACvC,KAAK,OAAO,YAAY,QAAQ,GAAG,OAAO,OAAO;EACjD,OAAO,OAAO,YAAY,QAAQ,KAAK,OAAO,OAAO;EACrD,eAAe,QAAQ,QAAQ;CACjC;AACF"}

package/lib/composables/useKeyboard.d.cts

@@ -0,0 +1,112 @@
+/**
+ * 键盘管理 Composable
+ * @module composables/useKeyboard
+ */
+import type { KeyboardConfig, KeyboardEventMap, KeyboardOptions, KeyboardState, KeyboardType, KeyDefinition } from '@composy/keyboard-core';
+import type { Ref } from 'vue';
+/**
+ * useKeyboard 选项
+ */
+export interface UseKeyboardOptions extends KeyboardOptions {
+    /**
+     * 是否立即显示
+     */
+    immediate?: boolean;
+}
+/**
+ * useKeyboard 返回值
+ */
+export interface UseKeyboardReturn {
+    /**
+     * 键盘是否可见
+     */
+    visible: Ref<boolean>;
+    /**
+     * 当前键盘类型
+     */
+    type: Ref<KeyboardType>;
+    /**
+     * 是否大写状态
+     */
+    isUpperCase: Ref<boolean>;
+    /**
+     * 当前输入值
+     */
+    value: Ref<string>;
+    /**
+     * 光标位置
+     */
+    cursorPosition: Ref<number>;
+    /**
+     * 当前布局配置
+     */
+    layout: Ref<KeyboardConfig | null>;
+    /**
+     * 完整状态
+     */
+    state: KeyboardState;
+    /**
+     * 显示键盘
+     */
+    show: (input?: HTMLInputElement | HTMLTextAreaElement) => void;
+    /**
+     * 隐藏键盘
+     */
+    hide: () => void;
+    /**
+     * 切换显示/隐藏
+     */
+    toggle: (input?: HTMLInputElement | HTMLTextAreaElement) => void;
+    /**
+     * 切换键盘类型
+     */
+    switchType: (type: KeyboardType | string) => void;
+    /**
+     * 切换大小写
+     */
+    toggleShift: () => void;
+    /**
+     * 处理按键
+     */
+    handleKey: (key: KeyDefinition) => void;
+    /**
+     * 获取按键显示文本
+     */
+    getKeyLabel: (key: KeyDefinition) => string;
+    /**
+     * 设置值
+     */
+    setValue: (value: string) => void;
+    /**
+     * 追加值（在光标位置插入文本）
+     */
+    appendValue: (text: string) => void;
+    /**
+     * 设置最大长度
+     */
+    setMaxLength: (maxLength?: number) => void;
+    /**
+     * 绑定输入框
+     */
+    bindInput: (input: HTMLInputElement | HTMLTextAreaElement) => void;
+    /**
+     * 解绑输入框
+     */
+    unbindInput: () => void;
+    /**
+     * 事件监听
+     */
+    on: <K extends keyof KeyboardEventMap>(event: K, handler: (data: KeyboardEventMap[K]) => void) => () => void;
+    /**
+     * 单次事件监听
+     */
+    once: <K extends keyof KeyboardEventMap>(event: K, handler: (data: KeyboardEventMap[K]) => void) => () => void;
+    /**
+     * 销毁
+     */
+    destroy: () => void;
+}
+/**
+ * 键盘管理 Composable
+ */
+export declare function useKeyboard(options?: UseKeyboardOptions): UseKeyboardReturn;

package/lib/composables/useKeyboard.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboard.d.cts","sourceRoot":"","sources":["../../src/composables/useKeyboard.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAI9B;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAErB;;OAEG;IACH,IAAI,EAAE,GAAG,CAAC,YAAY,CAAC,CAAA;IAEvB;;OAEG;IACH,WAAW,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAEzB;;OAEG;IACH,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAElB;;OAEG;IACH,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAE3B;;OAEG;IACH,MAAM,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAElC;;OAEG;IACH,KAAK,EAAE,aAAa,CAAA;IAEpB;;OAEG;IACH,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,gBAAgB,GAAG,mBAAmB,KAAK,IAAI,CAAA;IAE9D;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAA;IAEhB;;OAEG;IACH,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,gBAAgB,GAAG,mBAAmB,KAAK,IAAI,CAAA;IAEhE;;OAEG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,KAAK,IAAI,CAAA;IAEjD;;OAEG;IACH,WAAW,EAAE,MAAM,IAAI,CAAA;IAEvB;;OAEG;IACH,SAAS,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAA;IAEvC;;OAEG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,MAAM,CAAA;IAE3C;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEjC;;OAEG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnC;;OAEG;IACH,YAAY,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAE1C;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,mBAAmB,KAAK,IAAI,CAAA;IAElE;;OAEG;IACH,WAAW,EAAE,MAAM,IAAI,CAAA;IAEvB;;OAEG;IACH,EAAE,EAAE,CAAC,CAAC,SAAS,MAAM,gBAAgB,EACnC,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,KACzC,MAAM,IAAI,CAAA;IAEf;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC,SAAS,MAAM,gBAAgB,EACrC,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,KACzC,MAAM,IAAI,CAAA;IAEf;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;GAEG;AACH,wBAAgB,WAAW,CACzB,OAAO,GAAE,kBAAuB,GAC/B,iBAAiB,CA4EnB"}

package/lib/composables/useKeyboardPopup.cjs

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/keyboard-vue v0.0.1    *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:14 *
+* Build time: 2024-10-12 17:44:16 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -23,12 +23,28 @@ function useKeyboardPopup(options = {}) {
 	let cleanupClickOutside = null;
 	let cleanupViewportChange = null;
 	let cleanupScroll = null;
+	let animationFrame = null;
+	let visibilitySession = 0;
+	const cleanupOpenResources = () => {
+		cleanupClickOutside?.();
+		cleanupClickOutside = null;
+		cleanupViewportChange?.();
+		cleanupViewportChange = null;
+		cleanupScroll?.();
+		cleanupScroll = null;
+	};
+	const cancelAnimationFrame = () => {
+		if (animationFrame === null || typeof window === "undefined") return;
+		window.cancelAnimationFrame(animationFrame);
+		animationFrame = null;
+	};
 	const updatePosition = () => {
-		if (!popup.value) return;
-		const popupRect = popup.value.getBoundingClientRect();
+		const popupElement = popup.value;
+		if (!popupElement) return;
+		const popupRect = popupElement.getBoundingClientRect();
 		const result = positionManager.calculate(target.value, {
-			width: popupRect.width || 300,
-			height: popupRect.height || 260
+			width: Math.max(0, popupRect.width),
+			height: Math.max(0, popupRect.height)
 		});
 		placement.value = result.placement;
 		showMask.value = positionManager.shouldShowMask();
@@ -37,71 +53,72 @@ function useKeyboardPopup(options = {}) {
 			left: "0",
 			right: "0",
 			bottom: "0",
-			maxHeight: `${result.maxHeight}px`,
+			maxHeight: result.maxHeight === void 0 ? void 0 : `${result.maxHeight}px`,
 			zIndex: 1e3
 		};
 		else popupStyles.value = {
 			position: "fixed",
 			left: `${result.position.x}px`,
 			top: `${result.position.y}px`,
-			maxHeight: result.maxHeight ? `${result.maxHeight}px` : void 0,
-			maxWidth: result.maxWidth ? `${result.maxWidth}px` : void 0,
+			maxHeight: result.maxHeight === void 0 ? void 0 : `${result.maxHeight}px`,
+			maxWidth: result.maxWidth === void 0 ? void 0 : `${result.maxWidth}px`,
 			zIndex: 1e3
 		};
-		if (showMask.value) maskStyles.value = {
+		maskStyles.value = showMask.value ? {
 			position: "fixed",
-			top: "0",
-			left: "0",
-			right: "0",
-			bottom: "0",
-			backgroundColor: "rgba(0, 0, 0, 0.5)",
+			inset: "0",
+			backgroundColor: "var(--keyboard-mask-bg)",
 			zIndex: 999
-		};
+		} : {};
 	};
 	const close = () => {
-		onClose?.();
+		if (visible.value) onClose?.();
 	};
 	(0, vue.watch)(visible, (newVisible) => {
-		if (newVisible) {
-			isMobileDevice.value = (0, _composy_keyboard_core.isMobile)();
-			requestAnimationFrame(() => {
-				updatePosition();
-				if (closeOnClickOutside && popup.value) cleanupClickOutside = (0, _composy_keyboard_core.onClickOutside)(popup.value, (event) => {
-					if (target.value && target.value.contains(event.target)) return;
-					close();
-				});
-			});
-			cleanupViewportChange = (0, _composy_keyboard_core.onViewportChange)(() => {
-				isMobileDevice.value = (0, _composy_keyboard_core.isMobile)();
-				updatePosition();
+		visibilitySession += 1;
+		const currentSession = visibilitySession;
+		cancelAnimationFrame();
+		cleanupOpenResources();
+		if (!newVisible) {
+			isAnimating.value = false;
+			showMask.value = false;
+			popupStyles.value = {};
+			maskStyles.value = {};
+			return;
+		}
+		isMobileDevice.value = (0, _composy_keyboard_core.isMobile)();
+		isAnimating.value = true;
+		if (typeof window !== "undefined") animationFrame = window.requestAnimationFrame(() => {
+			animationFrame = null;
+			if (!visible.value || currentSession !== visibilitySession) return;
+			updatePosition();
+			isAnimating.value = false;
+			if (closeOnClickOutside && popup.value) cleanupClickOutside = (0, _composy_keyboard_core.onClickOutside)(popup.value, (event) => {
+				if (target.value && event.target instanceof Node && target.value.contains(event.target)) return;
+				close();
 			});
-			if (!isMobileDevice.value) {
-				const handleScroll = () => {
-					requestAnimationFrame(() => {
-						updatePosition();
-					});
-				};
-				window.addEventListener("scroll", handleScroll, true);
-				cleanupScroll = () => {
-					window.removeEventListener("scroll", handleScroll, true);
-				};
-			}
-		} else {
-			cleanupClickOutside?.();
-			cleanupClickOutside = null;
-			cleanupViewportChange?.();
-			cleanupViewportChange = null;
-			cleanupScroll?.();
-			cleanupScroll = null;
+		});
+		cleanupViewportChange = (0, _composy_keyboard_core.onViewportChange)(() => {
+			if (!visible.value) return;
+			isMobileDevice.value = (0, _composy_keyboard_core.isMobile)();
+			updatePosition();
+		});
+		if (!isMobileDevice.value && typeof window !== "undefined") {
+			const handleScroll = () => {
+				if (!visible.value) return;
+				window.requestAnimationFrame(updatePosition);
+			};
+			window.addEventListener("scroll", handleScroll, true);
+			cleanupScroll = () => window.removeEventListener("scroll", handleScroll, true);
 		}
 	}, { immediate: true });
 	(0, vue.watch)(target, () => {
 		if (visible.value) updatePosition();
 	});
 	(0, vue.onBeforeUnmount)(() => {
-		cleanupClickOutside?.();
-		cleanupViewportChange?.();
-		cleanupScroll?.();
+		visibilitySession += 1;
+		cancelAnimationFrame();
+		cleanupOpenResources();
 	});
 	return {
 		popupStyles,

package/lib/composables/useKeyboardPopup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardPopup.cjs","names":[],"sources":["../../src/composables/useKeyboardPopup.ts"],"sourcesContent":["/**\n * 键盘弹出层 Composable\n * @module composables/useKeyboardPopup\n */\n\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport type { CSSProperties, Ref } from 'vue'\nimport {\n  createPositionManager,\n  isMobile,\n  onClickOutside,\n  onViewportChange,\n  type PopupPlacement,\n  type PopupPositionConfig,\n  type PopupPositionResult,\n} from '@composy/keyboard-core'\n\n/**\n * useKeyboardPopup 选项\n */\nexport interface UseKeyboardPopupOptions extends PopupPositionConfig {\n  /**\n   * 是否显示\n   */\n  visible?: Ref<boolean>\n\n  /**\n   * 目标元素\n   */\n  target?: Ref<HTMLElement | null>\n\n  /**\n   * 弹出层元素\n   */\n  popup?: Ref<HTMLElement | null>\n\n  /**\n   * 点击外部关闭\n   */\n  closeOnClickOutside?: boolean\n\n  /**\n   * 关闭回调\n   */\n  onClose?: () => void\n}\n\n/**\n * useKeyboardPopup 返回值\n */\nexport interface UseKeyboardPopupReturn {\n  /**\n   * 弹出层样式\n   */\n  popupStyles: Ref<CSSProperties>\n\n  /**\n   * 遮罩层样式\n   */\n  maskStyles: Ref<CSSProperties>\n\n  /**\n   * 当前弹出位置\n   */\n  placement: Ref<PopupPlacement>\n\n  /**\n   * 是否移动端\n   */\n  isMobileDevice: Ref<boolean>\n\n  /**\n   * 是否显示遮罩\n   */\n  showMask: Ref<boolean>\n\n  /**\n   * 是否正在动画中\n   */\n  isAnimating: Ref<boolean>\n\n  /**\n   * 更新位置\n   */\n  updatePosition: () => void\n\n  /**\n   * 关闭弹出层\n   */\n  close: () => void\n}\n\n/**\n * 键盘弹出层 Composable\n */\nexport function useKeyboardPopup(options: UseKeyboardPopupOptions = {}): UseKeyboardPopupReturn {\n  const {\n    visible = ref(false),\n    target = ref(null),\n    popup = ref(null),\n    closeOnClickOutside = true,\n    onClose,\n    ...positionConfig\n  } = options\n\n  // 创建位置管理器\n  const positionManager = createPositionManager(positionConfig)\n\n  // 响应式状态\n  const popupStyles = ref<CSSProperties>({})\n  const maskStyles = ref<CSSProperties>({})\n  const placement = ref<PopupPlacement>('bottom')\n  const isMobileDevice = ref(isMobile())\n  const showMask = ref(false)\n  const isAnimating = ref(false)\n\n  // 清理函数\n  let cleanupClickOutside: (() => void) | null = null\n  let cleanupViewportChange: (() => void) | null = null\n  let cleanupScroll: (() => void) | null = null\n\n  /**\n   * 更新弹出层位置\n   */\n  const updatePosition = () => {\n    if (!popup.value) return\n\n    const popupRect = popup.value.getBoundingClientRect()\n    const result = positionManager.calculate(target.value, {\n      width: popupRect.width || 300,\n      height: popupRect.height || 260,\n    })\n\n    placement.value = result.placement\n    showMask.value = positionManager.shouldShowMask()\n\n    // 设置弹出层样式\n    if (result.placement === 'bottom-sheet') {\n      // 移动端底部弹出\n      popupStyles.value = {\n        position: 'fixed',\n        left: '0',\n        right: '0',\n        bottom: '0',\n        maxHeight: `${result.maxHeight}px`,\n        zIndex: 1000,\n      }\n    }\n    else {\n      // PC 端下拉弹出\n      popupStyles.value = {\n        position: 'fixed',\n        left: `${result.position.x}px`,\n        top: `${result.position.y}px`,\n        maxHeight: result.maxHeight ? `${result.maxHeight}px` : undefined,\n        maxWidth: result.maxWidth ? `${result.maxWidth}px` : undefined,\n        zIndex: 1000,\n      }\n    }\n\n    // 设置遮罩层样式\n    if (showMask.value) {\n      maskStyles.value = {\n        position: 'fixed',\n        top: '0',\n        left: '0',\n        right: '0',\n        bottom: '0',\n        backgroundColor: 'rgba(0, 0, 0, 0.5)',\n        zIndex: 999,\n      }\n    }\n  }\n\n  /**\n   * 关闭弹出层\n   */\n  const close = () => {\n    onClose?.()\n  }\n\n  // 监听 visible 变化\n  watch(visible, (newVisible) => {\n    if (newVisible) {\n      // 显示时\n      isMobileDevice.value = isMobile()\n\n      // 延迟计算位置（等待 DOM 渲染）\n      requestAnimationFrame(() => {\n        updatePosition()\n\n        // 添加点击外部关闭监听\n        if (closeOnClickOutside && popup.value) {\n          cleanupClickOutside = onClickOutside(popup.value, (event) => {\n            // 检查是否点击在目标元素上\n            if (target.value && target.value.contains(event.target as Node)) {\n              return\n            }\n            close()\n          })\n        }\n      })\n\n      // 监听视口变化\n      cleanupViewportChange = onViewportChange(() => {\n        isMobileDevice.value = isMobile()\n        updatePosition()\n      })\n\n      // PC 端监听滚动事件，跟随滚动\n      if (!isMobileDevice.value) {\n        const handleScroll = () => {\n          requestAnimationFrame(() => {\n            updatePosition()\n          })\n        }\n        window.addEventListener('scroll', handleScroll, true)\n        cleanupScroll = () => {\n          window.removeEventListener('scroll', handleScroll, true)\n        }\n      }\n    }\n    else {\n      // 隐藏时清理\n      cleanupClickOutside?.()\n      cleanupClickOutside = null\n      cleanupViewportChange?.()\n      cleanupViewportChange = null\n      cleanupScroll?.()\n      cleanupScroll = null\n    }\n  }, { immediate: true })\n\n  // 监听目标元素变化\n  watch(target, () => {\n    if (visible.value) {\n      updatePosition()\n    }\n  })\n\n  // 组件卸载时清理\n  onBeforeUnmount(() => {\n    cleanupClickOutside?.()\n    cleanupViewportChange?.()\n    cleanupScroll?.()\n  })\n\n  return {\n    popupStyles,\n    maskStyles,\n    placement,\n    isMobileDevice,\n    showMask,\n    isAnimating,\n    updatePosition,\n    close,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"useKeyboardPopup.cjs","names":[],"sources":["../../src/composables/useKeyboardPopup.ts"],"sourcesContent":["/**\r\n * Keyboard popup composable.\r\n * @module composables/useKeyboardPopup\r\n */\r\n\r\nimport type {\r\n  PopupPlacement,\r\n  PopupPositionConfig,\r\n} from '@composy/keyboard-core'\r\nimport type { CSSProperties, Ref } from 'vue'\r\nimport {\r\n  createPositionManager,\r\n  isMobile,\r\n  onClickOutside,\r\n  onViewportChange,\r\n} from '@composy/keyboard-core'\r\nimport { onBeforeUnmount, ref, watch } from 'vue'\r\n\r\nexport interface UseKeyboardPopupOptions extends PopupPositionConfig {\r\n  visible?: Ref<boolean>\r\n  target?: Ref<HTMLElement | null>\r\n  popup?: Ref<HTMLElement | null>\r\n  closeOnClickOutside?: boolean\r\n  onClose?: () => void\r\n}\r\n\r\nexport interface UseKeyboardPopupReturn {\r\n  popupStyles: Ref<CSSProperties>\r\n  maskStyles: Ref<CSSProperties>\r\n  placement: Ref<PopupPlacement>\r\n  isMobileDevice: Ref<boolean>\r\n  showMask: Ref<boolean>\r\n  isAnimating: Ref<boolean>\r\n  updatePosition: () => void\r\n  close: () => void\r\n}\r\n\r\nexport function useKeyboardPopup(\r\n  options: UseKeyboardPopupOptions = {}\r\n): UseKeyboardPopupReturn {\r\n  const {\r\n    visible = ref(false),\r\n    target = ref(null),\r\n    popup = ref(null),\r\n    closeOnClickOutside = true,\r\n    onClose,\r\n    ...positionConfig\r\n  } = options\r\n\r\n  const positionManager = createPositionManager(positionConfig)\r\n  const popupStyles = ref<CSSProperties>({})\r\n  const maskStyles = ref<CSSProperties>({})\r\n  const placement = ref<PopupPlacement>('bottom')\r\n  const isMobileDevice = ref(isMobile())\r\n  const showMask = ref(false)\r\n  const isAnimating = ref(false)\r\n\r\n  let cleanupClickOutside: (() => void) | null = null\r\n  let cleanupViewportChange: (() => void) | null = null\r\n  let cleanupScroll: (() => void) | null = null\r\n  let animationFrame: number | null = null\r\n  let visibilitySession = 0\r\n\r\n  const cleanupOpenResources = () => {\r\n    cleanupClickOutside?.()\r\n    cleanupClickOutside = null\r\n    cleanupViewportChange?.()\r\n    cleanupViewportChange = null\r\n    cleanupScroll?.()\r\n    cleanupScroll = null\r\n  }\r\n\r\n  const cancelAnimationFrame = () => {\r\n    if (animationFrame === null || typeof window === 'undefined') return\r\n    window.cancelAnimationFrame(animationFrame)\r\n    animationFrame = null\r\n  }\r\n\r\n  const updatePosition = () => {\r\n    const popupElement = popup.value\r\n    if (!popupElement) return\r\n\r\n    const popupRect = popupElement.getBoundingClientRect()\r\n    const result = positionManager.calculate(target.value, {\r\n      width: Math.max(0, popupRect.width),\r\n      height: Math.max(0, popupRect.height),\r\n    })\r\n\r\n    placement.value = result.placement\r\n    showMask.value = positionManager.shouldShowMask()\r\n\r\n    if (result.placement === 'bottom-sheet') {\r\n      popupStyles.value = {\r\n        position: 'fixed',\r\n        left: '0',\r\n        right: '0',\r\n        bottom: '0',\r\n        maxHeight:\r\n          result.maxHeight === undefined ? undefined : `${result.maxHeight}px`,\r\n        zIndex: 1000,\r\n      }\r\n    } else {\r\n      popupStyles.value = {\r\n        position: 'fixed',\r\n        left: `${result.position.x}px`,\r\n        top: `${result.position.y}px`,\r\n        maxHeight:\r\n          result.maxHeight === undefined ? undefined : `${result.maxHeight}px`,\r\n        maxWidth:\r\n          result.maxWidth === undefined ? undefined : `${result.maxWidth}px`,\r\n        zIndex: 1000,\r\n      }\r\n    }\r\n\r\n    maskStyles.value = showMask.value\r\n      ? {\r\n          position: 'fixed',\r\n          inset: '0',\r\n          backgroundColor: 'var(--keyboard-mask-bg)',\r\n          zIndex: 999,\r\n        }\r\n      : {}\r\n  }\r\n\r\n  const close = () => {\r\n    if (visible.value) onClose?.()\r\n  }\r\n\r\n  watch(\r\n    visible,\r\n    newVisible => {\r\n      visibilitySession += 1\r\n      const currentSession = visibilitySession\r\n      cancelAnimationFrame()\r\n      cleanupOpenResources()\r\n\r\n      if (!newVisible) {\r\n        isAnimating.value = false\r\n        showMask.value = false\r\n        popupStyles.value = {}\r\n        maskStyles.value = {}\r\n        return\r\n      }\r\n\r\n      isMobileDevice.value = isMobile()\r\n      isAnimating.value = true\r\n\r\n      if (typeof window !== 'undefined') {\r\n        animationFrame = window.requestAnimationFrame(() => {\r\n          animationFrame = null\r\n          if (!visible.value || currentSession !== visibilitySession) return\r\n\r\n          updatePosition()\r\n          isAnimating.value = false\r\n          if (closeOnClickOutside && popup.value) {\r\n            cleanupClickOutside = onClickOutside(popup.value, event => {\r\n              if (\r\n                target.value &&\r\n                event.target instanceof Node &&\r\n                target.value.contains(event.target)\r\n              )\r\n                return\r\n              close()\r\n            })\r\n          }\r\n        })\r\n      }\r\n\r\n      cleanupViewportChange = onViewportChange(() => {\r\n        if (!visible.value) return\r\n        isMobileDevice.value = isMobile()\r\n        updatePosition()\r\n      })\r\n\r\n      if (!isMobileDevice.value && typeof window !== 'undefined') {\r\n        const handleScroll = () => {\r\n          if (!visible.value) return\r\n          window.requestAnimationFrame(updatePosition)\r\n        }\r\n        window.addEventListener('scroll', handleScroll, true)\r\n        cleanupScroll = () =>\r\n          window.removeEventListener('scroll', handleScroll, true)\r\n      }\r\n    },\r\n    { immediate: true }\r\n  )\r\n\r\n  watch(target, () => {\r\n    if (visible.value) updatePosition()\r\n  })\r\n\r\n  onBeforeUnmount(() => {\r\n    visibilitySession += 1\r\n    cancelAnimationFrame()\r\n    cleanupOpenResources()\r\n  })\r\n\r\n  return {\r\n    popupStyles,\r\n    maskStyles,\r\n    placement,\r\n    isMobileDevice,\r\n    showMask,\r\n    isAnimating,\r\n    updatePosition,\r\n    close,\r\n  }\r\n}\r\n"],"mappings":"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"}

package/lib/composables/useKeyboardPopup.d.cts

@@ -0,0 +1,24 @@
+/**
+ * Keyboard popup composable.
+ * @module composables/useKeyboardPopup
+ */
+import type { PopupPlacement, PopupPositionConfig } from '@composy/keyboard-core';
+import type { CSSProperties, Ref } from 'vue';
+export interface UseKeyboardPopupOptions extends PopupPositionConfig {
+    visible?: Ref<boolean>;
+    target?: Ref<HTMLElement | null>;
+    popup?: Ref<HTMLElement | null>;
+    closeOnClickOutside?: boolean;
+    onClose?: () => void;
+}
+export interface UseKeyboardPopupReturn {
+    popupStyles: Ref<CSSProperties>;
+    maskStyles: Ref<CSSProperties>;
+    placement: Ref<PopupPlacement>;
+    isMobileDevice: Ref<boolean>;
+    showMask: Ref<boolean>;
+    isAnimating: Ref<boolean>;
+    updatePosition: () => void;
+    close: () => void;
+}
+export declare function useKeyboardPopup(options?: UseKeyboardPopupOptions): UseKeyboardPopupReturn;

package/lib/composables/useKeyboardPopup.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardPopup.d.cts","sourceRoot":"","sources":["../../src/composables/useKeyboardPopup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,cAAc,EACd,mBAAmB,EACpB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAS7C,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB;IAClE,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,MAAM,CAAC,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,GAAG,CAAC,aAAa,CAAC,CAAA;IAC/B,UAAU,EAAE,GAAG,CAAC,aAAa,CAAC,CAAA;IAC9B,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IAC9B,cAAc,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,WAAW,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACzB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CAwKxB"}

package/lib/directives/index.cjs

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/keyboard-vue v0.0.1    *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:14 *
+* Build time: 2024-10-12 17:44:16 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************

package/lib/directives/index.d.cts

@@ -0,0 +1,5 @@
+/**
+ * 指令导出
+ * @module directives
+ */
+export * from './v-keyboard';

package/lib/directives/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/directives/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,cAAc,CAAA"}

package/lib/directives/v-keyboard.cjs

@@ -2,14 +2,14 @@
 * ***********************************
 * @composy/keyboard-vue v0.0.1    *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:14 *
+* Build time: 2024-10-12 17:44:16 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
 */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/directives/v-keyboard.ts
-const KEYBOARD_ATTR = "__v_keyboard__";
+const directiveStates = /* @__PURE__ */ new WeakMap();
 const vKeyboard = {
 	mounted(el, binding) {
 		const options = parseBinding(binding);
@@ -20,14 +20,14 @@ const vKeyboard = {
 		};
 		el.addEventListener("focus", handleFocus);
 		el.setAttribute("inputmode", "none");
-		el[KEYBOARD_ATTR] = { cleanup: () => {
+		directiveStates.set(el, { cleanup: () => {
 			el.removeEventListener("focus", handleFocus);
 			el.removeAttribute("inputmode");
-		} };
+		} });
 	},
 	updated(el, binding) {
-		const oldCleanup = el[KEYBOARD_ATTR]?.cleanup;
-		if (oldCleanup) oldCleanup();
+		directiveStates.get(el)?.cleanup();
+		directiveStates.delete(el);
 		const options = parseBinding(binding);
 		if (!options.enabled) return;
 		const handleFocus = () => {
@@ -36,15 +36,14 @@ const vKeyboard = {
 		};
 		el.addEventListener("focus", handleFocus);
 		el.setAttribute("inputmode", "none");
-		el[KEYBOARD_ATTR] = { cleanup: () => {
+		directiveStates.set(el, { cleanup: () => {
 			el.removeEventListener("focus", handleFocus);
 			el.removeAttribute("inputmode");
-		} };
+		} });
 	},
 	unmounted(el) {
-		const data = el[KEYBOARD_ATTR];
-		if (data?.cleanup) data.cleanup();
-		delete el[KEYBOARD_ATTR];
+		directiveStates.get(el)?.cleanup();
+		directiveStates.delete(el);
 	}
 };
 function parseBinding(binding) {

package/lib/directives/v-keyboard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"v-keyboard.cjs","names":[],"sources":["../../src/directives/v-keyboard.ts"],"sourcesContent":["/**\n * v-keyboard 指令\n * 自动在输入框聚焦时打开虚拟键盘\n * @module directives/v-keyboard\n */\n\nimport type { Directive, DirectiveBinding } from 'vue'\n\n/**\n * 指令绑定值\n */\nexport interface VKeyboardBinding {\n  /** 键盘类型 */\n  type?: string\n  /** 是否启用 */\n  enabled?: boolean\n  /** 打开键盘回调 */\n  onOpen?: (el: HTMLInputElement | HTMLTextAreaElement) => void\n  /** 关闭键盘回调 */\n  onClose?: () => void\n}\n\nconst KEYBOARD_ATTR = '__v_keyboard__'\n\n/**\n * v-keyboard 指令\n *\n * @example\n * ```html\n * <!-- 基础用法 -->\n * <input v-keyboard />\n *\n * <!-- 指定键盘类型 -->\n * <input v-keyboard=\"{ type: 'number' }\" />\n *\n * <!-- 配合回调 -->\n * <input v-keyboard=\"{ type: 'phone', onOpen: handleOpen }\" />\n * ```\n */\nexport const vKeyboard: Directive<HTMLInputElement | HTMLTextAreaElement, VKeyboardBinding | string | boolean> = {\n  mounted(el, binding) {\n    const options = parseBinding(binding)\n    if (!options.enabled) return\n\n    const handleFocus = () => {\n      // 阻止原生键盘\n      el.blur()\n      options.onOpen?.(el)\n    }\n\n    el.addEventListener('focus', handleFocus)\n    el.setAttribute('inputmode', 'none')\n\n    // 存储清理函数\n    ;(el as any)[KEYBOARD_ATTR] = {\n      cleanup: () => {\n        el.removeEventListener('focus', handleFocus)\n        el.removeAttribute('inputmode')\n      },\n    }\n  },\n\n  updated(el, binding) {\n    const oldCleanup = (el as any)[KEYBOARD_ATTR]?.cleanup\n    if (oldCleanup) oldCleanup()\n\n    const options = parseBinding(binding)\n    if (!options.enabled) return\n\n    const handleFocus = () => {\n      el.blur()\n      options.onOpen?.(el)\n    }\n\n    el.addEventListener('focus', handleFocus)\n    el.setAttribute('inputmode', 'none')\n\n    ;(el as any)[KEYBOARD_ATTR] = {\n      cleanup: () => {\n        el.removeEventListener('focus', handleFocus)\n        el.removeAttribute('inputmode')\n      },\n    }\n  },\n\n  unmounted(el) {\n    const data = (el as any)[KEYBOARD_ATTR]\n    if (data?.cleanup) data.cleanup()\n    delete (el as any)[KEYBOARD_ATTR]\n  },\n}\n\n/**\n * 解析指令绑定值\n */\nfunction parseBinding(binding: DirectiveBinding<VKeyboardBinding | string | boolean>): VKeyboardBinding & { enabled: boolean } {\n  const value = binding.value\n\n  if (value === false) {\n    return { enabled: false }\n  }\n\n  if (value === true || value === undefined) {\n    return { enabled: true }\n  }\n\n  if (typeof value === 'string') {\n    return { enabled: true, type: value }\n  }\n\n  return {\n    enabled: value.enabled !== false,\n    ...value,\n  }\n}\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,gBAAgB;AAiBf,MAAM,YAAoG;CAC/G,QAAQ,IAAI,SAAS;EACnB,MAAM,UAAU,aAAa,OAAO;EACpC,IAAI,CAAC,QAAQ,SAAS;EAEtB,MAAM,oBAAoB;GAExB,GAAG,KAAK;GACR,QAAQ,SAAS,EAAE;EACrB;EAEA,GAAG,iBAAiB,SAAS,WAAW;EACxC,GAAG,aAAa,aAAa,MAAM;EAGjC,GAAW,iBAAiB,EAC5B,eAAe;GACb,GAAG,oBAAoB,SAAS,WAAW;GAC3C,GAAG,gBAAgB,WAAW;EAChC,EACF;CACF;CAEA,QAAQ,IAAI,SAAS;EACnB,MAAM,aAAc,GAAW,cAAa,EAAG;EAC/C,IAAI,YAAY,WAAW;EAE3B,MAAM,UAAU,aAAa,OAAO;EACpC,IAAI,CAAC,QAAQ,SAAS;EAEtB,MAAM,oBAAoB;GACxB,GAAG,KAAK;GACR,QAAQ,SAAS,EAAE;EACrB;EAEA,GAAG,iBAAiB,SAAS,WAAW;EACxC,GAAG,aAAa,aAAa,MAAM;EAEjC,GAAW,iBAAiB,EAC5B,eAAe;GACb,GAAG,oBAAoB,SAAS,WAAW;GAC3C,GAAG,gBAAgB,WAAW;EAChC,EACF;CACF;CAEA,UAAU,IAAI;EACZ,MAAM,OAAQ,GAAW;EACzB,IAAI,MAAM,SAAS,KAAK,QAAQ;EAChC,OAAQ,GAAW;CACrB;AACF;AAKA,SAAS,aAAa,SAAyG;CAC7H,MAAM,QAAQ,QAAQ;CAEtB,IAAI,UAAU,OACZ,OAAO,EAAE,SAAS,MAAM;CAG1B,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,OAAO,EAAE,SAAS,KAAK;CAGzB,IAAI,OAAO,UAAU,UACnB,OAAO;EAAE,SAAS;EAAM,MAAM;CAAM;CAGtC,OAAO;EACL,SAAS,MAAM,YAAY;EAC3B,GAAG;CACL;AACF"}
+{"version":3,"file":"v-keyboard.cjs","names":[],"sources":["../../src/directives/v-keyboard.ts"],"sourcesContent":["/**\r\n * v-keyboard 指令\r\n * 自动在输入框聚焦时打开虚拟键盘\r\n * @module directives/v-keyboard\r\n */\r\n\r\nimport type { Directive, DirectiveBinding } from 'vue'\r\n\r\n/**\r\n * 指令绑定值\r\n */\r\nexport interface VKeyboardBinding {\r\n  /** 键盘类型 */\r\n  type?: string\r\n  /** 是否启用 */\r\n  enabled?: boolean\r\n  /** 打开键盘回调 */\r\n  onOpen?: (el: HTMLInputElement | HTMLTextAreaElement) => void\r\n  /** 关闭键盘回调 */\r\n  onClose?: () => void\r\n}\r\n\r\ninterface KeyboardDirectiveState {\r\n  cleanup: () => void\r\n}\r\n\r\nconst directiveStates = new WeakMap<HTMLElement, KeyboardDirectiveState>()\r\n\r\n/**\r\n * v-keyboard 指令\r\n *\r\n * @example\r\n * ```html\r\n * <!-- 基础用法 -->\r\n * <input v-keyboard />\r\n *\r\n * <!-- 指定键盘类型 -->\r\n * <input v-keyboard=\"{ type: 'number' }\" />\r\n *\r\n * <!-- 配合回调 -->\r\n * <input v-keyboard=\"{ type: 'phone', onOpen: handleOpen }\" />\r\n * ```\r\n */\r\nexport const vKeyboard: Directive<\r\n  HTMLInputElement | HTMLTextAreaElement,\r\n  VKeyboardBinding | string | boolean\r\n> = {\r\n  mounted(el, binding) {\r\n    const options = parseBinding(binding)\r\n    if (!options.enabled) return\r\n\r\n    const handleFocus = () => {\r\n      // 阻止原生键盘\r\n      el.blur()\r\n      options.onOpen?.(el)\r\n    }\r\n\r\n    el.addEventListener('focus', handleFocus)\r\n    el.setAttribute('inputmode', 'none')\r\n\r\n    // 存储清理函数\r\n    directiveStates.set(el, {\r\n      cleanup: () => {\r\n        el.removeEventListener('focus', handleFocus)\r\n        el.removeAttribute('inputmode')\r\n      },\r\n    })\r\n  },\r\n\r\n  updated(el, binding) {\r\n    directiveStates.get(el)?.cleanup()\r\n    directiveStates.delete(el)\r\n\r\n    const options = parseBinding(binding)\r\n    if (!options.enabled) return\r\n\r\n    const handleFocus = () => {\r\n      el.blur()\r\n      options.onOpen?.(el)\r\n    }\r\n\r\n    el.addEventListener('focus', handleFocus)\r\n    el.setAttribute('inputmode', 'none')\r\n\r\n    directiveStates.set(el, {\r\n      cleanup: () => {\r\n        el.removeEventListener('focus', handleFocus)\r\n        el.removeAttribute('inputmode')\r\n      },\r\n    })\r\n  },\r\n\r\n  unmounted(el) {\r\n    directiveStates.get(el)?.cleanup()\r\n    directiveStates.delete(el)\r\n  },\r\n}\r\n\r\n/**\r\n * 解析指令绑定值\r\n */\r\nfunction parseBinding(\r\n  binding: DirectiveBinding<VKeyboardBinding | string | boolean>\r\n): VKeyboardBinding & { enabled: boolean } {\r\n  const value = binding.value\r\n\r\n  if (value === false) {\r\n    return { enabled: false }\r\n  }\r\n\r\n  if (value === true || value === undefined) {\r\n    return { enabled: true }\r\n  }\r\n\r\n  if (typeof value === 'string') {\r\n    return { enabled: true, type: value }\r\n  }\r\n\r\n  return {\r\n    enabled: value.enabled !== false,\r\n    ...value,\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;;AA0BA,MAAM,kCAAkB,IAAI,QAA6C;AAiBlE,MAAM,YAGT;CACF,QAAQ,IAAI,SAAS;EACnB,MAAM,UAAU,aAAa,OAAO;EACpC,IAAI,CAAC,QAAQ,SAAS;EAEtB,MAAM,oBAAoB;GAExB,GAAG,KAAK;GACR,QAAQ,SAAS,EAAE;EACrB;EAEA,GAAG,iBAAiB,SAAS,WAAW;EACxC,GAAG,aAAa,aAAa,MAAM;EAGnC,gBAAgB,IAAI,IAAI,EACtB,eAAe;GACb,GAAG,oBAAoB,SAAS,WAAW;GAC3C,GAAG,gBAAgB,WAAW;EAChC,EACF,CAAC;CACH;CAEA,QAAQ,IAAI,SAAS;EACnB,gBAAgB,IAAI,EAAE,CAAA,EAAG,QAAQ;EACjC,gBAAgB,OAAO,EAAE;EAEzB,MAAM,UAAU,aAAa,OAAO;EACpC,IAAI,CAAC,QAAQ,SAAS;EAEtB,MAAM,oBAAoB;GACxB,GAAG,KAAK;GACR,QAAQ,SAAS,EAAE;EACrB;EAEA,GAAG,iBAAiB,SAAS,WAAW;EACxC,GAAG,aAAa,aAAa,MAAM;EAEnC,gBAAgB,IAAI,IAAI,EACtB,eAAe;GACb,GAAG,oBAAoB,SAAS,WAAW;GAC3C,GAAG,gBAAgB,WAAW;EAChC,EACF,CAAC;CACH;CAEA,UAAU,IAAI;EACZ,gBAAgB,IAAI,EAAE,CAAA,EAAG,QAAQ;EACjC,gBAAgB,OAAO,EAAE;CAC3B;AACF;AAKA,SAAS,aACP,SACyC;CACzC,MAAM,QAAQ,QAAQ;CAEtB,IAAI,UAAU,OACZ,OAAO,EAAE,SAAS,MAAM;CAG1B,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,OAAO,EAAE,SAAS,KAAK;CAGzB,IAAI,OAAO,UAAU,UACnB,OAAO;EAAE,SAAS;EAAM,MAAM;CAAM;CAGtC,OAAO;EACL,SAAS,MAAM,YAAY;EAC3B,GAAG;CACL;AACF"}

package/lib/directives/v-keyboard.d.cts

@@ -0,0 +1,35 @@
+/**
+ * v-keyboard 指令
+ * 自动在输入框聚焦时打开虚拟键盘
+ * @module directives/v-keyboard
+ */
+import type { Directive } from 'vue';
+/**
+ * 指令绑定值
+ */
+export interface VKeyboardBinding {
+    /** 键盘类型 */
+    type?: string;
+    /** 是否启用 */
+    enabled?: boolean;
+    /** 打开键盘回调 */
+    onOpen?: (el: HTMLInputElement | HTMLTextAreaElement) => void;
+    /** 关闭键盘回调 */
+    onClose?: () => void;
+}
+/**
+ * v-keyboard 指令
+ *
+ * @example
+ * ```html
+ * <!-- 基础用法 -->
+ * <input v-keyboard />
+ *
+ * <!-- 指定键盘类型 -->
+ * <input v-keyboard="{ type: 'number' }" />
+ *
+ * <!-- 配合回调 -->
+ * <input v-keyboard="{ type: 'phone', onOpen: handleOpen }" />
+ * ```
+ */
+export declare const vKeyboard: Directive<HTMLInputElement | HTMLTextAreaElement, VKeyboardBinding | string | boolean>;

package/lib/directives/v-keyboard.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"v-keyboard.d.cts","sourceRoot":"","sources":["../../src/directives/v-keyboard.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAoB,MAAM,KAAK,CAAA;AAEtD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,WAAW;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW;IACX,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa;IACb,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,gBAAgB,GAAG,mBAAmB,KAAK,IAAI,CAAA;IAC7D,aAAa;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAQD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS,EAAE,SAAS,CAC/B,gBAAgB,GAAG,mBAAmB,EACtC,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAmDpC,CAAA"}

package/lib/index.cjs

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/keyboard-vue v0.0.1    *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:14 *
+* Build time: 2024-10-12 17:44:16 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -12,9 +12,9 @@ Object.defineProperties(exports, {
 	[Symbol.toStringTag]: { value: "Module" }
 });
 const require_KeyboardKey = require("./components/KeyboardKey.cjs");
-const require_VirtualKeyboard = require("./components/VirtualKeyboard.cjs");
 const require_useKeyboard = require("./composables/useKeyboard.cjs");
 const require_useKeyboardPopup = require("./composables/useKeyboardPopup.cjs");
+const require_VirtualKeyboard = require("./components/VirtualKeyboard.cjs");
 const require_KeyboardPopup = require("./components/KeyboardPopup.cjs");
 const require_LicensePlateKeyboard = require("./components/LicensePlateKeyboard.cjs");
 const require_v_keyboard = require("./directives/v-keyboard.cjs");

package/lib/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["/**\n * @composy/keyboard-vue\n * LDesign 虚拟键盘 - Vue 3 适配器\n * @packageDocumentation\n */\n\nimport type { App, Plugin } from 'vue'\nimport { KeyboardPopup, VirtualKeyboard, LicensePlateKeyboard } from './components'\nimport { vKeyboard } from './directives/v-keyboard'\n\n// 导出组件\nexport * from './components'\n\n// 导出 Composables\nexport * from './composables'\n\n// 导出插件\nexport * from './plugins'\n\n// 导出指令\nexport * from './directives'\n\n// 从核心包重新导出\nexport {\n  // 管理器\n  createKeyboardManager,\n  createPositionManager,\n  createKeyboardRenderer,\n  KeyboardManager,\n  PositionManager,\n  KeyboardRenderer,\n\n  // 布局\n  getLayout,\n  registerLayout,\n  registerLayouts,\n  hasLayout,\n  getAvailableLayouts,\n  unregisterLayout,\n  qwertyLayout,\n  numberLayout,\n  integerLayout,\n  symbolLayout,\n  symbolLayout2,\n  licensePlateLayout,\n  licensePlateProvinceLayout,\n  licensePlateLetterLayout,\n  licensePlateAlphanumericLayout,\n  PROVINCES,\n  PLATE_LETTERS,\n  // 场景化键盘\n  idcardLayout,\n  phoneLayout,\n  phoneSimpleLayout,\n  amountLayout,\n  amountSimpleLayout,\n  bankcardLayout,\n  verifycodeLayout,\n  emailLayout,\n  urlLayout,\n  searchLayout,\n  punctLayout,\n  EMAIL_SUFFIXES,\n\n  // 工具函数\n  EventEmitter,\n  isMobile,\n  isTouchDevice,\n  getDeviceType,\n  getViewportInfo,\n  vibrate,\n  onViewportChange,\n  getBoundingRect,\n  onClickOutside,\n  insertTextAtCursor,\n  deleteCharBeforeCursor,\n  // 随机键盘\n  shuffleArray,\n  getRandomNumbers,\n  getRandomLetters,\n  getRandomAlphanumeric,\n  createRandomNumberLayout,\n  createRandomPinLayout,\n  createRandomLetterLayout,\n  createRandomMixedLayout,\n  refreshRandomLayout,\n\n  // 格式化工具\n  formatPhone,\n  formatBankCard,\n  formatAmount,\n  formatIdCard,\n  formatLicensePlate,\n  formatVerifyCode,\n  registerFormatter,\n  getFormatter,\n  applyFormatter,\n\n  // 主题系统\n  getTheme,\n  registerTheme,\n  getAvailableThemes,\n  getAllThemes,\n  setCurrentTheme,\n  getCurrentTheme,\n  themeToCSS,\n  applyTheme,\n  generateThemeStyle,\n  mergeTheme,\n  createTheme,\n  miuiTheme,\n  iosTheme,\n  materialTheme,\n  minimalTheme,\n  darkTheme,\n  presetThemes,\n  defaultTheme,\n} from '@composy/keyboard-core'\n\n// 导出类型\nexport type {\n  KeyboardType,\n  KeyType,\n  KeyDefinition,\n  KeyboardRow,\n  KeyboardConfig,\n  KeyboardState,\n  KeyboardEventMap,\n  KeyboardOptions,\n  DeviceType,\n  PopupPlacement,\n  Position,\n  Size,\n  BoundingRect,\n  PopupPositionConfig,\n  PopupPositionResult,\n  ViewportInfo,\n  // 主题类型\n  ThemeName,\n  ThemeColors,\n  ThemeSizes,\n  ThemeEffects,\n  ThemeConfig,\n  ThemeCSSVariables,\n  // 渲染器类型\n  KeyboardRendererOptions,\n  // 格式化类型\n  FormatterFunction,\n} from '@composy/keyboard-core'\n\n/**\n * 键盘插件配置\n */\nexport interface KeyboardPluginOptions {\n  /**\n   * 组件前缀\n   * @default 'L'\n   */\n  prefix?: string\n}\n\n/**\n * 原生 Vue 项目键盘插件\n * 用于全局注册键盘组件和指令\n *\n * @example\n * ```typescript\n * import { createApp } from 'vue'\n * import { KeyboardVuePlugin } from '@composy/keyboard-vue'\n *\n * const app = createApp(App)\n * app.use(KeyboardVuePlugin, { prefix: 'L' })\n * ```\n */\nexport const KeyboardVuePlugin: Plugin = {\n  install(app: App, options: KeyboardPluginOptions = {}) {\n    const prefix = options.prefix ?? 'L'\n\n    // 注册组件\n    app.component(`${prefix}Keyboard`, VirtualKeyboard)\n    app.component(`${prefix}KeyboardPopup`, KeyboardPopup)\n    app.component(`${prefix}LicensePlateKeyboard`, LicensePlateKeyboard)\n\n    // 注册指令\n    app.directive('keyboard', vKeyboard)\n  },\n}\n\n/**\n * @deprecated 使用 KeyboardVuePlugin 代替\n */\nexport const KeyboardPlugin = KeyboardVuePlugin\n\n// 默认导出插件\nexport default KeyboardVuePlugin\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8KO,MAAM,oBAA4B,EACvC,QAAQ,KAAU,UAAiC,CAAC,GAAG;CACrD,MAAM,SAAS,QAAQ,UAAU;CAGjC,IAAI,UAAU,GAAG,OAAM,WAAY,wBAAA,OAAe;CAClD,IAAI,UAAU,GAAG,OAAM,gBAAiB,sBAAA,OAAa;CACrD,IAAI,UAAU,GAAG,OAAM,uBAAwB,6BAAA,OAAoB;CAGnE,IAAI,UAAU,YAAY,mBAAA,SAAS;AACrC,EACF;AAKO,MAAM,iBAAiB"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["/**\r\n * @composy/keyboard-vue\r\n * LDesign 虚拟键盘 - Vue 3 适配器\r\n * @packageDocumentation\r\n */\r\n\r\nimport type { App, Plugin } from 'vue'\r\nimport {\r\n  KeyboardPopup,\r\n  LicensePlateKeyboard,\r\n  VirtualKeyboard,\r\n} from './components'\r\nimport { vKeyboard } from './directives/v-keyboard'\r\n\r\n// 导出组件\r\nexport * from './components'\r\n\r\n// 导出 Composables\r\nexport * from './composables'\r\n\r\n// 导出指令\r\nexport * from './directives'\r\n\r\n// 导出插件\r\nexport * from './plugins'\r\n\r\n// 从核心包重新导出\r\nexport {\r\n  amountLayout,\r\n  amountSimpleLayout,\r\n  applyFormatter,\r\n  applyTheme,\r\n  bankcardLayout,\r\n  // 管理器\r\n  createKeyboardManager,\r\n  createKeyboardRenderer,\r\n  createPositionManager,\r\n  createRandomLetterLayout,\r\n  createRandomMixedLayout,\r\n  createRandomNumberLayout,\r\n  createRandomPinLayout,\r\n  createTheme,\r\n  darkTheme,\r\n  defaultTheme,\r\n  deleteCharBeforeCursor,\r\n  EMAIL_SUFFIXES,\r\n  emailLayout,\r\n  // 工具函数\r\n  EventEmitter,\r\n  formatAmount,\r\n  formatBankCard,\r\n  formatIdCard,\r\n  formatLicensePlate,\r\n  // 格式化工具\r\n  formatPhone,\r\n  formatVerifyCode,\r\n  generateThemeStyle,\r\n  getAllThemes,\r\n  getAvailableLayouts,\r\n  getAvailableThemes,\r\n  getBoundingRect,\r\n  getCurrentTheme,\r\n  getDeviceType,\r\n  getFormatter,\r\n  // 布局\r\n  getLayout,\r\n  getRandomAlphanumeric,\r\n  getRandomLetters,\r\n  getRandomNumbers,\r\n  // 主题系统\r\n  getTheme,\r\n  getViewportInfo,\r\n  hasLayout,\r\n  // 场景化键盘\r\n  idcardLayout,\r\n  insertTextAtCursor,\r\n  integerLayout,\r\n  iosTheme,\r\n  isMobile,\r\n  isTouchDevice,\r\n  KeyboardManager,\r\n  KeyboardRenderer,\r\n  licensePlateAlphanumericLayout,\r\n  licensePlateLayout,\r\n  licensePlateLetterLayout,\r\n  licensePlateProvinceLayout,\r\n  materialTheme,\r\n  mergeTheme,\r\n  minimalTheme,\r\n  miuiTheme,\r\n  numberLayout,\r\n  onClickOutside,\r\n  onViewportChange,\r\n  phoneLayout,\r\n  phoneSimpleLayout,\r\n  PLATE_LETTERS,\r\n  PositionManager,\r\n  presetThemes,\r\n  PROVINCES,\r\n  punctLayout,\r\n  qwertyLayout,\r\n  refreshRandomLayout,\r\n  registerFormatter,\r\n  registerLayout,\r\n  registerLayouts,\r\n  registerTheme,\r\n  searchLayout,\r\n  setCurrentTheme,\r\n  // 随机键盘\r\n  shuffleArray,\r\n  symbolLayout,\r\n  symbolLayout2,\r\n  themeToCSS,\r\n  unregisterLayout,\r\n  urlLayout,\r\n  verifycodeLayout,\r\n  vibrate,\r\n} from '@composy/keyboard-core'\r\n\r\n// 导出类型\r\nexport type {\r\n  BoundingRect,\r\n  DeviceType,\r\n  // 格式化类型\r\n  FormatterFunction,\r\n  KeyboardConfig,\r\n  KeyboardEventMap,\r\n  KeyboardOptions,\r\n  // 渲染器类型\r\n  KeyboardRendererOptions,\r\n  KeyboardRow,\r\n  KeyboardState,\r\n  KeyboardType,\r\n  KeyDefinition,\r\n  KeyType,\r\n  PopupPlacement,\r\n  PopupPositionConfig,\r\n  PopupPositionResult,\r\n  Position,\r\n  Size,\r\n  ThemeColors,\r\n  ThemeConfig,\r\n  ThemeCSSVariables,\r\n  ThemeEffects,\r\n  // 主题类型\r\n  ThemeName,\r\n  ThemeSizes,\r\n  ViewportInfo,\r\n} from '@composy/keyboard-core'\r\n\r\n/**\r\n * 键盘插件配置\r\n */\r\nexport interface KeyboardPluginOptions {\r\n  /**\r\n   * 组件前缀\r\n   * @default 'L'\r\n   */\r\n  prefix?: string\r\n}\r\n\r\n/**\r\n * 原生 Vue 项目键盘插件\r\n * 用于全局注册键盘组件和指令\r\n *\r\n * @example\r\n * ```typescript\r\n * import { createApp } from 'vue'\r\n * import { KeyboardVuePlugin } from '@composy/keyboard-vue'\r\n *\r\n * const app = createApp(App)\r\n * app.use(KeyboardVuePlugin, { prefix: 'L' })\r\n * ```\r\n */\r\nexport const KeyboardVuePlugin: Plugin = {\r\n  install(app: App, options: KeyboardPluginOptions = {}) {\r\n    const prefix = options.prefix ?? 'L'\r\n\r\n    // 注册组件\r\n    app.component(`${prefix}Keyboard`, VirtualKeyboard)\r\n    app.component(`${prefix}KeyboardPopup`, KeyboardPopup)\r\n    app.component(`${prefix}LicensePlateKeyboard`, LicensePlateKeyboard)\r\n\r\n    // 注册指令\r\n    app.directive('keyboard', vKeyboard)\r\n  },\r\n}\r\n\r\n/**\r\n * @deprecated 使用 KeyboardVuePlugin 代替\r\n */\r\nexport const KeyboardPlugin = KeyboardVuePlugin\r\n\r\n// 默认导出插件\r\nexport default KeyboardVuePlugin\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8KO,MAAM,oBAA4B,EACvC,QAAQ,KAAU,UAAiC,CAAC,GAAG;CACrD,MAAM,SAAS,QAAQ,UAAU;CAGjC,IAAI,UAAU,GAAG,OAAM,WAAY,wBAAA,OAAe;CAClD,IAAI,UAAU,GAAG,OAAM,gBAAiB,sBAAA,OAAa;CACrD,IAAI,UAAU,GAAG,OAAM,uBAAwB,6BAAA,OAAoB;CAGnE,IAAI,UAAU,YAAY,mBAAA,SAAS;AACrC,EACF;AAKO,MAAM,iBAAiB"}