@zh-keyboard/vue 1.1.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +33 -12
  2. package/dist/components/ZhKeyboard.vue.d.ts +17 -0
  3. package/dist/style.css +1 -1
  4. package/dist/zh-keyboard-vue.js +77 -64
  5. package/dist/zh-keyboard-vue.js.map +1 -1
  6. package/dist/zh-keyboard-vue.umd.cjs +1 -1
  7. package/dist/zh-keyboard-vue.umd.cjs.map +1 -1
  8. package/package.json +4 -4
package/README.md CHANGED
@@ -32,6 +32,9 @@ pnpm add @zh-keyboard/vue
32
32
  | defaultMode | 'en' \| 'zh' \| 'hand' \| 'num' | 'en' | 默认的键盘模式 |
33
33
  | enableHandwriting| boolean | false | 是否启用手写输入 |
34
34
  | position | 'static' \| 'float' \| 'bottom' | 'static' | 键盘定位模式 |
35
+ | floatMarginTop | number | 10 | 浮动模式下键盘与输入框的距离 |
36
+ | disableWhenNoFocus| boolean | true | 当没有input获得焦点时是否禁用键盘 |
37
+ | requireInputmode| boolean | false | 是否只对带有 data-inputmode 属性的 input 弹出键盘 |
35
38
  | numKeys | string[][] | - | 数字键盘的行配置 |
36
39
 
37
40
  ### 事件
@@ -57,7 +60,8 @@ setKeyboardConfig({
57
60
  ### 基础用法
58
61
 
59
62
  - 为了防止移动端设备弹出系统默认的键盘，建议在输入框上设置 `inputmode="none"` 属性。
60
- - 此外，可以通过在输入框上设置 `data-inputmode` 属性来指定组件默认打开的键盘类型 (可选值为 `'en'`, `'zh'`, `'hand'`, `'num'`)，具体键盘模式的说明请参考 `defaultMode` 属性。
63
+ - 可以通过在输入框上设置 `data-inputmode` 属性来指定组件默认打开的键盘类型 (可选值为 `'en'`, `'zh'`, `'hand'`, `'num'`)，具体键盘模式的说明请参考 `defaultMode` 属性。
64
+ - 设置 `:require-inputmode="true"` 可以让键盘**只**在带有 `data-inputmode` 属性的 input 上弹出，适用于需要精确控制哪些输入框使用虚拟键盘的场景。
61
65
 
62
66
  ```vue
63
67
  <script setup>
@@ -96,28 +100,45 @@ const inputText = ref('')
96
100
  拼音输入功能需要初始化拼音引擎。推荐使用基于 RIME WASM 的拼音引擎：
97
101
 
98
102
  ```typescript
99
- import { createRimePinyinEngine } from '@zh-keyboard/pinyin'
103
+ import { RimePinyinEngine } from '@zh-keyboard/pinyin'
100
104
  import { registerPinyinEngine } from '@zh-keyboard/vue'
101
105
 
102
106
  // 注册 RIME 拼音引擎
103
107
  registerPinyinEngine(new RimePinyinEngine({
104
- wasmDir: '/data',
108
+ wasmDir: '/data', // rime-api.js/wasm 所在路径
109
+ dictVersion: '1.0.0', // 词库版本号（可选），版本一致时跳过下载直接使用
110
+ simplified: true, // 默认使用简体中文（可选，默认 true）
105
111
  }))
106
112
  ```
107
113
 
108
- worker写法参考 `examples`。
114
+ ### 引擎加载与就绪
109
115
 
110
- ### WASM 文件部署
116
+ `RimePinyinEngine` 在构造时自动开始加载，无需手动调用 `initialize()`。UI 层可通过 `whenReady()` 方法等待引擎就绪：
111
117
 
112
- 需要将以下文件发布到 `public/data/` 目录：
118
+ ```typescript
119
+ const engine = new RimePinyinEngine({ wasmDir: '/data' })
120
+ await engine.whenReady() // 等待加载完成
121
+ ```
113
122
 
114
- - `rime-api.wasm` - RIME 引擎本体
115
- - `default.yaml` - 默认配置
116
- - `luna_pinyin.schema.yaml` - 拼音方案
117
- - `luna_pinyin.table.bin` 、`luna_pinyin.prism.bin` 、`luna_pinyin.reverse.bin` - 词典文件
123
+ `CandidateBar` 组件内部已集成 loading 状态，引擎加载期间会显示 **"加载拼音引擎中…"** 提示。
118
124
 
119
- 这些文件来自 `@zh-keyboard/pinyin` 包的 `data/` 目录。
120
- ```
125
+ ### WASM 及词库文件部署
126
+
127
+ 需要将以下文件发布到 `public/data/` 目录（`wasmDir` 对应 `/data`）：
128
+
129
+ - `rime-api.js` / `rime-api.wasm` / `rime-api.data` — RIME WASM 引擎
130
+ - `source/default.yaml` — 默认配置
131
+ - `source/luna_pinyin.schema.yaml` — 拼音方案
132
+ - `source/luna_pinyin.dict.yaml` — 词典
133
+ - `source/symbols.yaml` — 符号表
134
+ - `source/essay.txt` — 语料
135
+
136
+ 这些文件来自 `@zh-keyboard/pinyin` 包的 `data/` 目录。引擎首次加载时会自动从 `source/` 编译词库并缓存到 IndexedDB，后续启动直接使用缓存，无需重新编译。
137
+
138
+ > 若 `dictVersion` 有变更，引擎会自动检测版本不一致并重新下载编译；
139
+ > 若版本一致则直接加载 IndexedDB 缓存，实现秒级启动。
140
+
141
+ worker 写法参考 `examples`。
121
142
 
122
143
  ## 输入模式
123
144
 
package/dist/components/ZhKeyboard.vue.d.ts CHANGED
@@ -44,6 +44,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
44
44
  numKeys: {
45
45
  type: () => string[][];
46
46
  };
47
+ /**
48
+ * 是否要求 input 元素必须带有 data-inputmode 属性才弹出键盘
49
+ * @default false
50
+ */
51
+ requireInputmode: {
52
+ type: BooleanConstructor;
53
+ default: () => boolean;
54
+ };
47
55
  }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
48
56
  key: (payload: KeyEvent) => any;
49
57
  }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -91,6 +99,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
91
99
  numKeys: {
92
100
  type: () => string[][];
93
101
  };
102
+ /**
103
+ * 是否要求 input 元素必须带有 data-inputmode 属性才弹出键盘
104
+ * @default false
105
+ */
106
+ requireInputmode: {
107
+ type: BooleanConstructor;
108
+ default: () => boolean;
109
+ };
94
110
  }>> & Readonly<{
95
111
  onKey?: ((payload: KeyEvent) => any) | undefined;
96
112
  }>, {
@@ -99,6 +115,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
99
115
  position: "static" | "float" | "bottom";
100
116
  floatMarginTop: number;
101
117
  disableWhenNoFocus: boolean;
118
+ requireInputmode: boolean;
102
119
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
103
120
  keyboardRef: HTMLDivElement;
104
121
  }, HTMLDivElement>;
package/dist/style.css CHANGED
@@ -1,2 +1,2 @@
1
- .zhk-candidate-list{gap:var(--gap);scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;flex:1;min-width:0;display:flex;overflow-x:auto}.zhk-candidate-list::-webkit-scrollbar{display:none}.zhk-candidate-list__item{font-size:var(--candidate-font-size);min-width:var(--candidate-font-size);padding:0 calc(var(--candidate-font-size) * .35);color:var(--key-text-color,#333);cursor:pointer;white-space:nowrap;background-color:#0000;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;transition:all .1s;display:flex}.zhk-candidate-list__item:first-child{color:var(--primary-color,#0076f5);font-weight:500}.zhk-candidate-list__item:hover{background-color:#0000000d}.handwriting-input{background:var(--background-color,#f5f5f5);height:100%;padding:var(--gap);gap:var(--gap);box-sizing:border-box;flex-direction:column;display:flex}.handwriting-input .handwriting-content{justify-content:center;align-items:flex-start;gap:var(--gap);flex-flow:row;flex:7;display:flex;overflow:hidden}.handwriting-input .handwriting-canvas-container{background:#fff;flex:4;justify-content:center;align-items:center;height:100%;font-size:0;display:flex}.handwriting-input .handwriting-canvas-container .handwriting-loading{width:100%;height:100%;padding:calc(var(--gap) * 2);box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;display:flex}.handwriting-input .handwriting-canvas-container .handwriting-loading .loading-text{color:var(--text-color,#333);margin-bottom:calc(var(--gap) * 2);text-align:center;font-size:16px}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-bar{background-color:var(--border-color,#dcdcdc);width:80%;height:8px;margin-bottom:var(--gap);border-radius:4px;overflow:hidden}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-bar .progress-fill{background-color:var(--primary-color,#007bff);border-radius:4px;height:100%;transition:width .3s}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-text{color:var(--text-color,#666);font-size:14px;font-weight:500}.handwriting-input .handwriting-canvas{touch-action:none;width:100%;height:100%;display:block}.handwriting-input .handwriting-buttons{justify-content:space-between;gap:var(--gap);max-width:calc(var(--keyboard-height) / 4);flex-direction:column;flex:1;height:100%;display:flex}.handwriting-input .handwriting-btn{padding:var(--gap);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);background-color:var(--function-key-color,#e4e7ea);box-shadow:var(--key-shadow,0 1px 2px #0000001a);cursor:pointer;white-space:nowrap;width:100%;font-size:var(--key-font-size);color:#555;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;flex:1;justify-content:center;align-items:center;font-weight:500;transition:all .12s;display:flex}.handwriting-input .handwriting-btn:hover{filter:brightness(98%)}.handwriting-input .handwriting-btn:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#cdd3d8;transform:translateY(1px)}.handwriting-input .handwriting-btn--function img{width:calc(1em * var(--key-icon-scale,1.15));height:calc(1em * var(--key-icon-scale,1.15));object-fit:contain;flex-shrink:0}.zhk-selection{z-index:2;width:100%;height:100%;padding:var(--gap);justify-content:center;align-items:flex-start;gap:var(--gap);box-sizing:border-box;background:#f5f5f5;flex-wrap:nowrap;display:flex;position:absolute;top:0;left:0}.zhk-selection__list{grid-template-columns:repeat(auto-fit, minmax(calc(var(--keyboard-height) / 7), 1fr));background-color:var(--key-background-color,#fff);border-radius:8px;flex:5;min-width:0;max-height:100%;display:grid;overflow:hidden auto;box-shadow:0 1px 4px #0000000d}.zhk-selection__list::-webkit-scrollbar{width:4px}.zhk-selection__list::-webkit-scrollbar-thumb{background-color:var(--border-color,#d1d5da);border-radius:2px}.zhk-selection__list::-webkit-scrollbar-track{background-color:#0000}.zhk-selection__text{font-size:var(--candidate-font-size);border-bottom:1px solid var(--border-color,#f0f0f0);border-right:1px solid var(--border-color,#f0f0f0);color:var(--key-text-color,#333);cursor:pointer;justify-content:center;align-items:center;padding:12px 8px;transition:background-color .12s;display:inline-flex}.zhk-selection__text:hover{color:var(--primary-color,#0076f5);z-index:1;background-color:#f5f8ff}.zhk-selection__text--span-2{grid-column:span 2}.zhk-selection__text--span-3{grid-column:span 3}.zhk-selection__func{flex:1;justify-content:flex-end;display:flex}.zhk-selection__func-btn{width:100%;font-size:var(--key-font-size);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);background-color:var(--function-key-color,#e4e7ea);cursor:pointer;color:#555;white-space:nowrap;padding:12px 0;font-weight:500;transition:all .12s;box-shadow:0 1px 2px #0000000d}.zhk-selection__func-btn:hover{background-color:#dbdfe3}.zhk-selection__func-btn:active{box-shadow:none;transform:translateY(1px)}.zhk-candidate{box-sizing:border-box;align-items:center;width:100%;height:100%;display:flex}.zhk-candidate__container{background-color:var(--background-color,#f7f8f9);flex-direction:column;flex:1;width:100%;min-width:0;height:100%;padding:0 8px;display:flex}.zhk-candidate__pinyin{font-size:calc(var(--key-font-size) * .9);color:var(--primary-color,#0076f5);letter-spacing:.5px;box-sizing:border-box;flex:1;align-items:center;padding-left:4px;display:flex}.zhk-candidate__bottom-container{align-items:center;gap:var(--gap);flex:3;width:100%;display:flex}.zhk-candidate__more{cursor:pointer;width:max(36px, var(--keyboard-height) / 8);background:0 0;border:none;align-items:center;display:flex}.zhk-base{height:100%;padding:var(--gap);box-sizing:border-box;flex-direction:column;display:flex}.zhk-base__row{justify-content:center;gap:var(--gap);flex:1;min-height:0;margin-bottom:4px;display:flex}.zhk-base__row:last-child{margin-bottom:0}.zhk-base__key{width:var(--key-width);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);background-color:var(--key-background-color,#fff);min-height:42px;box-shadow:var(--key-shadow,0 1px 2px #0000001a);color:var(--key-text-color,#333);font-size:var(--key-font-size);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;flex:none;justify-content:center;align-items:center;padding:0 5px;transition:all .12s;display:flex}.zhk-base__key:hover{filter:brightness(98%);border-color:#c3c8cf}.zhk-base__key:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#ebebeb;transform:translateY(1px)}.zhk-base__key--function{width:var(--key-width);min-width:var(--key-min-width-function);background-color:var(--function-key-color,#e4e7ea);color:#555;flex:none;font-weight:500}.zhk-base__key--function:active{background-color:#cdd3d8}.zhk-base__key--shift,.zhk-base__key--delete{flex:1;width:auto}.zhk-base__key--space{flex:1;width:auto;min-width:20px}.zhk-base__key--active{background-color:var(--primary-color,#0076f5);border-color:var(--primary-color,#0076f5);color:#fff}.zhk-base__key--active:hover{filter:brightness(110%)}.zhk-base__key--active:active{background-color:#005dc2}.zhk-base__key--active .zhk-base__key-icon{filter:brightness(0)invert()}.zhk-base__key--disabled{background-color:var(--disabled-key-color,#f5f5f5);border-color:var(--disabled-key-border-color,#e0e0e0);color:var(--disabled-key-text-color,#bdbdbd);cursor:not-allowed}.zhk-base__key--disabled .zhk-base__key-icon{filter:brightness(.7)}.zhk-base__key-icon{width:calc(1em * var(--key-icon-scale,1.15));height:calc(1em * var(--key-icon-scale,1.15));vertical-align:middle;object-fit:contain;flex-shrink:0;display:inline-block}.zhk-base__toggle-main{font-size:max(14px, var(--keyboard-height) / 30)}.zhk-base__toggle-sub{font-size:max(12px, var(--keyboard-height) / 40);color:var(--toggle-sub-color,#888);margin-left:2px}.num-keyboard{box-sizing:border-box;flex-direction:column;height:100%;padding:8px;display:flex}.num-keyboard__container{gap:8px;height:100%;display:flex}.num-keyboard__left{flex-direction:column;flex:3;display:flex}.num-keyboard__right{flex-direction:column;flex:1;justify-content:space-between;gap:6px;display:flex}.num-keyboard__rows{gap:var(--gap);flex-direction:column;flex:1;display:flex}.num-keyboard__row{gap:var(--gap);flex:1;display:flex}.num-keyboard__key{background-color:var(--key-background-color,#fff);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);box-shadow:var(--key-shadow,0 1px 2px #0000001a);font-size:calc(var(--key-font-size) * 2);color:var(--key-text-color,#333);cursor:pointer;flex:1;justify-content:center;align-items:center;font-weight:500;transition:all .12s;display:flex}.num-keyboard__key:hover{filter:brightness(98%)}.num-keyboard__key:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#ebebeb;transform:translateY(1px)}.num-keyboard__key--function{background-color:var(--function-key-color,#e4e7ea);color:#555;height:calc(25% - 6px);font-weight:500}.num-keyboard__key--function:active{background-color:#cdd3d8}.num-keyboard__key--back{font-size:var(--key-font-size);background-color:var(--function-key-color,#e4e7ea)}.num-keyboard__key--back:active{background-color:#cdd3d8}.num-keyboard__key--space{font-size:var(--key-font-size)}.num-keyboard__key-icon{width:calc(1em * var(--key-icon-scale,1.15));height:calc(1em * var(--key-icon-scale,1.15));object-fit:contain;flex-shrink:0;display:inline-block}.symbol-keyboard{--key-size:max(45px, calc(var(--keyboard-height,300px) / 5));--lang-btn-size:var(--key-size);--gap:max(4px, calc(var(--keyboard-height,300px) / 75));--function-width:var(--key-size);--symbol-min-size:calc(var(--key-size) * .85);box-sizing:border-box;flex-direction:column;height:100%;padding:10px;display:flex}.symbol-keyboard__content{gap:var(--gap);flex:1;height:100%;display:flex}.symbol-keyboard__functions{justify-content:space-between;gap:var(--gap);width:var(--function-width);flex-direction:column;display:flex}.symbol-keyboard__lang-selector{height:calc(var(--lang-btn-size) * 2 + var(--gap));flex-direction:column;display:flex}.symbol-keyboard__lang-btn{background-color:var(--key-background-color,#fff);border:1px solid var(--border-color,#d1d5da);font-size:max(12px, var(--key-font-size,1rem) * .8);cursor:pointer;box-sizing:border-box;width:var(--lang-btn-size);flex:1 0;justify-content:center;align-items:center;margin:0;padding:10px 0;transition:all .12s;display:flex}.symbol-keyboard__lang-btn:first-child{border-radius:var(--key-border-radius,6px) var(--key-border-radius,6px) 0 0}.symbol-keyboard__lang-btn:last-child{border-radius:0 0 var(--key-border-radius,6px) var(--key-border-radius,6px);margin-top:-1px}.symbol-keyboard__lang-btn:hover{filter:brightness(98%)}.symbol-keyboard__lang-btn--active{background-color:var(--primary-color,#0076f5);color:#fff;border-color:var(--primary-color,#0076f5);z-index:1;position:relative}.symbol-keyboard__lang-btn--active:hover{filter:brightness(110%)}.symbol-keyboard__control-group{gap:calc(var(--gap) + 2px);flex-direction:column;display:flex}.symbol-keyboard__symbols-container{flex:1;width:100%;height:100%;padding-right:5px;overflow-y:auto}.symbol-keyboard__symbols-container::-webkit-scrollbar{width:4px}.symbol-keyboard__symbols-container::-webkit-scrollbar-track{background:#0000000d;border-radius:2px}.symbol-keyboard__symbols-container::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}.symbol-keyboard__symbols-container::-webkit-scrollbar-thumb:hover{background:#00000040}.symbol-keyboard__symbols-grid{grid-template-columns:repeat(auto-fit, minmax(var(--symbol-min-size), 1fr));gap:var(--gap);width:100%;max-height:100%;padding-bottom:10px;display:grid}.symbol-keyboard__key{background-color:var(--key-background-color,#fff);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);box-shadow:var(--key-shadow,0 1px 2px #0000001a);font-size:max(18px, var(--key-font-size,1rem));color:var(--key-text-color,#333);cursor:pointer;box-sizing:border-box;min-width:var(--symbol-min-size);max-width:var(--key-size);width:100%;height:var(--key-size);aspect-ratio:1;flex-shrink:0;justify-content:center;align-items:center;margin:0;font-weight:400;transition:all .12s;display:flex}.symbol-keyboard__key:hover{filter:brightness(98%)}.symbol-keyboard__key:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#ebebeb;transform:translateY(1px)}.symbol-keyboard__key--function{background-color:var(--function-key-color,#e4e7ea);width:var(--function-width);height:var(--key-size);aspect-ratio:auto;color:#555;font-weight:500}.symbol-keyboard__key--function:active{background-color:#cdd3d8}.symbol-keyboard__key--lock{justify-content:center;align-items:center;padding:10px 0;font-size:18px;font-weight:700;display:flex}.symbol-keyboard__key--lock img{width:24px;height:24px}.symbol-keyboard__key--locked{background-color:var(--primary-color,#0076f5);color:#fff;border-color:var(--primary-color,#0076f5)}.symbol-keyboard__key--locked:hover{filter:brightness(110%)}.symbol-keyboard__key--locked:active{background-color:#005dc2}.symbol-keyboard__key--back{padding:10px 0;font-size:18px;font-weight:700;display:flex}.zhk{--key-font-size:max(1rem, calc(var(--keyboard-height) / 20));--candidate-font-size:max(24px, calc(var(--keyboard-height) / 12));--gap:clamp(4px, calc(var(--keyboard-height) / 75), 6px);--key-width:calc((100% - 9 * var(--gap)) / 10);--key-min-width-function:45px;--key-icon-size:calc(var(--key-font-size) * 1.2);--key-shadow:0 1px 2px #0000001a;--key-active-shadow:0 0px 1px #0000000d;-webkit-user-select:none;user-select:none;background-color:#f7f8f9;border-radius:12px;width:400px;max-width:1080px;height:300px;min-height:300px;font-family:PingFang SC,Microsoft YaHei,-apple-system,sans-serif;position:relative;overflow:hidden;box-shadow:0 8px 30px #0000001a}.zhk--disabled{opacity:.7}.zhk--floating{z-index:9999;position:fixed;box-shadow:0 4px 20px #0003}.zhk--bottom{width:100%;min-width:min(var(--keyboard-height) + 100px, 100%);z-index:9999;border-radius:12px 12px 0 0;max-width:100%;position:fixed;bottom:0;left:0;box-shadow:0 -2px 10px #0000001a}.zhk__disabled-overlay{z-index:10;background-color:#f5f5f5cc;border-radius:12px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.zhk__disabled-overlay span{color:#666;background-color:#e0e0e0;border-radius:5px;padding:15px 30px;font-size:16px}
1
+ .zhk-candidate-list{gap:var(--gap);scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;flex:1;min-width:0;display:flex;overflow-x:auto}.zhk-candidate-list::-webkit-scrollbar{display:none}.zhk-candidate-list__item{font-size:var(--candidate-font-size);min-width:var(--candidate-font-size);padding:0 calc(var(--candidate-font-size) * .35);color:var(--key-text-color,#333);cursor:pointer;white-space:nowrap;background-color:#0000;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;transition:all .1s;display:flex}.zhk-candidate-list__item:first-child{color:var(--primary-color,#0076f5);font-weight:500}.zhk-candidate-list__item:hover{background-color:#0000000d}.handwriting-input{background:var(--background-color,#f5f5f5);height:100%;padding:var(--gap);gap:var(--gap);box-sizing:border-box;flex-direction:column;display:flex}.handwriting-input .handwriting-content{justify-content:center;align-items:flex-start;gap:var(--gap);flex-flow:row;flex:7;display:flex;overflow:hidden}.handwriting-input .handwriting-canvas-container{background:#fff;flex:4;justify-content:center;align-items:center;height:100%;font-size:0;display:flex}.handwriting-input .handwriting-canvas-container .handwriting-loading{width:100%;height:100%;padding:calc(var(--gap) * 2);box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;display:flex}.handwriting-input .handwriting-canvas-container .handwriting-loading .loading-text{color:var(--text-color,#333);margin-bottom:calc(var(--gap) * 2);text-align:center;font-size:16px}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-bar{background-color:var(--border-color,#dcdcdc);width:80%;height:8px;margin-bottom:var(--gap);border-radius:4px;overflow:hidden}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-bar .progress-fill{background-color:var(--primary-color,#007bff);border-radius:4px;height:100%;transition:width .3s}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-text{color:var(--text-color,#666);font-size:14px;font-weight:500}.handwriting-input .handwriting-canvas{touch-action:none;width:100%;height:100%;display:block}.handwriting-input .handwriting-buttons{justify-content:space-between;gap:var(--gap);max-width:calc(var(--keyboard-height) / 4);flex-direction:column;flex:1;height:100%;display:flex}.handwriting-input .handwriting-btn{padding:var(--gap);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);background-color:var(--function-key-color,#e4e7ea);box-shadow:var(--key-shadow,0 1px 2px #0000001a);cursor:pointer;white-space:nowrap;width:100%;font-size:var(--key-font-size);color:#555;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;flex:1;justify-content:center;align-items:center;font-weight:500;transition:all .12s;display:flex}.handwriting-input .handwriting-btn:hover{filter:brightness(98%)}.handwriting-input .handwriting-btn:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#cdd3d8;transform:translateY(1px)}.handwriting-input .handwriting-btn--function img{width:calc(1em * var(--key-icon-scale,1.15));height:calc(1em * var(--key-icon-scale,1.15));object-fit:contain;flex-shrink:0}.zhk-selection{z-index:2;width:100%;height:100%;padding:var(--gap);justify-content:center;align-items:flex-start;gap:var(--gap);box-sizing:border-box;background:#f5f5f5;flex-wrap:nowrap;display:flex;position:absolute;top:0;left:0}.zhk-selection__list{grid-template-columns:repeat(auto-fit, minmax(calc(var(--keyboard-height) / 7), 1fr));background-color:var(--key-background-color,#fff);border-radius:8px;flex:5;min-width:0;max-height:100%;display:grid;overflow:hidden auto;box-shadow:0 1px 4px #0000000d}.zhk-selection__list::-webkit-scrollbar{width:4px}.zhk-selection__list::-webkit-scrollbar-thumb{background-color:var(--border-color,#d1d5da);border-radius:2px}.zhk-selection__list::-webkit-scrollbar-track{background-color:#0000}.zhk-selection__text{font-size:var(--candidate-font-size);border-bottom:1px solid var(--border-color,#f0f0f0);border-right:1px solid var(--border-color,#f0f0f0);color:var(--key-text-color,#333);cursor:pointer;justify-content:center;align-items:center;padding:12px 8px;transition:background-color .12s;display:inline-flex}.zhk-selection__text:hover{color:var(--primary-color,#0076f5);z-index:1;background-color:#f5f8ff}.zhk-selection__text--span-2{grid-column:span 2}.zhk-selection__text--span-3{grid-column:span 3}.zhk-selection__func{flex:1;justify-content:flex-end;display:flex}.zhk-selection__func-btn{width:100%;font-size:var(--key-font-size);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);background-color:var(--function-key-color,#e4e7ea);cursor:pointer;color:#555;white-space:nowrap;padding:12px 0;font-weight:500;transition:all .12s;box-shadow:0 1px 2px #0000000d}.zhk-selection__func-btn:hover{background-color:#dbdfe3}.zhk-selection__func-btn:active{box-shadow:none;transform:translateY(1px)}.zhk-candidate{box-sizing:border-box;align-items:center;width:100%;height:100%;display:flex}.zhk-candidate__container{background-color:var(--background-color,#f7f8f9);flex-direction:column;flex:1;width:100%;min-width:0;height:100%;padding:0 8px;display:flex}.zhk-candidate__container--loading{justify-content:center;align-items:center}.zhk-candidate__loading-text{font-size:calc(var(--key-font-size) * .8);color:var(--text-color-secondary,#999)}.zhk-candidate__pinyin{font-size:calc(var(--key-font-size) * .9);color:var(--primary-color,#0076f5);letter-spacing:.5px;box-sizing:border-box;flex:1;align-items:center;padding-left:4px;display:flex}.zhk-candidate__bottom-container{align-items:center;gap:var(--gap);flex:3;width:100%;display:flex}.zhk-candidate__more{cursor:pointer;width:max(36px, var(--keyboard-height) / 8);background:0 0;border:none;align-items:center;display:flex}.zhk-base{height:100%;padding:var(--gap);box-sizing:border-box;flex-direction:column;display:flex}.zhk-base__row{justify-content:center;gap:var(--gap);flex:1;min-height:0;margin-bottom:4px;display:flex}.zhk-base__row:last-child{margin-bottom:0}.zhk-base__key{width:var(--key-width);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);background-color:var(--key-background-color,#fff);min-height:42px;box-shadow:var(--key-shadow,0 1px 2px #0000001a);color:var(--key-text-color,#333);font-size:var(--key-font-size);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;flex:none;justify-content:center;align-items:center;padding:0 5px;transition:all .12s;display:flex}.zhk-base__key:hover{filter:brightness(98%);border-color:#c3c8cf}.zhk-base__key:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#ebebeb;transform:translateY(1px)}.zhk-base__key--function{width:var(--key-width);min-width:var(--key-min-width-function);background-color:var(--function-key-color,#e4e7ea);color:#555;flex:none;font-weight:500}.zhk-base__key--function:active{background-color:#cdd3d8}.zhk-base__key--shift,.zhk-base__key--delete{flex:1;width:auto}.zhk-base__key--space{flex:1;width:auto;min-width:20px}.zhk-base__key--active{background-color:var(--primary-color,#0076f5);border-color:var(--primary-color,#0076f5);color:#fff}.zhk-base__key--active:hover{filter:brightness(110%)}.zhk-base__key--active:active{background-color:#005dc2}.zhk-base__key--active .zhk-base__key-icon{filter:brightness(0)invert()}.zhk-base__key--disabled{background-color:var(--disabled-key-color,#f5f5f5);border-color:var(--disabled-key-border-color,#e0e0e0);color:var(--disabled-key-text-color,#bdbdbd);cursor:not-allowed}.zhk-base__key--disabled .zhk-base__key-icon{filter:brightness(.7)}.zhk-base__key-icon{width:calc(1em * var(--key-icon-scale,1.15));height:calc(1em * var(--key-icon-scale,1.15));vertical-align:middle;object-fit:contain;flex-shrink:0;display:inline-block}.zhk-base__toggle-main{font-size:max(14px, var(--keyboard-height) / 30)}.zhk-base__toggle-sub{font-size:max(12px, var(--keyboard-height) / 40);color:var(--toggle-sub-color,#888);margin-left:2px}.num-keyboard{box-sizing:border-box;flex-direction:column;height:100%;padding:8px;display:flex}.num-keyboard__container{gap:8px;height:100%;display:flex}.num-keyboard__left{flex-direction:column;flex:3;display:flex}.num-keyboard__right{flex-direction:column;flex:1;justify-content:space-between;gap:6px;display:flex}.num-keyboard__rows{gap:var(--gap);flex-direction:column;flex:1;display:flex}.num-keyboard__row{gap:var(--gap);flex:1;display:flex}.num-keyboard__key{background-color:var(--key-background-color,#fff);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);box-shadow:var(--key-shadow,0 1px 2px #0000001a);font-size:calc(var(--key-font-size) * 2);color:var(--key-text-color,#333);cursor:pointer;flex:1;justify-content:center;align-items:center;font-weight:500;transition:all .12s;display:flex}.num-keyboard__key:hover{filter:brightness(98%)}.num-keyboard__key:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#ebebeb;transform:translateY(1px)}.num-keyboard__key--function{background-color:var(--function-key-color,#e4e7ea);color:#555;height:calc(25% - 6px);font-weight:500}.num-keyboard__key--function:active{background-color:#cdd3d8}.num-keyboard__key--back{font-size:var(--key-font-size);background-color:var(--function-key-color,#e4e7ea)}.num-keyboard__key--back:active{background-color:#cdd3d8}.num-keyboard__key--space{font-size:var(--key-font-size)}.num-keyboard__key-icon{width:calc(1em * var(--key-icon-scale,1.15));height:calc(1em * var(--key-icon-scale,1.15));object-fit:contain;flex-shrink:0;display:inline-block}.symbol-keyboard{--key-size:max(45px, calc(var(--keyboard-height,300px) / 5));--lang-btn-size:var(--key-size);--gap:max(4px, calc(var(--keyboard-height,300px) / 75));--function-width:var(--key-size);--symbol-min-size:calc(var(--key-size) * .85);box-sizing:border-box;flex-direction:column;height:100%;padding:10px;display:flex}.symbol-keyboard__content{gap:var(--gap);flex:1;height:100%;display:flex}.symbol-keyboard__functions{justify-content:space-between;gap:var(--gap);width:var(--function-width);flex-direction:column;display:flex}.symbol-keyboard__lang-selector{height:calc(var(--lang-btn-size) * 2 + var(--gap));flex-direction:column;display:flex}.symbol-keyboard__lang-btn{background-color:var(--key-background-color,#fff);border:1px solid var(--border-color,#d1d5da);font-size:max(12px, var(--key-font-size,1rem) * .8);cursor:pointer;box-sizing:border-box;width:var(--lang-btn-size);flex:1 0;justify-content:center;align-items:center;margin:0;padding:10px 0;transition:all .12s;display:flex}.symbol-keyboard__lang-btn:first-child{border-radius:var(--key-border-radius,6px) var(--key-border-radius,6px) 0 0}.symbol-keyboard__lang-btn:last-child{border-radius:0 0 var(--key-border-radius,6px) var(--key-border-radius,6px);margin-top:-1px}.symbol-keyboard__lang-btn:hover{filter:brightness(98%)}.symbol-keyboard__lang-btn--active{background-color:var(--primary-color,#0076f5);color:#fff;border-color:var(--primary-color,#0076f5);z-index:1;position:relative}.symbol-keyboard__lang-btn--active:hover{filter:brightness(110%)}.symbol-keyboard__control-group{gap:calc(var(--gap) + 2px);flex-direction:column;display:flex}.symbol-keyboard__symbols-container{flex:1;width:100%;height:100%;padding-right:5px;overflow-y:auto}.symbol-keyboard__symbols-container::-webkit-scrollbar{width:4px}.symbol-keyboard__symbols-container::-webkit-scrollbar-track{background:#0000000d;border-radius:2px}.symbol-keyboard__symbols-container::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}.symbol-keyboard__symbols-container::-webkit-scrollbar-thumb:hover{background:#00000040}.symbol-keyboard__symbols-grid{grid-template-columns:repeat(auto-fit, minmax(var(--symbol-min-size), 1fr));gap:var(--gap);width:100%;max-height:100%;padding-bottom:10px;display:grid}.symbol-keyboard__key{background-color:var(--key-background-color,#fff);border:1px solid var(--border-color,#d1d5da);border-radius:var(--key-border-radius,6px);box-shadow:var(--key-shadow,0 1px 2px #0000001a);font-size:max(18px, var(--key-font-size,1rem));color:var(--key-text-color,#333);cursor:pointer;box-sizing:border-box;min-width:var(--symbol-min-size);max-width:var(--key-size);width:100%;height:var(--key-size);aspect-ratio:1;flex-shrink:0;justify-content:center;align-items:center;margin:0;font-weight:400;transition:all .12s;display:flex}.symbol-keyboard__key:hover{filter:brightness(98%)}.symbol-keyboard__key:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#ebebeb;transform:translateY(1px)}.symbol-keyboard__key--function{background-color:var(--function-key-color,#e4e7ea);width:var(--function-width);height:var(--key-size);aspect-ratio:auto;color:#555;font-weight:500}.symbol-keyboard__key--function:active{background-color:#cdd3d8}.symbol-keyboard__key--lock{justify-content:center;align-items:center;padding:10px 0;font-size:18px;font-weight:700;display:flex}.symbol-keyboard__key--lock img{width:24px;height:24px}.symbol-keyboard__key--locked{background-color:var(--primary-color,#0076f5);color:#fff;border-color:var(--primary-color,#0076f5)}.symbol-keyboard__key--locked:hover{filter:brightness(110%)}.symbol-keyboard__key--locked:active{background-color:#005dc2}.symbol-keyboard__key--back{padding:10px 0;font-size:18px;font-weight:700;display:flex}.zhk{--key-font-size:max(1rem, calc(var(--keyboard-height) / 20));--candidate-font-size:max(24px, calc(var(--keyboard-height) / 12));--gap:clamp(4px, calc(var(--keyboard-height) / 75), 6px);--key-width:calc((100% - 9 * var(--gap)) / 10);--key-min-width-function:45px;--key-icon-size:calc(var(--key-font-size) * 1.2);--key-shadow:0 1px 2px #0000001a;--key-active-shadow:0 0px 1px #0000000d;-webkit-user-select:none;user-select:none;background-color:#f7f8f9;border-radius:12px;width:400px;max-width:1080px;height:300px;min-height:300px;font-family:PingFang SC,Microsoft YaHei,-apple-system,sans-serif;position:relative;overflow:hidden;box-shadow:0 8px 30px #0000001a}.zhk--disabled{opacity:.7}.zhk--floating{z-index:9999;position:fixed;box-shadow:0 4px 20px #0003}.zhk--bottom{width:100%;min-width:min(var(--keyboard-height) + 100px, 100%);z-index:9999;border-radius:12px 12px 0 0;max-width:100%;position:fixed;bottom:0;left:0;box-shadow:0 -2px 10px #0000001a}.zhk__disabled-overlay{z-index:10;background-color:#f5f5f5cc;border-radius:12px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.zhk__disabled-overlay span{color:#666;background-color:#e0e0e0;border-radius:5px;padding:15px 30px;font-size:16px}
2
2
  /*$vite$:1*/
package/dist/zh-keyboard-vue.js CHANGED
@@ -442,67 +442,76 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
442
442
  onClick: s
443
443
  }, " 返回 ")])]));
444
444
  }
445
- }), Pe = { class: "zhk-candidate" }, Fe = { class: "zhk-candidate__container" }, Ie = {
445
+ }), Pe = { class: "zhk-candidate" }, Fe = {
446
+ key: 0,
447
+ class: "zhk-candidate__container zhk-candidate__container--loading"
448
+ }, Ie = { class: "zhk-candidate__container" }, Le = {
446
449
  key: 0,
447
450
  class: "zhk-candidate__pinyin"
448
- }, Le = { class: "zhk-candidate__bottom-container" }, Re = /* @__PURE__ */ c({
451
+ }, Re = { class: "zhk-candidate__bottom-container" }, ze = /* @__PURE__ */ c({
449
452
  __name: "CandidateBar",
450
453
  props: {
451
454
  modelValue: { required: !0 },
452
455
  modelModifiers: {}
453
456
  },
454
457
  emits: /* @__PURE__ */ d(["key", "input"], ["update:modelValue"]),
455
- setup(e, { expose: o, emit: s }) {
456
- let c = s, l = E(e, "modelValue"), u = null, d = b(null), f = t(() => d.value?.candidates.map((e) => e.text) ?? []), p = b(!1);
458
+ setup(o, { expose: s, emit: c }) {
459
+ let l = c, u = E(o, "modelValue"), d = null, f = b(!0), p = b(null), m = t(() => p.value?.candidates.map((e) => e.text) ?? []), h = b(!1);
457
460
  g(async () => {
458
- if (u = R(), !u) throw Error("未找到拼音引擎实例，请确保已正确注册引擎");
459
- l.value && (d.value = await u.processInput(l.value));
461
+ if (d = R(), !d) throw Error("未找到拼音引擎实例，请确保已正确注册引擎");
462
+ f.value = !0;
463
+ try {
464
+ await d.whenReady?.();
465
+ } catch (e) {
466
+ console.error("拼音引擎就绪失败:", e);
467
+ }
468
+ f.value = !1, u.value && (p.value = await d.processInput(u.value));
460
469
  }), v(() => {
461
- u?.processInput("").catch(() => {}), u = null;
462
- }), O(l, async (e) => {
463
- let t = u;
464
- if (t) {
470
+ d?.syncData?.(), d?.processInput("").catch(() => {}), d = null;
471
+ }), O(u, async (e) => {
472
+ let t = d;
473
+ if (!(!t || f.value)) {
465
474
  if (e === "") {
466
- t.processInput("").catch(() => {}), d.value = null;
475
+ t.processInput("").catch(() => {}), p.value = null;
467
476
  return;
468
477
  }
469
- d.value = await t.processInput(e);
478
+ p.value = await t.processInput(e);
470
479
  }
471
480
  });
472
- async function m(e) {
473
- if (!u) return;
474
- let t = await u.pickCandidate(e);
475
- d.value = t, t.preeditBody || (c("input", t.committed || ""), l.value = "", d.value = null, p.value = !1);
476
- }
477
- o({ handleSelection: m });
478
- let h = t(() => {
479
- let e = d.value;
481
+ async function _(e) {
482
+ if (!d) return;
483
+ let t = await d.pickCandidate(e);
484
+ p.value = t, t.preeditBody || (l("input", t.committed || ""), u.value = "", p.value = null, h.value = !1);
485
+ }
486
+ s({ handleSelection: _ });
487
+ let x = t(() => {
488
+ let e = p.value;
480
489
  return e ? e.preeditHead + e.preeditBody : "";
481
490
  });
482
- return (e, t) => (y(), i("div", Pe, [a("div", Fe, [h.value ? (y(), i("div", Ie, C(h.value), 1)) : r("", !0), a("div", Le, [f.value.length > 0 ? (y(), n(Z, {
491
+ return (t, o) => (y(), i("div", Pe, [f.value ? (y(), i("div", Fe, o[2] ||= [a("span", { class: "zhk-candidate__loading-text" }, "加载拼音引擎中…", -1)])) : (y(), i(e, { key: 1 }, [a("div", Ie, [x.value ? (y(), i("div", Le, C(x.value), 1)) : r("", !0), a("div", Re, [m.value.length > 0 ? (y(), n(Z, {
483
492
  key: 0,
484
- candidates: f.value,
485
- onSelect: m
486
- }, null, 8, ["candidates"])) : r("", !0), f.value.length > 0 ? (y(), i("button", {
493
+ candidates: m.value,
494
+ onSelect: _
495
+ }, null, 8, ["candidates"])) : r("", !0), m.value.length > 0 ? (y(), i("button", {
487
496
  key: 1,
488
497
  class: "zhk-candidate__more",
489
- onClick: t[0] ||= (e) => p.value = !0
490
- }, t[2] ||= [a("img", {
498
+ onClick: o[0] ||= (e) => h.value = !0
499
+ }, o[3] ||= [a("img", {
491
500
  src: "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'%20/%3e%3c/svg%3e",
492
501
  alt: "更多"
493
- }, null, -1)])) : r("", !0)])]), p.value ? (y(), n(Ne, {
502
+ }, null, -1)])) : r("", !0)])]), h.value ? (y(), n(Ne, {
494
503
  key: 0,
495
- candidates: f.value,
496
- onSelect: m,
497
- onClose: t[1] ||= (e) => p.value = !1
498
- }, null, 8, ["candidates"])) : r("", !0)]));
504
+ candidates: m.value,
505
+ onSelect: _,
506
+ onClose: o[1] ||= (e) => h.value = !1
507
+ }, null, 8, ["candidates"])) : r("", !0)], 64))]));
499
508
  }
500
- }), ze = { class: "zhk-base" }, Be = { class: "zhk-base__row" }, Ve = ["onPointerdown"], He = ["disabled"], Ue = {
509
+ }), Be = { class: "zhk-base" }, Ve = { class: "zhk-base__row" }, He = ["onPointerdown"], Ue = ["disabled"], We = {
501
510
  key: 1,
502
511
  src: Oe,
503
512
  class: "zhk-base__key-icon",
504
513
  alt: "Shift"
505
- }, We = ["onPointerdown"], Ge = { class: "zhk-base__row" }, Ke = { class: "zhk-base__toggle-main" }, qe = { class: "zhk-base__toggle-sub" }, Je = /* @__PURE__ */ c({
514
+ }, Ge = ["onPointerdown"], Ke = { class: "zhk-base__row" }, qe = { class: "zhk-base__toggle-main" }, Je = { class: "zhk-base__toggle-sub" }, Ye = /* @__PURE__ */ c({
506
515
  __name: "KeyboardBase",
507
516
  props: /* @__PURE__ */ d({ enableHandwriting: { type: Boolean } }, {
508
517
  modelValue: { default: "en" },
@@ -603,8 +612,8 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
603
612
  d.value = d.value === "zh" ? "en" : "zh";
604
613
  }
605
614
  let R = t(() => l.enableHandwriting ? "手写" : "-"), z = t(() => !l.enableHandwriting);
606
- return (t, s) => (y(), i("div", ze, [
607
- a("div", Be, [d.value === "zh" ? (y(), n(Re, {
615
+ return (t, s) => (y(), i("div", Be, [
616
+ a("div", Ve, [d.value === "zh" ? (y(), n(ze, {
608
617
  key: 0,
609
618
  ref_key: "candidateBarRef",
610
619
  ref: k,
@@ -619,7 +628,7 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
619
628
  onPointerleave: s[3] ||= (...e) => T(M) && T(M)(...e),
620
629
  onPointercancel: s[4] ||= (...e) => T(M) && T(M)(...e),
621
630
  onContextmenu: s[5] ||= j(() => {}, ["prevent"])
622
- }, C(e), 41, Ve)), 64))]),
631
+ }, C(e), 41, He)), 64))]),
623
632
  (y(), i(e, null, x(D, (t, n) => a("div", {
624
633
  key: `row-${n}`,
625
634
  class: "zhk-base__row"
@@ -633,7 +642,7 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
633
642
  disabled: m.value && z.value,
634
643
  onClick: _,
635
644
  onContextmenu: s[6] ||= j(() => {}, ["prevent"])
636
- }, [m.value ? (y(), i(e, { key: 0 }, [o(C(R.value), 1)], 64)) : (y(), i("img", Ue))], 42, He)) : r("", !0),
645
+ }, [m.value ? (y(), i(e, { key: 0 }, [o(C(R.value), 1)], 64)) : (y(), i("img", We))], 42, Ue)) : r("", !0),
637
646
  (y(!0), i(e, null, x(t, (e, t) => (y(), i("button", {
638
647
  key: `key-${n}-${t}`,
639
648
  class: "zhk-base__key zhk-base__key--letter",
@@ -642,7 +651,7 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
642
651
  onPointerleave: s[8] ||= (...e) => T(M) && T(M)(...e),
643
652
  onPointercancel: s[9] ||= (...e) => T(M) && T(M)(...e),
644
653
  onContextmenu: s[10] ||= j(() => {}, ["prevent"])
645
- }, C(h.value ? e.toUpperCase() : e), 41, We))), 128)),
654
+ }, C(h.value ? e.toUpperCase() : e), 41, Ge))), 128)),
646
655
  n === 2 ? (y(), i("button", {
647
656
  key: 1,
648
657
  class: "zhk-base__key zhk-base__key--function zhk-base__key--delete",
@@ -657,7 +666,7 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
657
666
  alt: "Delete"
658
667
  }, null, -1)], 32)) : r("", !0)
659
668
  ])), 64)),
660
- a("div", Ge, [
669
+ a("div", Ke, [
661
670
  a("button", {
662
671
  class: "zhk-base__key zhk-base__key--function",
663
672
  onClick: S,
@@ -700,7 +709,7 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
700
709
  class: "zhk-base__key zhk-base__key--function",
701
710
  onClick: L,
702
711
  onContextmenu: s[33] ||= j(() => {}, ["prevent"])
703
- }, [a("span", Ke, C(d.value === "zh" ? "中" : "英"), 1), a("span", qe, "/" + C(d.value === "zh" ? "英" : "中"), 1)], 32),
712
+ }, [a("span", qe, C(d.value === "zh" ? "中" : "英"), 1), a("span", Je, "/" + C(d.value === "zh" ? "英" : "中"), 1)], 32),
704
713
  a("button", {
705
714
  class: "zhk-base__key zhk-base__key--function",
706
715
  onPointerdown: s[34] ||= (e) => T(A)(e, () => F()),
@@ -716,12 +725,12 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
716
725
  ])
717
726
  ]));
718
727
  }
719
- }), Ye = { class: "num-keyboard" }, Xe = { class: "num-keyboard__container" }, Ze = { class: "num-keyboard__left" }, Qe = { class: "num-keyboard__rows" }, $e = ["onClick", "onPointerdown"], et = {
728
+ }), Xe = { class: "num-keyboard" }, Ze = { class: "num-keyboard__container" }, Qe = { class: "num-keyboard__left" }, $e = { class: "num-keyboard__rows" }, et = ["onClick", "onPointerdown"], tt = {
720
729
  key: 1,
721
730
  src: ke,
722
731
  class: "zhk-base__key-icon",
723
732
  alt: "Space"
724
- }, tt = { class: "num-keyboard__right" }, nt = ["onPointerdown"], rt = ["src", "alt"], it = { key: 1 }, at = /* @__PURE__ */ c({
733
+ }, nt = { class: "num-keyboard__right" }, rt = ["onPointerdown"], it = ["src", "alt"], at = { key: 1 }, ot = /* @__PURE__ */ c({
725
734
  __name: "NumericKeyboard",
726
735
  props: { keyboardRows: { default: () => L().numKeys || [
727
736
  [
@@ -789,7 +798,7 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
789
798
  function m(e, t) {
790
799
  e === "back" || (e === "space" && (e = " "), e === "delete" || e === "enter" ? d(t, () => l(e)) : d(t, () => c(e)));
791
800
  }
792
- return (t, n) => (y(), i("div", Ye, [a("div", Xe, [a("div", Ze, [a("div", Qe, [(y(!0), i(e, null, x(t.keyboardRows, (t, r) => (y(), i("div", {
801
+ return (t, n) => (y(), i("div", Xe, [a("div", Ze, [a("div", Qe, [a("div", $e, [(y(!0), i(e, null, x(t.keyboardRows, (t, r) => (y(), i("div", {
793
802
  key: `row-${r}`,
794
803
  class: "num-keyboard__row"
795
804
  }, [(y(!0), i(e, null, x(t, (t, a) => (y(), i("button", {
@@ -804,7 +813,7 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
804
813
  onPointerleave: n[1] ||= (...e) => T(f) && T(f)(...e),
805
814
  onPointercancel: n[2] ||= (...e) => T(f) && T(f)(...e),
806
815
  onContextmenu: n[3] ||= j(() => {}, ["prevent"])
807
- }, [t === "back" ? (y(), i(e, { key: 0 }, [o(" 返回 ")], 64)) : t === "space" ? (y(), i("img", et)) : (y(), i(e, { key: 2 }, [o(C(t), 1)], 64))], 42, $e))), 128))]))), 128))])]), a("div", tt, [(y(), i(e, null, x(s, (e, t) => a("button", {
816
+ }, [t === "back" ? (y(), i(e, { key: 0 }, [o(" 返回 ")], 64)) : t === "space" ? (y(), i("img", tt)) : (y(), i(e, { key: 2 }, [o(C(t), 1)], 64))], 42, et))), 128))]))), 128))])]), a("div", nt, [(y(), i(e, null, x(s, (e, t) => a("button", {
808
817
  key: `func-${t}`,
809
818
  class: "num-keyboard__key num-keyboard__key--function",
810
819
  onPointerdown: (t) => m(e.key, t),
@@ -817,13 +826,13 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
817
826
  src: e.icon,
818
827
  class: "num-keyboard__key-icon",
819
828
  alt: e.alt
820
- }, null, 8, rt)) : (y(), i("span", it, C(e.text), 1))], 40, nt)), 64))])])]));
829
+ }, null, 8, it)) : (y(), i("span", at, C(e.text), 1))], 40, rt)), 64))])])]));
821
830
  }
822
- }), ot = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M18,20V10H6V20H18M18,8A2,2%200%200,1%2020,10V20A2,2%200%200,1%2018,22H6C4.89,22%204,21.1%204,20V10A2,2%200%200,1%206,8H15V6A3,3%200%200,0%2012,3A3,3%200%200,0%209,6H7A5,5%200%200,1%2012,1A5,5%200%200,1%2017,6V8H18M12,17A2,2%200%200,1%2010,15A2,2%200%200,1%2012,13A2,2%200%200,1%2014,15A2,2%200%200,1%2012,17Z'%20/%3e%3c/svg%3e", st = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M12,17C10.89,17%2010,16.1%2010,15C10,13.89%2010.89,13%2012,13A2,2%200%200,1%2014,15A2,2%200%200,1%2012,17M18,20V10H6V20H18M18,8A2,2%200%200,1%2020,10V20A2,2%200%200,1%2018,22H6C4.89,22%204,21.1%204,20V10C4,8.89%204.89,8%206,8H7V6A5,5%200%200,1%2012,1A5,5%200%200,1%2017,6V8H18M12,3A3,3%200%200,0%209,6V8H15V6A3,3%200%200,0%2012,3Z'%20/%3e%3c/svg%3e", ct = { class: "symbol-keyboard" }, lt = { class: "symbol-keyboard__content" }, ut = { class: "symbol-keyboard__functions" }, dt = { class: "symbol-keyboard__lang-selector" }, ft = { class: "symbol-keyboard__control-group" }, pt = ["src"], Q = ["src"], mt = { class: "symbol-keyboard__symbols-container" }, ht = { class: "symbol-keyboard__symbols-grid" }, gt = ["onClick", "onPointerdown"], _t = "!@#$%^&*(){}[]<>/\\|:;\"',.?+-=_~`€£¥₹©®™°", vt = "！＠＃￥％…＆＊（）｛｝［］＜＞／＼｜：；＂＇，。？＋－＝＿～·€£¥₹©®™°", yt = /* @__PURE__ */ c({
831
+ }), st = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M18,20V10H6V20H18M18,8A2,2%200%200,1%2020,10V20A2,2%200%200,1%2018,22H6C4.89,22%204,21.1%204,20V10A2,2%200%200,1%206,8H15V6A3,3%200%200,0%2012,3A3,3%200%200,0%209,6H7A5,5%200%200,1%2012,1A5,5%200%200,1%2017,6V8H18M12,17A2,2%200%200,1%2010,15A2,2%200%200,1%2012,13A2,2%200%200,1%2014,15A2,2%200%200,1%2012,17Z'%20/%3e%3c/svg%3e", ct = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M12,17C10.89,17%2010,16.1%2010,15C10,13.89%2010.89,13%2012,13A2,2%200%200,1%2014,15A2,2%200%200,1%2012,17M18,20V10H6V20H18M18,8A2,2%200%200,1%2020,10V20A2,2%200%200,1%2018,22H6C4.89,22%204,21.1%204,20V10C4,8.89%204.89,8%206,8H7V6A5,5%200%200,1%2012,1A5,5%200%200,1%2017,6V8H18M12,3A3,3%200%200,0%209,6V8H15V6A3,3%200%200,0%2012,3Z'%20/%3e%3c/svg%3e", lt = { class: "symbol-keyboard" }, ut = { class: "symbol-keyboard__content" }, dt = { class: "symbol-keyboard__functions" }, ft = { class: "symbol-keyboard__lang-selector" }, pt = { class: "symbol-keyboard__control-group" }, Q = ["src"], mt = ["src"], ht = { class: "symbol-keyboard__symbols-container" }, gt = { class: "symbol-keyboard__symbols-grid" }, _t = ["onClick", "onPointerdown"], vt = "!@#$%^&*(){}[]<>/\\|:;\"',.?+-=_~`€£¥₹©®™°", yt = "！＠＃￥％…＆＊（）｛｝［］＜＞／＼｜：；＂＇，。？＋－＝＿～·€£¥₹©®™°", bt = /* @__PURE__ */ c({
823
832
  __name: "SymbolKeyboard",
824
833
  emits: ["key", "exit"],
825
834
  setup(n, { emit: r }) {
826
- let o = r, s = b("en"), c = t(() => s.value === "zh" ? vt : _t), l = b(!1), { startRepeat: u, stopRepeat: d } = X();
835
+ let o = r, s = b("en"), c = t(() => s.value === "zh" ? yt : vt), l = b(!1), { startRepeat: u, stopRepeat: d } = X();
827
836
  function f(e, t) {
828
837
  l.value && u(t, () => m(e));
829
838
  }
@@ -839,7 +848,7 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
839
848
  function _() {
840
849
  l.value = !l.value;
841
850
  }
842
- return (t, n) => (y(), i("div", ct, [a("div", lt, [a("div", ut, [a("div", dt, [a("button", {
851
+ return (t, n) => (y(), i("div", lt, [a("div", ut, [a("div", dt, [a("div", ft, [a("button", {
843
852
  class: p(["symbol-keyboard__lang-btn", { "symbol-keyboard__lang-btn--active": s.value === "zh" }]),
844
853
  onClick: n[0] ||= (e) => g("zh"),
845
854
  onContextmenu: n[1] ||= j(() => {}, ["prevent"])
@@ -847,23 +856,23 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
847
856
  class: p(["symbol-keyboard__lang-btn", { "symbol-keyboard__lang-btn--active": s.value === "en" }]),
848
857
  onClick: n[2] ||= (e) => g("en"),
849
858
  onContextmenu: n[3] ||= j(() => {}, ["prevent"])
850
- }, " 英文 ", 34)]), a("div", ft, [a("button", {
859
+ }, " 英文 ", 34)]), a("div", pt, [a("button", {
851
860
  class: p(["symbol-keyboard__key symbol-keyboard__key--function symbol-keyboard__key--lock", { "symbol-keyboard__key--locked": l.value }]),
852
861
  onClick: _,
853
862
  onContextmenu: n[4] ||= j(() => {}, ["prevent"])
854
863
  }, [l.value ? (y(), i("img", {
855
864
  key: 1,
856
- src: T(st),
865
+ src: T(ct),
857
866
  alt: "Lock closed"
858
- }, null, 8, Q)) : (y(), i("img", {
867
+ }, null, 8, mt)) : (y(), i("img", {
859
868
  key: 0,
860
- src: T(ot),
869
+ src: T(st),
861
870
  alt: "Lock open"
862
- }, null, 8, pt))], 34), a("button", {
871
+ }, null, 8, Q))], 34), a("button", {
863
872
  class: "symbol-keyboard__key symbol-keyboard__key--function symbol-keyboard__key--back",
864
873
  onClick: h,
865
874
  onContextmenu: n[5] ||= j(() => {}, ["prevent"])
866
- }, " 返回 ", 32)])]), a("div", mt, [a("div", ht, [(y(!0), i(e, null, x(c.value, (e, t) => (y(), i("button", {
875
+ }, " 返回 ", 32)])]), a("div", ht, [a("div", gt, [(y(!0), i(e, null, x(c.value, (e, t) => (y(), i("button", {
867
876
  key: `key-${t}`,
868
877
  class: "symbol-keyboard__key",
869
878
  onClick: (t) => !l.value && m(e),
@@ -872,9 +881,9 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
872
881
  onPointerleave: n[7] ||= (...e) => T(d) && T(d)(...e),
873
882
  onPointercancel: n[8] ||= (...e) => T(d) && T(d)(...e),
874
883
  onContextmenu: n[9] ||= j(() => {}, ["prevent"])
875
- }, C(e), 41, gt))), 128))])])])]));
884
+ }, C(e), 41, _t))), 128))])])])]));
876
885
  }
877
- }), bt = {
886
+ }), xt = {
878
887
  key: 0,
879
888
  class: "zhk__disabled-overlay"
880
889
  }, $ = /* @__PURE__ */ c({
@@ -900,7 +909,11 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
900
909
  type: Boolean,
901
910
  default: () => L().disableWhenNoFocus ?? !0
902
911
  },
903
- numKeys: { type: Array || void 0 }
912
+ numKeys: { type: Array || void 0 },
913
+ requireInputmode: {
914
+ type: Boolean,
915
+ default: () => L().requireInputmode ?? !1
916
+ }
904
917
  },
905
918
  emits: ["key"],
906
919
  setup(o, { emit: s }) {
@@ -908,7 +921,7 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
908
921
  O(u, (e, t) => {
909
922
  e !== t && (d.value = t);
910
923
  });
911
- let S = fe(), C = t(() => S.value && z(S.value) ? S.value : null), w = t(() => c.position === "static" || !!(S.value && z(S.value))), { height: E } = Y(_);
924
+ let S = fe(), C = t(() => S.value && z(S.value) ? S.value : null), w = t(() => c.position === "static" ? !0 : !(!S.value || !z(S.value) || c.requireInputmode && !S.value.dataset.inputmode)), { height: E } = Y(_);
912
925
  k(() => {
913
926
  if (C.value) {
914
927
  let e = C.value.dataset.inputmode;
@@ -959,23 +972,23 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
959
972
  ...g.value
960
973
  }),
961
974
  onMousedown: s[1] ||= j(() => {}, ["prevent"])
962
- }, [M.value || !w.value || !T(E) ? (y(), i("div", bt, s[2] ||= [a("span", null, "请选择输入框以启用键盘", -1)])) : (y(), i(e, { key: 1 }, [u.value === "hand" ? (y(), n(De, {
975
+ }, [M.value || !w.value || !T(E) ? (y(), i("div", xt, s[2] ||= [a("span", null, "请选择输入框以启用键盘", -1)])) : (y(), i(e, { key: 1 }, [u.value === "hand" ? (y(), n(De, {
963
976
  key: 0,
964
977
  "recognizer-initialized": T(v),
965
978
  "recognizer-progress": T(x),
966
979
  onKey: L,
967
980
  onExit: B,
968
981
  onRecognize: V
969
- }, null, 8, ["recognizer-initialized", "recognizer-progress"])) : u.value === "num" ? (y(), n(at, {
982
+ }, null, 8, ["recognizer-initialized", "recognizer-progress"])) : u.value === "num" ? (y(), n(ot, {
970
983
  key: 1,
971
984
  "keyboard-rows": o.numKeys,
972
985
  onKey: L,
973
986
  onExit: B
974
- }, null, 8, ["keyboard-rows"])) : u.value === "symbol" ? (y(), n(yt, {
987
+ }, null, 8, ["keyboard-rows"])) : u.value === "symbol" ? (y(), n(bt, {
975
988
  key: 2,
976
989
  onKey: L,
977
990
  onExit: B
978
- })) : u.value === "en" || u.value === "en_cap" || u.value === "zh" ? (y(), n(Je, {
991
+ })) : u.value === "en" || u.value === "en_cap" || u.value === "zh" ? (y(), n(Ye, {
979
992
  key: 3,
980
993
  modelValue: u.value,
981
994
  "onUpdate:modelValue": s[0] ||= (e) => u.value = e,
@@ -983,10 +996,10 @@ var _e = { class: "zhk-candidate-list" }, ve = ["onClick"], Z = /* @__PURE__ */
983
996
  onKey: L
984
997
  }, null, 8, ["modelValue", "enable-handwriting"])) : r("", !0)], 64))], 38)), [[D, w.value]]);
985
998
  }
986
- }), xt = { install: (e) => {
999
+ }), St = { install: (e) => {
987
1000
  e.component("ZhKeyboard", $);
988
1001
  } };
989
1002
  //#endregion
990
- export { $ as ZhKeyboard, xt as default };
1003
+ export { $ as ZhKeyboard, St as default };
991
1004
 
992
1005
  //# sourceMappingURL=zh-keyboard-vue.js.map