@toife/vue 3.0.0 → 3.0.2

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

@@ -0,0 +1,41 @@
+# `<t-toast-content>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Single toast line: shows `message`, auto-dismisses after `duration`, emits `close` after the exit animation (usually handled by `t-toast` → `useToast().close(id)`).
+
+## Requirements / dependencies
+
+| Item  | Notes                                                          |
+| ----- | -------------------------------------------------------------- |
+| Vue   | ^3.5                                                           |
+| Other | `t-app` for theme; usually rendered by `t-toast` in a `v-for`. |
+
+## Props
+
+| Prop             | Type                  | Default  | Description                       |
+| ---------------- | --------------------- | -------- | --------------------------------- |
+| `id`             | `number`              | —        | Message id (`useToast` store).    |
+| `message`        | `string`              | `""`     | Text.                             |
+| `duration`       | `number`              | `2000`   | ms before close animation starts. |
+| `role` / `shape` | `string`              | —        | Theme.                            |
+| `variant`        | `ToastContentVariant` | `"fill"` | `fill` \| `text`.                 |
+| `placement`      | `ToastPlacement`      | —        | Set when pushing to the store.    |
+
+**Type source:** `src/components/toast/toast.type.ts`
+
+## Events (emits)
+
+| Event   | Payload | Description                      |
+| ------- | ------- | -------------------------------- |
+| `close` | —       | After delay + closing animation. |
+
+## Slots
+
+_None_ — single text `div`.
+
+## See also
+
+- Source: `src/components/toast/toast-content`

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

@@ -6,10 +6,10 @@ $toastContent: sass.fn-naming-prefix("toast-content");
 // Properties
 $space-x: sass.fn-naming-var("spacing", "x");
 $transition-duration: sass.fn-naming-var("motion", "duration");
-// layer: item
-$background-color: sass.fn-naming-var("item", "background-color");
-$color: sass.fn-naming-var("item", "color");
-$border-color: sass.fn-naming-var("item", "border-color");
+// layer: toast-content
+$background-color: sass.fn-naming-var("toast", "background-color");
+$color: sass.fn-naming-var("toast", "color");
+$border-color: sass.fn-naming-var("toast", "border-color");
 $border-radius: sass.fn-naming-var("border-radius");
 $border-width: sass.fn-naming-var("stroke", "width");
 $max-height: sass.fn-naming-var("overlay", "max-height");

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

@@ -22,20 +22,14 @@ const isClosing = ref(false);
 
 /// Computed
 /// ------------------------------------------------------------
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
-
-const shape = computed(() => {
-  return props.shape || appState?.shape.value || "";
-});
-
 const contentAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
+  const shape = props.shape || appState?.shape.value || "";
   return {
     class: [
-      withPrefix(["layer", "item"]),
-      withPrefix(["role", role.value]),
-      withPrefix(["shape", shape.value]),
+      withPrefix(["layer", "toast"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
       withPrefix("toast-content"),
       props.variant,
       {

package/src/components/toolbar/toolbar.md

@@ -0,0 +1,57 @@
+# `<t-toolbar>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Toolbar surface with height / safe-area; `placement` comes from props or from `t-cable` (inject).
+
+## Requirements / dependencies
+
+| Item  | Notes                                                            |
+| ----- | ---------------------------------------------------------------- |
+| Vue   | ^3.5                                                             |
+| Other | Place inside `t-cable` to inherit placement; `t-app` for `role`. |
+
+## Basic usage
+
+```vue
+<t-cable placement="bottom">
+  <t-toolbar>
+    <t-button>Home</t-button>
+  </t-toolbar>
+</t-cable>
+```
+
+## Props
+
+| Prop        | Type               | Default  | Description                                       |
+| ----------- | ------------------ | -------- | ------------------------------------------------- |
+| `placement` | `string \| null`   | `null`   | Placement class; if null, uses `cable.placement`. |
+| `safeArea`  | `boolean`          | `true`   | Safe-area padding (notch, home indicator).        |
+| `size`      | `string \| number` | `"50px"` | Toolbar height.                                   |
+| `role`      | `string`           | —        | Theme.                                            |
+
+**Type source:** `src/components/toolbar/toolbar.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+| Slot      | Description                                    |
+| --------- | ---------------------------------------------- |
+| `default` | Buttons / content (wrapped in an inner `div`). |
+
+## Provide / inject
+
+Optional inject `CABLE_PROVIDER_STATE_KEY` and `APP_PROVIDER_STATE_KEY`.
+
+## Style / class notes
+
+Variable `--<prefix>-toolbar-size`; classes `with-safe-area`, placement.
+
+## See also
+
+- Source: `src/components/toolbar`

package/src/components/toolbar/toolbar.scss

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

package/src/components/toolbar/toolbar.vue

@@ -20,21 +20,15 @@ const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
 /// Computed
 /// ------------------------------------------------------------
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
-
-const placement = computed(() => {
-  return props.placement || cable?.placement.value || "";
-});
-
 const toolbarAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
+  const placement = props.placement || cable?.placement.value || "";
   return {
     class: [
-      withPrefix(["layer", "surface"]),
-      withPrefix(["role", role.value]),
+      withPrefix(["layer", "toolbar"]),
+      withPrefix(["role", role]),
       withPrefix("toolbar"),
-      placement.value,
+      placement,
       {
         "with-safe-area": props.safeArea,
       },

package/src/factory.ts

@@ -30,6 +30,7 @@ import {
   SegmentedField,
   Skeleton,
   Switch,
+  Tab,
   Tabs,
   Toast,
   ToastContent,
@@ -72,6 +73,7 @@ export const createToife = (options?: CreateToifeOptions) => {
       app.component(prefix + "segmented-field", SegmentedField);
       app.component(prefix + "skeleton", Skeleton);
       app.component(prefix + "switch", Switch);
+      app.component(prefix + "tab", Tab);
       app.component(prefix + "tabs", Tabs);
       app.component(prefix + "toast", Toast);
       app.component(prefix + "toast-content", ToastContent);

package/src/utils/element.md

@@ -0,0 +1,33 @@
+# Utils: `element`
+
+> Import: `import { utils } from "@toife/vue"` then `utils.isFormElement`, `utils.blurCurrentActive` (see `src/index.ts`).
+
+**Source:** `src/utils/element.ts`
+
+## Description
+
+Helpers to detect form-like elements and blur the active field (shared with global event handling).
+
+## API
+
+### `isFormElement(target: any): boolean`
+
+Returns `true` if `target` is an `INPUT`, `TEXTAREA`, or `contentEditable` element.
+
+### `blurCurrentActive(): void`
+
+If the active element is an input/textarea/contentEditable, calls `.blur()`.
+
+## Example
+
+```ts
+import { utils } from "@toife/vue";
+
+document.addEventListener("click", (e) => {
+  if (!utils.isFormElement(e.target)) utils.blurCurrentActive();
+});
+```
+
+## See also
+
+- [events.md](./events.md) — document listeners and virtual keyboard

package/src/utils/events.md

@@ -0,0 +1,29 @@
+# Utils: `events`
+
+> Import: `import { utils } from "@toife/vue"` then `utils.preventDefault`.
+
+**Source:** `src/utils/events.ts`
+
+## Description
+
+Registers global behavior: block context menu, blur on `pointerup` outside form elements (via `isFormElement` / `blurCurrentActive`), and set `navigator.virtualKeyboard.overlaysContent` when available.
+
+## API
+
+### `preventDefault(): void`
+
+Call once at app bootstrap to attach the listeners above.
+
+**Note:** No teardown is returned — for tests or SSR without `document`, avoid calling or wrap yourself.
+
+## Example
+
+```ts
+import { utils } from "@toife/vue";
+
+utils.preventDefault();
+```
+
+## See also
+
+- [element.md](./element.md)

package/src/utils/style.md

@@ -0,0 +1,49 @@
+# Utils: `style`
+
+> Import: `import { utils } from "@toife/vue"` then `utils.withPrefix`, … (or import from `src/utils` in the monorepo).
+
+**Source:** `src/utils/style/index.ts`
+
+## Description
+
+Reads `--prefix` and `--separator` from `document.documentElement` (cached), then builds BEM-style class names and CSS variable names `--…` / `var(--…)` for dynamic theming.
+
+## API
+
+### `getPrefix(): string`
+
+Trimmed `--prefix` on `:root` (singleton cache).
+
+### `getSeparator(): string`
+
+Trimmed `--separator` (often `-` or `_`) used to join name parts.
+
+### `withPrefix(name: string | string[]): string`
+
+If prefix exists: `[prefix, ...parts].join(separator)`. `name` can be a string or parts array (e.g. `['layer','surface']`).
+
+### `property(name: string | string[]): string`
+
+Returns the CSS custom property name **without** `var()`: `"--" + withPrefix(name)`.
+
+### `variable(name: string | string[]): string`
+
+Returns `var(--<prefixed…>)`.
+
+## Example
+
+```ts
+import { utils } from "@toife/vue";
+
+utils.withPrefix("button");
+utils.property(["field", "line"]);
+utils.variable(["field", "line"]);
+```
+
+## Environment
+
+Requires `document` and `getComputedStyle` — client-only after `:root` defines `--prefix` / `--separator`.
+
+## See also
+
+- Components using `withPrefix` for BEM classes