@composy/keyboard-vue 0.0.1 → 0.0.2

package/es/components/KeyboardKey.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardKey.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/KeyboardKey.vue"],"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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIA,MAAM,QAAQ;EAmBd,MAAM,OAAO;EAQb,MAAM,QAAQ,eAAe;GAC3B,MAAM,WAAW,MAAM,OAAO;GAC9B,IAAI,OAAO,aAAa,UACtB,OAAO;GAET,OAAO,MAAM,cAAc,SAAS,QAAQ,SAAS;EACvD,CAAC;EAKD,MAAM,WAAW,eAAe;GAE9B,IAAI,MAAM,SACR;GAEF,MAAM,OAAO,MAAM,aAAa;GAChC,MAAM,QAAQ,MAAM,OAAO,SAAS;GAEpC,OAAO,GAAG,OAAO,SAAS,QAAQ,KAAK,EAAG;EAC5C,CAAC;EAKD,MAAM,UAAU,eAAe;GAC7B,IAAI,CAAC,MAAM,SACT;GAGF,OAAO,MAAM,OAAO,SAAS;EAC/B,CAAC;EAKD,MAAM,WAAW,eAAe;GAC9B,MAAM,UAAU,CAAC,gBAAgB,iBAAiB,MAAM,OAAO,MAAM;GAErE,IAAI,MAAM,OAAO,WACf,QAAQ,KAAK,MAAM,OAAO,SAAS;GAGrC,IAAI,MAAM,OAAO,UACf,QAAQ,KAAK,wBAAwB;GAIvC,IAAI,MAAM,OAAO,SAAS,WAAW,MAAM,aACzC,QAAQ,KAAK,sBAAsB;GAGrC,OAAO;EACT,CAAC;EAKD,MAAM,aAAa,eAAe;GAChC,OAAO,MAAM,OAAO,WAAW,MAAM,OAAO,QAAQ,SAAS;EAC/D,CAAC;EAKD,MAAM,gBAAgB,eAAe;GACnC,OAAO,WAAW,SAAS,CAAC,MAAM,OAAO;EAC3C,CAAC;EAKD,MAAM,eAAe,UAAmC;GACtD,MAAM,eAAe;GACrB,MAAM,gBAAgB;GAEtB,IAAI,MAAM,OAAO,UACf;GAIF,IAAI,cAAc,OAAO;IACvB,KAAK,eAAe,MAAM,OAAO,OAAQ;IACzC;GACF;GAGA,KAAK,SAAS,MAAM,MAAM;EAC5B;EAKA,MAAM,oBAAoB,UAAmC;GAC3D,MAAM,eAAe;GACrB,MAAM,gBAAgB;GAEtB,IAAI,MAAM,OAAO,UACf;GAGF,IAAI,WAAW,OACb,KAAK,eAAe,MAAM,OAAO,OAAQ;EAE7C;;uBAIE,mBAqBM,OAAA;IArBD,OAAM;IAAwB,OAAK,eAAA;KAAA,OAAW,SAAA;KAAQ,MAAQ,QAAA;IAAO,CAAA;;IACxE,mBAYS,UAAA;KAXN,OAAK,eAAA,CAAG,SAAA,OAAQ;MAAA,eAAmB,WAAA,SAAU,CAAK,cAAA;MAAa,mBAAqB,cAAA;KAAa,CAAA,CAAA;KACjG,UAAU,QAAA,OAAO;KAClB,MAAK;KACJ,aAAS,cAAU,aAAW,CAAA,SAAA,CAAA;KAC9B,cAAU,cAAU,aAAW,CAAA,SAAA,CAAA;;KAEhC,mBAAA,YAAA;KACY,QAAA,OAAO,QAAA,UAAA,GAAnB,mBAAgF,QAAA;;MAAvD,OAAM;MAAqB,WAAQ,QAAA,OAAO;8CACnE,mBAA2D,QAA3D,YAA2D,gBAAf,MAAA,KAAK,GAAA,CAAA;KACjD,mBAAA,eAAA;KACY,cAAA,SAAA,UAAA,GAAZ,mBAAsE,QAAtE,YAA8D,GAAC,KAAA,mBAAA,QAAA,IAAA;;IAEjE,mBAAA,iCAAA;IAEQ,WAAA,SAAU,CAAK,cAAA,SAAA,UAAA,GADvB,mBAKS,QAAA;;KAHP,OAAM;KACL,aAAS,cAAU,kBAAgB,CAAA,SAAA,CAAA;KACnC,cAAU,cAAU,kBAAgB,CAAA,SAAA,CAAA;OACtC,KAAC,EAAA,KAAA,mBAAA,QAAA,IAAA"}
+{"version":3,"file":"KeyboardKey.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/KeyboardKey.vue","../../src/components/KeyboardKey.vue"],"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"],"mappings":"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"}

package/es/components/KeyboardPopup.js

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

package/es/components/KeyboardPopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardPopup.js","names":[],"sources":["../../src/components/KeyboardPopup.vue"],"sourcesContent":["<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"],"mappings":""}
+{"version":3,"file":"KeyboardPopup.js","names":[],"sources":["../../src/components/KeyboardPopup.vue"],"sourcesContent":["<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"],"mappings":""}

package/es/components/KeyboardPopup.vue_vue_type_script_setup_true_lang.js

@@ -2,14 +2,14 @@
 * ***********************************
 * @composy/keyboard-vue v0.0.1    *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:14 *
+* Build time: 2024-10-12 17:44:15 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
 */
-import VirtualKeyboard_default from "./VirtualKeyboard.js";
 import { useKeyboard } from "../composables/useKeyboard.js";
 import { useKeyboardPopup } from "../composables/useKeyboardPopup.js";
+import VirtualKeyboard_default from "./VirtualKeyboard.js";
 import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, unref, watch, withCtx, withModifiers } from "vue";
 import { isMobile } from "@composy/keyboard-core";
 //#region src/components/KeyboardPopup.vue?vue&type=script&setup=true&lang.ts
@@ -71,7 +71,7 @@ var KeyboardPopup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const keyboard = useKeyboard({
 			type: props.type,
 			value: props.value,
-			maxLength: props.maxLength || (props.type.startsWith("license-plate") ? 7 : void 0),
+			maxLength: props.maxLength ?? (props.type.startsWith("license-plate") ? 7 : void 0),
 			enableVibrate: props.enableVibrate
 		});
 		const { popupStyles, maskStyles, placement, showMask, updatePosition, close: closePopup } = useKeyboardPopup({
@@ -87,6 +87,9 @@ var KeyboardPopup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			keyboard.switchType(newType);
 			if (newType.startsWith("license-plate") && !props.maxLength) keyboard.setMaxLength(7);
 		});
+		watch(() => props.maxLength, (maxLength) => {
+			if (maxLength !== void 0) keyboard.setMaxLength(maxLength);
+		});
 		watch(() => props.value, (newValue) => {
 			if (newValue !== keyboard.value.value) keyboard.setValue(newValue);
 		});
@@ -102,7 +105,7 @@ var KeyboardPopup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					updatePosition();
 				});
 			} else keyboard.hide();
-		});
+		}, { immediate: true });
 		keyboard.on("confirm", ({ value }) => {
 			emit("confirm", value);
 			emit("update:modelValue", false);
@@ -117,7 +120,7 @@ var KeyboardPopup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			keyboard.appendValue(valueToAppend);
 		};
 		const handleMaskClick = () => {
-			if (props.closeOnClickOutside) emit("update:modelValue", false);
+			if (props.closeOnClickOutside) closePopup();
 		};
 		const popupClass = computed(() => {
 			return [

package/es/components/KeyboardPopup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardPopup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/KeyboardPopup.vue"],"sourcesContent":["<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"],"mappings":"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"}
+{"version":3,"file":"KeyboardPopup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/KeyboardPopup.vue","../../src/components/KeyboardPopup.vue"],"sourcesContent":["<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"],"mappings":"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"}

package/es/components/LicensePlateKeyboard.js

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

package/es/components/LicensePlateKeyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"LicensePlateKeyboard.js","names":[],"sources":["../../src/components/LicensePlateKeyboard.vue"],"sourcesContent":["<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"],"mappings":""}
+{"version":3,"file":"LicensePlateKeyboard.js","names":[],"sources":["../../src/components/LicensePlateKeyboard.vue"],"sourcesContent":["<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"],"mappings":""}

package/es/components/LicensePlateKeyboard.vue_vue_type_script_setup_true_lang.js

@@ -2,13 +2,13 @@
 * ***********************************
 * @composy/keyboard-vue v0.0.1    *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:14 *
+* Build time: 2024-10-12 17:44:15 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
 */
-import VirtualKeyboard_default from "./VirtualKeyboard.js";
 import { useKeyboard } from "../composables/useKeyboard.js";
+import VirtualKeyboard_default from "./VirtualKeyboard.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, watch } from "vue";
 //#region src/components/LicensePlateKeyboard.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = { class: "license-plate-keyboard" };

package/es/components/LicensePlateKeyboard.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"LicensePlateKeyboard.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/LicensePlateKeyboard.vue"],"sourcesContent":["<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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EAed,MAAM,OAAO;EAQb,MAAM,YAAY,eAAe,MAAM,YAAY,IAAI,CAAC;EAKxD,MAAM,WAAW,YAAY;GAC3B,MAAM;GACN,OAAO,MAAM;GACb,WAAW,UAAU;GACrB,eAAe;EACjB,CAAC;EAGD,YAAY,MAAM,aAAa,aAAa;GAC1C,IAAI,aAAa,SAAS,MAAM,OAC9B,SAAS,SAAS,QAAQ;EAE9B,CAAC;EAGD,MAAM,SAAS,QAAQ,aAAa;GAClC,KAAK,qBAAqB,QAAQ;EACpC,CAAC;EAGD,MAAM,YAAY,iBAAiB;GACjC,SAAS,aAAa,YAAY;GAGlC,IAAI,MAAM,WAAW,SAAS,cAAc;IAC1C,MAAM,YAAY,MAAM,WAAW,MAAM,GAAG,YAAY;IACxD,SAAS,SAAS,SAAS;IAC3B,KAAK,qBAAqB,SAAS;GACrC;EACF,CAAC;EAGD,SAAS,GAAG,YAAY,EAAE,YAAY;GACpC,KAAK,QAAQ,KAAK;EACpB,CAAC;EAKD,MAAM,kBAAkB,QAAuB;GAC7C,SAAS,UAAU,GAAG;EACxB;EAKA,MAAM,eAAe,eAAe;GAClC,MAAM,MAAM,MAAM,WAAW;GAC7B,IAAI,QAAQ,GAAG,OAAO;GACtB,IAAI,QAAQ,GAAG,OAAO;GACtB,IAAI,MAAM,UAAU,OAAO,OAAO,SAAI,MAAM,EAAC;GAC7C,OAAO;EACT,CAAC;;uBAIC,mBA2BM,OA3BN,YA2BM;IA1BJ,mBAAA,SAAA;IACA,mBAiBM,OAjBN,YAiBM,CAhBJ,mBAcM,OAdN,YAcM,EAAA,UAAA,IAAA,GAbJ,mBAYO,UAAA,MAAA,WAXmB,QAAA,WAAW,OAAO,UAAA,OAAS,GAAA,CAAA,CAAO,MAAK,EAAA,IAAvD,MAAM,UAAK;yBADrB,mBAYO,QAAA;MAVJ,KAAK;MACN,OAAK,eAAA,CAAC,gCAA8B;+CAC0B,SAAI;gDAA+D,UAAU,QAAA,WAAW;iDAA8D,UAAK;mDAAgE,QAAA,aAAa,UAAK;;wBAOxS,SAAI,MAAA,KAAgB,IAAI,GAAA,CAAA;iBAG/B,mBAAkE,OAAlE,YAAkE,gBAArB,aAAA,KAAY,GAAA,CAAA,CAAA,CAAA;IAG3D,mBAAA,yCAAA;IACA,YAIE,yBAAA;KAHC,MAAM,MAAA,QAAA,CAAA,CAAS,KAAK;KACpB,iBAAe,MAAA,QAAA,CAAA,CAAS,YAAY;KACpC,YAAU"}
+{"version":3,"file":"LicensePlateKeyboard.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/LicensePlateKeyboard.vue","../../src/components/LicensePlateKeyboard.vue"],"sourcesContent":["<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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EAkBd,MAAM,OAAO;EAQb,MAAM,YAAY,eAAgB,MAAM,YAAY,IAAI,CAAE;EAK1D,MAAM,WAAW,YAAY;GAC3B,MAAM;GACN,OAAO,MAAM;GACb,WAAW,UAAU;GACrB,eAAe;EACjB,CAAC;EAGD,YACQ,MAAM,aACZ,aAAY;GACV,IAAI,aAAa,SAAS,MAAM,OAC9B,SAAS,SAAS,QAAQ;EAE9B,CACF;EAGA,MAAM,SAAS,QAAO,aAAY;GAChC,KAAK,qBAAqB,QAAQ;EACpC,CAAC;EAGD,MAAM,YAAW,iBAAgB;GAC/B,SAAS,aAAa,YAAY;GAGlC,IAAI,MAAM,WAAW,SAAS,cAAc;IAC1C,MAAM,YAAY,MAAM,WAAW,MAAM,GAAG,YAAY;IACxD,SAAS,SAAS,SAAS;IAC3B,KAAK,qBAAqB,SAAS;GACrC;EACF,CAAC;EAGD,SAAS,GAAG,YAAY,EAAE,YAAY;GACpC,KAAK,QAAQ,KAAK;EACpB,CAAC;EAKD,MAAM,kBAAkB,QAAuB;GAC7C,SAAS,UAAU,GAAG;EACxB;EAKA,MAAM,eAAe,eAAe;GAClC,MAAM,MAAM,MAAM,WAAW;GAC7B,IAAI,QAAQ,GAAG,OAAO;GACtB,IAAI,QAAQ,GAAG,OAAO;GACtB,IAAI,MAAM,UAAU,OAAO,OAAO,SAAI,MAAM,EAAC;GAC7C,OAAO;EACT,CAAC;;uBCIC,mBA+BM,OA/BN,YA+BM;IA9BJ,mBAAA,SAAA;IACA,mBAqBM,OArBN,YAqBM,CApBJ,mBAgBM,OAhBN,YAgBM,EAAA,UAAA,IAAA,GAfJ,mBAcO,UAAA,MAAA,WAbmB,QAAA,WAAW,OAAO,UAAA,OAAS,GAAA,CAAA,CAAO,MAAK,EAAA,IAAvD,MAAM,UAAK;yBADrB,mBAcO,QAAA;MAZJ,KAAK;MACN,OAAK,eAAA,CAAC,gCAA8B;+CAC2B,SAAI;gDAA+E,UAAU,QAAA,WAAW;iDAA+D,UAAK;mDAAgF,QAAA,aAAa,UAAK;;wBAS1U,SAAI,MAAA,KAAgB,IAAI,GAAA,CAAA;iBAG/B,mBAEM,OAFN,YAEM,gBADD,aAAA,KAAY,GAAA,CAAA,CAAA,CAAA;IAInB,mBAAA,yCAAA;IACA,YAIE,yBAAA;KAHC,MAAM,MAAA,QAAA,CAAA,CAAS,KAAK;KACpB,iBAAe,MAAA,QAAA,CAAA,CAAS,YAAY;KACpC,YAAU"}

package/es/components/VirtualKeyboard.js

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

package/es/components/VirtualKeyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualKeyboard.js","names":[],"sources":["../../src/components/VirtualKeyboard.vue"],"sourcesContent":["<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"],"mappings":""}
+{"version":3,"file":"VirtualKeyboard.js","names":[],"sources":["../../src/components/VirtualKeyboard.vue"],"sourcesContent":["<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"],"mappings":""}

package/es/components/VirtualKeyboard.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/keyboard-vue v0.0.1    *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:14 *
+* Build time: 2024-10-12 17:44:15 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -72,7 +72,7 @@ var VirtualKeyboard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		const closeOptionsPanel = () => {
 			showOptionsPanel.value = false;
 		};
-		const getRowStyle = (rowIndex) => {
+		const getRowStyle = () => {
 			return {};
 		};
 		return (_ctx, _cache) => {
@@ -81,7 +81,7 @@ var VirtualKeyboard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					return openBlock(), createElementBlock("div", {
 						key: rowIndex,
 						class: normalizeClass(["virtual-keyboard__row", row.className]),
-						style: normalizeStyle(getRowStyle(rowIndex))
+						style: normalizeStyle(getRowStyle())
 					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(row.keys, (key) => {
 						return openBlock(), createBlock(KeyboardKey_default, {
 							key: key.id,
@@ -98,7 +98,7 @@ var VirtualKeyboard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 							"use-flex"
 						]);
 					}), 128))], 6);
-				}), 128)) : (openBlock(), createElementBlock("div", _hoisted_2, " 键盘布局未找到 ")),
+				}), 128)) : (openBlock(), createElementBlock("div", _hoisted_2, "键盘布局未找到")),
 				createCommentVNode(" 选项面板 "),
 				createVNode(Transition, { name: "options-panel" }, {
 					default: withCtx(() => [showOptionsPanel.value ? (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "keyboard-options-panel__title" }, "选择邮箱后缀", -1)), createElementVNode("button", {

package/es/components/VirtualKeyboard.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualKeyboard.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/VirtualKeyboard.vue"],"sourcesContent":["<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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EAuBd,MAAM,OAAO;EAQb,MAAM,mBAAmB,IAAI,KAAK;EAClC,MAAM,iBAAiB,IAAc,CAAC,CAAC;EAKvC,MAAM,gBAAgB,eAAe;GACnC,IAAI,MAAM,QACR,OAAO,MAAM;GAEf,OAAO,UAAU,MAAM,IAAI,KAAK;EAClC,CAAC;EAKD,MAAM,kBAAkB,QAAuB;GAC7C,KAAK,YAAY,GAAG;EACtB;EAKA,MAAM,qBAAqB,YAAsB;GAC/C,eAAe,QAAQ;GACvB,iBAAiB,QAAQ;EAC3B;EAKA,MAAM,sBAAsB,QAAgB,UAAmC;GAC7E,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB,iBAAiB,QAAQ;GACzB,KAAK,gBAAgB,MAAM;EAC7B;EAKA,MAAM,0BAA0B;GAC9B,iBAAiB,QAAQ;EAC3B;EAKA,MAAM,eAAe,aAAqB;GAExC,OAAO,CAAC;EACV;;uBAIE,mBAgDM,OAhDN,YAgDM;IA/CY,cAAA,SAAA,UAAA,IAAA,GACd,mBAiBM,UAAA,EAAA,KAAA,EAAA,GAAA,WAhBsB,cAAA,MAAc,OAAhC,KAAK,aAAQ;yBADvB,mBAiBM,OAAA;MAfH,KAAK;MACN,OAAK,eAAA,CAAC,yBACE,IAAI,SAAS,CAAA;MACpB,OAAK,eAAE,YAAY,QAAQ,CAAA;2BAE5B,mBASE,UAAA,MAAA,WARc,IAAI,OAAX,QAAG;0BADZ,YASE,qBAAA;OAPC,KAAK,IAAI;OACT,WAAS;OACT,iBAAe,QAAA;OACf,cAAY,QAAA;OACZ,YAAU,IAAI,cAAS;OACvB,SAAO;OACP,eAAc;;;;;;;;8BAIrB,mBAEM,OAFN,YAA4C,WAE5C;IAEA,mBAAA,QAAA;IACA,YAqBa,YAAA,EArBD,MAAK,gBAAe,GAAA;4BAoBxB,CAnBK,iBAAA,SAAA,UAAA,GAAX,mBAmBM,OAnBN,YAmBM,CAlBJ,mBAKM,OALN,YAKM,CAAA,OAAA,OAAA,OAAA,KAJJ,mBAAyD,QAAA,EAAnD,OAAM,gCAA+B,GAAC,UAAM,EAAA,IAClD,mBAES,UAAA;MAFD,OAAM;MAAgC,MAAK;MAAU,SAAO;MAAoB,cAAU,cAAU,mBAAiB,CAAA,SAAA,CAAA;QAAE,OAE/H,EAAA,CAAA,CAAA,GAEF,mBAWM,OAXN,YAWM,EAAA,UAAA,IAAA,GAVJ,mBASS,UAAA,MAAA,WARU,eAAA,QAAV,WAAM;0BADf,mBASS,UAAA;OAPN,KAAK;OACN,OAAM;OACN,MAAK;OACJ,aAAS,eAAW,MAAM,mBAAmB,QAAQ,CAAC,GAAA,CAAA,SAAA,CAAA;OACtD,cAAU,eAAW,MAAM,mBAAmB,QAAQ,CAAC,GAAA,CAAA,SAAA,CAAA;yBAErD,MAAM,GAAA,IAAA,UAAA"}
+{"version":3,"file":"VirtualKeyboard.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/VirtualKeyboard.vue","../../src/components/VirtualKeyboard.vue"],"sourcesContent":["<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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EA0Bd,MAAM,OAAO;EAQb,MAAM,mBAAmB,IAAI,KAAK;EAClC,MAAM,iBAAiB,IAAc,CAAC,CAAC;EAKvC,MAAM,gBAAgB,eAAe;GACnC,IAAI,MAAM,QACR,OAAO,MAAM;GAEf,OAAO,UAAU,MAAM,IAAI,KAAK;EAClC,CAAC;EAKD,MAAM,kBAAkB,QAAuB;GAC7C,KAAK,YAAY,GAAG;EACtB;EAKA,MAAM,qBAAqB,YAAsB;GAC/C,eAAe,QAAQ;GACvB,iBAAiB,QAAQ;EAC3B;EAKA,MAAM,sBAAsB,QAAgB,UAAmC;GAC7E,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB,iBAAiB,QAAQ;GACzB,KAAK,gBAAgB,MAAM;EAC7B;EAKA,MAAM,0BAA0B;GAC9B,iBAAiB,QAAQ;EAC3B;EAKA,MAAM,oBAAoB;GAExB,OAAO,CAAC;EACV;;uBCIE,mBAmDM,OAnDN,YAmDM;IAlDY,cAAA,SAAA,UAAA,IAAA,GACd,mBAiBM,UAAA,EAAA,KAAA,EAAA,GAAA,WAhBsB,cAAA,MAAc,OAAhC,KAAK,aAAQ;yBADvB,mBAiBM,OAAA;MAfH,KAAK;MACN,OAAK,eAAA,CAAC,yBACE,IAAI,SAAS,CAAA;MACpB,OAAK,eAAE,YAAW,CAAA;2BAEnB,mBASE,UAAA,MAAA,WARc,IAAI,OAAX,QAAG;0BADZ,YASE,qBAAA;OAPC,KAAK,IAAI;OACT,WAAS;OACT,iBAAe,QAAA;OACf,cAAY,QAAA;OACZ,YAAU,IAAI,cAAS;OACvB,SAAO;OACP,eAAc;;;;;;;;8BAIrB,mBAAyD,OAAzD,YAA4C,SAAO;IAEnD,mBAAA,QAAA;IACA,YA0Ba,YAAA,EA1BD,MAAK,gBAAe,GAAA;4BAyBxB,CAxBK,iBAAA,SAAA,UAAA,GAAX,mBAwBM,OAxBN,YAwBM,CAvBJ,mBAUM,OAVN,YAUM,CAAA,OAAA,OAAA,OAAA,KATJ,mBAAyD,QAAA,EAAnD,OAAM,gCAA+B,GAAC,UAAM,EAAA,IAClD,mBAOS,UAAA;MANP,OAAM;MACN,MAAK;MACJ,SAAO;MACP,cAAU,cAAU,mBAAiB,CAAA,SAAA,CAAA;QACvC,OAED,EAAA,CAAA,CAAA,GAEF,mBAWM,OAXN,YAWM,EAAA,UAAA,IAAA,GAVJ,mBASS,UAAA,MAAA,WARU,eAAA,QAAV,WAAM;0BADf,mBASS,UAAA;OAPN,KAAK;OACN,OAAM;OACN,MAAK;OACJ,aAAS,eAAU,MAAK,mBAAmB,QAAQ,CAAC,GAAA,CAAA,SAAA,CAAA;OACpD,cAAU,eAAU,MAAK,mBAAmB,QAAQ,CAAC,GAAA,CAAA,SAAA,CAAA;yBAEnD,MAAM,GAAA,IAAA,UAAA"}

package/es/components/index.d.ts

@@ -2,8 +2,7 @@
  * Vue 组件导出
  * @module components
  */
-export { default as VirtualKeyboard } from './VirtualKeyboard.vue';
 export { default as KeyboardKey } from './KeyboardKey.vue';
 export { default as KeyboardPopup } from './KeyboardPopup.vue';
 export { default as LicensePlateKeyboard } from './LicensePlateKeyboard.vue';
-//# sourceMappingURL=index.d.ts.map
+export { default as VirtualKeyboard } from './VirtualKeyboard.vue';

package/es/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAC5E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA"}

package/es/components/index.js

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

package/es/composables/index.d.ts

@@ -4,4 +4,3 @@
  */
 export * from './useKeyboard';
 export * from './useKeyboardPopup';
-//# sourceMappingURL=index.d.ts.map