@toife/vue 3.1.5 → 3.2.0

package/src/components/refresher/refresher.vue

@@ -1,123 +0,0 @@
-<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 { cssProperty, cssPrefix } from "../../utils";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<RefresherProps>(), {
-  threshold: 120,
-  variant: "max",
-  offset: undefined,
-});
-const emit = defineEmits<RefresherEmit>();
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const moveOffset = ref(0);
-const refreshing = ref(false);
-const container = ref();
-let cleanup: unknown;
-let locked = false;
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const calculateOffset = computed(() => {
-  return props.offset !== undefined ? props.offset : moveOffset.value / 2;
-});
-
-const containerAttrs = computed(() => {
-  return {
-    class: [cssPrefix("refresher")],
-  };
-});
-
-// 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

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

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

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

@@ -1,19 +0,0 @@
-<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.scss

@@ -1,127 +0,0 @@
-@use "@toife/sass-layer" 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: rgba(#{$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: rgba(#{$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(#{$transform-back});
-      }
-
-      &.left {
-        transform: translateX(calc(-1 * #{$transform-back}));
-      }
-
-      &.up {
-        transform: translateY(calc(-1 * #{$transform-back}));
-      }
-
-      &.down {
-        transform: translateY(#{$transform-back});
-      }
-    }
-  }
-}

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

@@ -1,36 +0,0 @@
-export type RouteNavigatorVariant = "none" | "swipe";
-
-/**
- * Route Navigator Props Type
- */
-export type RouteNavigatorProps = {
-  direction?: "left" | "right";
-  variant?: RouteNavigatorVariant;
-  keepalive?: boolean;
-};
-
-/**
- * Route Navigator Gesture Type
- */
-export type RouteNavigatorGesture = {
-  deltaX: number;
-  deltaY: number;
-};
-
-/**
- * Route Navigator Emit Type
- */
-export type RouteNavigatorEmit = {
-  (e: "transform", value: RouteNavigatorTransformState): void;
-};
-
-/**
- * Route Navigator Transform State Type
- */
-export type RouteNavigatorTransformState = {
-  back: number;
-  prepare: number;
-  active: number;
-  backdrop: number;
-  duration: string | undefined;
-};

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

@@ -1,275 +0,0 @@
-<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 { cssPrefix, cssProperty } from "../../../utils";
-import type {
-  RouteNavigatorEmit,
-  RouteNavigatorProps,
-  RouteNavigatorTransformState,
-} 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";
-
-// 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>(), {
-  direction: "right",
-  variant: "none",
-  keepalive: false,
-});
-const emit = defineEmits<RouteNavigatorEmit>();
-const provider = inject<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(() => {
-  let duration =
-    transform.duration !== undefined ? transform.duration : transform.active > 0 ? "0s" : undefined;
-
-  if (props.variant === "none") {
-    duration = "0s";
-  }
-
-  return {
-    class: [cssPrefix("route-navigator"), props.direction, props.variant],
-    style: {
-      [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: [cssPrefix("route-navigator-component"), props.direction],
-  };
-});
-
-const backdropAttrs = computed(() => {
-  return {
-    class: [cssPrefix("route-navigator-backdrop"), cssPrefix(["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;
-    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(
-  () => 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" || !prevPage.value) return false;
-        e.stopPropagation();
-        return prevPage.value;
-      },
-
-      fast({ initialDirection, event }: { initialDirection: string; event: Event }) {
-        if (initialDirection !== props.direction) return;
-        goBack();
-      },
-
-      move({
-        deltaX,
-        deltaY,
-        initialDirection,
-        event,
-      }: {
-        deltaX: number;
-        deltaY: number;
-        initialDirection: string;
-        event: Event;
-      }) {
-        if (initialDirection !== props.direction) return;
-        move({ deltaX, deltaY });
-      },
-
-      up({
-        deltaX,
-        deltaY,
-        initialDirection,
-        event,
-      }: {
-        deltaX: number;
-        deltaY: number;
-        initialDirection: string;
-        event: Event;
-      }) {
-        if (initialDirection !== props.direction) return;
-        up({ deltaX, deltaY });
-      },
-
-      cancel() {
-        resetTransform();
-      },
-    });
-});
-
-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,3 +0,0 @@
-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

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

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

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

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

@@ -1,10 +0,0 @@
-import { ComputedRef } from "vue";
-import { RouteStack } from "../route.type";
-
-export type RouteProviderProps = {
-  stack: RouteStack[];
-};
-
-export type RouteProviderState = {
-  stack: ComputedRef<RouteStack[]>;
-};

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

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

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

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