@toife/vue 3.0.0 → 3.0.2

package/src/components/present/present.md

@@ -0,0 +1,60 @@
+# `Present` _(named export; not in default `createToife`)_
+
+> **Not** registered by `createToife()` — import: `import { Present } from "@toife/vue"` and register globally yourself if needed.
+
+## Description
+
+Overlay layer: backdrop + animated panel, stacking z-index via `usePresent`. Used internally by `Modal`, `Action`, `DecisionModal`.
+
+## Requirements / dependencies
+
+| Item  | Notes |
+| ----- | ----- |
+| Vue   | ^3.5  |
+| Other | None. |
+
+## Basic usage
+
+```vue
+<Present :visible="show" placement="bottom" backdrop="display" @close="onClose">
+  <div>Content</div>
+</Present>
+```
+
+## Props
+
+| Prop              | Type                                   | Default     | Description                         |
+| ----------------- | -------------------------------------- | ----------- | ----------------------------------- |
+| `visible`         | `boolean`                              | `false`     | Open/close (with `duration` delay). |
+| `backdrop`        | `"display" \| "none" \| "transparent"` | `"display"` | Backdrop.                           |
+| `placement`       | `PresentPlacement`                     | `"bottom"`  | Animation direction.                |
+| `keepalive`       | `boolean`                              | `false`     | Keep DOM when closed.               |
+| `duration`        | `number`                               | `200`       | ms.                                 |
+| `bounce`          | `number \| string \| boolean`          | `false`     | Open bounce.                        |
+| `class` / `style` | `unknown`                              | —           | Panel.                              |
+
+**Type source:** `src/components/present/present.type.ts`
+
+## Events (emits)
+
+| Event   | Payload         | Description                                 |
+| ------- | --------------- | ------------------------------------------- |
+| `close` | `type?: string` | e.g. `'backdrop'` when backdrop is clicked. |
+
+## Slots
+
+| Slot      | Description    |
+| --------- | -------------- |
+| `default` | Panel content. |
+
+## Expose (template ref)
+
+| API                              | Description                                       |
+| -------------------------------- | ------------------------------------------------- |
+| `render(options: RenderOptions)` | Update transition styles (translate, opacity, …). |
+| `open()` / `close()`             | Manual animation control.                         |
+
+## See also
+
+- Source: `src/components/present`
+- `present.composable.ts` — `usePresent` (z-index stack)

package/src/components/present/present.vue

@@ -51,7 +51,7 @@ const backdropAttrs = computed(() => {
 // Present attributes
 const presentAttrs = computed(() => {
   return {
-    class: [withPrefix(["layer", "base"]), withPrefix("present"), props.class, props.placement],
+    class: [withPrefix("present"), props.class, props.placement],
     style: [
       {
         zIndex: zIndex.value,

package/src/components/radio/radio/radio.md

@@ -0,0 +1,53 @@
+# `<t-radio>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Single choice in a group — **must** be used inside `t-radio-group` so selection updates via inject.
+
+## Requirements / dependencies
+
+| Item  | Notes                            |
+| ----- | -------------------------------- |
+| Vue   | ^3.5                             |
+| Other | Parent `t-radio-group` required. |
+
+## Basic usage
+
+```vue
+<t-radio-group v-model="x">
+  <t-radio value="1">One</t-radio>
+</t-radio-group>
+```
+
+## Props
+
+| Prop       | Type               | Default      | Description               |
+| ---------- | ------------------ | ------------ | ------------------------- |
+| `value`    | `string \| number` | _(required)_ | Value when selected.      |
+| `role`     | `string`           | —            | Overrides group/app role. |
+| `variant`  | `RadioVariant`     | —            | Overrides group variant.  |
+| `disabled` | `boolean`          | `false`      | Or from group.            |
+| `readonly` | `boolean`          | `false`      | Or from group.            |
+| `shadow`   | `boolean`          | —            | Group/app default.        |
+
+**Type source:** `src/components/radio/radio/radio.type.ts`
+
+## Events (emits)
+
+_None_ — selection goes through the group’s `setValue`.
+
+## Slots
+
+| Slot      | Description |
+| --------- | ----------- |
+| `default` | Label.      |
+
+## Accessibility (a11y)
+
+`tabindex` 0/-1; Space/Enter selects. Consider `role="radiogroup"` on the container in your app if needed.
+
+## See also
+
+- Source: `src/components/radio/radio`

package/src/components/radio/radio/radio.scss

@@ -5,14 +5,14 @@ $radio: sass.fn-naming-prefix("radio");
 $radio-icon: sass.fn-naming-prefix("radio-icon");
 
 // Properties - layer: item
-$background-color: sass.fn-naming-var("item", "background-color");
-$background-color-hover: sass.fn-naming-var("item", "background-color", "subtle");
-$background-color-inactive: sass.fn-naming-var("item", "background-color", "soft");
-$background-color-contrast: sass.fn-naming-var("item", "background-color", "contrast");
-$background-color-disabled: sass.fn-naming-var("item", "background-color", "subtle");
-
-$border-color: sass.fn-naming-var("item", "border-color");
-$border-color-inactive: sass.fn-naming-var("item", "border-color", "subtle");
+$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");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");

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

@@ -45,14 +45,12 @@ const isChecked = computed(() => {
   return radioGroupState?.modelValue.value === props.value;
 });
 
-const shadow = computed(() => {
-  return (props?.shadow !== undefined ? props.shadow : radioGroupState?.shadow.value) ?? false;
-});
-
 const radioAttrs = computed(() => {
+  const shadow =
+    (props?.shadow !== undefined ? props.shadow : radioGroupState?.shadow.value) ?? false;
   return {
     class: [
-      withPrefix(["layer", "item"]),
+      withPrefix(["layer", "radio"]),
       withPrefix([
         "role",
         (isChecked.value && !disabled.value
@@ -65,18 +63,16 @@ const radioAttrs = computed(() => {
         on: isChecked.value,
         disabled: disabled.value,
         readonly: readonly.value,
-        shadow: shadow.value,
+        shadow,
         focus: isFocused.value,
       },
     ],
   };
 });
 
-const radioIconAttrs = computed(() => {
-  return {
-    class: [withPrefix("radio-icon")],
-  };
-});
+const radioIconAttrs = {
+  class: [withPrefix("radio-icon")],
+} as const;
 
 /// Methods
 /// ------------------------------------------------------------

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

@@ -0,0 +1,62 @@
+# `<t-radio-group>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Radio group with shared `v-model`; provides variant/readonly/disabled/shadow to child `t-radio` via provide/inject.
+
+## Requirements / dependencies
+
+| Item  | Notes                                |
+| ----- | ------------------------------------ |
+| Vue   | ^3.5                                 |
+| Other | Wrap one or more `t-radio` children. |
+
+## Basic usage
+
+```vue
+<t-radio-group v-model="choice" orientation="vertical">
+  <t-radio value="a">A</t-radio>
+  <t-radio value="b">B</t-radio>
+</t-radio-group>
+```
+
+## Props
+
+| Prop          | Type                         | Default      | Description                           |
+| ------------- | ---------------------------- | ------------ | ------------------------------------- |
+| `modelValue`  | `string \| number`           | —            | Selected value (`v-model`).           |
+| `role`        | `string`                     | —            | Theme; default from app.              |
+| `variant`     | `RadioVariant`               | `"fill"`     | Default for radios unless overridden. |
+| `disabled`    | `boolean`                    | `false`      | Whole group.                          |
+| `readonly`    | `boolean`                    | `false`      |                                       |
+| `shadow`      | `boolean`                    | —            | Default from app.                     |
+| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | Flex layout.                          |
+
+**Type source:** `src/components/radio/radio-group/radio-group.type.ts`
+
+## Events (emits)
+
+| Event               | Payload            | Description                     |
+| ------------------- | ------------------ | ------------------------------- |
+| `update:modelValue` | `string \| number` | When a child radio is selected. |
+
+## Slots
+
+| Slot      | Description         |
+| --------- | ------------------- |
+| `default` | `t-radio` children. |
+
+## `v-model`
+
+`modelValue` / `update:modelValue`.
+
+## Provide / inject
+
+`RADIO_GROUP_PROVIDER_STATE_KEY`: `modelValue`, `role`, `variant`, `disabled`, `readonly`, `shadow`, `setValue`.
+
+## See also
+
+- Source: `src/components/radio/radio-group`
+- [radio.md](../radio/radio.md)

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

@@ -37,12 +37,7 @@ const shadow = computed(() => {
 
 const radioGroupAttrs = computed(() => {
   return {
-    class: [
-      withPrefix(["layer", "item"]),
-      withPrefix(["role", role.value]),
-      withPrefix("radio-group"),
-      props.orientation,
-    ],
+    class: [withPrefix("radio-group"), props.orientation],
   };
 });
 

package/src/components/refresher/refresher.md

@@ -0,0 +1,53 @@
+# `<t-refresher>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Pull-to-refresh using `@toife/gesture` on the scroll container; two variants control when refresh fires (`max` vs `up`).
+
+## Requirements / dependencies
+
+| Item  | Notes             |
+| ----- | ----------------- |
+| Vue   | ^3.5              |
+| Other | `@toife/gesture`. |
+
+## Basic usage
+
+```vue
+<t-refresher variant="up" :threshold="120" @refresh="(done) => load().finally(done)">
+  <template #icon="{ offset, refreshing }">…</template>
+  <div class="scroll-area">…</div>
+</t-refresher>
+```
+
+## Props
+
+| Prop        | Type            | Default | Description                                                                              |
+| ----------- | --------------- | ------- | ---------------------------------------------------------------------------------------- |
+| `threshold` | `number`        | `120`   | Pull threshold (px) depending on `variant`.                                              |
+| `variant`   | `"max" \| "up"` | `"max"` | `max`: fire during `move` when threshold reached; `up`: fire on `up` when threshold met. |
+| `offset`    | `number`        | —       | Override displayed offset (default `moveOffset / 2`).                                    |
+
+**Type source:** `src/components/refresher/refresher.type.ts`
+
+## Events (emits)
+
+| Event     | Payload             | Description                                       |
+| --------- | ------------------- | ------------------------------------------------- |
+| `refresh` | `close: () => void` | Call `close()` when refresh finishes to reset UI. |
+| `move`    | `offset: number`    | While pulling.                                    |
+| `cancel`  | —                   | Pull cancelled.                                   |
+| `start`   | —                   | Gesture started.                                  |
+
+## Slots
+
+| Slot      | Slot props               | Description                               |
+| --------- | ------------------------ | ----------------------------------------- |
+| `icon`    | `{ offset, refreshing }` | Indicator above the scroll area.          |
+| `default` | —                        | Scroll region (internal ref for gesture). |
+
+## See also
+
+- Source: `src/components/refresher`

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

@@ -6,7 +6,7 @@ $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("base", "background-color");
+$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")

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

@@ -16,6 +16,12 @@ 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>(), {
@@ -30,7 +36,7 @@ const router = useRouter();
 const navigatorRef = ref<HTMLElement>();
 const ges = ref<unknown>(null);
 const transform = reactive({
-  back: 30,
+  back: BACK_LAYER_PEEK_PCT,
   prepare: 100,
   active: 0,
   backdrop: 0,
@@ -131,16 +137,18 @@ const changeRoute = (value: RouteStack[]) => {
 };
 
 const goBack = () => {
-  router.back();
+  const url = stack.value[activeIndex.value - 1].fullPath;
+  router.push(url);
 };
 
 const resetTransform = () => {
-  transform.back = 40;
+  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;
 
@@ -150,8 +158,8 @@ const move = (data: RouteNavigatorGesture) => {
     percent = (Math.abs(data.deltaY) / width) * 100;
   }
 
-  transform.back = Math.round(((100 - percent) * 40) / 100);
-  transform.active = Math.round(percent);
+  transform.back = ((100 - percent) * BACK_LAYER_PEEK_PCT) / 100;
+  transform.active = percent;
   transform.backdrop = 100 - transform.active;
 };
 
@@ -191,8 +199,7 @@ onMounted(() => {
       beforeEvent(e: Event) {
         const target = e.target as HTMLElement | null;
         const isEditable = target?.closest("input, textarea, select, button, [contenteditable]");
-        if (isEditable) return false;
-        e.preventDefault();
+        if (isEditable || props.variant === "none") return false;
         e.stopPropagation();
         return prevPage.value;
       },
@@ -216,7 +223,6 @@ onMounted(() => {
         event: Event;
       }) {
         if (initialDirection !== props.direction) return;
-        event.stopPropagation();
         event.preventDefault();
         move({ deltaX, deltaY });
       },
@@ -233,7 +239,6 @@ onMounted(() => {
         event: Event;
       }) {
         if (initialDirection !== props.direction) return;
-        event.stopPropagation();
         event.preventDefault();
         up({ deltaX, deltaY });
       },

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-provider/route-provider.md

@@ -0,0 +1,46 @@
+# `<t-route-provider>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Provides `stack` (`RouteStack[]`) to `RouteNavigator` / children via inject.
+
+## Requirements / dependencies
+
+| Item  | Notes                                                  |
+| ----- | ------------------------------------------------------ |
+| Vue   | ^3.5                                                   |
+| Other | Usually created by `RouteWrapper` or `RouteNavigator`. |
+
+## Basic usage
+
+```vue
+<!-- Rarely used directly; RouteNavigator wraps children -->
+<t-route-provider :stack="myStack">
+  <slot />
+</t-route-provider>
+```
+
+## Props
+
+| Prop    | Type           | Description                        |
+| ------- | -------------- | ---------------------------------- |
+| `stack` | `RouteStack[]` | Route stack (see `route.type.ts`). |
+
+**Type source:** `src/components/route/route-provider/route-provider.type.ts`
+
+## Slots
+
+| Slot      | Description                           |
+| --------- | ------------------------------------- |
+| `default` | Children (often outlet or navigator). |
+
+## Provide / inject
+
+`ROUTE_PROVIDER_STATE_KEY` → `{ stack }` (computed).
+
+## See also
+
+- Source: `src/components/route/route-provider`
+- `src/components/route/route.type.ts`

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

@@ -1,39 +1,54 @@
 import { shallowRef } from "vue";
 import { type RouteComponent, type RouteLocationMatched } from "vue-router";
 import { type RouteStack } from "../route.type";
+import { RouteWrapperOption } from "./route-wrapper.type";
 
 const stack = shallowRef<RouteStack[]>([]);
-const buildTree = (matched: RouteLocationMatched[], data: RouteStack[]) => {
-  if (matched.length === 0) return data;
 
-  // Case data is previous
-  if (data.length > 1 && data[data.length - 2]?.name === matched[0].name) {
-    data.pop();
+const buildTree = (
+  matched: RouteLocationMatched[],
+  current: RouteStack[],
+  option: RouteWrapperOption
+) => {
+  if (matched.length === 0) return current;
+
+  // Case current is previous
+  if (current.length > 1 && current[current.length - 2]?.name === matched[0].name) {
+    current.pop();
   }
 
-  // Case data is current
-  if (data.length > 0 && data[data.length - 1] && data[data.length - 1].name === matched[0].name) {
+  // Case current is current
+  if (
+    current.length > 0 &&
+    current[current.length - 1] &&
+    current[current.length - 1].name === matched[0].name
+  ) {
     matched.shift();
-    data[data.length - 1].stack = buildTree(matched, data[data.length - 1].stack);
+    current[current.length - 1].stack = buildTree(
+      matched,
+      current[current.length - 1].stack,
+      option
+    );
   }
-  // Case data is add
+  // Case current is add
   else {
     const name = String(matched[0].name);
     const component = matched[0].components as RouteComponent;
     matched.shift();
-    data.push({
+    current.push({
       name,
       component,
-      stack: buildTree(matched, []),
+      fullPath: option.fullPath,
+      stack: buildTree(matched, [], option),
     });
   }
 
-  return data;
+  return current;
 };
 
 export const useRouteWrapper = () => {
-  const updateRoutes = (matched: RouteLocationMatched[]) => {
-    stack.value = buildTree([...matched], [...stack.value]);
+  const updateRoutes = (matched: RouteLocationMatched[], option: RouteWrapperOption) => {
+    stack.value = buildTree([...matched], [...stack.value], option);
   };
 
   return {

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

@@ -0,0 +1,45 @@
+# `<t-route-wrapper>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Syncs the route stack with `vue-router` and wraps content in `RouteProvider` — main entry for stack-based navigation (with `RouteNavigator`).
+
+## Requirements / dependencies
+
+| Item         | Notes                                    |
+| ------------ | ---------------------------------------- |
+| Vue          | ^3.5                                     |
+| `vue-router` | **Required** — `useRoute` / `useRouter`. |
+
+## Basic usage
+
+```vue
+<t-route-wrapper home-route-name="home">
+  <t-route-navigator />
+</t-route-wrapper>
+```
+
+## Props
+
+| Prop            | Type     | Default  | Description                                    |
+| --------------- | -------- | -------- | ---------------------------------------------- |
+| `homeRouteName` | `string` | `"home"` | Name of the root route used to seed the stack. |
+
+**Type source:** `src/components/route/route-wrapper/route-wrapper.type.ts`
+
+## Slots
+
+| Slot      | Description                        |
+| --------- | ---------------------------------- |
+| `default` | Child tree (navigator, layout, …). |
+
+## Provide / inject
+
+Renders `RouteProvider` with `stack` from `useRouteWrapper`.
+
+## See also
+
+- Source: `src/components/route/route-wrapper`
+- [route-provider.md](../route-provider/route-provider.md), [route-navigator.md](../route-navigator/route-navigator.md)

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

@@ -1,3 +1,7 @@
 export type RouteWrapperProps = {
   homeRouteName?: string;
 };
+
+export type RouteWrapperOption = {
+  fullPath: string;
+};