import Vue from 'vue' ; export class IronswornVueActorSheet extends ActorSheet { _vm : ( Vue & Record < string , any > ) | null ; @override  constructor ( opts ? , data ? ) { super ( opts , data ) ; this . _vm = null ; } @override  render ( force = false , options = { } ) { const sheetData = this . getData ( ) as any ; if ( this . _vm ) { const states = Application . RENDER_STATES ; if ( this . _state == states . RENDERING || this . _state == states . RENDERED ) { if ( sheetData ?. data ) Vue . set ( this . _vm . actor , 'data' , sheetData . data ) ; if ( sheetData ?. actor ?. items ) Vue . set ( this . _vm . actor , 'items' , sheetData . actor . items ) ; if ( sheetData ?. actor ?. flags ) Vue . set ( this . _vm . actor , 'flags' , sheetData . actor . flags ) ; this . _updateEditors ( $ ( this . element ) ) ; this . activateVueListeners ( $ ( this . element ) , true ) ; return this ; } } this . _render ( force , options ) . catch ( ( err ) => { err . message = `An error occurred while rendering ${ this . constructor . name } ${ this . appId }: ${ err . message }` ; console . error ( err ) ; this . _state = Application . RENDER_STATES . ERROR ; } ) . then ( ( _rendered ) => { const el = this . element . find ( '.ironsworn-vueport' ) ; VuePort . render ( null , el [ 0 ] , { data : sheetData } ) . then ( ( vm ) => { this . _vm = vm ; const html = $ ( this . element ) ; this . activateVueListeners ( html ) ; } ) ; } ) ; options . editable = options . editable ?? this . object . isOwner ; this . object . apps [ this . appId ] = this ; return this ; } @override  async close ( options = { } ) { console . log ( '/////////////////////\r\nCLOSING SHEET\r\n/////////////////////' ) ; return super . close ( options ) ; } activateListeners ( html ) { super . activateListeners ( html ) ; if ( this . options . editable ) { html . on ( 'click' , 'img[data-edit]' , ( event ) => this . _onEditImage ( event ) ) ; } } _updateEditors ( _html ) { for ( const [ name ] of Object . entries ( this . editors ) ) { const data = this . object instanceof Document ? this . object . data : this . object ; const initialContent = getProperty ( data , name ) ; const div = $ ( this . element ) . find ( `.editor-content[data-edit="${ name }"]` ) [ 0 ] ; const editor = this . editors && this . editors [ name ] ; if ( editor ) { editor . initial = initialContent ; editor . options . target = div ; } } } @override  activateEditor ( name , options = { } , initialContent = '' ) { const editor = this . editors [ name ] ; if ( ! editor ) throw new Error ( `${ name } is not a registered editor name!` ) ; options = mergeObject ( editor . options , options ) ; options . height = options . target . offsetHeight ; initialContent = editor . initial ; TextEditor . create ( options , initialContent ) . then ( ( mce ) => { editor . mce = mce ; editor . changed = false ; editor . active = true ; mce . focus ( ) ; mce . on ( 'change' , ( _ev ) => ( editor . changed = true ) ) ; } ) ; } param { jQuery } html activateVueListeners ( html , repeat = false ) { if ( ! this . options . editable ) { html . find ( 'input,select,textarea' ) . attr ( 'disabled' , 'true' ) ; return ; } if ( repeat ) return ; html . find ( '.editor-content[data-edit]' ) . each ( ( _i , div ) => this . _activateEditor ( div ) ) ; const inputs = '.section input[type="text"], .section input[type="number"]' ; html . on ( 'focus' , inputs , ( event ) => this . _onFocus ( event ) ) ; } _onFocus ( event ) { const target = event . currentTarget ; setTimeout ( function ( ) { if ( target == document . activeElement ) { $ ( target ) . trigger ( 'select' ) ; } } , 100 ) ; } }