@toife/vue 3.1.3 → 3.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/package.json +1 -1
  2. package/src/components/app/app.type.ts +6 -0
  3. package/src/components/app/app.vue +7 -1
  4. package/src/components/avatar/avatar.scss +3 -2
  5. package/src/components/button/button.scss +9 -6
  6. package/src/components/button/button.type.ts +3 -1
  7. package/src/components/card/card/card.scss +3 -1
  8. package/src/components/checkbox/checkbox.scss +9 -14
  9. package/src/components/checkbox/checkbox.type.ts +4 -0
  10. package/src/components/checkbox/checkbox.vue +2 -0
  11. package/src/components/decision-modal/decision-modal.scss +3 -1
  12. package/src/components/dropdown/dropdown.scss +5 -2
  13. package/src/components/dropdown/dropdown.type.ts +4 -1
  14. package/src/components/dropdown/dropdown.vue +4 -0
  15. package/src/components/field/field.type.ts +2 -2
  16. package/src/components/field/outline/outline.scss +9 -8
  17. package/src/components/gesture-indicator/gesture-indicator.scss +3 -1
  18. package/src/components/index.ts +1 -0
  19. package/src/components/layout/flex/flex.scss +0 -2
  20. package/src/components/layout/flex-item/flex-item.html +1 -0
  21. package/src/components/layout/flex-item/flex-item.scss +48 -0
  22. package/src/components/layout/flex-item/flex-item.type.ts +11 -0
  23. package/src/components/layout/flex-item/flex-item.vue +27 -0
  24. package/src/components/layout/flex-item/index.ts +2 -0
  25. package/src/components/layout/grid/grid.scss +0 -2
  26. package/src/components/layout/grid-item/grid-item.html +1 -0
  27. package/src/components/layout/grid-item/grid-item.scss +49 -0
  28. package/src/components/layout/grid-item/grid-item.type.ts +14 -0
  29. package/src/components/layout/grid-item/grid-item.vue +27 -0
  30. package/src/components/layout/grid-item/index.ts +2 -0
  31. package/src/components/layout/index.ts +2 -1
  32. package/src/components/modal/modal.scss +3 -1
  33. package/src/components/radio/radio/radio.scss +7 -5
  34. package/src/components/radio/radio/radio.type.ts +4 -0
  35. package/src/components/radio/radio/radio.vue +2 -0
  36. package/src/components/refresher/refresher.html +4 -4
  37. package/src/components/refresher/refresher.scss +10 -4
  38. package/src/components/refresher/refresher.vue +3 -3
  39. package/src/components/skeleton/skeleton.scss +3 -1
  40. package/src/components/slide-range/index.ts +2 -0
  41. package/src/components/slide-range/slide-range.html +20 -0
  42. package/src/components/slide-range/slide-range.scss +161 -0
  43. package/src/components/slide-range/slide-range.type.ts +16 -0
  44. package/src/components/slide-range/slide-range.vue +229 -0
  45. package/src/components/switch/switch.scss +11 -22
  46. package/src/components/switch/switch.type.ts +5 -0
  47. package/src/components/switch/switch.vue +2 -0
  48. package/src/components/tabs/tabs/tabs.scss +135 -95
  49. package/src/components/tabs/tabs/tabs.type.ts +0 -1
  50. package/src/components/tabs/tabs/tabs.vue +6 -10
  51. package/src/components/toast/toast-content/toast-content.scss +3 -2
  52. package/src/components/toolbar/toolbar.scss +1 -1
  53. package/src/components/toolbar/toolbar.type.ts +1 -1
  54. package/src/components/toolbar/toolbar.vue +2 -2
  55. package/src/factory.ts +6 -2
  56. package/src/index.ts +1 -1
  57. package/src/components/action/action.md +0 -115
  58. package/src/components/app/app.md +0 -77
  59. package/src/components/avatar/avatar.md +0 -64
  60. package/src/components/button/button.md +0 -66
  61. package/src/components/cable/cable.md +0 -57
  62. package/src/components/card/card/card.md +0 -57
  63. package/src/components/card/card-body/card-body.md +0 -34
  64. package/src/components/card/card-footer/card-footer.md +0 -42
  65. package/src/components/card/card-header/card-header.md +0 -44
  66. package/src/components/checkbox/checkbox.md +0 -60
  67. package/src/components/collapse/collapse.md +0 -59
  68. package/src/components/container/container.md +0 -38
  69. package/src/components/decision-modal/decision-modal.md +0 -79
  70. package/src/components/divider/divider.md +0 -42
  71. package/src/components/field/field.md +0 -68
  72. package/src/components/field/outline/outline-field.md +0 -44
  73. package/src/components/form-group/form-group.md +0 -41
  74. package/src/components/gesture-indicator/gesture-indicator.md +0 -42
  75. package/src/components/image/image.md +0 -41
  76. package/src/components/layout/cell/cell.html +0 -1
  77. package/src/components/layout/cell/cell.md +0 -47
  78. package/src/components/layout/cell/cell.scss +0 -54
  79. package/src/components/layout/cell/cell.type.ts +0 -19
  80. package/src/components/layout/cell/cell.vue +0 -35
  81. package/src/components/layout/cell/index.ts +0 -2
  82. package/src/components/layout/grid/grid.md +0 -50
  83. package/src/components/modal/modal.md +0 -65
  84. package/src/components/page/page.md +0 -39
  85. package/src/components/present/present.md +0 -60
  86. package/src/components/radio/radio/radio.md +0 -53
  87. package/src/components/radio/radio-group/radio-group.md +0 -62
  88. package/src/components/refresher/refresher.md +0 -53
  89. package/src/components/route/route-navigator/route-navigator.md +0 -50
  90. package/src/components/route/route-outlet/route-outlet.md +0 -30
  91. package/src/components/route/route-provider/route-provider.md +0 -46
  92. package/src/components/route/route-wrapper/route-wrapper.md +0 -45
  93. package/src/components/segmented-field/segmented-field.md +0 -58
  94. package/src/components/skeleton/skeleton.md +0 -47
  95. package/src/components/switch/switch.md +0 -57
  96. package/src/components/tabs/tab/tab.md +0 -52
  97. package/src/components/tabs/tabs/tabs.md +0 -59
  98. package/src/components/toast/toast/toast.md +0 -56
  99. package/src/components/toast/toast-content/toast-content.md +0 -41
  100. package/src/components/toolbar/toolbar.md +0 -54
@@ -1,62 +0,0 @@
1
- # `<t-radio-group>`
2
-
3
- > Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
4
-
5
- ## Description
6
-
7
- Radio group with shared `v-model`; provides variant/readonly/disabled/shadow to child `t-radio` via provide/inject.
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ----- | ------------------------------------ |
13
- | Vue | ^3.5 |
14
- | Other | Wrap one or more `t-radio` children. |
15
-
16
- ## Basic usage
17
-
18
- ```vue
19
- <t-radio-group v-model="choice" direction="vertical">
20
- <t-radio value="a">A</t-radio>
21
- <t-radio value="b">B</t-radio>
22
- </t-radio-group>
23
- ```
24
-
25
- ## Props
26
-
27
- | Prop | Type | Default | Description |
28
- | ------------ | ---------------------------- | ------------ | ------------------------------------- |
29
- | `modelValue` | `string \| number` | — | Selected value (`v-model`). |
30
- | `role` | `string` | — | Theme; default from app. |
31
- | `variant` | `RadioVariant` | `"fill"` | Default for radios unless overridden. |
32
- | `disabled` | `boolean` | `false` | Whole group. |
33
- | `readonly` | `boolean` | `false` | |
34
- | `shadow` | `boolean` | — | Default from app. |
35
- | `direction` | `"horizontal" \| "vertical"` | `"vertical"` | Flex layout. |
36
-
37
- **Type source:** `src/components/radio/radio-group/radio-group.type.ts`
38
-
39
- ## Events (emits)
40
-
41
- | Event | Payload | Description |
42
- | ------------------- | ------------------ | ------------------------------- |
43
- | `update:modelValue` | `string \| number` | When a child radio is selected. |
44
-
45
- ## Slots
46
-
47
- | Slot | Description |
48
- | --------- | ------------------- |
49
- | `default` | `t-radio` children. |
50
-
51
- ## `v-model`
52
-
53
- `modelValue` / `update:modelValue`.
54
-
55
- ## Provide / inject
56
-
57
- `RADIO_GROUP_PROVIDER_STATE_KEY`: `modelValue`, `role`, `variant`, `disabled`, `readonly`, `shadow`, `setValue`.
58
-
59
- ## See also
60
-
61
- - Source: `src/components/radio/radio-group`
62
- - [radio.md](../radio/radio.md)
@@ -1,53 +0,0 @@
1
- # `<t-refresher>`
2
-
3
- > Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
4
-
5
- ## Description
6
-
7
- Pull-to-refresh using `@toife/gesture` on the scroll container; two variants control when refresh fires (`max` vs `up`).
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ----- | ----------------- |
13
- | Vue | ^3.5 |
14
- | Other | `@toife/gesture`. |
15
-
16
- ## Basic usage
17
-
18
- ```vue
19
- <t-refresher variant="up" :threshold="120" @refresh="(done) => load().finally(done)">
20
- <template #icon="{ offset, refreshing }">…</template>
21
- <div class="scroll-area">…</div>
22
- </t-refresher>
23
- ```
24
-
25
- ## Props
26
-
27
- | Prop | Type | Default | Description |
28
- | ----------- | --------------- | ------- | ---------------------------------------------------------------------------------------- |
29
- | `threshold` | `number` | `120` | Pull threshold (px) depending on `variant`. |
30
- | `variant` | `"max" \| "up"` | `"max"` | `max`: fire during `move` when threshold reached; `up`: fire on `up` when threshold met. |
31
- | `offset` | `number` | — | Override displayed offset (default `moveOffset / 2`). |
32
-
33
- **Type source:** `src/components/refresher/refresher.type.ts`
34
-
35
- ## Events (emits)
36
-
37
- | Event | Payload | Description |
38
- | --------- | ------------------- | ------------------------------------------------- |
39
- | `refresh` | `close: () => void` | Call `close()` when refresh finishes to reset UI. |
40
- | `move` | `offset: number` | While pulling. |
41
- | `cancel` | — | Pull cancelled. |
42
- | `start` | — | Gesture started. |
43
-
44
- ## Slots
45
-
46
- | Slot | Slot props | Description |
47
- | --------- | ------------------------ | ----------------------------------------- |
48
- | `icon` | `{ offset, refreshing }` | Indicator above the scroll area. |
49
- | `default` | — | Scroll region (internal ref for gesture). |
50
-
51
- ## See also
52
-
53
- - Source: `src/components/refresher`
@@ -1,50 +0,0 @@
1
- # `<t-route-navigator>`
2
-
3
- > Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
4
-
5
- ## Description
6
-
7
- Displays a stack of screens with transitions and optional edge swipe to `router.back()` when `variant="swipe"`. Listens to `stack` from `RouteProvider`.
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ------------ | ------------------------------------------------------------------------ |
13
- | Vue | ^3.5 |
14
- | `vue-router` | **Required** |
15
- | Other | `@toife/gesture`; `RouteProvider` ancestor (usually via `RouteWrapper`). |
16
-
17
- ## Basic usage
18
-
19
- ```vue
20
- <t-route-wrapper>
21
- <t-route-navigator variant="swipe" direction="right" />
22
- </t-route-wrapper>
23
- ```
24
-
25
- ## Props
26
-
27
- | Prop | Type | Default | Description |
28
- | ----------- | ------------------- | --------- | ----------------------------------------- |
29
- | `direction` | `"left" \| "right"` | `"right"` | Gesture / animation direction. |
30
- | `variant` | `"none" \| "swipe"` | `"none"` | Enables swipe navigation when not `none`. |
31
- | `keepalive` | `boolean` | `false` | Reserved for stack/DOM retention. |
32
-
33
- **Type source:** `src/components/route/route-navigator/route-navigator.type.ts`
34
-
35
- ## Events (emits)
36
-
37
- _None._
38
-
39
- ## Slots
40
-
41
- _None_ — fixed structure: stack loop → `RouteProvider` + `RouteOutlet`.
42
-
43
- ## Special behavior
44
-
45
- - Swipe along `direction`: preview transform; release past ~60% width → `goBack()`.
46
- - `fast` swipe calls `router.back()`.
47
-
48
- ## See also
49
-
50
- - Source: `src/components/route/route-navigator`
@@ -1,30 +0,0 @@
1
- # `<t-route-outlet>`
2
-
3
- > Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
4
-
5
- ## Description
6
-
7
- Resolves and renders a route component (sync or async dynamic import).
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ----- | ------------------------------------------------------------- |
13
- | Vue | ^3.5 |
14
- | Other | Used inside `RouteNavigator` with `component` from the stack. |
15
-
16
- ## Props
17
-
18
- | Prop | Type | Description |
19
- | ----------- | --------- | ---------------------------------------------------------- |
20
- | `component` | `unknown` | Route component (may be `{ default: () => import(...) }`). |
21
-
22
- _(Inline type in `route-outlet.vue`.)_
23
-
24
- ## Slots
25
-
26
- _None_ — renders `<component :is="…">`.
27
-
28
- ## See also
29
-
30
- - Source: `src/components/route/route-outlet`
@@ -1,46 +0,0 @@
1
- # `<t-route-provider>`
2
-
3
- > Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
4
-
5
- ## Description
6
-
7
- Provides `stack` (`RouteStack[]`) to `RouteNavigator` / children via inject.
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ----- | ------------------------------------------------------ |
13
- | Vue | ^3.5 |
14
- | Other | Usually created by `RouteWrapper` or `RouteNavigator`. |
15
-
16
- ## Basic usage
17
-
18
- ```vue
19
- <!-- Rarely used directly; RouteNavigator wraps children -->
20
- <t-route-provider :stack="myStack">
21
- <slot />
22
- </t-route-provider>
23
- ```
24
-
25
- ## Props
26
-
27
- | Prop | Type | Description |
28
- | ------- | -------------- | ---------------------------------- |
29
- | `stack` | `RouteStack[]` | Route stack (see `route.type.ts`). |
30
-
31
- **Type source:** `src/components/route/route-provider/route-provider.type.ts`
32
-
33
- ## Slots
34
-
35
- | Slot | Description |
36
- | --------- | ------------------------------------- |
37
- | `default` | Children (often outlet or navigator). |
38
-
39
- ## Provide / inject
40
-
41
- `ROUTE_PROVIDER_STATE_KEY` → `{ stack }` (computed).
42
-
43
- ## See also
44
-
45
- - Source: `src/components/route/route-provider`
46
- - `src/components/route/route.type.ts`
@@ -1,45 +0,0 @@
1
- # `<t-route-wrapper>`
2
-
3
- > Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
4
-
5
- ## Description
6
-
7
- Syncs the route stack with `vue-router` and wraps content in `RouteProvider` — main entry for stack-based navigation (with `RouteNavigator`).
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ------------ | ---------------------------------------- |
13
- | Vue | ^3.5 |
14
- | `vue-router` | **Required** — `useRoute` / `useRouter`. |
15
-
16
- ## Basic usage
17
-
18
- ```vue
19
- <t-route-wrapper home-route-name="home">
20
- <t-route-navigator />
21
- </t-route-wrapper>
22
- ```
23
-
24
- ## Props
25
-
26
- | Prop | Type | Default | Description |
27
- | --------------- | -------- | -------- | ---------------------------------------------- |
28
- | `homeRouteName` | `string` | `"home"` | Name of the root route used to seed the stack. |
29
-
30
- **Type source:** `src/components/route/route-wrapper/route-wrapper.type.ts`
31
-
32
- ## Slots
33
-
34
- | Slot | Description |
35
- | --------- | ---------------------------------- |
36
- | `default` | Child tree (navigator, layout, …). |
37
-
38
- ## Provide / inject
39
-
40
- Renders `RouteProvider` with `stack` from `useRouteWrapper`.
41
-
42
- ## See also
43
-
44
- - Source: `src/components/route/route-wrapper`
45
- - [route-provider.md](../route-provider/route-provider.md), [route-navigator.md](../route-navigator/route-navigator.md)
@@ -1,58 +0,0 @@
1
- # `<t-segmented-field>`
2
-
3
- > Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
4
-
5
- ## Description
6
-
7
- OTP-style segmented input: each segment is a `t-field`; coordinates focus and `v-model` as a character array.
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ----- | ---------------------------------------- |
13
- | Vue | ^3.5 |
14
- | Other | `t-app` recommended; depends on `Field`. |
15
-
16
- ## Basic usage
17
-
18
- ```vue
19
- <t-segmented-field v-model="otp" :length="6" @complete="submit" />
20
- ```
21
-
22
- ## Props
23
-
24
- | Prop | Type | Default | Description |
25
- | ----------------------- | ---------- | ------------------------ | --------------------------------------------- |
26
- | `modelValue` | `string[]` | — | Character array (`v-model`). |
27
- | `value` | `string[]` | — | May be used instead of `modelValue` when set. |
28
- | `length` | `number` | `6` | Number of segments. |
29
- | `variant` / `size` | — | Passed to inner `Field`. |
30
- | `disabled` / `readonly` | `boolean` | `false` | |
31
- | `type` | `string` | `"text"` | Field input type. |
32
- | `role` / `shape` | `string` | — | Theme. |
33
- | `shadow` | `boolean` | — | Default from app. |
34
- | `message` / `help` | `string` | `""` | Message / help. |
35
- | `pattern` | `string[]` | `[]` | Reserved for per-cell validation. |
36
-
37
- **Type source:** `src/components/segmented-field/segmented-field.type.ts`
38
-
39
- ## Events (emits)
40
-
41
- | Event | Payload | Description |
42
- | ------------------- | ------------ | ------------------------------------ |
43
- | `update:modelValue` | `string[]` | Value update. |
44
- | `complete` | `string[]` | When `length` characters are filled. |
45
- | `focus` / `blur` | `FocusEvent` | From inner fields. |
46
- | `input` | `string[]` | On each change. |
47
-
48
- ## Slots
49
-
50
- _None_ — layout is fixed with repeated `Field`.
51
-
52
- ## `v-model`
53
-
54
- `modelValue` / `update:modelValue` (`string[]`).
55
-
56
- ## See also
57
-
58
- - Source: `src/components/segmented-field`
@@ -1,47 +0,0 @@
1
- # `<t-skeleton>`
2
-
3
- > Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
4
-
5
- ## Description
6
-
7
- Loading placeholder block with configurable size (CSS variables), themed from app.
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ----- | ----------------------------- |
13
- | Vue | ^3.5 |
14
- | Other | `t-app` for `role` / `shape`. |
15
-
16
- ## Basic usage
17
-
18
- ```vue
19
- <t-skeleton width="100%" height="12px" />
20
- ```
21
-
22
- ## Props
23
-
24
- | Prop | Type | Default | Description |
25
- | -------- | ------------------ | -------- | -------------------- |
26
- | `width` | `string \| number` | `"100%"` | Width (number = px). |
27
- | `height` | `string \| number` | `"1rem"` | Height. |
28
- | `role` | `string` | — | Theme. |
29
- | `shape` | `string` | — | Shape. |
30
-
31
- **Type source:** `src/components/skeleton/skeleton.type.ts`
32
-
33
- ## Events (emits)
34
-
35
- _None._
36
-
37
- ## Slots
38
-
39
- _None._
40
-
41
- ## Style / class notes
42
-
43
- Variables `--<prefix>-skeleton-width`, `--<prefix>-skeleton-height` via `property(["skeleton","width"])` / `height`.
44
-
45
- ## See also
46
-
47
- - Source: `src/components/skeleton`
@@ -1,57 +0,0 @@
1
- # `<t-switch>`
2
-
3
- > Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
4
-
5
- ## Description
6
-
7
- Boolean toggle with `v-model`, keyboard support, and basic ARIA.
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ----- | -------------------- |
13
- | Vue | ^3.5 |
14
- | Other | `t-app` recommended. |
15
-
16
- ## Basic usage
17
-
18
- ```vue
19
- <t-switch v-model="on">Notifications</t-switch>
20
- ```
21
-
22
- ## Props
23
-
24
- | Prop | Type | Default | Description |
25
- | ------------ | --------- | ------- | --------------------- |
26
- | `modelValue` | `boolean` | `false` | On state. |
27
- | `role` | `string` | — | Theme when on. |
28
- | `shape` | `string` | — | Shape. |
29
- | `disabled` | `boolean` | — | _(optional in types)_ |
30
- | `readonly` | `boolean` | `false` | Read-only. |
31
- | `shadow` | `boolean` | — | Default from app. |
32
-
33
- **Type source:** `src/components/switch/switch.type.ts`
34
-
35
- ## Events (emits)
36
-
37
- | Event | Payload | Description |
38
- | ------------------- | --------- | ------------- |
39
- | `update:modelValue` | `boolean` | Toggle state. |
40
-
41
- ## Slots
42
-
43
- | Slot | Description |
44
- | --------- | ----------------------- |
45
- | `default` | Label beside the track. |
46
-
47
- ## `v-model`
48
-
49
- `modelValue` / `update:modelValue`.
50
-
51
- ## Accessibility (a11y)
52
-
53
- `role="switch"`, `aria-checked`, Space/Enter.
54
-
55
- ## See also
56
-
57
- - Source: `src/components/switch`
@@ -1,52 +0,0 @@
1
- # `Tab`
2
-
3
- > **Not** registered by `createToife()` — `import { Tab, Tabs } from "@toife/vue"` (see package README).
4
-
5
- ## Description
6
-
7
- One item in `t-tabs`: renders `<li>` + `t-button`; click calls the provider’s `setValue`.
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ----- | ------------------------ |
13
- | Vue | ^3.5 |
14
- | Other | Must be inside `t-tabs`. |
15
-
16
- ## Basic usage
17
-
18
- ```vue
19
- <script setup lang="ts">
20
- import { Tabs, Tab } from "@toife/vue";
21
- </script>
22
- <template>
23
- <Tabs v-model="active">
24
- <Tab value="1">One</Tab>
25
- <Tab value="2" disabled>Two</Tab>
26
- </Tabs>
27
- </template>
28
- ```
29
-
30
- ## Props
31
-
32
- | Prop | Type | Default | Description |
33
- | ---------- | --------- | ------- | ------------------------------------- |
34
- | `value` | `string` | — | Tab id (matches `Tabs` `modelValue`). |
35
- | `disabled` | `boolean` | `false` | Disables selection. |
36
-
37
- **Type source:** `src/components/tabs/tab/tab.type.ts`
38
-
39
- ## Events (emits)
40
-
41
- _None._
42
-
43
- ## Slots
44
-
45
- | Slot | Description |
46
- | --------- | ---------------------------- |
47
- | `default` | Tab label (inside `Button`). |
48
-
49
- ## See also
50
-
51
- - Source: `src/components/tabs/tab`
52
- - [tabs.md](../tabs/tabs.md)
@@ -1,59 +0,0 @@
1
- # `<t-tabs>`
2
-
3
- > Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
4
-
5
- ## Description
6
-
7
- Tab bar: `modelValue` is the active `Tab`’s `value`; underline/highlight position is measured from the DOM (`getBoundingClientRect`). Provides state to child `Tab` components.
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ----- | ---------------------------------------------------------------------- |
13
- | Vue | ^3.5 |
14
- | Other | Children should be `Tab` (named export) — see [tab.md](../tab/tab.md). |
15
-
16
- ## Basic usage
17
-
18
- ```vue
19
- <t-tabs v-model="tab" variant="underline" placement="top-start">
20
- <Tab value="a">Tab A</Tab>
21
- <Tab value="b">Tab B</Tab>
22
- </t-tabs>
23
- ```
24
-
25
- ## Props
26
-
27
- | Prop | Type | Default | Description |
28
- | ---------------- | --------------- | ------------- | ------------------------------------ |
29
- | `modelValue` | `string` | `""` | Active tab value (`v-model`). |
30
- | `placement` | `TabsPlacement` | `"top-start"` | Bar placement + highlight direction. |
31
- | `variant` | `TabsVariant` | — | `fill` \| `underline` \| `text`. |
32
- | `role` / `shape` | `string` | — | Theme. |
33
- | `border` | `number` | `2` | Underline thickness. |
34
- | `margin` | `number[]` | `[0, 0]` | Margin around highlight. |
35
- | `divider` | `boolean` | — | Default from app. |
36
- | `transition` | `boolean` | `true` | Animate highlight. |
37
-
38
- **Type source:** `src/components/tabs/tabs/tabs.type.ts`
39
-
40
- ## Events (emits)
41
-
42
- | Event | Payload | Description |
43
- | ------------------- | -------- | ----------- |
44
- | `update:modelValue` | `string` | Tab change. |
45
-
46
- ## Slots
47
-
48
- | Slot | Description |
49
- | --------- | --------------- |
50
- | `default` | `Tab` children. |
51
-
52
- ## Provide / inject
53
-
54
- `TABS_PROVIDER_STATE_KEY`: `activeValue`, `role`, `shape`, `setValue`.
55
-
56
- ## See also
57
-
58
- - Source: `src/components/tabs/tabs`
59
- - [tab.md](../tab/tab.md)
@@ -1,56 +0,0 @@
1
- # `<t-toast>`
2
-
3
- > Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
4
-
5
- ## Description
6
-
7
- Toast region for a given `placement`; messages come from the singleton `useToast()` store. `t-app` mounts several instances with different placements.
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ----- | ------------------------------------------------------------------ |
13
- | Vue | ^3.5 |
14
- | Other | Call `useToast().open()` anywhere to push messages (shared store). |
15
-
16
- ## Basic usage
17
-
18
- ```ts
19
- import { useToast } from "@toife/vue";
20
-
21
- const toast = useToast();
22
- toast.open({
23
- message: "Saved",
24
- placement: "bottom-center",
25
- duration: 2000,
26
- });
27
- ```
28
-
29
- ```vue
30
- <!-- One region; placement must match `open` -->
31
- <t-toast placement="bottom-center" />
32
- ```
33
-
34
- ## Props
35
-
36
- | Prop | Type | Default | Description |
37
- | ----------- | ---------------- | -------------- | --------------------------------------- |
38
- | `placement` | `ToastPlacement` | `"bottom-end"` | Only shows messages for this placement. |
39
-
40
- **Type source:** `src/components/toast/toast.type.ts`
41
-
42
- ## Events (emits)
43
-
44
- _None._
45
-
46
- ## Slots
47
-
48
- | Slot | Description |
49
- | --------- | ----------------------------------------- |
50
- | `content` | Replaces the default `ToastContent` list. |
51
-
52
- ## See also
53
-
54
- - Source: `src/components/toast/toast`
55
- - `toast.composable.ts` — `useToast`
56
- - [toast-content.md](../toast-content/toast-content.md)
@@ -1,41 +0,0 @@
1
- # `<t-toast-content>`
2
-
3
- > Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
4
-
5
- ## Description
6
-
7
- Single toast line: shows `message`, auto-dismisses after `duration`, emits `close` after the exit animation (usually handled by `t-toast` → `useToast().close(id)`).
8
-
9
- ## Requirements / dependencies
10
-
11
- | Item | Notes |
12
- | ----- | -------------------------------------------------------------- |
13
- | Vue | ^3.5 |
14
- | Other | `t-app` for theme; usually rendered by `t-toast` in a `v-for`. |
15
-
16
- ## Props
17
-
18
- | Prop | Type | Default | Description |
19
- | ---------------- | --------------------- | -------- | --------------------------------- |
20
- | `id` | `number` | — | Message id (`useToast` store). |
21
- | `message` | `string` | `""` | Text. |
22
- | `duration` | `number` | `2000` | ms before close animation starts. |
23
- | `role` / `shape` | `string` | — | Theme. |
24
- | `variant` | `ToastContentVariant` | `"fill"` | `fill` \| `text`. |
25
- | `placement` | `ToastPlacement` | — | Set when pushing to the store. |
26
-
27
- **Type source:** `src/components/toast/toast.type.ts`
28
-
29
- ## Events (emits)
30
-
31
- | Event | Payload | Description |
32
- | ------- | ------- | -------------------------------- |
33
- | `close` | — | After delay + closing animation. |
34
-
35
- ## Slots
36
-
37
- _None_ — single text `div`.
38
-
39
- ## See also
40
-
41
- - Source: `src/components/toast/toast-content`