├── .github ├── renovate.json └── workflows │ └── main.yml ├── .gitignore ├── .vscode ├── extensions.json └── settings.json ├── LICENSE ├── README.md ├── demo ├── App.vue ├── index.html ├── main.ts └── vite.config.ts ├── docs ├── .vitepress │ ├── config.mts │ └── theme │ │ └── index.ts ├── index.md ├── installation.md ├── mini-apps.md ├── mini-apps │ ├── components │ │ ├── alert.md │ │ ├── back-button.md │ │ ├── biometric-manager.md │ │ ├── closing-confirmation.md │ │ ├── confirm.md │ │ ├── expanded-viewport.md │ │ ├── fullscreen-viewport.md │ │ ├── main-button.md │ │ ├── popup.md │ │ ├── scan-qr.md │ │ ├── secondary-button.md │ │ └── settings-button.md │ ├── composables-legacy │ │ ├── use-web-app-back-button.md │ │ ├── use-web-app-biometric-manager.md │ │ ├── use-web-app-clipboard.md │ │ ├── use-web-app-closing-confirmation.md │ │ ├── use-web-app-cloud-storage.md │ │ ├── use-web-app-haptic-feedback.md │ │ ├── use-web-app-main-button.md │ │ ├── use-web-app-navigation.md │ │ ├── use-web-app-popup.md │ │ ├── use-web-app-qr-scanner.md │ │ ├── use-web-app-requests.md │ │ ├── use-web-app-settings-button.md │ │ ├── use-web-app-share.md │ │ ├── use-web-app-theme.md │ │ ├── use-web-app-viewport.md │ │ └── use-web-app.md │ └── composables │ │ ├── use-accelerometer.md │ │ ├── use-back-button.md │ │ ├── use-biometric-manager.md │ │ ├── use-clipboard.md │ │ ├── use-cloud-storage.md │ │ ├── use-device-orientation.md │ │ ├── use-device-storage.md │ │ ├── use-emoji-status.md │ │ ├── use-gyroscope.md │ │ ├── use-haptic-feedback.md │ │ ├── use-home-screen.md │ │ ├── use-location-manager.md │ │ ├── use-main-button.md │ │ ├── use-mini-app.md │ │ ├── use-popup.md │ │ ├── use-qr-scanner.md │ │ ├── use-secondary-button.md │ │ ├── use-secure-storage.md │ │ ├── use-settings-button.md │ │ ├── use-theme.md │ │ └── use-viewport.md ├── widgets.md └── widgets │ ├── discussion-widget.md │ ├── login-widget.md │ ├── post-widget.md │ └── share-widget.md ├── eslint.config.mjs ├── package-lock.json ├── package.json ├── scripts └── generate-webapps-docs-snippets.ts ├── src ├── components │ ├── Alert.vue │ ├── BackButton.vue │ ├── BiometricManager.vue │ ├── ClosingConfirmation.vue │ ├── Confirm.vue │ ├── ExpandedViewport.vue │ ├── FullscreenViewport.vue │ ├── MainButton.vue │ ├── Popup.vue │ ├── ScanQr.vue │ ├── SecondaryButton.vue │ └── SettingsButton.vue ├── composables-legacy │ ├── index.ts │ ├── useWebApp.ts │ ├── useWebAppBackButton.ts │ ├── useWebAppBiometricManager.ts │ ├── useWebAppClipboard.ts │ ├── useWebAppClosingConfirmation.ts │ ├── useWebAppCloudStorage.ts │ ├── useWebAppHapticFeedback.ts │ ├── useWebAppMainButton.ts │ ├── useWebAppNavigation.ts │ ├── useWebAppPopup.ts │ ├── useWebAppQrScanner.ts │ ├── useWebAppRequests.ts │ ├── useWebAppSendData.ts │ ├── useWebAppSettingsButton.ts │ ├── useWebAppShare.ts │ ├── useWebAppTheme.ts │ └── useWebAppViewport.ts ├── composables │ ├── useAccelerometer.ts │ ├── useBackButton.ts │ ├── useBiometricManager.ts │ ├── useClipboard.ts │ ├── useCloudStorage.ts │ ├── useDeviceOrientation.ts │ ├── useDeviceStorage.ts │ ├── useEmojiStatus.ts │ ├── useGyroscope.ts │ ├── useHapticFeedback.ts │ ├── useHomeScreen.ts │ ├── useLocationManager.ts │ ├── useMainButton.ts │ ├── useMiniApp.ts │ ├── usePopup.ts │ ├── useQrScanner.ts │ ├── useSecondaryButton.ts │ ├── useSecureStorage.ts │ ├── useSettingsButton.ts │ ├── useTheme.ts │ └── useViewport.ts ├── events.ts ├── index.ts ├── sdk │ ├── accelerometer.ts │ ├── back-button.ts │ ├── biometric-manager.ts │ ├── bottom-button.ts │ ├── cloud-storage.ts │ ├── device-orientation.ts │ ├── device-storage.ts │ ├── events.ts │ ├── gyroscope.ts │ ├── haptic-feedback.ts │ ├── index.ts │ ├── location-manager.ts │ ├── popup.ts │ ├── qr-scanner.ts │ ├── secure-storage.ts │ ├── settings-button.ts │ ├── theme.ts │ ├── viewport.ts │ └── webapp.ts ├── shims.d.ts ├── types.ts ├── utils │ ├── functions.ts │ ├── index.ts │ ├── lifecycle.ts │ ├── store.ts │ └── version.ts ├── versions │ ├── 6.0.ts │ ├── 6.1.ts │ ├── 6.2.ts │ ├── 6.4.ts │ ├── 6.7.ts │ ├── 6.9.ts │ ├── 7.0.ts │ ├── 7.10.ts │ ├── 7.2.ts │ ├── 7.6.ts │ ├── 7.7.ts │ ├── 7.8.ts │ ├── 8.0.ts │ ├── 9.0.ts │ ├── 9.1.ts │ └── latest.ts └── widgets │ ├── DiscussionWidget.vue │ ├── LoginWidget.vue │ ├── PostWidget.vue │ └── ShareWidget.vue ├── test └── basic.test.ts ├── tsconfig.json ├── vite.config.mts └── vitest.config.ts /.github/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | jobs: 10 | build-and-test: 11 | runs-on: ubuntu-latest 12 | strategy: 13 | matrix: 14 | node-version: [22.x] 15 | steps: 16 | - uses: actions/checkout@v3 17 | - name: Use Node.js ${{ matrix.node-version }} 18 | uses: actions/setup-node@v3 19 | with: 20 | node-version: ${{ matrix.node-version }} 21 | - run: npm ci 22 | - run: npm run lint 23 | - run: npm run build 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Serverless directories 108 | .serverless/ 109 | 110 | # FuseBox cache 111 | .fusebox/ 112 | 113 | # DynamoDB Local files 114 | .dynamodb/ 115 | 116 | # TernJS port file 117 | .tern-port 118 | 119 | # Stores VSCode versions used for testing VSCode extensions 120 | .vscode-test 121 | 122 | # yarn v2 123 | .yarn/cache 124 | .yarn/unplugged 125 | .yarn/build-state.yml 126 | .yarn/install-state.gz 127 | .pnp.* 128 | 129 | # Data 130 | data/ 131 | 132 | *.env 133 | 134 | docs/.vitepress/dist 135 | docs/.vitepress/cache 136 | docs/generated 137 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "misterj.vue-volar-extention-pack" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // Disable the default formatter, use eslint instead 3 | "prettier.enable": false, 4 | "editor.formatOnSave": false, 5 | 6 | // Auto fix 7 | "editor.codeActionsOnSave": { 8 | "source.fixAll.eslint": "explicit", 9 | "source.organizeImports": "never" 10 | }, 11 | 12 | // Silent the stylistic rules in you IDE, but still auto fix them 13 | "eslint.rules.customizations": [ 14 | { "rule": "style/*", "severity": "off", "fixable": true }, 15 | { "rule": "format/*", "severity": "off", "fixable": true }, 16 | { "rule": "*-indent", "severity": "off", "fixable": true }, 17 | { "rule": "*-spacing", "severity": "off", "fixable": true }, 18 | { "rule": "*-spaces", "severity": "off", "fixable": true }, 19 | { "rule": "*-order", "severity": "off", "fixable": true }, 20 | { "rule": "*-dangle", "severity": "off", "fixable": true }, 21 | { "rule": "*-newline", "severity": "off", "fixable": true }, 22 | { "rule": "*quotes", "severity": "off", "fixable": true }, 23 | { "rule": "*semi", "severity": "off", "fixable": true } 24 | ], 25 | 26 | // Enable eslint for all supported languages 27 | "eslint.validate": [ 28 | "javascript", 29 | "javascriptreact", 30 | "typescript", 31 | "typescriptreact", 32 | "vue", 33 | "html", 34 | "markdown", 35 | "json", 36 | "jsonc", 37 | "yaml", 38 | "toml", 39 | "xml", 40 | "gql", 41 | "graphql", 42 | "astro", 43 | "svelte", 44 | "css", 45 | "less", 46 | "scss", 47 | "pcss", 48 | "postcss" 49 | ], 50 | "typescript.tsdk": "node_modules/typescript/lib" 51 | } 52 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 deptyped 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-tg 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /demo/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import { VueTelegramPlugin } from '../src' 3 | import App from './App.vue' 4 | 5 | createApp(App).use(VueTelegramPlugin).mount('#app') 6 | -------------------------------------------------------------------------------- /demo/vite.config.ts: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue' 2 | import { defineConfig } from 'vite' 3 | 4 | export default defineConfig({ 5 | plugins: [vue()], 6 | }) 7 | -------------------------------------------------------------------------------- /docs/.vitepress/config.mts: -------------------------------------------------------------------------------- 1 | import { transformerTwoslash } from '@shikijs/vitepress-twoslash' 2 | import { defineConfig } from 'vitepress' 3 | 4 | // https://vitepress.dev/reference/site-config 5 | export default defineConfig({ 6 | title: 'vue-tg', 7 | description: 'Vue-Telegram Documentation', 8 | markdown: { 9 | codeTransformers: [ 10 | transformerTwoslash({ 11 | twoslashOptions: { 12 | compilerOptions: { 13 | noErrorTruncation: true, 14 | paths: { 15 | 'vue-tg': [ 16 | './dist', 17 | ], 18 | 'vue-tg/7.8': [ 19 | './dist/versions/7.8', 20 | ], 21 | 'vue-tg/8.0': [ 22 | './dist/versions/8.0', 23 | ], 24 | 'vue-tg/latest': [ 25 | './dist/versions/latest', 26 | ], 27 | }, 28 | }, 29 | }, 30 | }), 31 | ], 32 | }, 33 | themeConfig: { 34 | search: { 35 | provider: 'local', 36 | options: { 37 | detailedView: true, 38 | _render(src, env, md) { 39 | if (env.relativePath.startsWith('mini-apps/components')) 40 | return '' 41 | if (env.relativePath.startsWith('mini-apps/composables')) 42 | return '' 43 | if (env.relativePath.startsWith('widgets/')) 44 | return '' 45 | 46 | return md.render(src, env) 47 | }, 48 | }, 49 | }, 50 | 51 | // https://vitepress.dev/reference/default-theme-config 52 | nav: [ 53 | { 54 | text: 'Installation', 55 | link: '/installation', 56 | }, 57 | { 58 | text: 'Mini Apps', 59 | link: '/mini-apps', 60 | }, 61 | { 62 | text: 'Widgets', 63 | link: '/widgets', 64 | }, 65 | ], 66 | 67 | socialLinks: [ 68 | { icon: 'github', link: 'https://github.com/deptyped/vue-telegram' }, 69 | ], 70 | }, 71 | }) 72 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import Theme from 'vitepress/theme' 2 | import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client' 3 | import '@shikijs/vitepress-twoslash/style.css' 4 | import type { EnhanceAppContext } from 'vitepress' 5 | 6 | export default { 7 | extends: Theme, 8 | enhanceApp({ app }: EnhanceAppContext) { 9 | app.use(TwoslashFloatingVue) 10 | }, 11 | } -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | # https://vitepress.dev/reference/default-theme-home-page 3 | layout: home 4 | 5 | hero: 6 | name: vue-tg 7 | tagline: Telegram integration for Vue 8 | actions: 9 | - theme: brand 10 | text: Installation 11 | link: /installation 12 | - theme: alt 13 | text: Telegram Mini Apps 14 | link: /mini-apps 15 | - theme: alt 16 | text: Telegram Widgets 17 | link: /widgets 18 | - theme: alt 19 | text: View on GitHub 20 | link: https://github.com/deptyped/vue-telegram 21 | --- 22 | -------------------------------------------------------------------------------- /docs/mini-apps/components/alert.md: -------------------------------------------------------------------------------- 1 | ### Alert 2 | 3 | A component that shows message in a simple alert with a 'Close' button when is 4 | rendered. 5 | 6 | ```vue 7 | 14 | 15 | 18 | ``` 19 | 20 | #### Props 21 | 22 | | Name | Type | Required | Description | 23 | | ------- | ------ | -------- | ----------------------------------------------------------- | 24 | | message | string | true | The message to be displayed in the body of the alert popup. | 25 | 26 | #### Events 27 | 28 | | Name | Type | Description | 29 | | ----- | ------------ | -------------------------------------- | 30 | | close | `() => void` | Emits when the opened popup is closed. | 31 | -------------------------------------------------------------------------------- /docs/mini-apps/components/back-button.md: -------------------------------------------------------------------------------- 1 | ### BackButton 2 | 3 | A component that enables the back button when is rendered. 4 | 5 | ```vue 6 | 13 | 14 | 17 | ``` 18 | 19 | #### Props 20 | 21 | | Name | Type | Required | Description | 22 | | ------- | ------- | -------- | ------------------------------------------------------------ | 23 | | visible | boolean | false | Shows whether the button is visible. Set to true by default. | 24 | 25 | #### Events 26 | 27 | | Name | Type | Description | 28 | | ----- | ------------ | -------------------------------------- | 29 | | click | `() => void` | Emits when the back button is pressed. | 30 | -------------------------------------------------------------------------------- /docs/mini-apps/components/biometric-manager.md: -------------------------------------------------------------------------------- 1 | ### BiometricManager 2 | 3 | A component that init the biometric manager when is rendered. 4 | 5 | ```vue 6 | 13 | 14 | 17 | ``` 18 | 19 | #### Events 20 | 21 | | Name | Type | Description | 22 | | ---- | ------------ | ----------------------------------------- | 23 | | init | `() => void` | Emits when the biometric manager is init. | 24 | -------------------------------------------------------------------------------- /docs/mini-apps/components/closing-confirmation.md: -------------------------------------------------------------------------------- 1 | ### ClosingConfirmation 2 | 3 | A component that enables the confirmation dialog while the user is trying to close the Mini App. 4 | 5 | ```vue 6 | 9 | 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/mini-apps/components/confirm.md: -------------------------------------------------------------------------------- 1 | ### Confirm 2 | 3 | A component that shows message in a simple confirmation window with 'OK' and 4 | 'Cancel' buttons when is rendered. 5 | 6 | ```vue 7 | 14 | 15 | 18 | ``` 19 | 20 | #### Props 21 | 22 | | Name | Type | Required | Description | 23 | | ------- | ------ | -------- | ------------------------------------------------------------- | 24 | | message | string | true | The message to be displayed in the body of the confirm popup. | 25 | 26 | #### Events 27 | 28 | | Name | Type | Description | 29 | | ----- | ----------------------- | -------------------------------------- | 30 | | close | `(ok: boolean) => void` | Emits when the opened popup is closed. | 31 | -------------------------------------------------------------------------------- /docs/mini-apps/components/expanded-viewport.md: -------------------------------------------------------------------------------- 1 | ### ExpandedViewport 2 | 3 | A component that expands the Mini App to the maximum available height and disable vertical swipes when is rendered. 4 | 5 | ```vue 6 | 9 | 10 | 13 | ``` 14 | 15 | #### Props 16 | 17 | | Name | Type | Required | Description | 18 | | ----- | ------- | -------- | -------------------------------------------------------------------------------------------------------------- | 19 | | force | boolean | false | Expands the viewport despite user interaction. Disables vertical swipes if supported. Set to false by default. | 20 | -------------------------------------------------------------------------------- /docs/mini-apps/components/fullscreen-viewport.md: -------------------------------------------------------------------------------- 1 | ### FullscreenViewport 2 | 3 | A component that expands the Mini App to the entire screen when is rendered. 4 | 5 | ```vue 6 | 9 | 10 | 13 | ``` 14 | -------------------------------------------------------------------------------- /docs/mini-apps/components/main-button.md: -------------------------------------------------------------------------------- 1 | ### MainButton 2 | 3 | A component that enables the main button when is rendered. 4 | 5 | ```vue 6 | 13 | 14 | 17 | ``` 18 | 19 | #### Props 20 | 21 | | Name | Type | Required | Description | 22 | | -------------- | ------- | -------- | ------------------------------------------------------------ | 23 | | visible | boolean | false | Shows whether the button is visible. Set to true by default. | 24 | | disabled | boolean | false | Shows whether the button is disable. | 25 | | progress | boolean | false | Shows whether the button is displaying a loading indicator. | 26 | | text | string | false | | 27 | | color | string | false | | 28 | | textColor | string | false | | 29 | | hasShineEffect | boolean | false | | 30 | 31 | #### Events 32 | 33 | | Name | Type | Description | 34 | | ----- | ------------ | -------------------------------------- | 35 | | click | `() => void` | Emits when the main button is pressed. | 36 | -------------------------------------------------------------------------------- /docs/mini-apps/components/popup.md: -------------------------------------------------------------------------------- 1 | ### Popup 2 | 3 | A component that shows a native popup when is rendered. 4 | 5 | ```vue 6 | 13 | 14 | 17 | ``` 18 | 19 | #### Props 20 | 21 | | Name | Type | Required | Description | 22 | | ------- | --------------------------------------------------------------------- | -------- | ----------------------------------------------------- | 23 | | message | string | true | The message to be displayed in the body of the popup. | 24 | | title | string | false | The text to be displayed in the popup title. | 25 | | buttons | [PopupButton[] ↗](https://core.telegram.org/bots/webapps#popupbutton) | false | List of buttons to be displayed in the popup. | 26 | 27 | #### Events 28 | 29 | | Name | Type | Description | 30 | | ----- | ---------------------------- | -------------------------------------- | 31 | | close | `(buttonId: string) => void` | Emits when the opened popup is closed. | 32 | -------------------------------------------------------------------------------- /docs/mini-apps/components/scan-qr.md: -------------------------------------------------------------------------------- 1 | ### ScanQr 2 | 3 | A component that shows a native popup for scanning a QR code when is rendered. 4 | 5 | ```vue 6 | 13 | 14 | 17 | ``` 18 | 19 | #### Props 20 | 21 | | Name | Type | Required | Description | 22 | | ---- | ------ | -------- | ----------------------------------------------------- | 23 | | text | string | false | The text to be displayed under the 'Scan QR' heading. | 24 | 25 | #### Events 26 | 27 | | Name | Type | Description | 28 | | ------ | ------------------------ | ------------------------------------------------------------- | 29 | | result | `(data: string) => void` | Emits when the QR code scanner catches a code with text data. | 30 | -------------------------------------------------------------------------------- /docs/mini-apps/components/secondary-button.md: -------------------------------------------------------------------------------- 1 | ### SecondaryButton 2 | 3 | A component that enables the secondary button when is rendered. 4 | 5 | ```vue 6 | 13 | 14 | 17 | ``` 18 | 19 | #### Props 20 | 21 | | Name | Type | Required | Description | 22 | | -------------- | ------- | -------- | ------------------------------------------------------------ | 23 | | visible | boolean | false | Shows whether the button is visible. Set to true by default. | 24 | | disabled | boolean | false | Shows whether the button is disable. | 25 | | progress | boolean | false | Shows whether the button is displaying a loading indicator. | 26 | | text | string | false | | 27 | | color | string | false | | 28 | | textColor | string | false | | 29 | | hasShineEffect | boolean | false | | 30 | | position | string | false | | 31 | 32 | #### Events 33 | 34 | | Name | Type | Description | 35 | | ----- | ------------ | -------------------------------------- | 36 | | click | `() => void` | Emits when the main button is pressed. | 37 | -------------------------------------------------------------------------------- /docs/mini-apps/components/settings-button.md: -------------------------------------------------------------------------------- 1 | ### SettingsButton 2 | 3 | A component that enables the settings button when is rendered. 4 | 5 | ```vue 6 | 13 | 14 | 17 | ``` 18 | 19 | #### Props 20 | 21 | | Name | Type | Required | Description | 22 | | ------- | ------- | -------- | ------------------------------------------------------------ | 23 | | visible | boolean | false | Shows whether the button is visible. Set to true by default. | 24 | 25 | #### Events 26 | 27 | | Name | Type | Description | 28 | | ----- | ------------ | ------------------------------------------ | 29 | | click | `() => void` | Emits when the settings button is pressed. | 30 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-back-button.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppBackButton~~ 2 | 3 | ::: danger Deprecated 4 | Use [useBackButton](#usebackbutton) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppBackButton } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Description | 13 | | :-------------------- | :-------------------------------------------------------------------------------------------------- | 14 | | `isBackButtonVisible` |
| 15 | | `showBackButton` | | 16 | | `hideBackButton` | | 17 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-biometric-manager.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppBiometricManager~~ 2 | 3 | ::: danger Deprecated 4 | Use [useBiometricManager](#usebiometricmanager) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppBiometricManager } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :--------------------------- | :---------------------------------------------------------------------------------------------------------------------------- | 14 | | `isBiometricInited` |
| 15 | | `isBiometricAvailable` |
| 16 | | `biometricType` |
| 17 | | `isBiometricAccessRequested` |
| 18 | | `isBiometricAccessGranted` |
| 19 | | `isBiometricTokenSaved` |
| 20 | | `biometricDeviceId` |
| 21 | | `initBiometric` | | 22 | | `requestBiometricAccess` | | 23 | | `authenticateBiometric` | | 24 | | `updateBiometricToken` | | 25 | | `openBiometricSettings` | | 26 | | `onManagerUpdated` | A method that sets the `biometricManagerUpdated` [event handler](#event-handling). | 27 | | `onAuthRequested` | A method that sets the `biometricAuthRequested` [event handler](#event-handling). | 28 | | `onTokenUpdated` | A method that sets the `biometricTokenUpdated` [event handler](#event-handling). | 29 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-clipboard.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppClipboard~~ 2 | 3 | ::: danger Deprecated 4 | Use [useClipboard](#useclipboard) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppClipboard } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :---------------------- | :------------------------------------------------------------ | 14 | | `readTextFromClipboard` | | 15 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-closing-confirmation.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppClosingConfirmation~~ 2 | 3 | ::: danger Deprecated 4 | Use [useMiniApp](#useminiapp) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppClosingConfirmation } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :----------------------------- | :----------------------------------------------------------------------------------------------------------------- | 14 | | `isClosingConfirmationEnabled` |
| 15 | | `enableClosingConfirmation` | | 16 | | `disableClosingConfirmation` | | 17 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-cloud-storage.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppCloudStorage~~ 2 | 3 | ::: danger Deprecated 4 | Use [useCloudStorage](#usecloudstorage) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppCloudStorage } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :------------------- | :-------------------------------------------------------- | 14 | | `setStorageItem` | | 15 | | `getStorageItem` | | 16 | | `getStorageItems` | | 17 | | `removeStorageItem` | | 18 | | `removeStorageItems` | | 19 | | `getStorageKeys` | | 20 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-haptic-feedback.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppHapticFeedback~~ 2 | 3 | ::: danger Deprecated 4 | Use [useHapticFeedback](#usehapticfeedback) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppHapticFeedback } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :--------------------- | :------------------------------------------------------------------- | 14 | | `impactOccurred` | | 15 | | `notificationOccurred` | | 16 | | `selectionChanged` | | 17 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-main-button.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppMainButton~~ 2 | 3 | ::: danger Deprecated 4 | Use [useMainButton](#usemainbutton) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppMainButton } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :---------------------------- | :--------------------------------------------------------------------------------------------------------- | 14 | | `mainButtonText` |
| 15 | | `mainButtonColor` |
| 16 | | `mainButtonTextColor` |
| 17 | | `isMainButtonVisible` |
| 18 | | `isMainButtonActive` |
| 19 | | `isMainButtonProgressVisible` |
| 20 | | `setMainButtonText` | | 21 | | `showMainButton` | | 22 | | `hideMainButton` | | 23 | | `enableMainButton` | | 24 | | `disableMainButton` | | 25 | | `showMainButtonProgress` | | 26 | | `hideMainButtonProgress` | | 27 | | `setMainButtonParams` | | 28 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-navigation.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppNavigation~~ 2 | 3 | ::: danger Deprecated 4 | Use [useMiniApp](#useminiapp) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppNavigation } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :------------------ | :-------------------------------------------------------- | 14 | | `openInvoice` | | 15 | | `openLink` | | 16 | | `openTelegramLink` | | 17 | | `switchInlineQuery` | | 18 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-popup.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppPopup~~ 2 | 3 | ::: danger Deprecated 4 | Use [usePopup](#usepopup) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppPopup } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :------------ | :-------------------------------------------------- | 14 | | `showAlert` | | 15 | | `showConfirm` | | 16 | | `showPopup` | | 17 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-qr-scanner.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppQrScanner~~ 2 | 3 | ::: danger Deprecated 4 | Use [useQrScanner](#useqrscanner) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppQrScanner } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :----------------- | :------------------------------------------------------- | 14 | | `showScanQrPopup` | | 15 | | `closeScanQrPopup` | | 16 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-requests.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppRequests~~ 2 | 3 | ::: danger Deprecated 4 | Use [useMiniApp](#useminiapp) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppRequests } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :------------------- | :--------------------------------------------------------- | 14 | | `requestContact` | | 15 | | `requestWriteAccess` | | 16 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-settings-button.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppSettingsButton~~ 2 | 3 | ::: danger Deprecated 4 | Use [useSettingsButton](#usesettingsbutton) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppSettingsButton } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :------------------------ | :----------------------------------------------------------------------------------------------------- | 14 | | `isSettingsButtonVisible` |
| 15 | | `showSettingsButton` | | 16 | | `hideSettingsButton` | | 17 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-share.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppShare~~ 2 | 3 | ::: danger Deprecated 4 | Use [useMiniApp](#useminiapp) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppShare } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :------------- | :--------------------------------------------------- | 14 | | `shareToStory` | | 15 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-theme.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppTheme~~ 2 | 3 | ::: danger Deprecated 4 | Use [useTheme](#usetheme) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppTheme } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :------------------- | :------------------------------------------------------------------------------------------------------- | 14 | | `colorScheme` |
| 15 | | `themeParams` |
| 16 | | `headerColor` |
| 17 | | `backgroundColor` |
| 18 | | `setHeaderColor` | | 19 | | `setBackgroundColor` | | 20 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app-viewport.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebAppViewport~~ 2 | 3 | ::: danger Deprecated 4 | Use [useViewport](#useviewport) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebAppViewport } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Type | 13 | | :------------------------ | :----------------------------------------------------------------------------------------------------------------- | 14 | | `isExpanded` |
| 15 | | `viewportHeight` |
| 16 | | `viewportStableHeight` |
| 17 | | `isVerticalSwipesEnabled` |
| 18 | | `expand` | | 19 | | `enableVerticalSwipes` | | 20 | | `disableVerticalSwipes` | | 21 | -------------------------------------------------------------------------------- /docs/mini-apps/composables-legacy/use-web-app.md: -------------------------------------------------------------------------------- 1 | ### ~~useWebApp~~ 2 | 3 | ::: danger Deprecated 4 | Use [useMiniApp](#useminiapp) instead. 5 | ::: 6 | 7 | ```ts twoslash 8 | // Hover to inspect type 9 | import { useWebApp } from 'vue-tg' 10 | ``` 11 | 12 | | Name | Description | 13 | | :------------------- | :--------------------------------------------------------------------------------------------------------------------------------- | 14 | | `initData` | | 15 | | `initDataUnsafe` | | 16 | | `version` | | 17 | | `platform` | | 18 | | `isVersionAtLeast` | | 19 | | `sendData` | | 20 | | `ready` | | 21 | | `close` | | 22 | | `isReady` | Boolean indicating if the app is ready.
| 23 | | `isPlatform` | Function to check if the app is running on a specified platform.
| 24 | | `isPlatformUnknown` | Boolean indicating if the platform is unknown.
| 25 | | `isFeatureSupported` | Function to check if a specified feature is supported.
| 26 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-accelerometer.md: -------------------------------------------------------------------------------- 1 | ### useAccelerometer 2 | 3 | ```ts 4 | import { useAccelerometer } from 'vue-tg' 5 | 6 | const accelerometer = useAccelerometer() 7 | ``` 8 | 9 | | Name | Description | 10 | | :----------------- | :--------------------------------------------------------------------------------------------------------------------------- | 11 | | `isStarted` |
| 12 | | `x` |
| 13 | | `y` |
| 14 | | `z` |
| 15 | | `start` |
| 16 | | `onStart` | A method that sets event handler. An alias for onAccelerometerStarted. | 17 | | `onChange` | A method that sets event handler. An alias for onAccelerometerChanged. | 18 | | `onFail` | A method that sets event handler. An alias for onAccelerometerFailed. | 19 | | `stop` |
| 20 | | `onStop` | A method that sets event handler. An alias for onAccelerometerStopped. | 21 | | `version` | | 22 | | `isVersionAtLeast` | | 23 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-back-button.md: -------------------------------------------------------------------------------- 1 | ### useBackButton 2 | 3 | ```ts 4 | import { useBackButton } from 'vue-tg' 5 | 6 | const backButton = useBackButton() 7 | ``` 8 | 9 | | Name | Description | 10 | | :----------------- | :-------------------------------------------------------------------------------------------------- | 11 | | `isVisible` |
| 12 | | `show` | | 13 | | `hide` | | 14 | | `onClick` | | 15 | | `version` | | 16 | | `isVersionAtLeast` | | 17 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-biometric-manager.md: -------------------------------------------------------------------------------- 1 | ### useBiometricManager 2 | 3 | ```ts 4 | import { useBiometricManager } from 'vue-tg' 5 | 6 | const biometricManager = useBiometricManager() 7 | ``` 8 | 9 | | Name | Type | 10 | | :---------------------- | :------------------------------------------------------------------------------------------------------------------------------ | 11 | | `isInited` |
| 12 | | `isBiometricAvailable` |
| 13 | | `biometricType` |
| 14 | | `isAccessRequested` |
| 15 | | `isAccessGranted` |
| 16 | | `isBiometricTokenSaved` |
| 17 | | `deviceId` |
| 18 | | `init` |
| 19 | | `requestAccess` |
| 20 | | `onManagerUpdate` | A method that sets event handler. An alias for onBiometricManagerUpdated. | 21 | | `authenticate` |
| 22 | | `onAuthRequest` | A method that sets event handler. An alias for onBiometricAuthRequested. | 23 | | `updateToken` |
| 24 | | `onTokenUpdate` | A method that sets event handler. An alias for onBiometricTokenUpdated. | 25 | | `openSettings` | | 26 | | `version` | | 27 | | `isVersionAtLeast` | | 28 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-clipboard.md: -------------------------------------------------------------------------------- 1 | ### useClipboard 2 | 3 | ```ts 4 | import { useClipboard } from 'vue-tg' 5 | 6 | const clipboard = useClipboard() 7 | ``` 8 | 9 | | Name | Description | 10 | | :----------------- | :---------------------------------------------------------------------------------------------------------------------------- | 11 | | `readText` |
| 12 | | `onReadText` | A method that sets event handler. An alias for onClipboardTextReceived. | 13 | | `version` | | 14 | | `isVersionAtLeast` | | 15 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-cloud-storage.md: -------------------------------------------------------------------------------- 1 | ### useCloudStorage 2 | 3 | ```ts 4 | import { useCloudStorage } from 'vue-tg' 5 | 6 | const cloudStorage = useCloudStorage() 7 | ``` 8 | 9 | | Name | Type | 10 | | :----------------- | :------------------------------------------------------------------------------------------------- | 11 | | `setItem` |
| 12 | | `getItem` |
| 13 | | `getItems` |
| 14 | | `removeItem` |
| 15 | | `removeItems` |
| 16 | | `getKeys` |
| 17 | | `version` | | 18 | | `isVersionAtLeast` | | 19 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-device-orientation.md: -------------------------------------------------------------------------------- 1 | ### useDeviceOrientation 2 | 3 | ```ts 4 | import { useDeviceOrientation } from 'vue-tg' 5 | 6 | const deviceOrientation = useDeviceOrientation() 7 | ``` 8 | 9 | | Name | Description | 10 | | :----------------- | :------------------------------------------------------------------------------------------------------------------------------- | 11 | | `isStarted` |
| 12 | | `absolute` |
| 13 | | `alpha` |
| 14 | | `beta` |
| 15 | | `gamma` |
| 16 | | `start` |
| 17 | | `onStart` | A method that sets event handler. An alias for onDeviceOrientationStarted. | 18 | | `onChange` | A method that sets event handler. An alias for onDeviceOrientationChanged. | 19 | | `onFail` | A method that sets event handler. An alias for onDeviceOrientationFailed. | 20 | | `stop` |
| 21 | | `onStop` | A method that sets event handler. An alias for onDeviceOrientationStopped. | 22 | | `version` | | 23 | | `isVersionAtLeast` | | 24 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-device-storage.md: -------------------------------------------------------------------------------- 1 | ### useDeviceStorage 2 | 3 | ```ts 4 | import { useDeviceStorage } from 'vue-tg' 5 | 6 | const deviceStorage = useDeviceStorage() 7 | ``` 8 | 9 | | Name | Type | 10 | | :----------------- | :------------------------------------------------------------------------------------------------- | 11 | | `setItem` |
| 12 | | `getItem` |
| 13 | | `removeItem` |
| 14 | | `clear` |
| 15 | | `version` | | 16 | | `isVersionAtLeast` | | 17 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-emoji-status.md: -------------------------------------------------------------------------------- 1 | ### useEmojiStatus 2 | 3 | ```ts 4 | import { useEmojiStatus } from 'vue-tg' 5 | 6 | const emojiStatus = useEmojiStatus() 7 | ``` 8 | 9 | | Name | Description | 10 | | :----------------- | :--------------------------------------------------------------------------------------------------------------------------------- | 11 | | `set` |
| 12 | | `onSet` | A method that sets event handler. An alias for onEmojiStatusSet. | 13 | | `onFail` | A method that sets event handler. An alias for onEmojiStatusFailed. | 14 | | `requestAccess` |
| 15 | | `onAccessRequest` | A method that sets event handler. An alias for onEmojiStatusAccessRequested. | 16 | | `version` | | 17 | | `isVersionAtLeast` | | 18 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-gyroscope.md: -------------------------------------------------------------------------------- 1 | ### useGyroscope 2 | 3 | ```ts 4 | import { useGyroscope } from 'vue-tg' 5 | 6 | const gyroscope = useGyroscope() 7 | ``` 8 | 9 | | Name | Description | 10 | | :----------------- | :----------------------------------------------------------------------------------------------------------------------- | 11 | | `isStarted` |
| 12 | | `x` |
| 13 | | `y` |
| 14 | | `z` |
| 15 | | `start` |
| 16 | | `onStart` | A method that sets event handler. An alias for onGyroscopeStarted. | 17 | | `onChange` | A method that sets event handler. An alias for onGyroscopeChanged. | 18 | | `onFail` | A method that sets event handler. An alias for onGyroscopeFailed. | 19 | | `stop` |
| 20 | | `onStop` | A method that sets event handler. An alias for onGyroscopeStopped. | 21 | | `version` | | 22 | | `isVersionAtLeast` | | 23 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-haptic-feedback.md: -------------------------------------------------------------------------------- 1 | ### useHapticFeedback 2 | 3 | ```ts 4 | import { useHapticFeedback } from 'vue-tg' 5 | 6 | const hapticFeedback = useHapticFeedback() 7 | ``` 8 | 9 | | Name | Description | 10 | | :--------------------- | :------------------------------------------------------------------- | 11 | | `impactOccurred` | | 12 | | `notificationOccurred` | | 13 | | `selectionChanged` | | 14 | | `version` | | 15 | | `isVersionAtLeast` | | 16 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-home-screen.md: -------------------------------------------------------------------------------- 1 | ### useHomeScreen 2 | 3 | ```ts 4 | import { useHomeScreen } from 'vue-tg' 5 | 6 | const homeScreen = useHomeScreen() 7 | ``` 8 | 9 | | Name | Type | 10 | | :-------------------- | :------------------------------------------------------------------------------------------------------------------------ | 11 | | `addShortcut` | | 12 | | `onShortcutAdd` | A method that sets event handler. An alias for onHomeScreenAdded. | 13 | | `checkShortcutStatus` |
| 14 | | `onShortcutCheck` | A method that sets event handler. An alias for onHomeScreenChecked. | 15 | | `version` | | 16 | | `isVersionAtLeast` | | 17 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-location-manager.md: -------------------------------------------------------------------------------- 1 | ### useLocationManager 2 | 3 | ```ts 4 | import { useLocationManager } from 'vue-tg' 5 | 6 | const locationManager = useLocationManager() 7 | ``` 8 | 9 | | Name | Description | 10 | | :-------------------- | :----------------------------------------------------------------------------------------------------------------------------- | 11 | | `isInited` |
| 12 | | `isLocationAvailable` |
| 13 | | `isAccessRequested` |
| 14 | | `isAccessGranted` |
| 15 | | `init` |
| 16 | | `onManagerUpdate` | A method that sets event handler. An alias for onLocationManagerUpdated. | 17 | | `getLocation` |
| 18 | | `onRequest` | A method that sets event handler. An alias for onLocationRequested. | 19 | | `openSettings` | | 20 | | `version` | | 21 | | `isVersionAtLeast` | | 22 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-main-button.md: -------------------------------------------------------------------------------- 1 | ### useMainButton 2 | 3 | ```ts 4 | import { useMainButton } from 'vue-tg' 5 | 6 | const mainButton = useMainButton() 7 | ``` 8 | 9 | | Name | Description | 10 | | :------------------ | :-------------------------------------------------------------------------------------------------------- | 11 | | `text` |
| 12 | | `color` |
| 13 | | `textColor` |
| 14 | | `isVisible` |
| 15 | | `isActive` |
| 16 | | `isProgressVisible` |
| 17 | | `hasShineEffect` |
| 18 | | `show` | | 19 | | `hide` | | 20 | | `enable` | | 21 | | `disable` | | 22 | | `showProgress` | | 23 | | `hideProgress` | | 24 | | `setParams` | | 25 | | `onClick` | | 26 | | `version` | | 27 | | `isVersionAtLeast` | | 28 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-popup.md: -------------------------------------------------------------------------------- 1 | ### usePopup 2 | 3 | ```ts 4 | import { usePopup } from 'vue-tg' 5 | 6 | const popup = usePopup() 7 | ``` 8 | 9 | | Name | Type | 10 | | :----------------- | :------------------------------------------------------------------------------------------------------------------ | 11 | | `showConfirm` |
| 12 | | `showAlert` |
| 13 | | `showPopup` |
| 14 | | `onClose` | A method that sets event handler. An alias for onPopupClosed. | 15 | | `version` | | 16 | | `isVersionAtLeast` | | 17 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-qr-scanner.md: -------------------------------------------------------------------------------- 1 | ### useQrScanner 2 | 3 | ```ts 4 | import { useQrScanner } from 'vue-tg' 5 | 6 | const qrScanner = useQrScanner() 7 | ``` 8 | 9 | | Name | Description | 10 | | :----------------- | :------------------------------------------------------------------------------------------------------------------------ | 11 | | `show` |
| 12 | | `close` | | 13 | | `onScan` | A method that sets event handler. An alias for onQrTextReceived. | 14 | | `onClose` | A method that sets event handler. An alias for onScanQrPopupClosed. | 15 | | `version` | | 16 | | `isVersionAtLeast` | | 17 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-secondary-button.md: -------------------------------------------------------------------------------- 1 | ### useSecondaryButton 2 | 3 | ```ts 4 | import { useSecondaryButton } from 'vue-tg' 5 | 6 | const secondaryButton = useSecondaryButton() 7 | ``` 8 | 9 | | Name | Description | 10 | | :------------------ | :-------------------------------------------------------------------------------------------------------- | 11 | | `text` |
| 12 | | `color` |
| 13 | | `textColor` |
| 14 | | `isVisible` |
| 15 | | `isActive` |
| 16 | | `isProgressVisible` |
| 17 | | `hasShineEffect` |
| 18 | | `position` |
| 19 | | `show` | | 20 | | `hide` | | 21 | | `enable` | | 22 | | `disable` | | 23 | | `showProgress` | | 24 | | `hideProgress` | | 25 | | `setParams` | | 26 | | `onClick` | | 27 | | `version` | | 28 | | `isVersionAtLeast` | | 29 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-secure-storage.md: -------------------------------------------------------------------------------- 1 | ### useSecureStorage 2 | 3 | ```ts 4 | import { useSecureStorage } from 'vue-tg' 5 | 6 | const secureStorage = useSecureStorage() 7 | ``` 8 | 9 | | Name | Type | 10 | | :----------------- | :------------------------------------------------------------------------------------------------- | 11 | | `setItem` |
| 12 | | `getItem` |
| 13 | | `restoreItem` |
| 14 | | `removeItem` |
| 15 | | `clear` |
| 16 | | `version` | | 17 | | `isVersionAtLeast` | | 18 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-settings-button.md: -------------------------------------------------------------------------------- 1 | ### useSettingsButton 2 | 3 | ```ts 4 | import { useSettingsButton } from 'vue-tg' 5 | 6 | const settingsButton = useSettingsButton() 7 | ``` 8 | 9 | | Name | Description | 10 | | :----------------- | :---------------------------------------------------------------------------------------------------- | 11 | | `isVisible` |
| 12 | | `show` | | 13 | | `hide` | | 14 | | `onClick` | | 15 | | `version` | | 16 | | `isVersionAtLeast` | | 17 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-theme.md: -------------------------------------------------------------------------------- 1 | ### useTheme 2 | 3 | ```ts 4 | import { useTheme } from 'vue-tg' 5 | 6 | const theme = useTheme() 7 | ``` 8 | 9 | | Name | Description | 10 | | :----------------- | :------------------------------------------------------------------------------------------------------- | 11 | | `colorScheme` |
| 12 | | `themeParams` |
| 13 | | `headerColor` |
| 14 | | `backgroundColor` |
| 15 | | `bottomBarColor` |
| 16 | | `onChange` | A method that sets event handler. An alias for onThemeChanged. | 17 | | `version` | | 18 | | `isVersionAtLeast` | | 19 | -------------------------------------------------------------------------------- /docs/mini-apps/composables/use-viewport.md: -------------------------------------------------------------------------------- 1 | ### useViewport 2 | 3 | ```ts 4 | import { useViewport } from 'vue-tg' 5 | 6 | const viewport = useViewport() 7 | ``` 8 | 9 | | Name | Description | 10 | | :------------------------ | :----------------------------------------------------------------------------------------------------------------------------- | 11 | | `isExpanded` |
| 12 | | `expand` | | 13 | | `viewportHeight` |
| 14 | | `viewportStableHeight` |
| 15 | | `onChange` | A method that sets event handler. An alias for onViewportChanged. | 16 | | `isFullscreen` |
| 17 | | `onFullscreenChange` | A method that sets event handler. An alias for onFullscreenChanged. | 18 | | `onFullscreenFail` | A method that sets event handler. An alias for onFullscreenFailed. | 19 | | `isOrientationLocked` |
| 20 | | `isVerticalSwipesEnabled` |
| 21 | | `safeAreaInset` |
| 22 | | `onSafeAreaChange` | A method that sets event handler. An alias for onSafeAreaChanged. | 23 | | `contentSafeAreaInset` |
| 24 | | `onContentSafeAreaChange` | A method that sets event handler. An alias for onContentSafeAreaChanged. | 25 | | `version` | | 26 | | `isVersionAtLeast` | | 27 | -------------------------------------------------------------------------------- /docs/widgets.md: -------------------------------------------------------------------------------- 1 | --- 2 | next: false 3 | outline: [2, 3] 4 | --- 5 | 6 | # Widgets 7 | 8 | [Official Telegram Widgets Documentation](https://core.telegram.org/widgets) 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/widgets/discussion-widget.md: -------------------------------------------------------------------------------- 1 | ## Discussion Widget 2 | 3 |
4 | 5 | 6 | [Official documentation](https://core.telegram.org/widgets/discussion) 7 | 8 | A widget to embed discussions from any public channel on your website. 9 | 10 | ```vue 11 | 14 | 15 | 18 | ``` 19 | 20 | #### Props 21 | 22 | | Name | Type | Description | 23 | | -------------- | ------- | --------------------------------------------------------------------------------- | 24 | | url | string | URL of the discussion. | 25 | | comments-limit | number | _Optional._ Limit on the number of comments. | 26 | | height | string | _Optional._ Height of the widget. | 27 | | color | string | _Optional._ Accent color. | 28 | | dark-color | string | _Optional._ Accent color in dark mode. | 29 | | dark | boolean | _Optional._ Indicates whether to use dark mode. | 30 | | colorful | boolean | _Optional._ Indicates whether to use different colors for names. | 31 | | tag | string | _Optional._ Specify a custom HTML-tag to wrap the widget.
Default is "div". | 32 | -------------------------------------------------------------------------------- /docs/widgets/login-widget.md: -------------------------------------------------------------------------------- 1 | ## Login Widget 2 | 3 |
4 | 5 | 6 | [Official documentation](https://core.telegram.org/widgets/login) 7 | 8 | A widget to authorize users on your website. 9 | 10 | ```vue 11 | 19 | 20 | 26 | ``` 27 | 28 | #### Props 29 | 30 | | Name | Type | Description | 31 | | ------------- | ------- | -------------------------------------------------------------------------------------- | 32 | | bot-username | string | Username of the bot. | 33 | | redirect-url | string | _Optional._ URL to redirect to after authentication. | 34 | | size | string | _Optional._ Size of the widget ("large", "medium", "small").
Default is "large". | 35 | | corner-radius | number | _Optional._ Corner radius of the button. | 36 | | user-photo | boolean | _Optional._ Display the user's profile photo. | 37 | | request-write | boolean | _Optional._ Request access to send messages from the bot. | 38 | | tag | string | _Optional._ Specify a custom HTML-tag to wrap the widget.
Default is "div". | 39 | 40 | #### Events 41 | 42 | | Name | Type | Description | 43 | | ---- | --------------------------------- | --------------------------------------------------------------------------------------------------------------- | 44 | | auth | `(user: LoginWidgetUser) => void` | Emits when the user is successfully authorized.
**Note:** does not emit when a redirect URL is specified. | 45 | -------------------------------------------------------------------------------- /docs/widgets/post-widget.md: -------------------------------------------------------------------------------- 1 | ## Post Widget 2 | 3 |
4 | 5 | 6 | [Official documentation](https://core.telegram.org/widgets/post) 7 | 8 | A widget to embed messages from public groups and channels on your website. 9 | 10 | ```vue 11 | 14 | 15 | 18 | ``` 19 | 20 | #### Props 21 | 22 | | Name | Type | Description | 23 | | ------------ | ------- | --------------------------------------------------------------------------------- | 24 | | url | string | URL of the post. | 25 | | width | string | _Optional._ Width of the widget. | 26 | | author-photo | boolean | _Optional._ Display the author's photo. | 27 | | color | string | _Optional._ Accent color. | 28 | | dark-color | string | _Optional._ Accent color in dark mode. | 29 | | dark | boolean | _Optional._ Indicates whether to use dark mode. | 30 | | tag | string | _Optional._ Specify a custom HTML-tag to wrap the widget.
Default is "div". | 31 | -------------------------------------------------------------------------------- /docs/widgets/share-widget.md: -------------------------------------------------------------------------------- 1 | ## Share Widget 2 | 3 |
4 | 5 | 6 | [Official documentation](https://core.telegram.org/widgets/share) 7 | 8 | A widget to let users forward content from your website or app to their friends, channels or Saved Messages on Telegram. 9 | 10 | ```vue 11 | 14 | 15 | 21 | ``` 22 | 23 | #### Props 24 | 25 | | Name | Type | Description | 26 | | -------- | ------- | --------------------------------------------------------------------------------- | 27 | | url | string | URL to share. | 28 | | comment | string | _Optional._ Additional comment to be included with the shared URL. | 29 | | size | string | _Optional._ Size of the widget ("large", "medium").
Default is "medium". | 30 | | no-label | boolean | _Optional._ If set to true, hides the label text on the widget button. | 31 | | tag | string | _Optional._ Specify a custom HTML-tag to wrap the widget.
Default is "div". | 32 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import antfu from '@antfu/eslint-config' 2 | 3 | export default antfu({ 4 | rules: { 5 | 'ts/consistent-type-definitions': 'off', 6 | 'vue/valid-template-root': 'off', 7 | 'vue/require-component-is': 'off', 8 | 'vue/block-order': ['error', { 9 | order: ['template', 'script', 'style'], 10 | }], 11 | }, 12 | ignores: [ 13 | 'docs/**/*', 14 | ], 15 | }) 16 | -------------------------------------------------------------------------------- /src/components/Alert.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 25 | -------------------------------------------------------------------------------- /src/components/BackButton.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 41 | -------------------------------------------------------------------------------- /src/components/BiometricManager.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | -------------------------------------------------------------------------------- /src/components/ClosingConfirmation.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 19 | -------------------------------------------------------------------------------- /src/components/Confirm.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | -------------------------------------------------------------------------------- /src/components/ExpandedViewport.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 37 | -------------------------------------------------------------------------------- /src/components/FullscreenViewport.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 19 | -------------------------------------------------------------------------------- /src/components/MainButton.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 111 | -------------------------------------------------------------------------------- /src/components/Popup.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 33 | -------------------------------------------------------------------------------- /src/components/ScanQr.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 31 | -------------------------------------------------------------------------------- /src/components/SecondaryButton.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 121 | -------------------------------------------------------------------------------- /src/components/SettingsButton.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 43 | -------------------------------------------------------------------------------- /src/composables-legacy/index.ts: -------------------------------------------------------------------------------- 1 | export { useWebApp } from './useWebApp' 2 | export { useWebAppBackButton } from './useWebAppBackButton' 3 | export { useWebAppBiometricManager } from './useWebAppBiometricManager' 4 | export { useWebAppClipboard } from './useWebAppClipboard' 5 | export { useWebAppClosingConfirmation } from './useWebAppClosingConfirmation' 6 | export { useWebAppCloudStorage } from './useWebAppCloudStorage' 7 | export { useWebAppHapticFeedback } from './useWebAppHapticFeedback' 8 | export { useWebAppMainButton } from './useWebAppMainButton' 9 | export { useWebAppNavigation } from './useWebAppNavigation' 10 | export { useWebAppPopup } from './useWebAppPopup' 11 | export { useWebAppQrScanner } from './useWebAppQrScanner' 12 | export { useWebAppRequests } from './useWebAppRequests' 13 | export { useWebAppSendData } from './useWebAppSendData' 14 | export { useWebAppSettingsButton } from './useWebAppSettingsButton' 15 | export { useWebAppShare } from './useWebAppShare' 16 | export { useWebAppTheme } from './useWebAppTheme' 17 | export { useWebAppViewport } from './useWebAppViewport' 18 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebApp.ts: -------------------------------------------------------------------------------- 1 | import { useMiniApp } from '../composables/useMiniApp' 2 | import { onEvent } from '../events' 3 | import { getWebApp } from '../sdk' 4 | 5 | const featureSupportVersion = { 6 | ClosingConfirmation: '6.2', 7 | CloudStorage: '6.9', 8 | RequestWriteAccess: '6.9', 9 | RequestContact: '6.9', 10 | SettingsButton: '7.0', 11 | BiometricManager: '7.2', 12 | DisableVerticalSwipes: '7.7', 13 | } 14 | function isFeatureSupported(name: keyof typeof featureSupportVersion) { 15 | return getWebApp().isVersionAtLeast(featureSupportVersion[name]) 16 | } 17 | 18 | /** 19 | * @deprecated Use [`useMiniApp`](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) instead 20 | */ 21 | export function useWebApp() { 22 | const webApp = getWebApp() 23 | const { 24 | initData, 25 | initDataUnsafe, 26 | version, 27 | isReady, 28 | platform, 29 | isPlatform, 30 | sendData, 31 | ready, 32 | close, 33 | } = useMiniApp('8.0') 34 | 35 | const isPlatformUnknown = isPlatform('unknown') 36 | 37 | const canSendData = !isPlatformUnknown && initData === '' 38 | 39 | return { 40 | initData, 41 | initDataUnsafe, 42 | version, 43 | platform, 44 | isVersionAtLeast: webApp.isVersionAtLeast, 45 | sendData, 46 | ready, 47 | close, 48 | isReady, 49 | isPlatform, 50 | isPlatformUnknown, 51 | isFeatureSupported, 52 | /** 53 | * @deprecated import directly from `vue-tg` instead. 54 | */ 55 | onEvent, 56 | /** 57 | * @deprecated 58 | */ 59 | canSendData, 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppBackButton.ts: -------------------------------------------------------------------------------- 1 | import { useBackButton } from '../composables/useBackButton' 2 | import { onBackButtonClicked } from '../events' 3 | 4 | /** 5 | * @deprecated Use [`useBackButton`](https://vue-tg.deptyped.com/mini-apps.html#usebackbutton) instead 6 | */ 7 | export function useWebAppBackButton() { 8 | const backButton = useBackButton('8.0') 9 | 10 | return { 11 | isBackButtonVisible: backButton.isVisible, 12 | showBackButton: backButton.show, 13 | hideBackButton: backButton.hide, 14 | /** 15 | * @deprecated import directly from `vue-tg` instead. 16 | */ 17 | onBackButtonClicked, 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppBiometricManager.ts: -------------------------------------------------------------------------------- 1 | import { useBiometricManager } from '../composables/useBiometricManager' 2 | import { onBiometricAuthRequested, onBiometricManagerUpdated, onBiometricTokenUpdated } from '../events' 3 | 4 | /** 5 | * @deprecated Use [`useBiometricManager`](https://vue-tg.deptyped.com/mini-apps.html#usebiometricmanager) instead 6 | */ 7 | export function useWebAppBiometricManager() { 8 | const { 9 | isInited, 10 | isBiometricAvailable, 11 | biometricType, 12 | isAccessRequested, 13 | isAccessGranted, 14 | deviceId, 15 | isBiometricTokenSaved, 16 | init, 17 | authenticate, 18 | requestAccess, 19 | openSettings, 20 | updateToken, 21 | } = useBiometricManager('8.0') 22 | 23 | return { 24 | isBiometricInited: isInited, 25 | isBiometricAvailable, 26 | biometricType, 27 | isBiometricAccessRequested: isAccessRequested, 28 | isBiometricAccessGranted: isAccessGranted, 29 | isBiometricTokenSaved, 30 | biometricDeviceId: deviceId, 31 | initBiometric: init, 32 | requestBiometricAccess: requestAccess, 33 | authenticateBiometric: authenticate, 34 | updateBiometricToken: updateToken, 35 | openBiometricSettings: openSettings, 36 | /** 37 | * @deprecated import directly from `vue-tg` instead. 38 | */ 39 | onBiometricManagerUpdated, 40 | /** 41 | * @deprecated import directly from `vue-tg` instead. 42 | */ 43 | onBiometricAuthRequested, 44 | /** 45 | * @deprecated import directly from `vue-tg` instead. 46 | */ 47 | onBiometricTokenUpdated, 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppClipboard.ts: -------------------------------------------------------------------------------- 1 | import { useClipboard } from '../composables/useClipboard' 2 | import { onClipboardTextReceived } from '../events' 3 | 4 | /** 5 | * @deprecated Use [`useClipboard`](https://vue-tg.deptyped.com/mini-apps.html#useclipboard) instead 6 | */ 7 | export function useWebAppClipboard() { 8 | const { readText } = useClipboard('8.0') 9 | 10 | return { 11 | readTextFromClipboard: readText, 12 | /** 13 | * @deprecated import directly from `vue-tg` instead. 14 | */ 15 | onClipboardTextReceived, 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppClosingConfirmation.ts: -------------------------------------------------------------------------------- 1 | import { useMiniApp } from '../composables/useMiniApp' 2 | 3 | /** 4 | * @deprecated Use [`useClosingConfirmation`](https://vue-tg.deptyped.com/mini-apps.html#useclosingconfirmation) instead 5 | */ 6 | export function useWebAppClosingConfirmation() { 7 | const { isClosingConfirmationEnabled } = useMiniApp('8.0') 8 | 9 | return { 10 | isClosingConfirmationEnabled, 11 | enableClosingConfirmation() { 12 | isClosingConfirmationEnabled.value = true 13 | }, 14 | disableClosingConfirmation() { 15 | isClosingConfirmationEnabled.value = false 16 | }, 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppCloudStorage.ts: -------------------------------------------------------------------------------- 1 | import { useCloudStorage } from '../composables/useCloudStorage' 2 | 3 | /** 4 | * @deprecated Use [`useCloudStorage`](https://vue-tg.deptyped.com/mini-apps.html#usecloudstorage) instead 5 | */ 6 | export function useWebAppCloudStorage() { 7 | const cloudStorage = useCloudStorage('8.0') 8 | 9 | return { 10 | setStorageItem: cloudStorage.setItem, 11 | getStorageItem: cloudStorage.getItem, 12 | getStorageItems: cloudStorage.getItems, 13 | removeStorageItem: cloudStorage.removeItem, 14 | removeStorageItems: cloudStorage.removeItems, 15 | getStorageKeys: cloudStorage.getKeys, 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppHapticFeedback.ts: -------------------------------------------------------------------------------- 1 | import { useHapticFeedback } from '../composables/useHapticFeedback' 2 | 3 | /** 4 | * @deprecated Use [`useHapticFeedback`](https://vue-tg.deptyped.com/mini-apps.html#usehapticfeedback) instead 5 | */ 6 | export function useWebAppHapticFeedback() { 7 | const { impactOccurred, notificationOccurred, selectionChanged } = useHapticFeedback('8.0') 8 | 9 | return { 10 | impactOccurred, 11 | notificationOccurred, 12 | selectionChanged, 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppMainButton.ts: -------------------------------------------------------------------------------- 1 | import type { WebApp } from '../sdk' 2 | import { useMainButton } from '../composables/useMainButton' 3 | import { onMainButtonClicked } from '../events' 4 | 5 | /** 6 | * @deprecated Use [`useMainButton`](https://vue-tg.deptyped.com/mini-apps.html#usemainbutton) instead 7 | */ 8 | export function useWebAppMainButton() { 9 | const mainButton = useMainButton('8.0') 10 | 11 | return { 12 | mainButtonText: mainButton.text, 13 | mainButtonColor: mainButton.color, 14 | mainButtonTextColor: mainButton.textColor, 15 | isMainButtonVisible: mainButton.isVisible, 16 | isMainButtonActive: mainButton.isActive, 17 | isMainButtonProgressVisible: mainButton.isProgressVisible, 18 | setMainButtonText(text: Parameters[0]) { 19 | mainButton.text.value = text 20 | }, 21 | showMainButton: mainButton.show, 22 | hideMainButton: mainButton.hide, 23 | enableMainButton: mainButton.enable, 24 | disableMainButton: mainButton.disable, 25 | showMainButtonProgress: mainButton.showProgress, 26 | hideMainButtonProgress: mainButton.hideProgress, 27 | setMainButtonParams: mainButton.setParams, 28 | /** 29 | * @deprecated import directly from `vue-tg` instead. 30 | */ 31 | onMainButtonClicked, 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppNavigation.ts: -------------------------------------------------------------------------------- 1 | import { useMiniApp } from '../composables/useMiniApp' 2 | import { onInvoiceClosed } from '../events' 3 | 4 | /** 5 | * @deprecated Use [`useMiniApp`](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) instead 6 | */ 7 | export function useWebAppNavigation() { 8 | const { switchInlineQuery, openLink, openTelegramLink, openInvoice } = useMiniApp('8.0') 9 | 10 | return { 11 | switchInlineQuery, 12 | openLink, 13 | openTelegramLink, 14 | openInvoice, 15 | /** 16 | * @deprecated import directly from `vue-tg` instead. 17 | */ 18 | onInvoiceClosed, 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppPopup.ts: -------------------------------------------------------------------------------- 1 | import { usePopup } from '../composables/usePopup' 2 | import { onPopupClosed } from '../events' 3 | 4 | /** 5 | * @deprecated Use [`usePopup`](https://vue-tg.deptyped.com/mini-apps.html#usepopup) instead 6 | */ 7 | export function useWebAppPopup() { 8 | const { showPopup, showAlert, showConfirm } = usePopup('8.0') 9 | 10 | return { 11 | showPopup, 12 | showAlert, 13 | showConfirm, 14 | /** 15 | * @deprecated import directly from `vue-tg` instead. 16 | */ 17 | onPopupClosed, 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppQrScanner.ts: -------------------------------------------------------------------------------- 1 | import { useQrScanner } from '../composables/useQrScanner' 2 | import { onQrTextReceived, onScanQrPopupClosed } from '../events' 3 | 4 | /** 5 | * @deprecated Use [`useQrScanner`](https://vue-tg.deptyped.com/mini-apps.html#useqrscanner) instead 6 | */ 7 | export function useWebAppQrScanner() { 8 | const qrScanner = useQrScanner('8.0') 9 | 10 | return { 11 | showScanQrPopup: qrScanner.show, 12 | closeScanQrPopup: qrScanner.close, 13 | /** 14 | * @deprecated import directly from `vue-tg` instead. 15 | */ 16 | onQrTextReceived, 17 | /** 18 | * @deprecated import directly from `vue-tg` instead. 19 | */ 20 | onScanQrPopupClosed, 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppRequests.ts: -------------------------------------------------------------------------------- 1 | import { useMiniApp } from '../composables/useMiniApp' 2 | import { onContactRequested, onWriteAccessRequested } from '../events' 3 | 4 | /** 5 | * @deprecated Use [`useMiniApp`](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) instead 6 | */ 7 | export function useWebAppRequests() { 8 | const { requestContact, requestWriteAccess } = useMiniApp('8.0') 9 | 10 | return { 11 | requestContact, 12 | requestWriteAccess, 13 | /** 14 | * @deprecated import directly from `vue-tg` instead. 15 | */ 16 | onContactRequested, 17 | /** 18 | * @deprecated import directly from `vue-tg` instead. 19 | */ 20 | onWriteAccessRequested, 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppSendData.ts: -------------------------------------------------------------------------------- 1 | import { ref } from 'vue' 2 | import { useMiniApp } from '../composables/useMiniApp' 3 | 4 | /** 5 | * @deprecated 6 | */ 7 | export function useWebAppSendData( 8 | data: D, 9 | options: { 10 | serialize?: (data: D) => string 11 | }, 12 | ) { 13 | const serialize = options.serialize ?? JSON.stringify 14 | 15 | const error = ref('') 16 | const setError = (errorMessage: string) => { 17 | error.value = errorMessage 18 | console.error(errorMessage) 19 | } 20 | 21 | const isLoading = ref(false) 22 | 23 | const { initData, initDataUnsafe, sendData, close } = useMiniApp('8.0') 24 | 25 | return { 26 | error, 27 | isLoading, 28 | execute: () => { 29 | sendData(serialize(data)) 30 | 31 | setTimeout( 32 | () => 33 | setError( 34 | 'Telegram.WebApp.sendData is only available for custom keyboards.', 35 | ), 36 | 1_000, 37 | ) 38 | }, 39 | executeHttp: async ( 40 | callbackUrl: string, 41 | options: { closeAfter?: boolean } = {}, 42 | ) => { 43 | const closeAfter = options.closeAfter ?? true 44 | isLoading.value = true 45 | try { 46 | const response = await fetch(callbackUrl, { 47 | method: 'POST', 48 | body: JSON.stringify({ 49 | initData, 50 | initDataUnsafe, 51 | data: serialize(data), 52 | }), 53 | }) 54 | 55 | if (!response.ok) 56 | setError(`${response.status} ${response.statusText}`) 57 | 58 | if (response.ok && closeAfter) 59 | close() 60 | 61 | return response 62 | } 63 | catch (err) { 64 | setError(String(err)) 65 | } 66 | finally { 67 | isLoading.value = false 68 | } 69 | }, 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppSettingsButton.ts: -------------------------------------------------------------------------------- 1 | import { useSettingsButton } from '../composables/useSettingsButton' 2 | import { onSettingsButtonClicked } from '../events' 3 | 4 | /** 5 | * @deprecated Use [`useSettingsButton`](https://vue-tg.deptyped.com/mini-apps.html#usesettingsbutton) instead 6 | */ 7 | export function useWebAppSettingsButton() { 8 | const settingsButton = useSettingsButton('8.0') 9 | 10 | return { 11 | isSettingsButtonVisible: settingsButton.isVisible, 12 | showSettingsButton: settingsButton.show, 13 | hideSettingsButton: settingsButton.hide, 14 | /** 15 | * @deprecated import directly from `vue-tg` instead. 16 | */ 17 | onSettingsButtonClicked, 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppShare.ts: -------------------------------------------------------------------------------- 1 | import { useMiniApp } from '../composables/useMiniApp' 2 | 3 | /** 4 | * @deprecated Use [`useMiniApp`](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) instead 5 | */ 6 | export function useWebAppShare() { 7 | const { shareToStory } = useMiniApp('8.0') 8 | 9 | return { 10 | shareToStory, 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppTheme.ts: -------------------------------------------------------------------------------- 1 | import type { WebApp } from '../sdk' 2 | import { useTheme } from '../composables/useTheme' 3 | import { onThemeChanged } from '../events' 4 | 5 | /** 6 | * @deprecated Use [`useTheme`](https://vue-tg.deptyped.com/mini-apps.html#usetheme) instead 7 | */ 8 | export function useWebAppTheme() { 9 | const { 10 | colorScheme, 11 | themeParams, 12 | headerColor, 13 | backgroundColor, 14 | } = useTheme('8.0') 15 | 16 | return { 17 | colorScheme, 18 | themeParams, 19 | headerColor, 20 | backgroundColor, 21 | setHeaderColor(color: Parameters[0] | undefined) { 22 | if (color) 23 | headerColor.value = color 24 | }, 25 | setBackgroundColor(color: Parameters[0] | undefined) { 26 | if (color) 27 | backgroundColor.value = color 28 | }, 29 | /** 30 | * @deprecated import directly from `vue-tg` instead. 31 | */ 32 | onThemeChanged, 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/composables-legacy/useWebAppViewport.ts: -------------------------------------------------------------------------------- 1 | import { useViewport } from '../composables/useViewport' 2 | import { onViewportChanged } from '../events' 3 | 4 | /** 5 | * @deprecated Use [`useViewport`](https://vue-tg.deptyped.com/mini-apps.html#useviewport) instead 6 | */ 7 | export function useWebAppViewport() { 8 | const { 9 | isExpanded, 10 | expand, 11 | viewportHeight, 12 | viewportStableHeight, 13 | isVerticalSwipesEnabled, 14 | } = useViewport('8.0') 15 | 16 | return { 17 | isExpanded, 18 | viewportHeight, 19 | viewportStableHeight, 20 | expand, 21 | isVerticalSwipesEnabled, 22 | enableVerticalSwipes() { 23 | isVerticalSwipesEnabled.value = true 24 | }, 25 | disableVerticalSwipes() { 26 | isVerticalSwipesEnabled.value = false 27 | }, 28 | /** 29 | * @deprecated import directly from `vue-tg` instead. 30 | */ 31 | onViewportChanged, 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/composables/useBackButton.ts: -------------------------------------------------------------------------------- 1 | import type { BotApiPrevVersion, BotApiVersion, BotApiVersionRange, LATEST_VERSION, Merge, VersionedReturnType } from '../types' 2 | import { computed, readonly, ref } from 'vue' 3 | import { onBackButtonClicked } from '../events' 4 | import { getWebApp } from '../sdk' 5 | import { defineStore, getHighestVersion, isVersionGreaterOrEqual, wrapFunction } from '../utils' 6 | 7 | type v60 = ReturnType 8 | type v61 = ReturnType 9 | 10 | export type Schema = { 11 | '6.0': Merge, v60> 12 | '6.1': Merge 13 | } 14 | 15 | export type BackButton = 16 | | (Schema['6.0'] & { version: BotApiVersionRange<'6.0', BotApiPrevVersion<'6.1'>> }) 17 | | (Schema['6.1'] & { version: BotApiVersionRange<'6.1', LATEST_VERSION> }) 18 | 19 | const useStore = defineStore(() => { 20 | const webApp = getWebApp() 21 | const isVisible = ref(webApp.BackButton.isVisible) 22 | 23 | const updateState = () => { 24 | isVisible.value = webApp.BackButton.isVisible 25 | } 26 | 27 | return { 28 | webApp, 29 | isVisible, 30 | updateState, 31 | } 32 | }) 33 | 34 | function useBackButton60() { 35 | const { 36 | isVisible, 37 | } = useStore() 38 | 39 | return { 40 | isVisible: readonly(isVisible), 41 | } 42 | } 43 | 44 | function useBackButton61() { 45 | const { 46 | webApp, 47 | isVisible, 48 | updateState, 49 | } = useStore() 50 | 51 | const show = wrapFunction(webApp.BackButton.show, { 52 | hooks: { 53 | after: updateState, 54 | }, 55 | omitReturn: true, 56 | }) 57 | const hide = wrapFunction(webApp.BackButton.hide, { 58 | hooks: { 59 | after: updateState, 60 | }, 61 | omitReturn: true, 62 | }) 63 | 64 | return { 65 | isVisible: computed({ 66 | get() { 67 | return isVisible.value 68 | }, 69 | set(isVisible) { 70 | if (isVisible) 71 | show() 72 | else 73 | hide() 74 | }, 75 | }), 76 | show, 77 | hide, 78 | onClick: onBackButtonClicked, 79 | } 80 | } 81 | 82 | export function useBackButton(baseVersion: Version) { 83 | const { webApp } = useStore() 84 | const version = getHighestVersion(baseVersion, webApp.version) 85 | 86 | return { 87 | version: webApp.version, 88 | isVersionAtLeast: webApp.isVersionAtLeast, 89 | ...useBackButton60(), 90 | ...(isVersionGreaterOrEqual(version, '6.1') && useBackButton61()), 91 | } as VersionedReturnType 92 | } 93 | -------------------------------------------------------------------------------- /src/composables/useClipboard.ts: -------------------------------------------------------------------------------- 1 | import type { WebAppCallback } from '../sdk' 2 | import type { BotApiPrevVersion, BotApiVersion, BotApiVersionRange, LATEST_VERSION, Merge, VersionedReturnType } from '../types' 3 | import { onClipboardTextReceived } from '../events' 4 | import { getWebApp } from '../sdk' 5 | import { defineStore, getHighestVersion, isVersionGreaterOrEqual, promisify } from '../utils' 6 | 7 | type v64 = ReturnType 8 | 9 | export type Schema = { 10 | '6.0': Merge, object> 11 | '6.4': Merge 12 | } 13 | 14 | export type Clipboard = 15 | | (Schema['6.0'] & { version: BotApiVersionRange<'6.0', BotApiPrevVersion<'6.4'>> }) 16 | | (Schema['6.4'] & { version: BotApiVersionRange<'6.4', LATEST_VERSION> }) 17 | 18 | const useStore = defineStore(() => { 19 | const webApp = getWebApp() 20 | 21 | return { 22 | webApp, 23 | } 24 | }) 25 | 26 | function useClipboard64() { 27 | const { 28 | webApp, 29 | } = useStore() 30 | 31 | const readTextFromClipboardAsync = promisify(webApp.readTextFromClipboard) 32 | 33 | function readTextFromClipboard(): ReturnType 34 | function readTextFromClipboard(callback?: WebAppCallback['readTextFromClipboard']): void 35 | function readTextFromClipboard(callback?: WebAppCallback['readTextFromClipboard']): ReturnType | void { 36 | if (callback) 37 | webApp.readTextFromClipboard(callback) 38 | else 39 | return readTextFromClipboardAsync() 40 | } 41 | 42 | return { 43 | readText: readTextFromClipboard, 44 | onReadText: onClipboardTextReceived, 45 | } 46 | } 47 | 48 | export function useClipboard(baseVersion: Version) { 49 | const { webApp } = useStore() 50 | const version = getHighestVersion(baseVersion, webApp.version) 51 | 52 | return { 53 | version: webApp.version, 54 | isVersionAtLeast: webApp.isVersionAtLeast, 55 | ...(isVersionGreaterOrEqual(version, '6.4') && useClipboard64()), 56 | } as VersionedReturnType 57 | } 58 | -------------------------------------------------------------------------------- /src/composables/useDeviceStorage.ts: -------------------------------------------------------------------------------- 1 | import type { DeviceStorageCallback } from '../sdk/device-storage' 2 | import type { BotApiPrevVersion, BotApiVersion, BotApiVersionRange, LATEST_VERSION, Merge, VersionedReturnType } from '../types' 3 | import { getWebApp } from '../sdk' 4 | import { defineStore, getHighestVersion, isVersionGreaterOrEqual, promisify, promisifyWithError } from '../utils' 5 | 6 | type v90 = ReturnType 7 | 8 | export type Schema = { 9 | '6.0': Merge, object> 10 | '9.0': Merge 11 | } 12 | 13 | export type DeviceStorage = 14 | | (Schema['6.0'] & { version: BotApiVersionRange<'6.0', BotApiPrevVersion<'9.0'>> }) 15 | | (Schema['9.0'] & { version: BotApiVersionRange<'9.0', LATEST_VERSION> }) 16 | 17 | const useStore = defineStore(() => { 18 | const webApp = getWebApp() 19 | 20 | return { 21 | webApp, 22 | } 23 | }) 24 | 25 | function useDeviceStorage90() { 26 | const { 27 | webApp, 28 | } = useStore() 29 | 30 | const setItemAsync = promisifyWithError(webApp.DeviceStorage.setItem) 31 | 32 | function setItem(key: string, value: string): ReturnType 33 | function setItem(key: string, value: string, callback?: DeviceStorageCallback['setItem']): void 34 | function setItem(key: string, value: string, callback?: DeviceStorageCallback['setItem']): ReturnType | void { 35 | if (callback) 36 | webApp.DeviceStorage.setItem(key, value, callback) 37 | else 38 | return setItemAsync(key, value) 39 | } 40 | 41 | const getItemAsync = promisifyWithError(webApp.DeviceStorage.getItem) 42 | 43 | function getItem(key: string): ReturnType 44 | function getItem(key: string, callback?: DeviceStorageCallback['getItem']): void 45 | function getItem(key: string, callback?: DeviceStorageCallback['getItem']): ReturnType | void { 46 | if (callback) 47 | webApp.DeviceStorage.getItem(key, callback) 48 | else 49 | return getItemAsync(key) 50 | } 51 | 52 | const removeItemAsync = promisifyWithError(webApp.DeviceStorage.removeItem) 53 | 54 | function removeItem(key: string): ReturnType 55 | function removeItem(key: string, callback?: DeviceStorageCallback['removeItem']): void 56 | function removeItem(key: string, callback?: DeviceStorageCallback['removeItem']): ReturnType | void { 57 | if (callback) 58 | webApp.DeviceStorage.removeItem(key, callback) 59 | else 60 | return removeItemAsync(key) 61 | } 62 | 63 | const clearAsync = promisify(webApp.DeviceStorage.clear) 64 | 65 | function clear(): ReturnType 66 | function clear(callback?: DeviceStorageCallback['clear']): void 67 | function clear(callback?: DeviceStorageCallback['clear']): ReturnType | void { 68 | if (callback) 69 | webApp.DeviceStorage.clear(callback) 70 | else 71 | return clearAsync() 72 | } 73 | 74 | return { 75 | setItem, 76 | getItem, 77 | removeItem, 78 | clear, 79 | } 80 | } 81 | 82 | export function useDeviceStorage(baseVersion: Version) { 83 | const { webApp } = useStore() 84 | const version = getHighestVersion(baseVersion, webApp.version) 85 | 86 | return { 87 | version: webApp.version, 88 | isVersionAtLeast: webApp.isVersionAtLeast, 89 | ...(isVersionGreaterOrEqual(version, '9.0') && useDeviceStorage90()), 90 | } as VersionedReturnType 91 | } 92 | -------------------------------------------------------------------------------- /src/composables/useEmojiStatus.ts: -------------------------------------------------------------------------------- 1 | import type { EmojiStatusParams, WebAppCallback } from '../sdk' 2 | import type { 3 | BotApiPrevVersion, 4 | BotApiVersion, 5 | BotApiVersionRange, 6 | LATEST_VERSION, 7 | Merge, 8 | VersionedReturnType, 9 | } from '../types' 10 | import { onEmojiStatusAccessRequested, onEmojiStatusFailed, onEmojiStatusSet } from '../events' 11 | import { getWebApp } from '../sdk' 12 | import { defineStore, getHighestVersion, isVersionGreaterOrEqual, promisify } from '../utils' 13 | 14 | type v80 = ReturnType 15 | 16 | export type Schema = { 17 | '6.0': Merge, object> 18 | '8.0': Merge 19 | } 20 | 21 | export type EmojiStatus = 22 | | (Schema['6.0'] & { version: BotApiVersionRange<'6.0', BotApiPrevVersion<'8.0'>> }) 23 | | (Schema['8.0'] & { version: BotApiVersionRange<'8.0', LATEST_VERSION> }) 24 | 25 | const useStore = defineStore(() => { 26 | const webApp = getWebApp() 27 | 28 | return { 29 | webApp, 30 | } 31 | }) 32 | 33 | function useEmojiStatus80() { 34 | const { 35 | webApp, 36 | } = useStore() 37 | 38 | const setEmojiStatusAsync = promisify(webApp.setEmojiStatus) 39 | 40 | function setEmojiStatus(custom_emoji_id: string, params: EmojiStatusParams): ReturnType 41 | function setEmojiStatus(custom_emoji_id: string, params: EmojiStatusParams, callback?: WebAppCallback['setEmojiStatus']): void 42 | function setEmojiStatus(custom_emoji_id: string, params: EmojiStatusParams, callback?: WebAppCallback['setEmojiStatus']): ReturnType | void { 43 | if (callback) 44 | webApp.setEmojiStatus(custom_emoji_id, params, callback) 45 | else 46 | return setEmojiStatusAsync(custom_emoji_id, params) 47 | } 48 | 49 | const requestEmojiStatusAccessAsync = promisify(webApp.requestEmojiStatusAccess) 50 | 51 | function requestEmojiStatusAccess(): ReturnType 52 | function requestEmojiStatusAccess(callback?: WebAppCallback['requestEmojiStatusAccess']): void 53 | function requestEmojiStatusAccess(callback?: WebAppCallback['requestEmojiStatusAccess']): ReturnType | void { 54 | if (callback) 55 | webApp.requestEmojiStatusAccess(callback) 56 | else 57 | return requestEmojiStatusAccessAsync() 58 | } 59 | 60 | return { 61 | set: setEmojiStatus, 62 | requestAccess: requestEmojiStatusAccess, 63 | onSet: onEmojiStatusSet, 64 | onFail: onEmojiStatusFailed, 65 | onAccessRequest: onEmojiStatusAccessRequested, 66 | } 67 | } 68 | 69 | export function useEmojiStatus(baseVersion: Version) { 70 | const { webApp } = useStore() 71 | const version = getHighestVersion(baseVersion, webApp.version) 72 | 73 | return { 74 | version: webApp.version, 75 | isVersionAtLeast: webApp.isVersionAtLeast, 76 | ...(isVersionGreaterOrEqual(version, '8.0') && useEmojiStatus80()), 77 | } as VersionedReturnType 78 | } 79 | -------------------------------------------------------------------------------- /src/composables/useHapticFeedback.ts: -------------------------------------------------------------------------------- 1 | import type { BotApiPrevVersion, BotApiVersion, BotApiVersionRange, LATEST_VERSION, Merge, VersionedReturnType } from '../types' 2 | import { getWebApp } from '../sdk' 3 | import { defineStore, getHighestVersion, isVersionGreaterOrEqual, wrapFunction } from '../utils' 4 | 5 | export type v61 = ReturnType 6 | 7 | export type Schema = { 8 | '6.0': Merge, object> 9 | '6.1': Merge 10 | } 11 | 12 | export type HapticFeedback = 13 | | (Schema['6.0'] & { version: BotApiVersionRange<'6.0', BotApiPrevVersion<'6.1'>> }) 14 | | (Schema['6.1'] & { version: BotApiVersionRange<'6.1', LATEST_VERSION> }) 15 | 16 | const useStore = defineStore(() => { 17 | const webApp = getWebApp() 18 | 19 | return { 20 | webApp, 21 | } 22 | }) 23 | 24 | function useHapticFeedback61() { 25 | const { 26 | webApp, 27 | } = useStore() 28 | 29 | const impactOccurred = wrapFunction(webApp.HapticFeedback.impactOccurred, { 30 | omitReturn: true, 31 | }) 32 | const notificationOccurred = wrapFunction(webApp.HapticFeedback.notificationOccurred, { 33 | omitReturn: true, 34 | }) 35 | const selectionChanged = wrapFunction(webApp.HapticFeedback.selectionChanged, { 36 | omitReturn: true, 37 | }) 38 | 39 | return { 40 | impactOccurred, 41 | notificationOccurred, 42 | selectionChanged, 43 | } 44 | } 45 | 46 | export function useHapticFeedback(baseVersion: Version) { 47 | const { webApp } = useStore() 48 | const version = getHighestVersion(baseVersion, webApp.version) 49 | 50 | return { 51 | version: webApp.version, 52 | isVersionAtLeast: webApp.isVersionAtLeast, 53 | ...(isVersionGreaterOrEqual(version, '6.1') && useHapticFeedback61()), 54 | } as VersionedReturnType 55 | } 56 | -------------------------------------------------------------------------------- /src/composables/useHomeScreen.ts: -------------------------------------------------------------------------------- 1 | import type { WebAppCallback } from '../sdk' 2 | import type { 3 | BotApiPrevVersion, 4 | BotApiVersion, 5 | BotApiVersionRange, 6 | LATEST_VERSION, 7 | Merge, 8 | VersionedReturnType, 9 | } from '../types' 10 | import { onHomeScreenAdded, onHomeScreenChecked } from '../events' 11 | import { getWebApp } from '../sdk' 12 | import { defineStore, getHighestVersion, isVersionGreaterOrEqual, promisify } from '../utils' 13 | 14 | type v80 = ReturnType 15 | 16 | export type Schema = { 17 | '6.0': Merge, object> 18 | '8.0': Merge 19 | } 20 | 21 | export type HomeScreen = 22 | | (Schema['6.0'] & { version: BotApiVersionRange<'6.0', BotApiPrevVersion<'8.0'>> }) 23 | | (Schema['8.0'] & { version: BotApiVersionRange<'8.0', LATEST_VERSION> }) 24 | 25 | const useStore = defineStore(() => { 26 | const webApp = getWebApp() 27 | 28 | return { 29 | webApp, 30 | } 31 | }) 32 | 33 | function useHomeScreen80() { 34 | const { 35 | webApp, 36 | } = useStore() 37 | 38 | const checkHomeScreenStatusAsync = promisify(webApp.checkHomeScreenStatus) 39 | 40 | function checkHomeScreenStatus(): ReturnType 41 | function checkHomeScreenStatus(callback?: WebAppCallback['checkHomeScreenStatus']): void 42 | function checkHomeScreenStatus(callback?: WebAppCallback['checkHomeScreenStatus']): ReturnType | void { 43 | if (callback) 44 | webApp.checkHomeScreenStatus(callback) 45 | else 46 | return checkHomeScreenStatusAsync() 47 | } 48 | 49 | return { 50 | addShortcut: webApp.addToHomeScreen, 51 | checkShortcutStatus: checkHomeScreenStatus, 52 | onShortcutAdd: onHomeScreenAdded, 53 | onShortcutCheck: onHomeScreenChecked, 54 | } 55 | } 56 | 57 | export function useHomeScreen(baseVersion: Version) { 58 | const { webApp } = useStore() 59 | const version = getHighestVersion(baseVersion, webApp.version) 60 | 61 | return { 62 | version: webApp.version, 63 | isVersionAtLeast: webApp.isVersionAtLeast, 64 | ...(isVersionGreaterOrEqual(version, '8.0') && useHomeScreen80()), 65 | } as VersionedReturnType 66 | } 67 | -------------------------------------------------------------------------------- /src/composables/usePopup.ts: -------------------------------------------------------------------------------- 1 | import type { PopupParams, WebAppCallback } from '../sdk' 2 | import type { 3 | BotApiPrevVersion, 4 | BotApiVersion, 5 | BotApiVersionRange, 6 | LATEST_VERSION, 7 | Merge, 8 | VersionedReturnType, 9 | } from '../types' 10 | import { onPopupClosed } from '../events' 11 | import { getWebApp } from '../sdk' 12 | import { defineStore, getHighestVersion, isVersionGreaterOrEqual, promisify, promisifyWithNoData } from '../utils' 13 | 14 | type v62 = ReturnType 15 | 16 | export type Schema = { 17 | '6.0': Merge, object> 18 | '6.2': Merge 19 | } 20 | 21 | export type Popup = 22 | | (Schema['6.0'] & { version: BotApiVersionRange<'6.0', BotApiPrevVersion<'6.2'>> }) 23 | | (Schema['6.2'] & { version: BotApiVersionRange<'6.2', LATEST_VERSION> }) 24 | 25 | const useStore = defineStore(() => { 26 | const webApp = getWebApp() 27 | 28 | return { 29 | webApp, 30 | } 31 | }) 32 | 33 | function usePopup62() { 34 | const { 35 | webApp, 36 | } = useStore() 37 | 38 | const showConfirmAsync = promisify(webApp.showConfirm) 39 | 40 | function showConfirm(message: string): ReturnType 41 | function showConfirm(message: string, callback?: WebAppCallback['showConfirm']): void 42 | function showConfirm(message: string, callback?: WebAppCallback['showConfirm']): ReturnType | void { 43 | if (callback) 44 | webApp.showConfirm(message, callback) 45 | else 46 | return showConfirmAsync(message) 47 | } 48 | 49 | const showAlertAsync = promisifyWithNoData(webApp.showAlert) 50 | 51 | function showAlert(message: string): ReturnType 52 | function showAlert(message: string, callback?: WebAppCallback['showAlert']): void 53 | function showAlert(message: string, callback?: WebAppCallback['showAlert']): ReturnType | void { 54 | if (callback) 55 | webApp.showAlert(message, callback) 56 | else 57 | return showAlertAsync(message) 58 | } 59 | 60 | const showPopupAsync = promisify(webApp.showPopup) 61 | 62 | function showPopup(params: PopupParams): ReturnType 63 | function showPopup(params: PopupParams, callback?: WebAppCallback['showPopup']): void 64 | function showPopup(params: PopupParams, callback?: WebAppCallback['showPopup']): ReturnType | void { 65 | if (callback) 66 | webApp.showPopup(params, callback) 67 | else 68 | return showPopupAsync(params) 69 | } 70 | 71 | return { 72 | showConfirm, 73 | showAlert, 74 | showPopup, 75 | onClose: onPopupClosed, 76 | } 77 | } 78 | 79 | export function usePopup(baseVersion: Version) { 80 | const { webApp } = useStore() 81 | const version = getHighestVersion(baseVersion, webApp.version) 82 | 83 | return { 84 | version: webApp.version, 85 | isVersionAtLeast: webApp.isVersionAtLeast, 86 | ...(isVersionGreaterOrEqual(version, '6.2') && usePopup62()), 87 | } as VersionedReturnType 88 | } 89 | -------------------------------------------------------------------------------- /src/composables/useQrScanner.ts: -------------------------------------------------------------------------------- 1 | import type { ScanQrPopupParams, WebAppCallback } from '../sdk' 2 | import type { BotApiPrevVersion, BotApiVersion, BotApiVersionRange, LATEST_VERSION, Merge, VersionedReturnType } from '../types' 3 | import { onQrTextReceived, onScanQrPopupClosed } from '../events' 4 | import { getWebApp } from '../sdk' 5 | import { defineStore, getHighestVersion, isVersionGreaterOrEqual, promisify } from '../utils' 6 | 7 | type v64 = ReturnType 8 | type v77 = ReturnType 9 | 10 | export type Schema = { 11 | '6.0': Merge, object> 12 | '6.4': Merge 13 | '7.7': Merge 14 | } 15 | 16 | export type QrScanner = 17 | | (Schema['6.0'] & { version: BotApiVersionRange<'6.0', BotApiPrevVersion<'6.4'>> }) 18 | | (Schema['6.4'] & { version: BotApiVersionRange<'6.4', BotApiPrevVersion<'7.7'>> }) 19 | | (Schema['7.7'] & { version: BotApiVersionRange<'7.7', LATEST_VERSION> }) 20 | 21 | const useStore = defineStore(() => { 22 | const webApp = getWebApp() 23 | 24 | return { 25 | webApp, 26 | } 27 | }) 28 | 29 | function useQrScanner64() { 30 | const { 31 | webApp, 32 | } = useStore() 33 | 34 | const showScanQrPopupAsync = promisify(webApp.showScanQrPopup) 35 | 36 | function showScanQrPopup(params: ScanQrPopupParams): ReturnType 37 | function showScanQrPopup(params: ScanQrPopupParams, callback?: WebAppCallback['showScanQrPopup']): void 38 | function showScanQrPopup(params: ScanQrPopupParams, callback?: WebAppCallback['showScanQrPopup']): ReturnType | void { 39 | if (callback) 40 | webApp.showScanQrPopup(params, callback) 41 | else 42 | return showScanQrPopupAsync(params) 43 | } 44 | 45 | return { 46 | show: showScanQrPopup, 47 | close: webApp.closeScanQrPopup, 48 | onScan: onQrTextReceived, 49 | } 50 | } 51 | 52 | function useQrScanner77() { 53 | return { 54 | onClose: onScanQrPopupClosed, 55 | } 56 | } 57 | 58 | export function useQrScanner(baseVersion: Version) { 59 | const { webApp } = useStore() 60 | const version = getHighestVersion(baseVersion, webApp.version) 61 | 62 | return { 63 | version: webApp.version, 64 | isVersionAtLeast: webApp.isVersionAtLeast, 65 | ...(isVersionGreaterOrEqual(version, '6.4') && useQrScanner64()), 66 | ...(isVersionGreaterOrEqual(version, '7.7') && useQrScanner77()), 67 | } as VersionedReturnType 68 | } 69 | -------------------------------------------------------------------------------- /src/composables/useSettingsButton.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | BotApiPrevVersion, 3 | BotApiVersion, 4 | BotApiVersionRange, 5 | LATEST_VERSION, 6 | Merge, 7 | VersionedReturnType, 8 | } from '../types' 9 | import { computed, readonly, ref } from 'vue' 10 | import { onSettingsButtonClicked } from '../events' 11 | import { getWebApp } from '../sdk' 12 | import { defineStore, getHighestVersion, isVersionGreaterOrEqual, wrapFunction } from '../utils' 13 | 14 | type v60 = ReturnType 15 | type v70 = ReturnType 16 | 17 | export type Schema = { 18 | '6.0': Merge, v60> 19 | '7.0': Merge 20 | } 21 | 22 | export type SettingsButton = 23 | | (Schema['6.0'] & { version: BotApiVersionRange<'6.0', BotApiPrevVersion<'7.0'>> }) 24 | | (Schema['7.0'] & { version: BotApiVersionRange<'7.0', LATEST_VERSION> }) 25 | 26 | const useStore = defineStore(() => { 27 | const webApp = getWebApp() 28 | const isVisible = ref(webApp.SettingsButton.isVisible) 29 | 30 | const updateState = () => { 31 | isVisible.value = webApp.SettingsButton.isVisible 32 | } 33 | 34 | return { 35 | webApp, 36 | isVisible, 37 | updateState, 38 | } 39 | }) 40 | 41 | function useSettingsButton60() { 42 | const { 43 | isVisible, 44 | } = useStore() 45 | 46 | return { 47 | isVisible: readonly(isVisible), 48 | } 49 | } 50 | 51 | function useSettingsButton70() { 52 | const { 53 | webApp, 54 | isVisible, 55 | updateState, 56 | } = useStore() 57 | 58 | const show = wrapFunction(webApp.SettingsButton.show, { 59 | hooks: { 60 | after: updateState, 61 | }, 62 | omitReturn: true, 63 | }) 64 | const hide = wrapFunction(webApp.SettingsButton.hide, { 65 | hooks: { 66 | after: updateState, 67 | }, 68 | omitReturn: true, 69 | }) 70 | 71 | return { 72 | isVisible: computed({ 73 | get() { 74 | return isVisible.value 75 | }, 76 | set(isVisible) { 77 | if (isVisible) 78 | show() 79 | else 80 | hide() 81 | }, 82 | }), 83 | show, 84 | hide, 85 | onClick: onSettingsButtonClicked, 86 | } 87 | } 88 | 89 | export function useSettingsButton(baseVersion: Version) { 90 | const { webApp } = useStore() 91 | const version = getHighestVersion(baseVersion, webApp.version) 92 | 93 | return { 94 | version: webApp.version, 95 | isVersionAtLeast: webApp.isVersionAtLeast, 96 | ...useSettingsButton60(), 97 | ...(isVersionGreaterOrEqual(version, '7.0') && useSettingsButton70()), 98 | } as VersionedReturnType 99 | } 100 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue' 2 | 3 | import Alert from './components/Alert.vue' 4 | import BackButton from './components/BackButton.vue' 5 | import BiometricManager from './components/BiometricManager.vue' 6 | import ClosingConfirmation from './components/ClosingConfirmation.vue' 7 | import Confirm from './components/Confirm.vue' 8 | import ExpandedViewport from './components/ExpandedViewport.vue' 9 | import FullscreenViewport from './components/FullscreenViewport.vue' 10 | import MainButton from './components/MainButton.vue' 11 | import Popup from './components/Popup.vue' 12 | import ScanQr from './components/ScanQr.vue' 13 | import SecondaryButton from './components/SecondaryButton.vue' 14 | import SettingsButton from './components/SettingsButton.vue' 15 | import DiscussionWidget from './widgets/DiscussionWidget.vue' 16 | import LoginWidget from './widgets/LoginWidget.vue' 17 | import PostWidget from './widgets/PostWidget.vue' 18 | import ShareWidget from './widgets/ShareWidget.vue' 19 | 20 | export * from './composables-legacy' 21 | export { isVersionAtLeast } from './composables/useMiniApp' 22 | export * from './events' 23 | export type { LoginWidgetUser } from './types' 24 | 25 | export * from './versions/6.0' 26 | 27 | export { 28 | Alert, 29 | BackButton, 30 | BiometricManager, 31 | ClosingConfirmation, 32 | Confirm, 33 | DiscussionWidget, 34 | ExpandedViewport, 35 | FullscreenViewport, 36 | LoginWidget, 37 | MainButton, 38 | Popup, 39 | PostWidget, 40 | ScanQr, 41 | SecondaryButton, 42 | SettingsButton, 43 | ShareWidget, 44 | } 45 | 46 | const plugin = { 47 | install(Vue: App) { 48 | Vue.component('TgAlert', Alert) 49 | Vue.component('TgBackButton', BackButton) 50 | Vue.component('TgBiometricManager', BiometricManager) 51 | Vue.component('TgClosingConfirmation', ClosingConfirmation) 52 | Vue.component('TgConfirm', Confirm) 53 | Vue.component('TgExpandedViewport', ExpandedViewport) 54 | Vue.component('TgFullscreenViewport', FullscreenViewport) 55 | Vue.component('TgMainButton', MainButton) 56 | Vue.component('TgPopup', Popup) 57 | Vue.component('TgScanQr', ScanQr) 58 | Vue.component('TgSecondaryButton', SecondaryButton) 59 | Vue.component('TgSettingsButton', SettingsButton) 60 | Vue.component('TgShareWidget', ShareWidget) 61 | Vue.component('TgPostWidget', PostWidget) 62 | Vue.component('TgLoginWidget', LoginWidget) 63 | Vue.component('TgDiscussionWidget', DiscussionWidget) 64 | }, 65 | } 66 | 67 | declare module '@vue/runtime-core' { 68 | export interface GlobalComponents { 69 | TgAlert: typeof Alert 70 | TgBackButton: typeof BackButton 71 | TgBiometricManager: typeof BiometricManager 72 | TgClosingConfirmation: typeof ClosingConfirmation 73 | TgConfirm: typeof Confirm 74 | TgExpandedViewport: typeof ExpandedViewport 75 | TgFullscreenViewport: typeof FullscreenViewport 76 | TgMainButton: typeof MainButton 77 | TgPopup: typeof Popup 78 | TgScanQr: typeof ScanQr 79 | TgSecondaryButton: typeof SecondaryButton 80 | TgSettingsButton: typeof SettingsButton 81 | TgShareWidget: typeof ShareWidget 82 | TgPostWidget: typeof PostWidget 83 | TgLoginWidget: typeof LoginWidget 84 | TgDiscussionWidget: typeof DiscussionWidget 85 | } 86 | } 87 | 88 | export { plugin as VueTelegramPlugin } 89 | -------------------------------------------------------------------------------- /src/sdk/accelerometer.ts: -------------------------------------------------------------------------------- 1 | export type Accelerometer = { 2 | isStarted: boolean 3 | x: number 4 | y: number 5 | z: number 6 | start: ( 7 | params: AccelerometerStartParams, 8 | callback?: AccelerometerCallback['start'] 9 | ) => Accelerometer 10 | stop: (callback?: AccelerometerCallback['stop']) => Accelerometer 11 | } 12 | 13 | export type AccelerometerStartParams = { 14 | refresh_rate?: number 15 | } 16 | 17 | export type AccelerometerCallback = { 18 | start: (success: boolean) => void 19 | stop: (success: boolean) => void 20 | } 21 | -------------------------------------------------------------------------------- /src/sdk/back-button.ts: -------------------------------------------------------------------------------- 1 | import type { EventCallback } from './events' 2 | 3 | export type BackButton = { 4 | isVisible: boolean 5 | onClick: (callback: EventCallback['backButtonClicked']) => BackButton 6 | offClick: (callback: EventCallback['backButtonClicked']) => BackButton 7 | show: () => BackButton 8 | hide: () => BackButton 9 | } 10 | -------------------------------------------------------------------------------- /src/sdk/biometric-manager.ts: -------------------------------------------------------------------------------- 1 | export type BiometricManager = { 2 | isInited: boolean 3 | isBiometricAvailable: boolean 4 | biometricType: 'finger' | 'face' | 'unknown' 5 | isAccessRequested: boolean 6 | isAccessGranted: boolean 7 | isBiometricTokenSaved: boolean 8 | deviceId: string 9 | init: (callback?: BiometricManagerCallback['init']) => BiometricManager 10 | requestAccess: ( 11 | params: BiometricRequestAccessParams, 12 | callback?: BiometricManagerCallback['requestAccess'] 13 | ) => BiometricManager 14 | authenticate: ( 15 | params: BiometricAuthenticateParams, 16 | callback?: BiometricManagerCallback['authenticate'] 17 | ) => BiometricManager 18 | updateBiometricToken: ( 19 | token: string, 20 | callback?: BiometricManagerCallback['updateBiometricToken'] 21 | ) => BiometricManager 22 | openSettings: () => BiometricManager 23 | } 24 | 25 | export type BiometricManagerCallback = { 26 | init: () => void 27 | requestAccess: (isGranted: boolean) => void 28 | authenticate: (isAuthenticated: boolean, token?: string) => void 29 | updateBiometricToken: (isUpdated: boolean) => void 30 | } 31 | 32 | export type BiometricRequestAccessParams = { 33 | reason?: string 34 | } 35 | 36 | export type BiometricAuthenticateParams = { 37 | reason?: string 38 | } 39 | -------------------------------------------------------------------------------- /src/sdk/bottom-button.ts: -------------------------------------------------------------------------------- 1 | import type { EventCallback } from './events' 2 | 3 | export type BottomButton = { 4 | readonly type: 'main' | 'secondary' 5 | text: string 6 | color: string 7 | textColor: string 8 | isVisible: boolean 9 | isActive: boolean 10 | hasShineEffect: boolean 11 | position?: 'left' | 'right' | 'top' | 'bottom' 12 | readonly isProgressVisible: boolean 13 | setText: (text: string) => BottomButton 14 | onClick: (callback: EventCallback['mainButtonClicked']) => BottomButton 15 | offClick: (callback: EventCallback['mainButtonClicked']) => BottomButton 16 | show: () => BottomButton 17 | hide: () => BottomButton 18 | enable: () => BottomButton 19 | disable: () => BottomButton 20 | showProgress: (leaveActive?: boolean) => BottomButton 21 | hideProgress: () => BottomButton 22 | setParams: (params: { 23 | text?: string 24 | color?: string 25 | text_color?: string 26 | has_shine_effect?: boolean 27 | position?: 'left' | 'right' | 'top' | 'bottom' 28 | is_active?: boolean 29 | is_visible?: boolean 30 | }) => BottomButton 31 | } 32 | -------------------------------------------------------------------------------- /src/sdk/cloud-storage.ts: -------------------------------------------------------------------------------- 1 | export type CloudStorage = { 2 | setItem: (key: string, value: string, callback?: CloudStorageCallback['setItem']) => CloudStorage 3 | getItem: (key: string, callback: CloudStorageCallback['getItem']) => CloudStorage 4 | getItems: (keys: string[], callback: CloudStorageCallback['getItems']) => CloudStorage 5 | removeItem: (key: string, callback?: CloudStorageCallback['removeItem']) => CloudStorage 6 | removeItems: (keys: string[], callback?: CloudStorageCallback['removeItems']) => CloudStorage 7 | getKeys: (callback: CloudStorageCallback['getKeys']) => CloudStorage 8 | } 9 | 10 | export type CloudStorageCallback = { 11 | setItem: (error: string | null, success: null | true) => void 12 | getItem: (error: string | null, value: null | string) => void 13 | getItems: (error: string | null, values: null | Record) => void 14 | removeItem: (error: string | null, success: null | true) => void 15 | removeItems: (error: string | null, success: null | true) => void 16 | getKeys: (error: string | null, keys: null | string[]) => void 17 | } 18 | -------------------------------------------------------------------------------- /src/sdk/device-orientation.ts: -------------------------------------------------------------------------------- 1 | export type DeviceOrientation = { 2 | isStarted: boolean 3 | absolute: boolean 4 | alpha: number 5 | beta: number 6 | gamma: number 7 | start: ( 8 | params: DeviceOrientationStartParams, 9 | callback?: DeviceOrientationCallback['start'] 10 | ) => DeviceOrientation 11 | stop: (callback?: DeviceOrientationCallback['stop']) => DeviceOrientation 12 | } 13 | 14 | export type DeviceOrientationCallback = { 15 | start: (success: boolean) => void 16 | stop: (success: boolean) => void 17 | } 18 | 19 | export type DeviceOrientationStartParams = { 20 | refresh_rate?: number 21 | need_absolute?: boolean 22 | } 23 | -------------------------------------------------------------------------------- /src/sdk/device-storage.ts: -------------------------------------------------------------------------------- 1 | export type DeviceStorage = { 2 | setItem: (key: string, value: string, callback?: DeviceStorageCallback['setItem']) => DeviceStorage 3 | getItem: (key: string, callback: DeviceStorageCallback['getItem']) => DeviceStorage 4 | removeItem: (key: string, callback?: DeviceStorageCallback['removeItem']) => DeviceStorage 5 | clear: (callback: DeviceStorageCallback['clear']) => DeviceStorage 6 | } 7 | 8 | export type DeviceStorageCallback = { 9 | setItem: (error: string | null, success: null | true) => void 10 | getItem: (error: string | null, value: null | string) => void 11 | removeItem: (error: string | null, success: null | true) => void 12 | clear: (error: string | null) => void 13 | } 14 | -------------------------------------------------------------------------------- /src/sdk/gyroscope.ts: -------------------------------------------------------------------------------- 1 | export type Gyroscope = { 2 | isStarted: boolean 3 | x: number 4 | y: number 5 | z: number 6 | start: ( 7 | params: GyroscopeStartParams, 8 | callback?: GyroscopeCallback['start'] 9 | ) => Gyroscope 10 | stop: (callback?: GyroscopeCallback['stop']) => Gyroscope 11 | } 12 | 13 | export type GyroscopeCallback = { 14 | start: (success: boolean) => void 15 | stop: (success: boolean) => void 16 | } 17 | 18 | export type GyroscopeStartParams = { 19 | refresh_rate?: number 20 | } 21 | -------------------------------------------------------------------------------- /src/sdk/haptic-feedback.ts: -------------------------------------------------------------------------------- 1 | export type HapticFeedback = { 2 | impactOccurred: ( 3 | style: 'light' | 'medium' | 'heavy' | 'rigid' | 'soft' 4 | ) => HapticFeedback 5 | notificationOccurred: ( 6 | type: 'error' | 'success' | 'warning' 7 | ) => HapticFeedback 8 | selectionChanged: () => HapticFeedback 9 | } 10 | -------------------------------------------------------------------------------- /src/sdk/index.ts: -------------------------------------------------------------------------------- 1 | import type { WebApp } from './webapp' 2 | 3 | export * from './accelerometer' 4 | export * from './back-button' 5 | export * from './biometric-manager' 6 | export * from './bottom-button' 7 | export * from './cloud-storage' 8 | export * from './device-orientation' 9 | export * from './events' 10 | export * from './gyroscope' 11 | export * from './haptic-feedback' 12 | export * from './location-manager' 13 | export * from './popup' 14 | export * from './qr-scanner' 15 | export * from './settings-button' 16 | export * from './theme' 17 | export * from './viewport' 18 | export * from './webapp' 19 | 20 | export function getWebApp() { 21 | if (!('Telegram' in window)) 22 | throw new Error('Telegram SDK not found. Make sure https://telegram.org/js/telegram-web-app.js script is installed.') 23 | // @ts-expect-error not typed 24 | return window?.Telegram?.WebApp as WebApp 25 | } 26 | -------------------------------------------------------------------------------- /src/sdk/location-manager.ts: -------------------------------------------------------------------------------- 1 | export type LocationManager = { 2 | isInited: boolean 3 | isLocationAvailable: boolean 4 | isAccessRequested: boolean 5 | isAccessGranted: boolean 6 | init: (callback?: LocationManagerCallback['init']) => LocationManager 7 | getLocation: (callback: LocationManagerCallback['getLocation']) => LocationManager 8 | openSettings: () => LocationManager 9 | } 10 | 11 | export type LocationManagerCallback = { 12 | init: () => void 13 | getLocation: (data: LocationData | null) => void 14 | } 15 | 16 | export type LocationData = { 17 | latitude: number 18 | longitude: number 19 | altitude: number | null 20 | course: number | null 21 | speed: number | null 22 | horizontal_accuracy: number | null 23 | vertical_accuracy: number | null 24 | course_accuracy: number | null 25 | speed_accuracy: number | null 26 | } 27 | -------------------------------------------------------------------------------- /src/sdk/popup.ts: -------------------------------------------------------------------------------- 1 | export type PopupButton = { 2 | id?: string 3 | type?: 'default' | 'ok' | 'close' | 'cancel' | 'destructive' 4 | text?: string 5 | } 6 | 7 | export type PopupParams = { 8 | title?: string 9 | message: string 10 | buttons?: PopupButton[] 11 | } 12 | -------------------------------------------------------------------------------- /src/sdk/qr-scanner.ts: -------------------------------------------------------------------------------- 1 | export type ScanQrPopupParams = { 2 | text?: string 3 | } 4 | -------------------------------------------------------------------------------- /src/sdk/secure-storage.ts: -------------------------------------------------------------------------------- 1 | export type SecureStorage = { 2 | setItem: (key: string, value: string, callback?: SecureStorageCallback['setItem']) => SecureStorage 3 | getItem: (key: string, callback: SecureStorageCallback['getItem']) => SecureStorage 4 | restoreItem: (key: string, callback?: SecureStorageCallback['restoreItem']) => SecureStorage 5 | removeItem: (key: string, callback?: SecureStorageCallback['removeItem']) => SecureStorage 6 | clear: (callback: SecureStorageCallback['clear']) => SecureStorage 7 | } 8 | 9 | export type SecureStorageCallback = { 10 | setItem: (error: string | null, success: null | true) => void 11 | getItem: (error: string | null, value: null | string) => void 12 | restoreItem: (error: string | null, value: null | string) => void 13 | removeItem: (error: string | null, success: null | true) => void 14 | clear: (error: string | null) => void 15 | } 16 | -------------------------------------------------------------------------------- /src/sdk/settings-button.ts: -------------------------------------------------------------------------------- 1 | import type { EventCallback } from './events' 2 | 3 | export type SettingsButton = { 4 | isVisible: boolean 5 | onClick: (callback: EventCallback['settingsButtonClicked']) => SettingsButton 6 | offClick: (callback: EventCallback['settingsButtonClicked']) => SettingsButton 7 | show: () => SettingsButton 8 | hide: () => SettingsButton 9 | } 10 | -------------------------------------------------------------------------------- /src/sdk/theme.ts: -------------------------------------------------------------------------------- 1 | export type ThemeParams = { 2 | bg_color?: string 3 | text_color?: string 4 | hint_color?: string 5 | link_color?: string 6 | button_color?: string 7 | button_text_color?: string 8 | secondary_bg_color?: string 9 | header_bg_color?: string 10 | bottom_bar_bg_color?: string 11 | accent_text_color?: string 12 | section_bg_color?: string 13 | section_header_text_color?: string 14 | section_separator_color?: string 15 | subtitle_text_color?: string 16 | destructive_text_color?: string 17 | } 18 | -------------------------------------------------------------------------------- /src/sdk/viewport.ts: -------------------------------------------------------------------------------- 1 | export type SafeAreaInset = { 2 | top: number 3 | bottom: number 4 | left: number 5 | right: number 6 | } 7 | 8 | export type ContentSafeAreaInset = { 9 | top: number 10 | bottom: number 11 | left: number 12 | right: number 13 | } 14 | -------------------------------------------------------------------------------- /src/shims.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { ComponentOptions } from 'vue' 3 | 4 | const componentOptions: ComponentOptions 5 | export default componentOptions 6 | } 7 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | import type { EventCallback, WebAppInitData, WebAppUser } from './sdk' 2 | 3 | type BOT_API_VERSIONS = [ 4 | '6.0', 5 | '6.1', 6 | '6.2', 7 | '6.4', 8 | '6.7', 9 | '6.9', 10 | '7.0', 11 | '7.2', 12 | '7.6', 13 | '7.7', 14 | '7.8', 15 | '7.10', 16 | '8.0', 17 | '9.0', 18 | '9.1', 19 | ] 20 | 21 | export type LATEST_VERSION = '9.1' 22 | 23 | type Reverse = T extends [infer First, ...infer Rest] 24 | ? [...Reverse, First] 25 | : [] 26 | 27 | type Equals = X extends Y ? (Y extends X ? true : false) : false 28 | 29 | export type Merge = Omit & U 30 | 31 | export type BotApiVersion = BOT_API_VERSIONS[number] 32 | 33 | type VersionMap = 34 | T extends readonly [infer First extends BotApiVersion, infer Second extends BotApiVersion, ...infer Rest extends BotApiVersion[]] 35 | ? VersionMap<[Second, ...Rest], R & { [K in First]: Second }> 36 | : R 37 | 38 | type BotApiNextVersionMap = VersionMap 39 | export type BotApiNextVersion = V extends keyof BotApiNextVersionMap 40 | ? BotApiNextVersionMap[V] 41 | : never 42 | 43 | type BotApiPrevVersionMap = VersionMap> 44 | export type BotApiPrevVersion = V extends keyof BotApiPrevVersionMap 45 | ? BotApiPrevVersionMap[V] 46 | : never 47 | 48 | export type BotApiVersionRange = 49 | Equals extends true 50 | ? Start 51 | : Start | BotApiVersionRange, End> 52 | 53 | export type VersionedReturnType< 54 | Schema extends { version: BotApiVersion }, 55 | Version extends BotApiVersion, 56 | SuggestedVersions extends BotApiVersion, 57 | > = 58 | & Omit> }>, 'isVersionAtLeast'> 59 | & { 60 | isVersionAtLeast: >>(version: V) => this is VersionedReturnType 61 | } 62 | 63 | /** 64 | * Mini Apps 65 | */ 66 | 67 | export type OnEventReturn = { 68 | off: () => void 69 | } 70 | 71 | export type OnEventOptions = { 72 | /** 73 | * Disables automatic subscription management; you need to call the returned function `off` to unsubscribe. 74 | * 75 | * Set to `false` by default. 76 | */ 77 | manual?: boolean 78 | } 79 | 80 | export type OnEventWithOptions = { 81 | ( 82 | eventType: T, 83 | eventHandler: EventCallback[T], 84 | options?: O 85 | ): OnEventReturn 86 | } 87 | 88 | /** 89 | * Widgets 90 | */ 91 | 92 | export type LoginWidgetUser = 93 | & Pick 94 | & Pick 95 | -------------------------------------------------------------------------------- /src/utils/functions.ts: -------------------------------------------------------------------------------- 1 | interface HookObject { 2 | before?: (args: TArgs) => void 3 | after?: (args: TArgs, result: TResult) => void 4 | } 5 | 6 | export function wrapFunction< 7 | TFunction extends (...args: any[]) => any, 8 | TOmitReturn extends boolean = false, 9 | >( 10 | fn: TFunction, 11 | options?: { 12 | hooks?: HookObject, ReturnType> 13 | omitReturn?: TOmitReturn 14 | }, 15 | ): (...args: Parameters) => TOmitReturn extends true ? void : ReturnType { 16 | return (...args: Parameters) => { 17 | const { hooks, omitReturn } = options || {} 18 | if (hooks?.before) 19 | hooks.before(args) 20 | 21 | const result = fn(...args) 22 | 23 | if (hooks?.after) 24 | hooks.after(args, result) 25 | 26 | if (!omitReturn) 27 | return result 28 | } 29 | } 30 | 31 | type Callback = (data: T) => void 32 | 33 | export function promisify( 34 | func: (...args: [...A, Callback]) => void, 35 | ): (...args: A) => Promise { 36 | return (...args: A) => 37 | new Promise(resolve => func(...args, resolve)) 38 | } 39 | 40 | type CallbackWithNoData = () => void 41 | 42 | export function promisifyWithNoData( 43 | func: (...args: [...A, CallbackWithNoData]) => void, 44 | ): (...args: A) => Promise { 45 | return (...args: A) => 46 | new Promise(resolve => func(...args, resolve)) 47 | } 48 | 49 | type CallbackWithError = (err: string | null, data: T | null) => void 50 | 51 | export function promisifyWithError( 52 | func: (...args: [...A, CallbackWithError]) => void, 53 | ): (...args: A) => Promise { 54 | return (...args: A) => 55 | new Promise((resolve, reject) => 56 | func(...args, (err, data) => (err ? reject(err) : resolve(data as T))), 57 | ) 58 | } 59 | 60 | type CallbackWithMultipleData = (...data: T) => void 61 | 62 | export function promisifyWithDataObject< 63 | T extends any[], 64 | R extends Record, 65 | A extends any[], 66 | >( 67 | func: (...args: [...A, CallbackWithMultipleData]) => void, 68 | mapToObject: (...data: T) => R, 69 | ): (...args: A) => Promise { 70 | return (...args: A) => 71 | new Promise(resolve => 72 | func(...args, (...data: T) => resolve(mapToObject(...data))), 73 | ) 74 | } 75 | -------------------------------------------------------------------------------- /src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './functions' 2 | export * from './store' 3 | export * from './version' 4 | -------------------------------------------------------------------------------- /src/utils/lifecycle.ts: -------------------------------------------------------------------------------- 1 | import { getCurrentInstance, onMounted, onUnmounted } from 'vue' 2 | 3 | export function tryOnMounted(fn: () => void) { 4 | const instance = getCurrentInstance() 5 | if (instance) 6 | onMounted(fn) 7 | } 8 | 9 | export function tryOnUnmounted(fn: () => void) { 10 | const instance = getCurrentInstance() 11 | if (instance) 12 | onUnmounted(fn) 13 | } 14 | -------------------------------------------------------------------------------- /src/utils/store.ts: -------------------------------------------------------------------------------- 1 | import { effectScope } from 'vue' 2 | 3 | /** 4 | * Create a composable that returns a lazily initialized store. 5 | */ 6 | export function defineStore(initialValue: () => T) { 7 | let initialized = false 8 | let value: T 9 | 10 | return function useStore(): T { 11 | if (!initialized) { 12 | // Init store in detached scope, so that watchers are not disposed on component unmount. 13 | effectScope(true).run(() => { 14 | value = initialValue() 15 | }) 16 | initialized = true 17 | } 18 | return value 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/utils/version.ts: -------------------------------------------------------------------------------- 1 | function compareVersions(version1: string, version2: string) { 2 | const parts1 = (version1 || '').trim().split('.').map(Number) 3 | const parts2 = (version2 || '').trim().split('.').map(Number) 4 | const maxLength = Math.max(parts1.length, parts2.length) 5 | 6 | for (let i = 0; i < maxLength; i++) { 7 | const p1 = parts1[i] || 0 8 | const p2 = parts2[i] || 0 9 | if (p1 !== p2) 10 | return p1 > p2 ? 1 : -1 11 | } 12 | 13 | return 0 14 | } 15 | 16 | export function isVersionGreaterOrEqual(version1: string, version2: string) { 17 | return compareVersions(version1, version2) >= 0 18 | } 19 | 20 | export function getHighestVersion(version1: string, version2: string): string { 21 | const comparisonResult = compareVersions(version1, version2) 22 | return comparisonResult >= 0 ? version1 : version2 23 | } 24 | -------------------------------------------------------------------------------- /src/versions/6.0.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('6.0') 24 | export const useBackButton = () => _useBackButton('6.0') 25 | export const useBiometricManager = () => _useBiometricManager('6.0') 26 | export const useClipboard = () => _useClipboard('6.0') 27 | export const useCloudStorage = () => _useCloudStorage('6.0') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('6.0') 29 | export const useDeviceStorage = () => _useDeviceStorage('6.0') 30 | export const useEmojiStatus = () => _useEmojiStatus('6.0') 31 | export const useGyroscope = () => _useGyroscope('6.0') 32 | export const useHapticFeedback = () => _useHapticFeedback('6.0') 33 | export const useHomeScreen = () => _useHomeScreen('6.0') 34 | export const useLocationManager = () => _useLocationManager('6.0') 35 | export const useMainButton = () => _useMainButton('6.0') 36 | export const useMiniApp = () => _useMiniApp('6.0') 37 | export const usePopup = () => _usePopup('6.0') 38 | export const useQrScanner = () => _useQrScanner('6.0') 39 | export const useSecondaryButton = () => _useSecondaryButton('6.0') 40 | export const useSecureStorage = () => _useSecureStorage('6.0') 41 | export const useSettingsButton = () => _useSettingsButton('6.0') 42 | export const useTheme = () => _useTheme('6.0') 43 | export const useViewport = () => _useViewport('6.0') 44 | -------------------------------------------------------------------------------- /src/versions/6.1.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('6.1') 24 | export const useBackButton = () => _useBackButton('6.1') 25 | export const useBiometricManager = () => _useBiometricManager('6.1') 26 | export const useClipboard = () => _useClipboard('6.1') 27 | export const useCloudStorage = () => _useCloudStorage('6.1') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('6.1') 29 | export const useDeviceStorage = () => _useDeviceStorage('6.1') 30 | export const useEmojiStatus = () => _useEmojiStatus('6.1') 31 | export const useGyroscope = () => _useGyroscope('6.1') 32 | export const useHapticFeedback = () => _useHapticFeedback('6.1') 33 | export const useHomeScreen = () => _useHomeScreen('6.1') 34 | export const useLocationManager = () => _useLocationManager('6.1') 35 | export const useMainButton = () => _useMainButton('6.1') 36 | export const useMiniApp = () => _useMiniApp('6.1') 37 | export const usePopup = () => _usePopup('6.1') 38 | export const useQrScanner = () => _useQrScanner('6.1') 39 | export const useSecondaryButton = () => _useSecondaryButton('6.1') 40 | export const useSecureStorage = () => _useSecureStorage('6.1') 41 | export const useSettingsButton = () => _useSettingsButton('6.1') 42 | export const useTheme = () => _useTheme('6.1') 43 | export const useViewport = () => _useViewport('6.1') 44 | -------------------------------------------------------------------------------- /src/versions/6.2.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('6.2') 24 | export const useBackButton = () => _useBackButton('6.2') 25 | export const useBiometricManager = () => _useBiometricManager('6.2') 26 | export const useClipboard = () => _useClipboard('6.2') 27 | export const useCloudStorage = () => _useCloudStorage('6.2') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('6.2') 29 | export const useDeviceStorage = () => _useDeviceStorage('6.2') 30 | export const useEmojiStatus = () => _useEmojiStatus('6.2') 31 | export const useGyroscope = () => _useGyroscope('6.2') 32 | export const useHapticFeedback = () => _useHapticFeedback('6.2') 33 | export const useHomeScreen = () => _useHomeScreen('6.2') 34 | export const useLocationManager = () => _useLocationManager('6.2') 35 | export const useMainButton = () => _useMainButton('6.2') 36 | export const useMiniApp = () => _useMiniApp('6.2') 37 | export const usePopup = () => _usePopup('6.2') 38 | export const useQrScanner = () => _useQrScanner('6.2') 39 | export const useSecondaryButton = () => _useSecondaryButton('6.2') 40 | export const useSecureStorage = () => _useSecureStorage('6.2') 41 | export const useSettingsButton = () => _useSettingsButton('6.2') 42 | export const useTheme = () => _useTheme('6.2') 43 | export const useViewport = () => _useViewport('6.2') 44 | -------------------------------------------------------------------------------- /src/versions/6.4.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('6.4') 24 | export const useBackButton = () => _useBackButton('6.4') 25 | export const useBiometricManager = () => _useBiometricManager('6.4') 26 | export const useClipboard = () => _useClipboard('6.4') 27 | export const useCloudStorage = () => _useCloudStorage('6.4') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('6.4') 29 | export const useDeviceStorage = () => _useDeviceStorage('6.4') 30 | export const useEmojiStatus = () => _useEmojiStatus('6.4') 31 | export const useGyroscope = () => _useGyroscope('6.4') 32 | export const useHapticFeedback = () => _useHapticFeedback('6.4') 33 | export const useHomeScreen = () => _useHomeScreen('6.4') 34 | export const useLocationManager = () => _useLocationManager('6.4') 35 | export const useMainButton = () => _useMainButton('6.4') 36 | export const useMiniApp = () => _useMiniApp('6.4') 37 | export const usePopup = () => _usePopup('6.4') 38 | export const useQrScanner = () => _useQrScanner('6.4') 39 | export const useSecondaryButton = () => _useSecondaryButton('6.4') 40 | export const useSecureStorage = () => _useSecureStorage('6.4') 41 | export const useSettingsButton = () => _useSettingsButton('6.4') 42 | export const useTheme = () => _useTheme('6.4') 43 | export const useViewport = () => _useViewport('6.4') 44 | -------------------------------------------------------------------------------- /src/versions/6.7.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('6.7') 24 | export const useBackButton = () => _useBackButton('6.7') 25 | export const useBiometricManager = () => _useBiometricManager('6.7') 26 | export const useClipboard = () => _useClipboard('6.7') 27 | export const useCloudStorage = () => _useCloudStorage('6.7') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('6.7') 29 | export const useDeviceStorage = () => _useDeviceStorage('6.7') 30 | export const useEmojiStatus = () => _useEmojiStatus('6.7') 31 | export const useGyroscope = () => _useGyroscope('6.7') 32 | export const useHapticFeedback = () => _useHapticFeedback('6.7') 33 | export const useHomeScreen = () => _useHomeScreen('6.7') 34 | export const useLocationManager = () => _useLocationManager('6.7') 35 | export const useMainButton = () => _useMainButton('6.7') 36 | export const useMiniApp = () => _useMiniApp('6.7') 37 | export const usePopup = () => _usePopup('6.7') 38 | export const useQrScanner = () => _useQrScanner('6.7') 39 | export const useSecondaryButton = () => _useSecondaryButton('6.7') 40 | export const useSecureStorage = () => _useSecureStorage('6.7') 41 | export const useSettingsButton = () => _useSettingsButton('6.7') 42 | export const useTheme = () => _useTheme('6.7') 43 | export const useViewport = () => _useViewport('6.7') 44 | -------------------------------------------------------------------------------- /src/versions/6.9.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('6.9') 24 | export const useBackButton = () => _useBackButton('6.9') 25 | export const useBiometricManager = () => _useBiometricManager('6.9') 26 | export const useClipboard = () => _useClipboard('6.9') 27 | export const useCloudStorage = () => _useCloudStorage('6.9') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('6.9') 29 | export const useDeviceStorage = () => _useDeviceStorage('6.9') 30 | export const useEmojiStatus = () => _useEmojiStatus('6.9') 31 | export const useGyroscope = () => _useGyroscope('6.9') 32 | export const useHapticFeedback = () => _useHapticFeedback('6.9') 33 | export const useHomeScreen = () => _useHomeScreen('6.9') 34 | export const useLocationManager = () => _useLocationManager('6.9') 35 | export const useMainButton = () => _useMainButton('6.9') 36 | export const useMiniApp = () => _useMiniApp('6.9') 37 | export const usePopup = () => _usePopup('6.9') 38 | export const useQrScanner = () => _useQrScanner('6.9') 39 | export const useSecondaryButton = () => _useSecondaryButton('6.9') 40 | export const useSecureStorage = () => _useSecureStorage('6.9') 41 | export const useSettingsButton = () => _useSettingsButton('6.9') 42 | export const useTheme = () => _useTheme('6.9') 43 | export const useViewport = () => _useViewport('6.9') 44 | -------------------------------------------------------------------------------- /src/versions/7.0.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('7.0') 24 | export const useBackButton = () => _useBackButton('7.0') 25 | export const useBiometricManager = () => _useBiometricManager('7.0') 26 | export const useClipboard = () => _useClipboard('7.0') 27 | export const useCloudStorage = () => _useCloudStorage('7.0') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('7.0') 29 | export const useDeviceStorage = () => _useDeviceStorage('7.0') 30 | export const useEmojiStatus = () => _useEmojiStatus('7.0') 31 | export const useGyroscope = () => _useGyroscope('7.0') 32 | export const useHapticFeedback = () => _useHapticFeedback('7.0') 33 | export const useHomeScreen = () => _useHomeScreen('7.0') 34 | export const useLocationManager = () => _useLocationManager('7.0') 35 | export const useMainButton = () => _useMainButton('7.0') 36 | export const useMiniApp = () => _useMiniApp('7.0') 37 | export const usePopup = () => _usePopup('7.0') 38 | export const useQrScanner = () => _useQrScanner('7.0') 39 | export const useSecondaryButton = () => _useSecondaryButton('7.0') 40 | export const useSecureStorage = () => _useSecureStorage('7.0') 41 | export const useSettingsButton = () => _useSettingsButton('7.0') 42 | export const useTheme = () => _useTheme('7.0') 43 | export const useViewport = () => _useViewport('7.0') 44 | -------------------------------------------------------------------------------- /src/versions/7.10.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('7.10') 24 | export const useBackButton = () => _useBackButton('7.10') 25 | export const useBiometricManager = () => _useBiometricManager('7.10') 26 | export const useClipboard = () => _useClipboard('7.10') 27 | export const useCloudStorage = () => _useCloudStorage('7.10') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('7.10') 29 | export const useDeviceStorage = () => _useDeviceStorage('7.10') 30 | export const useEmojiStatus = () => _useEmojiStatus('7.10') 31 | export const useGyroscope = () => _useGyroscope('7.10') 32 | export const useHapticFeedback = () => _useHapticFeedback('7.10') 33 | export const useHomeScreen = () => _useHomeScreen('7.10') 34 | export const useLocationManager = () => _useLocationManager('7.10') 35 | export const useMainButton = () => _useMainButton('7.10') 36 | export const useMiniApp = () => _useMiniApp('7.10') 37 | export const usePopup = () => _usePopup('7.10') 38 | export const useQrScanner = () => _useQrScanner('7.10') 39 | export const useSecondaryButton = () => _useSecondaryButton('7.10') 40 | export const useSecureStorage = () => _useSecureStorage('7.10') 41 | export const useSettingsButton = () => _useSettingsButton('7.10') 42 | export const useTheme = () => _useTheme('7.10') 43 | export const useViewport = () => _useViewport('7.10') 44 | -------------------------------------------------------------------------------- /src/versions/7.2.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('7.2') 24 | export const useBackButton = () => _useBackButton('7.2') 25 | export const useBiometricManager = () => _useBiometricManager('7.2') 26 | export const useClipboard = () => _useClipboard('7.2') 27 | export const useCloudStorage = () => _useCloudStorage('7.2') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('7.2') 29 | export const useDeviceStorage = () => _useDeviceStorage('7.2') 30 | export const useEmojiStatus = () => _useEmojiStatus('7.2') 31 | export const useGyroscope = () => _useGyroscope('7.2') 32 | export const useHapticFeedback = () => _useHapticFeedback('7.2') 33 | export const useHomeScreen = () => _useHomeScreen('7.2') 34 | export const useLocationManager = () => _useLocationManager('7.2') 35 | export const useMainButton = () => _useMainButton('7.2') 36 | export const useMiniApp = () => _useMiniApp('7.2') 37 | export const usePopup = () => _usePopup('7.2') 38 | export const useQrScanner = () => _useQrScanner('7.2') 39 | export const useSecondaryButton = () => _useSecondaryButton('7.2') 40 | export const useSecureStorage = () => _useSecureStorage('7.2') 41 | export const useSettingsButton = () => _useSettingsButton('7.2') 42 | export const useTheme = () => _useTheme('7.2') 43 | export const useViewport = () => _useViewport('7.2') 44 | -------------------------------------------------------------------------------- /src/versions/7.6.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('7.6') 24 | export const useBackButton = () => _useBackButton('7.6') 25 | export const useBiometricManager = () => _useBiometricManager('7.6') 26 | export const useClipboard = () => _useClipboard('7.6') 27 | export const useCloudStorage = () => _useCloudStorage('7.6') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('7.6') 29 | export const useDeviceStorage = () => _useDeviceStorage('7.6') 30 | export const useEmojiStatus = () => _useEmojiStatus('7.6') 31 | export const useGyroscope = () => _useGyroscope('7.6') 32 | export const useHapticFeedback = () => _useHapticFeedback('7.6') 33 | export const useHomeScreen = () => _useHomeScreen('7.6') 34 | export const useLocationManager = () => _useLocationManager('7.6') 35 | export const useMainButton = () => _useMainButton('7.6') 36 | export const useMiniApp = () => _useMiniApp('7.6') 37 | export const usePopup = () => _usePopup('7.6') 38 | export const useQrScanner = () => _useQrScanner('7.6') 39 | export const useSecondaryButton = () => _useSecondaryButton('7.6') 40 | export const useSecureStorage = () => _useSecureStorage('7.6') 41 | export const useSettingsButton = () => _useSettingsButton('7.6') 42 | export const useTheme = () => _useTheme('7.6') 43 | export const useViewport = () => _useViewport('7.6') 44 | -------------------------------------------------------------------------------- /src/versions/7.7.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('7.7') 24 | export const useBackButton = () => _useBackButton('7.7') 25 | export const useBiometricManager = () => _useBiometricManager('7.7') 26 | export const useClipboard = () => _useClipboard('7.7') 27 | export const useCloudStorage = () => _useCloudStorage('7.7') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('7.7') 29 | export const useDeviceStorage = () => _useDeviceStorage('7.7') 30 | export const useEmojiStatus = () => _useEmojiStatus('7.7') 31 | export const useGyroscope = () => _useGyroscope('7.7') 32 | export const useHapticFeedback = () => _useHapticFeedback('7.7') 33 | export const useHomeScreen = () => _useHomeScreen('7.7') 34 | export const useLocationManager = () => _useLocationManager('7.7') 35 | export const useMainButton = () => _useMainButton('7.7') 36 | export const useMiniApp = () => _useMiniApp('7.7') 37 | export const usePopup = () => _usePopup('7.7') 38 | export const useQrScanner = () => _useQrScanner('7.7') 39 | export const useSecondaryButton = () => _useSecondaryButton('7.7') 40 | export const useSecureStorage = () => _useSecureStorage('7.7') 41 | export const useSettingsButton = () => _useSettingsButton('7.7') 42 | export const useTheme = () => _useTheme('7.7') 43 | export const useViewport = () => _useViewport('7.7') 44 | -------------------------------------------------------------------------------- /src/versions/7.8.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('7.8') 24 | export const useBackButton = () => _useBackButton('7.8') 25 | export const useBiometricManager = () => _useBiometricManager('7.8') 26 | export const useClipboard = () => _useClipboard('7.8') 27 | export const useCloudStorage = () => _useCloudStorage('7.8') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('7.8') 29 | export const useDeviceStorage = () => _useDeviceStorage('7.8') 30 | export const useEmojiStatus = () => _useEmojiStatus('7.8') 31 | export const useGyroscope = () => _useGyroscope('7.8') 32 | export const useHapticFeedback = () => _useHapticFeedback('7.8') 33 | export const useHomeScreen = () => _useHomeScreen('7.8') 34 | export const useLocationManager = () => _useLocationManager('7.8') 35 | export const useMainButton = () => _useMainButton('7.8') 36 | export const useMiniApp = () => _useMiniApp('7.8') 37 | export const usePopup = () => _usePopup('7.8') 38 | export const useQrScanner = () => _useQrScanner('7.8') 39 | export const useSecondaryButton = () => _useSecondaryButton('7.8') 40 | export const useSecureStorage = () => _useSecureStorage('7.8') 41 | export const useSettingsButton = () => _useSettingsButton('7.8') 42 | export const useTheme = () => _useTheme('7.8') 43 | export const useViewport = () => _useViewport('7.8') 44 | -------------------------------------------------------------------------------- /src/versions/8.0.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('8.0') 24 | export const useBackButton = () => _useBackButton('8.0') 25 | export const useBiometricManager = () => _useBiometricManager('8.0') 26 | export const useClipboard = () => _useClipboard('8.0') 27 | export const useCloudStorage = () => _useCloudStorage('8.0') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('8.0') 29 | export const useDeviceStorage = () => _useDeviceStorage('8.0') 30 | export const useEmojiStatus = () => _useEmojiStatus('8.0') 31 | export const useGyroscope = () => _useGyroscope('8.0') 32 | export const useHapticFeedback = () => _useHapticFeedback('8.0') 33 | export const useHomeScreen = () => _useHomeScreen('8.0') 34 | export const useLocationManager = () => _useLocationManager('8.0') 35 | export const useMainButton = () => _useMainButton('8.0') 36 | export const useMiniApp = () => _useMiniApp('8.0') 37 | export const usePopup = () => _usePopup('8.0') 38 | export const useQrScanner = () => _useQrScanner('8.0') 39 | export const useSecondaryButton = () => _useSecondaryButton('8.0') 40 | export const useSecureStorage = () => _useSecureStorage('8.0') 41 | export const useSettingsButton = () => _useSettingsButton('8.0') 42 | export const useTheme = () => _useTheme('8.0') 43 | export const useViewport = () => _useViewport('8.0') 44 | -------------------------------------------------------------------------------- /src/versions/9.0.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('9.0') 24 | export const useBackButton = () => _useBackButton('9.0') 25 | export const useBiometricManager = () => _useBiometricManager('9.0') 26 | export const useClipboard = () => _useClipboard('9.0') 27 | export const useCloudStorage = () => _useCloudStorage('9.0') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('9.0') 29 | export const useDeviceStorage = () => _useDeviceStorage('9.0') 30 | export const useEmojiStatus = () => _useEmojiStatus('9.0') 31 | export const useGyroscope = () => _useGyroscope('9.0') 32 | export const useHapticFeedback = () => _useHapticFeedback('9.0') 33 | export const useHomeScreen = () => _useHomeScreen('9.0') 34 | export const useLocationManager = () => _useLocationManager('9.0') 35 | export const useMainButton = () => _useMainButton('9.0') 36 | export const useMiniApp = () => _useMiniApp('9.0') 37 | export const usePopup = () => _usePopup('9.0') 38 | export const useQrScanner = () => _useQrScanner('9.0') 39 | export const useSecondaryButton = () => _useSecondaryButton('9.0') 40 | export const useSecureStorage = () => _useSecureStorage('9.0') 41 | export const useSettingsButton = () => _useSettingsButton('9.0') 42 | export const useTheme = () => _useTheme('9.0') 43 | export const useViewport = () => _useViewport('9.0') 44 | -------------------------------------------------------------------------------- /src/versions/9.1.ts: -------------------------------------------------------------------------------- 1 | import { useAccelerometer as _useAccelerometer } from '../composables/useAccelerometer' 2 | import { useBackButton as _useBackButton } from '../composables/useBackButton' 3 | import { useBiometricManager as _useBiometricManager } from '../composables/useBiometricManager' 4 | import { useClipboard as _useClipboard } from '../composables/useClipboard' 5 | import { useCloudStorage as _useCloudStorage } from '../composables/useCloudStorage' 6 | import { useDeviceOrientation as _useDeviceOrientation } from '../composables/useDeviceOrientation' 7 | import { useDeviceStorage as _useDeviceStorage } from '../composables/useDeviceStorage' 8 | import { useEmojiStatus as _useEmojiStatus } from '../composables/useEmojiStatus' 9 | import { useGyroscope as _useGyroscope } from '../composables/useGyroscope' 10 | import { useHapticFeedback as _useHapticFeedback } from '../composables/useHapticFeedback' 11 | import { useHomeScreen as _useHomeScreen } from '../composables/useHomeScreen' 12 | import { useLocationManager as _useLocationManager } from '../composables/useLocationManager' 13 | import { useMainButton as _useMainButton } from '../composables/useMainButton' 14 | import { useMiniApp as _useMiniApp } from '../composables/useMiniApp' 15 | import { usePopup as _usePopup } from '../composables/usePopup' 16 | import { useQrScanner as _useQrScanner } from '../composables/useQrScanner' 17 | import { useSecondaryButton as _useSecondaryButton } from '../composables/useSecondaryButton' 18 | import { useSecureStorage as _useSecureStorage } from '../composables/useSecureStorage' 19 | import { useSettingsButton as _useSettingsButton } from '../composables/useSettingsButton' 20 | import { useTheme as _useTheme } from '../composables/useTheme' 21 | import { useViewport as _useViewport } from '../composables/useViewport' 22 | 23 | export const useAccelerometer = () => _useAccelerometer('9.1') 24 | export const useBackButton = () => _useBackButton('9.1') 25 | export const useBiometricManager = () => _useBiometricManager('9.1') 26 | export const useClipboard = () => _useClipboard('9.1') 27 | export const useCloudStorage = () => _useCloudStorage('9.1') 28 | export const useDeviceOrientation = () => _useDeviceOrientation('9.1') 29 | export const useDeviceStorage = () => _useDeviceStorage('9.1') 30 | export const useEmojiStatus = () => _useEmojiStatus('9.1') 31 | export const useGyroscope = () => _useGyroscope('9.1') 32 | export const useHapticFeedback = () => _useHapticFeedback('9.1') 33 | export const useHomeScreen = () => _useHomeScreen('9.1') 34 | export const useLocationManager = () => _useLocationManager('9.1') 35 | export const useMainButton = () => _useMainButton('9.1') 36 | export const useMiniApp = () => _useMiniApp('9.1') 37 | export const usePopup = () => _usePopup('9.1') 38 | export const useQrScanner = () => _useQrScanner('9.1') 39 | export const useSecondaryButton = () => _useSecondaryButton('9.1') 40 | export const useSecureStorage = () => _useSecureStorage('9.1') 41 | export const useSettingsButton = () => _useSettingsButton('9.1') 42 | export const useTheme = () => _useTheme('9.1') 43 | export const useViewport = () => _useViewport('9.1') 44 | -------------------------------------------------------------------------------- /src/versions/latest.ts: -------------------------------------------------------------------------------- 1 | export * from './9.1' 2 | -------------------------------------------------------------------------------- /src/widgets/DiscussionWidget.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 57 | -------------------------------------------------------------------------------- /src/widgets/LoginWidget.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 62 | -------------------------------------------------------------------------------- /src/widgets/PostWidget.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 52 | -------------------------------------------------------------------------------- /src/widgets/ShareWidget.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 43 | -------------------------------------------------------------------------------- /test/basic.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, it } from 'vitest' 2 | 3 | describe('tests', () => { 4 | it('should works', () => { 5 | expect(1 + 1).toEqual(2) 6 | }) 7 | }) 8 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "incremental": false, 4 | "target": "ESNext", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ESNext", 7 | "moduleResolution": "bundler", 8 | "resolveJsonModule": true, 9 | "strict": true, 10 | "strictNullChecks": true, 11 | "noUnusedLocals": true, 12 | "esModuleInterop": true, 13 | "forceConsistentCasingInFileNames": true, 14 | "skipLibCheck": true 15 | }, 16 | "include": [ 17 | "src/**/*.ts", 18 | "src/**/*.d.ts", 19 | "src/**/*.vue" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /vite.config.mts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'node:path' 2 | import vue from '@vitejs/plugin-vue' 3 | import { defineConfig } from 'vite' 4 | import dts from 'vite-plugin-dts' 5 | import pkg from './package.json' 6 | 7 | export default defineConfig({ 8 | plugins: [ 9 | vue(), 10 | dts({ 11 | cleanVueFileName: true, 12 | }), 13 | ], 14 | build: { 15 | lib: { 16 | entry: [ 17 | resolve(__dirname, 'src/index.ts'), 18 | resolve(__dirname, 'src/versions/6.0.ts'), 19 | resolve(__dirname, 'src/versions/6.1.ts'), 20 | resolve(__dirname, 'src/versions/6.2.ts'), 21 | resolve(__dirname, 'src/versions/6.4.ts'), 22 | resolve(__dirname, 'src/versions/6.7.ts'), 23 | resolve(__dirname, 'src/versions/6.9.ts'), 24 | resolve(__dirname, 'src/versions/7.0.ts'), 25 | resolve(__dirname, 'src/versions/7.2.ts'), 26 | resolve(__dirname, 'src/versions/7.6.ts'), 27 | resolve(__dirname, 'src/versions/7.7.ts'), 28 | resolve(__dirname, 'src/versions/7.8.ts'), 29 | resolve(__dirname, 'src/versions/7.10.ts'), 30 | resolve(__dirname, 'src/versions/8.0.ts'), 31 | resolve(__dirname, 'src/versions/9.0.ts'), 32 | resolve(__dirname, 'src/versions/9.1.ts'), 33 | resolve(__dirname, 'src/versions/latest.ts'), 34 | ], 35 | name: pkg.name, 36 | fileName(format, name) { 37 | if (format === 'es') { 38 | return `${name}.js` 39 | } 40 | return `${name}.${format}` 41 | }, 42 | }, 43 | rollupOptions: { 44 | external: ['vue'], 45 | output: { 46 | globals: { 47 | vue: 'Vue', 48 | }, 49 | }, 50 | }, 51 | }, 52 | }) 53 | -------------------------------------------------------------------------------- /vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config' 2 | 3 | export default defineConfig({ 4 | test: { 5 | environment: 'happy-dom', 6 | }, 7 | }) 8 | --------------------------------------------------------------------------------