Bot API 8.0 support and new API

docs/.vitepress/config.mts

@@ -1,10 +1,10 @@
-import { defineConfig } from 'vitepress'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
+import { defineConfig } from 'vitepress'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: "vue-tg",
-  description: "Vue-Telegram Documentation",
+  title: 'vue-tg',
+  description: 'Vue-Telegram Documentation',
   markdown: {
     codeTransformers: [
       transformerTwoslash({
@@ -13,47 +13,59 @@ export default defineConfig({
             noErrorTruncation: true,
             paths: {
               'vue-tg': [
-                './dist'
-              ]
-            }
-          }
-        }
-      })
-    ]
+                './dist',
+              ],
+              'vue-tg/7.8': [
+                './dist/versions/7.8',
+              ],
+              'vue-tg/8.0': [
+                './dist/versions/8.0',
+              ],
+              'vue-tg/latest': [
+                './dist/versions/latest',
+              ],
+            },
+          },
+        },
+      }),
+    ],
   },
   themeConfig: {
     search: {
       provider: 'local',
       options: {
         detailedView: true,
         _render(src, env, md) {
-          if (env.relativePath.startsWith('mini-apps/components')) return ''
-          if (env.relativePath.startsWith('mini-apps/composables')) return ''
-          if (env.relativePath.startsWith('widgets/')) return ''
+          if (env.relativePath.startsWith('mini-apps/components'))
+            return ''
+          if (env.relativePath.startsWith('mini-apps/composables'))
+            return ''
+          if (env.relativePath.startsWith('widgets/'))
+            return ''
 
           return md.render(src, env)
-        }
-      }
+        },
+      },
     },
 
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       {
         text: 'Installation',
-        link: "/installation",
+        link: '/installation',
       },
       {
         text: 'Mini Apps',
-        link: "/mini-apps",
+        link: '/mini-apps',
       },
       {
         text: 'Widgets',
-        link: "/widgets",
-      }
+        link: '/widgets',
+      },
     ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/deptyped/vue-telegram' }
-    ]
-  }
+      { icon: 'github', link: 'https://github.com/deptyped/vue-telegram' },
+    ],
+  },
 })

docs/installation.md

@@ -64,6 +64,7 @@ import { Alert } from 'vue-tg'
 | [MainButton](/mini-apps#mainbutton)                   | `tg-main-button`          |
 | [Popup](/mini-apps#Popup)                             | `tg-popup`                |
 | [ScanQr](/mini-apps#scanqr)                           | `tg-scan-qr`              |
+| [SecondaryButton](/mini-apps#secondarybutton)         | `tg-secondary-button`     |
 | [SettingsButton](/mini-apps#settingsbutton)           | `tg-settings-button`      |
 | [ShareWidget](/widgets#share-widget)                  | `tg-share-widget`         |
 | [PostWidget](/widgets#post-widget)                    | `tg-post-widget`          |

docs/mini-apps/components/main-button.md

@@ -18,14 +18,15 @@ function handleMainButton() {
 
 #### Props
 
-| Name      | Type    | Required | Description                                                  |
-| --------- | ------- | -------- | ------------------------------------------------------------ |
-| visible   | boolean | false    | Shows whether the button is visible. Set to true by default. |
-| disabled  | boolean | false    | Shows whether the button is disable.                         |
-| progress  | boolean | false    | Shows whether the button is displaying a loading indicator.  |
-| text      | string  | false    | Current button text.                                         |
-| color     | string  | false    | Current button color.                                        |
-| textColor | string  | false    | Current button text color.                                   |
+| Name           | Type    | Required | Description                                                  |
+| -------------- | ------- | -------- | ------------------------------------------------------------ |
+| visible        | boolean | false    | Shows whether the button is visible. Set to true by default. |
+| disabled       | boolean | false    | Shows whether the button is disable.                         |
+| progress       | boolean | false    | Shows whether the button is displaying a loading indicator.  |
+| text           | string  | false    | <!--@include: @/generated/MainButton-text.md -->             |
+| color          | string  | false    | <!--@include: @/generated/MainButton-color.md -->            |
+| textColor      | string  | false    | <!--@include: @/generated/MainButton-textColor.md -->        |
+| hasShineEffect | boolean | false    | <!--@include: @/generated/MainButton-hasShineEffect.md -->   |
 
 #### Events
 

docs/mini-apps/components/secondary-button.md

@@ -0,0 +1,36 @@
+### SecondaryButton
+
+A component that enables the secondary button when is rendered.
+
+```vue
+<script lang="ts" setup>
+import { SecondaryButton } from 'vue-tg'
+
+function handleSecondaryButton() {
+  // ...
+}
+</script>
+
+<template>
+  <SecondaryButton @click="handleSecondaryButton" />
+</template>
+```
+
+#### Props
+
+| Name           | Type    | Required | Description                                                  |
+| -------------- | ------- | -------- | ------------------------------------------------------------ |
+| visible        | boolean | false    | Shows whether the button is visible. Set to true by default. |
+| disabled       | boolean | false    | Shows whether the button is disable.                         |
+| progress       | boolean | false    | Shows whether the button is displaying a loading indicator.  |
+| text           | string  | false    | <!--@include: @/generated/MainButton-text.md -->             |
+| color          | string  | false    | <!--@include: @/generated/MainButton-color.md -->            |
+| textColor      | string  | false    | <!--@include: @/generated/MainButton-textColor.md -->        |
+| hasShineEffect | boolean | false    | <!--@include: @/generated/MainButton-hasShineEffect.md -->   |
+| position       | string  | false    | <!--@include: @/generated/MainButton-position.md -->         |
+
+#### Events
+
+| Name  | Type         | Description                            |
+| ----- | ------------ | -------------------------------------- |
+| click | `() => void` | Emits when the main button is pressed. |

docs/mini-apps/composables-legacy/use-web-app-back-button.md

@@ -0,0 +1,16 @@
+### ~~useWebAppBackButton~~
+
+::: danger Deprecated
+Use [useBackButton](#usebackbutton) instead.
+:::
+
+```ts twoslash
+// Hover to inspect type
+import { useWebAppBackButton } from 'vue-tg'
+```
+
+| Name                  | Description                                                                                         |
+| :-------------------- | :-------------------------------------------------------------------------------------------------- |
+| `isBackButtonVisible` | <!--@include: @/generated/BackButton-isVisible.md --> <br/> <Badge type="info" text="⚡️ reactive" /> |
+| `showBackButton`      | <!--@include: @/generated/BackButton-show.md -->                                                    |
+| `hideBackButton`      | <!--@include: @/generated/BackButton-hide.md -->                                                    |

docs/mini-apps/composables/use-web-app-biometric-manager.md → docs/mini-apps/composables-legacy/use-web-app-biometric-manager.md

@@ -1,4 +1,8 @@
-### useWebAppBiometricManager
+### ~~useWebAppBiometricManager~~
+
+::: danger Deprecated
+Use [useBiometricManager](#usebiometricmanager) instead.
+:::
 
 ```ts twoslash
 // Hover to inspect type
@@ -19,6 +23,6 @@ import { useWebAppBiometricManager } from 'vue-tg'
 | `authenticateBiometric`      | <!--@include: @/generated/BiometricManager-authenticate.md -->                                                                |
 | `updateBiometricToken`       | <!--@include: @/generated/BiometricManager-updateBiometricToken.md -->                                                        |
 | `openBiometricSettings`      | <!--@include: @/generated/BiometricManager-openSettings.md -->                                                                |
-| `onBiometricManagerUpdated`  | <Badge type="tip" text="Bot API 7.2+" /> A method that sets the `biometricManagerUpdated` [event handler](#event-handling).   |
-| `onBiometricAuthRequested`   | <Badge type="tip" text="Bot API 7.2+" /> A method that sets the `biometricAuthRequested` [event handler](#event-handling).    |
-| `onBiometricTokenUpdated`    | <Badge type="tip" text="Bot API 7.2+" /> A method that sets the `biometricTokenUpdated` [event handler](#event-handling).     |
+| `onManagerUpdated`           | <Badge type="tip" text="Bot API 7.2+" /> A method that sets the `biometricManagerUpdated` [event handler](#event-handling).   |
+| `onAuthRequested`            | <Badge type="tip" text="Bot API 7.2+" /> A method that sets the `biometricAuthRequested` [event handler](#event-handling).    |
+| `onTokenUpdated`             | <Badge type="tip" text="Bot API 7.2+" /> A method that sets the `biometricTokenUpdated` [event handler](#event-handling).     |

docs/mini-apps/composables-legacy/use-web-app-clipboard.md

@@ -0,0 +1,14 @@
+### ~~useWebAppClipboard~~
+
+::: danger Deprecated
+Use [useClipboard](#useclipboard) instead.
+:::
+
+```ts twoslash
+// Hover to inspect type
+import { useWebAppClipboard } from 'vue-tg'
+```
+
+| Name                    | Type                                                          |
+| :---------------------- | :------------------------------------------------------------ |
+| `readTextFromClipboard` | <!--@include: @/generated/WebApp-readTextFromClipboard.md --> |

docs/mini-apps/composables/use-web-app-closing-confirmation.md → docs/mini-apps/composables-legacy/use-web-app-closing-confirmation.md

@@ -1,4 +1,8 @@
-### useWebAppClosingConfirmation
+### ~~useWebAppClosingConfirmation~~
+
+::: danger Deprecated
+Use [useMiniApp](#useminiapp) instead.
+:::
 
 ```ts twoslash
 // Hover to inspect type

docs/mini-apps/composables/use-web-app-cloud-storage.md → docs/mini-apps/composables-legacy/use-web-app-cloud-storage.md

@@ -1,4 +1,8 @@
-### useWebAppCloudStorage
+### ~~useWebAppCloudStorage~~
+
+::: danger Deprecated
+Use [useCloudStorage](#usecloudstorage) instead.
+:::
 
 ```ts twoslash
 // Hover to inspect type

docs/mini-apps/composables/use-web-app-haptic-feedback.md → docs/mini-apps/composables-legacy/use-web-app-haptic-feedback.md

@@ -1,4 +1,8 @@
-### useWebAppHapticFeedback
+### ~~useWebAppHapticFeedback~~
+
+::: danger Deprecated
+Use [useHapticFeedback](#usehapticfeedback) instead.
+:::
 
 ```ts twoslash
 // Hover to inspect type

docs/mini-apps/composables/use-web-app-main-button.md → docs/mini-apps/composables-legacy/use-web-app-main-button.md

@@ -1,4 +1,8 @@
-### useWebAppMainButton
+### ~~useWebAppMainButton~~
+
+::: danger Deprecated
+Use [useMainButton](#usemainbutton) instead.
+:::
 
 ```ts twoslash
 // Hover to inspect type
@@ -14,7 +18,6 @@ import { useWebAppMainButton } from 'vue-tg'
 | `isMainButtonActive`          | <!--@include: @/generated/MainButton-isActive.md --><br/> <Badge type="info" text="⚡️ reactive" />          |
 | `isMainButtonProgressVisible` | <!--@include: @/generated/MainButton-isProgressVisible.md --><br/> <Badge type="info" text="⚡️ reactive" /> |
 | `setMainButtonText`           | <!--@include: @/generated/MainButton-setText.md -->                                                        |
-| `onMainButtonClicked`         | A method that sets the `mainButtonClicked` [event handler](#event-handling).                               |
 | `showMainButton`              | <!--@include: @/generated/MainButton-show.md -->                                                           |
 | `hideMainButton`              | <!--@include: @/generated/MainButton-hide.md -->                                                           |
 | `enableMainButton`            | <!--@include: @/generated/MainButton-enable.md -->                                                         |

docs/mini-apps/composables-legacy/use-web-app-navigation.md

@@ -0,0 +1,17 @@
+### ~~useWebAppNavigation~~
+
+::: danger Deprecated
+Use [useMiniApp](#useminiapp) instead.
+:::
+
+```ts twoslash
+// Hover to inspect type
+import { useWebAppNavigation } from 'vue-tg'
+```
+
+| Name                | Type                                                      |
+| :------------------ | :-------------------------------------------------------- |
+| `openInvoice`       | <!--@include: @/generated/WebApp-openInvoice.md -->       |
+| `openLink`          | <!--@include: @/generated/WebApp-openLink.md -->          |
+| `openTelegramLink`  | <!--@include: @/generated/WebApp-openTelegramLink.md -->  |
+| `switchInlineQuery` | <!--@include: @/generated/WebApp-switchInlineQuery.md --> |

docs/mini-apps/composables-legacy/use-web-app-popup.md

@@ -0,0 +1,16 @@
+### ~~useWebAppPopup~~
+
+::: danger Deprecated
+Use [usePopup](#usepopup) instead.
+:::
+
+```ts twoslash
+// Hover to inspect type
+import { useWebAppPopup } from 'vue-tg'
+```
+
+| Name          | Type                                                |
+| :------------ | :-------------------------------------------------- |
+| `showAlert`   | <!--@include: @/generated/WebApp-showAlert.md -->   |
+| `showConfirm` | <!--@include: @/generated/WebApp-showConfirm.md --> |
+| `showPopup`   | <!--@include: @/generated/WebApp-showPopup.md -->   |

docs/mini-apps/composables-legacy/use-web-app-qr-scanner.md

@@ -0,0 +1,15 @@
+### ~~useWebAppQrScanner~~
+
+::: danger Deprecated
+Use [useQrScanner](#useqrscanner) instead.
+:::
+
+```ts twoslash
+// Hover to inspect type
+import { useWebAppQrScanner } from 'vue-tg'
+```
+
+| Name               | Type                                                     |
+| :----------------- | :------------------------------------------------------- |
+| `showScanQrPopup`  | <!--@include: @/generated/WebApp-showScanQrPopup.md -->  |
+| `closeScanQrPopup` | <!--@include: @/generated/WebApp-closeScanQrPopup.md --> |

docs/mini-apps/composables-legacy/use-web-app-requests.md

@@ -0,0 +1,15 @@
+### ~~useWebAppRequests~~
+
+::: danger Deprecated
+Use [useMiniApp](#useminiapp) instead.
+:::
+
+```ts twoslash
+// Hover to inspect type
+import { useWebAppRequests } from 'vue-tg'
+```
+
+| Name                 | Type                                                       |
+| :------------------- | :--------------------------------------------------------- |
+| `requestContact`     | <!--@include: @/generated/WebApp-requestContact.md -->     |
+| `requestWriteAccess` | <!--@include: @/generated/WebApp-requestWriteAccess.md --> |

docs/mini-apps/composables/use-web-app-settings-button.md → docs/mini-apps/composables-legacy/use-web-app-settings-button.md

@@ -1,13 +1,16 @@
-### useWebAppSettingsButton
+### ~~useWebAppSettingsButton~~
+
+::: danger Deprecated
+Use [useSettingsButton](#usesettingsbutton) instead.
+:::
 
 ```ts twoslash
 // Hover to inspect type
 import { useWebAppSettingsButton } from 'vue-tg'
 ```
 
-| Name                      | Type                                                                                                                      |
-| :------------------------ | :------------------------------------------------------------------------------------------------------------------------ |
-| `isSettingsButtonVisible` | <!--@include: @/generated/SettingsButton-isVisible.md --><br/> <Badge type="info" text="⚡️ reactive" />                    |
-| `onSettingsButtonClicked` | <Badge type="tip" text="Bot API 6.1+" /> A method that sets the `settingsButtonClicked` [event handler](#event-handling). |
-| `showSettingsButton`      | <!--@include: @/generated/SettingsButton-show.md -->                                                                      |
-| `hideSettingsButton`      | <!--@include: @/generated/SettingsButton-hide.md -->                                                                      |
+| Name                      | Type                                                                                                   |
+| :------------------------ | :----------------------------------------------------------------------------------------------------- |
+| `isSettingsButtonVisible` | <!--@include: @/generated/SettingsButton-isVisible.md --><br/> <Badge type="info" text="⚡️ reactive" /> |
+| `showSettingsButton`      | <!--@include: @/generated/SettingsButton-show.md -->                                                   |
+| `hideSettingsButton`      | <!--@include: @/generated/SettingsButton-hide.md -->                                                   |

docs/mini-apps/composables/use-web-app-share.md → docs/mini-apps/composables-legacy/use-web-app-share.md

@@ -1,4 +1,8 @@
-### useWebAppShare
+### ~~useWebAppShare~~
+
+::: danger Deprecated
+Use [useMiniApp](#useminiapp) instead.
+:::
 
 ```ts twoslash
 // Hover to inspect type
@@ -7,4 +11,4 @@ import { useWebAppShare } from 'vue-tg'
 
 | Name           | Type                                                 |
 | :------------- | :--------------------------------------------------- |
-| `shareToStory` | <!--@include: @/generated/WebApp-shareToStory.md --> |
+| `shareToStory` | <!--@include: @/generated/WebApp-shareToStory.md --> |

docs/mini-apps/composables/use-web-app-theme.md → docs/mini-apps/composables-legacy/use-web-app-theme.md

@@ -1,4 +1,8 @@
-### useWebAppTheme
+### ~~useWebAppTheme~~
+
+::: danger Deprecated
+Use [useTheme](#usetheme) instead.
+:::
 
 ```ts twoslash
 // Hover to inspect type
@@ -13,4 +17,3 @@ import { useWebAppTheme } from 'vue-tg'
 | `backgroundColor`    | <!--@include: @/generated/WebApp-backgroundColor.md --><br/><Badge type="info" text="⚡️ reactive" />      |
 | `setHeaderColor`     | <!--@include: @/generated/WebApp-setHeaderColor.md -->                                                   |
 | `setBackgroundColor` | <!--@include: @/generated/WebApp-setBackgroundColor.md -->                                               |
-| `onThemeChanged`     | A method that sets the `themeParams` [event handler](#event-handling).                                   |

docs/mini-apps/composables/use-web-app-viewport.md → docs/mini-apps/composables-legacy/use-web-app-viewport.md

@@ -1,4 +1,8 @@
-### useWebAppViewport
+### ~~useWebAppViewport~~
+
+::: danger Deprecated
+Use [useViewport](#useviewport) instead.
+:::
 
 ```ts twoslash
 // Hover to inspect type
@@ -14,4 +18,3 @@ import { useWebAppViewport } from 'vue-tg'
 | `expand`                  | <!--@include: @/generated/WebApp-expand.md -->                                                                     |
 | `enableVerticalSwipes`    | <!--@include: @/generated/WebApp-enableVerticalSwipes.md -->                                                       |
 | `disableVerticalSwipes`   | <!--@include: @/generated/WebApp-disableVerticalSwipes.md -->                                                      |
-| `onViewportChanged`       | A method that sets the `viewportChanged` [event handler](#event-handling).                                         |