@toife/vue 3.0.0 → 3.0.2

package/src/components/decision-modal/decision-modal.md

@@ -0,0 +1,79 @@
+# `<t-decision-modal>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Confirmation dialog (title, message, actions) inside `Present`. Often driven with `useDecisionModal()` from `t-app`.
+
+## Requirements / dependencies
+
+| Item  | Notes                                                |
+| ----- | ---------------------------------------------------- |
+| Vue   | ^3.5                                                 |
+| Other | `t-app` recommended; depends on `Present`, `Button`. |
+
+## Basic usage
+
+```vue
+<t-decision-modal
+  :visible="show"
+  title="Confirm"
+  message="Are you sure?"
+  :actions="[
+    { text: 'Cancel', variant: 'text', handler: () => (show = false) },
+    { text: 'Delete', variant: 'fill', handler: onDelete },
+  ]"
+  :dismiss="['backdrop']"
+  @close="show = false"
+/>
+```
+
+Composable:
+
+```ts
+const modal = useDecisionModal();
+modal.open({
+  message: "…",
+  actions: […],
+  onClose: () => {},
+  onChoose: (btn) => {},
+});
+```
+
+## Props
+
+| Prop        | Type                    | Default      | Description                        |
+| ----------- | ----------------------- | ------------ | ---------------------------------- |
+| `visible`   | `boolean`               | `false`      | Visibility.                        |
+| `title`     | `string`                | —            | Title (`header` slot overrides).   |
+| `message`   | `string`                | _(required)_ | Main copy (`body` slot overrides). |
+| `actions`   | `DecisionModalButton[]` | _(required)_ | Footer buttons.                    |
+| `dismiss`   | `string[]`              | —            | Close reasons that emit `close`.   |
+| `placement` | `string`                | `"center"`   | `Present` placement.               |
+| `role`      | `string`                | —            | Theme.                             |
+| `shape`     | `string`                | —            | Shape.                             |
+| `divider`   | `boolean`               | —            | Divider; default from app.         |
+| `flow`      | `"row" \| "column"`     | `"row"`      | Footer button layout.              |
+
+**Type source:** `src/components/decision-modal/decision-modal.type.ts`
+
+## Events (emits)
+
+| Event    | Payload                    | Description                      |
+| -------- | -------------------------- | -------------------------------- |
+| `close`  | `type?: string`            | Valid dismiss (per `dismiss`).   |
+| `choose` | `btn: DecisionModalButton` | Button chosen (after `handler`). |
+
+## Slots
+
+| Slot     | Description                              |
+| -------- | ---------------------------------------- |
+| `header` | Replaces header (default shows `title`). |
+| `body`   | Replaces `message`.                      |
+| `footer` | Replaces default button row.             |
+
+## See also
+
+- Source: `src/components/decision-modal`
+- `decision-modal.composable.ts`

package/src/components/decision-modal/decision-modal.scss

@@ -8,9 +8,9 @@ $decision-modal-footer: sass.fn-naming-prefix("decision-modal-footer");
 $button: sass.fn-naming-prefix("button");
 $shape-pill: sass.fn-naming-prefix("shape-pill");
 
-// Property name - layer: surface
+// Property name - layer: decision-modal
 $border-radius: sass.fn-naming-var("border-radius");
-$background-color: sass.fn-naming-var("surface", "background-color");
+$background-color: sass.fn-naming-var("decision-modal", "background-color");
 $width: sass.fn-naming-var("viewport", "width");
 $max-width: sass.fn-naming-var("overlay", "max-width");
 $padding-y: sass.fn-naming-var("spacing", "y");
@@ -19,7 +19,7 @@ $margin-y: sass.fn-naming-var("spacing", "y");
 $margin-x: sass.fn-naming-var("spacing", "x");
 $animation-duration: sass.fn-naming-var("motion", "duration");
 $border-width: sass.fn-naming-var("stroke", "width");
-$border-color: sass.fn-naming-var("surface", "border-color");
+$border-color: sass.fn-naming-var("decision-modal", "border-color");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$decision-modal} {

package/src/components/decision-modal/decision-modal.vue

@@ -47,7 +47,7 @@ const divider = computed(() => {
 const decisionModalAttrs = computed(() => {
   return {
     class: [
-      withPrefix(["layer", "surface"]),
+      withPrefix(["layer", "decision-modal"]),
       withPrefix(["role", role.value]),
       withPrefix(["shape", shape.value]),
       withPrefix("decision-modal"),

package/src/components/divider/divider.md

@@ -0,0 +1,42 @@
+# `<t-divider>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Horizontal or vertical divider line following theme.
+
+## Requirements / dependencies
+
+| Item  | Notes               |
+| ----- | ------------------- |
+| Vue   | ^3.5                |
+| Other | `t-app` for `role`. |
+
+## Basic usage
+
+```vue
+<t-divider orientation="horizontal" />
+<t-divider orientation="vertical" />
+```
+
+## Props
+
+| Prop          | Type                         | Default        | Description                     |
+| ------------- | ---------------------------- | -------------- | ------------------------------- |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Divider direction.              |
+| `role`        | `string`                     | —              | Theme stroke; default from app. |
+
+**Type source:** `src/components/divider/divider.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+_None._
+
+## See also
+
+- Source: `src/components/divider`

package/src/components/divider/divider.scss

@@ -4,7 +4,7 @@
 $divider: sass.fn-naming-prefix("divider");
 
 // Property - layer: stroke
-$border-color: sass.fn-naming-var("stroke", "border-color");
+$border-color: sass.fn-naming-var("divider", "border-color");
 $border-width: sass.fn-naming-var("stroke", "width");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 

package/src/components/divider/divider.vue

@@ -15,15 +15,12 @@ const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
 /// Computed
 /// ------------------------------------------------------------
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
-
 const dividerAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
   return {
     class: [
-      withPrefix(["layer", "stroke"]),
-      withPrefix(["role", role.value]),
+      withPrefix(["layer", "divider"]),
+      withPrefix(["role", role]),
       withPrefix("divider"),
       {
         [props.orientation]: true,

package/src/components/field/field.md

@@ -0,0 +1,68 @@
+# `<t-field>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Text input field. The current implementation only renders `OutlineField` when `variant === 'outline'`. Supports `v-model`, validation message, help text, and many input options.
+
+## Requirements / dependencies
+
+| Item  | Notes                |
+| ----- | -------------------- |
+| Vue   | ^3.5                 |
+| Other | `t-app` recommended. |
+
+## Basic usage
+
+```vue
+<t-field v-model="text" placeholder="Type…" />
+```
+
+## Props
+
+| Prop                    | Type               | Default      | Description                                                       |
+| ----------------------- | ------------------ | ------------ | ----------------------------------------------------------------- |
+| `modelValue`            | `string`           | `""`         | Value (`v-model`).                                                |
+| `name`                  | `string`           | —            | Input `name`.                                                     |
+| `variant`               | `FieldVariant`     | `"outline"`  | Only `outline` is wired in the current UI.                        |
+| `role` / `shape`        | `string`           | —            | Theme; default from app.                                          |
+| `size`                  | `FieldSize`        | `"standard"` | Field size.                                                       |
+| `shadow`                | `boolean`          | —            | Default from app.                                                 |
+| `direction`             | `AppDirection`     | —            | Default from app or `left`.                                       |
+| `id`                    | `string`           | —            | Element id.                                                       |
+| `value`                 | `string`           | —            | May mirror model (`OutlineField` uses `value \|\| modelValue`).   |
+| `placeholder`           | `string`           | `""`         | Placeholder.                                                      |
+| `disabled` / `readonly` | `boolean`          | `false`      |                                                                   |
+| `autocomplete`          | `string`           | —            |                                                                   |
+| `maxLength`             | `number \| string` | —            |                                                                   |
+| `tabindex`              | `number \| string` | —            |                                                                   |
+| `type`                  | `FieldType`        | `"text"`     | `text`, `number`, `email`, `password`, `tel`, `url`, `paragraph`. |
+| `line` / `maxLine`      | `number \| string` | `1` / —      | Lines (paragraph).                                                |
+| `message`               | `string`           | `""`         | Validation / warning message.                                     |
+| `help`                  | `string`           | `""`         | Help hint.                                                        |
+
+**Type source:** `src/components/field/field.type.ts`
+
+## Events (emits)
+
+| Event               | Payload      | Description   |
+| ------------------- | ------------ | ------------- |
+| `update:modelValue` | `string`     | Model update. |
+| `focus`             | `FocusEvent` |               |
+| `blur`              | `FocusEvent` |               |
+| `input`             | `Event`      |               |
+| `beforeinput`       | `Event`      |               |
+
+## Slots
+
+_None_ — content is owned by `OutlineField` (which may expose a default slot in the implementation).
+
+## `v-model`
+
+`modelValue` / `update:modelValue`.
+
+## See also
+
+- Source: `src/components/field`
+- [outline-field.md](./outline/outline-field.md) — implementation detail when `variant="outline"`

package/src/components/field/outline/outline-field.md

@@ -0,0 +1,44 @@
+# `OutlineField`
+
+> **Not** registered by `createToife()` — named import: `import { OutlineField } from "@toife/vue"` or register manually: `app.component("t-outline-field", OutlineField)`.
+
+## Description
+
+Outline field implementation (contenteditable or password `<input>`), used internally by `t-field` when `variant === 'outline'`. Import directly if you need it without the `Field` wrapper.
+
+## Requirements / dependencies
+
+| Item  | Notes                                               |
+| ----- | --------------------------------------------------- |
+| Vue   | ^3.5                                                |
+| Other | Same `FieldProps` / `FieldEmit` as `field.type.ts`. |
+
+## Basic usage
+
+```vue
+<script setup lang="ts">
+import { OutlineField } from "@toife/vue";
+</script>
+<template>
+  <OutlineField v-model="x" variant="outline" type="text" />
+</template>
+```
+
+## Props / events
+
+Same as `FieldProps` / `FieldEmit` — see [field.md](../field.md) and `field.type.ts`.
+
+## Slots
+
+| Slot      | Description                                             |
+| --------- | ------------------------------------------------------- |
+| `default` | Extra content after help (see `outline.html` template). |
+
+## Behavior notes
+
+- When `type !== 'password'`: contenteditable region with `v-text` and caret handling.
+- When `password`: native `<input type="password">`.
+
+## See also
+
+- Source: `src/components/field/outline`

package/src/components/field/outline/outline.scss

@@ -12,9 +12,9 @@ $field-direction-right: sass.fn-naming-prefix("direction", "right");
 // Property name
 $border-radius: sass.fn-naming-var("border-radius");
 $border-width: sass.fn-naming-var("stroke", "width");
-$border-color: sass.fn-naming-var("item", "border-color");
-$role-color: sass.fn-naming-var("item", "background-color");
-$base-color: sass.fn-naming-var("base", "color");
+$border-color: sass.fn-naming-var("field", "border-color");
+$role-color: sass.fn-naming-var("field", "background-color");
+$app-color: sass.fn-naming-var("app", "color");
 $line: sass.fn-naming-var("field", "line");
 $max-line: sass.fn-naming-var("field", "max-line");
 
@@ -60,8 +60,8 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     z-index: 2;
     min-height: calc(#{$line} * #{$size-height} - 2 * #{$border-width});
     max-height: calc(#{$max-line} * #{$size-height} - 2 * #{$border-width});
-    color: rgb(#{$base-color});
-    caret-color: rgb(#{$base-color});
+    color: rgb(#{$app-color});
+    caret-color: rgb(#{$app-color});
     border: none;
     user-select: all;
     font-size: #{$size-font-size};
@@ -93,7 +93,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     }
 
     &::placeholder {
-      color: rgba(#{$base-color}, 0.5);
+      color: rgba(#{$app-color}, 0.5);
     }
   }
 
@@ -112,7 +112,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 
   // Help
   .#{$field-help} {
-    color: rgb(#{$base-color}, 0.75);
+    color: rgb(#{$app-color}, 0.75);
     font-size: 0.8em;
     line-height: 1.5;
     transition:
@@ -152,7 +152,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     .#{$field-input} {
       &::before {
         content: attr(placeholder);
-        color: rgba(#{$base-color}, 0.5);
+        color: rgba(#{$app-color}, 0.5);
         transition: color #{$transition-duration} ease;
         position: absolute;
         height: calc(#{$size-height} - #{$border-width} * 2);

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

@@ -38,7 +38,7 @@ const content = computed(() => {
 const fieldAttrs = computed(() => {
   return {
     class: [
-      withPrefix(["layer", "item"]),
+      withPrefix(["layer", "field"]),
       withPrefix(["role", props.role || ""]),
       withPrefix(["shape", props.shape || ""]),
       withPrefix("field"),
@@ -84,7 +84,7 @@ const fieldMessageAttrs = computed(() => ({
 }));
 
 const fieldHelpAttrs = computed(() => ({
-  class: [withPrefix("field-help"), withPrefix(["layer", "surface"]), withPrefix(["role", "mode"])],
+  class: [withPrefix("field-help")],
 }));
 
 /// Methods

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

@@ -0,0 +1,41 @@
+# `<t-form-group>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Groups controls in a horizontal or vertical flex layout; used by `Action` to stack button rows.
+
+## Requirements / dependencies
+
+| Item  | Notes |
+| ----- | ----- |
+| Vue   | ^3.5  |
+| Other | None. |
+
+## Basic usage
+
+```vue
+<t-form-group orientation="vertical">
+  <t-button>A</t-button>
+  <t-button>B</t-button>
+</t-form-group>
+```
+
+## Props
+
+| Prop          | Type                         | Default        | Description  |
+| ------------- | ---------------------------- | -------------- | ------------ |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout axis. |
+
+**Type source:** `src/components/form-group/form-group.type.ts`
+
+## Slots
+
+| Slot      | Description     |
+| --------- | --------------- |
+| `default` | Child controls. |
+
+## See also
+
+- Source: `src/components/form-group`

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

@@ -0,0 +1,42 @@
+# `<t-gesture-indicator>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Small visual stroke hint for swipe placement; usually rendered inside `Modal` when swipe-to-dismiss is enabled.
+
+## Requirements / dependencies
+
+| Item  | Notes               |
+| ----- | ------------------- |
+| Vue   | ^3.5                |
+| Other | `t-app` for `role`. |
+
+## Basic usage
+
+```vue
+<!-- Rarely used standalone; Modal renders it when gesture + indicator -->
+<t-gesture-indicator placement="bottom" />
+```
+
+## Props
+
+| Prop        | Type     | Default    | Description                             |
+| ----------- | -------- | ---------- | --------------------------------------- |
+| `placement` | `string` | `"bottom"` | Placement class (e.g. `bottom`, `top`). |
+
+**Type source:** `src/components/gesture-indicator/gesture-indicator.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+_None_ — decorative empty element.
+
+## See also
+
+- Source: `src/components/gesture-indicator`
+- [modal.md](../../modal/modal.md)

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

@@ -3,8 +3,8 @@
 // Class name
 $gesture-indicator: sass.fn-naming-prefix("gesture-indicator");
 
-// Property name - layer: stroke
-$border-color: sass.fn-naming-var("stroke", "border-color");
+// Property name - layer: gesture-indicator
+$border-color: sass.fn-naming-var("gesture-indicator", "border-color");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$gesture-indicator} {

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

@@ -15,15 +15,12 @@ const props = withDefaults(defineProps<GestureIndicatorProps>(), {
 
 /// Computed
 /// ------------------------------------------------------------
-const role = computed(() => {
-  return appState?.role.value || "";
-});
-
 const gestureIndicatorAttrs = computed(() => {
+  const role = appState?.role.value || "";
   return {
     class: [
-      withPrefix(["layer", "stroke"]),
-      withPrefix(["role", role.value]),
+      withPrefix(["layer", "gesture-indicator"]),
+      withPrefix(["role", role]),
       withPrefix("gesture-indicator"),
       props.placement,
     ],

package/src/components/image/image.md

@@ -0,0 +1,41 @@
+# `<t-image>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+`<img>` with fallback to `defaultSrc` on load error.
+
+## Requirements / dependencies
+
+| Item  | Notes |
+| ----- | ----- |
+| Vue   | ^3.5  |
+| Other | None. |
+
+## Basic usage
+
+```vue
+<t-image src="/a.webp" default-src="/placeholder.png" />
+```
+
+## Props
+
+| Prop         | Type     | Default | Description                            |
+| ------------ | -------- | ------- | -------------------------------------- |
+| `src`        | `string` | —       | Primary image URL (assigned on mount). |
+| `defaultSrc` | `string` | —       | Fallback URL on `@error`.              |
+
+**Type source:** `src/components/image/image.type.ts`
+
+## Events (emits)
+
+_None declared_ — internal `@error` handler.
+
+## Slots
+
+_None._
+
+## See also
+
+- Source: `src/components/image`

package/src/components/modal/modal.md

@@ -0,0 +1,65 @@
+# `<t-modal>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Modal content inside `Present`, integrated with `@toife/gesture` for swipe-to-dismiss along `placement` (except `center`). Optional fullscreen and gesture indicator.
+
+## Requirements / dependencies
+
+| Item  | Notes                                |
+| ----- | ------------------------------------ |
+| Vue   | ^3.5                                 |
+| Other | `@toife/gesture`; `t-app` for theme. |
+
+## Basic usage
+
+```vue
+<t-modal :visible="open" placement="bottom" @close="() => (open = false)">
+  <p>Content</p>
+</t-modal>
+```
+
+## Props
+
+| Prop              | Type                                   | Default     | Description                                  |
+| ----------------- | -------------------------------------- | ----------- | -------------------------------------------- |
+| `visible`         | `boolean`                              | `false`     | Visibility.                                  |
+| `placement`       | `PresentPlacement`                     | `"bottom"`  | Position + gesture direction.                |
+| `backdrop`        | `"display" \| "none" \| "transparent"` | `"display"` | Backdrop.                                    |
+| `keepalive`       | `boolean`                              | `true`      | Keep DOM when closed (`Present`).            |
+| `gesture`         | `boolean`                              | `true`      | Enable swipe to close.                       |
+| `fullscreen`      | `boolean`                              | `false`     | Full-screen panel.                           |
+| `indicator`       | `boolean`                              | `true`      | Show `GestureIndicator` (when not `center`). |
+| `duration`        | `number`                               | `200`       | `Present` transition (ms).                   |
+| `bounce`          | `number \| string`                     | `0`         | `Present` bounce.                            |
+| `role` / `shape`  | `string`                               | —           | Theme.                                       |
+| `class` / `style` | `unknown`                              | —           | Passed to `Present` / root.                  |
+
+**Type source:** `src/components/modal/modal.type.ts`
+
+## Events (emits)
+
+| Event   | Payload         | Description                                           |
+| ------- | --------------- | ----------------------------------------------------- |
+| `close` | `type?: string` | From `Present` or gesture (`backdrop`, `gesture`, …). |
+
+## Slots
+
+| Slot      | Description |
+| --------- | ----------- |
+| `default` | Modal body. |
+
+## Expose
+
+Nothing public (internal refs to `Present` / gesture).
+
+## Accessibility (a11y)
+
+Add focus trap / `aria-modal` at the app layer if you need strict WCAG compliance.
+
+## See also
+
+- Source: `src/components/modal`
+- [present.md](../../present/present.md)

package/src/components/modal/modal.scss

@@ -3,8 +3,8 @@
 // Class name
 $modal: sass.fn-naming-prefix("modal");
 
-// Property name - layer: surface
-$background-color: sass.fn-naming-var("surface", "background-color");
+// Property name - layer: 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");

package/src/components/modal/modal.vue

@@ -47,7 +47,7 @@ const modalAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "surface"]),
+      withPrefix(["layer", "modal"]),
       withPrefix(["role", role]),
       withPrefix(["shape", shape]),
       withPrefix("modal"),

package/src/components/page/page.md

@@ -0,0 +1,39 @@
+# `<t-page>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Simple page wrapper with the themed `page` class.
+
+## Requirements / dependencies
+
+| Item  | Notes |
+| ----- | ----- |
+| Vue   | ^3.5  |
+| Other | None. |
+
+## Basic usage
+
+```vue
+<t-app>
+  <t-page>
+    <t-toolbar />
+    <t-container>Content</t-container>
+  </t-page>
+</t-app>
+```
+
+## Props
+
+_None._
+
+## Slots
+
+| Slot      | Description     |
+| --------- | --------------- |
+| `default` | Page structure. |
+
+## See also
+
+- Source: `src/components/page`

package/src/components/page/page.vue

@@ -2,13 +2,8 @@
 <style lang="scss" src="./page.scss" scoped></style>
 <script lang="ts" setup>
 import { withPrefix } from "@/utils";
-import { computed } from "vue";
 
-/// Computed
-/// ------------------------------------------------------------
-const pageAttrs = computed(() => {
-  return {
-    class: [withPrefix("page")],
-  };
-});
+const pageAttrs = {
+  class: [withPrefix("page")],
+} as const;
 </script>