@junerver/vue-touch-ime 1.0.0 → 1.1.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/README.md +19 -8
- package/dist/SoftKeyboard.vue.d.ts +4 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +80 -72
- package/dist/style.css +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -75,12 +75,29 @@ const weight = ref<number | null>(null)
|
|
|
75
75
|
|
|
76
76
|
## 主题定制
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
### 快捷换肤：`accent` / `background` prop
|
|
79
|
+
|
|
80
|
+
```vue
|
|
81
|
+
<!-- 主色调换成橙色：完成键 / 高亮 / 派生色自动跟随 -->
|
|
82
|
+
<SoftKeyboard accent="#ff5500" background="rgba(20, 16, 12, 0.97)" />
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
| Prop | 类型 | 默认值 | 说明 |
|
|
86
|
+
| --- | --- | --- | --- |
|
|
87
|
+
| `instance` | `SoftKeyboardInstance` | 模块单例 | 自定义键盘实例（多键盘并存时用 `createSoftKeyboard()` 创建） |
|
|
88
|
+
| `accent` | `string` | `#3ef2c0` | 主色调（完成键 / 高亮 / 派生色自动跟随） |
|
|
89
|
+
| `background` | `string` | `rgba(7,20,24,0.97)` | 面板背景色 |
|
|
90
|
+
|
|
91
|
+
### 细粒度：CSS 变量
|
|
92
|
+
|
|
93
|
+
覆盖 `.vti-kb` 上的 CSS 变量即可（`--vti-accent-strong` 默认由 `--vti-accent`
|
|
94
|
+
自动派生，一般无需单独覆盖）：
|
|
79
95
|
|
|
80
96
|
```css
|
|
81
97
|
.vti-kb {
|
|
82
98
|
--vti-accent: #3ef2c0; /* 主色（高亮 / 完成键） */
|
|
83
|
-
--vti-accent-strong: #
|
|
99
|
+
--vti-accent-strong: color-mix(in srgb, var(--vti-accent) 72%, #000); /* 派生暗端 */
|
|
100
|
+
--vti-on-accent: #06241c; /* 主色按键上的文字色 */
|
|
84
101
|
--vti-bg: rgba(7, 20, 24, 0.97); /* 面板背景 */
|
|
85
102
|
--vti-key-bg: linear-gradient(180deg, rgba(24, 56, 60, 0.95), rgba(13, 34, 38, 0.95));
|
|
86
103
|
--vti-key-fg: #d7e2e0; /* 按键文字 */
|
|
@@ -92,12 +109,6 @@ const weight = ref<number | null>(null)
|
|
|
92
109
|
|
|
93
110
|
## API
|
|
94
111
|
|
|
95
|
-
### 组件 `<SoftKeyboard />`
|
|
96
|
-
|
|
97
|
-
| Prop | 类型 | 默认值 | 说明 |
|
|
98
|
-
| --- | --- | --- | --- |
|
|
99
|
-
| `instance` | `SoftKeyboardInstance` | 模块单例 | 自定义键盘实例（多键盘并存时用 `createSoftKeyboard()` 创建） |
|
|
100
|
-
|
|
101
112
|
### 组合式
|
|
102
113
|
|
|
103
114
|
```ts
|
|
@@ -2,6 +2,10 @@ import { type SoftKeyboard } from './useSoftKeyboard';
|
|
|
2
2
|
type __VLS_Props = {
|
|
3
3
|
/** 自定义键盘实例（缺省用模块单例；多键盘并存时传入 createSoftKeyboard() 的产物） */
|
|
4
4
|
instance?: SoftKeyboard;
|
|
5
|
+
/** 主色调（覆盖 --vti-accent，完成键/高亮/派生色自动跟随） */
|
|
6
|
+
accent?: string;
|
|
7
|
+
/** 面板背景色（覆盖 --vti-bg） */
|
|
8
|
+
background?: string;
|
|
5
9
|
};
|
|
6
10
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
7
11
|
declare const _default: typeof __VLS_export;
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./pinyinDict.cjs"),t=require("./ime.cjs");let n=require("vue");var r=new Set([`text`,`search`,`tel`,`email`,`url`,`number`,``]);function i(e){return!(e instanceof HTMLInputElement)||e.disabled||e.readOnly?!1:r.has((e.type||`text`).toLowerCase())}function a(){let e=(0,n.reactive)({visible:!1,mode:`zh`,kind:`text`,buffer:``,draft:``,replaceAll:!1,shift:!1,prevTextMode:`zh`}),r=null,a=null,o=!1,s=0,c=(0,n.computed)(()=>e.visible&&e.mode===`zh`?t.candidatesFor(e.buffer):[]);function l(n){if(r===n&&e.visible)return;s+=1,r=n;let i=t.resolveSoftKindWithOverride(n,n.dataset?.vtiKb);e.kind=i,e.mode=i===`text`?`zh`:`num`,e.prevTextMode=`zh`,e.buffer=``,e.shift=!1,e.replaceAll=i===`text`?t.hasFullSelection(n):n.value.length>0,e.draft=i===`text`?``:n.value,e.visible=!0;try{n.scrollIntoView({block:`center`})}catch{}}function u(t=!1){s+=1,e.visible=!1,e.buffer=``,e.shift=!1;let n=r;if(r=null,t&&n)try{n.blur()}catch{}}function d(){return!r||!r.isConnected?(u(!1),null):r}function f(n){let r=d();if(r&&n){if(e.kind===`text`)t.insertIntoTextInput(r,n,e.replaceAll);else if(n.length===1)e.draft=t.applyCharToDraft(e.kind,e.draft,n,e.replaceAll),t.writeDraft(r,e.kind,e.draft);else{let i=e.replaceAll?``:e.draft;e.draft=t.normalizeDraft(e.kind,i+n),t.writeDraft(r,e.kind,e.draft)}e.replaceAll=!1}}function p(){let n=d();n&&(e.kind===`text`?t.backspaceTextInput(n):(e.draft=t.backspaceDraft(e.draft,e.replaceAll),t.writeDraft(n,e.kind,e.draft)),e.replaceAll=!1)}function m(){let n=t.resolveBufferCommit(e.buffer);e.buffer=``,f(n??``)}function h(t){d()&&(e.buffer=e.buffer.slice(t.consumed),f(t.text))}function g(t){e.mode===`zh`&&e.buffer&&m(),t===`num`&&e.mode!==`num`&&(e.prevTextMode=e.mode),e.mode=t,e.shift=!1}function _(n){if(!e.visible||!d())return;if(n===`backspace`){if(e.mode===`zh`&&e.buffer){e.buffer=e.buffer.slice(0,-1);return}p();return}if(n===`space`){if(e.mode===`zh`&&e.buffer){let e=c.value[0];e?h(e):m();return}e.kind===`text`&&f(` `);return}if(n===`done`){m(),u(!0);return}if(n===`shift`){e.shift=!e.shift;return}if(n===`mode:back`){g(e.prevTextMode);return}if(n.startsWith(`mode:`)){g(n.slice(5));return}let r=n;if(r.length===1&&(e.kind===`text`||t.isCharAllowed(e.kind,r))){if(e.mode===`zh`){if(r>=`a`&&r<=`z`){e.buffer+=r;return}if(r>=`A`&&r<=`Z`){e.buffer+=r.toLowerCase();return}m(),f(r)}else e.mode===`en`&&(r>=`a`&&r<=`z`||r>=`A`&&r<=`Z`)&&(r=e.shift?r.toUpperCase():r.toLowerCase(),e.shift=!1),f(r)}}function v(e){let t=e.target;i(t)&&(a&&t instanceof Node&&a.contains(t)||l(t))}function y(e){if(e.target!==r)return;let t=s;window.setTimeout(()=>{s===t&&u(!1)},0)}function b(e){a=e,!o&&(o=!0,document.addEventListener(`focusin`,v),document.addEventListener(`focusout`,y))}function x(){o&&=(document.removeEventListener(`focusin`,v),document.removeEventListener(`focusout`,y),!1),a=null,u(!1)}return{state:e,candidates:c,attach:b,detach:x,openFor:l,close:u,press:_,pickCandidate:h,getTarget:()=>r}}var o=a();function s(){return o}var c={class:`vti-kb__panel`},l={class:`vti-kb__strip`},u={class:`vti-kb__buffer`},d={key:0,class:`vti-kb__cands`},f=[`onPointerdown`],p={key:0,class:`vti-kb__hint`},m={key:1,class:`vti-kb__hint`},h=[`onPointerdown`],g={class:`vti-kb__row vti-kb__row--last`},_={key:0,type:`button`,class:`vti-kb__key vti-kb__key--ghost`,disabled:``},v={key:1,type:`button`,class:`vti-kb__key vti-kb__key--ghost`,disabled:``},y=[`onPointerdown`],b={class:`vti-kb__row vti-kb__row--num`},x=(0,n.defineComponent)({__name:`SoftKeyboard`,props:{instance:{}},setup(e){let t=e.instance??o,
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./pinyinDict.cjs"),t=require("./ime.cjs");let n=require("vue");var r=new Set([`text`,`search`,`tel`,`email`,`url`,`number`,``]);function i(e){return!(e instanceof HTMLInputElement)||e.disabled||e.readOnly?!1:r.has((e.type||`text`).toLowerCase())}function a(){let e=(0,n.reactive)({visible:!1,mode:`zh`,kind:`text`,buffer:``,draft:``,replaceAll:!1,shift:!1,prevTextMode:`zh`}),r=null,a=null,o=!1,s=0,c=(0,n.computed)(()=>e.visible&&e.mode===`zh`?t.candidatesFor(e.buffer):[]);function l(n){if(r===n&&e.visible)return;s+=1,r=n;let i=t.resolveSoftKindWithOverride(n,n.dataset?.vtiKb);e.kind=i,e.mode=i===`text`?`zh`:`num`,e.prevTextMode=`zh`,e.buffer=``,e.shift=!1,e.replaceAll=i===`text`?t.hasFullSelection(n):n.value.length>0,e.draft=i===`text`?``:n.value,e.visible=!0;try{n.scrollIntoView({block:`center`})}catch{}}function u(t=!1){s+=1,e.visible=!1,e.buffer=``,e.shift=!1;let n=r;if(r=null,t&&n)try{n.blur()}catch{}}function d(){return!r||!r.isConnected?(u(!1),null):r}function f(n){let r=d();if(r&&n){if(e.kind===`text`)t.insertIntoTextInput(r,n,e.replaceAll);else if(n.length===1)e.draft=t.applyCharToDraft(e.kind,e.draft,n,e.replaceAll),t.writeDraft(r,e.kind,e.draft);else{let i=e.replaceAll?``:e.draft;e.draft=t.normalizeDraft(e.kind,i+n),t.writeDraft(r,e.kind,e.draft)}e.replaceAll=!1}}function p(){let n=d();n&&(e.kind===`text`?t.backspaceTextInput(n):(e.draft=t.backspaceDraft(e.draft,e.replaceAll),t.writeDraft(n,e.kind,e.draft)),e.replaceAll=!1)}function m(){let n=t.resolveBufferCommit(e.buffer);e.buffer=``,f(n??``)}function h(t){d()&&(e.buffer=e.buffer.slice(t.consumed),f(t.text))}function g(t){e.mode===`zh`&&e.buffer&&m(),t===`num`&&e.mode!==`num`&&(e.prevTextMode=e.mode),e.mode=t,e.shift=!1}function _(n){if(!e.visible||!d())return;if(n===`backspace`){if(e.mode===`zh`&&e.buffer){e.buffer=e.buffer.slice(0,-1);return}p();return}if(n===`space`){if(e.mode===`zh`&&e.buffer){let e=c.value[0];e?h(e):m();return}e.kind===`text`&&f(` `);return}if(n===`done`){m(),u(!0);return}if(n===`shift`){e.shift=!e.shift;return}if(n===`mode:back`){g(e.prevTextMode);return}if(n.startsWith(`mode:`)){g(n.slice(5));return}let r=n;if(r.length===1&&(e.kind===`text`||t.isCharAllowed(e.kind,r))){if(e.mode===`zh`){if(r>=`a`&&r<=`z`){e.buffer+=r;return}if(r>=`A`&&r<=`Z`){e.buffer+=r.toLowerCase();return}m(),f(r)}else e.mode===`en`&&(r>=`a`&&r<=`z`||r>=`A`&&r<=`Z`)&&(r=e.shift?r.toUpperCase():r.toLowerCase(),e.shift=!1),f(r)}}function v(e){let t=e.target;i(t)&&(a&&t instanceof Node&&a.contains(t)||l(t))}function y(e){if(e.target!==r)return;let t=s;window.setTimeout(()=>{s===t&&u(!1)},0)}function b(e){a=e,!o&&(o=!0,document.addEventListener(`focusin`,v),document.addEventListener(`focusout`,y))}function x(){o&&=(document.removeEventListener(`focusin`,v),document.removeEventListener(`focusout`,y),!1),a=null,u(!1)}return{state:e,candidates:c,attach:b,detach:x,openFor:l,close:u,press:_,pickCandidate:h,getTarget:()=>r}}var o=a();function s(){return o}var c={class:`vti-kb__panel`},l={class:`vti-kb__strip`},u={class:`vti-kb__buffer`},d={key:0,class:`vti-kb__cands`},f=[`onPointerdown`],p={key:0,class:`vti-kb__hint`},m={key:1,class:`vti-kb__hint`},h=[`onPointerdown`],g={class:`vti-kb__row vti-kb__row--last`},_={key:0,type:`button`,class:`vti-kb__key vti-kb__key--ghost`,disabled:``},v={key:1,type:`button`,class:`vti-kb__key vti-kb__key--ghost`,disabled:``},y=[`onPointerdown`],b={class:`vti-kb__row vti-kb__row--num`},x=(0,n.defineComponent)({__name:`SoftKeyboard`,props:{instance:{},accent:{},background:{}},setup(e){let t=e,r=t.instance??o,i=(0,n.ref)(null),a=r.candidates,s=(0,n.computed)(()=>{let e={};return t.accent&&(e[`--vti-accent`]=t.accent),t.background&&(e[`--vti-bg`]=t.background),Object.keys(e).length>0?e:void 0});(0,n.onMounted)(()=>r.attach(i.value)),(0,n.onBeforeUnmount)(()=>r.detach());function x(e){e.preventDefault(),e.stopPropagation()}function S(e,t){x(e),r.press(t)}function C(e,t){x(e),r.pickCandidate(t)}let w=[[`q`,`w`,`e`,`r`,`t`,`y`,`u`,`i`,`o`,`p`],[`a`,`s`,`d`,`f`,`g`,`h`,`j`,`k`,`l`],[`z`,`x`,`c`,`v`,`b`,`n`,`m`]],T=[[`7`,`8`,`9`,`backspace`],[`4`,`5`,`6`,`.`],[`1`,`2`,`3`,`mode:back`]];function E(e){return r.state.mode===`en`&&r.state.shift?e.toUpperCase():e}function D(){return r.state.prevTextMode===`zh`?`拼音`:`英文`}return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`rootRef`,ref:i,class:(0,n.normalizeClass)([`vti-kb`,{show:(0,n.unref)(r).state.visible}]),style:(0,n.normalizeStyle)(s.value),onPointerdown:x,onMousedown:x,onTouchstart:x,onClick:x,onContextmenu:t[10]||=(0,n.withModifiers)(()=>{},[`prevent`])},[(0,n.createElementVNode)(`div`,c,[(0,n.createElementVNode)(`div`,l,[(0,n.createElementVNode)(`span`,u,(0,n.toDisplayString)((0,n.unref)(r).state.mode===`zh`?(0,n.unref)(r).state.buffer:(0,n.unref)(r).state.draft),1),(0,n.unref)(r).state.mode===`zh`?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,d,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)((0,n.unref)(a),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:`${e.consumed}-${e.text}-${t}`,type:`button`,class:`vti-kb__cand`,onPointerdown:t=>C(t,e)},(0,n.toDisplayString)(e.text),41,f))),128)),(0,n.unref)(a).length===0?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,p,`候选`)):(0,n.createCommentVNode)(``,!0)])):((0,n.openBlock)(),(0,n.createElementBlock)(`span`,m,(0,n.toDisplayString)((0,n.unref)(r).state.kind===`text`?`英文/数字`:(0,n.unref)(r).state.kind===`decimal`?`数字 · 小数`:`数字`),1))]),(0,n.unref)(r).state.mode===`num`?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:1},[((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(T,(e,t)=>(0,n.createElementVNode)(`div`,{key:`n${t}`,class:`vti-kb__row vti-kb__row--num`},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(e,e=>((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:e},[e===`.`&&(0,n.unref)(r).state.kind===`digits`?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,_,` · `)):e===`mode:back`&&(0,n.unref)(r).state.kind!==`text`?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,v,` · `)):((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:2,type:`button`,class:`vti-kb__key`,onPointerdown:t=>S(t,e)},(0,n.toDisplayString)(e===`backspace`?`退格`:e===`mode:back`?D():e),41,y))],64))),128))])),64)),(0,n.createElementVNode)(`div`,b,[(0,n.createElementVNode)(`button`,{type:`button`,class:`vti-kb__key vti-kb__key--zero`,onPointerdown:t[8]||=e=>S(e,`0`)},` 0 `,32),(0,n.createElementVNode)(`button`,{type:`button`,class:`vti-kb__key vti-kb__key--done`,onPointerdown:t[9]||=e=>S(e,`done`)},` 完成 `,32)])],64)):((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:0},[((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(w,(e,i)=>(0,n.createElementVNode)(`div`,{key:`l${i}`,class:`vti-kb__row`},[i===2?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:0,type:`button`,class:(0,n.normalizeClass)([`vti-kb__key vti-kb__key--fn`,{on:(0,n.unref)(r).state.shift}]),onPointerdown:t[0]||=e=>S(e,`shift`)},` ⇧ `,34)):(0,n.createCommentVNode)(``,!0),((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(e,e=>((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:e,type:`button`,class:`vti-kb__key vti-kb__key--letter`,onPointerdown:t=>S(t,e)},(0,n.toDisplayString)(E(e)),41,h))),128)),i===2?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:1,type:`button`,class:`vti-kb__key vti-kb__key--fn`,onPointerdown:t[1]||=e=>S(e,`backspace`)},` 退格 `,32)):(0,n.createCommentVNode)(``,!0)])),64)),(0,n.createElementVNode)(`div`,g,[(0,n.createElementVNode)(`button`,{type:`button`,class:`vti-kb__key vti-kb__key--fn`,onPointerdown:t[2]||=e=>S(e,`mode:num`)},` 123 `,32),(0,n.createElementVNode)(`button`,{type:`button`,class:`vti-kb__key vti-kb__key--fn`,onPointerdown:t[3]||=e=>S(e,(0,n.unref)(r).state.mode===`zh`?`mode:en`:`mode:zh`)},(0,n.toDisplayString)((0,n.unref)(r).state.mode===`zh`?`英`:`拼`),33),(0,n.createElementVNode)(`button`,{type:`button`,class:`vti-kb__key vti-kb__key--space`,onPointerdown:t[4]||=e=>S(e,`space`)},` 空格 `,32),(0,n.createElementVNode)(`button`,{type:`button`,class:`vti-kb__key vti-kb__key--fn`,onPointerdown:t[5]||=e=>S(e,(0,n.unref)(r).state.mode===`zh`?`，`:`,`)},(0,n.toDisplayString)((0,n.unref)(r).state.mode===`zh`?`，`:`,`),33),(0,n.createElementVNode)(`button`,{type:`button`,class:`vti-kb__key vti-kb__key--fn`,onPointerdown:t[6]||=e=>S(e,(0,n.unref)(r).state.mode===`zh`?`。`:`.`)},(0,n.toDisplayString)((0,n.unref)(r).state.mode===`zh`?`。`:`.`),33),(0,n.createElementVNode)(`button`,{type:`button`,class:`vti-kb__key vti-kb__key--done`,onPointerdown:t[7]||=e=>S(e,`done`)},` 完成 `,32)])],64))])],38))}});exports.KIND_OVERRIDE_VALUES=t.KIND_OVERRIDE_VALUES,exports.PINYIN_CHARS=e.PINYIN_CHARS,exports.PINYIN_PHRASES=e.PINYIN_PHRASES,exports.SoftKeyboard=x,exports.applyCharToDraft=t.applyCharToDraft,exports.backspaceDraft=t.backspaceDraft,exports.backspaceTextInput=t.backspaceTextInput,exports.candidatesFor=t.candidatesFor,exports.createSoftKeyboard=a,exports.draftToDomValue=t.draftToDomValue,exports.hasFullSelection=t.hasFullSelection,exports.insertIntoTextInput=t.insertIntoTextInput,exports.isCharAllowed=t.isCharAllowed,exports.isSoftInput=i,exports.normalizeDraft=t.normalizeDraft,exports.resolveBufferCommit=t.resolveBufferCommit,exports.resolveSoftKind=t.resolveSoftKind,exports.resolveSoftKindWithOverride=t.resolveSoftKindWithOverride,exports.softKeyboard=o,exports.useSoftKeyboard=s,exports.writeDraft=t.writeDraft,exports.writeInputValue=t.writeInputValue;
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { PINYIN_CHARS as e, PINYIN_PHRASES as t } from "./pinyinDict.js";
|
|
2
2
|
import { KIND_OVERRIDE_VALUES as n, applyCharToDraft as r, backspaceDraft as i, backspaceTextInput as a, candidatesFor as o, draftToDomValue as s, hasFullSelection as c, insertIntoTextInput as l, isCharAllowed as u, normalizeDraft as d, resolveBufferCommit as f, resolveSoftKind as p, resolveSoftKindWithOverride as m, writeDraft as h, writeInputValue as g } from "./ime.js";
|
|
3
|
-
import { Fragment as _, computed as v, createCommentVNode as y, createElementBlock as b, createElementVNode as x, defineComponent as S, normalizeClass as C,
|
|
3
|
+
import { Fragment as _, computed as v, createCommentVNode as y, createElementBlock as b, createElementVNode as x, defineComponent as S, normalizeClass as C, normalizeStyle as w, onBeforeUnmount as T, onMounted as E, openBlock as D, reactive as O, ref as k, renderList as A, toDisplayString as j, unref as M, withModifiers as N } from "vue";
|
|
4
4
|
//#region src/useSoftKeyboard.ts
|
|
5
|
-
var
|
|
5
|
+
var P = /* @__PURE__ */ new Set([
|
|
6
6
|
"text",
|
|
7
7
|
"search",
|
|
8
8
|
"tel",
|
|
@@ -11,11 +11,11 @@ var N = /* @__PURE__ */ new Set([
|
|
|
11
11
|
"number",
|
|
12
12
|
""
|
|
13
13
|
]);
|
|
14
|
-
function
|
|
15
|
-
return !(e instanceof HTMLInputElement) || e.disabled || e.readOnly ? !1 :
|
|
14
|
+
function F(e) {
|
|
15
|
+
return !(e instanceof HTMLInputElement) || e.disabled || e.readOnly ? !1 : P.has((e.type || "text").toLowerCase());
|
|
16
16
|
}
|
|
17
|
-
function
|
|
18
|
-
let e =
|
|
17
|
+
function I() {
|
|
18
|
+
let e = O({
|
|
19
19
|
visible: !1,
|
|
20
20
|
mode: "zh",
|
|
21
21
|
kind: "text",
|
|
@@ -120,9 +120,9 @@ function F() {
|
|
|
120
120
|
} else e.mode === "en" && (n >= "a" && n <= "z" || n >= "A" && n <= "Z") && (n = e.shift ? n.toUpperCase() : n.toLowerCase(), e.shift = !1), x(n);
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
|
-
function
|
|
123
|
+
function D(e) {
|
|
124
124
|
let t = e.target;
|
|
125
|
-
|
|
125
|
+
F(t) && (n && t instanceof Node && n.contains(t) || _(t));
|
|
126
126
|
}
|
|
127
127
|
function k(e) {
|
|
128
128
|
if (e.target !== t) return;
|
|
@@ -132,10 +132,10 @@ function F() {
|
|
|
132
132
|
}, 0);
|
|
133
133
|
}
|
|
134
134
|
function A(e) {
|
|
135
|
-
n = e, !s && (s = !0, document.addEventListener("focusin",
|
|
135
|
+
n = e, !s && (s = !0, document.addEventListener("focusin", D), document.addEventListener("focusout", k));
|
|
136
136
|
}
|
|
137
137
|
function j() {
|
|
138
|
-
s &&= (document.removeEventListener("focusin",
|
|
138
|
+
s &&= (document.removeEventListener("focusin", D), document.removeEventListener("focusout", k), !1), n = null, y(!1);
|
|
139
139
|
}
|
|
140
140
|
return {
|
|
141
141
|
state: e,
|
|
@@ -149,47 +149,54 @@ function F() {
|
|
|
149
149
|
getTarget: () => t
|
|
150
150
|
};
|
|
151
151
|
}
|
|
152
|
-
var
|
|
153
|
-
function
|
|
154
|
-
return
|
|
152
|
+
var L = I();
|
|
153
|
+
function R() {
|
|
154
|
+
return L;
|
|
155
155
|
}
|
|
156
156
|
//#endregion
|
|
157
157
|
//#region src/SoftKeyboard.vue?vue&type=script&setup=true&lang.ts
|
|
158
|
-
var
|
|
158
|
+
var z = { class: "vti-kb__panel" }, B = { class: "vti-kb__strip" }, V = { class: "vti-kb__buffer" }, H = {
|
|
159
159
|
key: 0,
|
|
160
160
|
class: "vti-kb__cands"
|
|
161
|
-
},
|
|
161
|
+
}, U = ["onPointerdown"], W = {
|
|
162
162
|
key: 0,
|
|
163
163
|
class: "vti-kb__hint"
|
|
164
|
-
},
|
|
164
|
+
}, G = {
|
|
165
165
|
key: 1,
|
|
166
166
|
class: "vti-kb__hint"
|
|
167
|
-
},
|
|
167
|
+
}, K = ["onPointerdown"], q = { class: "vti-kb__row vti-kb__row--last" }, J = {
|
|
168
168
|
key: 0,
|
|
169
169
|
type: "button",
|
|
170
170
|
class: "vti-kb__key vti-kb__key--ghost",
|
|
171
171
|
disabled: ""
|
|
172
|
-
},
|
|
172
|
+
}, Y = {
|
|
173
173
|
key: 1,
|
|
174
174
|
type: "button",
|
|
175
175
|
class: "vti-kb__key vti-kb__key--ghost",
|
|
176
176
|
disabled: ""
|
|
177
|
-
},
|
|
177
|
+
}, X = ["onPointerdown"], Z = { class: "vti-kb__row vti-kb__row--num" }, Q = /* @__PURE__ */ S({
|
|
178
178
|
__name: "SoftKeyboard",
|
|
179
|
-
props: {
|
|
179
|
+
props: {
|
|
180
|
+
instance: {},
|
|
181
|
+
accent: {},
|
|
182
|
+
background: {}
|
|
183
|
+
},
|
|
180
184
|
setup(e) {
|
|
181
|
-
let t = e.instance ??
|
|
182
|
-
|
|
183
|
-
|
|
185
|
+
let t = e, n = t.instance ?? L, r = k(null), i = n.candidates, a = v(() => {
|
|
186
|
+
let e = {};
|
|
187
|
+
return t.accent && (e["--vti-accent"] = t.accent), t.background && (e["--vti-bg"] = t.background), Object.keys(e).length > 0 ? e : void 0;
|
|
188
|
+
});
|
|
189
|
+
E(() => n.attach(r.value)), T(() => n.detach());
|
|
190
|
+
function o(e) {
|
|
184
191
|
e.preventDefault(), e.stopPropagation();
|
|
185
192
|
}
|
|
186
|
-
function
|
|
187
|
-
|
|
193
|
+
function s(e, t) {
|
|
194
|
+
o(e), n.press(t);
|
|
188
195
|
}
|
|
189
|
-
function
|
|
190
|
-
|
|
196
|
+
function c(e, t) {
|
|
197
|
+
o(e), n.pickCandidate(t);
|
|
191
198
|
}
|
|
192
|
-
let
|
|
199
|
+
let l = [
|
|
193
200
|
[
|
|
194
201
|
"q",
|
|
195
202
|
"w",
|
|
@@ -222,7 +229,7 @@ var R = { class: "vti-kb__panel" }, z = { class: "vti-kb__strip" }, B = { class:
|
|
|
222
229
|
"n",
|
|
223
230
|
"m"
|
|
224
231
|
]
|
|
225
|
-
],
|
|
232
|
+
], u = [
|
|
226
233
|
[
|
|
227
234
|
"7",
|
|
228
235
|
"8",
|
|
@@ -242,97 +249,98 @@ var R = { class: "vti-kb__panel" }, z = { class: "vti-kb__strip" }, B = { class:
|
|
|
242
249
|
"mode:back"
|
|
243
250
|
]
|
|
244
251
|
];
|
|
245
|
-
function
|
|
246
|
-
return
|
|
252
|
+
function d(e) {
|
|
253
|
+
return n.state.mode === "en" && n.state.shift ? e.toUpperCase() : e;
|
|
247
254
|
}
|
|
248
|
-
function
|
|
249
|
-
return
|
|
255
|
+
function f() {
|
|
256
|
+
return n.state.prevTextMode === "zh" ? "拼音" : "英文";
|
|
250
257
|
}
|
|
251
|
-
return (e,
|
|
258
|
+
return (e, t) => (D(), b("div", {
|
|
252
259
|
ref_key: "rootRef",
|
|
253
|
-
ref:
|
|
254
|
-
class: C(["vti-kb", { show:
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
260
|
+
ref: r,
|
|
261
|
+
class: C(["vti-kb", { show: M(n).state.visible }]),
|
|
262
|
+
style: w(a.value),
|
|
263
|
+
onPointerdown: o,
|
|
264
|
+
onMousedown: o,
|
|
265
|
+
onTouchstart: o,
|
|
266
|
+
onClick: o,
|
|
267
|
+
onContextmenu: t[10] ||= N(() => {}, ["prevent"])
|
|
268
|
+
}, [x("div", z, [x("div", B, [x("span", V, j(M(n).state.mode === "zh" ? M(n).state.buffer : M(n).state.draft), 1), M(n).state.mode === "zh" ? (D(), b("div", H, [(D(!0), b(_, null, A(M(i), (e, t) => (D(), b("button", {
|
|
261
269
|
key: `${e.consumed}-${e.text}-${t}`,
|
|
262
270
|
type: "button",
|
|
263
271
|
class: "vti-kb__cand",
|
|
264
|
-
onPointerdown: (t) =>
|
|
265
|
-
},
|
|
266
|
-
key: `n${
|
|
272
|
+
onPointerdown: (t) => c(t, e)
|
|
273
|
+
}, j(e.text), 41, U))), 128)), M(i).length === 0 ? (D(), b("span", W, "候选")) : y("", !0)])) : (D(), b("span", G, j(M(n).state.kind === "text" ? "英文/数字" : M(n).state.kind === "decimal" ? "数字 · 小数" : "数字"), 1))]), M(n).state.mode === "num" ? (D(), b(_, { key: 1 }, [(D(), b(_, null, A(u, (e, t) => x("div", {
|
|
274
|
+
key: `n${t}`,
|
|
267
275
|
class: "vti-kb__row vti-kb__row--num"
|
|
268
|
-
}, [(
|
|
276
|
+
}, [(D(!0), b(_, null, A(e, (e) => (D(), b(_, { key: e }, [e === "." && M(n).state.kind === "digits" ? (D(), b("button", J, " · ")) : e === "mode:back" && M(n).state.kind !== "text" ? (D(), b("button", Y, " · ")) : (D(), b("button", {
|
|
269
277
|
key: 2,
|
|
270
278
|
type: "button",
|
|
271
279
|
class: "vti-kb__key",
|
|
272
|
-
onPointerdown: (t) =>
|
|
273
|
-
},
|
|
280
|
+
onPointerdown: (t) => s(t, e)
|
|
281
|
+
}, j(e === "backspace" ? "退格" : e === "mode:back" ? f() : e), 41, X))], 64))), 128))])), 64)), x("div", Z, [x("button", {
|
|
274
282
|
type: "button",
|
|
275
283
|
class: "vti-kb__key vti-kb__key--zero",
|
|
276
|
-
onPointerdown:
|
|
284
|
+
onPointerdown: t[8] ||= (e) => s(e, "0")
|
|
277
285
|
}, " 0 ", 32), x("button", {
|
|
278
286
|
type: "button",
|
|
279
287
|
class: "vti-kb__key vti-kb__key--done",
|
|
280
|
-
onPointerdown:
|
|
281
|
-
}, " 完成 ", 32)])], 64)) : (
|
|
282
|
-
key: `l${
|
|
288
|
+
onPointerdown: t[9] ||= (e) => s(e, "done")
|
|
289
|
+
}, " 完成 ", 32)])], 64)) : (D(), b(_, { key: 0 }, [(D(), b(_, null, A(l, (e, r) => x("div", {
|
|
290
|
+
key: `l${r}`,
|
|
283
291
|
class: "vti-kb__row"
|
|
284
292
|
}, [
|
|
285
|
-
|
|
293
|
+
r === 2 ? (D(), b("button", {
|
|
286
294
|
key: 0,
|
|
287
295
|
type: "button",
|
|
288
|
-
class: C(["vti-kb__key vti-kb__key--fn", { on:
|
|
289
|
-
onPointerdown:
|
|
296
|
+
class: C(["vti-kb__key vti-kb__key--fn", { on: M(n).state.shift }]),
|
|
297
|
+
onPointerdown: t[0] ||= (e) => s(e, "shift")
|
|
290
298
|
}, " ⇧ ", 34)) : y("", !0),
|
|
291
|
-
(
|
|
299
|
+
(D(!0), b(_, null, A(e, (e) => (D(), b("button", {
|
|
292
300
|
key: e,
|
|
293
301
|
type: "button",
|
|
294
302
|
class: "vti-kb__key vti-kb__key--letter",
|
|
295
|
-
onPointerdown: (t) =>
|
|
296
|
-
},
|
|
297
|
-
|
|
303
|
+
onPointerdown: (t) => s(t, e)
|
|
304
|
+
}, j(d(e)), 41, K))), 128)),
|
|
305
|
+
r === 2 ? (D(), b("button", {
|
|
298
306
|
key: 1,
|
|
299
307
|
type: "button",
|
|
300
308
|
class: "vti-kb__key vti-kb__key--fn",
|
|
301
|
-
onPointerdown:
|
|
309
|
+
onPointerdown: t[1] ||= (e) => s(e, "backspace")
|
|
302
310
|
}, " 退格 ", 32)) : y("", !0)
|
|
303
|
-
])), 64)), x("div",
|
|
311
|
+
])), 64)), x("div", q, [
|
|
304
312
|
x("button", {
|
|
305
313
|
type: "button",
|
|
306
314
|
class: "vti-kb__key vti-kb__key--fn",
|
|
307
|
-
onPointerdown:
|
|
315
|
+
onPointerdown: t[2] ||= (e) => s(e, "mode:num")
|
|
308
316
|
}, " 123 ", 32),
|
|
309
317
|
x("button", {
|
|
310
318
|
type: "button",
|
|
311
319
|
class: "vti-kb__key vti-kb__key--fn",
|
|
312
|
-
onPointerdown:
|
|
313
|
-
},
|
|
320
|
+
onPointerdown: t[3] ||= (e) => s(e, M(n).state.mode === "zh" ? "mode:en" : "mode:zh")
|
|
321
|
+
}, j(M(n).state.mode === "zh" ? "英" : "拼"), 33),
|
|
314
322
|
x("button", {
|
|
315
323
|
type: "button",
|
|
316
324
|
class: "vti-kb__key vti-kb__key--space",
|
|
317
|
-
onPointerdown:
|
|
325
|
+
onPointerdown: t[4] ||= (e) => s(e, "space")
|
|
318
326
|
}, " 空格 ", 32),
|
|
319
327
|
x("button", {
|
|
320
328
|
type: "button",
|
|
321
329
|
class: "vti-kb__key vti-kb__key--fn",
|
|
322
|
-
onPointerdown:
|
|
323
|
-
},
|
|
330
|
+
onPointerdown: t[5] ||= (e) => s(e, M(n).state.mode === "zh" ? "，" : ",")
|
|
331
|
+
}, j(M(n).state.mode === "zh" ? "，" : ","), 33),
|
|
324
332
|
x("button", {
|
|
325
333
|
type: "button",
|
|
326
334
|
class: "vti-kb__key vti-kb__key--fn",
|
|
327
|
-
onPointerdown:
|
|
328
|
-
},
|
|
335
|
+
onPointerdown: t[6] ||= (e) => s(e, M(n).state.mode === "zh" ? "。" : ".")
|
|
336
|
+
}, j(M(n).state.mode === "zh" ? "。" : "."), 33),
|
|
329
337
|
x("button", {
|
|
330
338
|
type: "button",
|
|
331
339
|
class: "vti-kb__key vti-kb__key--done",
|
|
332
|
-
onPointerdown:
|
|
340
|
+
onPointerdown: t[7] ||= (e) => s(e, "done")
|
|
333
341
|
}, " 完成 ", 32)
|
|
334
|
-
])], 64))])],
|
|
342
|
+
])], 64))])], 38));
|
|
335
343
|
}
|
|
336
344
|
});
|
|
337
345
|
//#endregion
|
|
338
|
-
export { n as KIND_OVERRIDE_VALUES, e as PINYIN_CHARS, t as PINYIN_PHRASES,
|
|
346
|
+
export { n as KIND_OVERRIDE_VALUES, e as PINYIN_CHARS, t as PINYIN_PHRASES, Q as SoftKeyboard, r as applyCharToDraft, i as backspaceDraft, a as backspaceTextInput, o as candidatesFor, I as createSoftKeyboard, s as draftToDomValue, c as hasFullSelection, l as insertIntoTextInput, u as isCharAllowed, F as isSoftInput, d as normalizeDraft, f as resolveBufferCommit, p as resolveSoftKind, m as resolveSoftKindWithOverride, L as softKeyboard, R as useSoftKeyboard, h as writeDraft, g as writeInputValue };
|
package/dist/style.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.vti-kb{--vti-accent:#3ef2c0;--vti-accent-strong:#
|
|
1
|
+
.vti-kb{--vti-accent:#3ef2c0;--vti-accent-strong:color-mix(in srgb, var(--vti-accent) 72%, #000);--vti-on-accent:#06241c;--vti-bg:#071418f7;--vti-panel-border:#3ef2c04d;--vti-strip-bg:#040d10d9;--vti-strip-border:#3ef2c038;--vti-key-bg:linear-gradient(180deg, #18383cf2, #0d2226f2);--vti-key-border:#94c0bb47;--vti-key-fg:#d7e2e0;--vti-fn-fg:#9fc3bb;--vti-muted-fg:#5f7d81;--vti-buffer-fg:#8df5cf;--vti-key-h:54px;--vti-key-radius:10px;--vti-font:"Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;z-index:2147483000;pointer-events:none;font-family:var(--vti-font);position:fixed;bottom:0;left:0;right:0}.vti-kb.show{pointer-events:auto}.vti-kb__panel{visibility:hidden;max-width:1120px;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));border:1px solid var(--vti-panel-border);background:var(--vti-bg);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-bottom:none;border-radius:14px 14px 0 0;margin:0 auto;transition:transform .18s,visibility 0s linear .18s;transform:translateY(100%);box-shadow:0 -14px 36px #0000008c}.vti-kb.show .vti-kb__panel{visibility:visible;transition:transform .18s,visibility;transform:translateY(0)}.vti-kb__strip{border:1px solid var(--vti-strip-border);background:var(--vti-strip-bg);border-radius:9px;align-items:center;gap:10px;min-height:46px;margin-bottom:8px;padding:4px 10px;display:flex}.vti-kb__buffer{min-width:88px;max-width:220px;color:var(--vti-buffer-fg);letter-spacing:.06em;white-space:nowrap;text-overflow:ellipsis;flex:none;font:600 17px Consolas,monospace;overflow:hidden}.vti-kb__cands{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--vti-accent) 30%, transparent) transparent;flex:1;align-items:center;gap:8px;min-width:0;display:flex;overflow-x:auto}.vti-kb__cand{border:1px solid color-mix(in srgb, var(--vti-accent) 35%, transparent);min-width:52px;height:36px;color:var(--vti-key-fg);background:color-mix(in srgb, var(--vti-bg) 85%, var(--vti-accent));cursor:pointer;border-radius:8px;flex:none;padding:0 14px;font-family:inherit;font-size:19px}.vti-kb__cand:active{border-color:var(--vti-accent);color:var(--vti-bg);background:var(--vti-accent)}.vti-kb__hint{color:var(--vti-muted-fg);white-space:nowrap;font-size:13px}.vti-kb__row{gap:8px;margin-bottom:8px;display:flex}.vti-kb__row--last{margin-bottom:0}.vti-kb__row--num{grid-template-columns:repeat(4,1fr);display:grid}.vti-kb__key{min-width:0;height:var(--vti-key-h);border:1px solid var(--vti-key-border);border-radius:var(--vti-key-radius);color:var(--vti-key-fg);background:var(--vti-key-bg);font:600 21px/1 var(--vti-font);cursor:pointer;flex:1;transition:all 80ms}.vti-kb__key:active{border-color:var(--vti-accent);color:var(--vti-bg);background:var(--vti-accent)}.vti-kb__key--fn{color:var(--vti-fn-fg);flex:1.4;font-size:16px}.vti-kb__key--fn.on{border-color:var(--vti-accent);color:var(--vti-accent)}.vti-kb__key--space{color:var(--vti-fn-fg);flex:3.2;font-size:16px}.vti-kb__key--done{border-color:color-mix(in srgb, var(--vti-accent) 55%, transparent);color:var(--vti-on-accent);background:linear-gradient(180deg, var(--vti-accent), var(--vti-accent-strong));flex:1.8;font-size:18px}.vti-kb__key--done:active{background:var(--vti-buffer-fg)}.vti-kb__key--zero{grid-column:span 2}.vti-kb__key--ghost{opacity:.28;cursor:default}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@junerver/vue-touch-ime",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Vue 3 触摸屏软键盘（内置中文拼音输入法）- 零接线焦点接管、按输入类型限制（数字/小数/文本）、中英数三模式，适配无物理键盘的触屏工控/车载/自助终端",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist -p tsconfig.build.json",
|
|
37
37
|
"test": "vitest run",
|
|
38
38
|
"gen:dict": "python scripts/gen-pinyin-dict.py",
|
|
39
|
-
"prepublishOnly": "npm run build
|
|
39
|
+
"prepublishOnly": "npm run build"
|
|
40
40
|
},
|
|
41
41
|
"keywords": [
|
|
42
42
|
"vue",
|