first commit

apps/demo/src/components/AppAvatar.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { Person } from '../data'
+
+defineProps<{ person: Person; size?: 'sm' | 'md' | 'lg' | 'xl' }>()
+</script>
+
+<template>
+  <span class="avatar" :class="`avatar--${size ?? 'md'}`" :style="{ '--avatar-color': person.color }" :aria-label="person.name">
+    <span>{{ person.name.split(' ').map((part) => part[0]).join('') }}</span>
+    <i v-if="person.online" aria-label="Online" />
+  </span>
+</template>

apps/demo/src/components/AppHeader.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { NativeBackButton } from '@native-vue-router/preset-native'
+
+withDefaults(defineProps<{ title: string; subtitle?: string; back?: boolean; large?: boolean }>(), {
+  back: false,
+  large: false,
+})
+</script>
+
+<template>
+  <header class="app-header" :class="{ 'app-header--large': large }">
+    <NativeBackButton v-if="back" />
+    <div class="app-header__title">
+      <p v-if="subtitle">{{ subtitle }}</p>
+      <h1>{{ title }}</h1>
+    </div>
+    <div class="app-header__actions"><slot /></div>
+  </header>
+</template>

apps/demo/src/components/PwaUpdate.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+import { useNativeRouter } from '@native-vue-router/core'
+
+const native = useNativeRouter()
+const { needRefresh, updateServiceWorker } = useRegisterSW()
+
+function update() {
+  if (!native.transaction.value) void updateServiceWorker(true)
+}
+</script>
+
+<template>
+  <aside v-if="needRefresh" class="update-toast" role="status">
+    <span>A fresh build is ready.</span>
+    <button type="button" :disabled="Boolean(native.transaction.value)" @click="update">Update</button>
+  </aside>
+</template>