@toife/vue 3.0.2 → 3.0.4

package/src/components/field/outline/outline.vue

@@ -5,8 +5,8 @@ import { computed, nextTick, ref, watch } from "vue";
 import type { FieldProps, FieldEmit } from "../field.type";
 import { property, withPrefix } from "../../../utils";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<FieldProps>(), {
   modelValue: "",
   type: "text",
@@ -22,15 +22,15 @@ const props = withDefaults(defineProps<FieldProps>(), {
 });
 const emit = defineEmits<FieldEmit>();
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const isFocus = ref(false);
 const contentRef = ref<HTMLElement>();
 const caret = ref(0);
 const isComposing = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const content = computed(() => {
   return props.value || props.modelValue;
 });
@@ -87,8 +87,8 @@ const fieldHelpAttrs = computed(() => ({
   class: [withPrefix("field-help")],
 }));
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const isBr = (node: Node): node is HTMLBRElement =>
   node.nodeType === 1 && (node as HTMLElement).tagName === "BR";
 
@@ -226,8 +226,8 @@ const onBeforeinput = (ev: Event) => {
   emit("beforeinput", ev);
 };
 
-/// Lifecycle
-/// ------------------------------------------------------------
+// Lifecycle
+// ----------------------------------------------------------------------------
 watch(
   () => content.value,
   async (val) => {

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

@@ -1,18 +1,18 @@
 <style lang="scss" src="./form-group.scss" scoped></style>
 <template src="./form-group.html"></template>
 <script lang="ts" setup>
-import { withPrefix } from "@/utils";
+import { withPrefix } from "../../utils";
 import { computed } from "vue";
 import { type FormGroupProps } from "./form-group.type";
 
-/// Defined
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<FormGroupProps>(), {
   orientation: "horizontal",
 });
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const formGroupAttrs = computed(() => {
   return {
     class: [withPrefix("form-group"), props.orientation],

package/src/components/gesture-indicator/gesture-indicator.type.ts

@@ -1,4 +1,4 @@
-// Define
+// Type definitions
 export type GestureIndicatorProps = {
   placement?: string;
 };

package/src/components/gesture-indicator/gesture-indicator.vue

@@ -6,15 +6,15 @@ import { type GestureIndicatorProps } from "./gesture-indicator.type";
 import { computed, inject } from "vue";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<GestureIndicatorProps>(), {
   placement: "bottom",
 });
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const gestureIndicatorAttrs = computed(() => {
   const role = appState?.role.value || "";
   return {

package/src/components/image/image.type.ts

@@ -1,4 +1,4 @@
-// Define
+// Type definitions
 export type ImageProps = {
   defaultSrc?: string;
   src?: string;

package/src/components/image/image.vue

@@ -1,25 +1,23 @@
 <style lang="scss" src="./image.scss" scoped></style>
 <template src="./image.html"></template>
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import { type ImageProps } from "./image.type";
 
-/// Define
-/// ------------------------------------------------------------
-const dataSrc = ref<unknown>("");
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const { defaultSrc, src } = defineProps<ImageProps>();
 
-/// Methods
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
+// Initialize from src to avoid an empty src flash before mount
+const dataSrc = ref<string>(src ?? "");
+
+// Methods
+// ----------------------------------------------------------------------------
 const handleError = () => {
   if (defaultSrc) {
     dataSrc.value = defaultSrc;
   }
 };
-
-/// Lifecycle
-/// ------------------------------------------------------------
-onMounted(() => {
-  dataSrc.value = src;
-});
 </script>

package/src/components/modal/modal.vue

@@ -9,8 +9,8 @@ import { type ModalProps, type ModalEmit } from "./modal.type";
 import { withPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<ModalProps>(), {
   backdrop: "display",
   keepalive: true,
@@ -25,15 +25,15 @@ const props = withDefaults(defineProps<ModalProps>(), {
 const emit = defineEmits<ModalEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const modal = ref();
 const present = ref();
 const isBusy = ref(false);
 const ges = ref<unknown>(null);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const gestureDir = computed(() => {
   if (props.placement == "bottom") return "down";
   if (props.placement == "top") return "up";
@@ -61,12 +61,13 @@ const modalAttrs = computed(() => {
   };
 });
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const close = (e: string) => {
   emit("close", e);
 };
 
+// Cooldown so rapid gesture events do not fight the sheet animation
 const busy = () => {
   isBusy.value = true;
   setTimeout(() => {
@@ -75,11 +76,12 @@ const busy = () => {
 };
 
 // Lifecycle
-/// ------------------------------------------------------------
+// ----------------------------------------------------------------------------
 watch(
   () => modal.value,
   (val) => {
     if (val) {
+      // Drag-to-dismiss along the placement axis (skipped for centered modals)
       ges.value = toifeGesture(modal.value, {
         isMoving: false,
 

package/src/components/page/page.vue

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

package/src/components/present/present.composable.ts

@@ -1,5 +1,6 @@
 import { ref } from "vue";
 
+// Base z-index for stacked overlays; increments by 2 so backdrop sits one level below its sheet
 const index = ref(1000);
 
 export const usePresent = () => {

package/src/components/present/present.vue

@@ -6,10 +6,8 @@ import { computed, onMounted, reactive, ref, watch } from "vue";
 import { withPrefix, property } from "../../utils";
 import { usePresent } from "./present.composable";
 
-/// Define
-/// ------------------------------------------------------------
-const presentIndex = usePresent();
-const emit = defineEmits(["close"]) as unknown as PresentEmit;
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<PresentProps>(), {
@@ -20,9 +18,11 @@ const props = withDefaults(defineProps<PresentProps>(), {
   placement: "bottom",
   bounce: false,
 });
+const emit = defineEmits(["close"]) as unknown as PresentEmit;
+const presentIndex = usePresent();
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const isBounced = ref(false);
 const zIndex = ref(0);
 const isShow = ref(false);
@@ -34,8 +34,8 @@ const styles = reactive({
   presentOpacity: 1,
 });
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const backdropAttrs = computed(() => {
   return {
     class: [withPrefix(["layer", "backdrop"]), withPrefix("present-backdrop")],
@@ -73,7 +73,7 @@ const time = computed(() => {
 });
 
 // Methods
-/// ------------------------------------------------------------
+// ----------------------------------------------------------------------------
 const createIndex = () => {
   if (zIndex.value === 0 || !props.keepalive) {
     zIndex.value = presentIndex.newIndex();
@@ -161,7 +161,7 @@ const close = () => {
 };
 
 // Lifecycle
-/// ------------------------------------------------------------
+// ----------------------------------------------------------------------------
 onMounted(() => {
   if (props.visible) open();
   else close();
@@ -188,8 +188,8 @@ watch(
   }
 );
 
-// Export, Expose
-/// ------------------------------------------------------------
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
 defineExpose({
   render,
   open,

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

@@ -1,6 +1,6 @@
 export type RadioVariant = "fill" | "outline";
 
-// Define
+// Type definitions
 export type RadioProps = {
   value: string | number;
   role?: string;

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

@@ -7,8 +7,8 @@ import { withPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 import { type RadioGroupProviderState, RADIO_GROUP_PROVIDER_STATE_KEY } from "../radio-group";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<RadioProps>(), {
   disabled: false,
   shadow: undefined,
@@ -19,12 +19,12 @@ const radioGroupState = inject<RadioGroupProviderState | null>(
   null
 );
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const isFocused = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const role = computed(() => {
   return props.role || radioGroupState?.role.value || appState?.role.value || "";
 });
@@ -74,8 +74,8 @@ const radioIconAttrs = {
   class: [withPrefix("radio-icon")],
 } as const;
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const onRadio = () => {
   if (disabled.value || readonly.value || !radioGroupState) return;
   radioGroupState.setValue(props.value);

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

@@ -7,8 +7,8 @@ import { withPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 import { RADIO_GROUP_PROVIDER_STATE_KEY } from "./radio-group.constants";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<RadioGroupProps>(), {
   disabled: false,
   readonly: false,
@@ -19,8 +19,8 @@ const props = withDefaults(defineProps<RadioGroupProps>(), {
 const emit = defineEmits<RadioGroupEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const modelValue = computed(() => props.modelValue);
 
 const role = computed(() => {
@@ -41,8 +41,8 @@ const radioGroupAttrs = computed(() => {
   };
 });
 
-/// Provide
-/// ------------------------------------------------------------
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
 provide<RadioGroupProviderState>(RADIO_GROUP_PROVIDER_STATE_KEY, {
   modelValue,
   role,

package/src/components/refresher/refresher.type.ts

@@ -1,7 +1,7 @@
 // Props
 export type RefresherVariant = "max" | "up";
 
-// Define
+// Type definitions
 export type RefresherProps = {
   threshold?: number;
   variant?: RefresherVariant;

package/src/components/refresher/refresher.vue

@@ -6,25 +6,25 @@ import { gesture } from "@toife/gesture";
 import type { RefresherProps, RefresherEmit } from "./refresher.type";
 import { property, withPrefix } from "../../utils";
 
-/// Define
-/// ------------------------------------------------------------
-const emit = defineEmits<RefresherEmit>();
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<RefresherProps>(), {
   threshold: 120,
   variant: "max",
   offset: undefined,
 });
+const emit = defineEmits<RefresherEmit>();
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const moveOffset = ref(0);
 const refreshing = ref(false);
 const container = ref();
 let cleanup: unknown;
 let locked = false;
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const calculateOffset = computed(() => {
   return props.offset !== undefined ? props.offset : moveOffset.value / 2;
 });
@@ -49,8 +49,8 @@ const containerAttrs = computed(() => {
   };
 });
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const close = () => {
   refreshing.value = false;
   moveOffset.value = 0;
@@ -71,8 +71,8 @@ const cancel = () => {
   emit("cancel");
 };
 
-/// Lifecycle
-/// ------------------------------------------------------------
+// Lifecycle
+// ----------------------------------------------------------------------------
 watch(
   () => container.value,
   () => {

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

@@ -1,12 +1,36 @@
 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

@@ -4,7 +4,11 @@
 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 type {
+  RouteNavigatorEmit,
+  RouteNavigatorProps,
+  RouteNavigatorTransformState,
+} from "./route-navigator.type";
 import {
   ROUTE_PROVIDER_STATE_KEY,
   RouteProvider,
@@ -16,38 +20,40 @@ 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;
 
-/// Define
-/// ------------------------------------------------------------
 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();
-/// State
-/// ------------------------------------------------------------
+
+// Reactive state
+// ----------------------------------------------------------------------------
 const navigatorRef = ref<HTMLElement>();
 const ges = ref<unknown>(null);
-const transform = reactive({
+const transform = reactive<RouteNavigatorTransformState>({
   back: BACK_LAYER_PEEK_PCT,
   prepare: 100,
   active: 0,
   backdrop: 0,
-  duration: undefined as string | undefined,
+  duration: undefined,
 });
 const stack = ref<RouteStack[]>([]);
 const activeIndex = ref(0);
 const backdropIndex = ref(0);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const navigatorAttrs = computed(() => {
   let duration =
     transform.duration !== undefined ? transform.duration : transform.active > 0 ? "0s" : undefined;
@@ -90,8 +96,8 @@ const prevPage = computed(() => {
   return null;
 });
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const changeRoute = (value: RouteStack[]) => {
   const data = clone(value);
 
@@ -112,10 +118,13 @@ const changeRoute = (value: RouteStack[]) => {
     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
@@ -123,32 +132,38 @@ const changeRoute = (value: RouteStack[]) => {
     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);
     }, 10);
 
     setTimeout(() => {
       transform.backdrop = 100;
       activeIndex.value = stack.value.length - 1;
+      emit("transform", transform);
     }, 100);
   }
 };
 
 const goBack = () => {
-  const url = stack.value[activeIndex.value - 1].fullPath;
-  router.push(url);
+  if (activeIndex.value <= 0) return;
+  const prev = stack.value[activeIndex.value - 1];
+  if (!prev) return;
+  router.push(prev.fullPath);
 };
 
 const resetTransform = () => {
   transform.back = BACK_LAYER_PEEK_PCT;
   transform.prepare = 100;
   transform.active = 0;
+
+  emit("transform", transform);
 };
 
 const move = (data: RouteNavigatorGesture) => {
-  console.log(stack.value);
   const width = navigatorRef.value?.offsetWidth ?? 0;
   let percent = 0;
 
@@ -161,6 +176,8 @@ const move = (data: RouteNavigatorGesture) => {
   transform.back = ((100 - percent) * BACK_LAYER_PEEK_PCT) / 100;
   transform.active = percent;
   transform.backdrop = 100 - transform.active;
+
+  emit("transform", transform);
 };
 
 const up = (data: RouteNavigatorGesture) => {
@@ -180,8 +197,8 @@ const up = (data: RouteNavigatorGesture) => {
   }
 };
 
-/// Lifecycle
-/// ------------------------------------------------------------
+// Lifecycle
+// ----------------------------------------------------------------------------
 watch(
   () => provider?.stack.value,
   (value) => {