pinyin-ime 0.7.1 → 0.8.0

package/dist/index.d.ts

@@ -439,6 +439,7 @@ declare class PinyinIMEEditor extends LitElement {
     private readonly inputRef;
     private _controller;
     private _unsub;
+    private _cleanupNativeListeners;
     private _customEngine;
     private _dictionaryState;
     /** 词典加载请求序号（递增）；仅接受最后一次请求结果。 */
@@ -483,6 +484,27 @@ declare class PinyinIMEEditor extends LitElement {
     disconnectedCallback(): void;
     willUpdate(changedProperties: PropertyValues<this>): void;
     firstUpdated(): void;
+    /**
+     * 将内部输入节点的关键事件桥接到宿主，供框架在 `<pinyin-ime-editor>` 上监听。
+     *
+     * @param sourceEl - 当前激活的内部输入节点
+     * @returns 解绑函数
+     */
+    private _bindNativeListeners;
+    /**
+     * 转发来自内部输入节点的焦点事件到宿主元素。
+     *
+     * @param e - 内部输入节点触发的焦点事件
+     */
+    private _forwardFocusEvent;
+    /**
+     * 转发来自内部输入节点的通用事件到宿主元素。
+     *
+     * @param e - 内部输入节点触发的事件
+     * @param type - 事件名
+     * @param cancelable - 是否允许取消
+     */
+    private _forwardSimpleEvent;
     private _onValueChange;
     updated(changedProperties: PropertyValues<this>): void;
     /**

package/dist/index.js

@@ -184,7 +184,7 @@ Make sure to test your application with a production build as repeat registratio
   cursor: default;\r
   opacity: 0.5;\r
 }\r
-`;var RESERVED_ATTRIBUTES=new Set(["value","editor-type","page-size","enabled","class"]),PinyinIMEEditor=class extends i3{static styles=[r(PINYIN_IME_STYLE_TEXT)];static properties={value:{type:String},editorType:{type:String,attribute:"editor-type"},pageSize:{type:Number,attribute:"page-size"},enabled:{type:Boolean},popupPosition:{attribute:false},getDictionary:{attribute:false}};inputRef=e4();_controller=null;_unsub=null;_customEngine=null;_dictionaryState="idle";_dictionaryLoadSeq=0;_position=null;_onWinResize=()=>{this._syncPosition(),this.requestUpdate();};constructor(){super(),this.value="",this.editorType="input",this.enabled=true,this.pageSize=5,this.popupPosition="top";}_resolvedEngine(){return this._customEngine}_syncPosition(){let el=this.inputRef.value,snap=this._controller?.getSnapshot();if(!el||!snap?.hasActiveComposition){this._position=null;return}let rect=el.getBoundingClientRect();this._position={top:rect.top,left:rect.left,width:rect.width,height:rect.height};}_popupStyle(position){return this.popupPosition==="bottom"?`top: ${position.top+position.height+2}px; left: ${position.left}px; width: ${position.width}px;`:this.popupPosition==="left"?`top: ${position.top}px; left: ${position.left-2}px; width: ${position.width}px; transform: translateX(-100%);`:this.popupPosition==="right"?`top: ${position.top}px; left: ${position.left+position.width+2}px; width: ${position.width}px;`:`top: ${position.top}px; left: ${position.left}px; width: ${position.width}px; transform: translateY(-100%) translateY(-2px);`}_getPassThroughAttributes(){let attrs={};for(let i5=0;i5<this.attributes.length;i5++){let a3=this.attributes[i5];RESERVED_ATTRIBUTES.has(a3.name)||(attrs[a3.name]=a3.value);}return attrs}async _importDefaultGoogleDict(){try{return (await import('pinyin-ime/dictionary/google_pinyin_dict')).dict}catch{throw new Error("Failed to import default google dictionary")}}_loadDictionary(){let requestSeq=++this._dictionaryLoadSeq;this._dictionaryState="loading",this._customEngine=null,(typeof this.getDictionary=="function"?Promise.resolve(this.getDictionary()):this._importDefaultGoogleDict()).then(dict=>{if(requestSeq!==this._dictionaryLoadSeq)return;let engine=createPinyinEngine(dict);this._customEngine=engine,registerDefaultEngine(engine),this._dictionaryState="ready";}).catch(()=>{requestSeq===this._dictionaryLoadSeq&&(this._customEngine=null,this._dictionaryState="error");}).finally(()=>{requestSeq===this._dictionaryLoadSeq&&(this._controller?.setOptions({getEngine:()=>this._resolvedEngine()}),this.requestUpdate());});}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._onWinResize),window.addEventListener("scroll",this._onWinResize,true),this._loadDictionary();}disconnectedCallback(){super.disconnectedCallback(),this._unsub?.(),this._unsub=null,this._controller=null,window.removeEventListener("resize",this._onWinResize),window.removeEventListener("scroll",this._onWinResize,true);}willUpdate(changedProperties){changedProperties.has("getDictionary")&&this._loadDictionary();}firstUpdated(){let el=this.inputRef.value;el&&(this._controller=new PinyinIMEController({getValue:()=>this.value,onValueChange:v2=>this._onValueChange(v2),getElement:()=>this.inputRef.value??null,getEngine:()=>this._resolvedEngine(),enabled:this.enabled,pageSize:this.pageSize}),this._unsub=this._controller.subscribe(()=>{this._syncPosition(),this.requestUpdate();}),this.requestUpdate(),el.addEventListener("beforeinput",e5=>this._controller?.handleBeforeInput(e5),true),el.addEventListener("keydown",e5=>this._controller?.handleKeyDown(e5),true));}_onValueChange(v2){this.value=v2;let el=this.inputRef.value;el&&(el.value=v2),this.dispatchEvent(new CustomEvent("change",{detail:{value:v2},bubbles:true,composed:true})),this.requestUpdate();}updated(changedProperties){(changedProperties.has("enabled")||changedProperties.has("pageSize")||changedProperties.has("value"))&&this._controller?.setOptions({getValue:()=>this.value,onValueChange:v2=>this._onValueChange(v2),getElement:()=>this.inputRef.value??null,getEngine:()=>this._resolvedEngine(),enabled:this.enabled,pageSize:this.pageSize});let inputEl=this.inputRef.value;if(inputEl){inputEl.value!==this.value&&(inputEl.value=this.value);let passThrough=this._getPassThroughAttributes();for(let[name,value]of Object.entries(passThrough))inputEl.setAttribute(name,value);}}_onSelect(item){this._controller?.selectCandidate(item);}_onPageDelta(delta){this._controller?.addPage(delta);}render(){let snap=this._controller?.getSnapshot(),show=snap?.hasActiveComposition&&this._position!=null&&snap.pinyinInput.length>0,field=this.editorType==="textarea"?T`<textarea
+`;var RESERVED_ATTRIBUTES=new Set(["value","editor-type","page-size","enabled","class"]),PinyinIMEEditor=class extends i3{static styles=[r(PINYIN_IME_STYLE_TEXT)];static properties={value:{type:String},editorType:{type:String,attribute:"editor-type"},pageSize:{type:Number,attribute:"page-size"},enabled:{type:Boolean},popupPosition:{attribute:false},getDictionary:{attribute:false}};inputRef=e4();_controller=null;_unsub=null;_cleanupNativeListeners=null;_customEngine=null;_dictionaryState="idle";_dictionaryLoadSeq=0;_position=null;_onWinResize=()=>{this._syncPosition(),this.requestUpdate();};constructor(){super(),this.value="",this.editorType="input",this.enabled=true,this.pageSize=5,this.popupPosition="top";}_resolvedEngine(){return this._customEngine}_syncPosition(){let el=this.inputRef.value,snap=this._controller?.getSnapshot();if(!el||!snap?.hasActiveComposition){this._position=null;return}let rect=el.getBoundingClientRect();this._position={top:rect.top,left:rect.left,width:rect.width,height:rect.height};}_popupStyle(position){return this.popupPosition==="bottom"?`top: ${position.top+position.height+2}px; left: ${position.left}px; width: ${position.width}px;`:this.popupPosition==="left"?`top: ${position.top}px; left: ${position.left-2}px; width: ${position.width}px; transform: translateX(-100%);`:this.popupPosition==="right"?`top: ${position.top}px; left: ${position.left+position.width+2}px; width: ${position.width}px;`:`top: ${position.top}px; left: ${position.left}px; width: ${position.width}px; transform: translateY(-100%) translateY(-2px);`}_getPassThroughAttributes(){let attrs={};for(let i5=0;i5<this.attributes.length;i5++){let a3=this.attributes[i5];RESERVED_ATTRIBUTES.has(a3.name)||(attrs[a3.name]=a3.value);}return attrs}async _importDefaultGoogleDict(){try{return (await import('pinyin-ime/dictionary/google_pinyin_dict')).dict}catch{throw new Error("Failed to import default google dictionary")}}_loadDictionary(){let requestSeq=++this._dictionaryLoadSeq;this._dictionaryState="loading",this._customEngine=null,(typeof this.getDictionary=="function"?Promise.resolve(this.getDictionary()):this._importDefaultGoogleDict()).then(dict=>{if(requestSeq!==this._dictionaryLoadSeq)return;let engine=createPinyinEngine(dict);this._customEngine=engine,registerDefaultEngine(engine),this._dictionaryState="ready";}).catch(()=>{requestSeq===this._dictionaryLoadSeq&&(this._customEngine=null,this._dictionaryState="error");}).finally(()=>{requestSeq===this._dictionaryLoadSeq&&(this._controller?.setOptions({getEngine:()=>this._resolvedEngine()}),this.requestUpdate());});}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._onWinResize),window.addEventListener("scroll",this._onWinResize,true),this._loadDictionary();}disconnectedCallback(){super.disconnectedCallback(),this._cleanupNativeListeners?.(),this._cleanupNativeListeners=null,this._unsub?.(),this._unsub=null,this._controller=null,window.removeEventListener("resize",this._onWinResize),window.removeEventListener("scroll",this._onWinResize,true);}willUpdate(changedProperties){changedProperties.has("getDictionary")&&this._loadDictionary();}firstUpdated(){let el=this.inputRef.value;el&&(this._controller=new PinyinIMEController({getValue:()=>this.value,onValueChange:v2=>this._onValueChange(v2),getElement:()=>this.inputRef.value??null,getEngine:()=>this._resolvedEngine(),enabled:this.enabled,pageSize:this.pageSize}),this._unsub=this._controller.subscribe(()=>{this._syncPosition(),this.requestUpdate();}),this.requestUpdate(),this._cleanupNativeListeners=this._bindNativeListeners(el));}_bindNativeListeners(sourceEl){let onBeforeInput=e5=>{this._controller?.handleBeforeInput(e5);},onKeyDown=e5=>{this._controller?.handleKeyDown(e5);},onFocusLike=e5=>{this._forwardFocusEvent(e5);},onSelect=e5=>{this._forwardSimpleEvent(e5,"select",false);},onInvalid=e5=>{this._forwardSimpleEvent(e5,"invalid",true);};return sourceEl.addEventListener("beforeinput",onBeforeInput,true),sourceEl.addEventListener("keydown",onKeyDown,true),sourceEl.addEventListener("focus",onFocusLike,true),sourceEl.addEventListener("blur",onFocusLike,true),sourceEl.addEventListener("focusin",onFocusLike,true),sourceEl.addEventListener("focusout",onFocusLike,true),sourceEl.addEventListener("select",onSelect,true),sourceEl.addEventListener("invalid",onInvalid,true),()=>{sourceEl.removeEventListener("beforeinput",onBeforeInput,true),sourceEl.removeEventListener("keydown",onKeyDown,true),sourceEl.removeEventListener("focus",onFocusLike,true),sourceEl.removeEventListener("blur",onFocusLike,true),sourceEl.removeEventListener("focusin",onFocusLike,true),sourceEl.removeEventListener("focusout",onFocusLike,true),sourceEl.removeEventListener("select",onSelect,true),sourceEl.removeEventListener("invalid",onInvalid,true);}}_forwardFocusEvent(e5){if(e5.target!==this.inputRef.value)return;let forwarded=new FocusEvent(e5.type,{bubbles:true,composed:true,cancelable:e5.cancelable,relatedTarget:e5.relatedTarget});!this.dispatchEvent(forwarded)&&e5.cancelable&&e5.preventDefault();}_forwardSimpleEvent(e5,type,cancelable){if(e5.target!==this.inputRef.value)return;let forwarded=new Event(type,{bubbles:true,composed:true,cancelable});!this.dispatchEvent(forwarded)&&cancelable&&e5.cancelable&&e5.preventDefault();}_onValueChange(v2){this.value=v2;let el=this.inputRef.value;el&&(el.value=v2),this.dispatchEvent(new CustomEvent("change",{detail:{value:v2},bubbles:true,composed:true})),this.requestUpdate();}updated(changedProperties){(changedProperties.has("enabled")||changedProperties.has("pageSize")||changedProperties.has("value"))&&this._controller?.setOptions({getValue:()=>this.value,onValueChange:v2=>this._onValueChange(v2),getElement:()=>this.inputRef.value??null,getEngine:()=>this._resolvedEngine(),enabled:this.enabled,pageSize:this.pageSize});let inputEl=this.inputRef.value;if(inputEl){inputEl.value!==this.value&&(inputEl.value=this.value);let passThrough=this._getPassThroughAttributes();for(let[name,value]of Object.entries(passThrough))inputEl.setAttribute(name,value);}}_onSelect(item){this._controller?.selectCandidate(item);}_onPageDelta(delta){this._controller?.addPage(delta);}render(){let snap=this._controller?.getSnapshot(),show=snap?.hasActiveComposition&&this._position!=null&&snap.pinyinInput.length>0,field=this.editorType==="textarea"?T`<textarea
             ${n5(this.inputRef)}
             class="pinyin-ime-textarea"
             .value=${this.value}