@toife/vue 3.3.3 → 3.3.6

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

@@ -1,254 +0,0 @@
-<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

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

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

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

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

@@ -1,39 +0,0 @@
-<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

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

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

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

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

@@ -1,24 +0,0 @@
-<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

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

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

@@ -1,49 +0,0 @@
-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

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

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

@@ -1,44 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,16 +0,0 @@
-<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>