@toife/vue 3.1.3 → 3.1.4

package/src/components/field/field.md

@@ -1,68 +0,0 @@
-# `<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

@@ -1,44 +0,0 @@
-# `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/form-group/form-group.md

@@ -1,41 +0,0 @@
-# `<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 direction="vertical">
-  <t-button>A</t-button>
-  <t-button>B</t-button>
-</t-form-group>
-```
-
-## Props
-
-| Prop        | Type                         | Default        | Description  |
-| ----------- | ---------------------------- | -------------- | ------------ |
-| `direction` | `"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

@@ -1,42 +0,0 @@
-# `<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/image/image.md

@@ -1,41 +0,0 @@
-# `<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/layout/cell/cell.html

@@ -1 +0,0 @@
-<div v-bind="cellAttrs"><slot /></div>

package/src/components/layout/cell/cell.md

@@ -1,47 +0,0 @@
-# `<t-grid-item>`
-
-> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
-
-## Description
-
-Cell inside `<t-grid>`. Placement uses `grid-column` / `grid-row` via props or raw CSS strings.
-
-## Requirements / dependencies
-
-| Item   | Notes                                          |
-| ------ | ---------------------------------------------- |
-| Vue    | ^3.5                                           |
-| Parent | `<t-grid>` (or any `display: grid` container). |
-
-## Basic usage
-
-```vue
-<t-grid :columns="3">
-  <t-grid-item :column-span="2">Wide</t-grid-item>
-  <t-grid-item>Narrow</t-grid-item>
-</t-grid>
-```
-
-## Props
-
-| Prop          | Type     | Description                                   |
-| ------------- | -------- | --------------------------------------------- |
-| `column`      | `string` | Raw `grid-column` (overrides span/start/end). |
-| `row`         | `string` | Raw `grid-row`.                               |
-| `columnSpan`  | `number` | `span n` on the column axis.                  |
-| `rowSpan`     | `number` | `span n` on the row axis.                     |
-| `columnStart` | `number` | Grid line start (column).                     |
-| `columnEnd`   | `number` | Grid line end (column).                       |
-| `rowStart`    | `number` | Grid line start (row).                        |
-| `rowEnd`      | `number` | Grid line end (row).                          |
-
-## Slots
-
-| Slot      | Description   |
-| --------- | ------------- |
-| `default` | Cell content. |
-
-## See also
-
-- Source: `src/components/grid/grid-item`
-- `<t-grid>`

package/src/components/layout/cell/cell.scss

@@ -1,54 +0,0 @@
-@use "@toife/sass-layer" as sass;
-@use "sass:map";
-@use "sass:list";
-
-// Class name
-$cell: sass.fn-naming-prefix("cell");
-
-// Base tokens (breakpoint "")
-$cell-row: sass.fn-naming-var("cell", "row");
-$cell-column: sass.fn-naming-var("cell", "column");
-$cell-justify: sass.fn-naming-var("cell", "justify");
-$cell-align: sass.fn-naming-var("cell", "align");
-$cell-grow: sass.fn-naming-var("cell", "grow");
-$cell-shrink: sass.fn-naming-var("cell", "shrink");
-$cell-basis: sass.fn-naming-var("cell", "basis");
-$cell-order: sass.fn-naming-var("cell", "order");
-
-.#{$cell} {
-  display: grid;
-  box-sizing: border-box;
-  min-width: 0;
-  grid-column: #{$cell-column};
-  grid-row: #{$cell-row};
-  justify-self: #{$cell-justify};
-  align-self: #{$cell-align};
-  flex-grow: #{$cell-grow};
-  flex-shrink: #{$cell-shrink};
-  flex-basis: #{$cell-basis};
-  order: #{$cell-order};
-
-  $bp-names: map.keys(sass.$breakpoints);
-  $bp-count: list.length($bp-names);
-
-  @for $i from 1 through $bp-count {
-    $bp-name: list.nth($bp-names, $i);
-    $bp-min: map.get(sass.$breakpoints, $bp-name);
-
-    @media (min-width: $bp-min) {
-      grid-column: #{sass.fn-naming-cascade-dvar(("cell", "column"), $bp-names, $i, $cell-column)};
-      grid-row: #{sass.fn-naming-cascade-dvar(("cell", "row"), $bp-names, $i, $cell-row)};
-      justify-self: #{sass.fn-naming-cascade-dvar(
-          ("cell", "justify"),
-          $bp-names,
-          $i,
-          $cell-justify
-        )};
-      align-self: #{sass.fn-naming-cascade-dvar(("cell", "align"), $bp-names, $i, $cell-align)};
-      flex-grow: #{sass.fn-naming-cascade-dvar(("cell", "grow"), $bp-names, $i, $cell-grow)};
-      flex-shrink: #{sass.fn-naming-cascade-dvar(("cell", "shrink"), $bp-names, $i, $cell-shrink)};
-      flex-basis: #{sass.fn-naming-cascade-dvar(("cell", "basis"), $bp-names, $i, $cell-basis)};
-      order: #{sass.fn-naming-cascade-dvar(("cell", "order"), $bp-names, $i, $cell-order)};
-    }
-  }
-}

package/src/components/layout/cell/cell.type.ts

@@ -1,19 +0,0 @@
-export type CellJustify = "start" | "end" | "center" | "stretch";
-export type CellAlign = "start" | "end" | "center" | "stretch";
-
-export type CellOption = {
-  breakpoint?: string;
-  row?: number;
-  column?: number;
-  justify?: CellJustify;
-  align?: CellAlign;
-  grow?: number;
-  shrink?: number;
-  basis?: string;
-  order?: number;
-};
-
-// Type definitions
-export type CellProps = {
-  options?: CellOption[];
-};

package/src/components/layout/cell/cell.vue

@@ -1,35 +0,0 @@
-<style lang="scss" src="./cell.scss" scoped></style>
-<template src="./cell.html"></template>
-<script lang="ts" setup>
-import { computed } from "vue";
-import { withPrefix, property } from "../../../utils";
-import type { CellProps } from "./cell.type";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<CellProps>(), {
-  options: () => [],
-});
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const cellAttrs = computed(() => {
-  const style = props.options.map((option) => {
-    return {
-      [property(["cell", "row", option?.breakpoint || ""])]: option.row,
-      [property(["cell", "column", option?.breakpoint || ""])]: option.column,
-      [property(["cell", "justify", option?.breakpoint || ""])]: option.justify,
-      [property(["cell", "align", option?.breakpoint || ""])]: option.align,
-      [property(["cell", "flex-grow", option?.breakpoint || ""])]: option.grow,
-      [property(["cell", "flex-shrink", option?.breakpoint || ""])]: option.shrink,
-      [property(["cell", "flex-basis", option?.breakpoint || ""])]: option.basis,
-      [property(["cell", "order", option?.breakpoint || ""])]: option.order,
-    };
-  });
-
-  return {
-    class: [withPrefix("cell")],
-    style,
-  };
-});
-</script>

package/src/components/layout/cell/index.ts

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

package/src/components/layout/grid/grid.md

@@ -1,50 +0,0 @@
-# `<t-grid>`
-
-> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
-
-## Description
-
-CSS Grid wrapper with theme-based default gap. Use with `<t-grid-item>` for placement.
-
-## Requirements / dependencies
-
-| Item                | Notes                           |
-| ------------------- | ------------------------------- |
-| Vue                 | ^3.5                            |
-| `@toife/sass-layer` | Theme tokens for default `gap`. |
-
-## Basic usage
-
-```vue
-<t-grid :columns="3">
-  <t-grid-item>One</t-grid-item>
-  <t-grid-item>Two</t-grid-item>
-  <t-grid-item>Three</t-grid-item>
-</t-grid>
-```
-
-## Props
-
-| Prop             | Type               | Default | Description                                                     |
-| ---------------- | ------------------ | ------- | --------------------------------------------------------------- |
-| `columns`        | `number \| string` | `1`     | Column count (`repeat(n, 1fr)`) or raw `grid-template-columns`. |
-| `rows`           | `number \| string` | —       | `grid-template-rows`.                                           |
-| `gap`            | `string`           | —       | Sets `gap` (overrides SCSS default when non-empty).             |
-| `columnGap`      | `string`           | —       | `column-gap`.                                                   |
-| `rowGap`         | `string`           | —       | `row-gap`.                                                      |
-| `alignItems`     | `string`           | —       | `align-items`.                                                  |
-| `justifyItems`   | `string`           | —       | `justify-items`.                                                |
-| `alignContent`   | `string`           | —       | `align-content`.                                                |
-| `justifyContent` | `string`           | —       | `justify-content`.                                              |
-| `autoFlow`       | `string`           | —       | `grid-auto-flow`.                                               |
-
-## Slots
-
-| Slot      | Description |
-| --------- | ----------- |
-| `default` | Grid cells. |
-
-## See also
-
-- Source: `src/components/grid/grid`
-- `<t-grid-item>`

package/src/components/modal/modal.md

@@ -1,65 +0,0 @@
-# `<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/page/page.md

@@ -1,39 +0,0 @@
-# `<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/present/present.md

@@ -1,60 +0,0 @@
-# `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/radio/radio/radio.md

@@ -1,53 +0,0 @@
-# `<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`