@toife/vue 3.1.3 → 3.1.5
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/README.md +1 -1
- package/package.json +1 -1
- package/src/components/action/action.scss +1 -1
- package/src/components/action/action.vue +5 -5
- package/src/components/app/app.scss +2 -2
- package/src/components/app/app.type.ts +6 -0
- package/src/components/app/app.vue +8 -2
- package/src/components/avatar/avatar.scss +6 -4
- package/src/components/avatar/avatar.vue +6 -6
- package/src/components/button/button.scss +19 -16
- package/src/components/button/button.type.ts +3 -1
- package/src/components/button/button.vue +7 -7
- package/src/components/cable/cable.vue +2 -2
- package/src/components/card/card/card.scss +5 -3
- package/src/components/card/card/card.vue +5 -5
- package/src/components/card/card-body/card-body.scss +2 -2
- package/src/components/card/card-body/card-body.vue +2 -2
- package/src/components/card/card-footer/card-footer.scss +3 -3
- package/src/components/card/card-footer/card-footer.vue +2 -2
- package/src/components/card/card-header/card-header.scss +3 -3
- package/src/components/card/card-header/card-header.vue +2 -2
- package/src/components/checkbox/checkbox.html +1 -1
- package/src/components/checkbox/checkbox.scss +27 -27
- package/src/components/checkbox/checkbox.type.ts +4 -0
- package/src/components/checkbox/checkbox.vue +8 -6
- package/src/components/collapse/collapse.html +1 -1
- package/src/components/collapse/collapse.scss +2 -2
- package/src/components/collapse/collapse.vue +9 -9
- package/src/components/container/container.vue +2 -2
- package/src/components/decision-modal/decision-modal.scss +12 -10
- package/src/components/decision-modal/decision-modal.vue +8 -8
- package/src/components/divider/divider.scss +2 -2
- package/src/components/divider/divider.vue +4 -4
- package/src/components/dropdown/dropdown.scss +8 -5
- package/src/components/dropdown/dropdown.type.ts +4 -1
- package/src/components/dropdown/dropdown.vue +8 -6
- package/src/components/field/field.type.ts +4 -4
- package/src/components/field/outline/outline.scss +24 -21
- package/src/components/field/outline/outline.vue +26 -18
- package/src/components/form-group/form-group.vue +2 -2
- package/src/components/gesture-indicator/gesture-indicator.scss +4 -2
- package/src/components/gesture-indicator/gesture-indicator.vue +4 -4
- package/src/components/image/image.vue +12 -5
- package/src/components/index.ts +1 -0
- package/src/components/layout/flex/flex.scss +0 -2
- package/src/components/layout/flex/flex.vue +8 -8
- 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/grid.vue +6 -6
- 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 +4 -2
- package/src/components/modal/modal.vue +68 -5
- package/src/components/page/page.vue +2 -2
- package/src/components/present/present.scss +3 -3
- package/src/components/present/present.vue +14 -14
- package/src/components/radio/radio/radio.html +1 -1
- package/src/components/radio/radio/radio.scss +25 -18
- package/src/components/radio/radio/radio.type.ts +4 -0
- package/src/components/radio/radio/radio.vue +7 -5
- package/src/components/radio/radio-group/radio-group.vue +2 -2
- package/src/components/refresher/refresher.html +1 -4
- package/src/components/refresher/refresher.scss +8 -26
- package/src/components/refresher/refresher.vue +2 -16
- package/src/components/route/route-navigator/route-navigator.scss +2 -2
- package/src/components/route/route-navigator/route-navigator.vue +10 -13
- package/src/components/route/route-wrapper/route-wrapper.composable.ts +5 -15
- package/src/components/route/route-wrapper/route-wrapper.type.ts +0 -4
- package/src/components/route/route-wrapper/route-wrapper.vue +4 -12
- package/src/components/route/route.type.ts +0 -1
- package/src/components/segmented-field/segmented-field.html +1 -1
- package/src/components/segmented-field/segmented-field.scss +2 -2
- package/src/components/segmented-field/segmented-field.vue +8 -8
- package/src/components/select/select.html +2 -2
- package/src/components/select/select.scss +10 -10
- package/src/components/select/select.vue +10 -10
- package/src/components/skeleton/skeleton.scss +3 -1
- package/src/components/skeleton/skeleton.vue +7 -7
- package/src/components/slide-range/index.ts +2 -0
- package/src/components/slide-range/slide-range.html +19 -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.html +1 -1
- package/src/components/switch/switch.scss +29 -38
- package/src/components/switch/switch.type.ts +6 -0
- package/src/components/switch/switch.vue +24 -8
- package/src/components/tabs/tab/tab.html +1 -1
- package/src/components/tabs/tab/tab.scss +13 -0
- package/src/components/tabs/tab/tab.vue +4 -2
- package/src/components/tabs/tabs/index.ts +1 -0
- package/src/components/tabs/tabs/tabs.scss +194 -122
- package/src/components/tabs/tabs/tabs.type.ts +5 -2
- package/src/components/tabs/tabs/tabs.vue +47 -27
- package/src/components/toast/toast/toast.vue +2 -2
- package/src/components/toast/toast-content/toast-content.scss +6 -5
- package/src/components/toast/toast-content/toast-content.vue +5 -5
- package/src/components/toolbar/toolbar.scss +4 -4
- package/src/components/toolbar/toolbar.type.ts +1 -1
- package/src/components/toolbar/toolbar.vue +7 -7
- package/src/factory.ts +108 -50
- package/src/index.ts +1 -1
- package/src/type.ts +2 -1
- package/src/utils/style/index.ts +9 -9
- package/src/utils/style.md +9 -9
- 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,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`
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
# `<t-toolbar>`
|
|
2
|
-
|
|
3
|
-
> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
|
|
4
|
-
|
|
5
|
-
## Description
|
|
6
|
-
|
|
7
|
-
Toolbar surface with height / safe-area; `placement` comes from props or from `t-cable` (inject).
|
|
8
|
-
|
|
9
|
-
## Requirements / dependencies
|
|
10
|
-
|
|
11
|
-
| Item | Notes |
|
|
12
|
-
| ----- | ---------------------------------------------------------------- |
|
|
13
|
-
| Vue | ^3.5 |
|
|
14
|
-
| Other | Place inside `t-cable` to inherit placement; `t-app` for `role`. |
|
|
15
|
-
|
|
16
|
-
## Basic usage
|
|
17
|
-
|
|
18
|
-
```vue
|
|
19
|
-
<t-cable placement="bottom">
|
|
20
|
-
<t-toolbar>
|
|
21
|
-
<t-button>Home</t-button>
|
|
22
|
-
</t-toolbar>
|
|
23
|
-
</t-cable>
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## Props
|
|
27
|
-
|
|
28
|
-
| Prop | Type | Default | Description |
|
|
29
|
-
| ----------- | ---------------- | ------- | ------------------------------------------------- |
|
|
30
|
-
| `placement` | `string \| null` | `null` | Placement class; if null, uses `cable.placement`. |
|
|
31
|
-
| `safeArea` | `boolean` | `true` | Safe-area padding (notch, home indicator). |
|
|
32
|
-
| `role` | `string` | — | Theme. |
|
|
33
|
-
|
|
34
|
-
**Type source:** `src/components/toolbar/toolbar.type.ts`
|
|
35
|
-
|
|
36
|
-
## Events (emits)
|
|
37
|
-
|
|
38
|
-
_None._
|
|
39
|
-
|
|
40
|
-
## Slots
|
|
41
|
-
|
|
42
|
-
| Slot | Description |
|
|
43
|
-
| --------- | ---------------------------------------------- |
|
|
44
|
-
| `default` | Buttons / content (wrapped in an inner `div`). |
|
|
45
|
-
|
|
46
|
-
## Provide / inject
|
|
47
|
-
|
|
48
|
-
Optional inject `CABLE_PROVIDER_STATE_KEY` and `APP_PROVIDER_STATE_KEY`.
|
|
49
|
-
|
|
50
|
-
## Style / class notes
|
|
51
|
-
|
|
52
|
-
## See also
|
|
53
|
-
|
|
54
|
-
- Source: `src/components/toolbar`
|