117 lines
3.1 KiB
Vue
117 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
above,
|
|
back,
|
|
gesture,
|
|
OriginGestureSurface,
|
|
originView,
|
|
useOrigin,
|
|
} from "@native-vue-router/core-v2";
|
|
import InstanceCard from "../components/InstanceCard.vue";
|
|
import { useDemoInstance } from "../lab-state";
|
|
import { cardFlip, rise, unfocusPortal } from "../motions";
|
|
import DirectionResultView from "./DirectionResultView.vue";
|
|
|
|
const origin = useOrigin();
|
|
const identity = useDemoInstance("Direction");
|
|
|
|
const eastView = () =>
|
|
originView(
|
|
DirectionResultView,
|
|
{
|
|
direction: "east",
|
|
heading: "Horizontal declarations can own a full-page flip.",
|
|
accent: "#38d8ff",
|
|
createdBy: identity.instance,
|
|
},
|
|
{ key: "direction-east", name: "East Result" },
|
|
);
|
|
const openEast = () => above(eastView(), cardFlip);
|
|
|
|
const northView = () =>
|
|
originView(
|
|
DirectionResultView,
|
|
{
|
|
direction: "north",
|
|
heading: "The same origin can create a completely different view upward.",
|
|
accent: "#b9ff66",
|
|
createdBy: identity.instance,
|
|
},
|
|
{ key: "direction-north", name: "North Result" },
|
|
);
|
|
const openNorth = () => above(northView(), rise);
|
|
|
|
const flipGesture = gesture.to
|
|
.left()
|
|
.navigate(() => above(eastView()))
|
|
.animate(cardFlip);
|
|
const riseGesture = gesture.to
|
|
.up()
|
|
.navigate(() => above(northView()))
|
|
.animate(rise);
|
|
const backGesture = gesture.from
|
|
.left("clamp(24px, 8%, 64px)")
|
|
.to.right()
|
|
.navigate((context) => (context.canGoBack ? back() : null))
|
|
.animate(unfocusPortal);
|
|
const gestures = [flipGesture, riseGesture, backGesture] as const;
|
|
|
|
function perform(action: ReturnType<typeof openEast>) {
|
|
void origin.perform(action);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<OriginGestureSurface
|
|
as="main"
|
|
class="lab-page direction-view"
|
|
:gestures="gestures"
|
|
>
|
|
<div class="eyebrow">Lab 02 · Direction matrix</div>
|
|
<h1>One component. Three explicit choices.</h1>
|
|
<p>
|
|
Swipe left for a perspective flip, swipe up for a rising cover, or use the
|
|
left edge to go back. None of these gestures exist outside this view.
|
|
</p>
|
|
|
|
<div class="direction-compass">
|
|
<button
|
|
type="button"
|
|
data-origin-gesture="ignore"
|
|
class="compass-action compass-action--up"
|
|
@click="perform(openNorth())"
|
|
>
|
|
<span>↑</span>
|
|
<strong>Rise</strong>
|
|
<small>target above</small>
|
|
</button>
|
|
<div class="compass-core">
|
|
<span>origin</span>
|
|
<strong>{{ identity.instance }}</strong>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
data-origin-gesture="ignore"
|
|
class="compass-action compass-action--left"
|
|
@click="perform(openEast())"
|
|
>
|
|
<span>←</span>
|
|
<strong>Flip left</strong>
|
|
<small>custom perspective</small>
|
|
</button>
|
|
</div>
|
|
|
|
<InstanceCard
|
|
label="Direction view"
|
|
:instance="identity.instance"
|
|
:status="identity.status.value"
|
|
/>
|
|
<div class="gesture-map">
|
|
<span>↑ full-surface target</span>
|
|
<span>← full-surface target</span>
|
|
<span>left edge → history back</span>
|
|
</div>
|
|
<div class="edge-marker edge-marker--left">back edge</div>
|
|
</OriginGestureSurface>
|
|
</template>
|