@composy/keyboard-vue 0.0.1 → 0.0.2

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/components/KeyboardKey.vue","../src/components/KeyboardKey.vue","../src/components/VirtualKeyboard.vue","../src/components/VirtualKeyboard.vue","../src/composables/useKeyboard.ts","../src/composables/useKeyboardPopup.ts","../src/components/KeyboardPopup.vue","../src/components/KeyboardPopup.vue","../src/components/LicensePlateKeyboard.vue","../src/components/LicensePlateKeyboard.vue","../src/directives/v-keyboard.ts","../src/plugins/engine-plugin.ts","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { KeyDefinition } from '@composy/keyboard-core'\n\nconst props = defineProps<{\n  /**\n   * 按键定义\n   */\n  keyDef: KeyDefinition\n  /**\n   * 是否大写状态\n   */\n  isUpperCase?: boolean\n  /**\n   * 基础宽度（px）\n   */\n  baseWidth?: number\n  /**\n   * 是否使用 flex 布局（用于 numpad 等需要均分宽度的键盘）\n   */\n  useFlex?: boolean\n}>()\n\nconst emit = defineEmits<{\n  press: [key: KeyDefinition]\n  showOptions: [options: string[]]\n}>()\n\n/**\n * 获取显示文本\n */\nconst label = computed(() => {\n  const keyLabel = props.keyDef.label\n  if (typeof keyLabel === 'string') {\n    return keyLabel\n  }\n  return props.isUpperCase ? keyLabel.upper : keyLabel.lower\n})\n\n/**\n * 计算按键宽度\n */\nconst keyWidth = computed(() => {\n  // 使用 flex 布局时，不设置固定宽度\n  if (props.useFlex) {\n    return undefined\n  }\n  const base = props.baseWidth ?? 36\n  const width = props.keyDef.width ?? 1\n  const gap = 6\n  return `${base * width + (width - 1) * gap}px`\n})\n\n/**\n * 计算按键的 flex 值（用于 numpad 布局）\n */\nconst keyFlex = computed(() => {\n  if (!props.useFlex) {\n    return undefined\n  }\n  // width 属性决定占几份\n  return props.keyDef.width ?? 1\n})\n\n/**\n * 计算 CSS 类\n */\nconst keyClass = computed(() => {\n  const classes = ['keyboard-key', `keyboard-key--${props.keyDef.type}`]\n\n  if (props.keyDef.className) {\n    classes.push(props.keyDef.className)\n  }\n\n  if (props.keyDef.disabled) {\n    classes.push('keyboard-key--disabled')\n  }\n\n  // Shift 键激活状态\n  if (props.keyDef.type === 'shift' && props.isUpperCase) {\n    classes.push('keyboard-key--active')\n  }\n\n  return classes\n})\n\n/**\n * 是否有下拉选项\n */\nconst hasOptions = computed(() => {\n  return props.keyDef.options && props.keyDef.options.length > 0\n})\n\n/**\n * 是否是纯选项按钮（有options但无value，点击只显示选项面板）\n */\nconst isOptionsOnly = computed(() => {\n  return hasOptions.value && !props.keyDef.value\n})\n\n/**\n * 处理按键点击\n */\nconst handlePress = (event: MouseEvent | TouchEvent) => {\n  event.preventDefault()\n  event.stopPropagation()\n\n  if (props.keyDef.disabled) {\n    return\n  }\n\n  // 纯选项按钮：点击直接显示选项面板\n  if (isOptionsOnly.value) {\n    emit('showOptions', props.keyDef.options!)\n    return\n  }\n\n  // 正常按键：触发按键事件\n  emit('press', props.keyDef)\n}\n\n/**\n * 处理下拉箭头点击（显示选项面板）\n */\nconst handleArrowClick = (event: MouseEvent | TouchEvent) => {\n  event.preventDefault()\n  event.stopPropagation()\n\n  if (props.keyDef.disabled) {\n    return\n  }\n\n  if (hasOptions.value) {\n    emit('showOptions', props.keyDef.options!)\n  }\n}\n</script>\n\n<template>\n  <div class=\"keyboard-key-wrapper\" :style=\"{ width: keyWidth, flex: keyFlex }\">\n    <button\n      :class=\"[keyClass, { 'has-options': hasOptions && !isOptionsOnly, 'is-options-only': isOptionsOnly }]\"\n      :disabled=\"keyDef.disabled\"\n      type=\"button\"\n      @mousedown.prevent=\"handlePress\"\n      @touchstart.prevent=\"handlePress\"\n    >\n      <!-- SVG 图标支持 -->\n      <span v-if=\"keyDef.icon\" class=\"keyboard-key__icon\" v-html=\"keyDef.icon\"></span>\n      <span v-else class=\"keyboard-key__label\">{{ label }}</span>\n      <!-- 纯选项按钮内嵌下拉箭头 -->\n      <span v-if=\"isOptionsOnly\" class=\"keyboard-key__arrow-inline\">▼</span>\n    </button>\n    <!-- 有value又有options的按钮：单独可点击的下拉箭头 -->\n    <span\n      v-if=\"hasOptions && !isOptionsOnly\"\n      class=\"keyboard-key__arrow\"\n      @mousedown.prevent=\"handleArrowClick\"\n      @touchstart.prevent=\"handleArrowClick\"\n    >▼</span>\n  </div>\n</template>\n\n<style>\n.keyboard-key-wrapper {\n  position: relative;\n  display: inline-flex;\n}\n\n.keyboard-key {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--keyboard-key-height, 42px);\n  min-width: 32px;\n  width: 100%;\n  padding: 0 6px;\n  border: none;\n  border-radius: var(--keyboard-key-radius, 6px);\n  background-color: var(--keyboard-key-bg, #fff);\n  color: var(--keyboard-key-color, #333);\n  font-size: var(--keyboard-font-size, 16px);\n  font-weight: 500;\n  cursor: pointer;\n  user-select: none;\n  touch-action: manipulation;\n  box-shadow: var(--keyboard-key-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));\n  transition: background-color 0.1s, transform 0.1s;\n}\n\n.keyboard-key.has-options {\n  padding-right: 16px;\n}\n\n.keyboard-key:active {\n  background-color: var(--keyboard-key-active-bg, #e0e0e0);\n  transform: scale(0.95);\n}\n\n.keyboard-key--disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.keyboard-key--disabled:active {\n  transform: none;\n  background-color: var(--keyboard-key-bg, #fff);\n}\n\n/* 功能键样式 */\n.keyboard-key--backspace,\n.keyboard-key--shift,\n.keyboard-key--tab,\n.keyboard-key--clear,\n.keyboard-key--close {\n  background-color: var(--keyboard-fn-key-bg, #d4d6dc);\n  color: var(--keyboard-fn-key-color, #333);\n  font-size: var(--keyboard-fn-font-size, 14px);\n}\n\n.keyboard-key--backspace:active,\n.keyboard-key--shift:active,\n.keyboard-key--tab:active,\n.keyboard-key--clear:active,\n.keyboard-key--close:active {\n  background-color: var(--keyboard-fn-key-active-bg, #b8bac0);\n}\n\n/* Shift 激活状态 */\n.keyboard-key--active {\n  background-color: var(--keyboard-key-active-bg, #007aff) !important;\n  color: #fff !important;\n}\n\n/* 完成/确认键 */\n.keyboard-key--done,\n.keyboard-key--enter {\n  background-color: var(--keyboard-primary-bg, #007aff);\n  color: var(--keyboard-primary-color, #fff);\n  font-size: var(--keyboard-fn-font-size, 14px);\n  font-weight: 600;\n}\n\n.keyboard-key--done:active,\n.keyboard-key--enter:active {\n  background-color: var(--keyboard-primary-active-bg, #0062cc);\n}\n\n/* 空格键 */\n.keyboard-key--space {\n  background-color: var(--keyboard-key-bg, #fff);\n}\n\n.keyboard-key__icon {\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.keyboard-key__icon svg {\n  width: 1em;\n  height: 1em;\n}\n\n.keyboard-key__label {\n  pointer-events: none;\n  line-height: 1;\n}\n\n.keyboard-key__arrow {\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  width: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  opacity: 0.5;\n  cursor: pointer;\n  user-select: none;\n  touch-action: manipulation;\n  border-radius: 0 6px 6px 0;\n}\n\n.keyboard-key__arrow:active {\n  background-color: rgba(0, 0, 0, 0.1);\n  opacity: 1;\n}\n\n/* 纯选项按钮内嵌箭头 */\n.keyboard-key__arrow-inline {\n  margin-left: 4px;\n  font-size: 8px;\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n/* 纯选项按钮样式 */\n.keyboard-key.is-options-only {\n  font-size: 13px;\n  background-color: var(--keyboard-fn-key-bg, #d4d6dc);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { KeyDefinition } from '@composy/keyboard-core'\n\nconst props = defineProps<{\n  /**\n   * 按键定义\n   */\n  keyDef: KeyDefinition\n  /**\n   * 是否大写状态\n   */\n  isUpperCase?: boolean\n  /**\n   * 基础宽度（px）\n   */\n  baseWidth?: number\n  /**\n   * 是否使用 flex 布局（用于 numpad 等需要均分宽度的键盘）\n   */\n  useFlex?: boolean\n}>()\n\nconst emit = defineEmits<{\n  press: [key: KeyDefinition]\n  showOptions: [options: string[]]\n}>()\n\n/**\n * 获取显示文本\n */\nconst label = computed(() => {\n  const keyLabel = props.keyDef.label\n  if (typeof keyLabel === 'string') {\n    return keyLabel\n  }\n  return props.isUpperCase ? keyLabel.upper : keyLabel.lower\n})\n\n/**\n * 计算按键宽度\n */\nconst keyWidth = computed(() => {\n  // 使用 flex 布局时，不设置固定宽度\n  if (props.useFlex) {\n    return undefined\n  }\n  const base = props.baseWidth ?? 36\n  const width = props.keyDef.width ?? 1\n  const gap = 6\n  return `${base * width + (width - 1) * gap}px`\n})\n\n/**\n * 计算按键的 flex 值（用于 numpad 布局）\n */\nconst keyFlex = computed(() => {\n  if (!props.useFlex) {\n    return undefined\n  }\n  // width 属性决定占几份\n  return props.keyDef.width ?? 1\n})\n\n/**\n * 计算 CSS 类\n */\nconst keyClass = computed(() => {\n  const classes = ['keyboard-key', `keyboard-key--${props.keyDef.type}`]\n\n  if (props.keyDef.className) {\n    classes.push(props.keyDef.className)\n  }\n\n  if (props.keyDef.disabled) {\n    classes.push('keyboard-key--disabled')\n  }\n\n  // Shift 键激活状态\n  if (props.keyDef.type === 'shift' && props.isUpperCase) {\n    classes.push('keyboard-key--active')\n  }\n\n  return classes\n})\n\n/**\n * 是否有下拉选项\n */\nconst hasOptions = computed(() => {\n  return props.keyDef.options && props.keyDef.options.length > 0\n})\n\n/**\n * 是否是纯选项按钮（有options但无value，点击只显示选项面板）\n */\nconst isOptionsOnly = computed(() => {\n  return hasOptions.value && !props.keyDef.value\n})\n\n/**\n * 处理按键点击\n */\nconst handlePress = (event: MouseEvent | TouchEvent) => {\n  event.preventDefault()\n  event.stopPropagation()\n\n  if (props.keyDef.disabled) {\n    return\n  }\n\n  // 纯选项按钮：点击直接显示选项面板\n  if (isOptionsOnly.value) {\n    emit('showOptions', props.keyDef.options!)\n    return\n  }\n\n  // 正常按键：触发按键事件\n  emit('press', props.keyDef)\n}\n\n/**\n * 处理下拉箭头点击（显示选项面板）\n */\nconst handleArrowClick = (event: MouseEvent | TouchEvent) => {\n  event.preventDefault()\n  event.stopPropagation()\n\n  if (props.keyDef.disabled) {\n    return\n  }\n\n  if (hasOptions.value) {\n    emit('showOptions', props.keyDef.options!)\n  }\n}\n</script>\n\n<template>\n  <div class=\"keyboard-key-wrapper\" :style=\"{ width: keyWidth, flex: keyFlex }\">\n    <button\n      :class=\"[keyClass, { 'has-options': hasOptions && !isOptionsOnly, 'is-options-only': isOptionsOnly }]\"\n      :disabled=\"keyDef.disabled\"\n      type=\"button\"\n      @mousedown.prevent=\"handlePress\"\n      @touchstart.prevent=\"handlePress\"\n    >\n      <!-- SVG 图标支持 -->\n      <span v-if=\"keyDef.icon\" class=\"keyboard-key__icon\" v-html=\"keyDef.icon\"></span>\n      <span v-else class=\"keyboard-key__label\">{{ label }}</span>\n      <!-- 纯选项按钮内嵌下拉箭头 -->\n      <span v-if=\"isOptionsOnly\" class=\"keyboard-key__arrow-inline\">▼</span>\n    </button>\n    <!-- 有value又有options的按钮：单独可点击的下拉箭头 -->\n    <span\n      v-if=\"hasOptions && !isOptionsOnly\"\n      class=\"keyboard-key__arrow\"\n      @mousedown.prevent=\"handleArrowClick\"\n      @touchstart.prevent=\"handleArrowClick\"\n    >▼</span>\n  </div>\n</template>\n\n<style>\n.keyboard-key-wrapper {\n  position: relative;\n  display: inline-flex;\n}\n\n.keyboard-key {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--keyboard-key-height, 42px);\n  min-width: 32px;\n  width: 100%;\n  padding: 0 6px;\n  border: none;\n  border-radius: var(--keyboard-key-radius, 6px);\n  background-color: var(--keyboard-key-bg, #fff);\n  color: var(--keyboard-key-color, #333);\n  font-size: var(--keyboard-font-size, 16px);\n  font-weight: 500;\n  cursor: pointer;\n  user-select: none;\n  touch-action: manipulation;\n  box-shadow: var(--keyboard-key-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));\n  transition: background-color 0.1s, transform 0.1s;\n}\n\n.keyboard-key.has-options {\n  padding-right: 16px;\n}\n\n.keyboard-key:active {\n  background-color: var(--keyboard-key-active-bg, #e0e0e0);\n  transform: scale(0.95);\n}\n\n.keyboard-key--disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.keyboard-key--disabled:active {\n  transform: none;\n  background-color: var(--keyboard-key-bg, #fff);\n}\n\n/* 功能键样式 */\n.keyboard-key--backspace,\n.keyboard-key--shift,\n.keyboard-key--tab,\n.keyboard-key--clear,\n.keyboard-key--close {\n  background-color: var(--keyboard-fn-key-bg, #d4d6dc);\n  color: var(--keyboard-fn-key-color, #333);\n  font-size: var(--keyboard-fn-font-size, 14px);\n}\n\n.keyboard-key--backspace:active,\n.keyboard-key--shift:active,\n.keyboard-key--tab:active,\n.keyboard-key--clear:active,\n.keyboard-key--close:active {\n  background-color: var(--keyboard-fn-key-active-bg, #b8bac0);\n}\n\n/* Shift 激活状态 */\n.keyboard-key--active {\n  background-color: var(--keyboard-key-active-bg, #007aff) !important;\n  color: #fff !important;\n}\n\n/* 完成/确认键 */\n.keyboard-key--done,\n.keyboard-key--enter {\n  background-color: var(--keyboard-primary-bg, #007aff);\n  color: var(--keyboard-primary-color, #fff);\n  font-size: var(--keyboard-fn-font-size, 14px);\n  font-weight: 600;\n}\n\n.keyboard-key--done:active,\n.keyboard-key--enter:active {\n  background-color: var(--keyboard-primary-active-bg, #0062cc);\n}\n\n/* 空格键 */\n.keyboard-key--space {\n  background-color: var(--keyboard-key-bg, #fff);\n}\n\n.keyboard-key__icon {\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.keyboard-key__icon svg {\n  width: 1em;\n  height: 1em;\n}\n\n.keyboard-key__label {\n  pointer-events: none;\n  line-height: 1;\n}\n\n.keyboard-key__arrow {\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  width: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  opacity: 0.5;\n  cursor: pointer;\n  user-select: none;\n  touch-action: manipulation;\n  border-radius: 0 6px 6px 0;\n}\n\n.keyboard-key__arrow:active {\n  background-color: rgba(0, 0, 0, 0.1);\n  opacity: 1;\n}\n\n/* 纯选项按钮内嵌箭头 */\n.keyboard-key__arrow-inline {\n  margin-left: 4px;\n  font-size: 8px;\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n/* 纯选项按钮样式 */\n.keyboard-key.is-options-only {\n  font-size: 13px;\n  background-color: var(--keyboard-fn-key-bg, #d4d6dc);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type {\n  KeyboardConfig,\n  KeyboardType,\n  KeyDefinition,\n} from '@composy/keyboard-core'\nimport { getLayout } from '@composy/keyboard-core'\nimport KeyboardKey from './KeyboardKey.vue'\n\nconst props = withDefaults(defineProps<{\n  /**\n   * 键盘类型\n   */\n  type?: KeyboardType | string\n  /**\n   * 是否大写状态\n   */\n  isUpperCase?: boolean\n  /**\n   * 自定义布局配置\n   */\n  layout?: KeyboardConfig\n  /**\n   * 按键基础宽度\n   */\n  keyWidth?: number\n}>(), {\n  type: 'qwerty',\n  isUpperCase: false,\n  keyWidth: 36,\n})\n\nconst emit = defineEmits<{\n  keypress: [key: KeyDefinition]\n  selectOption: [option: string]\n}>()\n\n/**\n * 选项面板状态\n */\nconst showOptionsPanel = ref(false)\nconst currentOptions = ref<string[]>([])\n\n/**\n * 当前布局配置\n */\nconst currentLayout = computed(() => {\n  if (props.layout) {\n    return props.layout\n  }\n  return getLayout(props.type) ?? null\n})\n\n/**\n * 处理按键\n */\nconst handleKeyPress = (key: KeyDefinition) => {\n  emit('keypress', key)\n}\n\n/**\n * 显示选项面板\n */\nconst handleShowOptions = (options: string[]) => {\n  currentOptions.value = options\n  showOptionsPanel.value = true\n}\n\n/**\n * 处理选项选择\n */\nconst handleSelectOption = (option: string, event: MouseEvent | TouchEvent) => {\n  event.preventDefault()\n  event.stopPropagation()\n  showOptionsPanel.value = false\n  emit('selectOption', option)\n}\n\n/**\n * 关闭选项面板\n */\nconst closeOptionsPanel = () => {\n  showOptionsPanel.value = false\n}\n\n/**\n * 计算每行的总宽度，用于居中对齐\n */\nconst getRowStyle = (rowIndex: number) => {\n  // 可以根据需要添加行样式\n  return {}\n}\n</script>\n\n<template>\n  <div class=\"virtual-keyboard\">\n    <template v-if=\"currentLayout\">\n      <div\n        v-for=\"(row, rowIndex) in currentLayout.rows\"\n        :key=\"rowIndex\"\n        class=\"virtual-keyboard__row\"\n        :class=\"row.className\"\n        :style=\"getRowStyle(rowIndex)\"\n      >\n        <KeyboardKey\n          v-for=\"key in row.keys\"\n          :key=\"key.id\"\n          :key-def=\"key\"\n          :is-upper-case=\"isUpperCase\"\n          :base-width=\"keyWidth\"\n          :use-flex=\"row.className === 'numpad-row'\"\n          @press=\"handleKeyPress\"\n          @show-options=\"handleShowOptions\"\n        />\n      </div>\n    </template>\n    <div v-else class=\"virtual-keyboard__empty\">\n      键盘布局未找到\n    </div>\n\n    <!-- 选项面板 -->\n    <Transition name=\"options-panel\">\n      <div v-if=\"showOptionsPanel\" class=\"keyboard-options-panel\">\n        <div class=\"keyboard-options-panel__header\">\n          <span class=\"keyboard-options-panel__title\">选择邮箱后缀</span>\n          <button class=\"keyboard-options-panel__close\" type=\"button\" @click=\"closeOptionsPanel\" @touchstart.prevent=\"closeOptionsPanel\">\n            ×\n          </button>\n        </div>\n        <div class=\"keyboard-options-panel__grid\">\n          <button\n            v-for=\"option in currentOptions\"\n            :key=\"option\"\n            class=\"keyboard-options-panel__item\"\n            type=\"button\"\n            @mousedown.prevent=\"(e) => handleSelectOption(option, e)\"\n            @touchstart.prevent=\"(e) => handleSelectOption(option, e)\"\n          >\n            {{ option }}\n          </button>\n        </div>\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style>\n.virtual-keyboard {\n  --key-gap: var(--keyboard-key-gap, 6px);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--key-gap);\n  padding: var(--keyboard-padding, 6px);\n  background-color: var(--keyboard-bg, #d1d5db);\n  border-radius: 0;\n  user-select: none;\n  -webkit-user-select: none;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;\n}\n\n.virtual-keyboard__row {\n  display: flex;\n  justify-content: center;\n  gap: var(--key-gap);\n  width: 100%;\n  padding: 0 2px;\n}\n\n/* 数字键盘行样式 - 按钮均匀分布填满宽度 */\n.virtual-keyboard__row.numpad-row {\n  justify-content: stretch;\n}\n\n.virtual-keyboard__row.numpad-row .keyboard-key-wrapper {\n  flex: 1;\n}\n\n.virtual-keyboard__empty {\n  padding: 20px;\n  color: #999;\n  text-align: center;\n}\n\n/* 全屏选项面板 */\n.keyboard-options-panel {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: var(--keyboard-bg, #d1d5db);\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  padding: 8px;\n}\n\n.keyboard-options-panel__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 8px 12px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  margin-bottom: 8px;\n}\n\n.keyboard-options-panel__title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--keyboard-key-color, #333);\n}\n\n.keyboard-options-panel__close {\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 50%;\n  background: var(--keyboard-fn-key-bg, #d4d6dc);\n  color: var(--keyboard-key-color, #666);\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.keyboard-options-panel__close:active {\n  background: var(--keyboard-fn-key-active-bg, #b8bac0);\n}\n\n.keyboard-options-panel__grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 8px;\n  flex: 1;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n\n.keyboard-options-panel__item {\n  padding: 14px 8px;\n  border: none;\n  border-radius: 8px;\n  background: var(--keyboard-key-bg, #fff);\n  color: var(--keyboard-key-color, #333);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  transition: background-color 0.15s, transform 0.1s;\n}\n\n.keyboard-options-panel__item:active {\n  background: var(--keyboard-option-active-bg, #e8e8e8);\n  transform: scale(0.96);\n}\n\n/* 面板动画 */\n.options-panel-enter-active,\n.options-panel-leave-active {\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.options-panel-enter-from,\n.options-panel-leave-to {\n  opacity: 0;\n  transform: translateY(20px);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type {\n  KeyboardConfig,\n  KeyboardType,\n  KeyDefinition,\n} from '@composy/keyboard-core'\nimport { getLayout } from '@composy/keyboard-core'\nimport KeyboardKey from './KeyboardKey.vue'\n\nconst props = withDefaults(defineProps<{\n  /**\n   * 键盘类型\n   */\n  type?: KeyboardType | string\n  /**\n   * 是否大写状态\n   */\n  isUpperCase?: boolean\n  /**\n   * 自定义布局配置\n   */\n  layout?: KeyboardConfig\n  /**\n   * 按键基础宽度\n   */\n  keyWidth?: number\n}>(), {\n  type: 'qwerty',\n  isUpperCase: false,\n  keyWidth: 36,\n})\n\nconst emit = defineEmits<{\n  keypress: [key: KeyDefinition]\n  selectOption: [option: string]\n}>()\n\n/**\n * 选项面板状态\n */\nconst showOptionsPanel = ref(false)\nconst currentOptions = ref<string[]>([])\n\n/**\n * 当前布局配置\n */\nconst currentLayout = computed(() => {\n  if (props.layout) {\n    return props.layout\n  }\n  return getLayout(props.type) ?? null\n})\n\n/**\n * 处理按键\n */\nconst handleKeyPress = (key: KeyDefinition) => {\n  emit('keypress', key)\n}\n\n/**\n * 显示选项面板\n */\nconst handleShowOptions = (options: string[]) => {\n  currentOptions.value = options\n  showOptionsPanel.value = true\n}\n\n/**\n * 处理选项选择\n */\nconst handleSelectOption = (option: string, event: MouseEvent | TouchEvent) => {\n  event.preventDefault()\n  event.stopPropagation()\n  showOptionsPanel.value = false\n  emit('selectOption', option)\n}\n\n/**\n * 关闭选项面板\n */\nconst closeOptionsPanel = () => {\n  showOptionsPanel.value = false\n}\n\n/**\n * 计算每行的总宽度，用于居中对齐\n */\nconst getRowStyle = (rowIndex: number) => {\n  // 可以根据需要添加行样式\n  return {}\n}\n</script>\n\n<template>\n  <div class=\"virtual-keyboard\">\n    <template v-if=\"currentLayout\">\n      <div\n        v-for=\"(row, rowIndex) in currentLayout.rows\"\n        :key=\"rowIndex\"\n        class=\"virtual-keyboard__row\"\n        :class=\"row.className\"\n        :style=\"getRowStyle(rowIndex)\"\n      >\n        <KeyboardKey\n          v-for=\"key in row.keys\"\n          :key=\"key.id\"\n          :key-def=\"key\"\n          :is-upper-case=\"isUpperCase\"\n          :base-width=\"keyWidth\"\n          :use-flex=\"row.className === 'numpad-row'\"\n          @press=\"handleKeyPress\"\n          @show-options=\"handleShowOptions\"\n        />\n      </div>\n    </template>\n    <div v-else class=\"virtual-keyboard__empty\">\n      键盘布局未找到\n    </div>\n\n    <!-- 选项面板 -->\n    <Transition name=\"options-panel\">\n      <div v-if=\"showOptionsPanel\" class=\"keyboard-options-panel\">\n        <div class=\"keyboard-options-panel__header\">\n          <span class=\"keyboard-options-panel__title\">选择邮箱后缀</span>\n          <button class=\"keyboard-options-panel__close\" type=\"button\" @click=\"closeOptionsPanel\" @touchstart.prevent=\"closeOptionsPanel\">\n            ×\n          </button>\n        </div>\n        <div class=\"keyboard-options-panel__grid\">\n          <button\n            v-for=\"option in currentOptions\"\n            :key=\"option\"\n            class=\"keyboard-options-panel__item\"\n            type=\"button\"\n            @mousedown.prevent=\"(e) => handleSelectOption(option, e)\"\n            @touchstart.prevent=\"(e) => handleSelectOption(option, e)\"\n          >\n            {{ option }}\n          </button>\n        </div>\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style>\n.virtual-keyboard {\n  --key-gap: var(--keyboard-key-gap, 6px);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--key-gap);\n  padding: var(--keyboard-padding, 6px);\n  background-color: var(--keyboard-bg, #d1d5db);\n  border-radius: 0;\n  user-select: none;\n  -webkit-user-select: none;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;\n}\n\n.virtual-keyboard__row {\n  display: flex;\n  justify-content: center;\n  gap: var(--key-gap);\n  width: 100%;\n  padding: 0 2px;\n}\n\n/* 数字键盘行样式 - 按钮均匀分布填满宽度 */\n.virtual-keyboard__row.numpad-row {\n  justify-content: stretch;\n}\n\n.virtual-keyboard__row.numpad-row .keyboard-key-wrapper {\n  flex: 1;\n}\n\n.virtual-keyboard__empty {\n  padding: 20px;\n  color: #999;\n  text-align: center;\n}\n\n/* 全屏选项面板 */\n.keyboard-options-panel {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: var(--keyboard-bg, #d1d5db);\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  padding: 8px;\n}\n\n.keyboard-options-panel__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 8px 12px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  margin-bottom: 8px;\n}\n\n.keyboard-options-panel__title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--keyboard-key-color, #333);\n}\n\n.keyboard-options-panel__close {\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 50%;\n  background: var(--keyboard-fn-key-bg, #d4d6dc);\n  color: var(--keyboard-key-color, #666);\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.keyboard-options-panel__close:active {\n  background: var(--keyboard-fn-key-active-bg, #b8bac0);\n}\n\n.keyboard-options-panel__grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 8px;\n  flex: 1;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n\n.keyboard-options-panel__item {\n  padding: 14px 8px;\n  border: none;\n  border-radius: 8px;\n  background: var(--keyboard-key-bg, #fff);\n  color: var(--keyboard-key-color, #333);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  transition: background-color 0.15s, transform 0.1s;\n}\n\n.keyboard-options-panel__item:active {\n  background: var(--keyboard-option-active-bg, #e8e8e8);\n  transform: scale(0.96);\n}\n\n/* 面板动画 */\n.options-panel-enter-active,\n.options-panel-leave-active {\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.options-panel-enter-from,\n.options-panel-leave-to {\n  opacity: 0;\n  transform: translateY(20px);\n}\n</style>\n","/**\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","/**\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","<script setup lang=\"ts\">\nimport { computed, ref, watch, Teleport, Transition, onMounted, onBeforeUnmount, nextTick } from 'vue'\nimport type { KeyboardType, KeyDefinition, KeyboardOptions } from '@composy/keyboard-core'\nimport { isMobile } from '@composy/keyboard-core'\nimport { useKeyboard } from '../composables/useKeyboard'\nimport { useKeyboardPopup } from '../composables/useKeyboardPopup'\nimport VirtualKeyboard from './VirtualKeyboard.vue'\n\nconst props = withDefaults(defineProps<{\n  /**\n   * 是否显示 (v-model)\n   */\n  modelValue?: boolean\n  /**\n   * 键盘类型\n   */\n  type?: KeyboardType | string\n  /**\n   * 绑定的输入值 (v-model:value)\n   */\n  value?: string\n  /**\n   * 目标输入框元素\n   */\n  target?: HTMLInputElement | HTMLTextAreaElement | null\n  /**\n   * 最大输入长度\n   */\n  maxLength?: number\n  /**\n   * 点击外部是否关闭\n   */\n  closeOnClickOutside?: boolean\n  /**\n   * 是否启用震动反馈\n   */\n  enableVibrate?: boolean\n  /**\n   * 挂载目标\n   */\n  teleportTo?: string | HTMLElement\n}>(), {\n  modelValue: false,\n  type: 'qwerty',\n  value: '',\n  target: null,\n  closeOnClickOutside: true,\n  enableVibrate: true,\n  teleportTo: 'body',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [visible: boolean]\n  'update:value': [value: string]\n  'confirm': [value: string]\n  'keypress': [key: KeyDefinition]\n}>()\n\n// 弹出层 DOM 引用\nconst popupRef = ref<HTMLElement | null>(null)\n\n// 目标元素引用\nconst targetRef = computed(() => props.target as HTMLElement | null)\n\n// 是否移动端\nconst isMobileDevice = ref(isMobile())\n\n// 创建键盘管理器\nconst keyboard = useKeyboard({\n  type: props.type as KeyboardType,\n  value: props.value,\n  maxLength: props.maxLength || (props.type.startsWith('license-plate') ? 7 : undefined),\n  enableVibrate: props.enableVibrate,\n})\n\n// 创建弹出层管理\nconst {\n  popupStyles,\n  maskStyles,\n  placement,\n  showMask,\n  updatePosition,\n  close: closePopup,\n} = useKeyboardPopup({\n  visible: computed(() => props.modelValue),\n  target: targetRef,\n  popup: popupRef,\n  closeOnClickOutside: props.closeOnClickOutside,\n  onClose: () => {\n    emit('update:modelValue', false)\n  },\n})\n\n// 监听键盘类型变化\nwatch(() => props.type, (newType) => {\n  keyboard.switchType(newType as KeyboardType)\n  \n  // 车牌键盘需要设置默认 maxLength\n  if (newType.startsWith('license-plate') && !props.maxLength) {\n    keyboard.setMaxLength(7)\n  }\n})\n\n// 监听外部 value 变化\nwatch(() => props.value, (newValue) => {\n  if (newValue !== keyboard.value.value) {\n    keyboard.setValue(newValue)\n  }\n})\n\n// 监听键盘内部 value 变化\nwatch(keyboard.value, (newValue) => {\n  emit('update:value', newValue)\n})\n\n// 监听可见性变化\nwatch(() => props.modelValue, (visible) => {\n  if (visible) {\n    isMobileDevice.value = isMobile()\n    if (props.target) {\n      keyboard.bindInput(props.target)\n    }\n    keyboard.show(props.target ?? undefined)\n    \n    nextTick(() => {\n      updatePosition()\n    })\n  } else {\n    keyboard.hide()\n  }\n})\n\n// 监听确认事件\nkeyboard.on('confirm', ({ value }) => {\n  emit('confirm', value)\n  emit('update:modelValue', false)\n})\n\n/**\n * 处理按键\n */\nconst handleKeyPress = (key: KeyDefinition) => {\n  keyboard.handleKey(key)\n  emit('keypress', key)\n}\n\n/**\n * 处理下拉选项选择（如邮箱后缀）\n */\nconst handleSelectOption = (option: string) => {\n  let valueToAppend = option\n  \n  // 智能处理邮箱后缀：如果当前值已以 @ 结尾，而选项以 @ 开头，则去掉选项的 @\n  if (option.startsWith('@') && keyboard.value.value.endsWith('@')) {\n    valueToAppend = option.slice(1) // 去掉开头的 @\n  }\n  \n  keyboard.appendValue(valueToAppend)\n}\n\n/**\n * 处理遮罩点击\n */\nconst handleMaskClick = () => {\n  if (props.closeOnClickOutside) {\n    emit('update:modelValue', false)\n  }\n}\n\n/**\n * 计算弹出层类名\n */\nconst popupClass = computed(() => {\n  return [\n    'keyboard-popup',\n    `keyboard-popup--${placement.value}`,\n    {\n      'keyboard-popup--mobile': isMobileDevice.value,\n      'keyboard-popup--desktop': !isMobileDevice.value,\n    },\n  ]\n})\n</script>\n\n<template>\n  <Teleport :to=\"teleportTo\">\n    <Transition name=\"keyboard-mask\">\n      <div\n        v-if=\"modelValue && showMask\"\n        class=\"keyboard-mask\"\n        :style=\"maskStyles\"\n        @click=\"handleMaskClick\"\n      />\n    </Transition>\n\n    <Transition :name=\"isMobileDevice ? 'keyboard-slide' : 'keyboard-fade'\">\n      <div\n        v-if=\"modelValue\"\n        ref=\"popupRef\"\n        :class=\"popupClass\"\n        :style=\"popupStyles\"\n        @mousedown.prevent\n        @touchstart.prevent\n      >\n        <VirtualKeyboard\n          :type=\"keyboard.type.value\"\n          :is-upper-case=\"keyboard.isUpperCase.value\"\n          @keypress=\"handleKeyPress\"\n          @select-option=\"handleSelectOption\"\n        />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n.keyboard-popup {\n  background-color: var(--keyboard-bg, #d1d5db);\n  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.keyboard-popup--desktop {\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);\n  min-width: 320px;\n}\n\n.keyboard-popup--mobile {\n  border-radius: 0;\n  padding-bottom: env(safe-area-inset-bottom, 0);\n}\n\n.keyboard-popup--bottom-sheet {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n\n.keyboard-mask {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 999;\n}\n\n/* 遮罩动画 */\n.keyboard-mask-enter-active,\n.keyboard-mask-leave-active {\n  transition: opacity 0.3s ease;\n}\n\n.keyboard-mask-enter-from,\n.keyboard-mask-leave-to {\n  opacity: 0;\n}\n\n/* PC 端淡入淡出动画 */\n.keyboard-fade-enter-active,\n.keyboard-fade-leave-active {\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.keyboard-fade-enter-from,\n.keyboard-fade-leave-to {\n  opacity: 0;\n  transform: translateY(-10px);\n}\n\n/* 移动端滑入滑出动画 */\n.keyboard-slide-enter-active,\n.keyboard-slide-leave-active {\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.keyboard-slide-enter-from,\n.keyboard-slide-leave-to {\n  transform: translateY(100%);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch, Teleport, Transition, onMounted, onBeforeUnmount, nextTick } from 'vue'\nimport type { KeyboardType, KeyDefinition, KeyboardOptions } from '@composy/keyboard-core'\nimport { isMobile } from '@composy/keyboard-core'\nimport { useKeyboard } from '../composables/useKeyboard'\nimport { useKeyboardPopup } from '../composables/useKeyboardPopup'\nimport VirtualKeyboard from './VirtualKeyboard.vue'\n\nconst props = withDefaults(defineProps<{\n  /**\n   * 是否显示 (v-model)\n   */\n  modelValue?: boolean\n  /**\n   * 键盘类型\n   */\n  type?: KeyboardType | string\n  /**\n   * 绑定的输入值 (v-model:value)\n   */\n  value?: string\n  /**\n   * 目标输入框元素\n   */\n  target?: HTMLInputElement | HTMLTextAreaElement | null\n  /**\n   * 最大输入长度\n   */\n  maxLength?: number\n  /**\n   * 点击外部是否关闭\n   */\n  closeOnClickOutside?: boolean\n  /**\n   * 是否启用震动反馈\n   */\n  enableVibrate?: boolean\n  /**\n   * 挂载目标\n   */\n  teleportTo?: string | HTMLElement\n}>(), {\n  modelValue: false,\n  type: 'qwerty',\n  value: '',\n  target: null,\n  closeOnClickOutside: true,\n  enableVibrate: true,\n  teleportTo: 'body',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [visible: boolean]\n  'update:value': [value: string]\n  'confirm': [value: string]\n  'keypress': [key: KeyDefinition]\n}>()\n\n// 弹出层 DOM 引用\nconst popupRef = ref<HTMLElement | null>(null)\n\n// 目标元素引用\nconst targetRef = computed(() => props.target as HTMLElement | null)\n\n// 是否移动端\nconst isMobileDevice = ref(isMobile())\n\n// 创建键盘管理器\nconst keyboard = useKeyboard({\n  type: props.type as KeyboardType,\n  value: props.value,\n  maxLength: props.maxLength || (props.type.startsWith('license-plate') ? 7 : undefined),\n  enableVibrate: props.enableVibrate,\n})\n\n// 创建弹出层管理\nconst {\n  popupStyles,\n  maskStyles,\n  placement,\n  showMask,\n  updatePosition,\n  close: closePopup,\n} = useKeyboardPopup({\n  visible: computed(() => props.modelValue),\n  target: targetRef,\n  popup: popupRef,\n  closeOnClickOutside: props.closeOnClickOutside,\n  onClose: () => {\n    emit('update:modelValue', false)\n  },\n})\n\n// 监听键盘类型变化\nwatch(() => props.type, (newType) => {\n  keyboard.switchType(newType as KeyboardType)\n  \n  // 车牌键盘需要设置默认 maxLength\n  if (newType.startsWith('license-plate') && !props.maxLength) {\n    keyboard.setMaxLength(7)\n  }\n})\n\n// 监听外部 value 变化\nwatch(() => props.value, (newValue) => {\n  if (newValue !== keyboard.value.value) {\n    keyboard.setValue(newValue)\n  }\n})\n\n// 监听键盘内部 value 变化\nwatch(keyboard.value, (newValue) => {\n  emit('update:value', newValue)\n})\n\n// 监听可见性变化\nwatch(() => props.modelValue, (visible) => {\n  if (visible) {\n    isMobileDevice.value = isMobile()\n    if (props.target) {\n      keyboard.bindInput(props.target)\n    }\n    keyboard.show(props.target ?? undefined)\n    \n    nextTick(() => {\n      updatePosition()\n    })\n  } else {\n    keyboard.hide()\n  }\n})\n\n// 监听确认事件\nkeyboard.on('confirm', ({ value }) => {\n  emit('confirm', value)\n  emit('update:modelValue', false)\n})\n\n/**\n * 处理按键\n */\nconst handleKeyPress = (key: KeyDefinition) => {\n  keyboard.handleKey(key)\n  emit('keypress', key)\n}\n\n/**\n * 处理下拉选项选择（如邮箱后缀）\n */\nconst handleSelectOption = (option: string) => {\n  let valueToAppend = option\n  \n  // 智能处理邮箱后缀：如果当前值已以 @ 结尾，而选项以 @ 开头，则去掉选项的 @\n  if (option.startsWith('@') && keyboard.value.value.endsWith('@')) {\n    valueToAppend = option.slice(1) // 去掉开头的 @\n  }\n  \n  keyboard.appendValue(valueToAppend)\n}\n\n/**\n * 处理遮罩点击\n */\nconst handleMaskClick = () => {\n  if (props.closeOnClickOutside) {\n    emit('update:modelValue', false)\n  }\n}\n\n/**\n * 计算弹出层类名\n */\nconst popupClass = computed(() => {\n  return [\n    'keyboard-popup',\n    `keyboard-popup--${placement.value}`,\n    {\n      'keyboard-popup--mobile': isMobileDevice.value,\n      'keyboard-popup--desktop': !isMobileDevice.value,\n    },\n  ]\n})\n</script>\n\n<template>\n  <Teleport :to=\"teleportTo\">\n    <Transition name=\"keyboard-mask\">\n      <div\n        v-if=\"modelValue && showMask\"\n        class=\"keyboard-mask\"\n        :style=\"maskStyles\"\n        @click=\"handleMaskClick\"\n      />\n    </Transition>\n\n    <Transition :name=\"isMobileDevice ? 'keyboard-slide' : 'keyboard-fade'\">\n      <div\n        v-if=\"modelValue\"\n        ref=\"popupRef\"\n        :class=\"popupClass\"\n        :style=\"popupStyles\"\n        @mousedown.prevent\n        @touchstart.prevent\n      >\n        <VirtualKeyboard\n          :type=\"keyboard.type.value\"\n          :is-upper-case=\"keyboard.isUpperCase.value\"\n          @keypress=\"handleKeyPress\"\n          @select-option=\"handleSelectOption\"\n        />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n.keyboard-popup {\n  background-color: var(--keyboard-bg, #d1d5db);\n  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.keyboard-popup--desktop {\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);\n  min-width: 320px;\n}\n\n.keyboard-popup--mobile {\n  border-radius: 0;\n  padding-bottom: env(safe-area-inset-bottom, 0);\n}\n\n.keyboard-popup--bottom-sheet {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n\n.keyboard-mask {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 999;\n}\n\n/* 遮罩动画 */\n.keyboard-mask-enter-active,\n.keyboard-mask-leave-active {\n  transition: opacity 0.3s ease;\n}\n\n.keyboard-mask-enter-from,\n.keyboard-mask-leave-to {\n  opacity: 0;\n}\n\n/* PC 端淡入淡出动画 */\n.keyboard-fade-enter-active,\n.keyboard-fade-leave-active {\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.keyboard-fade-enter-from,\n.keyboard-fade-leave-to {\n  opacity: 0;\n  transform: translateY(-10px);\n}\n\n/* 移动端滑入滑出动画 */\n.keyboard-slide-enter-active,\n.keyboard-slide-leave-active {\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.keyboard-slide-enter-from,\n.keyboard-slide-leave-to {\n  transform: translateY(100%);\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * 智能车牌号键盘组件\n * 核心逻辑在 KeyboardManager 中实现自动切换\n * Vue 组件只负责 UI 展示和状态同步\n */\nimport { computed, watch } from 'vue'\nimport type { KeyDefinition } from '@composy/keyboard-core'\nimport { useKeyboard } from '../composables/useKeyboard'\nimport VirtualKeyboard from './VirtualKeyboard.vue'\n\nconst props = withDefaults(defineProps<{\n  /**\n   * 当前车牌号值（双向绑定）\n   */\n  modelValue?: string\n  /**\n   * 是否新能源车牌（8位）\n   * @default false\n   */\n  newEnergy?: boolean\n}>(), {\n  modelValue: '',\n  newEnergy: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  done: [value: string]\n}>()\n\n/**\n * 最大长度\n */\nconst maxLength = computed(() => props.newEnergy ? 8 : 7)\n\n/**\n * 使用 KeyboardManager 管理键盘状态\n */\nconst keyboard = useKeyboard({\n  type: 'license-plate-province',\n  value: props.modelValue,\n  maxLength: maxLength.value,\n  enableVibrate: true,\n})\n\n// 监听外部 value 变化\nwatch(() => props.modelValue, (newValue) => {\n  if (newValue !== keyboard.value.value) {\n    keyboard.setValue(newValue)\n  }\n})\n\n// 监听键盘内部 value 变化\nwatch(keyboard.value, (newValue) => {\n  emit('update:modelValue', newValue)\n})\n\n// 监听 maxLength 变化\nwatch(maxLength, (newMaxLength) => {\n  keyboard.setMaxLength(newMaxLength)\n  \n  // 如果当前值超过新的最大长度，截断\n  if (props.modelValue.length > newMaxLength) {\n    const truncated = props.modelValue.slice(0, newMaxLength)\n    keyboard.setValue(truncated)\n    emit('update:modelValue', truncated)\n  }\n})\n\n// 监听确认事件\nkeyboard.on('confirm', ({ value }) => {\n  emit('done', value)\n})\n\n/**\n * 处理按键\n */\nconst handleKeyPress = (key: KeyDefinition) => {\n  keyboard.handleKey(key)\n}\n\n/**\n * 当前位置提示\n */\nconst positionHint = computed(() => {\n  const len = props.modelValue.length\n  if (len === 0) return '请选择省份'\n  if (len === 1) return '请输入字母'\n  if (len < maxLength.value) return `第${len + 1}位`\n  return '已完成'\n})\n</script>\n\n<template>\n  <div class=\"license-plate-keyboard\">\n    <!-- 输入显示区 -->\n    <div class=\"license-plate-keyboard__display\">\n      <div class=\"license-plate-keyboard__value\">\n        <span\n          v-for=\"(char, index) in modelValue.padEnd(maxLength, ' ').split('')\"\n          :key=\"index\"\n          class=\"license-plate-keyboard__char\"\n          :class=\"{\n            'license-plate-keyboard__char--filled': char !== ' ',\n            'license-plate-keyboard__char--current': index === modelValue.length,\n            'license-plate-keyboard__char--province': index === 0,\n            'license-plate-keyboard__char--new-energy': newEnergy && index === 7\n          }\"\n        >\n          {{ char === ' ' ? '' : char }}\n        </span>\n      </div>\n      <div class=\"license-plate-keyboard__hint\">{{ positionHint }}</div>\n    </div>\n    \n    <!-- 键盘区 - 由 core 的 KeyboardManager 自动切换布局 -->\n    <VirtualKeyboard\n      :type=\"keyboard.type.value\"\n      :is-upper-case=\"keyboard.isUpperCase.value\"\n      @keypress=\"handleKeyPress\"\n    />\n  </div>\n</template>\n\n<style>\n.license-plate-keyboard {\n  display: flex;\n  flex-direction: column;\n  background: var(--keyboard-bg, #d1d5db);\n}\n\n.license-plate-keyboard__display {\n  padding: 14px 20px;\n  background: var(--keyboard-display-bg, #f5f5f5);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.06);\n}\n\n.license-plate-keyboard__value {\n  display: flex;\n  justify-content: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n.license-plate-keyboard__char {\n  width: 40px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #fff;\n  border: 2px solid #e0e0e0;\n  border-radius: 8px;\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--keyboard-key-color, #333);\n  transition: border-color 0.2s, background-color 0.2s;\n}\n\n.license-plate-keyboard__char--filled {\n  border-color: var(--keyboard-primary-bg, #007aff);\n  background: rgba(0, 122, 255, 0.05);\n}\n\n.license-plate-keyboard__char--current {\n  border-color: var(--keyboard-primary-bg, #007aff);\n  background: rgba(0, 122, 255, 0.1);\n  animation: plate-char-pulse 1s infinite;\n}\n\n.license-plate-keyboard__char--province {\n  background: rgba(255, 193, 7, 0.1);\n}\n\n.license-plate-keyboard__char--province.license-plate-keyboard__char--filled {\n  background: rgba(255, 193, 7, 0.15);\n  border-color: #ffc107;\n}\n\n.license-plate-keyboard__char--new-energy {\n  background: rgba(34, 197, 94, 0.1);\n}\n\n.license-plate-keyboard__char--new-energy.license-plate-keyboard__char--filled {\n  background: rgba(34, 197, 94, 0.15);\n  border-color: #22c55e;\n}\n\n@keyframes plate-char-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.6; }\n}\n\n.license-plate-keyboard__hint {\n  text-align: center;\n  font-size: 12px;\n  color: #888;\n}\n\n/* 车牌键盘专用样式 */\n.license-plate-keyboard :deep(.plate-keyboard-row) {\n  gap: 4px;\n}\n\n.license-plate-keyboard :deep(.key-plate-province),\n.license-plate-keyboard :deep(.key-plate-letter),\n.license-plate-keyboard :deep(.key-plate-number) {\n  min-width: 30px;\n  height: 40px;\n  font-size: 15px;\n  border-radius: var(--keyboard-key-radius, 6px);\n}\n\n.license-plate-keyboard :deep(.key-plate-special) {\n  background: rgba(255, 193, 7, 0.2);\n  color: #b8860b;\n}\n\n.license-plate-keyboard :deep(.key-plate-fn) {\n  background: var(--keyboard-fn-key-bg, #d4d6dc);\n}\n\n.license-plate-keyboard :deep(.key-plate-switch) {\n  background: var(--keyboard-fn-key-bg, #d4d6dc);\n  font-size: 13px;\n}\n\n.license-plate-keyboard :deep(.key-plate-done) {\n  background: var(--keyboard-primary-bg, #007aff);\n  color: #fff;\n  font-size: 13px;\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * 智能车牌号键盘组件\n * 核心逻辑在 KeyboardManager 中实现自动切换\n * Vue 组件只负责 UI 展示和状态同步\n */\nimport { computed, watch } from 'vue'\nimport type { KeyDefinition } from '@composy/keyboard-core'\nimport { useKeyboard } from '../composables/useKeyboard'\nimport VirtualKeyboard from './VirtualKeyboard.vue'\n\nconst props = withDefaults(defineProps<{\n  /**\n   * 当前车牌号值（双向绑定）\n   */\n  modelValue?: string\n  /**\n   * 是否新能源车牌（8位）\n   * @default false\n   */\n  newEnergy?: boolean\n}>(), {\n  modelValue: '',\n  newEnergy: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  done: [value: string]\n}>()\n\n/**\n * 最大长度\n */\nconst maxLength = computed(() => props.newEnergy ? 8 : 7)\n\n/**\n * 使用 KeyboardManager 管理键盘状态\n */\nconst keyboard = useKeyboard({\n  type: 'license-plate-province',\n  value: props.modelValue,\n  maxLength: maxLength.value,\n  enableVibrate: true,\n})\n\n// 监听外部 value 变化\nwatch(() => props.modelValue, (newValue) => {\n  if (newValue !== keyboard.value.value) {\n    keyboard.setValue(newValue)\n  }\n})\n\n// 监听键盘内部 value 变化\nwatch(keyboard.value, (newValue) => {\n  emit('update:modelValue', newValue)\n})\n\n// 监听 maxLength 变化\nwatch(maxLength, (newMaxLength) => {\n  keyboard.setMaxLength(newMaxLength)\n  \n  // 如果当前值超过新的最大长度，截断\n  if (props.modelValue.length > newMaxLength) {\n    const truncated = props.modelValue.slice(0, newMaxLength)\n    keyboard.setValue(truncated)\n    emit('update:modelValue', truncated)\n  }\n})\n\n// 监听确认事件\nkeyboard.on('confirm', ({ value }) => {\n  emit('done', value)\n})\n\n/**\n * 处理按键\n */\nconst handleKeyPress = (key: KeyDefinition) => {\n  keyboard.handleKey(key)\n}\n\n/**\n * 当前位置提示\n */\nconst positionHint = computed(() => {\n  const len = props.modelValue.length\n  if (len === 0) return '请选择省份'\n  if (len === 1) return '请输入字母'\n  if (len < maxLength.value) return `第${len + 1}位`\n  return '已完成'\n})\n</script>\n\n<template>\n  <div class=\"license-plate-keyboard\">\n    <!-- 输入显示区 -->\n    <div class=\"license-plate-keyboard__display\">\n      <div class=\"license-plate-keyboard__value\">\n        <span\n          v-for=\"(char, index) in modelValue.padEnd(maxLength, ' ').split('')\"\n          :key=\"index\"\n          class=\"license-plate-keyboard__char\"\n          :class=\"{\n            'license-plate-keyboard__char--filled': char !== ' ',\n            'license-plate-keyboard__char--current': index === modelValue.length,\n            'license-plate-keyboard__char--province': index === 0,\n            'license-plate-keyboard__char--new-energy': newEnergy && index === 7\n          }\"\n        >\n          {{ char === ' ' ? '' : char }}\n        </span>\n      </div>\n      <div class=\"license-plate-keyboard__hint\">{{ positionHint }}</div>\n    </div>\n    \n    <!-- 键盘区 - 由 core 的 KeyboardManager 自动切换布局 -->\n    <VirtualKeyboard\n      :type=\"keyboard.type.value\"\n      :is-upper-case=\"keyboard.isUpperCase.value\"\n      @keypress=\"handleKeyPress\"\n    />\n  </div>\n</template>\n\n<style>\n.license-plate-keyboard {\n  display: flex;\n  flex-direction: column;\n  background: var(--keyboard-bg, #d1d5db);\n}\n\n.license-plate-keyboard__display {\n  padding: 14px 20px;\n  background: var(--keyboard-display-bg, #f5f5f5);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.06);\n}\n\n.license-plate-keyboard__value {\n  display: flex;\n  justify-content: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n.license-plate-keyboard__char {\n  width: 40px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #fff;\n  border: 2px solid #e0e0e0;\n  border-radius: 8px;\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--keyboard-key-color, #333);\n  transition: border-color 0.2s, background-color 0.2s;\n}\n\n.license-plate-keyboard__char--filled {\n  border-color: var(--keyboard-primary-bg, #007aff);\n  background: rgba(0, 122, 255, 0.05);\n}\n\n.license-plate-keyboard__char--current {\n  border-color: var(--keyboard-primary-bg, #007aff);\n  background: rgba(0, 122, 255, 0.1);\n  animation: plate-char-pulse 1s infinite;\n}\n\n.license-plate-keyboard__char--province {\n  background: rgba(255, 193, 7, 0.1);\n}\n\n.license-plate-keyboard__char--province.license-plate-keyboard__char--filled {\n  background: rgba(255, 193, 7, 0.15);\n  border-color: #ffc107;\n}\n\n.license-plate-keyboard__char--new-energy {\n  background: rgba(34, 197, 94, 0.1);\n}\n\n.license-plate-keyboard__char--new-energy.license-plate-keyboard__char--filled {\n  background: rgba(34, 197, 94, 0.15);\n  border-color: #22c55e;\n}\n\n@keyframes plate-char-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.6; }\n}\n\n.license-plate-keyboard__hint {\n  text-align: center;\n  font-size: 12px;\n  color: #888;\n}\n\n/* 车牌键盘专用样式 */\n.license-plate-keyboard :deep(.plate-keyboard-row) {\n  gap: 4px;\n}\n\n.license-plate-keyboard :deep(.key-plate-province),\n.license-plate-keyboard :deep(.key-plate-letter),\n.license-plate-keyboard :deep(.key-plate-number) {\n  min-width: 30px;\n  height: 40px;\n  font-size: 15px;\n  border-radius: var(--keyboard-key-radius, 6px);\n}\n\n.license-plate-keyboard :deep(.key-plate-special) {\n  background: rgba(255, 193, 7, 0.2);\n  color: #b8860b;\n}\n\n.license-plate-keyboard :deep(.key-plate-fn) {\n  background: var(--keyboard-fn-key-bg, #d4d6dc);\n}\n\n.license-plate-keyboard :deep(.key-plate-switch) {\n  background: var(--keyboard-fn-key-bg, #d4d6dc);\n  font-size: 13px;\n}\n\n.license-plate-keyboard :deep(.key-plate-done) {\n  background: var(--keyboard-primary-bg, #007aff);\n  color: #fff;\n  font-size: 13px;\n}\n</style>\n","/**\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","/**\n * 键盘 Engine 插件\n * 适配 @composy/engine-vue 的插件\n * @module plugins/engine-plugin\n */\n\nimport type { App } from 'vue'\nimport { VirtualKeyboard, KeyboardPopup, LicensePlateKeyboard } from '../components'\nimport { vKeyboard } from '../directives/v-keyboard'\n\n/**\n * Engine 插件接口（兼容 @composy/engine-core Plugin）\n */\nexport interface KeyboardEnginePluginOptions {\n  /**\n   * 组件前缀\n   * @default 'L'\n   */\n  prefix?: string\n}\n\n/**\n * 键盘 Engine 插件\n *\n * 符合 @composy/engine-core Plugin 接口规范\n * 通过 engine.use(KeyboardEnginePlugin) 安装\n *\n * @example\n * ```typescript\n * import { createVueEngine } from '@composy/engine-vue'\n * import { KeyboardEnginePlugin } from '@composy/keyboard-vue'\n *\n * const engine = createVueEngine({\n *   plugins: [KeyboardEnginePlugin],\n * })\n * ```\n */\nexport const KeyboardEnginePlugin = {\n  name: 'keyboard',\n  version: '0.1.0',\n\n  async install(context: unknown, options?: KeyboardEnginePluginOptions) {\n    const prefix = options?.prefix ?? 'L'\n\n    // 获取 Vue 应用实例（从 engine 上下文）\n    const app: App | undefined = context?.framework?.app\n\n    if (app) {\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    if (context?.container?.singleton) {\n      context.container.singleton('keyboard', {\n        name: 'keyboard',\n        version: '0.1.0',\n      })\n    }\n  },\n}\n","/**\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":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/components/KeyboardKey.vue","../src/components/KeyboardKey.vue","../src/components/KeyboardKey.vue","../src/composables/useKeyboard.ts","../src/composables/useKeyboardPopup.ts","../src/components/VirtualKeyboard.vue","../src/components/VirtualKeyboard.vue","../src/components/VirtualKeyboard.vue","../src/components/KeyboardPopup.vue","../src/components/KeyboardPopup.vue","../src/components/KeyboardPopup.vue","../src/components/LicensePlateKeyboard.vue","../src/components/LicensePlateKeyboard.vue","../src/components/LicensePlateKeyboard.vue","../src/directives/v-keyboard.ts","../src/plugins/engine-plugin.ts","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { KeyDefinition } from '@composy/keyboard-core'\r\nimport { sanitizeSvgIcon } from '@composy/keyboard-core'\r\nimport { computed } from 'vue'\r\n\r\nconst props = defineProps<{\r\n  /**\r\n   * 按键定义\r\n   */\r\n  keyDef: KeyDefinition\r\n  /**\r\n   * 是否大写状态\r\n   */\r\n  isUpperCase?: boolean\r\n  /**\r\n   * 基础宽度（px）\r\n   */\r\n  baseWidth?: number\r\n  /**\r\n   * 是否使用 flex 布局（用于 numpad 等需要均分宽度的键盘）\r\n   */\r\n  useFlex?: boolean\r\n}>()\r\n\r\nconst emit = defineEmits<{\r\n  press: [key: KeyDefinition]\r\n  showOptions: [options: string[]]\r\n}>()\r\n\r\n/**\r\n * 获取显示文本\r\n */\r\nconst label = computed(() => {\r\n  const keyLabel = props.keyDef.label\r\n  if (typeof keyLabel === 'string') {\r\n    return keyLabel\r\n  }\r\n  return props.isUpperCase ? keyLabel.upper : keyLabel.lower\r\n})\r\n\r\nconst iconMarkup = computed(() => {\r\n  const icon = props.keyDef.icon\r\n  return icon ? sanitizeSvgIcon(icon) : ''\r\n})\r\n\r\n/**\r\n * 计算按键宽度\r\n */\r\nconst keyWidth = computed(() => {\r\n  // 使用 flex 布局时，不设置固定宽度\r\n  if (props.useFlex) {\r\n    return undefined\r\n  }\r\n  const base = props.baseWidth ?? 36\r\n  const width = props.keyDef.width ?? 1\r\n  const gap = 6\r\n  return `${base * width + (width - 1) * gap}px`\r\n})\r\n\r\n/**\r\n * 计算按键的 flex 值（用于 numpad 布局）\r\n */\r\nconst keyFlex = computed(() => {\r\n  if (!props.useFlex) {\r\n    return undefined\r\n  }\r\n  // width 属性决定占几份\r\n  return props.keyDef.width ?? 1\r\n})\r\n\r\n/**\r\n * 计算 CSS 类\r\n */\r\nconst keyClass = computed(() => {\r\n  const classes = ['keyboard-key', `keyboard-key--${props.keyDef.type}`]\r\n\r\n  if (props.keyDef.className) {\r\n    classes.push(props.keyDef.className)\r\n  }\r\n\r\n  if (props.keyDef.disabled) {\r\n    classes.push('keyboard-key--disabled')\r\n  }\r\n\r\n  // Shift 键激活状态\r\n  if (props.keyDef.type === 'shift' && props.isUpperCase) {\r\n    classes.push('keyboard-key--active')\r\n  }\r\n\r\n  return classes\r\n})\r\n\r\n/**\r\n * 是否有下拉选项\r\n */\r\nconst hasOptions = computed(() => {\r\n  return props.keyDef.options && props.keyDef.options.length > 0\r\n})\r\n\r\n/**\r\n * 是否是纯选项按钮（有options但无value，点击只显示选项面板）\r\n */\r\nconst isOptionsOnly = computed(() => {\r\n  return hasOptions.value && !props.keyDef.value\r\n})\r\n\r\n/**\r\n * 处理按键点击\r\n */\r\nconst handlePress = (event: MouseEvent | TouchEvent) => {\r\n  event.preventDefault()\r\n  event.stopPropagation()\r\n\r\n  if (props.keyDef.disabled) {\r\n    return\r\n  }\r\n\r\n  // 纯选项按钮：点击直接显示选项面板\r\n  if (isOptionsOnly.value) {\r\n    emit('showOptions', props.keyDef.options ?? [])\r\n    return\r\n  }\r\n\r\n  // 正常按键：触发按键事件\r\n  emit('press', props.keyDef)\r\n}\r\n\r\n/**\r\n * 处理下拉箭头点击（显示选项面板）\r\n */\r\nconst handleArrowClick = (event: MouseEvent | TouchEvent) => {\r\n  event.preventDefault()\r\n  event.stopPropagation()\r\n\r\n  if (props.keyDef.disabled) {\r\n    return\r\n  }\r\n\r\n  if (hasOptions.value) {\r\n    emit('showOptions', props.keyDef.options ?? [])\r\n  }\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div class=\"keyboard-key-wrapper\" :style=\"{ width: keyWidth, flex: keyFlex }\">\r\n    <button\r\n      :class=\"[\r\n        keyClass,\r\n        {\r\n          'has-options': hasOptions && !isOptionsOnly,\r\n          'is-options-only': isOptionsOnly,\r\n        },\r\n      ]\"\r\n      :disabled=\"keyDef.disabled\"\r\n      type=\"button\"\r\n      @mousedown.prevent=\"handlePress\"\r\n      @touchstart.prevent=\"handlePress\"\r\n    >\r\n      <!-- SVG 图标支持 -->\r\n      <span v-if=\"iconMarkup\" class=\"keyboard-key__icon\" v-html=\"iconMarkup\" />\r\n      <span v-else-if=\"keyDef.icon\" class=\"keyboard-key__label\">{{\r\n        keyDef.icon\r\n      }}</span>\r\n      <span v-else class=\"keyboard-key__label\">{{ label }}</span>\r\n      <!-- 纯选项按钮内嵌下拉箭头 -->\r\n      <span v-if=\"isOptionsOnly\" class=\"keyboard-key__arrow-inline\">▼</span>\r\n    </button>\r\n    <!-- 有value又有options的按钮：单独可点击的下拉箭头 -->\r\n    <span\r\n      v-if=\"hasOptions && !isOptionsOnly\"\r\n      class=\"keyboard-key__arrow\"\r\n      @mousedown.prevent=\"handleArrowClick\"\r\n      @touchstart.prevent=\"handleArrowClick\"\r\n      >▼</span\r\n    >\r\n  </div>\r\n</template>\r\n\r\n<style>\r\n.keyboard-key-wrapper {\r\n  position: relative;\r\n  display: inline-flex;\r\n}\r\n\r\n.keyboard-key {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  min-width: var(--ld-px-32);\r\n  height: var(--keyboard-key-height);\r\n  padding: 0 var(--ld-spacing-xs);\r\n  border: 0;\r\n  border-radius: var(--keyboard-key-radius);\r\n  background-color: var(--keyboard-key-bg);\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--keyboard-font-size);\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  touch-action: manipulation;\r\n  box-shadow: var(--keyboard-key-shadow);\r\n  transition:\r\n    background-color var(--ld-duration-fast),\r\n    transform var(--ld-duration-fast);\r\n}\r\n\r\n.keyboard-key.has-options {\r\n  padding-right: var(--ld-px-16);\r\n}\r\n.keyboard-key:active {\r\n  background-color: var(--keyboard-key-active-bg);\r\n  transform: scale(0.95);\r\n}\r\n.keyboard-key--disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n}\r\n.keyboard-key--disabled:active {\r\n  transform: none;\r\n  background-color: var(--keyboard-key-bg);\r\n}\r\n\r\n.keyboard-key--backspace,\r\n.keyboard-key--shift,\r\n.keyboard-key--tab,\r\n.keyboard-key--clear,\r\n.keyboard-key--close {\r\n  background-color: var(--keyboard-fn-key-bg);\r\n  color: var(--keyboard-fn-key-color);\r\n  font-size: var(--keyboard-fn-font-size);\r\n}\r\n\r\n.keyboard-key--backspace:active,\r\n.keyboard-key--shift:active,\r\n.keyboard-key--tab:active,\r\n.keyboard-key--clear:active,\r\n.keyboard-key--close:active {\r\n  background-color: var(--keyboard-fn-key-active-bg);\r\n}\r\n\r\n.keyboard-key--active {\r\n  background-color: var(--keyboard-key-active-bg) !important;\r\n  color: var(--ld-text-inverse) !important;\r\n}\r\n\r\n.keyboard-key--done,\r\n.keyboard-key--enter {\r\n  background-color: var(--keyboard-primary-bg);\r\n  color: var(--keyboard-primary-color);\r\n  font-size: var(--keyboard-fn-font-size);\r\n  font-weight: 600;\r\n}\r\n\r\n.keyboard-key--done:active,\r\n.keyboard-key--enter:active {\r\n  background-color: var(--keyboard-primary-active-bg);\r\n}\r\n.keyboard-key--space {\r\n  background-color: var(--keyboard-key-bg);\r\n}\r\n\r\n.keyboard-key__icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n.keyboard-key__icon svg {\r\n  width: 1em;\r\n  height: 1em;\r\n}\r\n.keyboard-key__label {\r\n  pointer-events: none;\r\n  line-height: 1;\r\n}\r\n\r\n.keyboard-key__arrow {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--ld-px-20);\r\n  border-radius: var(--ld-radius-none) var(--ld-radius-sm) var(--ld-radius-sm)\r\n    var(--ld-radius-none);\r\n  font-size: var(--ld-font-xs);\r\n  opacity: 0.5;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  touch-action: manipulation;\r\n}\r\n\r\n.keyboard-key__arrow:active {\r\n  background-color: var(--keyboard-key-active-bg);\r\n  opacity: 1;\r\n}\r\n\r\n.keyboard-key__arrow-inline {\r\n  margin-left: var(--ld-px-4);\r\n  font-size: var(--ld-font-xs);\r\n  opacity: 0.6;\r\n  pointer-events: none;\r\n}\r\n\r\n.keyboard-key.is-options-only {\r\n  background-color: var(--keyboard-fn-key-bg);\r\n  font-size: var(--ld-font-sm);\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport type { KeyDefinition } from '@composy/keyboard-core'\r\nimport { sanitizeSvgIcon } from '@composy/keyboard-core'\r\nimport { computed } from 'vue'\r\n\r\nconst props = defineProps<{\r\n  /**\r\n   * 按键定义\r\n   */\r\n  keyDef: KeyDefinition\r\n  /**\r\n   * 是否大写状态\r\n   */\r\n  isUpperCase?: boolean\r\n  /**\r\n   * 基础宽度（px）\r\n   */\r\n  baseWidth?: number\r\n  /**\r\n   * 是否使用 flex 布局（用于 numpad 等需要均分宽度的键盘）\r\n   */\r\n  useFlex?: boolean\r\n}>()\r\n\r\nconst emit = defineEmits<{\r\n  press: [key: KeyDefinition]\r\n  showOptions: [options: string[]]\r\n}>()\r\n\r\n/**\r\n * 获取显示文本\r\n */\r\nconst label = computed(() => {\r\n  const keyLabel = props.keyDef.label\r\n  if (typeof keyLabel === 'string') {\r\n    return keyLabel\r\n  }\r\n  return props.isUpperCase ? keyLabel.upper : keyLabel.lower\r\n})\r\n\r\nconst iconMarkup = computed(() => {\r\n  const icon = props.keyDef.icon\r\n  return icon ? sanitizeSvgIcon(icon) : ''\r\n})\r\n\r\n/**\r\n * 计算按键宽度\r\n */\r\nconst keyWidth = computed(() => {\r\n  // 使用 flex 布局时，不设置固定宽度\r\n  if (props.useFlex) {\r\n    return undefined\r\n  }\r\n  const base = props.baseWidth ?? 36\r\n  const width = props.keyDef.width ?? 1\r\n  const gap = 6\r\n  return `${base * width + (width - 1) * gap}px`\r\n})\r\n\r\n/**\r\n * 计算按键的 flex 值（用于 numpad 布局）\r\n */\r\nconst keyFlex = computed(() => {\r\n  if (!props.useFlex) {\r\n    return undefined\r\n  }\r\n  // width 属性决定占几份\r\n  return props.keyDef.width ?? 1\r\n})\r\n\r\n/**\r\n * 计算 CSS 类\r\n */\r\nconst keyClass = computed(() => {\r\n  const classes = ['keyboard-key', `keyboard-key--${props.keyDef.type}`]\r\n\r\n  if (props.keyDef.className) {\r\n    classes.push(props.keyDef.className)\r\n  }\r\n\r\n  if (props.keyDef.disabled) {\r\n    classes.push('keyboard-key--disabled')\r\n  }\r\n\r\n  // Shift 键激活状态\r\n  if (props.keyDef.type === 'shift' && props.isUpperCase) {\r\n    classes.push('keyboard-key--active')\r\n  }\r\n\r\n  return classes\r\n})\r\n\r\n/**\r\n * 是否有下拉选项\r\n */\r\nconst hasOptions = computed(() => {\r\n  return props.keyDef.options && props.keyDef.options.length > 0\r\n})\r\n\r\n/**\r\n * 是否是纯选项按钮（有options但无value，点击只显示选项面板）\r\n */\r\nconst isOptionsOnly = computed(() => {\r\n  return hasOptions.value && !props.keyDef.value\r\n})\r\n\r\n/**\r\n * 处理按键点击\r\n */\r\nconst handlePress = (event: MouseEvent | TouchEvent) => {\r\n  event.preventDefault()\r\n  event.stopPropagation()\r\n\r\n  if (props.keyDef.disabled) {\r\n    return\r\n  }\r\n\r\n  // 纯选项按钮：点击直接显示选项面板\r\n  if (isOptionsOnly.value) {\r\n    emit('showOptions', props.keyDef.options ?? [])\r\n    return\r\n  }\r\n\r\n  // 正常按键：触发按键事件\r\n  emit('press', props.keyDef)\r\n}\r\n\r\n/**\r\n * 处理下拉箭头点击（显示选项面板）\r\n */\r\nconst handleArrowClick = (event: MouseEvent | TouchEvent) => {\r\n  event.preventDefault()\r\n  event.stopPropagation()\r\n\r\n  if (props.keyDef.disabled) {\r\n    return\r\n  }\r\n\r\n  if (hasOptions.value) {\r\n    emit('showOptions', props.keyDef.options ?? [])\r\n  }\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div class=\"keyboard-key-wrapper\" :style=\"{ width: keyWidth, flex: keyFlex }\">\r\n    <button\r\n      :class=\"[\r\n        keyClass,\r\n        {\r\n          'has-options': hasOptions && !isOptionsOnly,\r\n          'is-options-only': isOptionsOnly,\r\n        },\r\n      ]\"\r\n      :disabled=\"keyDef.disabled\"\r\n      type=\"button\"\r\n      @mousedown.prevent=\"handlePress\"\r\n      @touchstart.prevent=\"handlePress\"\r\n    >\r\n      <!-- SVG 图标支持 -->\r\n      <span v-if=\"iconMarkup\" class=\"keyboard-key__icon\" v-html=\"iconMarkup\" />\r\n      <span v-else-if=\"keyDef.icon\" class=\"keyboard-key__label\">{{\r\n        keyDef.icon\r\n      }}</span>\r\n      <span v-else class=\"keyboard-key__label\">{{ label }}</span>\r\n      <!-- 纯选项按钮内嵌下拉箭头 -->\r\n      <span v-if=\"isOptionsOnly\" class=\"keyboard-key__arrow-inline\">▼</span>\r\n    </button>\r\n    <!-- 有value又有options的按钮：单独可点击的下拉箭头 -->\r\n    <span\r\n      v-if=\"hasOptions && !isOptionsOnly\"\r\n      class=\"keyboard-key__arrow\"\r\n      @mousedown.prevent=\"handleArrowClick\"\r\n      @touchstart.prevent=\"handleArrowClick\"\r\n      >▼</span\r\n    >\r\n  </div>\r\n</template>\r\n\r\n<style>\r\n.keyboard-key-wrapper {\r\n  position: relative;\r\n  display: inline-flex;\r\n}\r\n\r\n.keyboard-key {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  min-width: var(--ld-px-32);\r\n  height: var(--keyboard-key-height);\r\n  padding: 0 var(--ld-spacing-xs);\r\n  border: 0;\r\n  border-radius: var(--keyboard-key-radius);\r\n  background-color: var(--keyboard-key-bg);\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--keyboard-font-size);\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  touch-action: manipulation;\r\n  box-shadow: var(--keyboard-key-shadow);\r\n  transition:\r\n    background-color var(--ld-duration-fast),\r\n    transform var(--ld-duration-fast);\r\n}\r\n\r\n.keyboard-key.has-options {\r\n  padding-right: var(--ld-px-16);\r\n}\r\n.keyboard-key:active {\r\n  background-color: var(--keyboard-key-active-bg);\r\n  transform: scale(0.95);\r\n}\r\n.keyboard-key--disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n}\r\n.keyboard-key--disabled:active {\r\n  transform: none;\r\n  background-color: var(--keyboard-key-bg);\r\n}\r\n\r\n.keyboard-key--backspace,\r\n.keyboard-key--shift,\r\n.keyboard-key--tab,\r\n.keyboard-key--clear,\r\n.keyboard-key--close {\r\n  background-color: var(--keyboard-fn-key-bg);\r\n  color: var(--keyboard-fn-key-color);\r\n  font-size: var(--keyboard-fn-font-size);\r\n}\r\n\r\n.keyboard-key--backspace:active,\r\n.keyboard-key--shift:active,\r\n.keyboard-key--tab:active,\r\n.keyboard-key--clear:active,\r\n.keyboard-key--close:active {\r\n  background-color: var(--keyboard-fn-key-active-bg);\r\n}\r\n\r\n.keyboard-key--active {\r\n  background-color: var(--keyboard-key-active-bg) !important;\r\n  color: var(--ld-text-inverse) !important;\r\n}\r\n\r\n.keyboard-key--done,\r\n.keyboard-key--enter {\r\n  background-color: var(--keyboard-primary-bg);\r\n  color: var(--keyboard-primary-color);\r\n  font-size: var(--keyboard-fn-font-size);\r\n  font-weight: 600;\r\n}\r\n\r\n.keyboard-key--done:active,\r\n.keyboard-key--enter:active {\r\n  background-color: var(--keyboard-primary-active-bg);\r\n}\r\n.keyboard-key--space {\r\n  background-color: var(--keyboard-key-bg);\r\n}\r\n\r\n.keyboard-key__icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n.keyboard-key__icon svg {\r\n  width: 1em;\r\n  height: 1em;\r\n}\r\n.keyboard-key__label {\r\n  pointer-events: none;\r\n  line-height: 1;\r\n}\r\n\r\n.keyboard-key__arrow {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--ld-px-20);\r\n  border-radius: var(--ld-radius-none) var(--ld-radius-sm) var(--ld-radius-sm)\r\n    var(--ld-radius-none);\r\n  font-size: var(--ld-font-xs);\r\n  opacity: 0.5;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  touch-action: manipulation;\r\n}\r\n\r\n.keyboard-key__arrow:active {\r\n  background-color: var(--keyboard-key-active-bg);\r\n  opacity: 1;\r\n}\r\n\r\n.keyboard-key__arrow-inline {\r\n  margin-left: var(--ld-px-4);\r\n  font-size: var(--ld-font-xs);\r\n  opacity: 0.6;\r\n  pointer-events: none;\r\n}\r\n\r\n.keyboard-key.is-options-only {\r\n  background-color: var(--keyboard-fn-key-bg);\r\n  font-size: var(--ld-font-sm);\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport type { KeyDefinition } from '@composy/keyboard-core'\r\nimport { sanitizeSvgIcon } from '@composy/keyboard-core'\r\nimport { computed } from 'vue'\r\n\r\nconst props = defineProps<{\r\n  /**\r\n   * 按键定义\r\n   */\r\n  keyDef: KeyDefinition\r\n  /**\r\n   * 是否大写状态\r\n   */\r\n  isUpperCase?: boolean\r\n  /**\r\n   * 基础宽度（px）\r\n   */\r\n  baseWidth?: number\r\n  /**\r\n   * 是否使用 flex 布局（用于 numpad 等需要均分宽度的键盘）\r\n   */\r\n  useFlex?: boolean\r\n}>()\r\n\r\nconst emit = defineEmits<{\r\n  press: [key: KeyDefinition]\r\n  showOptions: [options: string[]]\r\n}>()\r\n\r\n/**\r\n * 获取显示文本\r\n */\r\nconst label = computed(() => {\r\n  const keyLabel = props.keyDef.label\r\n  if (typeof keyLabel === 'string') {\r\n    return keyLabel\r\n  }\r\n  return props.isUpperCase ? keyLabel.upper : keyLabel.lower\r\n})\r\n\r\nconst iconMarkup = computed(() => {\r\n  const icon = props.keyDef.icon\r\n  return icon ? sanitizeSvgIcon(icon) : ''\r\n})\r\n\r\n/**\r\n * 计算按键宽度\r\n */\r\nconst keyWidth = computed(() => {\r\n  // 使用 flex 布局时，不设置固定宽度\r\n  if (props.useFlex) {\r\n    return undefined\r\n  }\r\n  const base = props.baseWidth ?? 36\r\n  const width = props.keyDef.width ?? 1\r\n  const gap = 6\r\n  return `${base * width + (width - 1) * gap}px`\r\n})\r\n\r\n/**\r\n * 计算按键的 flex 值（用于 numpad 布局）\r\n */\r\nconst keyFlex = computed(() => {\r\n  if (!props.useFlex) {\r\n    return undefined\r\n  }\r\n  // width 属性决定占几份\r\n  return props.keyDef.width ?? 1\r\n})\r\n\r\n/**\r\n * 计算 CSS 类\r\n */\r\nconst keyClass = computed(() => {\r\n  const classes = ['keyboard-key', `keyboard-key--${props.keyDef.type}`]\r\n\r\n  if (props.keyDef.className) {\r\n    classes.push(props.keyDef.className)\r\n  }\r\n\r\n  if (props.keyDef.disabled) {\r\n    classes.push('keyboard-key--disabled')\r\n  }\r\n\r\n  // Shift 键激活状态\r\n  if (props.keyDef.type === 'shift' && props.isUpperCase) {\r\n    classes.push('keyboard-key--active')\r\n  }\r\n\r\n  return classes\r\n})\r\n\r\n/**\r\n * 是否有下拉选项\r\n */\r\nconst hasOptions = computed(() => {\r\n  return props.keyDef.options && props.keyDef.options.length > 0\r\n})\r\n\r\n/**\r\n * 是否是纯选项按钮（有options但无value，点击只显示选项面板）\r\n */\r\nconst isOptionsOnly = computed(() => {\r\n  return hasOptions.value && !props.keyDef.value\r\n})\r\n\r\n/**\r\n * 处理按键点击\r\n */\r\nconst handlePress = (event: MouseEvent | TouchEvent) => {\r\n  event.preventDefault()\r\n  event.stopPropagation()\r\n\r\n  if (props.keyDef.disabled) {\r\n    return\r\n  }\r\n\r\n  // 纯选项按钮：点击直接显示选项面板\r\n  if (isOptionsOnly.value) {\r\n    emit('showOptions', props.keyDef.options ?? [])\r\n    return\r\n  }\r\n\r\n  // 正常按键：触发按键事件\r\n  emit('press', props.keyDef)\r\n}\r\n\r\n/**\r\n * 处理下拉箭头点击（显示选项面板）\r\n */\r\nconst handleArrowClick = (event: MouseEvent | TouchEvent) => {\r\n  event.preventDefault()\r\n  event.stopPropagation()\r\n\r\n  if (props.keyDef.disabled) {\r\n    return\r\n  }\r\n\r\n  if (hasOptions.value) {\r\n    emit('showOptions', props.keyDef.options ?? [])\r\n  }\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div class=\"keyboard-key-wrapper\" :style=\"{ width: keyWidth, flex: keyFlex }\">\r\n    <button\r\n      :class=\"[\r\n        keyClass,\r\n        {\r\n          'has-options': hasOptions && !isOptionsOnly,\r\n          'is-options-only': isOptionsOnly,\r\n        },\r\n      ]\"\r\n      :disabled=\"keyDef.disabled\"\r\n      type=\"button\"\r\n      @mousedown.prevent=\"handlePress\"\r\n      @touchstart.prevent=\"handlePress\"\r\n    >\r\n      <!-- SVG 图标支持 -->\r\n      <span v-if=\"iconMarkup\" class=\"keyboard-key__icon\" v-html=\"iconMarkup\" />\r\n      <span v-else-if=\"keyDef.icon\" class=\"keyboard-key__label\">{{\r\n        keyDef.icon\r\n      }}</span>\r\n      <span v-else class=\"keyboard-key__label\">{{ label }}</span>\r\n      <!-- 纯选项按钮内嵌下拉箭头 -->\r\n      <span v-if=\"isOptionsOnly\" class=\"keyboard-key__arrow-inline\">▼</span>\r\n    </button>\r\n    <!-- 有value又有options的按钮：单独可点击的下拉箭头 -->\r\n    <span\r\n      v-if=\"hasOptions && !isOptionsOnly\"\r\n      class=\"keyboard-key__arrow\"\r\n      @mousedown.prevent=\"handleArrowClick\"\r\n      @touchstart.prevent=\"handleArrowClick\"\r\n      >▼</span\r\n    >\r\n  </div>\r\n</template>\r\n\r\n<style>\r\n.keyboard-key-wrapper {\r\n  position: relative;\r\n  display: inline-flex;\r\n}\r\n\r\n.keyboard-key {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  min-width: var(--ld-px-32);\r\n  height: var(--keyboard-key-height);\r\n  padding: 0 var(--ld-spacing-xs);\r\n  border: 0;\r\n  border-radius: var(--keyboard-key-radius);\r\n  background-color: var(--keyboard-key-bg);\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--keyboard-font-size);\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  touch-action: manipulation;\r\n  box-shadow: var(--keyboard-key-shadow);\r\n  transition:\r\n    background-color var(--ld-duration-fast),\r\n    transform var(--ld-duration-fast);\r\n}\r\n\r\n.keyboard-key.has-options {\r\n  padding-right: var(--ld-px-16);\r\n}\r\n.keyboard-key:active {\r\n  background-color: var(--keyboard-key-active-bg);\r\n  transform: scale(0.95);\r\n}\r\n.keyboard-key--disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n}\r\n.keyboard-key--disabled:active {\r\n  transform: none;\r\n  background-color: var(--keyboard-key-bg);\r\n}\r\n\r\n.keyboard-key--backspace,\r\n.keyboard-key--shift,\r\n.keyboard-key--tab,\r\n.keyboard-key--clear,\r\n.keyboard-key--close {\r\n  background-color: var(--keyboard-fn-key-bg);\r\n  color: var(--keyboard-fn-key-color);\r\n  font-size: var(--keyboard-fn-font-size);\r\n}\r\n\r\n.keyboard-key--backspace:active,\r\n.keyboard-key--shift:active,\r\n.keyboard-key--tab:active,\r\n.keyboard-key--clear:active,\r\n.keyboard-key--close:active {\r\n  background-color: var(--keyboard-fn-key-active-bg);\r\n}\r\n\r\n.keyboard-key--active {\r\n  background-color: var(--keyboard-key-active-bg) !important;\r\n  color: var(--ld-text-inverse) !important;\r\n}\r\n\r\n.keyboard-key--done,\r\n.keyboard-key--enter {\r\n  background-color: var(--keyboard-primary-bg);\r\n  color: var(--keyboard-primary-color);\r\n  font-size: var(--keyboard-fn-font-size);\r\n  font-weight: 600;\r\n}\r\n\r\n.keyboard-key--done:active,\r\n.keyboard-key--enter:active {\r\n  background-color: var(--keyboard-primary-active-bg);\r\n}\r\n.keyboard-key--space {\r\n  background-color: var(--keyboard-key-bg);\r\n}\r\n\r\n.keyboard-key__icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n.keyboard-key__icon svg {\r\n  width: 1em;\r\n  height: 1em;\r\n}\r\n.keyboard-key__label {\r\n  pointer-events: none;\r\n  line-height: 1;\r\n}\r\n\r\n.keyboard-key__arrow {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--ld-px-20);\r\n  border-radius: var(--ld-radius-none) var(--ld-radius-sm) var(--ld-radius-sm)\r\n    var(--ld-radius-none);\r\n  font-size: var(--ld-font-xs);\r\n  opacity: 0.5;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  touch-action: manipulation;\r\n}\r\n\r\n.keyboard-key__arrow:active {\r\n  background-color: var(--keyboard-key-active-bg);\r\n  opacity: 1;\r\n}\r\n\r\n.keyboard-key__arrow-inline {\r\n  margin-left: var(--ld-px-4);\r\n  font-size: var(--ld-font-xs);\r\n  opacity: 0.6;\r\n  pointer-events: none;\r\n}\r\n\r\n.keyboard-key.is-options-only {\r\n  background-color: var(--keyboard-fn-key-bg);\r\n  font-size: var(--ld-font-sm);\r\n}\r\n</style>\r\n","/**\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","/**\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","<script setup lang=\"ts\">\r\nimport type {\r\n  KeyboardConfig,\r\n  KeyboardType,\r\n  KeyDefinition,\r\n} from '@composy/keyboard-core'\r\nimport { getLayout } from '@composy/keyboard-core'\r\nimport { computed, ref } from 'vue'\r\nimport KeyboardKey from './KeyboardKey.vue'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /**\r\n     * 键盘类型\r\n     */\r\n    type?: KeyboardType | string\r\n    /**\r\n     * 是否大写状态\r\n     */\r\n    isUpperCase?: boolean\r\n    /**\r\n     * 自定义布局配置\r\n     */\r\n    layout?: KeyboardConfig\r\n    /**\r\n     * 按键基础宽度\r\n     */\r\n    keyWidth?: number\r\n  }>(),\r\n  {\r\n    type: 'qwerty',\r\n    isUpperCase: false,\r\n    keyWidth: 36,\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  keypress: [key: KeyDefinition]\r\n  selectOption: [option: string]\r\n}>()\r\n\r\n/**\r\n * 选项面板状态\r\n */\r\nconst showOptionsPanel = ref(false)\r\nconst currentOptions = ref<string[]>([])\r\n\r\n/**\r\n * 当前布局配置\r\n */\r\nconst currentLayout = computed(() => {\r\n  if (props.layout) {\r\n    return props.layout\r\n  }\r\n  return getLayout(props.type) ?? null\r\n})\r\n\r\n/**\r\n * 处理按键\r\n */\r\nconst handleKeyPress = (key: KeyDefinition) => {\r\n  emit('keypress', key)\r\n}\r\n\r\n/**\r\n * 显示选项面板\r\n */\r\nconst handleShowOptions = (options: string[]) => {\r\n  currentOptions.value = options\r\n  showOptionsPanel.value = true\r\n}\r\n\r\n/**\r\n * 处理选项选择\r\n */\r\nconst handleSelectOption = (option: string, event: MouseEvent | TouchEvent) => {\r\n  event.preventDefault()\r\n  event.stopPropagation()\r\n  showOptionsPanel.value = false\r\n  emit('selectOption', option)\r\n}\r\n\r\n/**\r\n * 关闭选项面板\r\n */\r\nconst closeOptionsPanel = () => {\r\n  showOptionsPanel.value = false\r\n}\r\n\r\n/**\r\n * 计算每行的总宽度，用于居中对齐\r\n */\r\nconst getRowStyle = () => {\r\n  // 可以根据需要添加行样式\r\n  return {}\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div class=\"virtual-keyboard\">\r\n    <template v-if=\"currentLayout\">\r\n      <div\r\n        v-for=\"(row, rowIndex) in currentLayout.rows\"\r\n        :key=\"rowIndex\"\r\n        class=\"virtual-keyboard__row\"\r\n        :class=\"row.className\"\r\n        :style=\"getRowStyle()\"\r\n      >\r\n        <KeyboardKey\r\n          v-for=\"key in row.keys\"\r\n          :key=\"key.id\"\r\n          :key-def=\"key\"\r\n          :is-upper-case=\"isUpperCase\"\r\n          :base-width=\"keyWidth\"\r\n          :use-flex=\"row.className === 'numpad-row'\"\r\n          @press=\"handleKeyPress\"\r\n          @show-options=\"handleShowOptions\"\r\n        />\r\n      </div>\r\n    </template>\r\n    <div v-else class=\"virtual-keyboard__empty\">键盘布局未找到</div>\r\n\r\n    <!-- 选项面板 -->\r\n    <Transition name=\"options-panel\">\r\n      <div v-if=\"showOptionsPanel\" class=\"keyboard-options-panel\">\r\n        <div class=\"keyboard-options-panel__header\">\r\n          <span class=\"keyboard-options-panel__title\">选择邮箱后缀</span>\r\n          <button\r\n            class=\"keyboard-options-panel__close\"\r\n            type=\"button\"\r\n            @click=\"closeOptionsPanel\"\r\n            @touchstart.prevent=\"closeOptionsPanel\"\r\n          >\r\n            ×\r\n          </button>\r\n        </div>\r\n        <div class=\"keyboard-options-panel__grid\">\r\n          <button\r\n            v-for=\"option in currentOptions\"\r\n            :key=\"option\"\r\n            class=\"keyboard-options-panel__item\"\r\n            type=\"button\"\r\n            @mousedown.prevent=\"e => handleSelectOption(option, e)\"\r\n            @touchstart.prevent=\"e => handleSelectOption(option, e)\"\r\n          >\r\n            {{ option }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </Transition>\r\n  </div>\r\n</template>\r\n\r\n<style>\r\n.virtual-keyboard {\r\n  --key-gap: var(--keyboard-key-gap);\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: var(--key-gap);\r\n  padding: var(--keyboard-padding);\r\n  background-color: var(--keyboard-bg);\r\n  user-select: none;\r\n  -webkit-user-select: none;\r\n  overflow: hidden;\r\n  font-family: var(--ld-font-family);\r\n}\r\n\r\n.virtual-keyboard__row {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--key-gap);\r\n  width: 100%;\r\n  padding: 0 var(--ld-px-2);\r\n}\r\n\r\n.virtual-keyboard__row.numpad-row {\r\n  justify-content: stretch;\r\n}\r\n.virtual-keyboard__row.numpad-row .keyboard-key-wrapper {\r\n  flex: 1;\r\n}\r\n\r\n.virtual-keyboard__empty {\r\n  padding: var(--ld-spacing-lg);\r\n  color: var(--ld-text-muted);\r\n  text-align: center;\r\n}\r\n\r\n.keyboard-options-panel {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 10;\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: var(--ld-spacing-sm);\r\n  background: var(--keyboard-bg);\r\n}\r\n\r\n.keyboard-options-panel__header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: var(--ld-spacing-sm) var(--ld-spacing-sm) var(--ld-spacing-md);\r\n  margin-bottom: var(--ld-spacing-sm);\r\n  border-bottom: var(--ld-border-width-thin) solid var(--ld-border-subtle);\r\n}\r\n\r\n.keyboard-options-panel__title {\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--ld-font-sm);\r\n  font-weight: 600;\r\n}\r\n\r\n.keyboard-options-panel__close {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--ld-px-28);\r\n  height: var(--ld-px-28);\r\n  border: 0;\r\n  border-radius: var(--ld-radius-full);\r\n  background: var(--keyboard-fn-key-bg);\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--ld-font-lg);\r\n  line-height: 1;\r\n  cursor: pointer;\r\n}\r\n\r\n.keyboard-options-panel__close:active {\r\n  background: var(--keyboard-fn-key-active-bg);\r\n}\r\n\r\n.keyboard-options-panel__grid {\r\n  display: grid;\r\n  flex: 1;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: var(--ld-spacing-sm);\r\n  padding: var(--ld-spacing-xs) 0;\r\n  overflow-y: auto;\r\n}\r\n\r\n.keyboard-options-panel__item {\r\n  padding: var(--ld-spacing-md) var(--ld-spacing-sm);\r\n  border: 0;\r\n  border-radius: var(--ld-radius-md);\r\n  background: var(--keyboard-key-bg);\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--ld-font-sm);\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  box-shadow: var(--ld-shadow-sm, none);\r\n  transition:\r\n    background-color var(--ld-duration-fast),\r\n    transform var(--ld-duration-fast);\r\n}\r\n\r\n.keyboard-options-panel__item:active {\r\n  background: var(--keyboard-key-active-bg);\r\n  transform: scale(0.96);\r\n}\r\n\r\n.options-panel-enter-active,\r\n.options-panel-leave-active {\r\n  transition:\r\n    opacity var(--ld-duration-fast),\r\n    transform var(--ld-duration-fast);\r\n}\r\n\r\n.options-panel-enter-from,\r\n.options-panel-leave-to {\r\n  opacity: 0;\r\n  transform: translateY(var(--ld-px-20));\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport type {\r\n  KeyboardConfig,\r\n  KeyboardType,\r\n  KeyDefinition,\r\n} from '@composy/keyboard-core'\r\nimport { getLayout } from '@composy/keyboard-core'\r\nimport { computed, ref } from 'vue'\r\nimport KeyboardKey from './KeyboardKey.vue'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /**\r\n     * 键盘类型\r\n     */\r\n    type?: KeyboardType | string\r\n    /**\r\n     * 是否大写状态\r\n     */\r\n    isUpperCase?: boolean\r\n    /**\r\n     * 自定义布局配置\r\n     */\r\n    layout?: KeyboardConfig\r\n    /**\r\n     * 按键基础宽度\r\n     */\r\n    keyWidth?: number\r\n  }>(),\r\n  {\r\n    type: 'qwerty',\r\n    isUpperCase: false,\r\n    keyWidth: 36,\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  keypress: [key: KeyDefinition]\r\n  selectOption: [option: string]\r\n}>()\r\n\r\n/**\r\n * 选项面板状态\r\n */\r\nconst showOptionsPanel = ref(false)\r\nconst currentOptions = ref<string[]>([])\r\n\r\n/**\r\n * 当前布局配置\r\n */\r\nconst currentLayout = computed(() => {\r\n  if (props.layout) {\r\n    return props.layout\r\n  }\r\n  return getLayout(props.type) ?? null\r\n})\r\n\r\n/**\r\n * 处理按键\r\n */\r\nconst handleKeyPress = (key: KeyDefinition) => {\r\n  emit('keypress', key)\r\n}\r\n\r\n/**\r\n * 显示选项面板\r\n */\r\nconst handleShowOptions = (options: string[]) => {\r\n  currentOptions.value = options\r\n  showOptionsPanel.value = true\r\n}\r\n\r\n/**\r\n * 处理选项选择\r\n */\r\nconst handleSelectOption = (option: string, event: MouseEvent | TouchEvent) => {\r\n  event.preventDefault()\r\n  event.stopPropagation()\r\n  showOptionsPanel.value = false\r\n  emit('selectOption', option)\r\n}\r\n\r\n/**\r\n * 关闭选项面板\r\n */\r\nconst closeOptionsPanel = () => {\r\n  showOptionsPanel.value = false\r\n}\r\n\r\n/**\r\n * 计算每行的总宽度，用于居中对齐\r\n */\r\nconst getRowStyle = () => {\r\n  // 可以根据需要添加行样式\r\n  return {}\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div class=\"virtual-keyboard\">\r\n    <template v-if=\"currentLayout\">\r\n      <div\r\n        v-for=\"(row, rowIndex) in currentLayout.rows\"\r\n        :key=\"rowIndex\"\r\n        class=\"virtual-keyboard__row\"\r\n        :class=\"row.className\"\r\n        :style=\"getRowStyle()\"\r\n      >\r\n        <KeyboardKey\r\n          v-for=\"key in row.keys\"\r\n          :key=\"key.id\"\r\n          :key-def=\"key\"\r\n          :is-upper-case=\"isUpperCase\"\r\n          :base-width=\"keyWidth\"\r\n          :use-flex=\"row.className === 'numpad-row'\"\r\n          @press=\"handleKeyPress\"\r\n          @show-options=\"handleShowOptions\"\r\n        />\r\n      </div>\r\n    </template>\r\n    <div v-else class=\"virtual-keyboard__empty\">键盘布局未找到</div>\r\n\r\n    <!-- 选项面板 -->\r\n    <Transition name=\"options-panel\">\r\n      <div v-if=\"showOptionsPanel\" class=\"keyboard-options-panel\">\r\n        <div class=\"keyboard-options-panel__header\">\r\n          <span class=\"keyboard-options-panel__title\">选择邮箱后缀</span>\r\n          <button\r\n            class=\"keyboard-options-panel__close\"\r\n            type=\"button\"\r\n            @click=\"closeOptionsPanel\"\r\n            @touchstart.prevent=\"closeOptionsPanel\"\r\n          >\r\n            ×\r\n          </button>\r\n        </div>\r\n        <div class=\"keyboard-options-panel__grid\">\r\n          <button\r\n            v-for=\"option in currentOptions\"\r\n            :key=\"option\"\r\n            class=\"keyboard-options-panel__item\"\r\n            type=\"button\"\r\n            @mousedown.prevent=\"e => handleSelectOption(option, e)\"\r\n            @touchstart.prevent=\"e => handleSelectOption(option, e)\"\r\n          >\r\n            {{ option }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </Transition>\r\n  </div>\r\n</template>\r\n\r\n<style>\r\n.virtual-keyboard {\r\n  --key-gap: var(--keyboard-key-gap);\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: var(--key-gap);\r\n  padding: var(--keyboard-padding);\r\n  background-color: var(--keyboard-bg);\r\n  user-select: none;\r\n  -webkit-user-select: none;\r\n  overflow: hidden;\r\n  font-family: var(--ld-font-family);\r\n}\r\n\r\n.virtual-keyboard__row {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--key-gap);\r\n  width: 100%;\r\n  padding: 0 var(--ld-px-2);\r\n}\r\n\r\n.virtual-keyboard__row.numpad-row {\r\n  justify-content: stretch;\r\n}\r\n.virtual-keyboard__row.numpad-row .keyboard-key-wrapper {\r\n  flex: 1;\r\n}\r\n\r\n.virtual-keyboard__empty {\r\n  padding: var(--ld-spacing-lg);\r\n  color: var(--ld-text-muted);\r\n  text-align: center;\r\n}\r\n\r\n.keyboard-options-panel {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 10;\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: var(--ld-spacing-sm);\r\n  background: var(--keyboard-bg);\r\n}\r\n\r\n.keyboard-options-panel__header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: var(--ld-spacing-sm) var(--ld-spacing-sm) var(--ld-spacing-md);\r\n  margin-bottom: var(--ld-spacing-sm);\r\n  border-bottom: var(--ld-border-width-thin) solid var(--ld-border-subtle);\r\n}\r\n\r\n.keyboard-options-panel__title {\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--ld-font-sm);\r\n  font-weight: 600;\r\n}\r\n\r\n.keyboard-options-panel__close {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--ld-px-28);\r\n  height: var(--ld-px-28);\r\n  border: 0;\r\n  border-radius: var(--ld-radius-full);\r\n  background: var(--keyboard-fn-key-bg);\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--ld-font-lg);\r\n  line-height: 1;\r\n  cursor: pointer;\r\n}\r\n\r\n.keyboard-options-panel__close:active {\r\n  background: var(--keyboard-fn-key-active-bg);\r\n}\r\n\r\n.keyboard-options-panel__grid {\r\n  display: grid;\r\n  flex: 1;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: var(--ld-spacing-sm);\r\n  padding: var(--ld-spacing-xs) 0;\r\n  overflow-y: auto;\r\n}\r\n\r\n.keyboard-options-panel__item {\r\n  padding: var(--ld-spacing-md) var(--ld-spacing-sm);\r\n  border: 0;\r\n  border-radius: var(--ld-radius-md);\r\n  background: var(--keyboard-key-bg);\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--ld-font-sm);\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  box-shadow: var(--ld-shadow-sm, none);\r\n  transition:\r\n    background-color var(--ld-duration-fast),\r\n    transform var(--ld-duration-fast);\r\n}\r\n\r\n.keyboard-options-panel__item:active {\r\n  background: var(--keyboard-key-active-bg);\r\n  transform: scale(0.96);\r\n}\r\n\r\n.options-panel-enter-active,\r\n.options-panel-leave-active {\r\n  transition:\r\n    opacity var(--ld-duration-fast),\r\n    transform var(--ld-duration-fast);\r\n}\r\n\r\n.options-panel-enter-from,\r\n.options-panel-leave-to {\r\n  opacity: 0;\r\n  transform: translateY(var(--ld-px-20));\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport type {\r\n  KeyboardConfig,\r\n  KeyboardType,\r\n  KeyDefinition,\r\n} from '@composy/keyboard-core'\r\nimport { getLayout } from '@composy/keyboard-core'\r\nimport { computed, ref } from 'vue'\r\nimport KeyboardKey from './KeyboardKey.vue'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /**\r\n     * 键盘类型\r\n     */\r\n    type?: KeyboardType | string\r\n    /**\r\n     * 是否大写状态\r\n     */\r\n    isUpperCase?: boolean\r\n    /**\r\n     * 自定义布局配置\r\n     */\r\n    layout?: KeyboardConfig\r\n    /**\r\n     * 按键基础宽度\r\n     */\r\n    keyWidth?: number\r\n  }>(),\r\n  {\r\n    type: 'qwerty',\r\n    isUpperCase: false,\r\n    keyWidth: 36,\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  keypress: [key: KeyDefinition]\r\n  selectOption: [option: string]\r\n}>()\r\n\r\n/**\r\n * 选项面板状态\r\n */\r\nconst showOptionsPanel = ref(false)\r\nconst currentOptions = ref<string[]>([])\r\n\r\n/**\r\n * 当前布局配置\r\n */\r\nconst currentLayout = computed(() => {\r\n  if (props.layout) {\r\n    return props.layout\r\n  }\r\n  return getLayout(props.type) ?? null\r\n})\r\n\r\n/**\r\n * 处理按键\r\n */\r\nconst handleKeyPress = (key: KeyDefinition) => {\r\n  emit('keypress', key)\r\n}\r\n\r\n/**\r\n * 显示选项面板\r\n */\r\nconst handleShowOptions = (options: string[]) => {\r\n  currentOptions.value = options\r\n  showOptionsPanel.value = true\r\n}\r\n\r\n/**\r\n * 处理选项选择\r\n */\r\nconst handleSelectOption = (option: string, event: MouseEvent | TouchEvent) => {\r\n  event.preventDefault()\r\n  event.stopPropagation()\r\n  showOptionsPanel.value = false\r\n  emit('selectOption', option)\r\n}\r\n\r\n/**\r\n * 关闭选项面板\r\n */\r\nconst closeOptionsPanel = () => {\r\n  showOptionsPanel.value = false\r\n}\r\n\r\n/**\r\n * 计算每行的总宽度，用于居中对齐\r\n */\r\nconst getRowStyle = () => {\r\n  // 可以根据需要添加行样式\r\n  return {}\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div class=\"virtual-keyboard\">\r\n    <template v-if=\"currentLayout\">\r\n      <div\r\n        v-for=\"(row, rowIndex) in currentLayout.rows\"\r\n        :key=\"rowIndex\"\r\n        class=\"virtual-keyboard__row\"\r\n        :class=\"row.className\"\r\n        :style=\"getRowStyle()\"\r\n      >\r\n        <KeyboardKey\r\n          v-for=\"key in row.keys\"\r\n          :key=\"key.id\"\r\n          :key-def=\"key\"\r\n          :is-upper-case=\"isUpperCase\"\r\n          :base-width=\"keyWidth\"\r\n          :use-flex=\"row.className === 'numpad-row'\"\r\n          @press=\"handleKeyPress\"\r\n          @show-options=\"handleShowOptions\"\r\n        />\r\n      </div>\r\n    </template>\r\n    <div v-else class=\"virtual-keyboard__empty\">键盘布局未找到</div>\r\n\r\n    <!-- 选项面板 -->\r\n    <Transition name=\"options-panel\">\r\n      <div v-if=\"showOptionsPanel\" class=\"keyboard-options-panel\">\r\n        <div class=\"keyboard-options-panel__header\">\r\n          <span class=\"keyboard-options-panel__title\">选择邮箱后缀</span>\r\n          <button\r\n            class=\"keyboard-options-panel__close\"\r\n            type=\"button\"\r\n            @click=\"closeOptionsPanel\"\r\n            @touchstart.prevent=\"closeOptionsPanel\"\r\n          >\r\n            ×\r\n          </button>\r\n        </div>\r\n        <div class=\"keyboard-options-panel__grid\">\r\n          <button\r\n            v-for=\"option in currentOptions\"\r\n            :key=\"option\"\r\n            class=\"keyboard-options-panel__item\"\r\n            type=\"button\"\r\n            @mousedown.prevent=\"e => handleSelectOption(option, e)\"\r\n            @touchstart.prevent=\"e => handleSelectOption(option, e)\"\r\n          >\r\n            {{ option }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </Transition>\r\n  </div>\r\n</template>\r\n\r\n<style>\r\n.virtual-keyboard {\r\n  --key-gap: var(--keyboard-key-gap);\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: var(--key-gap);\r\n  padding: var(--keyboard-padding);\r\n  background-color: var(--keyboard-bg);\r\n  user-select: none;\r\n  -webkit-user-select: none;\r\n  overflow: hidden;\r\n  font-family: var(--ld-font-family);\r\n}\r\n\r\n.virtual-keyboard__row {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--key-gap);\r\n  width: 100%;\r\n  padding: 0 var(--ld-px-2);\r\n}\r\n\r\n.virtual-keyboard__row.numpad-row {\r\n  justify-content: stretch;\r\n}\r\n.virtual-keyboard__row.numpad-row .keyboard-key-wrapper {\r\n  flex: 1;\r\n}\r\n\r\n.virtual-keyboard__empty {\r\n  padding: var(--ld-spacing-lg);\r\n  color: var(--ld-text-muted);\r\n  text-align: center;\r\n}\r\n\r\n.keyboard-options-panel {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 10;\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: var(--ld-spacing-sm);\r\n  background: var(--keyboard-bg);\r\n}\r\n\r\n.keyboard-options-panel__header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: var(--ld-spacing-sm) var(--ld-spacing-sm) var(--ld-spacing-md);\r\n  margin-bottom: var(--ld-spacing-sm);\r\n  border-bottom: var(--ld-border-width-thin) solid var(--ld-border-subtle);\r\n}\r\n\r\n.keyboard-options-panel__title {\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--ld-font-sm);\r\n  font-weight: 600;\r\n}\r\n\r\n.keyboard-options-panel__close {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--ld-px-28);\r\n  height: var(--ld-px-28);\r\n  border: 0;\r\n  border-radius: var(--ld-radius-full);\r\n  background: var(--keyboard-fn-key-bg);\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--ld-font-lg);\r\n  line-height: 1;\r\n  cursor: pointer;\r\n}\r\n\r\n.keyboard-options-panel__close:active {\r\n  background: var(--keyboard-fn-key-active-bg);\r\n}\r\n\r\n.keyboard-options-panel__grid {\r\n  display: grid;\r\n  flex: 1;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: var(--ld-spacing-sm);\r\n  padding: var(--ld-spacing-xs) 0;\r\n  overflow-y: auto;\r\n}\r\n\r\n.keyboard-options-panel__item {\r\n  padding: var(--ld-spacing-md) var(--ld-spacing-sm);\r\n  border: 0;\r\n  border-radius: var(--ld-radius-md);\r\n  background: var(--keyboard-key-bg);\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--ld-font-sm);\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  box-shadow: var(--ld-shadow-sm, none);\r\n  transition:\r\n    background-color var(--ld-duration-fast),\r\n    transform var(--ld-duration-fast);\r\n}\r\n\r\n.keyboard-options-panel__item:active {\r\n  background: var(--keyboard-key-active-bg);\r\n  transform: scale(0.96);\r\n}\r\n\r\n.options-panel-enter-active,\r\n.options-panel-leave-active {\r\n  transition:\r\n    opacity var(--ld-duration-fast),\r\n    transform var(--ld-duration-fast);\r\n}\r\n\r\n.options-panel-enter-from,\r\n.options-panel-leave-to {\r\n  opacity: 0;\r\n  transform: translateY(var(--ld-px-20));\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport type { KeyboardType, KeyDefinition } from '@composy/keyboard-core'\r\nimport { isMobile } from '@composy/keyboard-core'\r\nimport { computed, nextTick, ref, watch } from 'vue'\r\nimport { useKeyboard } from '../composables/useKeyboard'\r\nimport { useKeyboardPopup } from '../composables/useKeyboardPopup'\r\nimport VirtualKeyboard from './VirtualKeyboard.vue'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /**\r\n     * 是否显示 (v-model)\r\n     */\r\n    modelValue?: boolean\r\n    /**\r\n     * 键盘类型\r\n     */\r\n    type?: KeyboardType | string\r\n    /**\r\n     * 绑定的输入值 (v-model:value)\r\n     */\r\n    value?: string\r\n    /**\r\n     * 目标输入框元素\r\n     */\r\n    target?: HTMLInputElement | HTMLTextAreaElement | null\r\n    /**\r\n     * 最大输入长度\r\n     */\r\n    maxLength?: number\r\n    /**\r\n     * 点击外部是否关闭\r\n     */\r\n    closeOnClickOutside?: boolean\r\n    /**\r\n     * 是否启用震动反馈\r\n     */\r\n    enableVibrate?: boolean\r\n    /**\r\n     * 挂载目标\r\n     */\r\n    teleportTo?: string | HTMLElement\r\n  }>(),\r\n  {\r\n    modelValue: false,\r\n    type: 'qwerty',\r\n    value: '',\r\n    target: null,\r\n    closeOnClickOutside: true,\r\n    enableVibrate: true,\r\n    teleportTo: 'body',\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  'update:modelValue': [visible: boolean]\r\n  'update:value': [value: string]\r\n  confirm: [value: string]\r\n  keypress: [key: KeyDefinition]\r\n}>()\r\n\r\n// 弹出层 DOM 引用\r\nconst popupRef = ref<HTMLElement | null>(null)\r\n\r\n// 目标元素引用\r\nconst targetRef = computed(() => props.target as HTMLElement | null)\r\n\r\n// 是否移动端\r\nconst isMobileDevice = ref(isMobile())\r\n\r\n// 创建键盘管理器\r\nconst keyboard = useKeyboard({\r\n  type: props.type as KeyboardType,\r\n  value: props.value,\r\n  maxLength:\r\n    props.maxLength ?? (props.type.startsWith('license-plate') ? 7 : undefined),\r\n  enableVibrate: props.enableVibrate,\r\n})\r\n\r\n// 创建弹出层管理\r\nconst {\r\n  popupStyles,\r\n  maskStyles,\r\n  placement,\r\n  showMask,\r\n  updatePosition,\r\n  close: closePopup,\r\n} = useKeyboardPopup({\r\n  visible: computed(() => props.modelValue),\r\n  target: targetRef,\r\n  popup: popupRef,\r\n  closeOnClickOutside: props.closeOnClickOutside,\r\n  onClose: () => {\r\n    emit('update:modelValue', false)\r\n  },\r\n})\r\n\r\n// 监听键盘类型变化\r\nwatch(\r\n  () => props.type,\r\n  newType => {\r\n    keyboard.switchType(newType as KeyboardType)\r\n\r\n    // 车牌键盘需要设置默认 maxLength\r\n    if (newType.startsWith('license-plate') && !props.maxLength) {\r\n      keyboard.setMaxLength(7)\r\n    }\r\n  }\r\n)\r\n\r\nwatch(\r\n  () => props.maxLength,\r\n  maxLength => {\r\n    if (maxLength !== undefined) keyboard.setMaxLength(maxLength)\r\n  }\r\n)\r\n\r\n// 监听外部 value 变化\r\nwatch(\r\n  () => props.value,\r\n  newValue => {\r\n    if (newValue !== keyboard.value.value) {\r\n      keyboard.setValue(newValue)\r\n    }\r\n  }\r\n)\r\n\r\n// 监听键盘内部 value 变化\r\nwatch(keyboard.value, newValue => {\r\n  emit('update:value', newValue)\r\n})\r\n\r\n// 监听可见性变化\r\nwatch(\r\n  () => props.modelValue,\r\n  visible => {\r\n    if (visible) {\r\n      isMobileDevice.value = isMobile()\r\n      if (props.target) {\r\n        keyboard.bindInput(props.target)\r\n      }\r\n      keyboard.show(props.target ?? undefined)\r\n\r\n      nextTick(() => {\r\n        updatePosition()\r\n      })\r\n    } else {\r\n      keyboard.hide()\r\n    }\r\n  },\r\n  { immediate: true }\r\n)\r\n\r\n// 监听确认事件\r\nkeyboard.on('confirm', ({ value }) => {\r\n  emit('confirm', value)\r\n  emit('update:modelValue', false)\r\n})\r\n\r\n/**\r\n * 处理按键\r\n */\r\nconst handleKeyPress = (key: KeyDefinition) => {\r\n  keyboard.handleKey(key)\r\n  emit('keypress', key)\r\n}\r\n\r\n/**\r\n * 处理下拉选项选择（如邮箱后缀）\r\n */\r\nconst handleSelectOption = (option: string) => {\r\n  let valueToAppend = option\r\n\r\n  // 智能处理邮箱后缀：如果当前值已以 @ 结尾，而选项以 @ 开头，则去掉选项的 @\r\n  if (option.startsWith('@') && keyboard.value.value.endsWith('@')) {\r\n    valueToAppend = option.slice(1) // 去掉开头的 @\r\n  }\r\n\r\n  keyboard.appendValue(valueToAppend)\r\n}\r\n\r\n/**\r\n * 处理遮罩点击\r\n */\r\nconst handleMaskClick = () => {\r\n  if (props.closeOnClickOutside) {\r\n    closePopup()\r\n  }\r\n}\r\n\r\n/**\r\n * 计算弹出层类名\r\n */\r\nconst popupClass = computed(() => {\r\n  return [\r\n    'keyboard-popup',\r\n    `keyboard-popup--${placement.value}`,\r\n    {\r\n      'keyboard-popup--mobile': isMobileDevice.value,\r\n      'keyboard-popup--desktop': !isMobileDevice.value,\r\n    },\r\n  ]\r\n})\r\n</script>\r\n\r\n<template>\r\n  <Teleport :to=\"teleportTo\">\r\n    <Transition name=\"keyboard-mask\">\r\n      <div\r\n        v-if=\"modelValue && showMask\"\r\n        class=\"keyboard-mask\"\r\n        :style=\"maskStyles\"\r\n        @click=\"handleMaskClick\"\r\n      />\r\n    </Transition>\r\n\r\n    <Transition :name=\"isMobileDevice ? 'keyboard-slide' : 'keyboard-fade'\">\r\n      <div\r\n        v-if=\"modelValue\"\r\n        ref=\"popupRef\"\r\n        :class=\"popupClass\"\r\n        :style=\"popupStyles\"\r\n        @mousedown.prevent\r\n        @touchstart.prevent\r\n      >\r\n        <VirtualKeyboard\r\n          :type=\"keyboard.type.value\"\r\n          :is-upper-case=\"keyboard.isUpperCase.value\"\r\n          @keypress=\"handleKeyPress\"\r\n          @select-option=\"handleSelectOption\"\r\n        />\r\n      </div>\r\n    </Transition>\r\n  </Teleport>\r\n</template>\r\n\r\n<style>\r\n.keyboard-popup {\r\n  overflow: hidden;\r\n  background-color: var(--keyboard-bg);\r\n  box-shadow: var(--ld-shadow-md, none);\r\n}\r\n\r\n.keyboard-popup--desktop {\r\n  min-width: var(--ld-px-280);\r\n  border-radius: var(--ld-radius-lg);\r\n  box-shadow: var(--ld-shadow-lg, none);\r\n}\r\n\r\n.keyboard-popup--mobile {\r\n  border-radius: var(--ld-radius-none);\r\n  padding-bottom: env(safe-area-inset-bottom, var(--ld-px-0));\r\n}\r\n\r\n.keyboard-popup--bottom-sheet {\r\n  border-top-left-radius: var(--ld-radius-lg);\r\n  border-top-right-radius: var(--ld-radius-lg);\r\n}\r\n\r\n.keyboard-mask {\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: 999;\r\n  background-color: var(--keyboard-mask-bg);\r\n}\r\n\r\n.keyboard-mask-enter-active,\r\n.keyboard-mask-leave-active {\r\n  transition: opacity var(--ld-duration-fast);\r\n}\r\n.keyboard-mask-enter-from,\r\n.keyboard-mask-leave-to {\r\n  opacity: 0;\r\n}\r\n.keyboard-fade-enter-active,\r\n.keyboard-fade-leave-active {\r\n  transition:\r\n    opacity var(--ld-duration-fast),\r\n    transform var(--ld-duration-fast);\r\n}\r\n.keyboard-fade-enter-from,\r\n.keyboard-fade-leave-to {\r\n  opacity: 0;\r\n  transform: translateY(calc(-1 * var(--ld-px-10)));\r\n}\r\n.keyboard-slide-enter-active,\r\n.keyboard-slide-leave-active {\r\n  transition: transform var(--ld-duration-normal);\r\n}\r\n.keyboard-slide-enter-from,\r\n.keyboard-slide-leave-to {\r\n  transform: translateY(100%);\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport type { KeyboardType, KeyDefinition } from '@composy/keyboard-core'\r\nimport { isMobile } from '@composy/keyboard-core'\r\nimport { computed, nextTick, ref, watch } from 'vue'\r\nimport { useKeyboard } from '../composables/useKeyboard'\r\nimport { useKeyboardPopup } from '../composables/useKeyboardPopup'\r\nimport VirtualKeyboard from './VirtualKeyboard.vue'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /**\r\n     * 是否显示 (v-model)\r\n     */\r\n    modelValue?: boolean\r\n    /**\r\n     * 键盘类型\r\n     */\r\n    type?: KeyboardType | string\r\n    /**\r\n     * 绑定的输入值 (v-model:value)\r\n     */\r\n    value?: string\r\n    /**\r\n     * 目标输入框元素\r\n     */\r\n    target?: HTMLInputElement | HTMLTextAreaElement | null\r\n    /**\r\n     * 最大输入长度\r\n     */\r\n    maxLength?: number\r\n    /**\r\n     * 点击外部是否关闭\r\n     */\r\n    closeOnClickOutside?: boolean\r\n    /**\r\n     * 是否启用震动反馈\r\n     */\r\n    enableVibrate?: boolean\r\n    /**\r\n     * 挂载目标\r\n     */\r\n    teleportTo?: string | HTMLElement\r\n  }>(),\r\n  {\r\n    modelValue: false,\r\n    type: 'qwerty',\r\n    value: '',\r\n    target: null,\r\n    closeOnClickOutside: true,\r\n    enableVibrate: true,\r\n    teleportTo: 'body',\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  'update:modelValue': [visible: boolean]\r\n  'update:value': [value: string]\r\n  confirm: [value: string]\r\n  keypress: [key: KeyDefinition]\r\n}>()\r\n\r\n// 弹出层 DOM 引用\r\nconst popupRef = ref<HTMLElement | null>(null)\r\n\r\n// 目标元素引用\r\nconst targetRef = computed(() => props.target as HTMLElement | null)\r\n\r\n// 是否移动端\r\nconst isMobileDevice = ref(isMobile())\r\n\r\n// 创建键盘管理器\r\nconst keyboard = useKeyboard({\r\n  type: props.type as KeyboardType,\r\n  value: props.value,\r\n  maxLength:\r\n    props.maxLength ?? (props.type.startsWith('license-plate') ? 7 : undefined),\r\n  enableVibrate: props.enableVibrate,\r\n})\r\n\r\n// 创建弹出层管理\r\nconst {\r\n  popupStyles,\r\n  maskStyles,\r\n  placement,\r\n  showMask,\r\n  updatePosition,\r\n  close: closePopup,\r\n} = useKeyboardPopup({\r\n  visible: computed(() => props.modelValue),\r\n  target: targetRef,\r\n  popup: popupRef,\r\n  closeOnClickOutside: props.closeOnClickOutside,\r\n  onClose: () => {\r\n    emit('update:modelValue', false)\r\n  },\r\n})\r\n\r\n// 监听键盘类型变化\r\nwatch(\r\n  () => props.type,\r\n  newType => {\r\n    keyboard.switchType(newType as KeyboardType)\r\n\r\n    // 车牌键盘需要设置默认 maxLength\r\n    if (newType.startsWith('license-plate') && !props.maxLength) {\r\n      keyboard.setMaxLength(7)\r\n    }\r\n  }\r\n)\r\n\r\nwatch(\r\n  () => props.maxLength,\r\n  maxLength => {\r\n    if (maxLength !== undefined) keyboard.setMaxLength(maxLength)\r\n  }\r\n)\r\n\r\n// 监听外部 value 变化\r\nwatch(\r\n  () => props.value,\r\n  newValue => {\r\n    if (newValue !== keyboard.value.value) {\r\n      keyboard.setValue(newValue)\r\n    }\r\n  }\r\n)\r\n\r\n// 监听键盘内部 value 变化\r\nwatch(keyboard.value, newValue => {\r\n  emit('update:value', newValue)\r\n})\r\n\r\n// 监听可见性变化\r\nwatch(\r\n  () => props.modelValue,\r\n  visible => {\r\n    if (visible) {\r\n      isMobileDevice.value = isMobile()\r\n      if (props.target) {\r\n        keyboard.bindInput(props.target)\r\n      }\r\n      keyboard.show(props.target ?? undefined)\r\n\r\n      nextTick(() => {\r\n        updatePosition()\r\n      })\r\n    } else {\r\n      keyboard.hide()\r\n    }\r\n  },\r\n  { immediate: true }\r\n)\r\n\r\n// 监听确认事件\r\nkeyboard.on('confirm', ({ value }) => {\r\n  emit('confirm', value)\r\n  emit('update:modelValue', false)\r\n})\r\n\r\n/**\r\n * 处理按键\r\n */\r\nconst handleKeyPress = (key: KeyDefinition) => {\r\n  keyboard.handleKey(key)\r\n  emit('keypress', key)\r\n}\r\n\r\n/**\r\n * 处理下拉选项选择（如邮箱后缀）\r\n */\r\nconst handleSelectOption = (option: string) => {\r\n  let valueToAppend = option\r\n\r\n  // 智能处理邮箱后缀：如果当前值已以 @ 结尾，而选项以 @ 开头，则去掉选项的 @\r\n  if (option.startsWith('@') && keyboard.value.value.endsWith('@')) {\r\n    valueToAppend = option.slice(1) // 去掉开头的 @\r\n  }\r\n\r\n  keyboard.appendValue(valueToAppend)\r\n}\r\n\r\n/**\r\n * 处理遮罩点击\r\n */\r\nconst handleMaskClick = () => {\r\n  if (props.closeOnClickOutside) {\r\n    closePopup()\r\n  }\r\n}\r\n\r\n/**\r\n * 计算弹出层类名\r\n */\r\nconst popupClass = computed(() => {\r\n  return [\r\n    'keyboard-popup',\r\n    `keyboard-popup--${placement.value}`,\r\n    {\r\n      'keyboard-popup--mobile': isMobileDevice.value,\r\n      'keyboard-popup--desktop': !isMobileDevice.value,\r\n    },\r\n  ]\r\n})\r\n</script>\r\n\r\n<template>\r\n  <Teleport :to=\"teleportTo\">\r\n    <Transition name=\"keyboard-mask\">\r\n      <div\r\n        v-if=\"modelValue && showMask\"\r\n        class=\"keyboard-mask\"\r\n        :style=\"maskStyles\"\r\n        @click=\"handleMaskClick\"\r\n      />\r\n    </Transition>\r\n\r\n    <Transition :name=\"isMobileDevice ? 'keyboard-slide' : 'keyboard-fade'\">\r\n      <div\r\n        v-if=\"modelValue\"\r\n        ref=\"popupRef\"\r\n        :class=\"popupClass\"\r\n        :style=\"popupStyles\"\r\n        @mousedown.prevent\r\n        @touchstart.prevent\r\n      >\r\n        <VirtualKeyboard\r\n          :type=\"keyboard.type.value\"\r\n          :is-upper-case=\"keyboard.isUpperCase.value\"\r\n          @keypress=\"handleKeyPress\"\r\n          @select-option=\"handleSelectOption\"\r\n        />\r\n      </div>\r\n    </Transition>\r\n  </Teleport>\r\n</template>\r\n\r\n<style>\r\n.keyboard-popup {\r\n  overflow: hidden;\r\n  background-color: var(--keyboard-bg);\r\n  box-shadow: var(--ld-shadow-md, none);\r\n}\r\n\r\n.keyboard-popup--desktop {\r\n  min-width: var(--ld-px-280);\r\n  border-radius: var(--ld-radius-lg);\r\n  box-shadow: var(--ld-shadow-lg, none);\r\n}\r\n\r\n.keyboard-popup--mobile {\r\n  border-radius: var(--ld-radius-none);\r\n  padding-bottom: env(safe-area-inset-bottom, var(--ld-px-0));\r\n}\r\n\r\n.keyboard-popup--bottom-sheet {\r\n  border-top-left-radius: var(--ld-radius-lg);\r\n  border-top-right-radius: var(--ld-radius-lg);\r\n}\r\n\r\n.keyboard-mask {\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: 999;\r\n  background-color: var(--keyboard-mask-bg);\r\n}\r\n\r\n.keyboard-mask-enter-active,\r\n.keyboard-mask-leave-active {\r\n  transition: opacity var(--ld-duration-fast);\r\n}\r\n.keyboard-mask-enter-from,\r\n.keyboard-mask-leave-to {\r\n  opacity: 0;\r\n}\r\n.keyboard-fade-enter-active,\r\n.keyboard-fade-leave-active {\r\n  transition:\r\n    opacity var(--ld-duration-fast),\r\n    transform var(--ld-duration-fast);\r\n}\r\n.keyboard-fade-enter-from,\r\n.keyboard-fade-leave-to {\r\n  opacity: 0;\r\n  transform: translateY(calc(-1 * var(--ld-px-10)));\r\n}\r\n.keyboard-slide-enter-active,\r\n.keyboard-slide-leave-active {\r\n  transition: transform var(--ld-duration-normal);\r\n}\r\n.keyboard-slide-enter-from,\r\n.keyboard-slide-leave-to {\r\n  transform: translateY(100%);\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport type { KeyboardType, KeyDefinition } from '@composy/keyboard-core'\r\nimport { isMobile } from '@composy/keyboard-core'\r\nimport { computed, nextTick, ref, watch } from 'vue'\r\nimport { useKeyboard } from '../composables/useKeyboard'\r\nimport { useKeyboardPopup } from '../composables/useKeyboardPopup'\r\nimport VirtualKeyboard from './VirtualKeyboard.vue'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /**\r\n     * 是否显示 (v-model)\r\n     */\r\n    modelValue?: boolean\r\n    /**\r\n     * 键盘类型\r\n     */\r\n    type?: KeyboardType | string\r\n    /**\r\n     * 绑定的输入值 (v-model:value)\r\n     */\r\n    value?: string\r\n    /**\r\n     * 目标输入框元素\r\n     */\r\n    target?: HTMLInputElement | HTMLTextAreaElement | null\r\n    /**\r\n     * 最大输入长度\r\n     */\r\n    maxLength?: number\r\n    /**\r\n     * 点击外部是否关闭\r\n     */\r\n    closeOnClickOutside?: boolean\r\n    /**\r\n     * 是否启用震动反馈\r\n     */\r\n    enableVibrate?: boolean\r\n    /**\r\n     * 挂载目标\r\n     */\r\n    teleportTo?: string | HTMLElement\r\n  }>(),\r\n  {\r\n    modelValue: false,\r\n    type: 'qwerty',\r\n    value: '',\r\n    target: null,\r\n    closeOnClickOutside: true,\r\n    enableVibrate: true,\r\n    teleportTo: 'body',\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  'update:modelValue': [visible: boolean]\r\n  'update:value': [value: string]\r\n  confirm: [value: string]\r\n  keypress: [key: KeyDefinition]\r\n}>()\r\n\r\n// 弹出层 DOM 引用\r\nconst popupRef = ref<HTMLElement | null>(null)\r\n\r\n// 目标元素引用\r\nconst targetRef = computed(() => props.target as HTMLElement | null)\r\n\r\n// 是否移动端\r\nconst isMobileDevice = ref(isMobile())\r\n\r\n// 创建键盘管理器\r\nconst keyboard = useKeyboard({\r\n  type: props.type as KeyboardType,\r\n  value: props.value,\r\n  maxLength:\r\n    props.maxLength ?? (props.type.startsWith('license-plate') ? 7 : undefined),\r\n  enableVibrate: props.enableVibrate,\r\n})\r\n\r\n// 创建弹出层管理\r\nconst {\r\n  popupStyles,\r\n  maskStyles,\r\n  placement,\r\n  showMask,\r\n  updatePosition,\r\n  close: closePopup,\r\n} = useKeyboardPopup({\r\n  visible: computed(() => props.modelValue),\r\n  target: targetRef,\r\n  popup: popupRef,\r\n  closeOnClickOutside: props.closeOnClickOutside,\r\n  onClose: () => {\r\n    emit('update:modelValue', false)\r\n  },\r\n})\r\n\r\n// 监听键盘类型变化\r\nwatch(\r\n  () => props.type,\r\n  newType => {\r\n    keyboard.switchType(newType as KeyboardType)\r\n\r\n    // 车牌键盘需要设置默认 maxLength\r\n    if (newType.startsWith('license-plate') && !props.maxLength) {\r\n      keyboard.setMaxLength(7)\r\n    }\r\n  }\r\n)\r\n\r\nwatch(\r\n  () => props.maxLength,\r\n  maxLength => {\r\n    if (maxLength !== undefined) keyboard.setMaxLength(maxLength)\r\n  }\r\n)\r\n\r\n// 监听外部 value 变化\r\nwatch(\r\n  () => props.value,\r\n  newValue => {\r\n    if (newValue !== keyboard.value.value) {\r\n      keyboard.setValue(newValue)\r\n    }\r\n  }\r\n)\r\n\r\n// 监听键盘内部 value 变化\r\nwatch(keyboard.value, newValue => {\r\n  emit('update:value', newValue)\r\n})\r\n\r\n// 监听可见性变化\r\nwatch(\r\n  () => props.modelValue,\r\n  visible => {\r\n    if (visible) {\r\n      isMobileDevice.value = isMobile()\r\n      if (props.target) {\r\n        keyboard.bindInput(props.target)\r\n      }\r\n      keyboard.show(props.target ?? undefined)\r\n\r\n      nextTick(() => {\r\n        updatePosition()\r\n      })\r\n    } else {\r\n      keyboard.hide()\r\n    }\r\n  },\r\n  { immediate: true }\r\n)\r\n\r\n// 监听确认事件\r\nkeyboard.on('confirm', ({ value }) => {\r\n  emit('confirm', value)\r\n  emit('update:modelValue', false)\r\n})\r\n\r\n/**\r\n * 处理按键\r\n */\r\nconst handleKeyPress = (key: KeyDefinition) => {\r\n  keyboard.handleKey(key)\r\n  emit('keypress', key)\r\n}\r\n\r\n/**\r\n * 处理下拉选项选择（如邮箱后缀）\r\n */\r\nconst handleSelectOption = (option: string) => {\r\n  let valueToAppend = option\r\n\r\n  // 智能处理邮箱后缀：如果当前值已以 @ 结尾，而选项以 @ 开头，则去掉选项的 @\r\n  if (option.startsWith('@') && keyboard.value.value.endsWith('@')) {\r\n    valueToAppend = option.slice(1) // 去掉开头的 @\r\n  }\r\n\r\n  keyboard.appendValue(valueToAppend)\r\n}\r\n\r\n/**\r\n * 处理遮罩点击\r\n */\r\nconst handleMaskClick = () => {\r\n  if (props.closeOnClickOutside) {\r\n    closePopup()\r\n  }\r\n}\r\n\r\n/**\r\n * 计算弹出层类名\r\n */\r\nconst popupClass = computed(() => {\r\n  return [\r\n    'keyboard-popup',\r\n    `keyboard-popup--${placement.value}`,\r\n    {\r\n      'keyboard-popup--mobile': isMobileDevice.value,\r\n      'keyboard-popup--desktop': !isMobileDevice.value,\r\n    },\r\n  ]\r\n})\r\n</script>\r\n\r\n<template>\r\n  <Teleport :to=\"teleportTo\">\r\n    <Transition name=\"keyboard-mask\">\r\n      <div\r\n        v-if=\"modelValue && showMask\"\r\n        class=\"keyboard-mask\"\r\n        :style=\"maskStyles\"\r\n        @click=\"handleMaskClick\"\r\n      />\r\n    </Transition>\r\n\r\n    <Transition :name=\"isMobileDevice ? 'keyboard-slide' : 'keyboard-fade'\">\r\n      <div\r\n        v-if=\"modelValue\"\r\n        ref=\"popupRef\"\r\n        :class=\"popupClass\"\r\n        :style=\"popupStyles\"\r\n        @mousedown.prevent\r\n        @touchstart.prevent\r\n      >\r\n        <VirtualKeyboard\r\n          :type=\"keyboard.type.value\"\r\n          :is-upper-case=\"keyboard.isUpperCase.value\"\r\n          @keypress=\"handleKeyPress\"\r\n          @select-option=\"handleSelectOption\"\r\n        />\r\n      </div>\r\n    </Transition>\r\n  </Teleport>\r\n</template>\r\n\r\n<style>\r\n.keyboard-popup {\r\n  overflow: hidden;\r\n  background-color: var(--keyboard-bg);\r\n  box-shadow: var(--ld-shadow-md, none);\r\n}\r\n\r\n.keyboard-popup--desktop {\r\n  min-width: var(--ld-px-280);\r\n  border-radius: var(--ld-radius-lg);\r\n  box-shadow: var(--ld-shadow-lg, none);\r\n}\r\n\r\n.keyboard-popup--mobile {\r\n  border-radius: var(--ld-radius-none);\r\n  padding-bottom: env(safe-area-inset-bottom, var(--ld-px-0));\r\n}\r\n\r\n.keyboard-popup--bottom-sheet {\r\n  border-top-left-radius: var(--ld-radius-lg);\r\n  border-top-right-radius: var(--ld-radius-lg);\r\n}\r\n\r\n.keyboard-mask {\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: 999;\r\n  background-color: var(--keyboard-mask-bg);\r\n}\r\n\r\n.keyboard-mask-enter-active,\r\n.keyboard-mask-leave-active {\r\n  transition: opacity var(--ld-duration-fast);\r\n}\r\n.keyboard-mask-enter-from,\r\n.keyboard-mask-leave-to {\r\n  opacity: 0;\r\n}\r\n.keyboard-fade-enter-active,\r\n.keyboard-fade-leave-active {\r\n  transition:\r\n    opacity var(--ld-duration-fast),\r\n    transform var(--ld-duration-fast);\r\n}\r\n.keyboard-fade-enter-from,\r\n.keyboard-fade-leave-to {\r\n  opacity: 0;\r\n  transform: translateY(calc(-1 * var(--ld-px-10)));\r\n}\r\n.keyboard-slide-enter-active,\r\n.keyboard-slide-leave-active {\r\n  transition: transform var(--ld-duration-normal);\r\n}\r\n.keyboard-slide-enter-from,\r\n.keyboard-slide-leave-to {\r\n  transform: translateY(100%);\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport type { KeyDefinition } from '@composy/keyboard-core'\r\n/**\r\n * 智能车牌号键盘组件\r\n * 核心逻辑在 KeyboardManager 中实现自动切换\r\n * Vue 组件只负责 UI 展示和状态同步\r\n */\r\nimport { computed, watch } from 'vue'\r\nimport { useKeyboard } from '../composables/useKeyboard'\r\nimport VirtualKeyboard from './VirtualKeyboard.vue'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /**\r\n     * 当前车牌号值（双向绑定）\r\n     */\r\n    modelValue?: string\r\n    /**\r\n     * 是否新能源车牌（8位）\r\n     * @default false\r\n     */\r\n    newEnergy?: boolean\r\n  }>(),\r\n  {\r\n    modelValue: '',\r\n    newEnergy: false,\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  'update:modelValue': [value: string]\r\n  done: [value: string]\r\n}>()\r\n\r\n/**\r\n * 最大长度\r\n */\r\nconst maxLength = computed(() => (props.newEnergy ? 8 : 7))\r\n\r\n/**\r\n * 使用 KeyboardManager 管理键盘状态\r\n */\r\nconst keyboard = useKeyboard({\r\n  type: 'license-plate-province',\r\n  value: props.modelValue,\r\n  maxLength: maxLength.value,\r\n  enableVibrate: true,\r\n})\r\n\r\n// 监听外部 value 变化\r\nwatch(\r\n  () => props.modelValue,\r\n  newValue => {\r\n    if (newValue !== keyboard.value.value) {\r\n      keyboard.setValue(newValue)\r\n    }\r\n  }\r\n)\r\n\r\n// 监听键盘内部 value 变化\r\nwatch(keyboard.value, newValue => {\r\n  emit('update:modelValue', newValue)\r\n})\r\n\r\n// 监听 maxLength 变化\r\nwatch(maxLength, newMaxLength => {\r\n  keyboard.setMaxLength(newMaxLength)\r\n\r\n  // 如果当前值超过新的最大长度，截断\r\n  if (props.modelValue.length > newMaxLength) {\r\n    const truncated = props.modelValue.slice(0, newMaxLength)\r\n    keyboard.setValue(truncated)\r\n    emit('update:modelValue', truncated)\r\n  }\r\n})\r\n\r\n// 监听确认事件\r\nkeyboard.on('confirm', ({ value }) => {\r\n  emit('done', value)\r\n})\r\n\r\n/**\r\n * 处理按键\r\n */\r\nconst handleKeyPress = (key: KeyDefinition) => {\r\n  keyboard.handleKey(key)\r\n}\r\n\r\n/**\r\n * 当前位置提示\r\n */\r\nconst positionHint = computed(() => {\r\n  const len = props.modelValue.length\r\n  if (len === 0) return '请选择省份'\r\n  if (len === 1) return '请输入字母'\r\n  if (len < maxLength.value) return `第${len + 1}位`\r\n  return '已完成'\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div class=\"license-plate-keyboard\">\r\n    <!-- 输入显示区 -->\r\n    <div class=\"license-plate-keyboard__display\">\r\n      <div class=\"license-plate-keyboard__value\">\r\n        <span\r\n          v-for=\"(char, index) in modelValue.padEnd(maxLength, ' ').split('')\"\r\n          :key=\"index\"\r\n          class=\"license-plate-keyboard__char\"\r\n          :class=\"{\r\n            'license-plate-keyboard__char--filled': char !== ' ',\r\n            'license-plate-keyboard__char--current':\r\n              index === modelValue.length,\r\n            'license-plate-keyboard__char--province': index === 0,\r\n            'license-plate-keyboard__char--new-energy':\r\n              newEnergy && index === 7,\r\n          }\"\r\n        >\r\n          {{ char === ' ' ? '' : char }}\r\n        </span>\r\n      </div>\r\n      <div class=\"license-plate-keyboard__hint\">\r\n        {{ positionHint }}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 键盘区 - 由 core 的 KeyboardManager 自动切换布局 -->\r\n    <VirtualKeyboard\r\n      :type=\"keyboard.type.value\"\r\n      :is-upper-case=\"keyboard.isUpperCase.value\"\r\n      @keypress=\"handleKeyPress\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<style>\r\n.license-plate-keyboard {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--keyboard-bg);\r\n}\r\n\r\n.license-plate-keyboard__display {\r\n  padding: var(--ld-spacing-md) var(--ld-spacing-lg);\r\n  background: var(--keyboard-display-bg, var(--ld-bg-surface-soft));\r\n  border-bottom: var(--ld-border-width-thin) solid var(--ld-border-subtle);\r\n}\r\n\r\n.license-plate-keyboard__value {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--ld-spacing-sm);\r\n  margin-bottom: var(--ld-spacing-sm);\r\n}\r\n\r\n.license-plate-keyboard__char {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--ld-px-40);\r\n  height: var(--ld-px-48);\r\n  border: var(--ld-border-width-medium) solid var(--ld-border);\r\n  border-radius: var(--ld-radius-md);\r\n  background: var(--keyboard-key-bg);\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--ld-font-xl);\r\n  font-weight: 600;\r\n  transition:\r\n    border-color var(--ld-duration-fast),\r\n    background-color var(--ld-duration-fast);\r\n}\r\n\r\n.license-plate-keyboard__char--filled,\r\n.license-plate-keyboard__char--current {\r\n  border-color: var(--keyboard-primary-bg);\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--keyboard-primary-bg) 10%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n.license-plate-keyboard__char--current {\r\n  animation: plate-char-pulse var(--ld-duration-slow) infinite;\r\n}\r\n\r\n.license-plate-keyboard__char--province {\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-warning-500) 10%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n.license-plate-keyboard__char--province.license-plate-keyboard__char--filled {\r\n  border-color: var(--ld-warning-500);\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-warning-500) 15%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n.license-plate-keyboard__char--new-energy {\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-success-500) 10%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n.license-plate-keyboard__char--new-energy.license-plate-keyboard__char--filled {\r\n  border-color: var(--ld-success-500);\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-success-500) 15%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n@keyframes plate-char-pulse {\r\n  0%,\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n  50% {\r\n    opacity: 0.6;\r\n  }\r\n}\r\n\r\n.license-plate-keyboard__hint {\r\n  color: var(--ld-text-muted);\r\n  font-size: var(--ld-font-sm);\r\n  text-align: center;\r\n}\r\n\r\n.license-plate-keyboard .plate-keyboard-row {\r\n  gap: var(--ld-spacing-xs);\r\n}\r\n\r\n.license-plate-keyboard .key-plate-province,\r\n.license-plate-keyboard .key-plate-letter,\r\n.license-plate-keyboard .key-plate-number {\r\n  min-width: var(--ld-px-28);\r\n  height: var(--ld-px-40);\r\n  border-radius: var(--keyboard-key-radius);\r\n  font-size: var(--ld-font-sm);\r\n}\r\n\r\n.license-plate-keyboard .key-plate-special {\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-warning-500) 20%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n  color: var(--ld-warning-700);\r\n}\r\n\r\n.license-plate-keyboard .key-plate-fn,\r\n.license-plate-keyboard .key-plate-switch {\r\n  background: var(--keyboard-fn-key-bg);\r\n}\r\n\r\n.license-plate-keyboard .key-plate-switch {\r\n  font-size: var(--ld-font-sm);\r\n}\r\n.license-plate-keyboard .key-plate-done {\r\n  background: var(--keyboard-primary-bg);\r\n  color: var(--keyboard-primary-color);\r\n  font-size: var(--ld-font-sm);\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport type { KeyDefinition } from '@composy/keyboard-core'\r\n/**\r\n * 智能车牌号键盘组件\r\n * 核心逻辑在 KeyboardManager 中实现自动切换\r\n * Vue 组件只负责 UI 展示和状态同步\r\n */\r\nimport { computed, watch } from 'vue'\r\nimport { useKeyboard } from '../composables/useKeyboard'\r\nimport VirtualKeyboard from './VirtualKeyboard.vue'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /**\r\n     * 当前车牌号值（双向绑定）\r\n     */\r\n    modelValue?: string\r\n    /**\r\n     * 是否新能源车牌（8位）\r\n     * @default false\r\n     */\r\n    newEnergy?: boolean\r\n  }>(),\r\n  {\r\n    modelValue: '',\r\n    newEnergy: false,\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  'update:modelValue': [value: string]\r\n  done: [value: string]\r\n}>()\r\n\r\n/**\r\n * 最大长度\r\n */\r\nconst maxLength = computed(() => (props.newEnergy ? 8 : 7))\r\n\r\n/**\r\n * 使用 KeyboardManager 管理键盘状态\r\n */\r\nconst keyboard = useKeyboard({\r\n  type: 'license-plate-province',\r\n  value: props.modelValue,\r\n  maxLength: maxLength.value,\r\n  enableVibrate: true,\r\n})\r\n\r\n// 监听外部 value 变化\r\nwatch(\r\n  () => props.modelValue,\r\n  newValue => {\r\n    if (newValue !== keyboard.value.value) {\r\n      keyboard.setValue(newValue)\r\n    }\r\n  }\r\n)\r\n\r\n// 监听键盘内部 value 变化\r\nwatch(keyboard.value, newValue => {\r\n  emit('update:modelValue', newValue)\r\n})\r\n\r\n// 监听 maxLength 变化\r\nwatch(maxLength, newMaxLength => {\r\n  keyboard.setMaxLength(newMaxLength)\r\n\r\n  // 如果当前值超过新的最大长度，截断\r\n  if (props.modelValue.length > newMaxLength) {\r\n    const truncated = props.modelValue.slice(0, newMaxLength)\r\n    keyboard.setValue(truncated)\r\n    emit('update:modelValue', truncated)\r\n  }\r\n})\r\n\r\n// 监听确认事件\r\nkeyboard.on('confirm', ({ value }) => {\r\n  emit('done', value)\r\n})\r\n\r\n/**\r\n * 处理按键\r\n */\r\nconst handleKeyPress = (key: KeyDefinition) => {\r\n  keyboard.handleKey(key)\r\n}\r\n\r\n/**\r\n * 当前位置提示\r\n */\r\nconst positionHint = computed(() => {\r\n  const len = props.modelValue.length\r\n  if (len === 0) return '请选择省份'\r\n  if (len === 1) return '请输入字母'\r\n  if (len < maxLength.value) return `第${len + 1}位`\r\n  return '已完成'\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div class=\"license-plate-keyboard\">\r\n    <!-- 输入显示区 -->\r\n    <div class=\"license-plate-keyboard__display\">\r\n      <div class=\"license-plate-keyboard__value\">\r\n        <span\r\n          v-for=\"(char, index) in modelValue.padEnd(maxLength, ' ').split('')\"\r\n          :key=\"index\"\r\n          class=\"license-plate-keyboard__char\"\r\n          :class=\"{\r\n            'license-plate-keyboard__char--filled': char !== ' ',\r\n            'license-plate-keyboard__char--current':\r\n              index === modelValue.length,\r\n            'license-plate-keyboard__char--province': index === 0,\r\n            'license-plate-keyboard__char--new-energy':\r\n              newEnergy && index === 7,\r\n          }\"\r\n        >\r\n          {{ char === ' ' ? '' : char }}\r\n        </span>\r\n      </div>\r\n      <div class=\"license-plate-keyboard__hint\">\r\n        {{ positionHint }}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 键盘区 - 由 core 的 KeyboardManager 自动切换布局 -->\r\n    <VirtualKeyboard\r\n      :type=\"keyboard.type.value\"\r\n      :is-upper-case=\"keyboard.isUpperCase.value\"\r\n      @keypress=\"handleKeyPress\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<style>\r\n.license-plate-keyboard {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--keyboard-bg);\r\n}\r\n\r\n.license-plate-keyboard__display {\r\n  padding: var(--ld-spacing-md) var(--ld-spacing-lg);\r\n  background: var(--keyboard-display-bg, var(--ld-bg-surface-soft));\r\n  border-bottom: var(--ld-border-width-thin) solid var(--ld-border-subtle);\r\n}\r\n\r\n.license-plate-keyboard__value {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--ld-spacing-sm);\r\n  margin-bottom: var(--ld-spacing-sm);\r\n}\r\n\r\n.license-plate-keyboard__char {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--ld-px-40);\r\n  height: var(--ld-px-48);\r\n  border: var(--ld-border-width-medium) solid var(--ld-border);\r\n  border-radius: var(--ld-radius-md);\r\n  background: var(--keyboard-key-bg);\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--ld-font-xl);\r\n  font-weight: 600;\r\n  transition:\r\n    border-color var(--ld-duration-fast),\r\n    background-color var(--ld-duration-fast);\r\n}\r\n\r\n.license-plate-keyboard__char--filled,\r\n.license-plate-keyboard__char--current {\r\n  border-color: var(--keyboard-primary-bg);\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--keyboard-primary-bg) 10%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n.license-plate-keyboard__char--current {\r\n  animation: plate-char-pulse var(--ld-duration-slow) infinite;\r\n}\r\n\r\n.license-plate-keyboard__char--province {\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-warning-500) 10%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n.license-plate-keyboard__char--province.license-plate-keyboard__char--filled {\r\n  border-color: var(--ld-warning-500);\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-warning-500) 15%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n.license-plate-keyboard__char--new-energy {\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-success-500) 10%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n.license-plate-keyboard__char--new-energy.license-plate-keyboard__char--filled {\r\n  border-color: var(--ld-success-500);\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-success-500) 15%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n@keyframes plate-char-pulse {\r\n  0%,\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n  50% {\r\n    opacity: 0.6;\r\n  }\r\n}\r\n\r\n.license-plate-keyboard__hint {\r\n  color: var(--ld-text-muted);\r\n  font-size: var(--ld-font-sm);\r\n  text-align: center;\r\n}\r\n\r\n.license-plate-keyboard .plate-keyboard-row {\r\n  gap: var(--ld-spacing-xs);\r\n}\r\n\r\n.license-plate-keyboard .key-plate-province,\r\n.license-plate-keyboard .key-plate-letter,\r\n.license-plate-keyboard .key-plate-number {\r\n  min-width: var(--ld-px-28);\r\n  height: var(--ld-px-40);\r\n  border-radius: var(--keyboard-key-radius);\r\n  font-size: var(--ld-font-sm);\r\n}\r\n\r\n.license-plate-keyboard .key-plate-special {\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-warning-500) 20%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n  color: var(--ld-warning-700);\r\n}\r\n\r\n.license-plate-keyboard .key-plate-fn,\r\n.license-plate-keyboard .key-plate-switch {\r\n  background: var(--keyboard-fn-key-bg);\r\n}\r\n\r\n.license-plate-keyboard .key-plate-switch {\r\n  font-size: var(--ld-font-sm);\r\n}\r\n.license-plate-keyboard .key-plate-done {\r\n  background: var(--keyboard-primary-bg);\r\n  color: var(--keyboard-primary-color);\r\n  font-size: var(--ld-font-sm);\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport type { KeyDefinition } from '@composy/keyboard-core'\r\n/**\r\n * 智能车牌号键盘组件\r\n * 核心逻辑在 KeyboardManager 中实现自动切换\r\n * Vue 组件只负责 UI 展示和状态同步\r\n */\r\nimport { computed, watch } from 'vue'\r\nimport { useKeyboard } from '../composables/useKeyboard'\r\nimport VirtualKeyboard from './VirtualKeyboard.vue'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    /**\r\n     * 当前车牌号值（双向绑定）\r\n     */\r\n    modelValue?: string\r\n    /**\r\n     * 是否新能源车牌（8位）\r\n     * @default false\r\n     */\r\n    newEnergy?: boolean\r\n  }>(),\r\n  {\r\n    modelValue: '',\r\n    newEnergy: false,\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  'update:modelValue': [value: string]\r\n  done: [value: string]\r\n}>()\r\n\r\n/**\r\n * 最大长度\r\n */\r\nconst maxLength = computed(() => (props.newEnergy ? 8 : 7))\r\n\r\n/**\r\n * 使用 KeyboardManager 管理键盘状态\r\n */\r\nconst keyboard = useKeyboard({\r\n  type: 'license-plate-province',\r\n  value: props.modelValue,\r\n  maxLength: maxLength.value,\r\n  enableVibrate: true,\r\n})\r\n\r\n// 监听外部 value 变化\r\nwatch(\r\n  () => props.modelValue,\r\n  newValue => {\r\n    if (newValue !== keyboard.value.value) {\r\n      keyboard.setValue(newValue)\r\n    }\r\n  }\r\n)\r\n\r\n// 监听键盘内部 value 变化\r\nwatch(keyboard.value, newValue => {\r\n  emit('update:modelValue', newValue)\r\n})\r\n\r\n// 监听 maxLength 变化\r\nwatch(maxLength, newMaxLength => {\r\n  keyboard.setMaxLength(newMaxLength)\r\n\r\n  // 如果当前值超过新的最大长度，截断\r\n  if (props.modelValue.length > newMaxLength) {\r\n    const truncated = props.modelValue.slice(0, newMaxLength)\r\n    keyboard.setValue(truncated)\r\n    emit('update:modelValue', truncated)\r\n  }\r\n})\r\n\r\n// 监听确认事件\r\nkeyboard.on('confirm', ({ value }) => {\r\n  emit('done', value)\r\n})\r\n\r\n/**\r\n * 处理按键\r\n */\r\nconst handleKeyPress = (key: KeyDefinition) => {\r\n  keyboard.handleKey(key)\r\n}\r\n\r\n/**\r\n * 当前位置提示\r\n */\r\nconst positionHint = computed(() => {\r\n  const len = props.modelValue.length\r\n  if (len === 0) return '请选择省份'\r\n  if (len === 1) return '请输入字母'\r\n  if (len < maxLength.value) return `第${len + 1}位`\r\n  return '已完成'\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div class=\"license-plate-keyboard\">\r\n    <!-- 输入显示区 -->\r\n    <div class=\"license-plate-keyboard__display\">\r\n      <div class=\"license-plate-keyboard__value\">\r\n        <span\r\n          v-for=\"(char, index) in modelValue.padEnd(maxLength, ' ').split('')\"\r\n          :key=\"index\"\r\n          class=\"license-plate-keyboard__char\"\r\n          :class=\"{\r\n            'license-plate-keyboard__char--filled': char !== ' ',\r\n            'license-plate-keyboard__char--current':\r\n              index === modelValue.length,\r\n            'license-plate-keyboard__char--province': index === 0,\r\n            'license-plate-keyboard__char--new-energy':\r\n              newEnergy && index === 7,\r\n          }\"\r\n        >\r\n          {{ char === ' ' ? '' : char }}\r\n        </span>\r\n      </div>\r\n      <div class=\"license-plate-keyboard__hint\">\r\n        {{ positionHint }}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 键盘区 - 由 core 的 KeyboardManager 自动切换布局 -->\r\n    <VirtualKeyboard\r\n      :type=\"keyboard.type.value\"\r\n      :is-upper-case=\"keyboard.isUpperCase.value\"\r\n      @keypress=\"handleKeyPress\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<style>\r\n.license-plate-keyboard {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--keyboard-bg);\r\n}\r\n\r\n.license-plate-keyboard__display {\r\n  padding: var(--ld-spacing-md) var(--ld-spacing-lg);\r\n  background: var(--keyboard-display-bg, var(--ld-bg-surface-soft));\r\n  border-bottom: var(--ld-border-width-thin) solid var(--ld-border-subtle);\r\n}\r\n\r\n.license-plate-keyboard__value {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--ld-spacing-sm);\r\n  margin-bottom: var(--ld-spacing-sm);\r\n}\r\n\r\n.license-plate-keyboard__char {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--ld-px-40);\r\n  height: var(--ld-px-48);\r\n  border: var(--ld-border-width-medium) solid var(--ld-border);\r\n  border-radius: var(--ld-radius-md);\r\n  background: var(--keyboard-key-bg);\r\n  color: var(--keyboard-key-color);\r\n  font-size: var(--ld-font-xl);\r\n  font-weight: 600;\r\n  transition:\r\n    border-color var(--ld-duration-fast),\r\n    background-color var(--ld-duration-fast);\r\n}\r\n\r\n.license-plate-keyboard__char--filled,\r\n.license-plate-keyboard__char--current {\r\n  border-color: var(--keyboard-primary-bg);\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--keyboard-primary-bg) 10%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n.license-plate-keyboard__char--current {\r\n  animation: plate-char-pulse var(--ld-duration-slow) infinite;\r\n}\r\n\r\n.license-plate-keyboard__char--province {\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-warning-500) 10%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n.license-plate-keyboard__char--province.license-plate-keyboard__char--filled {\r\n  border-color: var(--ld-warning-500);\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-warning-500) 15%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n.license-plate-keyboard__char--new-energy {\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-success-500) 10%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n.license-plate-keyboard__char--new-energy.license-plate-keyboard__char--filled {\r\n  border-color: var(--ld-success-500);\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-success-500) 15%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n}\r\n\r\n@keyframes plate-char-pulse {\r\n  0%,\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n  50% {\r\n    opacity: 0.6;\r\n  }\r\n}\r\n\r\n.license-plate-keyboard__hint {\r\n  color: var(--ld-text-muted);\r\n  font-size: var(--ld-font-sm);\r\n  text-align: center;\r\n}\r\n\r\n.license-plate-keyboard .plate-keyboard-row {\r\n  gap: var(--ld-spacing-xs);\r\n}\r\n\r\n.license-plate-keyboard .key-plate-province,\r\n.license-plate-keyboard .key-plate-letter,\r\n.license-plate-keyboard .key-plate-number {\r\n  min-width: var(--ld-px-28);\r\n  height: var(--ld-px-40);\r\n  border-radius: var(--keyboard-key-radius);\r\n  font-size: var(--ld-font-sm);\r\n}\r\n\r\n.license-plate-keyboard .key-plate-special {\r\n  background: color-mix(\r\n    in srgb,\r\n    var(--ld-warning-500) 20%,\r\n    var(--keyboard-key-bg)\r\n  );\r\n  color: var(--ld-warning-700);\r\n}\r\n\r\n.license-plate-keyboard .key-plate-fn,\r\n.license-plate-keyboard .key-plate-switch {\r\n  background: var(--keyboard-fn-key-bg);\r\n}\r\n\r\n.license-plate-keyboard .key-plate-switch {\r\n  font-size: var(--ld-font-sm);\r\n}\r\n.license-plate-keyboard .key-plate-done {\r\n  background: var(--keyboard-primary-bg);\r\n  color: var(--keyboard-primary-color);\r\n  font-size: var(--ld-font-sm);\r\n}\r\n</style>\r\n","/**\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","/**\r\n * 键盘 Engine 插件\r\n * 适配 @composy/engine-vue 的插件\r\n * @module plugins/engine-plugin\r\n */\r\n\r\nimport type { App } 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\ninterface KeyboardEngineContext {\r\n  framework?: {\r\n    app?: App\r\n  }\r\n  container?: {\r\n    singleton?: (name: string, value: { name: string; version: string }) => void\r\n  }\r\n}\r\n\r\nfunction isRecord(value: unknown): value is Record<string, unknown> {\r\n  return typeof value === 'object' && value !== null\r\n}\r\n\r\nfunction isVueApp(value: unknown): value is App {\r\n  return (\r\n    isRecord(value) &&\r\n    typeof value.component === 'function' &&\r\n    typeof value.directive === 'function'\r\n  )\r\n}\r\n\r\nfunction getEngineContext(value: unknown): KeyboardEngineContext {\r\n  if (!isRecord(value)) return {}\r\n\r\n  const framework = isRecord(value.framework) ? value.framework : undefined\r\n  const container = isRecord(value.container) ? value.container : undefined\r\n\r\n  return {\r\n    framework: isVueApp(framework?.app) ? { app: framework.app } : undefined,\r\n    container:\r\n      typeof container?.singleton === 'function'\r\n        ? {\r\n            singleton:\r\n              container.singleton as KeyboardEngineContext['container']['singleton'],\r\n          }\r\n        : undefined,\r\n  }\r\n}\r\n\r\n/**\r\n * Engine 插件接口（兼容 @composy/engine-core Plugin）\r\n */\r\nexport interface KeyboardEnginePluginOptions {\r\n  /**\r\n   * 组件前缀\r\n   * @default 'L'\r\n   */\r\n  prefix?: string\r\n}\r\n\r\n/**\r\n * 键盘 Engine 插件\r\n *\r\n * 符合 @composy/engine-core Plugin 接口规范\r\n * 通过 engine.use(KeyboardEnginePlugin) 安装\r\n *\r\n * @example\r\n * ```typescript\r\n * import { createVueEngine } from '@composy/engine-vue'\r\n * import { KeyboardEnginePlugin } from '@composy/keyboard-vue'\r\n *\r\n * const engine = createVueEngine({\r\n *   plugins: [KeyboardEnginePlugin],\r\n * })\r\n * ```\r\n */\r\nexport const KeyboardEnginePlugin = {\r\n  name: 'keyboard',\r\n  version: '0.1.0',\r\n\r\n  async install(context: unknown, options?: KeyboardEnginePluginOptions) {\r\n    const prefix = options?.prefix ?? 'L'\r\n    const engineContext = getEngineContext(context)\r\n\r\n    // 获取 Vue 应用实例（从 engine 上下文）\r\n    const app = engineContext.framework?.app\r\n\r\n    if (app) {\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    if (engineContext.container?.singleton) {\r\n      engineContext.container.singleton('keyboard', {\r\n        name: 'keyboard',\r\n        version: '0.1.0',\r\n      })\r\n    }\r\n  },\r\n}\r\n","/**\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":"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"}