@toife/vue 3.1.4 → 3.1.5

package/src/components/modal/modal.vue

@@ -6,7 +6,7 @@ import { gesture as toifeGesture } from "@toife/gesture";
 import { Present } from "../present";
 import { GestureIndicator } from "../gesture-indicator";
 import { type ModalProps, type ModalEmit } from "./modal.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -47,10 +47,10 @@ const modalAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "modal"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
-      withPrefix("modal"),
+      cssPrefix(["layer", "modal"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix("modal"),
       {
         fullscreen: props.fullscreen,
         [props.placement]: true,
@@ -67,6 +67,65 @@ const close = (e: string) => {
   emit("close", e);
 };
 
+const SCROLLABLE_OVERFLOW_VALUES = ["auto", "scroll", "overlay"];
+
+/**
+ * Check if the element is scrollable
+ * @param el - The element
+ * @param axis - The axis of the scroll
+ * @returns True if the element is scrollable, false otherwise
+ */
+const isScrollable = (el: HTMLElement, axis: "x" | "y") => {
+  const style = getComputedStyle(el);
+  if (axis == "y") {
+    return (
+      el.scrollHeight > el.clientHeight && SCROLLABLE_OVERFLOW_VALUES.includes(style.overflowY)
+    );
+  }
+
+  return el.scrollWidth > el.clientWidth && SCROLLABLE_OVERFLOW_VALUES.includes(style.overflowX);
+};
+
+/**
+ * Check if the element has remaining scroll
+ * @param el - The element
+ * @param direction - The direction of the scroll
+ * @returns True if the element has remaining scroll, false otherwise
+ */
+const hasRemainingScroll = (el: HTMLElement, direction: "up" | "down" | "left" | "right") => {
+  if (direction == "down") return el.scrollTop > 0;
+  if (direction == "up") return el.scrollTop < el.scrollHeight - el.clientHeight;
+  if (direction == "right") return el.scrollLeft > 0;
+
+  return el.scrollLeft < el.scrollWidth - el.clientWidth;
+};
+
+/**
+ * Check if the gesture can start
+ * @param e - The event
+ * @returns True if the gesture can start, false otherwise
+ */
+const canStartGesture = (e: unknown) => {
+  if (!modal.value || !gestureDir.value) return true;
+
+  const target = (e as { target?: EventTarget }).target;
+  if (!(target instanceof Element)) return true;
+
+  const axis = gestureDir.value == "left" || gestureDir.value == "right" ? "x" : "y";
+  let current: Element | null = target;
+
+  while (current && current !== modal.value) {
+    if (current instanceof HTMLElement && isScrollable(current, axis)) {
+      if (hasRemainingScroll(current, gestureDir.value)) {
+        return false;
+      }
+    }
+    current = current.parentElement;
+  }
+
+  return true;
+};
+
 // Cooldown so rapid gesture events do not fight the sheet animation
 const busy = () => {
   isBusy.value = true;
@@ -94,6 +153,10 @@ watch(
             return false;
           }
 
+          if (!canStartGesture(e)) {
+            return false;
+          }
+
           return true;
         },
 

package/src/components/page/page.vue

@@ -1,10 +1,10 @@
 <template src="./page.html"></template>
 <style lang="scss" src="./page.scss" scoped></style>
 <script lang="ts" setup>
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 
 // Top-level page surface inside the app shell
 const pageAttrs = {
-  class: [withPrefix("page")],
+  class: [cssPrefix("page")],
 } as const;
 </script>

package/src/components/present/present.scss

@@ -18,7 +18,7 @@ $present-translate-minus: sass.fn-naming-dvar(("translate"), "-100%");
 $present-opacity: sass.fn-naming-dvar(("present", "opacity"), 1);
 
 .#{$backdrop} {
-  position: absolute;
+  position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
@@ -30,7 +30,7 @@ $present-opacity: sass.fn-naming-dvar(("present", "opacity"), 1);
     color #{$transition-duration} ease,
     border-radius #{$transition-duration} ease,
     opacity #{$transition-duration} ease;
-  background-color: rgb(#{$backdrop-background-color});
+  background-color: rgba(#{$backdrop-background-color});
   opacity: #{$backdrop-opacity};
 }
 
@@ -38,7 +38,7 @@ $present-opacity: sass.fn-naming-dvar(("present", "opacity"), 1);
   display: flex;
   justify-content: center;
   align-items: center;
-  position: absolute;
+  position: fixed;
   width: fit-content;
   height: fit-content;
   transition: transform #{$transition-duration} ease;

package/src/components/present/present.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import type { PresentEmit, PresentProps, RenderOptions } from "./present.type";
 import { computed, onMounted, reactive, ref, watch } from "vue";
-import { withPrefix, property } from "../../utils";
+import { cssPrefix, cssProperty } from "../../utils";
 import { usePresent } from "./present.composable";
 
 // Component setup (props, emits, injects)
@@ -28,7 +28,7 @@ const zIndex = ref(0);
 const isShow = ref(false);
 const styles = reactive({
   backdropTransitionDuration: "0.2s",
-  backdropOpacity: 0.4,
+  backdropOpacity: undefined,
   presentTransitionDuration: "0.2s",
   presentTranslate: "0px",
   presentOpacity: 1,
@@ -38,11 +38,11 @@ const styles = reactive({
 // ----------------------------------------------------------------------------
 const backdropAttrs = computed(() => {
   return {
-    class: [withPrefix(["layer", "backdrop"]), withPrefix("present-backdrop")],
+    class: [cssPrefix(["layer", "backdrop"]), cssPrefix("present-backdrop")],
     style: {
       zIndex: zIndex.value - 1,
-      [property("transition-duration")]: styles.backdropTransitionDuration,
-      [property(["backdrop", "opacity"])]:
+      [cssProperty("transition-duration")]: styles.backdropTransitionDuration,
+      [cssProperty(["backdrop", "opacity"])]:
         props.backdrop === "transparent" ? 0 : styles.backdropOpacity,
     },
   };
@@ -51,13 +51,13 @@ const backdropAttrs = computed(() => {
 // Present attributes
 const presentAttrs = computed(() => {
   return {
-    class: [withPrefix("present"), props.class, props.placement],
+    class: [cssPrefix("present"), props.class, props.placement],
     style: [
       {
         zIndex: zIndex.value,
-        [property("transition-duration")]: styles.presentTransitionDuration,
-        [property("translate")]: styles.presentTranslate,
-        [property(["present", "opacity"])]: styles.presentOpacity,
+        [cssProperty("transition-duration")]: styles.presentTransitionDuration,
+        [cssProperty("translate")]: styles.presentTranslate,
+        [cssProperty(["present", "opacity"])]: styles.presentOpacity,
       },
       props.style,
     ],
@@ -87,9 +87,9 @@ const render = (data: RenderOptions) => {
   if (data.presentTransitionDuration !== undefined) {
     styles.presentTransitionDuration = data.presentTransitionDuration;
   }
-  if (data.backdropOpacity !== undefined) {
-    styles.backdropOpacity = data.backdropOpacity;
-  }
+
+  styles.backdropOpacity = data.backdropOpacity;
+
   if (data.presentTranslate !== undefined) {
     styles.presentTranslate = data.presentTranslate;
   }
@@ -115,7 +115,7 @@ const open = () => {
 
     render({
       backdropTransitionDuration: time.value,
-      backdropOpacity: 0.4,
+      backdropOpacity: undefined,
       presentTranslate: String(presentTranslate),
       presentTransitionDuration: time.value,
       presentOpacity: 1,
@@ -128,7 +128,7 @@ const open = () => {
     }, props.duration);
   } else {
     render({
-      backdropOpacity: 0.4,
+      backdropOpacity: undefined,
       backdropTransitionDuration: time.value,
       presentTranslate: "0px",
       presentTransitionDuration: time.value,

package/src/components/radio/radio/radio.html

@@ -1,6 +1,6 @@
 <div
   v-bind="radioAttrs"
-  @click="onRadio"
+  @pointerup="onRadio"
   :tabindex="disabled ? -1 : 0"
   @focus="onFocus"
   @blur="onBlur"

package/src/components/radio/radio/radio.scss

@@ -11,7 +11,11 @@ $radio-background-color-unchecked: sass.fn-naming-var("radio", "background-color
 $radio-background-color-checked: sass.fn-naming-var("radio", "background-color", "checked");
 $radio-background-color-disabled: sass.fn-naming-var("radio", "background-color", "disabled");
 
-$radio-color: sass.fn-naming-var("radio", "color");
+$radio-color-unchecked: sass.fn-naming-var("radio", "color", "unchecked");
+$radio-color-checked: sass.fn-naming-var("radio", "color", "checked");
+$radio-color-hover: sass.fn-naming-var("radio", "color", "hover");
+$radio-color-focus: sass.fn-naming-var("radio", "color", "focus");
+$radio-color-disabled: sass.fn-naming-var("radio", "color", "disabled");
 
 $radio-border-color-hover: sass.fn-naming-var("radio", "border-color", "hover");
 $radio-border-color-focus: sass.fn-naming-var("radio", "border-color", "focus");
@@ -42,8 +46,8 @@ $size-control-mark-size: sass.fn-naming-var("control-mark-size");
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid rgb(#{$radio-color});
     background-color: transparent;
+    border: 1px solid transparent;
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -59,7 +63,7 @@ $size-control-mark-size: sass.fn-naming-var("control-mark-size");
       width: calc(#{$size-control-mark-size} * 0.5);
       height: calc(#{$size-control-mark-size} * 0.5);
       border-radius: 50%;
-      background-color: rgb(#{$radio-color});
+      background-color: rgba(#{$radio-color-unchecked});
       transform: scale(0);
       transform-origin: center;
       transition:
@@ -73,12 +77,12 @@ $size-control-mark-size: sass.fn-naming-var("control-mark-size");
   &:not(.on) {
     .#{$radio-icon} {
       background-color: transparent;
-      border-color: rgb(#{$radio-border-color-unchecked});
+      border-color: rgba(#{$radio-border-color-unchecked});
     }
 
     &:not(.disabled):not(.readonly):hover {
       .#{$radio-icon} {
-        border-color: rgb(#{$radio-border-color-hover});
+        border-color: rgba(#{$radio-border-color-hover});
       }
     }
   }
@@ -86,22 +90,23 @@ $size-control-mark-size: sass.fn-naming-var("control-mark-size");
   &.on {
     &.fill {
       .#{$radio-icon} {
-        background-color: rgb(#{$radio-background-color-checked});
-        border-color: rgb(#{$radio-border-color-checked});
+        background-color: rgba(#{$radio-background-color-checked});
+        border-color: rgba(#{$radio-border-color-checked});
 
         &::after {
           transform: scale(1);
+          background-color: rgba(#{$radio-color-checked});
         }
       }
     }
 
     &.outline {
       .#{$radio-icon} {
-        border-color: rgb(#{$radio-border-color-checked});
+        border-color: rgba(#{$radio-border-color-checked});
 
         &::after {
           transform: scale(1);
-          background-color: rgb(#{$radio-background-color-checked});
+          background-color: rgba(#{$radio-background-color-checked});
         }
       }
     }
@@ -113,8 +118,8 @@ $size-control-mark-size: sass.fn-naming-var("control-mark-size");
 
     &.on {
       .#{$radio-icon} {
-        background-color: rgb(#{$radio-background-color-disabled});
-        border-color: rgb(#{$radio-border-color-disabled});
+        background-color: rgba(#{$radio-background-color-disabled});
+        border-color: rgba(#{$radio-border-color-disabled});
       }
     }
   }
@@ -126,12 +131,12 @@ $size-control-mark-size: sass.fn-naming-var("control-mark-size");
   &.focus {
     &.shadow {
       .#{$radio-icon} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$radio-box-shadow-color-focus}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgba(#{$radio-box-shadow-color-focus}, 0.25);
       }
     }
 
     .#{$radio-icon} {
-      border-color: rgb(#{$radio-border-color-focus});
+      border-color: rgba(#{$radio-border-color-focus});
     }
   }
 }

package/src/components/radio/radio/radio.type.ts

@@ -1,4 +1,4 @@
-import { AppSize } from "@/components/app";
+import { AppSize } from "../../app";
 
 export type RadioVariant = "fill" | "outline";
 export type RadioSize = AppSize;

package/src/components/radio/radio/radio.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, ref } from "vue";
 import type { RadioProps } from "./radio.type";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 import { type RadioGroupProviderState, RADIO_GROUP_PROVIDER_STATE_KEY } from "../radio-group";
 
@@ -42,10 +42,10 @@ const radioAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "radio"]),
-      withPrefix(["role", role]),
-      withPrefix(["size", props.size]),
-      withPrefix("radio"),
+      cssPrefix(["layer", "radio"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["size", props.size]),
+      cssPrefix("radio"),
       variant,
       {
         on: isChecked,
@@ -59,7 +59,7 @@ const radioAttrs = computed(() => {
 });
 
 const radioIconAttrs = {
-  class: [withPrefix("radio-icon")],
+  class: [cssPrefix("radio-icon")],
 } as const;
 
 // Methods

package/src/components/radio/radio-group/radio-group.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, provide } from "vue";
 import type { RadioGroupProps, RadioGroupEmit, RadioGroupProviderState } from "./radio-group.type";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 import { RADIO_GROUP_PROVIDER_STATE_KEY } from "./radio-group.constants";
 
@@ -37,7 +37,7 @@ const shadow = computed(() => {
 
 const radioGroupAttrs = computed(() => {
   return {
-    class: [withPrefix("radio-group"), props.direction],
+    class: [cssPrefix("radio-group"), props.direction],
   };
 });
 

package/src/components/refresher/refresher.html

@@ -1,6 +1,3 @@
 <div v-bind="containerAttrs" ref="container">
-  <div v-bind="refresherIconAttrs" v-show="calculateOffset > 0">
-    <slot name="icon" :offset="calculateOffset" :refreshing="refreshing"></slot>
-  </div>
   <slot :offset="calculateOffset" :refreshing="refreshing"></slot>
 </div>

package/src/components/refresher/refresher.scss

@@ -1,14 +1,8 @@
 @use "@toife/sass-layer" as sass;
 
 // Class
-$refresher-icon: sass.fn-naming-prefix("refresher-icon");
 $container: sass.fn-naming-prefix("refresher");
 
-// Variables
-$safe-area-top: sass.fn-naming-var("safe-area", "top");
-$transition-duration: sass.fn-naming-var("motion", "duration");
-$offset: sass.fn-naming-var("refresher-offset");
-
 .#{$container} {
   width: 100%;
   height: 100%;
@@ -20,23 +14,5 @@ $offset: sass.fn-naming-var("refresher-offset");
   right: 0;
   bottom: 0;
   overflow: auto;
-}
-
-// Refresher
-.#{$refresher-icon} {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  transition: height #{$transition-duration} ease;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  line-height: 0;
-  z-index: 1;
-
-  &.moving {
-    top: calc(#{$safe-area-top} + #{$offset});
-  }
+  overscroll-behavior: none;
 }

package/src/components/refresher/refresher.vue

@@ -4,7 +4,7 @@
 import { ref, onUnmounted, watch, computed } from "vue";
 import { gesture } from "@toife/gesture";
 import type { RefresherProps, RefresherEmit } from "./refresher.type";
-import { property, withPrefix } from "../../utils";
+import { cssProperty, cssPrefix } from "../../utils";
 
 // Component setup (props, emits, injects)
 // ----------------------------------------------------------------------------
@@ -29,23 +29,9 @@ const calculateOffset = computed(() => {
   return props.offset !== undefined ? props.offset : moveOffset.value / 2;
 });
 
-const refresherIconAttrs = computed(() => {
-  return {
-    style: {
-      [property("refresher-offset")]: `${calculateOffset.value}px`,
-    },
-    class: [
-      withPrefix("refresher-icon"),
-      {
-        moving: calculateOffset.value > 0,
-      },
-    ],
-  };
-});
-
 const containerAttrs = computed(() => {
   return {
-    class: [withPrefix("refresher")],
+    class: [cssPrefix("refresher")],
   };
 });
 

package/src/components/route/route-navigator/route-navigator.scss

@@ -50,7 +50,7 @@ $backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");
     height: 100%;
     top: 0;
     left: 0;
-    background-color: rgb(#{$backdrop-background-color});
+    background-color: rgba(#{$backdrop-background-color});
     opacity: calc(#{$backdrop-opacity} * (#{$backdrop-percent} / 100));
     transition: opacity #{$transition-duration} ease;
   }
@@ -64,7 +64,7 @@ $backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");
     top: 0;
     left: 0;
     flex: none;
-    background-color: rgb(#{$background-color});
+    background-color: rgba(#{$background-color});
     transform: translate(0, 0);
     transition:
       transform #{$transition-duration} ease,

package/src/components/route/route-navigator/route-navigator.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import { gesture } from "@toife/gesture";
-import { withPrefix, property } from "../../../utils";
+import { cssPrefix, cssProperty } from "../../../utils";
 import type {
   RouteNavigatorEmit,
   RouteNavigatorProps,
@@ -63,26 +63,26 @@ const navigatorAttrs = computed(() => {
   }
 
   return {
-    class: [withPrefix("route-navigator"), props.direction, props.variant],
+    class: [cssPrefix("route-navigator"), props.direction, props.variant],
     style: {
-      [property("route-navigator-transform-back")]: transform.back + "%",
-      [property("route-navigator-transform-prepare")]: transform.prepare + "%",
-      [property("route-navigator-transform-active")]: transform.active + "%",
-      [property("route-navigator-transition-duration")]: duration,
-      [property("route-navigator-backdrop-percent")]: transform.backdrop,
+      [cssProperty("route-navigator-transform-back")]: transform.back + "%",
+      [cssProperty("route-navigator-transform-prepare")]: transform.prepare + "%",
+      [cssProperty("route-navigator-transform-active")]: transform.active + "%",
+      [cssProperty("route-navigator-transition-duration")]: duration,
+      [cssProperty("route-navigator-backdrop-percent")]: transform.backdrop,
     },
   };
 });
 
 const componentAttrs = computed(() => {
   return {
-    class: [withPrefix("route-navigator-component"), props.direction],
+    class: [cssPrefix("route-navigator-component"), props.direction],
   };
 });
 
 const backdropAttrs = computed(() => {
   return {
-    class: [withPrefix("route-navigator-backdrop"), withPrefix(["layer", "backdrop"])],
+    class: [cssPrefix("route-navigator-backdrop"), cssPrefix(["layer", "backdrop"])],
     style: {
       zIndex: backdropIndex.value * 2 - 1,
     },
@@ -158,7 +158,7 @@ const goBack = () => {
   if (activeIndex.value <= 0) return;
   const prev = stack.value[activeIndex.value - 1];
   if (!prev) return;
-  router.push(prev.fullPath);
+  router.back();
 };
 
 const resetTransform = () => {
@@ -230,7 +230,6 @@ onMounted(() => {
 
       fast({ initialDirection, event }: { initialDirection: string; event: Event }) {
         if (initialDirection !== props.direction) return;
-        event.preventDefault();
         goBack();
       },
 
@@ -246,7 +245,6 @@ onMounted(() => {
         event: Event;
       }) {
         if (initialDirection !== props.direction) return;
-        event.preventDefault();
         move({ deltaX, deltaY });
       },
 
@@ -262,7 +260,6 @@ onMounted(() => {
         event: Event;
       }) {
         if (initialDirection !== props.direction) return;
-        event.preventDefault();
         up({ deltaX, deltaY });
       },
 

package/src/components/route/route-wrapper/route-wrapper.composable.ts

@@ -1,16 +1,11 @@
 import { shallowRef } from "vue";
 import { type RouteComponent, type RouteLocationMatched } from "vue-router";
 import { type RouteStack } from "../route.type";
-import { RouteWrapperOption } from "./route-wrapper.type";
 
 const stack = shallowRef<RouteStack[]>([]);
 
 /** Recursively builds a nested stack from vue-router `matched` for the navigator. */
-const buildTree = (
-  matched: RouteLocationMatched[],
-  current: RouteStack[],
-  option: RouteWrapperOption
-) => {
+const buildTree = (matched: RouteLocationMatched[], current: RouteStack[]) => {
   if (matched.length === 0) return current;
 
   // User navigated back: drop the leaf so we merge into the parent segment
@@ -25,11 +20,7 @@ const buildTree = (
     current[current.length - 1].name === matched[0].name
   ) {
     matched.shift();
-    current[current.length - 1].stack = buildTree(
-      matched,
-      current[current.length - 1].stack,
-      option
-    );
+    current[current.length - 1].stack = buildTree(matched, current[current.length - 1].stack);
   }
   // Push a new segment (forward navigation)
   else {
@@ -39,8 +30,7 @@ const buildTree = (
     current.push({
       name,
       component,
-      fullPath: option.fullPath,
-      stack: buildTree(matched, [], option),
+      stack: buildTree(matched, []),
     });
   }
 
@@ -48,8 +38,8 @@ const buildTree = (
 };
 
 export const useRouteWrapper = () => {
-  const updateRoutes = (matched: RouteLocationMatched[], option: RouteWrapperOption) => {
-    stack.value = buildTree([...matched], [...stack.value], option);
+  const updateRoutes = (matched: RouteLocationMatched[]) => {
+    stack.value = buildTree([...matched], [...stack.value]);
   };
 
   return {

package/src/components/route/route-wrapper/route-wrapper.type.ts

@@ -1,7 +1,3 @@
 export type RouteWrapperProps = {
   homeRouteName?: string;
 };
-
-export type RouteWrapperOption = {
-  fullPath: string;
-};

package/src/components/route/route-wrapper/route-wrapper.vue

@@ -20,9 +20,7 @@ const router = useRouter();
 watch(
   () => route.matched,
   () => {
-    updateRoutes(route.matched, {
-      fullPath: route.fullPath,
-    });
+    updateRoutes(route.matched);
   }
 );
 
@@ -31,22 +29,16 @@ onMounted(() => {
   const homeName = props.homeRouteName;
 
   if (route.name === homeName) {
-    updateRoutes(route.matched, {
-      fullPath: route.fullPath,
-    });
+    updateRoutes(route.matched);
   } else {
     const homeLocation = router.resolve({ name: homeName });
     if (homeLocation.matched.length > 0) {
-      updateRoutes(homeLocation.matched, {
-        fullPath: homeLocation.fullPath,
-      });
+      updateRoutes(homeLocation.matched);
     }
 
     // Apply current route to stack
     setTimeout(() => {
-      updateRoutes(route.matched, {
-        fullPath: route.fullPath,
-      });
+      updateRoutes(route.matched);
     }, 50);
   }
 });

package/src/components/route/route.type.ts

@@ -3,6 +3,5 @@ import { RouteComponent } from "vue-router";
 export type RouteStack = {
   name: string;
   component: RouteComponent;
-  fullPath: string;
   stack: RouteStack[];
 };