@toife/vue 3.2.5 → 3.2.7

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

@@ -0,0 +1,254 @@
+<style lang="scss" src="@toife/core/features/route/route-navigator.scss" scoped></style>
+<template src="./route-navigator.html"></template>
+<script lang="ts" setup>
+import { computed, inject, onMounted, onUnmounted, reactive, ref, watch, unref } from "vue";
+import {
+  gesture,
+  type GestureFastPayload,
+  type GestureMovePayload,
+  type GestureUpPayload,
+} from "@toife/gesture";
+import { RouteProvider } from "../route-provider";
+import { RouteOutlet } from "../route-outlet";
+import { useRouter } from "vue-router";
+import { clone } from "../route.util";
+import {
+  ROUTE_NAVIGATOR_DEFAULT_PROPS,
+  ROUTE_PROVIDER_STATE_KEY,
+  getRouteNavigatorAttrs,
+  getRouteNavigatorBackdropAttrs,
+  getRouteNavigatorComponentAttrs,
+  type RouteNavigatorEvent,
+  type RouteNavigatorGesture,
+  type RouteNavigatorProps,
+  type RouteNavigatorTransformState,
+  type RouteProviderState,
+  type RouteStack,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+// Max translate offset (%) for the layer behind the active page during swipe.
+// Active uses 0–100%; back uses (peek)*(100−percent)/100, so a peek of 40 makes the
+// back layer move 2.5× slower than the active layer (parallax). Use 100 for 1:1 motion
+// (no edge peek at rest: back starts at -100%).
+const BACK_LAYER_PEEK_PCT = -40;
+
+const props = withDefaults(defineProps<RouteNavigatorProps>(), {
+  ...ROUTE_NAVIGATOR_DEFAULT_PROPS,
+});
+const emit = defineEmits<RouteNavigatorEvent>();
+const provider = inject<ProviderStateRefs<RouteProviderState>>(ROUTE_PROVIDER_STATE_KEY);
+const router = useRouter();
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const navigatorRef = ref<HTMLElement>();
+const ges = ref<unknown>(null);
+const transform = reactive<RouteNavigatorTransformState>({
+  back: BACK_LAYER_PEEK_PCT,
+  prepare: 100,
+  active: 0,
+  backdrop: 0,
+  duration: undefined,
+});
+const stack = ref<RouteStack[]>([]);
+const activeIndex = ref(0);
+const backdropIndex = ref(0);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const navigatorAttrs = computed(() =>
+  getRouteNavigatorAttrs({
+    direction: props.direction,
+    variant: props.variant,
+    moving: transform.active !== 0,
+    transform,
+  })
+);
+
+const componentAttrs = computed(() =>
+  getRouteNavigatorComponentAttrs({ direction: props.direction })
+);
+
+const backdropAttrs = computed(() =>
+  getRouteNavigatorBackdropAttrs({ zIndex: backdropIndex.value * 2 + 99 })
+);
+
+const prevPage = computed(() => {
+  if (activeIndex.value > 0) {
+    return stack.value.at(activeIndex.value - 1) ?? null;
+  }
+  return null;
+});
+
+// Methods
+// ----------------------------------------------------------------------------
+const changeRoute = (value: RouteStack[]) => {
+  const data = clone(value);
+
+  // Case: first time
+  if (stack.value.length === 0) {
+    stack.value = data;
+    return;
+  }
+
+  // Case: update
+  if (stack.value.length === data.length) {
+    const ln = stack.value.length - 1;
+    stack.value[ln].stack = data[ln].stack;
+  }
+  // Case: back
+  else if (stack.value.length > data.length) {
+    const newIndex = activeIndex.value - 1;
+    resetTransform();
+    activeIndex.value = newIndex;
+    transform.backdrop = 0;
+    emit("transform", transform);
+
+    setTimeout(() => {
+      stack.value = stack.value.slice(0, -1);
+      backdropIndex.value = newIndex;
+      transform.backdrop = 100;
+      emit("transform", transform);
+    }, 250);
+  }
+  // Case: next
+  else {
+    stack.value.push(data[data.length - 1]);
+    transform.duration = "0s";
+    transform.backdrop = 0;
+    emit("transform", transform);
+
+    setTimeout(
+      () => {
+        backdropIndex.value = backdropIndex.value + 1;
+        transform.duration = undefined;
+        emit("transform", transform);
+      },
+      props.variant === "swipe" ? 10 : 0
+    );
+
+    setTimeout(
+      () => {
+        transform.backdrop = 100;
+        activeIndex.value = stack.value.length - 1;
+        emit("transform", transform);
+      },
+      props.variant === "swipe" ? 100 : 0
+    );
+  }
+};
+
+const goBack = () => {
+  if (activeIndex.value <= 0) return;
+  const prev = stack.value[activeIndex.value - 1];
+  if (!prev) return;
+  router.back();
+};
+
+const resetTransform = () => {
+  transform.back = BACK_LAYER_PEEK_PCT;
+  transform.prepare = 100;
+  transform.active = 0;
+  transform.duration = undefined;
+  emit("transform", transform);
+};
+
+const move = (data: RouteNavigatorGesture) => {
+  const width = navigatorRef.value?.offsetWidth ?? 0;
+  let activePercent = 0;
+
+  if (props.direction == "left" || props.direction == "right") {
+    activePercent = (Math.abs(data.deltaX) / width) * 100;
+  } else {
+    activePercent = (Math.abs(data.deltaY) / width) * 100;
+  }
+
+  transform.back = ((100 - activePercent) * BACK_LAYER_PEEK_PCT) / 100;
+  transform.active = activePercent;
+  transform.backdrop = 100 - transform.active;
+  transform.duration = "0s";
+
+  emit("transform", transform);
+};
+
+const up = (data: RouteNavigatorGesture) => {
+  const width = navigatorRef.value?.offsetWidth ?? 0;
+  let percent = 0;
+
+  if (props.direction == "left" || props.direction == "right") {
+    percent = (Math.abs(data.deltaX) / width) * 100;
+  } else {
+    percent = (Math.abs(data.deltaY) / width) * 100;
+  }
+
+  if (percent >= 60) {
+    goBack();
+  } else {
+    resetTransform();
+  }
+};
+
+// Lifecycle
+// ----------------------------------------------------------------------------
+watch(
+  () => unref(provider?.stack),
+  (value) => {
+    changeRoute(value as RouteStack[]);
+  }
+);
+
+onMounted(() => {
+  changeRoute(unref(provider?.stack) as RouteStack[]);
+
+  // Initialize gesture
+  ges.value =
+    navigatorRef.value &&
+    gesture(
+      navigatorRef.value,
+      {
+        options: {
+          trackOutsideElement: true,
+        },
+
+        beforeEvent(e: Event) {
+          const target = e.target as HTMLElement | null;
+          const isEditable = target?.closest("input, textarea, select, button, [contenteditable]");
+          if (isEditable || props.variant === "none" || !prevPage.value) return false;
+          e.stopPropagation();
+          return true;
+        },
+
+        fast({ initialDirection }: GestureFastPayload) {
+          if (!initialDirection || initialDirection !== props.direction) return;
+          goBack();
+        },
+
+        move({ deltaX, deltaY, initialDirection, event }: GestureMovePayload) {
+          if (!initialDirection || initialDirection !== props.direction) return;
+          if (event.cancelable) event.preventDefault();
+          move({ deltaX, deltaY });
+        },
+
+        up({ deltaX, deltaY, initialDirection }: GestureUpPayload) {
+          if (!initialDirection || initialDirection !== props.direction) return;
+          up({ deltaX, deltaY });
+        },
+
+        cancel() {
+          resetTransform();
+        },
+      },
+      {
+        element: { passive: false },
+        move: { passive: false },
+      }
+    );
+});
+
+onUnmounted(() => {
+  if (ges.value) (ges.value as { destroy: () => void }).destroy();
+});
+</script>

package/src/components/route/route-outlet/index.ts

@@ -0,0 +1 @@
+export { default as RouteOutlet } from "./route-outlet.vue";

package/src/components/route/route-outlet/route-outlet.html

@@ -0,0 +1 @@
+<component :is="renderComponent" v-if="renderComponent"></component>

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

@@ -0,0 +1,39 @@
+<template src="./route-outlet.html"></template>
+<script lang="ts" setup>
+import { markRaw, onMounted, ref } from "vue";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = defineProps<{
+  component: unknown;
+}>();
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const renderComponent = ref<unknown | null>(null);
+
+// Methods
+// ----------------------------------------------------------------------------
+const resolveComponent = async (raw: unknown): Promise<unknown> => {
+  if (typeof raw !== "function") return raw;
+  const mod = await (raw as () => Promise<{ default?: unknown }>)();
+  return mod?.default ?? mod;
+};
+
+/** Accepts a component, async loader, or `{ default }` wrapper (common for vue-router). */
+const resolveFromProp = async (raw: unknown): Promise<unknown | null> => {
+  if (raw == null) return null;
+  const inner =
+    typeof raw === "object" && raw !== null && "default" in raw
+      ? (raw as { default: unknown }).default
+      : raw;
+  return resolveComponent(inner);
+};
+
+// Lifecycle
+// ----------------------------------------------------------------------------
+onMounted(async () => {
+  const resolved = await resolveFromProp(props.component);
+  renderComponent.value = resolved ? markRaw(resolved) : null;
+});
+</script>

package/src/components/route/route-provider/index.ts

@@ -0,0 +1 @@
+export { default as RouteProvider } from "./route-provider.vue";

package/src/components/route/route-provider/route-provider.html

@@ -0,0 +1 @@
+<slot />

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

@@ -0,0 +1,24 @@
+<template src="./route-provider.html"></template>
+<script lang="ts" setup>
+import { provide, computed } from "vue";
+import {
+  ROUTE_PROVIDER_STATE_KEY,
+  type RouteProviderProps,
+  type RouteProviderState,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = defineProps<RouteProviderProps>();
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const stack = computed(() => props.stack);
+
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
+provide<ProviderStateRefs<RouteProviderState>>(ROUTE_PROVIDER_STATE_KEY, {
+  stack,
+});
+</script>

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

@@ -0,0 +1,2 @@
+export { default as RouteWrapper } from "./route-wrapper.vue";
+export * from "./route-wrapper.composable";

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

@@ -0,0 +1,49 @@
+import { shallowRef } from "vue";
+import { type RouteComponent, type RouteLocationMatched } from "vue-router";
+import type { RouteStack } from "@toife/core";
+
+const stack = shallowRef<RouteStack[]>([]);
+
+/** Recursively builds a nested stack from vue-router `matched` for the navigator. */
+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
+  if (current.length > 1 && current[current.length - 2]?.name === matched[0].name) {
+    current.pop();
+  }
+
+  // Same route record: update nested stack only
+  if (
+    current.length > 0 &&
+    current[current.length - 1] &&
+    current[current.length - 1].name === matched[0].name
+  ) {
+    matched.shift();
+    current[current.length - 1].stack = buildTree(matched, current[current.length - 1].stack);
+  }
+  // Push a new segment (forward navigation)
+  else {
+    const name = String(matched[0].name);
+    const component = matched[0].components as RouteComponent;
+    matched.shift();
+    current.push({
+      name,
+      component,
+      stack: buildTree(matched, []),
+    });
+  }
+
+  return current;
+};
+
+export const useRouteWrapper = () => {
+  const updateRoutes = (matched: RouteLocationMatched[]) => {
+    stack.value = buildTree([...matched], [...stack.value]);
+  };
+
+  return {
+    stack,
+    updateRoutes,
+  };
+};

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

@@ -0,0 +1,3 @@
+<RouteProvider :stack="stack">
+  <slot />
+</RouteProvider>

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

@@ -0,0 +1,44 @@
+<template src="./route-wrapper.html"></template>
+<script lang="ts" setup>
+import { onMounted, watch } from "vue";
+import { useRouteWrapper } from "./route-wrapper.composable";
+import { useRouter, useRoute } from "vue-router";
+import { RouteProvider } from "../route-provider";
+import { ROUTE_WRAPPER_DEFAULT_PROPS, type RouteWrapperProps } from "@toife/core";
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<RouteWrapperProps>(), {
+  ...ROUTE_WRAPPER_DEFAULT_PROPS,
+});
+const { updateRoutes, stack } = useRouteWrapper();
+const route = useRoute();
+const router = useRouter();
+
+// Lifecycle
+// ----------------------------------------------------------------------------
+watch(
+  () => route.matched,
+  () => {
+    updateRoutes(route.matched);
+  }
+);
+
+onMounted(() => {
+  // Add home route to stack
+  const homeName = props.homeRouteName;
+
+  if (route.name === homeName) {
+    updateRoutes(route.matched);
+  } else {
+    const homeLocation = router.resolve({ name: homeName });
+    if (homeLocation.matched.length > 0) {
+      updateRoutes(homeLocation.matched);
+    }
+
+    // Apply current route to stack
+    setTimeout(() => {
+      updateRoutes(route.matched);
+    }, 50);
+  }
+});
+</script>

package/src/components/route/route.util.ts

@@ -0,0 +1,9 @@
+import type { RouteStack } from "@toife/core";
+
+/** Deep-clone the nested route stack tree (each level has its own `stack` branch). */
+export const clone = (value: RouteStack[]): RouteStack[] => {
+  return value.map((item: RouteStack) => ({
+    ...item,
+    stack: clone(item.stack),
+  })) as RouteStack[];
+};

package/src/components/segmented-field/index.ts

@@ -0,0 +1 @@
+export { default as SegmentedField } from "./segmented-field.vue";

package/src/components/segmented-field/segmented-field.html

@@ -0,0 +1,16 @@
+<div v-bind="wrapperAttrs">
+  <div v-bind="contentAttrs" @pointerup="onFieldClick">
+    <Field
+      v-for="(_, index) in props.length"
+      :key="index"
+      v-bind="fieldAttrs"
+      :model-value="segments[index]"
+      :tabindex="index === firstEmptyIndex ? 0 : -1"
+      @beforeinput="onSegmentBeforeinput($event, index)"
+      @input="onSegmentInput($event, index)"
+      @focus="onSegmentFocus($event, index)"
+      ref="fields"
+    />
+  </div>
+  <div v-bind="messageAttrs" v-if="message">{{ message }}</div>
+</div>