@tdh-keyboard/vue 1.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.
- package/LICENSE +190 -0
- package/README.md +275 -0
- package/dist/App.vue.d.ts +98 -0
- package/dist/components/CandidateBar.vue.d.ts +18 -0
- package/dist/components/CandidateList.vue.d.ts +9 -0
- package/dist/components/CandidateSelection.vue.d.ts +11 -0
- package/dist/components/HandwritingInput.vue.d.ts +14 -0
- package/dist/components/KeyboardBase.vue.d.ts +53 -0
- package/dist/components/KeyboardToolbar.vue.d.ts +15 -0
- package/dist/components/NumericKeyboard.vue.d.ts +14 -0
- package/dist/components/SymbolKeyboard.vue.d.ts +9 -0
- package/dist/components/TdhKeyboard.vue.d.ts +124 -0
- package/dist/hooks/useKeyRepeater.d.ts +4 -0
- package/dist/lib.d.ts +9 -0
- package/dist/main.d.ts +1 -0
- package/dist/style.css +2 -0
- package/dist/tdh-keyboard-vue.js +1104 -0
- package/dist/tdh-keyboard-vue.js.map +1 -0
- package/dist/tdh-keyboard-vue.umd.cjs +2 -0
- package/dist/tdh-keyboard-vue.umd.cjs.map +1 -0
- package/dist/types/index.d.ts +10 -0
- package/dist/utils/useHandwritingRecognizer.d.ts +4 -0
- package/package.json +55 -0
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
enableHandwriting?: boolean;
|
|
3
|
+
isHandwritingMode?: boolean;
|
|
4
|
+
};
|
|
5
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
6
|
+
toggleKeyboard: () => any;
|
|
7
|
+
collapse: () => any;
|
|
8
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
9
|
+
onToggleKeyboard?: (() => any) | undefined;
|
|
10
|
+
onCollapse?: (() => any) | undefined;
|
|
11
|
+
}>, {
|
|
12
|
+
enableHandwriting: boolean;
|
|
13
|
+
isHandwritingMode: boolean;
|
|
14
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
15
|
+
export default _default;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { KeyEvent } from '../types';
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
keyboardRows?: string[][];
|
|
4
|
+
};
|
|
5
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
6
|
+
key: (payload: KeyEvent) => any;
|
|
7
|
+
exit: () => any;
|
|
8
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
9
|
+
onKey?: ((payload: KeyEvent) => any) | undefined;
|
|
10
|
+
onExit?: (() => any) | undefined;
|
|
11
|
+
}>, {
|
|
12
|
+
keyboardRows: string[][];
|
|
13
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
14
|
+
export default _default;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { KeyEvent } from '../types';
|
|
2
|
+
declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
3
|
+
key: (payload: KeyEvent) => any;
|
|
4
|
+
exit: () => any;
|
|
5
|
+
}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
|
|
6
|
+
onKey?: ((payload: KeyEvent) => any) | undefined;
|
|
7
|
+
onExit?: (() => any) | undefined;
|
|
8
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
|
|
9
|
+
export default _default;
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { KeyBoardMode, KeyEvent } from '../types';
|
|
2
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
3
|
+
/**
|
|
4
|
+
* 默认的键盘模式
|
|
5
|
+
*/
|
|
6
|
+
defaultMode: {
|
|
7
|
+
type: () => KeyBoardMode;
|
|
8
|
+
default: () => "symbol" | "zh" | "en" | "hand" | "num";
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* 是否启用手写输入
|
|
12
|
+
*/
|
|
13
|
+
enableHandwriting: {
|
|
14
|
+
type: BooleanConstructor;
|
|
15
|
+
default: () => boolean;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* 键盘定位模式
|
|
19
|
+
* @default 'static'
|
|
20
|
+
*/
|
|
21
|
+
position: {
|
|
22
|
+
type: () => "static" | "float" | "bottom";
|
|
23
|
+
default: () => "static" | "float" | "bottom";
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* 浮动模式下键盘与输入框的距离
|
|
27
|
+
* @default 10
|
|
28
|
+
*/
|
|
29
|
+
floatMarginTop: {
|
|
30
|
+
type: NumberConstructor;
|
|
31
|
+
default: () => number;
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* 当没有input获得焦点时是否禁用键盘
|
|
35
|
+
* @default true
|
|
36
|
+
*/
|
|
37
|
+
disableWhenNoFocus: {
|
|
38
|
+
type: BooleanConstructor;
|
|
39
|
+
default: () => boolean;
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* 是否启用手动打开模式
|
|
43
|
+
*/
|
|
44
|
+
manual: {
|
|
45
|
+
type: BooleanConstructor;
|
|
46
|
+
default: () => boolean;
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* 数字键盘的行配置
|
|
50
|
+
*/
|
|
51
|
+
numKeys: {
|
|
52
|
+
type: () => string[][];
|
|
53
|
+
};
|
|
54
|
+
}>, {
|
|
55
|
+
open: (target?: HTMLInputElement | HTMLTextAreaElement | null) => void;
|
|
56
|
+
close: () => void;
|
|
57
|
+
destroy: () => void;
|
|
58
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
59
|
+
key: (payload: KeyEvent) => any;
|
|
60
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
61
|
+
/**
|
|
62
|
+
* 默认的键盘模式
|
|
63
|
+
*/
|
|
64
|
+
defaultMode: {
|
|
65
|
+
type: () => KeyBoardMode;
|
|
66
|
+
default: () => "symbol" | "zh" | "en" | "hand" | "num";
|
|
67
|
+
};
|
|
68
|
+
/**
|
|
69
|
+
* 是否启用手写输入
|
|
70
|
+
*/
|
|
71
|
+
enableHandwriting: {
|
|
72
|
+
type: BooleanConstructor;
|
|
73
|
+
default: () => boolean;
|
|
74
|
+
};
|
|
75
|
+
/**
|
|
76
|
+
* 键盘定位模式
|
|
77
|
+
* @default 'static'
|
|
78
|
+
*/
|
|
79
|
+
position: {
|
|
80
|
+
type: () => "static" | "float" | "bottom";
|
|
81
|
+
default: () => "static" | "float" | "bottom";
|
|
82
|
+
};
|
|
83
|
+
/**
|
|
84
|
+
* 浮动模式下键盘与输入框的距离
|
|
85
|
+
* @default 10
|
|
86
|
+
*/
|
|
87
|
+
floatMarginTop: {
|
|
88
|
+
type: NumberConstructor;
|
|
89
|
+
default: () => number;
|
|
90
|
+
};
|
|
91
|
+
/**
|
|
92
|
+
* 当没有input获得焦点时是否禁用键盘
|
|
93
|
+
* @default true
|
|
94
|
+
*/
|
|
95
|
+
disableWhenNoFocus: {
|
|
96
|
+
type: BooleanConstructor;
|
|
97
|
+
default: () => boolean;
|
|
98
|
+
};
|
|
99
|
+
/**
|
|
100
|
+
* 是否启用手动打开模式
|
|
101
|
+
*/
|
|
102
|
+
manual: {
|
|
103
|
+
type: BooleanConstructor;
|
|
104
|
+
default: () => boolean;
|
|
105
|
+
};
|
|
106
|
+
/**
|
|
107
|
+
* 数字键盘的行配置
|
|
108
|
+
*/
|
|
109
|
+
numKeys: {
|
|
110
|
+
type: () => string[][];
|
|
111
|
+
};
|
|
112
|
+
}>> & Readonly<{
|
|
113
|
+
onKey?: ((payload: KeyEvent) => any) | undefined;
|
|
114
|
+
}>, {
|
|
115
|
+
enableHandwriting: boolean;
|
|
116
|
+
defaultMode: KeyBoardMode;
|
|
117
|
+
position: "static" | "float" | "bottom";
|
|
118
|
+
floatMarginTop: number;
|
|
119
|
+
disableWhenNoFocus: boolean;
|
|
120
|
+
manual: boolean;
|
|
121
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
|
|
122
|
+
keyboardRef: HTMLDivElement;
|
|
123
|
+
}, HTMLDivElement>;
|
|
124
|
+
export default _default;
|
package/dist/lib.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { App } from 'vue';
|
|
2
|
+
import { default as TdhKeyboard } from './components/TdhKeyboard.vue';
|
|
3
|
+
export * from '@tdh-keyboard/core';
|
|
4
|
+
export type * from './types';
|
|
5
|
+
export { TdhKeyboard };
|
|
6
|
+
declare const _default: {
|
|
7
|
+
install: (app: App) => void;
|
|
8
|
+
};
|
|
9
|
+
export default _default;
|
package/dist/main.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/style.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.tdhk-candidate-list{align-items:center;gap:var(--gap);scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;flex:1;width:100%;min-width:0;height:100%;display:flex;overflow-x:auto}.tdhk-candidate-list::-webkit-scrollbar{display:none}.tdhk-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}.tdhk-candidate-list__item:first-child{color:var(--primary-color,#0076f5);font-weight:500}.tdhk-candidate-list__item:hover{background-color:#0000000d}.tdhk-toolbar{align-items:center;gap:clamp(8px, var(--keyboard-height) / 18, 18px);width:100%;min-height:100%;padding:0 clamp(8px, var(--keyboard-height) / 18, 18px);border-radius:calc(var(--key-border-radius,6px) * 1.5);background-color:var(--background-color,#f7f8f9);box-sizing:border-box;display:flex}.tdhk-toolbar__button{color:#5e6773;width:clamp(34px, var(--keyboard-header-height) * .9, 46px);height:clamp(26px, var(--keyboard-header-height) * .72, 34px);cursor:pointer;background:0 0;border:none;border-radius:12px;justify-content:center;align-items:center;padding:0;transition:background-color .12s,transform .12s,opacity .12s;display:inline-flex}.tdhk-toolbar__button:hover{background-color:#5e677314}.tdhk-toolbar__button:active{background-color:#5e67731f;transform:translateY(1px)}.tdhk-toolbar__button:disabled{cursor:not-allowed;opacity:.45;background-color:#0000;transform:none}.tdhk-toolbar__button--collapse{width:clamp(40px, var(--keyboard-header-height) * 1.05, 50px)}.tdhk-toolbar__icon{width:clamp(20px, var(--keyboard-header-height) * .5, 26px);height:clamp(20px, var(--keyboard-header-height) * .5, 26px);object-fit:contain;display:block}.tdhk-toolbar__spacer{flex:1}.tdhk-toolbar__divider{background:linear-gradient(#c4cad200 0%,#c4cad2e6 50%,#c4cad200 100%);align-self:stretch;width:1px;margin:4px 0}.handwriting-input{background:var(--background-color,#f5f5f5);height:100%;padding:var(--gap);gap:var(--keyboard-stack-gap);box-sizing:border-box;flex-direction:column;display:flex}.handwriting-input__header{flex:0 0 var(--keyboard-header-height);height:var(--keyboard-header-height);min-height:var(--keyboard-header-height);display:flex;overflow:hidden}.handwriting-input__candidates{box-sizing:border-box;background-color:var(--background-color,#f7f8f9);border-radius:calc(var(--key-border-radius,6px) * 1.5);flex:1;align-items:center;min-width:0;height:100%;padding:0 8px;display:flex;overflow:hidden}.handwriting-input .handwriting-content{flex:1 0 var(--keyboard-body-min-height);justify-content:center;align-items:flex-start;gap:var(--gap);flex-flow:row;min-height:0;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}.tdhk-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}.tdhk-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}.tdhk-selection__list::-webkit-scrollbar{width:4px}.tdhk-selection__list::-webkit-scrollbar-thumb{background-color:var(--border-color,#d1d5da);border-radius:2px}.tdhk-selection__list::-webkit-scrollbar-track{background-color:#0000}.tdhk-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}.tdhk-selection__text:hover{color:var(--primary-color,#0076f5);z-index:1;background-color:#f5f8ff}.tdhk-selection__text--span-2{grid-column:span 2}.tdhk-selection__text--span-3{grid-column:span 3}.tdhk-selection__func{flex:1;justify-content:flex-end;display:flex}.tdhk-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}.tdhk-selection__func-btn:hover{background-color:#dbdfe3}.tdhk-selection__func-btn:active{box-shadow:none;transform:translateY(1px)}.tdhk-candidate{box-sizing:border-box;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.tdhk-candidate__container{background-color:var(--background-color,#f7f8f9);border-radius:calc(var(--key-border-radius,6px) * 1.5);flex-direction:column;flex:1;width:100%;min-width:0;height:100%;padding:0 8px;display:flex;overflow:hidden}.tdhk-candidate__pinyin{font-size:var(--candidate-pinyin-font-size,14px);color:var(--primary-color,#0076f5);letter-spacing:.5px;box-sizing:border-box;flex:1;align-items:center;padding-left:4px;display:flex}.tdhk-candidate__bottom-container{align-items:center;gap:var(--gap);flex:3;width:100%;display:flex}.tdhk-candidate__more{cursor:pointer;width:clamp(30px, var(--keyboard-header-height) * .62, 38px);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.tdhk-base{height:100%;padding:var(--gap);box-sizing:border-box;flex-direction:column;display:flex}.tdhk-base__row{flex:1 0 var(--keyboard-row-min-height);min-height:var(--keyboard-row-min-height);justify-content:center;gap:var(--gap);margin-bottom:var(--keyboard-stack-gap);display:flex}.tdhk-base__row:last-child{margin-bottom:0}.tdhk-base__row--header{flex:0 0 var(--keyboard-header-height);height:var(--keyboard-header-height);min-height:var(--keyboard-header-height);overflow:hidden}.tdhk-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:36px;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}.tdhk-base__key:hover{filter:brightness(98%);border-color:#c3c8cf}.tdhk-base__key:active{box-shadow:var(--key-active-shadow,0 0px 1px #0000000d);background-color:#ebebeb;transform:translateY(1px)}.tdhk-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}.tdhk-base__key--function:active{background-color:#cdd3d8}.tdhk-base__key--shift,.tdhk-base__key--delete{flex:1;width:auto}.tdhk-base__key--space{flex:1;width:auto;min-width:20px}.tdhk-base__key--active{background-color:var(--primary-color,#0076f5);border-color:var(--primary-color,#0076f5);color:#fff}.tdhk-base__key--active:hover{filter:brightness(110%)}.tdhk-base__key--active:active{background-color:#005dc2}.tdhk-base__key--active .tdhk-base__key-icon{filter:brightness(0)invert()}.tdhk-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}.tdhk-base__key--disabled .tdhk-base__key-icon{filter:brightness(.7)}.tdhk-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}.tdhk-base__toggle-main{font-size:max(14px, var(--keyboard-height) / 30)}.tdhk-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,220px) / 5));--lang-btn-size:var(--key-size);--gap:max(4px, calc(var(--keyboard-height,220px) / 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}.tdhk{--keyboard-scale-height:max(220px, var(--keyboard-height));--key-font-size:max(1rem, calc(var(--keyboard-scale-height) / 20));--candidate-font-size:clamp(18px, calc(var(--keyboard-scale-height) / 13.5), 22px);--candidate-pinyin-font-size:clamp(13px, calc(var(--keyboard-scale-height) / 16), 16px);--gap:clamp(4px, calc(var(--keyboard-scale-height) / 75), 6px);--keyboard-stack-gap:var(--gap);--keyboard-header-height:clamp(42px, calc(var(--keyboard-scale-height) / 4.8), 52px);--keyboard-row-min-height:clamp(36px, calc(var(--keyboard-scale-height) / 6.1), 42px);--keyboard-body-min-height:calc(var(--keyboard-row-min-height) * 4 + var(--keyboard-stack-gap) * 3);--key-width:calc((100% - 9 * var(--gap)) / 10);--key-min-width-function:45px;--key-icon-size:calc(var(--key-font-size) * 1.2);--keyboard-shell-radius:var(--key-border-radius,6px);--key-shadow:0 1px 2px #0000001a;--key-active-shadow:0 0px 1px #0000000d;border-radius:var(--keyboard-shell-radius);-webkit-user-select:none;user-select:none;background-color:#f7f8f9;width:320px;min-width:320px;max-width:1080px;height:220px;min-height:220px;font-family:PingFang SC,Microsoft YaHei,-apple-system,sans-serif;position:relative;overflow:hidden;box-shadow:0 8px 30px #0000001a}.tdhk--disabled{opacity:.7}.tdhk--floating{z-index:9999;position:fixed;box-shadow:0 4px 20px #0003}.tdhk--bottom{width:100%;min-width:min(var(--keyboard-height) + 100px, 100%);z-index:9999;border-radius:var(--keyboard-shell-radius) var(--keyboard-shell-radius) 0 0;max-width:100%;position:fixed;bottom:0;left:0;box-shadow:0 -2px 10px #0000001a}.tdhk__disabled-overlay{z-index:10;border-radius:var(--keyboard-shell-radius);background-color:#f5f5f5cc;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.tdhk__disabled-overlay span{color:#666;background-color:#e0e0e0;border-radius:5px;padding:15px 30px;font-size:16px}
|
|
2
|
+
/*$vite$:1*/
|