@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.
- package/package.json +1 -1
- package/src/components/app/app.type.ts +6 -0
- package/src/components/app/app.vue +7 -1
- package/src/components/avatar/avatar.scss +3 -2
- package/src/components/button/button.scss +9 -6
- package/src/components/button/button.type.ts +3 -1
- package/src/components/card/card/card.scss +3 -1
- package/src/components/checkbox/checkbox.scss +9 -14
- package/src/components/checkbox/checkbox.type.ts +4 -0
- package/src/components/checkbox/checkbox.vue +2 -0
- package/src/components/decision-modal/decision-modal.scss +3 -1
- package/src/components/dropdown/dropdown.scss +5 -2
- package/src/components/dropdown/dropdown.type.ts +4 -1
- package/src/components/dropdown/dropdown.vue +4 -0
- package/src/components/field/field.type.ts +2 -2
- package/src/components/field/outline/outline.scss +9 -8
- package/src/components/gesture-indicator/gesture-indicator.scss +3 -1
- package/src/components/index.ts +1 -0
- package/src/components/layout/flex/flex.scss +0 -2
- package/src/components/layout/flex-item/flex-item.html +1 -0
- package/src/components/layout/flex-item/flex-item.scss +48 -0
- package/src/components/layout/flex-item/flex-item.type.ts +11 -0
- package/src/components/layout/flex-item/flex-item.vue +27 -0
- package/src/components/layout/flex-item/index.ts +2 -0
- package/src/components/layout/grid/grid.scss +0 -2
- package/src/components/layout/grid-item/grid-item.html +1 -0
- package/src/components/layout/grid-item/grid-item.scss +49 -0
- package/src/components/layout/grid-item/grid-item.type.ts +14 -0
- package/src/components/layout/grid-item/grid-item.vue +27 -0
- package/src/components/layout/grid-item/index.ts +2 -0
- package/src/components/layout/index.ts +2 -1
- package/src/components/modal/modal.scss +3 -1
- package/src/components/radio/radio/radio.scss +7 -5
- package/src/components/radio/radio/radio.type.ts +4 -0
- package/src/components/radio/radio/radio.vue +2 -0
- package/src/components/refresher/refresher.html +4 -4
- package/src/components/refresher/refresher.scss +10 -4
- package/src/components/refresher/refresher.vue +3 -3
- package/src/components/skeleton/skeleton.scss +3 -1
- package/src/components/slide-range/index.ts +2 -0
- package/src/components/slide-range/slide-range.html +20 -0
- package/src/components/slide-range/slide-range.scss +161 -0
- package/src/components/slide-range/slide-range.type.ts +16 -0
- package/src/components/slide-range/slide-range.vue +229 -0
- package/src/components/switch/switch.scss +11 -22
- package/src/components/switch/switch.type.ts +5 -0
- package/src/components/switch/switch.vue +2 -0
- package/src/components/tabs/tabs/tabs.scss +135 -95
- package/src/components/tabs/tabs/tabs.type.ts +0 -1
- package/src/components/tabs/tabs/tabs.vue +6 -10
- package/src/components/toast/toast-content/toast-content.scss +3 -2
- package/src/components/toolbar/toolbar.scss +1 -1
- package/src/components/toolbar/toolbar.type.ts +1 -1
- package/src/components/toolbar/toolbar.vue +2 -2
- package/src/factory.ts +6 -2
- package/src/index.ts +1 -1
- package/src/components/action/action.md +0 -115
- package/src/components/app/app.md +0 -77
- package/src/components/avatar/avatar.md +0 -64
- package/src/components/button/button.md +0 -66
- package/src/components/cable/cable.md +0 -57
- package/src/components/card/card/card.md +0 -57
- package/src/components/card/card-body/card-body.md +0 -34
- package/src/components/card/card-footer/card-footer.md +0 -42
- package/src/components/card/card-header/card-header.md +0 -44
- package/src/components/checkbox/checkbox.md +0 -60
- package/src/components/collapse/collapse.md +0 -59
- package/src/components/container/container.md +0 -38
- package/src/components/decision-modal/decision-modal.md +0 -79
- package/src/components/divider/divider.md +0 -42
- package/src/components/field/field.md +0 -68
- package/src/components/field/outline/outline-field.md +0 -44
- package/src/components/form-group/form-group.md +0 -41
- package/src/components/gesture-indicator/gesture-indicator.md +0 -42
- package/src/components/image/image.md +0 -41
- package/src/components/layout/cell/cell.html +0 -1
- package/src/components/layout/cell/cell.md +0 -47
- package/src/components/layout/cell/cell.scss +0 -54
- package/src/components/layout/cell/cell.type.ts +0 -19
- package/src/components/layout/cell/cell.vue +0 -35
- package/src/components/layout/cell/index.ts +0 -2
- package/src/components/layout/grid/grid.md +0 -50
- package/src/components/modal/modal.md +0 -65
- package/src/components/page/page.md +0 -39
- package/src/components/present/present.md +0 -60
- package/src/components/radio/radio/radio.md +0 -53
- package/src/components/radio/radio-group/radio-group.md +0 -62
- package/src/components/refresher/refresher.md +0 -53
- package/src/components/route/route-navigator/route-navigator.md +0 -50
- package/src/components/route/route-outlet/route-outlet.md +0 -30
- package/src/components/route/route-provider/route-provider.md +0 -46
- package/src/components/route/route-wrapper/route-wrapper.md +0 -45
- package/src/components/segmented-field/segmented-field.md +0 -58
- package/src/components/skeleton/skeleton.md +0 -47
- package/src/components/switch/switch.md +0 -57
- package/src/components/tabs/tab/tab.md +0 -52
- package/src/components/tabs/tabs/tabs.md +0 -59
- package/src/components/toast/toast/toast.md +0 -56
- package/src/components/toast/toast-content/toast-content.md +0 -41
- 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`
|