parent
5e9dd986df
commit
1cddfb6731
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "wkitd",
|
"name": "wkitd",
|
||||||
"version": "1.1.3",
|
"version": "1.2.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
"files": [
|
"files": [
|
||||||
|
|
|
@ -5,22 +5,7 @@ import { __ROUTER_VIEW__ } from '../constants.js'
|
||||||
|
|
||||||
class RouterView extends Component {
|
class RouterView extends Component {
|
||||||
static props = {
|
static props = {
|
||||||
transition: false,
|
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()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static styles = css`
|
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 = []
|
#views = []
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
|
@ -47,35 +69,21 @@ class RouterView extends Component {
|
||||||
{ transform: 'translateX(0)', opacity: 1 }
|
{ 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"></${it}>`,
|
|
||||||
[
|
|
||||||
{ ...option, immediate: this.current === it },
|
|
||||||
this.current === it ? '' : 'display:none'
|
|
||||||
]
|
|
||||||
]
|
|
||||||
: [
|
|
||||||
`<${it} ref="${it}" keep-alive style=%s></${it}>`,
|
|
||||||
[this.current === it ? '' : 'display:none']
|
|
||||||
]
|
|
||||||
)
|
|
||||||
|
|
||||||
return raw(
|
if (this.current) {
|
||||||
template.map(it => it[0]).join(''),
|
if (this.transition) {
|
||||||
template.map(it => it[1]).flat()
|
return raw(
|
||||||
)
|
`<${this.current} ref="${this.current}" ${
|
||||||
} else {
|
this.keepAlive ? 'keep-alive' : ''
|
||||||
if (this.current) {
|
} #animation="%s"></${this.current}>`,
|
||||||
if (this.transition) {
|
[option]
|
||||||
return raw(`<${this.current} #animation="%s"></${this.current}>`, [
|
)
|
||||||
option
|
|
||||||
])
|
|
||||||
}
|
|
||||||
return raw(`<${this.current}></${this.current}>`)
|
|
||||||
}
|
}
|
||||||
|
return raw(
|
||||||
|
`<${this.current} ref="${this.current}" ${
|
||||||
|
this.keepAlive ? 'keep-alive' : ''
|
||||||
|
}></${this.current}>`
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -138,6 +138,7 @@ class Router {
|
||||||
let route = this.#tables.get('!')
|
let route = this.#tables.get('!')
|
||||||
$view.current = route.name
|
$view.current = route.name
|
||||||
this.#route = { path, name: route.name, params: {}, query: {} }
|
this.#route = { path, name: route.name, params: {}, query: {} }
|
||||||
|
this.#exec(this.#route)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue