64 lines
1.8 KiB
Vue
64 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
OriginGesture,
|
|
back,
|
|
gesture,
|
|
slideRight,
|
|
useOrigin,
|
|
type OriginContext,
|
|
} from "@native-vue-router/core-v2";
|
|
import InstanceCard from "../components/InstanceCard.vue";
|
|
import { useDemoInstance } from "../lab-state";
|
|
|
|
defineProps<{ chain?: string }>();
|
|
|
|
const origin = useOrigin();
|
|
const identity = useDemoInstance("Omega");
|
|
const goBack = (context: OriginContext) =>
|
|
context.canGoBack ? back(slideRight) : null;
|
|
|
|
const backGesture = gesture
|
|
// .from.left("clamp(24px, 8%, 64px)")
|
|
// .from.left("20%")
|
|
.to.right()
|
|
.navigate((context) => (context.canGoBack ? back() : null))
|
|
.animate(slideRight);
|
|
|
|
function backWithButton() {
|
|
const action = goBack(origin.context.value);
|
|
if (action) void origin.perform(action);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<OriginGesture class="lab-page chain-view view-four" :gesture="backGesture">
|
|
<div class="eyebrow">Chain stress test · Origin Ω</div>
|
|
<h1>Four independently mounted components. Three live edges.</h1>
|
|
<p>
|
|
If you moved quickly enough, the inspector showed X, Y, Z, and Ω at once.
|
|
Each component stayed a flat sibling while inherited transforms composed
|
|
mathematically.
|
|
</p>
|
|
<div class="proof">
|
|
Reported ancestry <strong>{{ chain }}</strong>
|
|
</div>
|
|
<InstanceCard
|
|
label="Ω Vue instance"
|
|
:instance="identity.instance"
|
|
:status="identity.status.value"
|
|
/>
|
|
<button
|
|
class="primary-action"
|
|
type="button"
|
|
data-origin-gesture="ignore"
|
|
@click="backWithButton"
|
|
>
|
|
Return to the retained Z instance
|
|
</button>
|
|
<div class="gesture-hint gesture-hint--back">
|
|
<span>←</span> Or swipe from the left edge
|
|
</div>
|
|
<div class="edge-marker edge-marker--left">back edge</div>
|
|
</OriginGesture>
|
|
</template>
|