@toife/vue 3.0.0 → 3.0.2

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

@@ -17,8 +17,10 @@ const props = withDefaults(defineProps<RouteWrapperProps>(), {
 /// ------------------------------------------------------------
 watch(
   () => route.matched,
-  (matched) => {
-    updateRoutes(matched);
+  () => {
+    updateRoutes(route.matched, {
+      fullPath: route.fullPath,
+    });
   }
 );
 
@@ -27,16 +29,22 @@ onMounted(() => {
   const homeName = props.homeRouteName;
 
   if (route.name === homeName) {
-    updateRoutes(route.matched);
+    updateRoutes(route.matched, {
+      fullPath: route.fullPath,
+    });
   } else {
     const homeLocation = router.resolve({ name: homeName });
     if (homeLocation.matched.length > 0) {
-      updateRoutes(homeLocation.matched);
+      updateRoutes(homeLocation.matched, {
+        fullPath: homeLocation.fullPath,
+      });
     }
 
     // Apply current route to stack
     setTimeout(() => {
-      updateRoutes(route.matched);
+      updateRoutes(route.matched, {
+        fullPath: route.fullPath,
+      });
     }, 50);
   }
 });

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

@@ -3,5 +3,6 @@ import { RouteComponent } from "vue-router";
 export type RouteStack = {
   name: string;
   component: RouteComponent;
+  fullPath: string;
   stack: RouteStack[];
 };

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

@@ -0,0 +1,58 @@
+# `<t-segmented-field>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+OTP-style segmented input: each segment is a `t-field`; coordinates focus and `v-model` as a character array.
+
+## Requirements / dependencies
+
+| Item  | Notes                                    |
+| ----- | ---------------------------------------- |
+| Vue   | ^3.5                                     |
+| Other | `t-app` recommended; depends on `Field`. |
+
+## Basic usage
+
+```vue
+<t-segmented-field v-model="otp" :length="6" @complete="submit" />
+```
+
+## Props
+
+| Prop                    | Type       | Default                  | Description                                   |
+| ----------------------- | ---------- | ------------------------ | --------------------------------------------- |
+| `modelValue`            | `string[]` | —                        | Character array (`v-model`).                  |
+| `value`                 | `string[]` | —                        | May be used instead of `modelValue` when set. |
+| `length`                | `number`   | `6`                      | Number of segments.                           |
+| `variant` / `size`      | —          | Passed to inner `Field`. |
+| `disabled` / `readonly` | `boolean`  | `false`                  |                                               |
+| `type`                  | `string`   | `"text"`                 | Field input type.                             |
+| `role` / `shape`        | `string`   | —                        | Theme.                                        |
+| `shadow`                | `boolean`  | —                        | Default from app.                             |
+| `message` / `help`      | `string`   | `""`                     | Message / help.                               |
+| `pattern`               | `string[]` | `[]`                     | Reserved for per-cell validation.             |
+
+**Type source:** `src/components/segmented-field/segmented-field.type.ts`
+
+## Events (emits)
+
+| Event               | Payload      | Description                          |
+| ------------------- | ------------ | ------------------------------------ |
+| `update:modelValue` | `string[]`   | Value update.                        |
+| `complete`          | `string[]`   | When `length` characters are filled. |
+| `focus` / `blur`    | `FocusEvent` | From inner fields.                   |
+| `input`             | `string[]`   | On each change.                      |
+
+## Slots
+
+_None_ — layout is fixed with repeated `Field`.
+
+## `v-model`
+
+`modelValue` / `update:modelValue` (`string[]`).
+
+## See also
+
+- Source: `src/components/segmented-field`

package/src/components/segmented-field/segmented-field.scss

@@ -9,8 +9,8 @@ $segmented-field-help: sass.fn-naming-prefix("segmented-field-help");
 // Property name
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$role-color: sass.fn-naming-var("item", "background-color");
-$base-color: sass.fn-naming-var("base", "color");
+$role-color: sass.fn-naming-var("segmented-field", "background-color");
+$app-color: sass.fn-naming-var("app", "color");
 
 .#{$segmented-field-wrapper} {
   .#{$segmented-field-content} {
@@ -33,7 +33,7 @@ $base-color: sass.fn-naming-var("base", "color");
 
   // Help
   .#{$segmented-field-help} {
-    color: rgb(#{$base-color}, 0.75);
+    color: rgb(#{$app-color}, 0.75);
     font-size: 0.8em;
     line-height: 1.5;
     transition:

package/src/components/segmented-field/segmented-field.vue

@@ -33,11 +33,6 @@ const fields = ref<InstanceType<typeof Field>[]>([]);
 
 /// Computed
 /// ------------------------------------------------------------
-const role = computed(() => props.role || appState?.role.value || "");
-const shape = computed(() => props.shape || appState?.shape.value || "");
-const shadow = computed(
-  () => (props.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false
-);
 const segments = computed(() => {
   let value: string[] | undefined = [];
   if (props.value !== undefined && props.value.length > 0) value = props.value;
@@ -47,12 +42,14 @@ const segments = computed(() => {
 });
 
 const wrapperAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
+  const shape = props.shape || appState?.shape.value || "";
   return {
     class: [
       withPrefix("segmented-field-wrapper"),
-      withPrefix(["layer", "item"]),
-      withPrefix(["role", role.value]),
-      withPrefix(["shape", shape.value]),
+      withPrefix(["layer", "segmented-field"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
       props.variant,
       props.size,
       { disabled: props.disabled },
@@ -60,36 +57,33 @@ const wrapperAttrs = computed(() => {
   };
 });
 
-const contentAttrs = computed(() => {
-  return {
-    class: [withPrefix("segmented-field-content")],
-  };
-});
+const contentAttrs = {
+  class: [withPrefix("segmented-field-content")],
+} as const;
 
 const fieldAttrs = computed(() => {
+  const role = props.role || appState?.role.value || "";
+  const shape = props.shape || appState?.shape.value || "";
+  const shadow = (props.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
   return {
     variant: props.variant,
     size: props.size,
     disabled: props.disabled,
     readonly: props.readonly,
-    shadow: shadow.value,
-    shape: shape.value,
-    role: role.value,
+    shadow,
+    shape,
+    role,
     type: props.type,
   };
 });
 
-const messageAttrs = computed(() => ({
+const messageAttrs = {
   class: [withPrefix("segmented-field-message")],
-}));
-
-const helpAttrs = computed(() => ({
-  class: [
-    withPrefix("segmented-field-help"),
-    withPrefix(["layer", "surface"]),
-    withPrefix(["role", "mode"]),
-  ],
-}));
+} as const;
+
+const helpAttrs = {
+  class: [withPrefix("segmented-field-help")],
+} as const;
 
 const nextIndex = computed(() => {
   let nextIndex = segments.value.length;

package/src/components/skeleton/skeleton.md

@@ -0,0 +1,47 @@
+# `<t-skeleton>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Loading placeholder block with configurable size (CSS variables), themed from app.
+
+## Requirements / dependencies
+
+| Item  | Notes                         |
+| ----- | ----------------------------- |
+| Vue   | ^3.5                          |
+| Other | `t-app` for `role` / `shape`. |
+
+## Basic usage
+
+```vue
+<t-skeleton width="100%" height="12px" />
+```
+
+## Props
+
+| Prop     | Type               | Default  | Description          |
+| -------- | ------------------ | -------- | -------------------- |
+| `width`  | `string \| number` | `"100%"` | Width (number = px). |
+| `height` | `string \| number` | `"1rem"` | Height.              |
+| `role`   | `string`           | —        | Theme.               |
+| `shape`  | `string`           | —        | Shape.               |
+
+**Type source:** `src/components/skeleton/skeleton.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+_None._
+
+## Style / class notes
+
+Variables `--<prefix>-skeleton-width`, `--<prefix>-skeleton-height` via `property(["skeleton","width"])` / `height`.
+
+## See also
+
+- Source: `src/components/skeleton`

package/src/components/skeleton/skeleton.scss

@@ -3,12 +3,12 @@
 // Classes
 $skeleton: sass.fn-naming-prefix("skeleton");
 
-// Properties - layer: item
+// Properties - layer: skeleton
 $width: sass.fn-naming-var("skeleton", "width");
 $height: sass.fn-naming-var("skeleton", "height");
 $border-radius: sass.fn-naming-var("border-radius");
-$background-color: sass.fn-naming-var("item", "background-color");
-$background-color-subtle: sass.fn-naming-var("item", "background-color", "subtle");
+$background-color: sass.fn-naming-var("skeleton", "background-color");
+$background-color-subtle: sass.fn-naming-var("skeleton", "background-color", "subtle");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$skeleton} {

package/src/components/skeleton/skeleton.vue

@@ -22,7 +22,7 @@ const skeletonAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "item"]),
+      withPrefix(["layer", "skeleton"]),
       withPrefix(["role", role]),
       withPrefix(["shape", shape]),
       withPrefix("skeleton"),

package/src/components/switch/switch.md

@@ -0,0 +1,57 @@
+# `<t-switch>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Boolean toggle with `v-model`, keyboard support, and basic ARIA.
+
+## Requirements / dependencies
+
+| Item  | Notes                |
+| ----- | -------------------- |
+| Vue   | ^3.5                 |
+| Other | `t-app` recommended. |
+
+## Basic usage
+
+```vue
+<t-switch v-model="on">Notifications</t-switch>
+```
+
+## Props
+
+| Prop         | Type      | Default | Description           |
+| ------------ | --------- | ------- | --------------------- |
+| `modelValue` | `boolean` | `false` | On state.             |
+| `role`       | `string`  | —       | Theme when on.        |
+| `shape`      | `string`  | —       | Shape.                |
+| `disabled`   | `boolean` | —       | _(optional in types)_ |
+| `readonly`   | `boolean` | `false` | Read-only.            |
+| `shadow`     | `boolean` | —       | Default from app.     |
+
+**Type source:** `src/components/switch/switch.type.ts`
+
+## Events (emits)
+
+| Event               | Payload   | Description   |
+| ------------------- | --------- | ------------- |
+| `update:modelValue` | `boolean` | Toggle state. |
+
+## Slots
+
+| Slot      | Description             |
+| --------- | ----------------------- |
+| `default` | Label beside the track. |
+
+## `v-model`
+
+`modelValue` / `update:modelValue`.
+
+## Accessibility (a11y)
+
+`role="switch"`, `aria-checked`, Space/Enter.
+
+## See also
+
+- Source: `src/components/switch`

package/src/components/switch/switch.scss

@@ -7,14 +7,14 @@ $shape-rounded: sass.fn-naming-prefix("shape-rounded");
 $shape-pill: sass.fn-naming-prefix("shape-pill");
 $switch-wrapper: sass.fn-naming-prefix("switch-wrapper");
 
-// Properties - switch track: surface (inactive), item (on); switch icon: item
-$background-color: sass.fn-naming-var("item", "background-color");
-$background-color-hover: sass.fn-naming-var("item", "background-color", "soft");
-$background-color-inactive: sass.fn-naming-var("item", "background-color", "subtle");
-$background-color-disabled: sass.fn-naming-var("item", "background-color", "subtle");
-$background-color-contrast: sass.fn-naming-var("item", "background-color", "contrast");
-$border-color: sass.fn-naming-var("item", "border-color");
-$color-hover: sass.fn-naming-var("item", "color", "strong");
+// Properties - switch track (inactive), switch icon (on)
+$background-color: sass.fn-naming-var("switch", "background-color");
+$background-color-hover: sass.fn-naming-var("switch", "background-color", "soft");
+$background-color-inactive: sass.fn-naming-var("switch", "background-color", "subtle");
+$background-color-disabled: sass.fn-naming-var("switch", "background-color", "subtle");
+$background-color-contrast: sass.fn-naming-var("switch", "background-color", "contrast");
+$border-color: sass.fn-naming-var("switch", "border-color");
+$color-hover: sass.fn-naming-var("switch", "color", "strong");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");
 $spacing-x: sass.fn-naming-var("spacing", "x");

package/src/components/switch/switch.vue

@@ -22,22 +22,15 @@ const isFocused = ref(false);
 
 /// Computed
 /// ------------------------------------------------------------
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
-
-const shadow = computed(() => {
-  return (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
-});
-
 const switchWrapperAttrs = computed(() => {
+  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
   return {
     class: [
       withPrefix("switch-wrapper"),
       {
         disabled: props.disabled,
         readonly: props.readonly,
-        shadow: shadow.value,
+        shadow,
         focus: isFocused.value,
         on: props.modelValue,
       },
@@ -47,25 +40,21 @@ const switchWrapperAttrs = computed(() => {
 
 const switchAttrs = computed(() => {
   const shape = props.shape || appState?.shape.value || "";
-
+  const baseRole = appState?.role.value || "";
+  const role = props.role || baseRole;
   return {
     class: [
-      withPrefix(["layer", "item"]),
-      withPrefix([
-        "role",
-        props.modelValue && !props.disabled ? role.value : appState?.role.value || "",
-      ]),
+      withPrefix(["layer", "switch"]),
+      withPrefix(["role", props.modelValue && !props.disabled ? role : baseRole]),
       withPrefix(["shape", shape]),
       withPrefix("switch"),
     ],
   };
 });
 
-const switchIconAttrs = computed(() => {
-  return {
-    class: [withPrefix("switch-icon")],
-  };
-});
+const switchIconAttrs = {
+  class: [withPrefix("switch-icon")],
+} as const;
 
 /// Methods
 /// ------------------------------------------------------------

package/src/components/tabs/tab/tab.md

@@ -0,0 +1,52 @@
+# `Tab`
+
+> **Not** registered by `createToife()` — `import { Tab, Tabs } from "@toife/vue"` (see package README).
+
+## Description
+
+One item in `t-tabs`: renders `<li>` + `t-button`; click calls the provider’s `setValue`.
+
+## Requirements / dependencies
+
+| Item  | Notes                    |
+| ----- | ------------------------ |
+| Vue   | ^3.5                     |
+| Other | Must be inside `t-tabs`. |
+
+## Basic usage
+
+```vue
+<script setup lang="ts">
+import { Tabs, Tab } from "@toife/vue";
+</script>
+<template>
+  <Tabs v-model="active">
+    <Tab value="1">One</Tab>
+    <Tab value="2" disabled>Two</Tab>
+  </Tabs>
+</template>
+```
+
+## Props
+
+| Prop       | Type      | Default | Description                           |
+| ---------- | --------- | ------- | ------------------------------------- |
+| `value`    | `string`  | —       | Tab id (matches `Tabs` `modelValue`). |
+| `disabled` | `boolean` | `false` | Disables selection.                   |
+
+**Type source:** `src/components/tabs/tab/tab.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+| Slot      | Description                  |
+| --------- | ---------------------------- |
+| `default` | Tab label (inside `Button`). |
+
+## See also
+
+- Source: `src/components/tabs/tab`
+- [tabs.md](../tabs/tabs.md)

package/src/components/tabs/tabs/tabs.md

@@ -0,0 +1,59 @@
+# `<t-tabs>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Tab bar: `modelValue` is the active `Tab`’s `value`; underline/highlight position is measured from the DOM (`getBoundingClientRect`). Provides state to child `Tab` components.
+
+## Requirements / dependencies
+
+| Item  | Notes                                                                  |
+| ----- | ---------------------------------------------------------------------- |
+| Vue   | ^3.5                                                                   |
+| Other | Children should be `Tab` (named export) — see [tab.md](../tab/tab.md). |
+
+## Basic usage
+
+```vue
+<t-tabs v-model="tab" variant="underline" placement="top-start">
+  <Tab value="a">Tab A</Tab>
+  <Tab value="b">Tab B</Tab>
+</t-tabs>
+```
+
+## Props
+
+| Prop             | Type            | Default       | Description                          |
+| ---------------- | --------------- | ------------- | ------------------------------------ |
+| `modelValue`     | `string`        | `""`          | Active tab value (`v-model`).        |
+| `placement`      | `TabsPlacement` | `"top-start"` | Bar placement + highlight direction. |
+| `variant`        | `TabsVariant`   | —             | `fill` \| `underline` \| `text`.     |
+| `role` / `shape` | `string`        | —             | Theme.                               |
+| `border`         | `number`        | `2`           | Underline thickness.                 |
+| `margin`         | `number[]`      | `[0, 0]`      | Margin around highlight.             |
+| `divider`        | `boolean`       | —             | Default from app.                    |
+| `transition`     | `boolean`       | `true`        | Animate highlight.                   |
+
+**Type source:** `src/components/tabs/tabs/tabs.type.ts`
+
+## Events (emits)
+
+| Event               | Payload  | Description |
+| ------------------- | -------- | ----------- |
+| `update:modelValue` | `string` | Tab change. |
+
+## Slots
+
+| Slot      | Description     |
+| --------- | --------------- |
+| `default` | `Tab` children. |
+
+## Provide / inject
+
+`TABS_PROVIDER_STATE_KEY`: `activeValue`, `role`, `shape`, `setValue`.
+
+## See also
+
+- Source: `src/components/tabs/tabs`
+- [tab.md](../tab/tab.md)

package/src/components/tabs/tabs/tabs.scss

@@ -9,16 +9,14 @@ $button: sass.fn-naming-prefix("button");
 $space-x: sass.fn-naming-var("spacing", "x");
 $space-y: sass.fn-naming-var("spacing", "y");
 
-// layer: item
-$button-color: sass.fn-naming-var("item", "color");
+// layer: tabs
+$button-color: sass.fn-naming-var("tabs", "color");
 $border-radius: sass.fn-naming-var("border-radius");
 $border-width: sass.fn-naming-var("stroke", "width");
-$border-color: sass.fn-naming-var("surface", "border-color");
+$border-color: sass.fn-naming-var("tabs", "border-color");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$background-color: sass.fn-naming-var("item", "background-color");
-$color: sass.fn-naming-var("item", "color");
-$color-base: sass.fn-naming-var("base", "color");
+$background-color: sass.fn-naming-var("tabs", "background-color");
 
 $highlight-top: sass.fn-naming-var("highlight", "top");
 $highlight-left: sass.fn-naming-var("highlight", "left");

package/src/components/tabs/tabs/tabs.vue

@@ -41,11 +41,9 @@ const activeValue = computed(() => {
   return props.modelValue || "";
 });
 
-const divider = computed(() => {
-  return (props.divider !== undefined ? props.divider : appState?.divider.value || false) ?? false;
-});
-
 const tabsAttrs = computed(() => {
+  const divider =
+    (props.divider !== undefined ? props.divider : appState?.divider.value || false) ?? false;
   let l = left.value;
   let t = top.value;
   let w = width.value;
@@ -86,14 +84,14 @@ const tabsAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "item"]),
+      withPrefix(["layer", "tabs"]),
       withPrefix(["role", role.value]),
       withPrefix(["shape", shape.value]),
       withPrefix("tabs"),
       props.variant,
       props.placement,
       {
-        divider: divider.value,
+        divider,
         transition: props.transition,
       },
     ],

package/src/components/toast/toast/toast.md

@@ -0,0 +1,56 @@
+# `<t-toast>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Toast region for a given `placement`; messages come from the singleton `useToast()` store. `t-app` mounts several instances with different placements.
+
+## Requirements / dependencies
+
+| Item  | Notes                                                              |
+| ----- | ------------------------------------------------------------------ |
+| Vue   | ^3.5                                                               |
+| Other | Call `useToast().open()` anywhere to push messages (shared store). |
+
+## Basic usage
+
+```ts
+import { useToast } from "@toife/vue";
+
+const toast = useToast();
+toast.open({
+  message: "Saved",
+  placement: "bottom-center",
+  duration: 2000,
+});
+```
+
+```vue
+<!-- One region; placement must match `open` -->
+<t-toast placement="bottom-center" />
+```
+
+## Props
+
+| Prop        | Type             | Default        | Description                             |
+| ----------- | ---------------- | -------------- | --------------------------------------- |
+| `placement` | `ToastPlacement` | `"bottom-end"` | Only shows messages for this placement. |
+
+**Type source:** `src/components/toast/toast.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+| Slot      | Description                               |
+| --------- | ----------------------------------------- |
+| `content` | Replaces the default `ToastContent` list. |
+
+## See also
+
+- Source: `src/components/toast/toast`
+- `toast.composable.ts` — `useToast`
+- [toast-content.md](../toast-content/toast-content.md)