@zh-keyboard/vue 1.0.0 → 1.1.1

package/dist/components/HandwritingInput.vue.d.ts

@@ -9,7 +9,6 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    containerRef: HTMLDivElement;
     canvasRef: HTMLCanvasElement;
 }, HTMLDivElement>;
 export default _default;

package/dist/components/ZhKeyboard.vue.d.ts

@@ -1,38 +1,105 @@
 import { KeyBoardMode, KeyEvent } from '../types';
-type __VLS_Props = {
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     /**
      * 默认的键盘模式
      */
-    defaultMode?: KeyBoardMode;
+    defaultMode: {
+        type: () => KeyBoardMode;
+        default: () => "symbol" | "zh" | "en" | "hand" | "num";
+    };
     /**
      * 是否启用手写输入
      */
-    enableHandwriting?: boolean;
+    enableHandwriting: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
     /**
      * 键盘定位模式
      * @default 'static'
      */
-    position?: 'static' | 'float' | 'bottom';
+    position: {
+        type: () => "static" | "float" | "bottom";
+        default: () => "static" | "float" | "bottom";
+    };
+    /**
+     * 浮动模式下键盘与输入框的距离
+     * @default 10
+     */
+    floatMarginTop: {
+        type: NumberConstructor;
+        default: () => number;
+    };
     /**
      * 当没有input获得焦点时是否禁用键盘
      * @default true
      */
-    disableWhenNoFocus?: boolean;
+    disableWhenNoFocus: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
     /**
      * 数字键盘的行配置
      */
-    numKeys?: string[][];
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    numKeys: {
+        type: () => string[][];
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     key: (payload: KeyEvent) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * 默认的键盘模式
+     */
+    defaultMode: {
+        type: () => KeyBoardMode;
+        default: () => "symbol" | "zh" | "en" | "hand" | "num";
+    };
+    /**
+     * 是否启用手写输入
+     */
+    enableHandwriting: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    /**
+     * 键盘定位模式
+     * @default 'static'
+     */
+    position: {
+        type: () => "static" | "float" | "bottom";
+        default: () => "static" | "float" | "bottom";
+    };
+    /**
+     * 浮动模式下键盘与输入框的距离
+     * @default 10
+     */
+    floatMarginTop: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    /**
+     * 当没有input获得焦点时是否禁用键盘
+     * @default true
+     */
+    disableWhenNoFocus: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    /**
+     * 数字键盘的行配置
+     */
+    numKeys: {
+        type: () => string[][];
+    };
+}>> & Readonly<{
     onKey?: ((payload: KeyEvent) => any) | undefined;
 }>, {
     enableHandwriting: boolean;
     defaultMode: KeyBoardMode;
     position: "static" | "float" | "bottom";
+    floatMarginTop: number;
     disableWhenNoFocus: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     keyboardRef: HTMLDivElement;
 }, HTMLDivElement>;
 export default _default;

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";.zhk-candidate-list{flex:1;min-width:0;display:flex;overflow-x:auto;gap:var(--gap);scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.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);display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--key-text-color, #333333);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .1s ease;border-radius:4px}.zhk-candidate-list__item:first-child{color:var(--primary-color, #0076f5);font-weight:500}.zhk-candidate-list__item:hover{background-color:#0000000d}.handwriting-input{display:flex;flex-direction:column;height:100%;background:var(--background-color, #f5f5f5);padding:var(--gap);gap:var(--gap);box-sizing:border-box}.handwriting-input .handwriting-content{flex:7;display:flex;flex-direction:row;align-items:flex-start;justify-content:center;flex-wrap:nowrap;overflow:hidden;gap:var(--gap)}.handwriting-input .handwriting-canvas-container{background:#fff;font-size:0}.handwriting-input .handwriting-canvas-container .handwriting-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:calc(var(--gap) * 2);box-sizing:border-box}.handwriting-input .handwriting-canvas-container .handwriting-loading .loading-text{font-size:16px;color:var(--text-color, #333);margin-bottom:calc(var(--gap) * 2);text-align:center}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-bar{width:80%;height:8px;background-color:var(--border-color, #dcdcdc);border-radius:4px;overflow:hidden;margin-bottom:var(--gap)}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-bar .progress-fill{height:100%;background-color:var(--primary-color, #007bff);border-radius:4px;transition:width .3s ease}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-text{font-size:14px;color:var(--text-color, #666);font-weight:500}.handwriting-input .handwriting-canvas{touch-action:none}.handwriting-input .handwriting-buttons{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:var(--gap);max-width:calc(var(--keyboard-height) / 4);height:100%}.handwriting-input .handwriting-btn{flex:1;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 rgba(0, 0, 0, .1));cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:var(--key-font-size);font-weight:500;color:#555;transition:all .12s ease;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.handwriting-input .handwriting-btn:hover{filter:brightness(98%)}.handwriting-input .handwriting-btn:active{background-color:#cdd3d8;transform:translateY(1px);box-shadow:var(--key-active-shadow, 0 0px 1px rgba(0, 0, 0, .05))}.handwriting-input .handwriting-btn--function img{width:var(--key-icon-size);height:var(--key-icon-size)}.zhk-selection{position:absolute;top:0;left:0;width:100%;height:100%;background:#f5f5f5;z-index:2;display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:center;padding:var(--gap);gap:var(--gap);box-sizing:border-box}.zhk-selection__list{flex:5;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--keyboard-height) / 7),1fr));background-color:var(--key-background-color, #ffffff);border-radius:8px;box-shadow:0 1px 4px #0000000d;max-height:100%;overflow-y:auto;overflow-x:hidden}.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:transparent}.zhk-selection__text{font-size:var(--candidate-font-size);padding:12px 8px;display:inline-flex;justify-content:center;align-items:center;border-bottom:1px solid var(--border-color, #f0f0f0);border-right:1px solid var(--border-color, #f0f0f0);color:var(--key-text-color, #333333);cursor:pointer;transition:background-color .12s ease}.zhk-selection__text:hover{background-color:#f5f8ff;color:var(--primary-color, #0076f5);z-index:1}.zhk-selection__text--span-2{grid-column:span 2}.zhk-selection__text--span-3{grid-column:span 3}.zhk-selection__func{flex:1;display:flex;justify-content:flex-end}.zhk-selection__func-btn{width:100%;font-size:var(--key-font-size);font-weight:500;border:1px solid var(--border-color, #d1d5da);border-radius:var(--key-border-radius, 6px);background-color:var(--function-key-color, #e4e7ea);padding:12px 0;cursor:pointer;color:#555;transition:all .12s ease;white-space:nowrap;box-shadow:0 1px 2px #0000000d}.zhk-selection__func-btn:hover{background-color:#dbdfe3}.zhk-selection__func-btn:active{transform:translateY(1px);box-shadow:none}.zhk-candidate{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box}.zhk-candidate__container{display:flex;flex-direction:column;flex:1;min-width:0;width:100%;height:100%;background-color:var(--background-color, #f7f8f9);padding:0 8px}.zhk-candidate__pinyin{flex:1;font-size:calc(var(--key-font-size) * .9);color:var(--primary-color, #0076f5);display:flex;align-items:center;padding-left:4px;letter-spacing:.5px;box-sizing:border-box}.zhk-candidate__bottom-container{flex:3;display:flex;align-items:center;gap:var(--gap);width:100%}.zhk-candidate__more{cursor:pointer;display:flex;align-items:center;width:max(36px,var(--keyboard-height) / 8);background:none;border:none}.zhk-base{height:100%;display:flex;flex-direction:column;padding:var(--gap);box-sizing:border-box}.zhk-base__row{flex:1;min-height:0;display:flex;justify-content:center;gap:var(--gap);margin-bottom:4px}.zhk-base__row:last-child{margin-bottom:0}.zhk-base__key{width:var(--key-width);flex:none;min-height:42px;border:1px solid var(--border-color, #d1d5da);border-radius:var(--key-border-radius, 6px);background-color:var(--key-background-color, #fff);box-shadow:var(--key-shadow, 0 1px 2px rgba(0, 0, 0, .1));color:var(--key-text-color, #333);font-size:var(--key-font-size);cursor:pointer;transition:all .12s ease;padding:0 5px;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.zhk-base__key:hover{filter:brightness(98%);border-color:#c3c8cf}.zhk-base__key:active{background-color:#ebebeb;box-shadow:var(--key-active-shadow, 0 0px 1px rgba(0, 0, 0, .05));transform:translateY(1px)}.zhk-base__key--function{flex:none;width:var(--key-width);min-width:var(--key-min-width-function);background-color:var(--function-key-color, #e4e7ea);font-weight:500;color:#555}.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(1)}.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:var(--key-icon-size);height:var(--key-icon-size);vertical-align:middle;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{height:100%;display:flex;flex-direction:column;padding:8px;box-sizing:border-box}.num-keyboard__container{display:flex;height:100%;gap:8px}.num-keyboard__left{flex:3;display:flex;flex-direction:column}.num-keyboard__right{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:6px}.num-keyboard__rows{display:flex;flex-direction:column;flex:1;gap:var(--gap)}.num-keyboard__row{display:flex;flex:1;gap:var(--gap)}.num-keyboard__key{flex:1;display:flex;align-items:center;justify-content:center;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 rgba(0, 0, 0, .1));font-size:var(--key-font-size);font-weight:500;color:var(--key-text-color, #333);cursor:pointer;transition:all .12s ease}.num-keyboard__key:hover{filter:brightness(98%)}.num-keyboard__key:active{background-color:#ebebeb;box-shadow:var(--key-active-shadow, 0 0px 1px rgba(0, 0, 0, .05));transform:translateY(1px)}.num-keyboard__key--function{height:calc(25% - 6px);background-color:var(--function-key-color, #e4e7ea);font-size:var(--key-font-size);font-weight:500;color:#555}.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:var(--key-icon-size);height:var(--key-icon-size)}.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);height:100%;display:flex;flex-direction:column;padding:10px;box-sizing:border-box}.symbol-keyboard__content{display:flex;flex:1;gap:var(--gap);height:100%}.symbol-keyboard__functions{display:flex;flex-direction:column;justify-content:space-between;gap:var(--gap);width:var(--function-width)}.symbol-keyboard__lang-selector{display:flex;flex-direction:column;height:calc(var(--lang-btn-size) * 2 + var(--gap))}.symbol-keyboard__lang-btn{padding:10px 0;display:flex;align-items:center;justify-content:center;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;transition:all .12s ease;margin:0;box-sizing:border-box;width:var(--lang-btn-size);flex:1;flex-shrink:0}.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{margin-top:-1px;border-radius:0 0 var(--key-border-radius, 6px) var(--key-border-radius, 6px)}.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);position:relative;z-index:1}.symbol-keyboard__lang-btn--active:hover{filter:brightness(110%)}.symbol-keyboard__control-group{display:flex;flex-direction:column;gap:calc(var(--gap) + 2px)}.symbol-keyboard__symbols-container{flex:1;width:100%;height:100%;overflow-y:auto;padding-right:5px}.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{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--symbol-min-size),1fr));gap:var(--gap);width:100%;max-height:100%;padding-bottom:10px}.symbol-keyboard__key{display:flex;align-items:center;justify-content:center;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 rgba(0, 0, 0, .1));font-size:max(18px,var(--key-font-size, 1rem));font-weight:400;color:var(--key-text-color, #333);cursor:pointer;transition:all .12s ease;margin:0;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}.symbol-keyboard__key:hover{filter:brightness(98%)}.symbol-keyboard__key:active{background-color:#ebebeb;box-shadow:var(--key-active-shadow, 0 0px 1px rgba(0, 0, 0, .05));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;font-weight:500;color:#555}.symbol-keyboard__key--function:active{background-color:#cdd3d8}.symbol-keyboard__key--lock{padding:10px 0;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center}.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: max(4px, calc(var(--keyboard-height) / 75));--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 rgba(0, 0, 0, .1);--key-active-shadow: 0 0px 1px rgba(0, 0, 0, .05);position:relative;width:400px;min-width:calc(var(--keyboard-height) + 100px);max-width:1080px;height:300px;min-height:300px;overflow:hidden;background-color:#f7f8f9;border-radius:12px;box-shadow:0 8px 30px #0000001a;font-family:PingFang SC,Microsoft YaHei,-apple-system,sans-serif;-webkit-user-select:none;user-select:none}.zhk--disabled{opacity:.7}.zhk--floating{position:fixed;z-index:9999;box-shadow:0 4px 20px #0003}.zhk--bottom{position:fixed;bottom:0;left:0;width:100%;min-width:min(var(--keyboard-height) + 100px,100%);max-width:100%;z-index:9999;border-radius:12px 12px 0 0;box-shadow:0 -2px 10px #0000001a}.zhk__disabled-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#f5f5f5cc;z-index:10;border-radius:12px}.zhk__disabled-overlay span{font-size:16px;color:#666;padding:15px 30px;background-color:#e0e0e0;border-radius:5px}
+@charset "UTF-8";.zhk-candidate-list{flex:1;min-width:0;display:flex;overflow-x:auto;gap:var(--gap);scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.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);display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--key-text-color, #333333);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .1s ease;border-radius:4px}.zhk-candidate-list__item:first-child{color:var(--primary-color, #0076f5);font-weight:500}.zhk-candidate-list__item:hover{background-color:#0000000d}.handwriting-input{display:flex;flex-direction:column;height:100%;background:var(--background-color, #f5f5f5);padding:var(--gap);gap:var(--gap);box-sizing:border-box}.handwriting-input .handwriting-content{flex:7;display:flex;flex-direction:row;align-items:flex-start;justify-content:center;flex-wrap:nowrap;overflow:hidden;gap:var(--gap)}.handwriting-input .handwriting-canvas-container{flex:4;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;font-size:0}.handwriting-input .handwriting-canvas-container .handwriting-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:calc(var(--gap) * 2);box-sizing:border-box}.handwriting-input .handwriting-canvas-container .handwriting-loading .loading-text{font-size:16px;color:var(--text-color, #333);margin-bottom:calc(var(--gap) * 2);text-align:center}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-bar{width:80%;height:8px;background-color:var(--border-color, #dcdcdc);border-radius:4px;overflow:hidden;margin-bottom:var(--gap)}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-bar .progress-fill{height:100%;background-color:var(--primary-color, #007bff);border-radius:4px;transition:width .3s ease}.handwriting-input .handwriting-canvas-container .handwriting-loading .progress-text{font-size:14px;color:var(--text-color, #666);font-weight:500}.handwriting-input .handwriting-canvas{touch-action:none;width:100%;height:100%;display:block}.handwriting-input .handwriting-buttons{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:var(--gap);max-width:calc(var(--keyboard-height) / 4);height:100%}.handwriting-input .handwriting-btn{flex:1;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 rgba(0, 0, 0, .1));cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:var(--key-font-size);font-weight:500;color:#555;transition:all .12s ease;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.handwriting-input .handwriting-btn:hover{filter:brightness(98%)}.handwriting-input .handwriting-btn:active{background-color:#cdd3d8;transform:translateY(1px);box-shadow:var(--key-active-shadow, 0 0px 1px rgba(0, 0, 0, .05))}.handwriting-input .handwriting-btn--function img{width:var(--key-icon-size);height:var(--key-icon-size)}.zhk-selection{position:absolute;top:0;left:0;width:100%;height:100%;background:#f5f5f5;z-index:2;display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:center;padding:var(--gap);gap:var(--gap);box-sizing:border-box}.zhk-selection__list{flex:5;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--keyboard-height) / 7),1fr));background-color:var(--key-background-color, #ffffff);border-radius:8px;box-shadow:0 1px 4px #0000000d;max-height:100%;overflow-y:auto;overflow-x:hidden}.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:transparent}.zhk-selection__text{font-size:var(--candidate-font-size);padding:12px 8px;display:inline-flex;justify-content:center;align-items:center;border-bottom:1px solid var(--border-color, #f0f0f0);border-right:1px solid var(--border-color, #f0f0f0);color:var(--key-text-color, #333333);cursor:pointer;transition:background-color .12s ease}.zhk-selection__text:hover{background-color:#f5f8ff;color:var(--primary-color, #0076f5);z-index:1}.zhk-selection__text--span-2{grid-column:span 2}.zhk-selection__text--span-3{grid-column:span 3}.zhk-selection__func{flex:1;display:flex;justify-content:flex-end}.zhk-selection__func-btn{width:100%;font-size:var(--key-font-size);font-weight:500;border:1px solid var(--border-color, #d1d5da);border-radius:var(--key-border-radius, 6px);background-color:var(--function-key-color, #e4e7ea);padding:12px 0;cursor:pointer;color:#555;transition:all .12s ease;white-space:nowrap;box-shadow:0 1px 2px #0000000d}.zhk-selection__func-btn:hover{background-color:#dbdfe3}.zhk-selection__func-btn:active{transform:translateY(1px);box-shadow:none}.zhk-candidate{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box}.zhk-candidate__container{display:flex;flex-direction:column;flex:1;min-width:0;width:100%;height:100%;background-color:var(--background-color, #f7f8f9);padding:0 8px}.zhk-candidate__pinyin{flex:1;font-size:calc(var(--key-font-size) * .9);color:var(--primary-color, #0076f5);display:flex;align-items:center;padding-left:4px;letter-spacing:.5px;box-sizing:border-box}.zhk-candidate__bottom-container{flex:3;display:flex;align-items:center;gap:var(--gap);width:100%}.zhk-candidate__more{cursor:pointer;display:flex;align-items:center;width:max(36px,var(--keyboard-height) / 8);background:none;border:none}.zhk-base{height:100%;display:flex;flex-direction:column;padding:var(--gap);box-sizing:border-box}.zhk-base__row{flex:1;min-height:0;display:flex;justify-content:center;gap:var(--gap);margin-bottom:4px}.zhk-base__row:last-child{margin-bottom:0}.zhk-base__key{width:var(--key-width);flex:none;min-height:42px;border:1px solid var(--border-color, #d1d5da);border-radius:var(--key-border-radius, 6px);background-color:var(--key-background-color, #fff);box-shadow:var(--key-shadow, 0 1px 2px rgba(0, 0, 0, .1));color:var(--key-text-color, #333);font-size:var(--key-font-size);cursor:pointer;transition:all .12s ease;padding:0 5px;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.zhk-base__key:hover{filter:brightness(98%);border-color:#c3c8cf}.zhk-base__key:active{background-color:#ebebeb;box-shadow:var(--key-active-shadow, 0 0px 1px rgba(0, 0, 0, .05));transform:translateY(1px)}.zhk-base__key--function{flex:none;width:var(--key-width);min-width:var(--key-min-width-function);background-color:var(--function-key-color, #e4e7ea);font-weight:500;color:#555}.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(1)}.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:var(--key-icon-size);height:var(--key-icon-size);vertical-align:middle;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{height:100%;display:flex;flex-direction:column;padding:8px;box-sizing:border-box}.num-keyboard__container{display:flex;height:100%;gap:8px}.num-keyboard__left{flex:3;display:flex;flex-direction:column}.num-keyboard__right{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:6px}.num-keyboard__rows{display:flex;flex-direction:column;flex:1;gap:var(--gap)}.num-keyboard__row{display:flex;flex:1;gap:var(--gap)}.num-keyboard__key{flex:1;display:flex;align-items:center;justify-content:center;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 rgba(0, 0, 0, .1));font-size:var(--key-font-size);font-weight:500;color:var(--key-text-color, #333);cursor:pointer;transition:all .12s ease}.num-keyboard__key:hover{filter:brightness(98%)}.num-keyboard__key:active{background-color:#ebebeb;box-shadow:var(--key-active-shadow, 0 0px 1px rgba(0, 0, 0, .05));transform:translateY(1px)}.num-keyboard__key--function{height:calc(25% - 6px);background-color:var(--function-key-color, #e4e7ea);font-size:var(--key-font-size);font-weight:500;color:#555}.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:var(--key-icon-size);height:var(--key-icon-size)}.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);height:100%;display:flex;flex-direction:column;padding:10px;box-sizing:border-box}.symbol-keyboard__content{display:flex;flex:1;gap:var(--gap);height:100%}.symbol-keyboard__functions{display:flex;flex-direction:column;justify-content:space-between;gap:var(--gap);width:var(--function-width)}.symbol-keyboard__lang-selector{display:flex;flex-direction:column;height:calc(var(--lang-btn-size) * 2 + var(--gap))}.symbol-keyboard__lang-btn{padding:10px 0;display:flex;align-items:center;justify-content:center;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;transition:all .12s ease;margin:0;box-sizing:border-box;width:var(--lang-btn-size);flex:1;flex-shrink:0}.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{margin-top:-1px;border-radius:0 0 var(--key-border-radius, 6px) var(--key-border-radius, 6px)}.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);position:relative;z-index:1}.symbol-keyboard__lang-btn--active:hover{filter:brightness(110%)}.symbol-keyboard__control-group{display:flex;flex-direction:column;gap:calc(var(--gap) + 2px)}.symbol-keyboard__symbols-container{flex:1;width:100%;height:100%;overflow-y:auto;padding-right:5px}.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{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--symbol-min-size),1fr));gap:var(--gap);width:100%;max-height:100%;padding-bottom:10px}.symbol-keyboard__key{display:flex;align-items:center;justify-content:center;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 rgba(0, 0, 0, .1));font-size:max(18px,var(--key-font-size, 1rem));font-weight:400;color:var(--key-text-color, #333);cursor:pointer;transition:all .12s ease;margin:0;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}.symbol-keyboard__key:hover{filter:brightness(98%)}.symbol-keyboard__key:active{background-color:#ebebeb;box-shadow:var(--key-active-shadow, 0 0px 1px rgba(0, 0, 0, .05));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;font-weight:500;color:#555}.symbol-keyboard__key--function:active{background-color:#cdd3d8}.symbol-keyboard__key--lock{padding:10px 0;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center}.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: max(4px, calc(var(--keyboard-height) / 75));--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 rgba(0, 0, 0, .1);--key-active-shadow: 0 0px 1px rgba(0, 0, 0, .05);position:relative;width:400px;max-width:1080px;height:300px;min-height:300px;overflow:hidden;background-color:#f7f8f9;border-radius:12px;box-shadow:0 8px 30px #0000001a;font-family:PingFang SC,Microsoft YaHei,-apple-system,sans-serif;-webkit-user-select:none;user-select:none}.zhk--disabled{opacity:.7}.zhk--floating{position:fixed;z-index:9999;box-shadow:0 4px 20px #0003}.zhk--bottom{position:fixed;bottom:0;left:0;width:100%;min-width:min(var(--keyboard-height) + 100px,100%);max-width:100%;z-index:9999;border-radius:12px 12px 0 0;box-shadow:0 -2px 10px #0000001a}.zhk__disabled-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#f5f5f5cc;z-index:10;border-radius:12px}.zhk__disabled-overlay span{font-size:16px;color:#666;padding:15px 30px;background-color:#e0e0e0;border-radius:5px}

package/dist/types/index.d.ts

@@ -2,4 +2,4 @@ export interface KeyEvent {
     key: string;
     isControl?: boolean;
 }
-export type KeyBoardMode = 'zh' | 'en' | 'hand' | 'num' | 'symbol';
+export type KeyBoardMode = 'zh' | 'en' | 'en_cap' | 'hand' | 'num' | 'symbol';