@composy/keyboard-vue 0.0.1 → 0.0.2

package/esm/styles/keyboard.less

@@ -0,0 +1,286 @@
+/**
+ * LDesign Keyboard shared styles.
+ */
+
+:root {
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-primary-50);
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-fn-key-bg: var(--ld-bg-elevated);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-primary-100);
+  --keyboard-primary-bg: var(--ld-primary-500);
+  --keyboard-primary-active-bg: var(--ld-primary-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(
+    in srgb,
+    var(--ld-black) 40%,
+    var(--ld-transparent)
+  );
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-key-radius: var(--ld-radius-md);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-font-size: var(--ld-font-lg);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-sm);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
+}
+
+.virtual-keyboard,
+.virtual-keyboard *,
+.keyboard-popup,
+.keyboard-popup * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.virtual-keyboard {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: var(--keyboard-padding);
+  background-color: var(--keyboard-bg);
+  font-family: var(--ld-font-family);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.virtual-keyboard__row,
+.numpad-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;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  height: var(--keyboard-key-height);
+  padding: 0 var(--ld-spacing-xs);
+  border: 0;
+  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(--ld-duration-fast),
+    transform var(--ld-duration-fast);
+  -webkit-tap-highlight-color: transparent;
+  box-shadow: var(--keyboard-key-shadow);
+}
+
+.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-key-bg);
+  color: var(--keyboard-fn-key-color);
+  font-size: var(--keyboard-fn-font-size);
+  font-weight: 400;
+}
+
+.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-key-active-bg);
+}
+
+.keyboard-key--shift.keyboard-key--active,
+.keyboard-key--done,
+.keyboard-key--enter {
+  background-color: var(--keyboard-primary-bg);
+  color: var(--keyboard-primary-color);
+}
+
+.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;
+  box-shadow: none;
+  cursor: default;
+  pointer-events: none;
+}
+
+.numpad-row .keyboard-key {
+  height: var(--ld-px-56);
+  font-size: var(--ld-font-xl);
+}
+
+.key-num,
+.key-plate-province,
+.key-plate-letter,
+.key-plate-number {
+  background-color: var(--keyboard-key-bg);
+  color: var(--keyboard-key-color);
+}
+
+.key-numpad-fn,
+.key-plate-fn,
+.key-plate-switch {
+  background-color: var(--keyboard-fn-key-bg);
+  color: var(--keyboard-fn-key-color);
+  font-size: var(--keyboard-fn-font-size);
+}
+
+.key-numpad-done,
+.key-plate-done {
+  background-color: var(--keyboard-primary-bg);
+  color: var(--keyboard-primary-color);
+  font-size: var(--keyboard-fn-font-size);
+  box-shadow: none;
+}
+
+.key-numpad-done:active,
+.key-plate-done:active {
+  background-color: var(--keyboard-primary-active-bg);
+}
+
+.virtual-keyboard:has(.plate-keyboard-row) {
+  min-width: var(--ld-px-280);
+}
+.plate-keyboard-row {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  gap: var(--ld-spacing-xs);
+}
+
+.plate-keyboard-row .keyboard-key {
+  flex: 1 1 0;
+  min-width: var(--ld-px-28);
+  height: var(--ld-px-42);
+  padding: 0 var(--ld-px-2);
+  font-size: var(--ld-font-sm);
+  border-radius: var(--ld-radius-sm);
+}
+
+.key-plate-fn {
+  flex: 1.2 1 0 !important;
+}
+.key-plate-done {
+  flex: 1.5 1 0 !important;
+}
+.key-plate-switch {
+  flex: 1.3 1 0 !important;
+}
+.key-plate-special {
+  background-color: var(--ld-warning-50);
+  color: var(--ld-warning-700);
+}
+
+.keyboard-popup {
+  position: fixed;
+  z-index: 1000;
+  overflow: hidden;
+  background-color: var(--keyboard-bg);
+}
+
+.keyboard-popup--desktop {
+  min-width: var(--ld-px-280);
+  border-radius: var(--ld-radius-lg);
+  box-shadow: var(--ld-shadow-lg, none);
+}
+
+.keyboard-popup--mobile {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 0;
+  border-top-left-radius: var(--ld-radius-lg);
+  border-top-right-radius: var(--ld-radius-lg);
+  box-shadow: var(--ld-shadow-md, none);
+}
+
+.keyboard-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  background-color: var(--keyboard-mask-bg);
+}
+
+.keyboard-mask-enter-active,
+.keyboard-mask-leave-active {
+  transition: opacity var(--ld-duration-fast);
+}
+.keyboard-mask-enter-from,
+.keyboard-mask-leave-to {
+  opacity: 0;
+}
+.keyboard-fade-enter-active,
+.keyboard-fade-leave-active {
+  transition:
+    opacity var(--ld-duration-fast),
+    transform var(--ld-duration-fast);
+}
+.keyboard-fade-enter-from,
+.keyboard-fade-leave-to {
+  opacity: 0;
+  transform: translateY(calc(-1 * var(--ld-px-4))) scale(0.98);
+}
+.keyboard-slide-enter-active,
+.keyboard-slide-leave-active {
+  transition: transform var(--ld-duration-normal);
+}
+.keyboard-slide-enter-from,
+.keyboard-slide-leave-to {
+  transform: translateY(100%);
+}
+
+@media (max-width: 48em) {
+  .virtual-keyboard {
+    padding: var(--ld-spacing-xs);
+  }
+  .keyboard-key {
+    height: var(--ld-px-48);
+  }
+}
+
+@media (orientation: landscape) and (max-height: 32em) {
+  .keyboard-key {
+    height: var(--ld-px-36);
+    font-size: var(--ld-font-base);
+  }
+}
+
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  .keyboard-popup--mobile {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}

package/esm/styles/themes.less

@@ -0,0 +1,164 @@
+/**
+ * Keyboard theme tokens.
+ * Theme values intentionally reference the shared LDesign color and size runtime.
+ */
+
+[data-theme="miui"],
+.keyboard-theme-miui {
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-warning-50);
+  --keyboard-fn-key-bg: var(--ld-bg-elevated);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-warning-100);
+  --keyboard-primary-bg: var(--ld-warning-500);
+  --keyboard-primary-active-bg: var(--ld-warning-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(
+    in srgb,
+    var(--ld-black) 40%,
+    var(--ld-transparent)
+  );
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-key-radius: var(--ld-radius-md);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-font-size: var(--ld-font-lg);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-sm);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
+}
+
+[data-theme="ios"],
+.keyboard-theme-ios {
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-primary-50);
+  --keyboard-fn-key-bg: var(--ld-bg-elevated);
+  --keyboard-fn-key-color: var(--ld-text-primary);
+  --keyboard-fn-key-active-bg: var(--ld-primary-100);
+  --keyboard-primary-bg: var(--ld-primary-500);
+  --keyboard-primary-active-bg: var(--ld-primary-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(
+    in srgb,
+    var(--ld-black) 40%,
+    var(--ld-transparent)
+  );
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-key-radius: var(--ld-radius-sm);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-key-height: var(--ld-px-42);
+  --keyboard-font-size: var(--ld-font-xl);
+  --keyboard-fn-font-size: var(--ld-font-base);
+  --keyboard-padding: var(--ld-spacing-xs);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
+}
+
+[data-theme="material"],
+.keyboard-theme-material {
+  --keyboard-bg: var(--ld-bg-elevated);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-success-50);
+  --keyboard-fn-key-bg: var(--ld-bg-surface);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-success-100);
+  --keyboard-primary-bg: var(--ld-success-500);
+  --keyboard-primary-active-bg: var(--ld-success-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(
+    in srgb,
+    var(--ld-black) 40%,
+    var(--ld-transparent)
+  );
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-key-radius: var(--ld-radius-sm);
+  --keyboard-key-gap: var(--ld-spacing-xs);
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-font-size: var(--ld-font-lg);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-sm);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
+}
+
+[data-theme="minimal"],
+.keyboard-theme-minimal {
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-primary-50);
+  --keyboard-fn-key-bg: var(--ld-bg-surface);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-primary-100);
+  --keyboard-primary-bg: var(--ld-text-primary);
+  --keyboard-primary-active-bg: var(--ld-text-secondary);
+  --keyboard-primary-color: var(--ld-bg-container);
+  --keyboard-key-border: var(--ld-border-subtle);
+  --keyboard-key-radius: var(--ld-radius-lg);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-font-size: var(--ld-font-base);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-md);
+  --keyboard-key-shadow: none;
+}
+
+[data-theme="dark"],
+.keyboard-theme-dark {
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-elevated);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-primary-100);
+  --keyboard-fn-key-bg: var(--ld-bg-container);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-primary-200);
+  --keyboard-primary-bg: var(--ld-primary-500);
+  --keyboard-primary-active-bg: var(--ld-primary-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(
+    in srgb,
+    var(--ld-black) 40%,
+    var(--ld-transparent)
+  );
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-key-radius: var(--ld-radius-md);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-font-size: var(--ld-font-lg);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-sm);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
+}
+
+[data-theme="green"],
+.keyboard-theme-green {
+  --keyboard-primary-bg: var(--ld-success-500);
+  --keyboard-primary-active-bg: var(--ld-success-600);
+}
+
+[data-theme="blue"],
+.keyboard-theme-blue {
+  --keyboard-primary-bg: var(--ld-info-500);
+  --keyboard-primary-active-bg: var(--ld-info-600);
+}
+
+.keyboard-theme-light {
+  color-scheme: light;
+}
+.keyboard-theme-dark {
+  color-scheme: dark;
+}
+
+.keyboard-popup,
+.virtual-keyboard {
+  transition: background-color var(--ld-duration-fast);
+}
+
+.keyboard-key {
+  transition:
+    background-color var(--ld-duration-fast),
+    transform var(--ld-duration-fast);
+}

package/lib/components/KeyboardKey.cjs

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

package/lib/components/KeyboardKey.cjs.map

@@ -1 +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":""}
+{"version":3,"file":"KeyboardKey.cjs","names":[],"sources":["../../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"],"mappings":""}

package/lib/components/KeyboardKey.vue_vue_type_script_setup_true_lang.cjs

@@ -2,12 +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:16 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
 */
 let vue = require("vue");
+let _composy_keyboard_core = require("@composy/keyboard-core");
 //#region src/components/KeyboardKey.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = ["disabled"];
 const _hoisted_2 = ["innerHTML"];
@@ -17,6 +18,10 @@ const _hoisted_3 = {
 };
 const _hoisted_4 = {
 	key: 2,
+	class: "keyboard-key__label"
+};
+const _hoisted_5 = {
+	key: 3,
 	class: "keyboard-key__arrow-inline"
 };
 var KeyboardKey_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -48,6 +53,10 @@ var KeyboardKey_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0
 			if (typeof keyLabel === "string") return keyLabel;
 			return props.isUpperCase ? keyLabel.upper : keyLabel.lower;
 		});
+		const iconMarkup = (0, vue.computed)(() => {
+			const icon = props.keyDef.icon;
+			return icon ? (0, _composy_keyboard_core.sanitizeSvgIcon)(icon) : "";
+		});
 		const keyWidth = (0, vue.computed)(() => {
 			if (props.useFlex) return;
 			const base = props.baseWidth ?? 36;
@@ -76,7 +85,7 @@ var KeyboardKey_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0
 			event.stopPropagation();
 			if (props.keyDef.disabled) return;
 			if (isOptionsOnly.value) {
-				emit("showOptions", props.keyDef.options);
+				emit("showOptions", props.keyDef.options ?? []);
 				return;
 			}
 			emit("press", props.keyDef);
@@ -85,7 +94,7 @@ var KeyboardKey_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0
 			event.preventDefault();
 			event.stopPropagation();
 			if (props.keyDef.disabled) return;
-			if (hasOptions.value) emit("showOptions", props.keyDef.options);
+			if (hasOptions.value) emit("showOptions", props.keyDef.options ?? []);
 		};
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -106,13 +115,13 @@ var KeyboardKey_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0
 					onTouchstart: (0, vue.withModifiers)(handlePress, ["prevent"])
 				}, [
 					(0, vue.createCommentVNode)(" SVG 图标支持 "),
-					__props.keyDef.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+					iconMarkup.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 0,
 						class: "keyboard-key__icon",
-						innerHTML: __props.keyDef.icon
-					}, null, 8, _hoisted_2)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3, (0, vue.toDisplayString)(label.value), 1)),
+						innerHTML: iconMarkup.value
+					}, null, 8, _hoisted_2)) : __props.keyDef.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3, (0, vue.toDisplayString)(__props.keyDef.icon), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4, (0, vue.toDisplayString)(label.value), 1)),
 					(0, vue.createCommentVNode)(" 纯选项按钮内嵌下拉箭头 "),
-					isOptionsOnly.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4, "▼")) : (0, vue.createCommentVNode)("v-if", true)
+					isOptionsOnly.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5, "▼")) : (0, vue.createCommentVNode)("v-if", true)
 				], 42, _hoisted_1),
 				(0, vue.createCommentVNode)(" 有value又有options的按钮：单独可点击的下拉箭头 "),
 				hasOptions.value && !isOptionsOnly.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {

package/lib/components/KeyboardKey.vue_vue_type_script_setup_true_lang.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardKey.vue_vue_type_script_setup_true_lang.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":"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"}
+{"version":3,"file":"KeyboardKey.vue_vue_type_script_setup_true_lang.cjs","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/lib/components/KeyboardPopup.cjs

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