@composy/keyboard-vue 0.0.1

package/es/styles/keyboard.less

@@ -0,0 +1,399 @@
+/**
+ * LDesign Keyboard - 核心样式
+ * 简洁现代的默认主题
+ */
+
+/* ====================
+   CSS 变量 - 简洁主题
+   ==================== */
+:root {
+  /* 键盘背景 */
+  --keyboard-bg: #f7f7f7;
+
+  /* 普通按键 */
+  --keyboard-key-bg: #ffffff;
+  --keyboard-key-color: #333333;
+  --keyboard-key-active-bg: #e5e5e5;
+  --keyboard-key-border: #e0e0e0;
+
+  /* 功能键 */
+  --keyboard-fn-bg: #e8e8e8;
+  --keyboard-fn-color: #666666;
+  --keyboard-fn-active-bg: #d8d8d8;
+
+  /* 主色调按键 */
+  --keyboard-primary-bg: #2563eb;
+  --keyboard-primary-active-bg: #1d4ed8;
+  --keyboard-primary-color: #ffffff;
+
+  /* 按键尺寸 */
+  --keyboard-key-height: 48px;
+  --keyboard-key-radius: 8px;
+  --keyboard-key-gap: 6px;
+
+  /* 字体 */
+  --keyboard-font-size: 20px;
+  --keyboard-fn-font-size: 14px;
+
+  /* 动画 */
+  --keyboard-transition: 80ms ease-out;
+}
+
+/* ====================
+   基础重置
+   ==================== */
+.virtual-keyboard,
+.virtual-keyboard *,
+.keyboard-popup,
+.keyboard-popup * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.virtual-keyboard {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* ====================
+   键盘容器
+   ==================== */
+.virtual-keyboard {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  background-color: var(--keyboard-bg);
+  width: 100%;
+}
+
+.virtual-keyboard__row {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  gap: var(--keyboard-key-gap);
+  margin-bottom: var(--keyboard-key-gap);
+}
+
+.virtual-keyboard__row:last-child {
+  margin-bottom: 0;
+}
+
+/* ====================
+   按键基础样式
+   ==================== */
+.keyboard-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  height: var(--keyboard-key-height);
+  min-width: 0;
+  padding: 0 4px;
+  border: none;
+  border-radius: var(--keyboard-key-radius);
+  background-color: var(--keyboard-key-bg);
+  color: var(--keyboard-key-color);
+  font-size: var(--keyboard-font-size);
+  font-weight: 500;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: background-color var(--keyboard-transition),
+    transform var(--keyboard-transition);
+  -webkit-tap-highlight-color: transparent;
+  box-shadow: 0 1px 0 var(--keyboard-key-border);
+}
+
+.keyboard-key:active {
+  background-color: var(--keyboard-key-active-bg);
+  transform: scale(0.98);
+}
+
+.keyboard-key--disabled {
+  opacity: 0;
+  cursor: default;
+  pointer-events: none;
+}
+
+/* ====================
+   功能键样式
+   ==================== */
+.keyboard-key--backspace,
+.keyboard-key--shift,
+.keyboard-key--tab,
+.keyboard-key--clear,
+.keyboard-key--close {
+  background-color: var(--keyboard-fn-bg);
+  color: var(--keyboard-fn-color);
+  font-size: var(--keyboard-fn-font-size);
+  font-weight: 400;
+  box-shadow: 0 1px 0 var(--keyboard-key-border);
+}
+
+.keyboard-key--backspace:active,
+.keyboard-key--shift:active,
+.keyboard-key--tab:active,
+.keyboard-key--clear:active,
+.keyboard-key--close:active {
+  background-color: var(--keyboard-fn-active-bg);
+}
+
+/* Shift 激活状态 */
+.keyboard-key--shift.keyboard-key--active {
+  background-color: var(--keyboard-primary-bg);
+  color: var(--keyboard-primary-color);
+}
+
+/* ====================
+   主色按键（完成/确认）
+   ==================== */
+.keyboard-key--done,
+.keyboard-key--enter {
+  background-color: var(--keyboard-primary-bg);
+  color: var(--keyboard-primary-color);
+  font-size: var(--keyboard-fn-font-size);
+  font-weight: 500;
+  box-shadow: none;
+}
+
+.keyboard-key--done:active,
+.keyboard-key--enter:active {
+  background-color: var(--keyboard-primary-active-bg);
+}
+
+/* ====================
+   空格键
+   ==================== */
+.keyboard-key--space {
+  flex: 4;
+}
+
+/* ====================
+   占位键（透明）
+   ==================== */
+.key-placeholder {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  cursor: default;
+  pointer-events: none;
+}
+
+/* ====================
+   数字键盘通用样式
+   ==================== */
+.numpad-row {
+  display: flex;
+  gap: var(--keyboard-key-gap);
+  width: 100%;
+}
+
+.numpad-row .keyboard-key {
+  flex: 1;
+  height: 54px;
+  font-size: 24px;
+  font-weight: 500;
+}
+
+/* 数字键 */
+.key-num {
+  background-color: var(--keyboard-key-bg);
+  color: var(--keyboard-key-color);
+}
+
+/* 功能键 */
+.key-numpad-fn {
+  background-color: var(--keyboard-fn-bg);
+  color: var(--keyboard-fn-color);
+  font-size: 14px;
+  font-weight: 400;
+}
+
+/* 完成键 */
+.key-numpad-done {
+  background-color: var(--keyboard-primary-bg);
+  color: var(--keyboard-primary-color);
+  font-size: 16px;
+  font-weight: 500;
+  box-shadow: none;
+}
+
+.key-numpad-done:active {
+  background-color: var(--keyboard-primary-active-bg);
+}
+
+/* ====================
+   车牌键盘样式
+   ==================== */
+.virtual-keyboard:has(.plate-keyboard-row) {
+  min-width: 340px;
+}
+
+.plate-keyboard-row {
+  display: flex;
+  gap: 3px;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+
+.plate-keyboard-row .keyboard-key {
+  flex: 1 1 0;
+  height: 42px;
+  min-width: 28px;
+  max-width: none;
+  padding: 0 2px;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: 5px;
+}
+
+.key-plate-province,
+.key-plate-letter,
+.key-plate-number {
+  background-color: var(--keyboard-key-bg);
+}
+
+.key-plate-fn {
+  background-color: var(--keyboard-fn-bg);
+  font-size: 12px;
+  flex: 1.2 1 0 !important;
+}
+
+.key-plate-done {
+  background-color: var(--keyboard-primary-bg);
+  color: var(--keyboard-primary-color);
+  font-size: 13px;
+  box-shadow: none;
+  flex: 1.5 1 0 !important;
+}
+
+.key-plate-switch {
+  background-color: var(--keyboard-fn-bg);
+  font-size: 12px;
+  flex: 1.3 1 0 !important;
+}
+
+.key-plate-special {
+  background-color: #fef3c7;
+  color: #92400e;
+}
+
+/* ====================
+   弹出层样式
+   ==================== */
+.keyboard-popup {
+  position: fixed;
+  z-index: 1000;
+  background-color: var(--keyboard-bg);
+  overflow: hidden;
+}
+
+.keyboard-popup--desktop {
+  border-radius: 12px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  min-width: 300px;
+}
+
+.keyboard-popup--mobile {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 0;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
+}
+
+/* 安全区域 */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  .keyboard-popup--mobile {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+/* ====================
+   遮罩层
+   ==================== */
+.keyboard-mask {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+}
+
+/* ====================
+   动画
+   ==================== */
+.keyboard-mask-enter-active,
+.keyboard-mask-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.keyboard-mask-enter-from,
+.keyboard-mask-leave-to {
+  opacity: 0;
+}
+
+.keyboard-fade-enter-active,
+.keyboard-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.keyboard-fade-enter-from,
+.keyboard-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
+}
+
+.keyboard-slide-enter-active,
+.keyboard-slide-leave-active {
+  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.keyboard-slide-enter-from,
+.keyboard-slide-leave-to {
+  transform: translateY(100%);
+}
+
+/* ====================
+   移动端适配
+   ==================== */
+@media (max-width: 768px) {
+  .virtual-keyboard {
+    padding: 6px;
+  }
+
+  .keyboard-key {
+    height: 44px;
+  }
+
+  .numpad-row .keyboard-key {
+    height: 52px;
+    font-size: 22px;
+  }
+
+  .plate-keyboard-row .keyboard-key {
+    height: 40px;
+    font-size: 15px;
+  }
+}
+
+/* ====================
+   横屏适配
+   ==================== */
+@media (orientation: landscape) and (max-height: 500px) {
+  .keyboard-key {
+    height: 36px;
+    font-size: 16px;
+  }
+
+  .numpad-row .keyboard-key {
+    height: 42px;
+    font-size: 18px;
+  }
+}

package/es/styles/themes.less

@@ -0,0 +1,233 @@
+/**
+ * LDesign Keyboard - 主题预设
+ * 简洁 · 现代 · 优雅
+ */
+
+/* ====================
+   MIUI 主题 - 小米风格（默认）
+   ==================== */
+[data-theme="miui"],
+.keyboard-theme-miui {
+  --keyboard-bg: #f5f5f5;
+  --keyboard-key-bg: #ffffff;
+  --keyboard-key-color: #1a1a1a;
+  --keyboard-key-active-bg: #e8e8e8;
+  --keyboard-fn-key-bg: #e0e0e0;
+  --keyboard-fn-key-color: #666666;
+  --keyboard-fn-key-active-bg: #d0d0d0;
+  --keyboard-primary-bg: #ff6700;
+  --keyboard-primary-active-bg: #e55d00;
+  --keyboard-primary-color: #ffffff;
+  --keyboard-key-radius: 8px;
+  --keyboard-key-gap: 6px;
+  --keyboard-key-height: 46px;
+  --keyboard-font-size: 18px;
+  --keyboard-fn-font-size: 14px;
+  --keyboard-padding: 8px;
+  --keyboard-key-shadow: none;
+}
+
+[data-theme="miui"] .keyboard-key,
+.keyboard-theme-miui .keyboard-key {
+  font-weight: 500;
+}
+
+/* ====================
+   iOS 主题 - 苹果风格
+   ==================== */
+[data-theme="ios"],
+.keyboard-theme-ios {
+  --keyboard-bg: #d1d3d9;
+  --keyboard-key-bg: #ffffff;
+  --keyboard-key-color: #000000;
+  --keyboard-key-active-bg: #c8cad0;
+  --keyboard-key-border: #a8aab4;
+  --keyboard-fn-key-bg: #adb0b8;
+  --keyboard-fn-key-color: #000000;
+  --keyboard-fn-key-active-bg: #9ea1a9;
+  --keyboard-primary-bg: #007aff;
+  --keyboard-primary-active-bg: #0066d6;
+  --keyboard-primary-color: #ffffff;
+  --keyboard-key-radius: 5px;
+  --keyboard-key-gap: 6px;
+  --keyboard-key-height: 43px;
+  --keyboard-font-size: 23px;
+  --keyboard-fn-font-size: 15px;
+  --keyboard-padding: 4px;
+  --keyboard-key-shadow: 0 1px 0 #a8aab4;
+}
+
+[data-theme="ios"] .keyboard-key,
+.keyboard-theme-ios .keyboard-key {
+  font-weight: 400;
+}
+
+[data-theme="ios"] .keyboard-key:active,
+.keyboard-theme-ios .keyboard-key:active {
+  transform: none;
+}
+
+/* ====================
+   Material 主题 - 质感设计
+   ==================== */
+[data-theme="material"],
+.keyboard-theme-material {
+  --keyboard-bg: #263238;
+  --keyboard-key-bg: #37474f;
+  --keyboard-key-color: #ffffff;
+  --keyboard-key-active-bg: #455a64;
+  --keyboard-fn-key-bg: #455a64;
+  --keyboard-fn-key-color: #b0bec5;
+  --keyboard-fn-key-active-bg: #546e7a;
+  --keyboard-primary-bg: #4caf50;
+  --keyboard-primary-active-bg: #43a047;
+  --keyboard-primary-color: #ffffff;
+  --keyboard-key-radius: 4px;
+  --keyboard-key-gap: 4px;
+  --keyboard-key-height: 48px;
+  --keyboard-font-size: 20px;
+  --keyboard-fn-font-size: 14px;
+  --keyboard-padding: 6px;
+  --keyboard-key-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme="material"] .keyboard-key,
+.keyboard-theme-material .keyboard-key {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+}
+
+[data-theme="material"] .keyboard-key:active,
+.keyboard-theme-material .keyboard-key:active {
+  transform: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* ====================
+   Minimal 极简主题 - 无边框
+   ==================== */
+[data-theme="minimal"],
+.keyboard-theme-minimal {
+  --keyboard-bg: rgba(250, 250, 250, 0.95);
+  --keyboard-key-bg: transparent;
+  --keyboard-key-color: #333333;
+  --keyboard-key-active-bg: rgba(0, 0, 0, 0.08);
+  --keyboard-fn-key-bg: transparent;
+  --keyboard-fn-key-color: #888888;
+  --keyboard-fn-key-active-bg: rgba(0, 0, 0, 0.08);
+  --keyboard-primary-bg: #333333;
+  --keyboard-primary-active-bg: #1a1a1a;
+  --keyboard-primary-color: #ffffff;
+  --keyboard-key-radius: 12px;
+  --keyboard-key-gap: 8px;
+  --keyboard-key-height: 44px;
+  --keyboard-font-size: 17px;
+  --keyboard-fn-font-size: 13px;
+  --keyboard-padding: 12px;
+  --keyboard-key-shadow: none;
+}
+
+[data-theme="minimal"] .keyboard-key,
+.keyboard-theme-minimal .keyboard-key {
+  box-shadow: none;
+}
+
+[data-theme="minimal"] .keyboard-key:active,
+.keyboard-theme-minimal .keyboard-key:active {
+  transform: scale(0.95);
+}
+
+/* ====================
+   Dark 深色主题
+   ==================== */
+[data-theme="dark"],
+.keyboard-theme-dark {
+  --keyboard-bg: #1c1c1e;
+  --keyboard-key-bg: #3a3a3c;
+  --keyboard-key-color: #ffffff;
+  --keyboard-key-active-bg: #4a4a4c;
+  --keyboard-fn-key-bg: #2c2c2e;
+  --keyboard-fn-key-color: #ebebf5;
+  --keyboard-fn-key-active-bg: #3c3c3e;
+  --keyboard-primary-bg: #0a84ff;
+  --keyboard-primary-active-bg: #0070e0;
+  --keyboard-primary-color: #ffffff;
+  --keyboard-key-radius: 8px;
+  --keyboard-key-gap: 6px;
+  --keyboard-key-height: 45px;
+  --keyboard-font-size: 18px;
+  --keyboard-fn-font-size: 14px;
+  --keyboard-padding: 8px;
+  --keyboard-key-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] .keyboard-key,
+.keyboard-theme-dark .keyboard-key {
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
+}
+
+/* 深色车牌键盘特殊样式 */
+[data-theme="dark"] .key-plate-special,
+.keyboard-theme-dark .key-plate-special {
+  background-color: #4a3728;
+  color: #fcd34d;
+}
+
+/* ====================
+   Green 护眼主题
+   ==================== */
+[data-theme="green"],
+.keyboard-theme-green {
+  --keyboard-bg: #e8f5e9;
+  --keyboard-key-bg: #ffffff;
+  --keyboard-key-color: #2e7d32;
+  --keyboard-key-active-bg: #c8e6c9;
+  --keyboard-key-border: #a5d6a7;
+  --keyboard-fn-bg: #c8e6c9;
+  --keyboard-fn-color: #388e3c;
+  --keyboard-fn-active-bg: #a5d6a7;
+  --keyboard-primary-bg: #43a047;
+  --keyboard-primary-active-bg: #388e3c;
+  --keyboard-primary-color: #ffffff;
+  --keyboard-key-radius: 8px;
+}
+
+/* ====================
+   Blue 蓝色主题
+   ==================== */
+[data-theme="blue"],
+.keyboard-theme-blue {
+  --keyboard-bg: #e3f2fd;
+  --keyboard-key-bg: #ffffff;
+  --keyboard-key-color: #1565c0;
+  --keyboard-key-active-bg: #bbdefb;
+  --keyboard-key-border: #90caf9;
+  --keyboard-fn-bg: #bbdefb;
+  --keyboard-fn-color: #1976d2;
+  --keyboard-fn-active-bg: #90caf9;
+  --keyboard-primary-bg: #1976d2;
+  --keyboard-primary-active-bg: #1565c0;
+  --keyboard-primary-color: #ffffff;
+  --keyboard-key-radius: 8px;
+}
+
+/* ====================
+   主题工具类
+   ==================== */
+.keyboard-theme-light {
+  color-scheme: light;
+}
+
+.keyboard-theme-dark {
+  color-scheme: dark;
+}
+
+/* 平滑主题切换 */
+.keyboard-popup,
+.virtual-keyboard {
+  transition: background-color 0.2s ease;
+}
+
+.keyboard-key {
+  transition: background-color var(--keyboard-transition) ease,
+    transform var(--keyboard-transition) ease;
+}

package/lib/components/KeyboardKey.cjs

@@ -0,0 +1,21 @@
+/*!
+* ***********************************
+* @composy/keyboard-vue v0.0.1    *
+* Built with rollup               *
+* Build time: 2024-08-17 11:42:14 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_KeyboardKey_vue_vue_type_script_setup_true_lang = require("./KeyboardKey.vue_vue_type_script_setup_true_lang.cjs");
+//#region src/components/KeyboardKey.vue
+require_KeyboardKey_vue_vue_type_script_setup_true_lang.default.__file = "src/components/KeyboardKey.vue";
+var KeyboardKey_default = require_KeyboardKey_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = KeyboardKey_default;
+/*! End of @composy/keyboard-vue | Powered by @composy/builder */
+//# sourceMappingURL=KeyboardKey.cjs.map

package/lib/components/KeyboardKey.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardKey.cjs","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":""}