@toife/vue 3.0.3 → 3.0.5

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,22 @@
-<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.scss

@@ -4,7 +4,7 @@
 $modal: sass.fn-naming-prefix("modal");
 
 // Property name - layer: modal
-$background-color: sass.fn-naming-var("modal", "background-color");
+$modal-background-color: sass.fn-naming-var("modal", "background-color");
 $viewport-width: sass.fn-naming-var("viewport", "width");
 $viewport-max-width: sass.fn-naming-var("viewport", "max-width");
 $viewport-height: sass.fn-naming-var("viewport", "height");
@@ -17,7 +17,7 @@ $safe-area-right: sass.fn-naming-var("safe-area", "right");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$modal} {
-  background: rgb(#{$background-color});
+  background: rgb(#{$modal-background-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,

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

@@ -3,6 +3,7 @@
 <script lang="ts" setup>
 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.scss

@@ -9,8 +9,8 @@ $transition-duration: sass.fn-naming-dvar(
   ("transition", "duration"),
   sass.fn-naming-var("motion", "duration")
 );
-// layer: backdrop
-$backdrop-bg: sass.fn-naming-var("backdrop", "background-color");
+
+$backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");
 $backdrop-opacity: sass.fn-naming-var("backdrop", "opacity");
 
 $present-translate-plus: sass.fn-naming-dvar(("translate"), "100%");
@@ -30,7 +30,7 @@ $present-opacity: sass.fn-naming-dvar(("present", "opacity"), 1);
     color #{$transition-duration} ease,
     border-radius #{$transition-duration} ease,
     opacity #{$transition-duration} ease;
-  background-color: rgb(#{$backdrop-bg});
+  background-color: rgb(#{$backdrop-background-color});
   opacity: #{$backdrop-opacity};
 }
 

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.scss

@@ -4,15 +4,20 @@
 $radio: sass.fn-naming-prefix("radio");
 $radio-icon: sass.fn-naming-prefix("radio-icon");
 
-// Properties - layer: item
-$background-color: sass.fn-naming-var("radio", "background-color");
-$background-color-hover: sass.fn-naming-var("radio", "background-color", "subtle");
-$background-color-inactive: sass.fn-naming-var("radio", "background-color", "soft");
-$background-color-contrast: sass.fn-naming-var("radio", "background-color", "contrast");
-$background-color-disabled: sass.fn-naming-var("radio", "background-color", "subtle");
-
-$border-color: sass.fn-naming-var("radio", "border-color");
-$border-color-inactive: sass.fn-naming-var("radio", "border-color", "subtle");
+// Property name - layer: radio (states align with button + checkbox: inactive + contrast)
+$radio-background-color: sass.fn-naming-var("radio", "background-color");
+$radio-background-color-hover: sass.fn-naming-var("radio", "background-color", "hover");
+$radio-background-color-focus: sass.fn-naming-var("radio", "background-color", "focus");
+$radio-background-color-active: sass.fn-naming-var("radio", "background-color", "active");
+$radio-background-color-disabled: sass.fn-naming-var("radio", "background-color", "disabled");
+$radio-background-color-contrast: sass.fn-naming-var("radio", "background-color", "contrast");
+
+$radio-border-color: sass.fn-naming-var("radio", "border-color");
+$radio-border-color-hover: sass.fn-naming-var("radio", "border-color", "hover");
+$radio-border-color-focus: sass.fn-naming-var("radio", "border-color", "focus");
+$radio-border-color-active: sass.fn-naming-var("radio", "border-color", "active");
+$radio-border-color-disabled: sass.fn-naming-var("radio", "border-color", "disabled");
+$radio-border-color-inactive: sass.fn-naming-var("radio", "border-color", "inactive");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");
@@ -33,7 +38,7 @@ $border-radius: sass.fn-naming-var("border-radius");
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid rgb(#{$border-color-inactive});
+    border: 1px solid rgb(#{$radio-border-color-inactive});
     background-color: transparent;
     transition:
       box-shadow #{$transition-duration} ease,
@@ -50,7 +55,7 @@ $border-radius: sass.fn-naming-var("border-radius");
       width: 0.5rem;
       height: 0.5rem;
       border-radius: 50%;
-      background-color: rgb(#{$background-color-contrast});
+      background-color: rgb(#{$radio-background-color-contrast});
       transform: scale(0);
       transition:
         transform #{$transition-duration} ease,
@@ -63,13 +68,13 @@ $border-radius: sass.fn-naming-var("border-radius");
   &:not(.on) {
     .#{$radio-icon} {
       background-color: transparent;
-      border-color: rgb(#{$border-color-inactive});
+      border-color: rgb(#{$radio-border-color-inactive});
     }
 
     &:not(.disabled):not(.readonly):hover {
       .#{$radio-icon} {
-        border-color: rgb(#{$border-color});
-        background-color: rgba(#{$background-color-hover}, 0.2);
+        border-color: rgb(#{$radio-border-color-hover});
+        background-color: rgba(#{$radio-background-color-hover}, 0.2);
       }
     }
   }
@@ -77,8 +82,8 @@ $border-radius: sass.fn-naming-var("border-radius");
   &.on {
     &.fill {
       .#{$radio-icon} {
-        background-color: rgb(#{$background-color});
-        border-color: rgb(#{$background-color});
+        background-color: rgb(#{$radio-background-color});
+        border-color: rgb(#{$radio-background-color});
 
         &::after {
           transform: scale(1);
@@ -89,11 +94,11 @@ $border-radius: sass.fn-naming-var("border-radius");
     &.outline {
       .#{$radio-icon} {
         background-color: transparent;
-        border-color: rgb(#{$background-color});
+        border-color: rgb(#{$radio-background-color});
 
         &::after {
           transform: scale(1.5);
-          background-color: rgb(#{$background-color});
+          background-color: rgb(#{$radio-background-color});
         }
       }
     }
@@ -105,8 +110,8 @@ $border-radius: sass.fn-naming-var("border-radius");
 
     &.on {
       .#{$radio-icon} {
-        background-color: rgb(#{$background-color-disabled});
-        border-color: rgb(#{$background-color-disabled});
+        background-color: rgb(#{$radio-background-color-disabled});
+        border-color: rgb(#{$radio-border-color-disabled});
       }
     }
   }
@@ -118,7 +123,7 @@ $border-radius: sass.fn-naming-var("border-radius");
   &.focus {
     &.shadow {
       .#{$radio-icon} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgb(#{$radio-border-color-focus}, 0.25);
       }
     }
   }

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) => {