diff --git a/package.json b/package.json index 40cbaba..4772a18 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wkitd", - "version": "1.1.3", + "version": "1.2.0", "type": "module", "main": "dist/index.js", "files": [ diff --git a/src/router/router-components.js b/src/router/router-components.js index 24cef99..db7b8d5 100644 --- a/src/router/router-components.js +++ b/src/router/router-components.js @@ -5,22 +5,7 @@ import { __ROUTER_VIEW__ } from '../constants.js' class RouterView extends Component { static props = { - transition: false, - current: { - type: String, - default: '', - attribute: false, - observer(v, old) { - if (this.keepAlive && v) { - if (old && this.$refs[old]) { - this.$refs[old].deactivated() - } - this.$refs[v]?.$requestUpdate() - this.$refs[v]?.$animate() - this.$refs[v]?.activated() - } - } - } + transition: false } static styles = css` @@ -29,6 +14,43 @@ class RouterView extends Component { } ` + get current() { + return this.#current + } + + set current(v) { + let old = this.#current + this.#current = v + if (this.keepAlive) { + if (old) { + if (this.$refs[old]) { + this.$refs[old].deactivated() + this.$refs[old].remove() + } else { + this.$requestUpdate() + } + } else { + this.$requestUpdate() + } + if (v) { + if (this.$refs[v]) { + this.root.appendChild(this.$refs[v]) + this.$refs[v].$requestUpdate() + if (this.transition) { + this.$refs[v].$animate() + } + this.$refs[v].activated() + } else { + this.$requestUpdate() + } + } + } else { + this.$requestUpdate() + } + } + + #current = '' + #views = [] created() { @@ -47,35 +69,21 @@ class RouterView extends Component { { transform: 'translateX(0)', opacity: 1 } ] } - if (this.keepAlive) { - let template = this.#views.map(it => - this.transition - ? [ - `<${it} ref="${it}" keep-alive #animation="%s" style="%s">`, - [ - { ...option, immediate: this.current === it }, - this.current === it ? '' : 'display:none' - ] - ] - : [ - `<${it} ref="${it}" keep-alive style=%s>`, - [this.current === it ? '' : 'display:none'] - ] - ) - return raw( - template.map(it => it[0]).join(''), - template.map(it => it[1]).flat() - ) - } else { - if (this.current) { - if (this.transition) { - return raw(`<${this.current} #animation="%s">`, [ - option - ]) - } - return raw(`<${this.current}>`) + if (this.current) { + if (this.transition) { + return raw( + `<${this.current} ref="${this.current}" ${ + this.keepAlive ? 'keep-alive' : '' + } #animation="%s">`, + [option] + ) } + return raw( + `<${this.current} ref="${this.current}" ${ + this.keepAlive ? 'keep-alive' : '' + }>` + ) } } } diff --git a/src/router/router-engine.js b/src/router/router-engine.js index 74e56d3..77e2022 100644 --- a/src/router/router-engine.js +++ b/src/router/router-engine.js @@ -138,6 +138,7 @@ class Router { let route = this.#tables.get('!') $view.current = route.name this.#route = { path, name: route.name, params: {}, query: {} } + this.#exec(this.#route) } }