@toife/vue 2.2.0 → 3.0.1

package/src/components/refresher/refresher.vue

@@ -0,0 +1,137 @@
+<style lang="scss" src="./refresher.scss" scoped></style>
+<template src="./refresher.html"></template>
+<script lang="ts" setup>
+import { ref, onUnmounted, watch, computed } from "vue";
+import { gesture } from "@toife/gesture";
+import type { RefresherProps, RefresherEmit } from "./refresher.type";
+import { property, withPrefix } from "../../utils";
+
+/// Define
+/// ------------------------------------------------------------
+const emit = defineEmits<RefresherEmit>();
+const props = withDefaults(defineProps<RefresherProps>(), {
+  threshold: 120,
+  variant: "max",
+  offset: undefined,
+});
+
+/// State
+/// ------------------------------------------------------------
+const moveOffset = ref(0);
+const refreshing = ref(false);
+const container = ref();
+let cleanup: unknown;
+let locked = false;
+
+/// Computed
+/// ------------------------------------------------------------
+const calculateOffset = computed(() => {
+  return props.offset !== undefined ? props.offset : moveOffset.value / 2;
+});
+
+const refresherAttrs = computed(() => {
+  return {
+    style: {
+      [property("refresher-offset")]: `${calculateOffset.value}px`,
+    },
+    class: [
+      withPrefix("refresher"),
+      {
+        moving: calculateOffset.value > 0,
+      },
+    ],
+  };
+});
+
+const containerAttrs = computed(() => {
+  return {
+    class: [withPrefix("refresher-container")],
+  };
+});
+
+/// Methods
+/// ------------------------------------------------------------
+const close = () => {
+  refreshing.value = false;
+  moveOffset.value = 0;
+  locked = false;
+};
+
+const start = () => {
+  locked = true;
+  refreshing.value = true;
+  moveOffset.value = props.threshold;
+  emit("refresh", close);
+};
+
+const cancel = () => {
+  moveOffset.value = 0;
+  refreshing.value = false;
+  locked = false;
+  emit("cancel");
+};
+
+/// Lifecycle
+/// ------------------------------------------------------------
+watch(
+  () => container.value,
+  () => {
+    cleanup && (cleanup as { destroy: () => void }).destroy();
+    if (!container.value) return;
+    cleanup = gesture(
+      container.value,
+      {
+        options: {
+          minMove: 20,
+        },
+
+        beforeEvent() {
+          if (container.value.scrollTop > 0) return false;
+          return true;
+        },
+
+        down() {
+          if (refreshing.value || locked) return;
+          emit("start");
+        },
+
+        move({ deltaY, initialDirection }: unknown) {
+          if (refreshing.value || locked || initialDirection != "down") return;
+
+          const v = deltaY < 0 ? 0 : deltaY;
+          moveOffset.value = v;
+          emit("move", v);
+
+          if (props.variant == "max") {
+            if (deltaY >= props.threshold) {
+              start();
+              return;
+            }
+          }
+        },
+        up({ deltaY, initialDirection }: unknown) {
+          if (refreshing.value || locked || initialDirection != "down") return;
+
+          // max
+          if (props.variant == "up" && deltaY >= props.threshold) {
+            start();
+          } else {
+            cancel();
+          }
+        },
+        cancel() {
+          if (refreshing.value || locked) return;
+          cancel();
+        },
+      },
+      {
+        passive: false,
+      }
+    );
+  }
+);
+
+onUnmounted(() => {
+  cleanup && (cleanup as { destroy: () => void }).destroy();
+});
+</script>

package/src/components/route/index.ts

@@ -0,0 +1,5 @@
+export * from "./route-navigator";
+export * from "./route-wrapper";
+export * from "./route-provider";
+export * from "./route-outlet";
+export * from "./route.type";

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

@@ -0,0 +1,2 @@
+export { default as RouteNavigator } from "./route-navigator.vue";
+export * from "./route-navigator.type";

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

@@ -0,0 +1,19 @@
+<div v-bind="navigatorAttrs" ref="navigatorRef">
+  <div
+    v-for="(item, index) in stack"
+    :key="item.name"
+    v-bind="componentAttrs"
+    :style="{zIndex: index * 2}"
+    :name="item.name"
+    :class="{
+      active: index === activeIndex,
+      prepare: index === activeIndex + 1,
+      back: index === activeIndex - 1,
+    }"
+  >
+    <RouteProvider :stack="item.stack">
+      <RouteOutlet :component="item.component" />
+    </RouteProvider>
+  </div>
+  <div v-bind="backdropAttrs"></div>
+</div>

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

@@ -0,0 +1,50 @@
+# `<t-route-navigator>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Displays a stack of screens with transitions and optional edge swipe to `router.back()` when `variant="swipe"`. Listens to `stack` from `RouteProvider`.
+
+## Requirements / dependencies
+
+| Item         | Notes                                                                    |
+| ------------ | ------------------------------------------------------------------------ |
+| Vue          | ^3.5                                                                     |
+| `vue-router` | **Required**                                                             |
+| Other        | `@toife/gesture`; `RouteProvider` ancestor (usually via `RouteWrapper`). |
+
+## Basic usage
+
+```vue
+<t-route-wrapper>
+  <t-route-navigator variant="swipe" direction="right" />
+</t-route-wrapper>
+```
+
+## Props
+
+| Prop        | Type                | Default   | Description                               |
+| ----------- | ------------------- | --------- | ----------------------------------------- |
+| `direction` | `"left" \| "right"` | `"right"` | Gesture / animation direction.            |
+| `variant`   | `"none" \| "swipe"` | `"none"`  | Enables swipe navigation when not `none`. |
+| `keepalive` | `boolean`           | `false`   | Reserved for stack/DOM retention.         |
+
+**Type source:** `src/components/route/route-navigator/route-navigator.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+_None_ — fixed structure: stack loop → `RouteProvider` + `RouteOutlet`.
+
+## Special behavior
+
+- Swipe along `direction`: preview transform; release past ~60% width → `goBack()`.
+- `fast` swipe calls `router.back()`.
+
+## See also
+
+- Source: `src/components/route/route-navigator`

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

@@ -0,0 +1,127 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Classes
+$navigator: sass.fn-naming-prefix("route-navigator");
+$navigator-component: sass.fn-naming-prefix("route-navigator-component");
+$navigator-backdrop: sass.fn-naming-prefix("route-navigator-backdrop");
+
+// Property name
+$background-color: sass.fn-naming-var("app", "background-color");
+$transition-duration: sass.fn-naming-dvar(
+  ("route-navigator-transition-duration"),
+  sass.fn-naming-var("motion", "duration")
+);
+$transform-back: sass.fn-naming-var("route-navigator-transform", "back");
+$transform-prepare: sass.fn-naming-var("route-navigator-transform", "prepare");
+$transform-active: sass.fn-naming-var("route-navigator-transform", "active");
+$backdrop-percent: sass.fn-naming-var("route-navigator-backdrop-percent");
+$backdrop-opacity: sass.fn-naming-var("backdrop", "opacity");
+$backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");
+
+// Properties
+.#{$navigator} {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  justify-content: flex-end;
+  position: relative;
+
+  &.right {
+    flex-direction: row;
+  }
+
+  &.left {
+    flex-direction: row-reverse;
+  }
+
+  &.up {
+    flex-direction: column;
+  }
+
+  &.down {
+    flex-direction: column-reverse;
+  }
+
+  .#{$navigator-backdrop} {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgb(#{$backdrop-background-color});
+    opacity: calc(#{$backdrop-opacity} * (#{$backdrop-percent} / 100));
+    transition: opacity #{$transition-duration} ease;
+  }
+
+  .#{$navigator-component} {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    max-width: 100%;
+    max-height: 100%;
+    top: 0;
+    left: 0;
+    flex: none;
+    background-color: rgb(#{$background-color});
+    transform: translate(0, 0);
+    transition:
+      transform #{$transition-duration} ease,
+      background-color #{$transition-duration} ease;
+
+    &.active {
+      &.right {
+        transform: translateX(#{$transform-active});
+      }
+
+      &.left {
+        transform: translateX(calc(-1 * #{$transform-active}));
+      }
+
+      &.up {
+        transform: translateY(calc(-1 * #{$transform-active}));
+      }
+
+      &.down {
+        transform: translateY(#{$transform-active});
+      }
+    }
+
+    &.prepare {
+      &.right {
+        transform: translateX(#{$transform-prepare});
+      }
+
+      &.left {
+        transform: translateX(calc(-1 * #{$transform-prepare}));
+      }
+
+      &.up {
+        transform: translateY(calc(-1 * #{$transform-prepare}));
+      }
+
+      &.down {
+        transform: translateY(#{$transform-prepare});
+      }
+    }
+
+    &.back {
+      &.right {
+        transform: translateX(calc(-1 * #{$transform-back}));
+      }
+
+      &.left {
+        transform: translateX(#{$transform-back});
+      }
+
+      &.up {
+        transform: translateY(#{$transform-back});
+      }
+
+      &.down {
+        transform: translateY(calc(-1 * #{$transform-back}));
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+export type RouteNavigatorVariant = "none" | "swipe";
+
+export type RouteNavigatorProps = {
+  direction?: "left" | "right";
+  variant?: RouteNavigatorVariant;
+  keepalive?: boolean;
+};
+
+export type RouteNavigatorGesture = {
+  deltaX: number;
+  deltaY: number;
+};

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

@@ -0,0 +1,255 @@
+<style lang="scss" src="./route-navigator.scss" scoped></style>
+<template src="./route-navigator.html"></template>
+<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 type { RouteNavigatorProps } from "./route-navigator.type";
+import {
+  ROUTE_PROVIDER_STATE_KEY,
+  RouteProvider,
+  type RouteProviderState,
+} from "../route-provider";
+import { RouteOutlet } from "../route-outlet";
+import type { RouteNavigatorGesture } from "./route-navigator.type";
+import type { RouteStack } from "../route.type";
+import { useRouter } from "vue-router";
+import { clone } from "../route.util";
+
+// 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;
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<RouteNavigatorProps>(), {
+  direction: "right",
+  variant: "none",
+  keepalive: false,
+});
+const provider = inject<RouteProviderState>(ROUTE_PROVIDER_STATE_KEY);
+const router = useRouter();
+/// State
+/// ------------------------------------------------------------
+const navigatorRef = ref<HTMLElement>();
+const ges = ref<unknown>(null);
+const transform = reactive({
+  back: BACK_LAYER_PEEK_PCT,
+  prepare: 100,
+  active: 0,
+  backdrop: 0,
+  duration: undefined as string | undefined,
+});
+const stack = ref<RouteStack[]>([]);
+const activeIndex = ref(0);
+const backdropIndex = ref(0);
+
+/// Computed
+/// ------------------------------------------------------------
+const navigatorAttrs = computed(() => {
+  let duration =
+    transform.duration !== undefined ? transform.duration : transform.active > 0 ? "0s" : undefined;
+
+  if (props.variant === "none") {
+    duration = "0s";
+  }
+
+  return {
+    class: [withPrefix("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,
+    },
+  };
+});
+
+const componentAttrs = computed(() => {
+  return {
+    class: [withPrefix("route-navigator-component"), props.direction],
+  };
+});
+
+const backdropAttrs = computed(() => {
+  return {
+    class: [withPrefix("route-navigator-backdrop"), withPrefix(["layer", "backdrop"])],
+    style: {
+      zIndex: backdropIndex.value * 2 - 1,
+    },
+  };
+});
+
+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;
+    setTimeout(() => {
+      stack.value = stack.value.slice(0, -1);
+      backdropIndex.value = newIndex;
+      transform.backdrop = 100;
+    }, 250);
+  }
+  // Case: next
+  else {
+    stack.value.push(data[data.length - 1]);
+    transform.duration = "0s";
+    transform.backdrop = 0;
+
+    setTimeout(() => {
+      backdropIndex.value = backdropIndex.value + 1;
+      transform.duration = undefined;
+    }, 10);
+
+    setTimeout(() => {
+      transform.backdrop = 100;
+      activeIndex.value = stack.value.length - 1;
+    }, 100);
+  }
+};
+
+const goBack = () => {
+  const url = stack.value[activeIndex.value - 1].fullPath;
+  router.push(url);
+};
+
+const resetTransform = () => {
+  transform.back = BACK_LAYER_PEEK_PCT;
+  transform.prepare = 100;
+  transform.active = 0;
+};
+
+const move = (data: RouteNavigatorGesture) => {
+  console.log(stack.value);
+  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;
+  }
+
+  transform.back = ((100 - percent) * BACK_LAYER_PEEK_PCT) / 100;
+  transform.active = percent;
+  transform.backdrop = 100 - transform.active;
+};
+
+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(
+  () => provider?.stack.value,
+  (value) => {
+    changeRoute(value as RouteStack[]);
+  }
+);
+
+onMounted(() => {
+  changeRoute(provider?.stack.value as RouteStack[]);
+
+  // Initialize gesture
+  ges.value =
+    navigatorRef.value &&
+    gesture(navigatorRef.value, {
+      beforeEvent(e: Event) {
+        const target = e.target as HTMLElement | null;
+        const isEditable = target?.closest("input, textarea, select, button, [contenteditable]");
+        if (isEditable || props.variant === "none") return false;
+        e.stopPropagation();
+        return prevPage.value;
+      },
+
+      fast({ initialDirection, event }: { initialDirection: string; event: Event }) {
+        if (initialDirection !== props.direction) return;
+        event.stopPropagation();
+        event.preventDefault();
+        goBack();
+      },
+
+      move({
+        deltaX,
+        deltaY,
+        initialDirection,
+        event,
+      }: {
+        deltaX: number;
+        deltaY: number;
+        initialDirection: string;
+        event: Event;
+      }) {
+        if (initialDirection !== props.direction) return;
+        event.preventDefault();
+        move({ deltaX, deltaY });
+      },
+
+      up({
+        deltaX,
+        deltaY,
+        initialDirection,
+        event,
+      }: {
+        deltaX: number;
+        deltaY: number;
+        initialDirection: string;
+        event: Event;
+      }) {
+        if (initialDirection !== props.direction) return;
+        event.preventDefault();
+        up({ deltaX, deltaY });
+      },
+
+      cancel() {
+        resetTransform();
+      },
+    });
+});
+
+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.md

@@ -0,0 +1,30 @@
+# `<t-route-outlet>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Resolves and renders a route component (sync or async dynamic import).
+
+## Requirements / dependencies
+
+| Item  | Notes                                                         |
+| ----- | ------------------------------------------------------------- |
+| Vue   | ^3.5                                                          |
+| Other | Used inside `RouteNavigator` with `component` from the stack. |
+
+## Props
+
+| Prop        | Type      | Description                                                |
+| ----------- | --------- | ---------------------------------------------------------- |
+| `component` | `unknown` | Route component (may be `{ default: () => import(...) }`). |
+
+_(Inline type in `route-outlet.vue`.)_
+
+## Slots
+
+_None_ — renders `<component :is="…">`.
+
+## See also
+
+- Source: `src/components/route/route-outlet`

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

@@ -0,0 +1,30 @@
+<template src="./route-outlet.html"></template>
+<script lang="ts" setup>
+import { markRaw, onMounted, ref } from "vue";
+
+/// Define
+/// ------------------------------------------------------------
+const props = defineProps<{
+  component: unknown;
+}>();
+
+/// 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;
+};
+
+/// Lifecycle
+/// ------------------------------------------------------------
+onMounted(async () => {
+  const c = props.component as { default?: unknown };
+  const component = await resolveComponent(c?.default);
+  renderComponent.value = component ? markRaw(component) : null;
+});
+</script>

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

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

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

@@ -0,0 +1 @@
+export const ROUTE_PROVIDER_STATE_KEY = "route-provider-state";

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

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