464 lines
16 KiB
TypeScript
464 lines
16 KiB
TypeScript
import {
|
|
computed,
|
|
defineComponent,
|
|
h,
|
|
inject,
|
|
onBeforeUnmount,
|
|
provide,
|
|
ref,
|
|
shallowReactive,
|
|
watch,
|
|
type PropType,
|
|
type VNode,
|
|
} from 'vue'
|
|
import {
|
|
routeLocationKey,
|
|
RouterView,
|
|
type RouteLocationNormalizedLoaded,
|
|
type RouteLocationRaw,
|
|
} from 'vue-router'
|
|
import { nativeRouterKey } from './runtime'
|
|
import type {
|
|
NativeDirection,
|
|
NativeNavigationOptions,
|
|
NativeRouterRuntime,
|
|
NativeSourceRect,
|
|
NativeViewEntry,
|
|
} from './types'
|
|
|
|
export function useNativeRouter() {
|
|
const runtime = inject<NativeRouterRuntime>(nativeRouterKey)
|
|
if (!runtime) throw new Error('Native Vue Router is not installed. Call app.use(nativeRouter).')
|
|
return runtime
|
|
}
|
|
|
|
export function useNativeViewLifecycle() {
|
|
const runtime = useNativeRouter()
|
|
return {
|
|
activeKey: runtime.activeKey,
|
|
transaction: runtime.transaction,
|
|
}
|
|
}
|
|
|
|
const NativeRouteScope = defineComponent({
|
|
name: 'NativeRouteScope',
|
|
props: {
|
|
route: { type: Object as PropType<RouteLocationNormalizedLoaded>, required: true },
|
|
},
|
|
setup(props, { slots }) {
|
|
const scopedRoute = shallowReactive({ ...props.route }) as RouteLocationNormalizedLoaded
|
|
watch(() => props.route, (route) => Object.assign(scopedRoute, route), { immediate: true })
|
|
provide(routeLocationKey, scopedRoute)
|
|
return () => slots.default?.()
|
|
},
|
|
})
|
|
|
|
function interactiveRole(entry: NativeViewEntry, runtime: NativeRouterRuntime) {
|
|
const transaction = runtime.transaction.value
|
|
if (!transaction) return entry.key === runtime.activeKey.value ? 'active' : 'inactive'
|
|
if (entry.key === transaction.fromKey) return 'from'
|
|
if (entry.key === transaction.toKey) return 'to'
|
|
return 'inactive'
|
|
}
|
|
|
|
export const NativeRouterView = defineComponent({
|
|
name: 'NativeRouterView',
|
|
setup(_, { slots }) {
|
|
const runtime = useNativeRouter()
|
|
return () => {
|
|
const transaction = runtime.transaction.value
|
|
const style = transaction ? { '--native-progress': String(transaction.progress) } : undefined
|
|
const children = runtime.entries.value
|
|
.filter((entry) => entry.mounted)
|
|
.map((entry) => {
|
|
const role = interactiveRole(entry, runtime)
|
|
const definition = transaction ? runtime.presentationFor(transaction.presentation) : undefined
|
|
const customStyle = transaction && (role === 'from' || role === 'to')
|
|
? definition?.layerStyle?.({
|
|
progress: transaction.progress,
|
|
role,
|
|
direction: transaction.direction,
|
|
sourceRect: transaction.sourceRect,
|
|
})
|
|
: undefined
|
|
return h('section', {
|
|
key: entry.key,
|
|
class: ['nvr-view', `nvr-view--${role}`],
|
|
style: customStyle,
|
|
'data-native-role': role,
|
|
'data-native-presentation': transaction?.presentation,
|
|
'data-native-direction': transaction?.direction,
|
|
inert: role === 'inactive' ? '' : undefined,
|
|
'aria-hidden': role === 'inactive' ? 'true' : undefined,
|
|
}, [
|
|
h(RouterView, { route: entry.route }, {
|
|
default: ({ Component, route }: { Component: VNode | null; route: RouteLocationNormalizedLoaded }) => {
|
|
if (slots.default) return slots.default({ Component, route, entry })
|
|
return Component
|
|
? h(NativeRouteScope, { route }, { default: () => Component })
|
|
: null
|
|
},
|
|
}),
|
|
])
|
|
})
|
|
return h('div', {
|
|
class: ['nvr-router-view', transaction && 'nvr-router-view--interactive'],
|
|
style,
|
|
'data-native-presentation': transaction?.presentation,
|
|
'data-native-direction': transaction?.direction,
|
|
}, children)
|
|
}
|
|
},
|
|
})
|
|
|
|
export const NativeLink = defineComponent({
|
|
name: 'NativeLink',
|
|
props: {
|
|
to: { type: [String, Object] as PropType<RouteLocationRaw>, required: true },
|
|
replace: Boolean,
|
|
presentation: String,
|
|
},
|
|
setup(props, { slots, attrs }) {
|
|
const runtime = useNativeRouter()
|
|
const href = computed(() => runtime.router.resolve(props.to).href)
|
|
const activate = (event: MouseEvent) => {
|
|
if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
|
|
event.preventDefault()
|
|
void (props.replace
|
|
? runtime.replace(props.to, { presentation: props.presentation })
|
|
: runtime.push(props.to, { presentation: props.presentation }))
|
|
}
|
|
return () => h('a', { ...attrs, href: href.value, onClick: activate }, slots.default?.())
|
|
},
|
|
})
|
|
|
|
function shouldIgnoreGesture(target: EventTarget | null) {
|
|
if (!(target instanceof Element)) return true
|
|
return Boolean(target.closest('[data-native-gesture="ignore"], input, textarea, select, option, [contenteditable="true"]'))
|
|
}
|
|
|
|
function sourceRect(element: HTMLElement): NativeSourceRect {
|
|
const rect = element.getBoundingClientRect()
|
|
return {
|
|
top: rect.top,
|
|
left: rect.left,
|
|
width: rect.width,
|
|
height: rect.height,
|
|
viewportWidth: window.innerWidth,
|
|
viewportHeight: window.innerHeight,
|
|
}
|
|
}
|
|
|
|
function createPointerGesture(
|
|
element: () => HTMLElement | null,
|
|
begin: (direction: NativeDirection) => Promise<number | null>,
|
|
directionForDelta: (deltaX: number) => NativeDirection | null,
|
|
) {
|
|
let pointerId = -1
|
|
let startX = 0
|
|
let startY = 0
|
|
let lastX = 0
|
|
let lastTime = 0
|
|
let captured = false
|
|
let beginPromise: Promise<number | null> | null = null
|
|
let ending = false
|
|
let bufferedProgress = 0
|
|
let bufferedVelocity = 0
|
|
|
|
const down = (event: PointerEvent) => {
|
|
if (!event.isPrimary || event.button !== 0 || shouldIgnoreGesture(event.target)) return
|
|
pointerId = event.pointerId
|
|
startX = lastX = event.clientX
|
|
startY = event.clientY
|
|
lastTime = event.timeStamp
|
|
captured = false
|
|
beginPromise = null
|
|
ending = false
|
|
}
|
|
const move = async (event: PointerEvent) => {
|
|
if (event.pointerId !== pointerId) return
|
|
const dx = event.clientX - startX
|
|
const dy = event.clientY - startY
|
|
if (!captured) {
|
|
if (Math.abs(dx) < 8 || Math.abs(dx) < Math.abs(dy) * 1.15) return
|
|
const direction = directionForDelta(dx)
|
|
if (!direction) return reset()
|
|
captured = true
|
|
ending = false
|
|
element()?.setPointerCapture(pointerId)
|
|
beginPromise = begin(direction)
|
|
}
|
|
event.preventDefault()
|
|
const elapsed = Math.max(8, event.timeStamp - lastTime)
|
|
bufferedVelocity = Math.abs(event.clientX - lastX) / elapsed
|
|
bufferedProgress = Math.min(1, Math.abs(dx) / Math.max(1, element()?.clientWidth ?? window.innerWidth))
|
|
lastX = event.clientX
|
|
lastTime = event.timeStamp
|
|
const pending = beginPromise
|
|
if (pending) {
|
|
const id = await pending
|
|
if (id === null) return reset()
|
|
if (pending !== beginPromise || ending) return
|
|
const runtime = injectRuntimeFromElement(element())
|
|
runtime?.updateInteractive(bufferedProgress, bufferedVelocity)
|
|
}
|
|
}
|
|
const up = async (event: PointerEvent) => {
|
|
if (event.pointerId !== pointerId) return
|
|
ending = true
|
|
const runtime = injectRuntimeFromElement(element())
|
|
const id = beginPromise ? await beginPromise : null
|
|
if (captured && id !== null && runtime) {
|
|
runtime.updateInteractive(bufferedProgress, bufferedVelocity)
|
|
await runtime.finishInteractive()
|
|
}
|
|
reset()
|
|
}
|
|
const cancel = async () => {
|
|
ending = true
|
|
const runtime = injectRuntimeFromElement(element())
|
|
const id = beginPromise ? await beginPromise : null
|
|
if (captured && id !== null && runtime) await runtime.cancelInteractive()
|
|
reset()
|
|
}
|
|
const reset = () => {
|
|
pointerId = -1
|
|
captured = false
|
|
beginPromise = null
|
|
ending = false
|
|
bufferedProgress = 0
|
|
bufferedVelocity = 0
|
|
}
|
|
return { down, move, up, cancel }
|
|
}
|
|
|
|
const runtimeByElement = new WeakMap<Element, NativeRouterRuntime>()
|
|
function injectRuntimeFromElement(element: Element | null) {
|
|
return element ? runtimeByElement.get(element) : undefined
|
|
}
|
|
|
|
export const NativeGestureLink = defineComponent({
|
|
name: 'NativeGestureLink',
|
|
inheritAttrs: false,
|
|
props: {
|
|
to: { type: [String, Object] as PropType<RouteLocationRaw>, required: true },
|
|
presentation: { type: String, default: 'reveal' },
|
|
replace: Boolean,
|
|
direction: { type: String as PropType<'left' | 'right' | 'any'>, default: 'any' },
|
|
as: { type: String, default: 'div' },
|
|
},
|
|
setup(props, { slots, attrs }) {
|
|
const runtime = useNativeRouter()
|
|
const root = ref<HTMLElement | null>(null)
|
|
let dragDistance = 0
|
|
let suppressClick = false
|
|
const gesture = createPointerGesture(
|
|
() => root.value,
|
|
async (direction) => runtime.beginInteractive('push', props.to, {
|
|
presentation: props.presentation,
|
|
replace: props.replace,
|
|
direction,
|
|
sourceRect: root.value ? sourceRect(root.value) : undefined,
|
|
}),
|
|
(dx) => {
|
|
if (props.direction === 'left' && dx >= 0) return null
|
|
if (props.direction === 'right' && dx <= 0) return null
|
|
return dx < 0 ? 'forward' : 'back'
|
|
},
|
|
)
|
|
onBeforeUnmount(() => void runtime.cancelInteractive())
|
|
const click = (event: MouseEvent) => {
|
|
if (suppressClick) {
|
|
suppressClick = false
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
return
|
|
}
|
|
void runtime.push(props.to, { presentation: props.presentation, replace: props.replace })
|
|
}
|
|
return () => h(props.as, {
|
|
...attrs,
|
|
ref: (value: unknown) => {
|
|
root.value = value as HTMLElement | null
|
|
if (root.value) runtimeByElement.set(root.value, runtime)
|
|
},
|
|
class: ['nvr-gesture-link', attrs.class],
|
|
onPointerdown: (event: PointerEvent) => {
|
|
// Component-owned gestures outrank their containing navigator.
|
|
event.stopPropagation()
|
|
dragDistance = 0
|
|
suppressClick = false
|
|
gesture.down(event)
|
|
},
|
|
onPointermove: (event: PointerEvent) => {
|
|
if (event.buttons) {
|
|
dragDistance += Math.abs(event.movementX)
|
|
if (dragDistance > 8) suppressClick = true
|
|
}
|
|
void gesture.move(event)
|
|
},
|
|
onPointerup: gesture.up,
|
|
onPointercancel: gesture.cancel,
|
|
onClick: click,
|
|
}, slots.default?.())
|
|
},
|
|
})
|
|
|
|
export const NativeNavigator = defineComponent({
|
|
name: 'NativeNavigator',
|
|
props: {
|
|
siblings: { type: Array as PropType<RouteLocationRaw[]>, default: () => [] },
|
|
edgeWidth: { type: Number, default: 28 },
|
|
},
|
|
setup(props, { slots }) {
|
|
const runtime = useNativeRouter()
|
|
const root = ref<HTMLElement | null>(null)
|
|
let candidate: 'back' | 'sibling' | null = null
|
|
const gesture = createPointerGesture(
|
|
() => root.value,
|
|
async (direction) => {
|
|
if (candidate === 'back') return runtime.beginInteractive('pop')
|
|
const current = runtime.router.currentRoute.value.fullPath
|
|
const index = props.siblings.findIndex((route) => runtime.router.resolve(route).fullPath === current)
|
|
const nextIndex = index + (direction === 'forward' ? 1 : -1)
|
|
const target = props.siblings[nextIndex]
|
|
if (index < 0 || !target) return null
|
|
return runtime.beginInteractive('sibling', target, {
|
|
replace: runtime.router.resolve(target).meta.native?.siblingHistory !== 'push',
|
|
direction,
|
|
presentation: 'slide',
|
|
})
|
|
},
|
|
(dx) => {
|
|
const rtl = getComputedStyle(root.value ?? document.documentElement).direction === 'rtl'
|
|
const logicalDx = rtl ? -dx : dx
|
|
if (candidate === 'back') return logicalDx > 0 ? 'back' : null
|
|
return logicalDx < 0 ? 'forward' : 'back'
|
|
},
|
|
)
|
|
const down = (event: PointerEvent) => {
|
|
const rect = root.value?.getBoundingClientRect()
|
|
const rtl = getComputedStyle(root.value ?? document.documentElement).direction === 'rtl'
|
|
const gestureSetting = runtime.router.currentRoute.value.meta.native?.gesture
|
|
const atEdge = rect
|
|
? (rtl ? rect.right - event.clientX : event.clientX - rect.left) <= props.edgeWidth
|
|
: false
|
|
candidate = atEdge && gestureSetting !== false && runtime.canGoBack.value
|
|
? 'back'
|
|
: props.siblings.length && gestureSetting !== false
|
|
? 'sibling'
|
|
: null
|
|
if (candidate) gesture.down(event)
|
|
}
|
|
return () => h('div', {
|
|
ref: (value: unknown) => {
|
|
root.value = value as HTMLElement | null
|
|
if (root.value) runtimeByElement.set(root.value, runtime)
|
|
},
|
|
class: 'nvr-navigator',
|
|
onPointerdown: down,
|
|
onPointermove: gesture.move,
|
|
onPointerup: gesture.up,
|
|
onPointercancel: gesture.cancel,
|
|
}, slots.default?.())
|
|
},
|
|
})
|
|
|
|
export const NativeDismissGesture = defineComponent({
|
|
name: 'NativeDismissGesture',
|
|
inheritAttrs: false,
|
|
props: {
|
|
as: { type: String, default: 'div' },
|
|
},
|
|
setup(props, { slots, attrs }) {
|
|
const runtime = useNativeRouter()
|
|
const root = ref<HTMLElement | null>(null)
|
|
let pointerId = -1
|
|
let startX = 0
|
|
let startY = 0
|
|
let lastY = 0
|
|
let lastTime = 0
|
|
let captured = false
|
|
let beginPromise: Promise<number | null> | null = null
|
|
let ending = false
|
|
let progress = 0
|
|
let velocity = 0
|
|
|
|
const reset = () => {
|
|
pointerId = -1
|
|
captured = false
|
|
beginPromise = null
|
|
ending = false
|
|
progress = 0
|
|
velocity = 0
|
|
}
|
|
const down = (event: PointerEvent) => {
|
|
if (!event.isPrimary || event.button !== 0 || shouldIgnoreGesture(event.target)) return
|
|
event.stopPropagation()
|
|
pointerId = event.pointerId
|
|
startX = event.clientX
|
|
startY = lastY = event.clientY
|
|
lastTime = event.timeStamp
|
|
captured = false
|
|
beginPromise = null
|
|
ending = false
|
|
progress = 0
|
|
velocity = 0
|
|
}
|
|
const move = async (event: PointerEvent) => {
|
|
if (event.pointerId !== pointerId) return
|
|
const dx = event.clientX - startX
|
|
const dy = event.clientY - startY
|
|
if (!captured) {
|
|
if (dy < 8 || Math.abs(dy) < Math.abs(dx) * 1.15) return
|
|
captured = true
|
|
ending = false
|
|
root.value?.setPointerCapture(pointerId)
|
|
beginPromise = runtime.beginInteractive('dismiss', undefined, { direction: 'back' })
|
|
}
|
|
event.preventDefault()
|
|
progress = Math.max(0, Math.min(1, dy / Math.max(1, root.value?.clientHeight ?? window.innerHeight)))
|
|
velocity = Math.max(0, event.clientY - lastY) / Math.max(8, event.timeStamp - lastTime)
|
|
lastY = event.clientY
|
|
lastTime = event.timeStamp
|
|
const pending = beginPromise
|
|
if (pending) {
|
|
const id = await pending
|
|
if (id === null) return reset()
|
|
if (pending !== beginPromise || ending) return
|
|
runtime.updateInteractive(progress, velocity)
|
|
}
|
|
}
|
|
const up = async (event: PointerEvent) => {
|
|
if (event.pointerId !== pointerId) return
|
|
ending = true
|
|
const id = beginPromise ? await beginPromise : null
|
|
if (captured && id !== null) {
|
|
runtime.updateInteractive(progress, velocity)
|
|
await runtime.finishInteractive()
|
|
}
|
|
reset()
|
|
}
|
|
const cancel = async () => {
|
|
ending = true
|
|
const id = beginPromise ? await beginPromise : null
|
|
if (captured && id !== null) await runtime.cancelInteractive()
|
|
reset()
|
|
}
|
|
onBeforeUnmount(() => void cancel())
|
|
return () => h(props.as, {
|
|
...attrs,
|
|
ref: (value: unknown) => { root.value = value as HTMLElement | null },
|
|
class: ['nvr-dismiss-gesture', attrs.class],
|
|
onPointerdown: down,
|
|
onPointermove: move,
|
|
onPointerup: up,
|
|
onPointercancel: cancel,
|
|
}, slots.default?.())
|
|
},
|
|
})
|
|
|
|
export function navigationOptionsFromElement(element: HTMLElement): NativeNavigationOptions {
|
|
return { sourceRect: sourceRect(element) }
|
|
}
|