@toife/vue 3.1.2 → 3.1.4

package/src/components/toast/toast-content/toast-content.scss

@@ -10,7 +10,8 @@ $toast-border-color: sass.fn-naming-var("toast", "border-color");
 
 $space-x: sass.fn-naming-var("spacing", "x");
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
 $border-width: sass.fn-naming-var("stroke", "width");
 $max-height: sass.fn-naming-var("overlay", "max-height");
 
@@ -33,7 +34,7 @@ $max-height: sass.fn-naming-var("overlay", "max-height");
   max-height: #{$max-height};
   max-width: 100%;
   padding: calc(#{$space-x} * 2) calc(#{$space-x} * 4);
-  border-radius: #{$border-radius};
+  border-radius: calc(min(#{$radius-size}, #{$max-height}) * #{$radius-ratio});
 
   &.closing {
     opacity: 0;

package/src/components/toolbar/toolbar.html

@@ -1,5 +1,3 @@
 <div v-bind="toolbarAttrs">
-  <div>
-    <slot />
-  </div>
+  <slot />
 </div>

package/src/components/toolbar/toolbar.scss

@@ -4,16 +4,21 @@
 $toolbar: sass.fn-naming-prefix("toolbar");
 
 // Property name - layer: toolbar
-$toolbar-size: sass.fn-naming-var("toolbar", "size");
 $toolbar-background-color: sass.fn-naming-var("toolbar", "background-color");
+$toolbar-color: sass.fn-naming-var("toolbar", "color");
+$toolbar-border-color: sass.fn-naming-var("toolbar", "border-color");
 $safe-area-right: sass.fn-naming-var("safe-area", "right");
 $safe-area-left: sass.fn-naming-var("safe-area", "left");
 $safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
 $safe-area-top: sass.fn-naming-var("safe-area", "top");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
+$border-width: sass.fn-naming-var("stroke", "width");
+$border: #{$border-width} solid rgb(#{$toolbar-border-color});
+
 .#{$toolbar} {
   background-color: rgb(#{$toolbar-background-color});
+  color: rgb(#{$toolbar-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,
@@ -21,45 +26,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     color #{$transition-duration} ease,
     border-radius #{$transition-duration} ease;
 
-  > div {
-    align-items: center;
-    display: flex;
-    position: relative;
-
-    > * {
-      flex: 1;
-    }
-  }
-
-  &.bottom,
-  &.top {
-    > div {
-      flex-direction: row;
-      height: #{$toolbar-size};
-      max-height: #{$toolbar-size};
-      width: 100%;
-
-      > * {
-        height: 100%;
-      }
-    }
-  }
-
-  &.left,
-  &.right {
-    > div {
-      flex-direction: column;
-      width: #{$toolbar-size};
-      max-width: #{$toolbar-size};
-      height: 100%;
-
-      > * {
-        width: 100%;
-      }
-    }
-  }
-
-  &.with-safe-area {
+  &.safe {
     &.right {
       padding-right: #{$safe-area-right};
     }
@@ -76,4 +43,22 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
       padding-top: #{$safe-area-top};
     }
   }
+
+  &.divider {
+    &.bottom {
+      border-top: #{$border};
+    }
+
+    &.top {
+      border-bottom: #{$border};
+    }
+
+    &.left {
+      border-right: #{$border};
+    }
+
+    &.right {
+      border-left: #{$border};
+    }
+  }
 }

package/src/components/toolbar/toolbar.type.ts

@@ -1,7 +1,7 @@
 // Type definitions
 export type ToolbarProps = {
   placement?: string | null;
-  safeArea?: boolean;
-  size?: string | number;
+  safe?: boolean;
   role?: string;
+  divider?: boolean;
 };

package/src/components/toolbar/toolbar.vue

@@ -12,8 +12,8 @@ import { CABLE_PROVIDER_STATE_KEY } from "../cable";
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<ToolbarProps>(), {
   placement: null,
-  safeArea: true,
-  size: "50px",
+  safe: true,
+  divider: undefined,
 });
 const cable = inject<CableProviderState>(CABLE_PROVIDER_STATE_KEY);
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
@@ -23,6 +23,8 @@ const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 const toolbarAttrs = computed(() => {
   const role = props.role || appState?.role.value || "";
   const placement = props.placement || cable?.placement.value || "";
+  const divider = (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
+
   return {
     class: [
       withPrefix(["layer", "toolbar"]),
@@ -30,12 +32,10 @@ const toolbarAttrs = computed(() => {
       withPrefix("toolbar"),
       placement,
       {
-        "with-safe-area": props.safeArea,
+        safe: props.safe,
+        divider: divider.value,
       },
     ],
-    style: {
-      [property(["toolbar", "size"])]: props.size + (typeof props.size === "number" ? "px" : ""),
-    },
   };
 });
 </script>

package/src/factory.ts

@@ -16,10 +16,11 @@ import {
   Dropdown,
   Field,
   Flex,
+  FlexItem,
   FormGroup,
   GestureIndicator,
   Grid,
-  Cell,
+  GridItem,
   Image,
   Modal,
   Page,
@@ -33,6 +34,7 @@ import {
   RouteOutlet,
   SegmentedField,
   Select,
+  SlideRange,
   Skeleton,
   Switch,
   Tab,
@@ -67,10 +69,11 @@ export const createToife = (options?: CreateToifeOptions) => {
       app.component(prefix + "dropdown", Dropdown);
       app.component(prefix + "field", Field);
       app.component(prefix + "flex", Flex);
+      app.component(prefix + "flex-item", FlexItem);
       app.component(prefix + "form-group", FormGroup);
       app.component(prefix + "gesture-indicator", GestureIndicator);
       app.component(prefix + "grid", Grid);
-      app.component(prefix + "cell", Cell);
+      app.component(prefix + "grid-item", GridItem);
       app.component(prefix + "image", Image);
       app.component(prefix + "modal", Modal);
       app.component(prefix + "page", Page);
@@ -82,6 +85,7 @@ export const createToife = (options?: CreateToifeOptions) => {
       app.component(prefix + "route-outlet", RouteOutlet);
       app.component(prefix + "segmented-field", SegmentedField);
       app.component(prefix + "select", Select);
+      app.component(prefix + "slide-range", SlideRange);
       app.component(prefix + "skeleton", Skeleton);
       app.component(prefix + "switch", Switch);
       app.component(prefix + "tab", Tab);

package/src/index.ts

@@ -1,4 +1,4 @@
 /// <reference path="./env.d.ts" />
 export * from "./factory";
-export * as utils from "./utils";
+export * from "./utils";
 export * from "./components";

package/src/components/action/action.md

@@ -1,115 +0,0 @@
-# `<t-action>`
-
-> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
-
-## Description
-
-Action sheet: groups of buttons rendered inside `Present`, typically for quick choices or secondary menus. Control via props or the `useAction()` composable wired by `t-app`.
-
-## Requirements / dependencies
-
-| Item  | Notes                                                                                     |
-| ----- | ----------------------------------------------------------------------------------------- |
-| Vue   | ^3.5                                                                                      |
-| Other | Prefer `t-app` for theme/context (`inject`). Depends on `Present`, `FormGroup`, `Button`. |
-
-## Basic usage
-
-```vue
-<template>
-  <t-action
-    :visible="show"
-    :actions="[[{ text: 'Confirm', variant: 'fill', handler: onOk }]]"
-    placement="bottom"
-    @close="show = false"
-    @choose="onChoose"
-  />
-</template>
-```
-
-Or open via `useAction()` (wired by `t-app`):
-
-```ts
-import { useAction } from "@toife/vue";
-
-const action = useAction();
-action.open({
-  actions: [[{ text: "OK", handler: () => {} }]],
-  onClose: () => {},
-  onChoose: (btn) => {},
-});
-```
-
-## Props
-
-| Prop        | Type                    | Default      | Description                                                    |
-| ----------- | ----------------------- | ------------ | -------------------------------------------------------------- |
-| `visible`   | `boolean`               | `false`      | Show the action layer.                                         |
-| `dismiss`   | `string[]`              | —            | `Present` close reasons that emit `close` (e.g. `'backdrop'`). |
-| `actions`   | `Array<ActionButton[]>` | _(required)_ | Rows of button groups; each row is an array of buttons.        |
-| `role`      | `string`                | —            | Theme role override; default from `t-app`.                     |
-| `shape`     | `string`                | —            | Shape override; default from `t-app`.                          |
-| `divider`   | `boolean`               | —            | Divider; default from `t-app`.                                 |
-| `shadow`    | `boolean`               | —            | Shadow; default from `t-app`.                                  |
-| `placement` | `PresentPlacement`      | `"bottom"`   | `Present` placement (`top`, `bottom`, …).                      |
-
-**Type source:** `src/components/action/action.type.ts`
-
-`ActionButton`: `text`, `role`, `variant`, `shadow`, `handler`, `data`.
-
-## Events (emits)
-
-| Event    | Payload             | Description                                               |
-| -------- | ------------------- | --------------------------------------------------------- |
-| `close`  | `type?: string`     | When `dismiss` matches the close reason.                  |
-| `choose` | `btn: ActionButton` | After a button is chosen (after that button’s `handler`). |
-
-## Slots
-
-| Slot   | Slot props | Description                                  |
-| ------ | ---------- | -------------------------------------------- |
-| `body` | —          | Replaces the default button layout entirely. |
-
-## `v-model`
-
-No `v-model` support.
-
-## Provide / inject / context
-
-Injects `APP_PROVIDER_STATE_KEY` from `t-app` for `divider`, `shadow`, `shape`, `role` when props are omitted.
-
-## Expose (template ref)
-
-Nothing exposed.
-
-## Special behavior
-
-- Backdrop close: if the payload is not in `dismiss`, a short `pop` animation runs instead of emitting `close`.
-
-## Accessibility (a11y)
-
-Inherits from `Present` (backdrop, focus). Buttons use inner `Button`.
-
-## Style / class notes
-
-BEM-style classes via `withPrefix`: `action`, `layer`, `surface`, `role`, `shape`, placement, `pop`, `divider`, `shadow`.
-
-## Advanced example
-
-```vue
-<t-action
-  :visible="open"
-  :dismiss="['backdrop']"
-  :actions="[
-    [{ text: 'Cancel', variant: 'text', handler: cancel }],
-    [{ text: 'Delete', variant: 'fill', role: 'danger', handler: remove }],
-  ]"
-  placement="bottom"
-  @close="(t) => console.log(t)"
-/>
-```
-
-## See also
-
-- Source: `src/components/action`
-- Composable: `action.composable.ts` (`useAction`)

package/src/components/app/app.md

@@ -1,77 +0,0 @@
-# `<t-app>`
-
-> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
-
-## Description
-
-Library root layout: provides theme/context (`provide`) for descendants, mounts multiple `Toast` regions by placement, and hosts `Action` / `DecisionModal` when using `useAction` / `useDecisionModal`.
-
-## Requirements / dependencies
-
-| Item  | Notes                |
-| ----- | -------------------- |
-| Vue   | ^3.5                 |
-| Other | Router not required. |
-
-## Basic usage
-
-```vue
-<template>
-  <t-app>
-    <t-page>App content</t-page>
-  </t-app>
-</template>
-```
-
-## Props
-
-| Prop        | Type                | Default  | Description                                      |
-| ----------- | ------------------- | -------- | ------------------------------------------------ |
-| `shape`     | `string`            | `"pill"` | Default shape for children (buttons, fields, …). |
-| `divider`   | `boolean`           | `false`  | Default divider flag.                            |
-| `role`      | `string`            | `"mode"` | Default theme role.                              |
-| `shadow`    | `boolean`           | `false`  | Default shadow.                                  |
-| `triple`    | `boolean`           | `false`  | Layout flag (provided to children).              |
-| `direction` | `"left" \| "right"` | `"left"` | Direction (fields, …).                           |
-
-**Type source:** `src/components/app/app.type.ts`
-
-## Events (emits)
-
-_No public emits._
-
-## Slots
-
-| Slot      | Description                                           |
-| --------- | ----------------------------------------------------- |
-| `default` | Main app content.                                     |
-| `global`  | Extra slot (after default, before internal overlays). |
-
-## `v-model`
-
-No.
-
-## Provide / inject / context
-
-`provide(APP_PROVIDER_STATE_KEY)`: `{ shape, divider, role, shadow, triple, direction }` — children inject for consistent theming.
-
-## Expose
-
-Nothing.
-
-## Special behavior
-
-- Renders several `Toast` instances with fixed placements (top/bottom × start/center/end).
-- When `useAction()` / `useDecisionModal()` has `data`, renders the matching `Action` / `DecisionModal`.
-
-## Accessibility (a11y)
-
-Wrapper only; no special root role.
-
-## Style / class notes
-
-Classes: `layer`, `base`, `shape`, `app`.
-
-## See also
-
-- Source: `src/components/app`

package/src/components/avatar/avatar.md

@@ -1,64 +0,0 @@
-# `<t-avatar>`
-
-> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
-
-## Description
-
-Displays an avatar image as a CSS `background-image` inside a themed frame (shape/role from app when omitted).
-
-## Requirements / dependencies
-
-| Item  | Notes                                             |
-| ----- | ------------------------------------------------- |
-| Vue   | ^3.5                                              |
-| Other | `t-app` recommended for default `role` / `shape`. |
-
-## Basic usage
-
-```vue
-<t-avatar src="/user.png" size="40px" />
-```
-
-## Props
-
-| Prop    | Type               | Default  | Description                           |
-| ------- | ------------------ | -------- | ------------------------------------- |
-| `shape` | `string`           | —        | Shape override; default from `t-app`. |
-| `size`  | `string \| number` | `"22px"` | Size (number is treated as px).       |
-| `src`   | `string`           | `""`     | Image URL for background.             |
-
-**Type source:** `src/components/avatar/avatar.type.ts`
-
-## Events (emits)
-
-_None._
-
-## Slots
-
-| Slot      | Description                    |
-| --------- | ------------------------------ |
-| `default` | Optional inner content (rare). |
-
-## `v-model`
-
-No.
-
-## Provide / inject
-
-Injects `AppProviderState` for `role` / `shape`.
-
-## Expose
-
-Nothing.
-
-## Accessibility (a11y)
-
-Decorative background image — add `aria-label` on a parent if a name must be announced.
-
-## Style / class notes
-
-CSS variable `--<prefix>-width` via `property("width")`.
-
-## See also
-
-- Source: `src/components/avatar`

package/src/components/button/button.md

@@ -1,66 +0,0 @@
-# `<t-button>`
-
-> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
-
-## Description
-
-Button with variants, sizes, loading state, and theming from `t-app`.
-
-## Requirements / dependencies
-
-| Item  | Notes                                                |
-| ----- | ---------------------------------------------------- |
-| Vue   | ^3.5                                                 |
-| Other | `t-app` recommended for `shape` / `role` / `shadow`. |
-
-## Basic usage
-
-```vue
-<t-button variant="fill" @click="save">Save</t-button>
-<t-button loading>Loading</t-button>
-```
-
-## Props
-
-| Prop      | Type                               | Default      | Description                              |
-| --------- | ---------------------------------- | ------------ | ---------------------------------------- |
-| `role`    | `string`                           | —            | Theme role; default from app.            |
-| `size`    | `"small" \| "standard" \| "large"` | `"standard"` | Size.                                    |
-| `shape`   | `string`                           | —            | Shape; default from app.                 |
-| `block`   | `boolean`                          | `false`      | Full-width button.                       |
-| `loading` | `boolean`                          | `false`      | Hides label, shows `loading` slot.       |
-| `variant` | `ButtonVariant`                    | `"fill"`     | `fill` \| `outline` \| `text` \| `link`. |
-| `shadow`  | `boolean`                          | —            | Default from app if unset.               |
-
-**Type source:** `src/components/button/button.type.ts`
-
-## Events (emits)
-
-_No declared emits_ — use native DOM listeners (`@click`).
-
-## Slots
-
-| Slot      | Description                           |
-| --------- | ------------------------------------- |
-| `default` | Button label (hidden when `loading`). |
-| `loading` | Content when `loading`.               |
-
-## `v-model`
-
-No.
-
-## Provide / inject
-
-Injects theme from `t-app`.
-
-## Expose
-
-Nothing.
-
-## Accessibility (a11y)
-
-Native `<button>`; focus/blur styling handled internally.
-
-## See also
-
-- Source: `src/components/button`

package/src/components/cable/cable.md

@@ -1,57 +0,0 @@
-# `<t-cable>`
-
-> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
-
-## Description
-
-Layout region for dock-style UI; provides `placement` to descendants (e.g. `Toolbar`) via inject.
-
-## Requirements / dependencies
-
-| Item  | Notes                                                |
-| ----- | ---------------------------------------------------- |
-| Vue   | ^3.5                                                 |
-| Other | Toolbar is often placed inside to inherit placement. |
-
-## Basic usage
-
-```vue
-<t-cable placement="bottom">
-  <t-toolbar><t-button>Home</t-button></t-toolbar>
-</t-cable>
-```
-
-## Props
-
-| Prop        | Type      | Default    | Description                             |
-| ----------- | --------- | ---------- | --------------------------------------- |
-| `keyboard`  | `boolean` | `false`    | Reserved for keyboard-related behavior. |
-| `placement` | `string`  | `"bottom"` | Cable placement (class on root).        |
-
-**Type source:** `src/components/cable/cable.type.ts`
-
-## Events (emits)
-
-_None._
-
-## Slots
-
-| Slot      | Description                    |
-| --------- | ------------------------------ |
-| `default` | Content (toolbar, buttons, …). |
-
-## Provide / inject
-
-`provide(CABLE_PROVIDER_STATE_KEY)`: `{ placement }` — `Toolbar` injects it for placement classes.
-
-## Expose
-
-Nothing.
-
-## Style / class notes
-
-Classes: `layer`, `base`, `cable`, plus placement.
-
-## See also
-
-- Source: `src/components/cable`

package/src/components/card/card/card.md

@@ -1,57 +0,0 @@
-# `<t-card>`
-
-> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
-
-## Description
-
-Card surface with optional divider; provides context for `CardHeader` / `CardBody` / `CardFooter`.
-
-## Requirements / dependencies
-
-| Item  | Notes                |
-| ----- | -------------------- |
-| Vue   | ^3.5                 |
-| Other | `t-app` recommended. |
-
-## Basic usage
-
-```vue
-<t-card>
-  <t-card-header>Title</t-card-header>
-  <t-card-body>Content</t-card-body>
-  <t-card-footer>Footer</t-card-footer>
-</t-card>
-```
-
-## Props
-
-| Prop      | Type      | Default | Description                         |
-| --------- | --------- | ------- | ----------------------------------- |
-| `role`    | `string`  | —       | Default from app.                   |
-| `shape`   | `string`  | —       | Default from app.                   |
-| `divider` | `boolean` | —       | Section dividers; default from app. |
-
-**Type source:** `src/components/card/card/card.type.ts`
-
-## Events (emits)
-
-_None._
-
-## Slots
-
-| Slot      | Description       |
-| --------- | ----------------- |
-| `default` | Entire card body. |
-
-## Provide / inject
-
-`provide(CARD_PROVIDER_STATE_KEY)`: `{ role, shape, divider }` for header/footer.
-
-## Expose
-
-Nothing.
-
-## See also
-
-- Source: `src/components/card/card`
-- [card-header.md](../card-header/card-header.md), [card-body.md](../card-body/card-body.md), [card-footer.md](../card-footer/card-footer.md)

package/src/components/card/card-body/card-body.md

@@ -1,34 +0,0 @@
-# `<t-card-body>`
-
-> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
-
-## Description
-
-Main content region of a card.
-
-## Requirements / dependencies
-
-| Item  | Notes                    |
-| ----- | ------------------------ |
-| Vue   | ^3.5                     |
-| Other | Usually inside `t-card`. |
-
-## Basic usage
-
-```vue
-<t-card-body>Main content</t-card-body>
-```
-
-## Props
-
-_None._
-
-## Slots
-
-| Slot      | Description |
-| --------- | ----------- |
-| `default` | Content.    |
-
-## See also
-
-- Source: `src/components/card/card-body`