@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.
Files changed (157) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/src/components/action/action.scss +1 -1
  4. package/src/components/action/action.vue +5 -5
  5. package/src/components/app/app.scss +2 -2
  6. package/src/components/app/app.type.ts +6 -0
  7. package/src/components/app/app.vue +8 -2
  8. package/src/components/avatar/avatar.scss +6 -4
  9. package/src/components/avatar/avatar.vue +6 -6
  10. package/src/components/button/button.scss +19 -16
  11. package/src/components/button/button.type.ts +3 -1
  12. package/src/components/button/button.vue +7 -7
  13. package/src/components/cable/cable.vue +2 -2
  14. package/src/components/card/card/card.scss +5 -3
  15. package/src/components/card/card/card.vue +5 -5
  16. package/src/components/card/card-body/card-body.scss +2 -2
  17. package/src/components/card/card-body/card-body.vue +2 -2
  18. package/src/components/card/card-footer/card-footer.scss +3 -3
  19. package/src/components/card/card-footer/card-footer.vue +2 -2
  20. package/src/components/card/card-header/card-header.scss +3 -3
  21. package/src/components/card/card-header/card-header.vue +2 -2
  22. package/src/components/checkbox/checkbox.html +1 -1
  23. package/src/components/checkbox/checkbox.scss +27 -27
  24. package/src/components/checkbox/checkbox.type.ts +4 -0
  25. package/src/components/checkbox/checkbox.vue +8 -6
  26. package/src/components/collapse/collapse.html +1 -1
  27. package/src/components/collapse/collapse.scss +2 -2
  28. package/src/components/collapse/collapse.vue +9 -9
  29. package/src/components/container/container.vue +2 -2
  30. package/src/components/decision-modal/decision-modal.scss +12 -10
  31. package/src/components/decision-modal/decision-modal.vue +8 -8
  32. package/src/components/divider/divider.scss +2 -2
  33. package/src/components/divider/divider.vue +4 -4
  34. package/src/components/dropdown/dropdown.scss +8 -5
  35. package/src/components/dropdown/dropdown.type.ts +4 -1
  36. package/src/components/dropdown/dropdown.vue +8 -6
  37. package/src/components/field/field.type.ts +4 -4
  38. package/src/components/field/outline/outline.scss +24 -21
  39. package/src/components/field/outline/outline.vue +26 -18
  40. package/src/components/form-group/form-group.vue +2 -2
  41. package/src/components/gesture-indicator/gesture-indicator.scss +4 -2
  42. package/src/components/gesture-indicator/gesture-indicator.vue +4 -4
  43. package/src/components/image/image.vue +12 -5
  44. package/src/components/index.ts +1 -0
  45. package/src/components/layout/flex/flex.scss +0 -2
  46. package/src/components/layout/flex/flex.vue +8 -8
  47. package/src/components/layout/flex-item/flex-item.html +1 -0
  48. package/src/components/layout/flex-item/flex-item.scss +48 -0
  49. package/src/components/layout/flex-item/flex-item.type.ts +11 -0
  50. package/src/components/layout/flex-item/flex-item.vue +27 -0
  51. package/src/components/layout/flex-item/index.ts +2 -0
  52. package/src/components/layout/grid/grid.scss +0 -2
  53. package/src/components/layout/grid/grid.vue +6 -6
  54. package/src/components/layout/grid-item/grid-item.html +1 -0
  55. package/src/components/layout/grid-item/grid-item.scss +49 -0
  56. package/src/components/layout/grid-item/grid-item.type.ts +14 -0
  57. package/src/components/layout/grid-item/grid-item.vue +27 -0
  58. package/src/components/layout/grid-item/index.ts +2 -0
  59. package/src/components/layout/index.ts +2 -1
  60. package/src/components/modal/modal.scss +4 -2
  61. package/src/components/modal/modal.vue +68 -5
  62. package/src/components/page/page.vue +2 -2
  63. package/src/components/present/present.scss +3 -3
  64. package/src/components/present/present.vue +14 -14
  65. package/src/components/radio/radio/radio.html +1 -1
  66. package/src/components/radio/radio/radio.scss +25 -18
  67. package/src/components/radio/radio/radio.type.ts +4 -0
  68. package/src/components/radio/radio/radio.vue +7 -5
  69. package/src/components/radio/radio-group/radio-group.vue +2 -2
  70. package/src/components/refresher/refresher.html +1 -4
  71. package/src/components/refresher/refresher.scss +8 -26
  72. package/src/components/refresher/refresher.vue +2 -16
  73. package/src/components/route/route-navigator/route-navigator.scss +2 -2
  74. package/src/components/route/route-navigator/route-navigator.vue +10 -13
  75. package/src/components/route/route-wrapper/route-wrapper.composable.ts +5 -15
  76. package/src/components/route/route-wrapper/route-wrapper.type.ts +0 -4
  77. package/src/components/route/route-wrapper/route-wrapper.vue +4 -12
  78. package/src/components/route/route.type.ts +0 -1
  79. package/src/components/segmented-field/segmented-field.html +1 -1
  80. package/src/components/segmented-field/segmented-field.scss +2 -2
  81. package/src/components/segmented-field/segmented-field.vue +8 -8
  82. package/src/components/select/select.html +2 -2
  83. package/src/components/select/select.scss +10 -10
  84. package/src/components/select/select.vue +10 -10
  85. package/src/components/skeleton/skeleton.scss +3 -1
  86. package/src/components/skeleton/skeleton.vue +7 -7
  87. package/src/components/slide-range/index.ts +2 -0
  88. package/src/components/slide-range/slide-range.html +19 -0
  89. package/src/components/slide-range/slide-range.scss +161 -0
  90. package/src/components/slide-range/slide-range.type.ts +16 -0
  91. package/src/components/slide-range/slide-range.vue +229 -0
  92. package/src/components/switch/switch.html +1 -1
  93. package/src/components/switch/switch.scss +29 -38
  94. package/src/components/switch/switch.type.ts +6 -0
  95. package/src/components/switch/switch.vue +24 -8
  96. package/src/components/tabs/tab/tab.html +1 -1
  97. package/src/components/tabs/tab/tab.scss +13 -0
  98. package/src/components/tabs/tab/tab.vue +4 -2
  99. package/src/components/tabs/tabs/index.ts +1 -0
  100. package/src/components/tabs/tabs/tabs.scss +194 -122
  101. package/src/components/tabs/tabs/tabs.type.ts +5 -2
  102. package/src/components/tabs/tabs/tabs.vue +47 -27
  103. package/src/components/toast/toast/toast.vue +2 -2
  104. package/src/components/toast/toast-content/toast-content.scss +6 -5
  105. package/src/components/toast/toast-content/toast-content.vue +5 -5
  106. package/src/components/toolbar/toolbar.scss +4 -4
  107. package/src/components/toolbar/toolbar.type.ts +1 -1
  108. package/src/components/toolbar/toolbar.vue +7 -7
  109. package/src/factory.ts +108 -50
  110. package/src/index.ts +1 -1
  111. package/src/type.ts +2 -1
  112. package/src/utils/style/index.ts +9 -9
  113. package/src/utils/style.md +9 -9
  114. package/src/components/action/action.md +0 -115
  115. package/src/components/app/app.md +0 -77
  116. package/src/components/avatar/avatar.md +0 -64
  117. package/src/components/button/button.md +0 -66
  118. package/src/components/cable/cable.md +0 -57
  119. package/src/components/card/card/card.md +0 -57
  120. package/src/components/card/card-body/card-body.md +0 -34
  121. package/src/components/card/card-footer/card-footer.md +0 -42
  122. package/src/components/card/card-header/card-header.md +0 -44
  123. package/src/components/checkbox/checkbox.md +0 -60
  124. package/src/components/collapse/collapse.md +0 -59
  125. package/src/components/container/container.md +0 -38
  126. package/src/components/decision-modal/decision-modal.md +0 -79
  127. package/src/components/divider/divider.md +0 -42
  128. package/src/components/field/field.md +0 -68
  129. package/src/components/field/outline/outline-field.md +0 -44
  130. package/src/components/form-group/form-group.md +0 -41
  131. package/src/components/gesture-indicator/gesture-indicator.md +0 -42
  132. package/src/components/image/image.md +0 -41
  133. package/src/components/layout/cell/cell.html +0 -1
  134. package/src/components/layout/cell/cell.md +0 -47
  135. package/src/components/layout/cell/cell.scss +0 -54
  136. package/src/components/layout/cell/cell.type.ts +0 -19
  137. package/src/components/layout/cell/cell.vue +0 -35
  138. package/src/components/layout/cell/index.ts +0 -2
  139. package/src/components/layout/grid/grid.md +0 -50
  140. package/src/components/modal/modal.md +0 -65
  141. package/src/components/page/page.md +0 -39
  142. package/src/components/present/present.md +0 -60
  143. package/src/components/radio/radio/radio.md +0 -53
  144. package/src/components/radio/radio-group/radio-group.md +0 -62
  145. package/src/components/refresher/refresher.md +0 -53
  146. package/src/components/route/route-navigator/route-navigator.md +0 -50
  147. package/src/components/route/route-outlet/route-outlet.md +0 -30
  148. package/src/components/route/route-provider/route-provider.md +0 -46
  149. package/src/components/route/route-wrapper/route-wrapper.md +0 -45
  150. package/src/components/segmented-field/segmented-field.md +0 -58
  151. package/src/components/skeleton/skeleton.md +0 -47
  152. package/src/components/switch/switch.md +0 -57
  153. package/src/components/tabs/tab/tab.md +0 -52
  154. package/src/components/tabs/tabs/tabs.md +0 -59
  155. package/src/components/toast/toast/toast.md +0 -56
  156. package/src/components/toast/toast-content/toast-content.md +0 -41
  157. 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`