88 lines
2.2 KiB
Vue
88 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
above,
|
|
back,
|
|
gesture,
|
|
OriginGestureSurface,
|
|
originView,
|
|
slideLeft,
|
|
slideRight,
|
|
useOrigin,
|
|
type OriginContext,
|
|
} from "@native-vue-router/core-v2";
|
|
import InstanceCard from "../components/InstanceCard.vue";
|
|
import { useDemoInstance } from "../lab-state";
|
|
import SecondView from "./SecondView.vue";
|
|
|
|
const origin = useOrigin();
|
|
const identity = useDemoInstance("X");
|
|
|
|
const secondView = () =>
|
|
originView(
|
|
SecondView,
|
|
{
|
|
openedAt: new Date().toLocaleTimeString(),
|
|
createdBy: identity.instance,
|
|
},
|
|
{ key: "second", name: "Second" },
|
|
);
|
|
const createSecond = () => above(secondView(), slideLeft);
|
|
|
|
const goBack = (context: OriginContext) =>
|
|
context.canGoBack ? back(slideRight) : null;
|
|
|
|
const forwardGesture = gesture
|
|
.to.left()
|
|
.navigate(() => above(secondView()))
|
|
.animate(slideLeft);
|
|
const backGesture = gesture
|
|
.to.right()
|
|
.navigate((context) => (context.canGoBack ? back() : null))
|
|
.animate(slideRight);
|
|
const gestures = [forwardGesture, backGesture] as const;
|
|
|
|
function backWithButton() {
|
|
const action = goBack(origin.context.value);
|
|
if (action) void origin.perform(action);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<OriginGestureSurface
|
|
as="main"
|
|
class="lab-page chain-view view-one"
|
|
:gestures="gestures"
|
|
>
|
|
<button
|
|
class="view-back"
|
|
type="button"
|
|
data-origin-gesture="ignore"
|
|
@click="backWithButton"
|
|
>
|
|
← Labs
|
|
</button>
|
|
<div class="eyebrow">Chain stress test · Origin X</div>
|
|
<h1>Every component starts its own movement.</h1>
|
|
<p>
|
|
Drag this screen left. Release it, then immediately drag the blue screen
|
|
while this spring is still settling. Keep going to build a four-node
|
|
scene.
|
|
</p>
|
|
<InstanceCard
|
|
label="X Vue instance"
|
|
:instance="identity.instance"
|
|
:status="identity.status.value"
|
|
/>
|
|
<button
|
|
class="primary-action"
|
|
data-origin-gesture="ignore"
|
|
type="button"
|
|
@click="origin.perform(createSecond())"
|
|
>
|
|
Open Y without a gesture
|
|
</button>
|
|
<div class="gesture-hint">Swipe left <span>→</span></div>
|
|
<div class="edge-marker edge-marker--left">back edge</div>
|
|
</OriginGestureSurface>
|
|
</template>
|