100 lines
2.8 KiB
Vue
100 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
OriginGestureSurface,
|
|
back,
|
|
forward,
|
|
gesture,
|
|
originView,
|
|
slideRight,
|
|
useOrigin,
|
|
} from "@native-vue-router/core-v2";
|
|
import InstanceCard from "../components/InstanceCard.vue";
|
|
import { useDemoInstance } from "../lab-state";
|
|
import { partialDrawerOpen } from "../motions";
|
|
import PartialDrawerView from "./PartialDrawerView.vue";
|
|
|
|
const origin = useOrigin();
|
|
const identity = useDemoInstance("Drawer page");
|
|
|
|
const drawerView = () =>
|
|
originView(
|
|
PartialDrawerView,
|
|
{ openedFrom: identity.instance },
|
|
{ key: "partial-drawer", name: "Two-thirds Drawer" },
|
|
);
|
|
|
|
const openDrawerGesture = gesture.from
|
|
.left("clamp(32px, 10%, 88px)")
|
|
.to.right()
|
|
.navigate(() => forward(drawerView()))
|
|
.animate(partialDrawerOpen);
|
|
|
|
const gestures = [openDrawerGesture] as const;
|
|
|
|
function openDrawer() {
|
|
void origin.perform(forward(drawerView(), partialDrawerOpen));
|
|
}
|
|
|
|
function returnToLabs() {
|
|
if (origin.context.value.canGoBack) void origin.perform(back(slideRight));
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<OriginGestureSurface
|
|
as="main"
|
|
class="partial-origin-view"
|
|
:gestures="gestures"
|
|
>
|
|
<!--
|
|
This rail is the left third of the full page. Once the whole page moves
|
|
right by 2/3, this exact live DOM remains visible in the final third.
|
|
-->
|
|
<aside class="partial-origin-rail">
|
|
<div class="partial-brand">OV</div>
|
|
<nav aria-label="Example navigation">
|
|
<button type="button" data-origin-gesture="ignore">Inbox</button>
|
|
<button type="button" data-origin-gesture="ignore">Projects</button>
|
|
<button type="button" data-origin-gesture="ignore">Archive</button>
|
|
</nav>
|
|
<InstanceCard
|
|
label="Page instance"
|
|
:instance="identity.instance"
|
|
:status="identity.status.value"
|
|
/>
|
|
</aside>
|
|
|
|
<section class="partial-origin-content">
|
|
<header>
|
|
<button
|
|
type="button"
|
|
data-origin-gesture="ignore"
|
|
aria-label="Return to labs"
|
|
@click="returnToLabs"
|
|
>
|
|
← Labs
|
|
</button>
|
|
<span>Connected presentation</span>
|
|
</header>
|
|
|
|
<div class="partial-origin-copy">
|
|
<div class="eyebrow">Partial route lab</div>
|
|
<h1>Keep one third of this page on screen.</h1>
|
|
<p>
|
|
Drag right from the left edge. The drawer becomes a real history
|
|
entry, while this same mounted page remains translated and visible.
|
|
</p>
|
|
<button
|
|
class="primary-action"
|
|
type="button"
|
|
data-origin-gesture="ignore"
|
|
@click="openDrawer"
|
|
>
|
|
Open two-thirds drawer
|
|
</button>
|
|
<div class="gesture-hint"><span>→</span> Pull from the left edge</div>
|
|
</div>
|
|
</section>
|
|
</OriginGestureSurface>
|
|
</template>
|