deptyped/vue-telegram

Telegram integration for Vue

vue-telegram's Issues

Add `<PopupButton>` component

<script lang="ts" setup>
import { Popup, PopupButton } from 'vue-tg'

function handleAgreeButton() {
  // ...
}

function handleDisagreeButton() {
  // ...
}
</script>

<template>
  <Popup message="Do you agree?">
    <PopupButton text="Agree" type="ok" @click="handleAgreeButton">
    <PopupButton text="Disagree" type="cancel" @click="handleDisagreeButton">
  </Popup>
</template>

Add ability to create refs for Cloud Storage

<script lang="ts" setup>
import { useWebAppCloudStorage } from 'vue-tg'

const valueRef = useWebAppCloudStorageItem<T>("some-key", "initial value", {
  writeDebounce: 500, // ms
  serializer: {
    read(raw: string): T
    write(value: T): string
  },
  onError: (error: unknown) => void,
})

valueRef.value = "another value"
</script>

Method showPopup is not supported in version 6.0

Doesn't working nothing correctly.
I get
telegram-web-app.js:1754 [Telegram.WebApp] Method showPopup is not supported in version 6.0)
telegram-web-app.js:1755 Uncaught Error: WebAppMethodUnsupported

Is it possible to disable app close when swipe down?

Hello! Right now if the mini app is open (fully expanded) and you swipe screen down the app closes. It's a standard behavior for many apps. But I have seen an app that doesn't cloce on swipe-down. It stays open and it doesn't even change the viewport size when you drag it down. It stays full height despite this.

Is it possible to do the same with vue-telegram ???

Thank you in advance!

AbsoluteLayout does not cut borderRadius

the borderRadius of the child component is not clipped when using overflow hidden

how can I implement the clipping of a child component by borderRadius?

canSendData not working

Here is the output of this code:

<template>
  <p>initData: {{ initData }}</p>
  <p>initDataUnsafe: {{ initDataUnsafe }}</p>
  <p>isPlatform: {{ isPlatform }}</p>
  <p>isPlatformUnknown: {{ isPlatformUnknown }}</p>
  <p>isReady: {{ isReady }}</p>
  <p>canSendData: {{ canSendData }}</p>
  <p>platform: {{ platform }}</p>
  <p>version: {{ version }}</p>
</template>

MiniApp output
query_id=AAHxw2*******
initDataUnsafe: { "query_id": "AAHxw2***** }
isPlatform: e=>Telegram.WebApp.platform===e
isPlatformUnknown: false
isReady: false
canSendData: false
platform: android
version: 7.2

Why is "canSendData" false?
Shouldn't this line of your code say ```Telegram.WebApp.initData !=""`?

const canSendData = !isPlatformUnknown && Telegram.WebApp.initData === ""

Bot API 7.7

is possible support api 7.7 methods ?

Add support for Bot API 7.0

https://core.telegram.org/bots/webapps#december-29-2023

Integrate with nuxt 3

Please! Integrate with nuxt 3

This works only if i write this:

<script setup lang="ts">
  useHead({
      script: [
        {
          src: 'https://telegram.org/js/telegram-web-app.js',
          defer: true
        }
      ]
    })

  onMounted(async () => {
    const VueTg = await import('vue-tg')
  })
<script>

If i write import without onMounted, nuxt throws error "Telegram is not defined"

because nuxt first render in server side

Open mini app with Expanded Viewport

Hello! Right now we have useWebAppViewport() and isExpanded property, which is read only. Could you please add an ability to open the miniapp with expanded viewport (like you did for headerColor not so long ago).

My miniapp is rather long/tall and a user has to expand it every time he opens it. This extra action can be avoided by opening the app with full height by default.

Web Site with Documentation seems doesn't work

Subj

Web Site with Documentation seems doesn't work

InitData doesn't return correct values after page Refresh

Hey! Once again I need your assistance. I am building a webapp in Nuxt3. As you know, when you open a webapp in Telegram you can click on three dots in the header part and select "Refresh" the page. But after the refresh, InitData returns a string with value "query_id" and that's all...

So I have a question:
Is this a normal behavior that InitData doesn't return correct string after page refresh?

P.S.
Anyway, if the InitData is empty it should return null or undefined. But right now it returns "query_id".

Add `<ExpandedViewport/>` component

<ExpandedViewport />

// keep expanded despite user interaction
<ExpandedViewport force />

How to update useWebAppTheme params to make them work in Nuxt3?

Hello! First of all: thank you for your component! I am trying to use it in Nuxt 3 and I managed to get useWebApp work correctly with ssr: false option in nuxt-config.ts. But I can't change useWebAppTheme for some reason. Looks like I am doing something wrong. Can you help me, please?

I am importing the code in my default layout

<script setup>
  import { useWebAppTheme } from 'vue-tg'
  useWebAppTheme().colorScheme.value = 'dark'
  useWebAppTheme().headerColor.value = '#000000'
  useWebAppTheme().backgroundColor.value = '#000000'

  useWebAppTheme().themeParams.value = {
    bg_color: '#000000',
    header_bg_color: '#000000'
  }
  
</script>

As you see I am trying to set a black background and black header bg color. But when I load the app in Telegram it still stays white.

Interactive playground for components

Documentation is unavailable

[Event] closing a mini app?

Is it possible to track the event of closing a mini app?

is Telegram Bot Api 7.7 supported?

Vue 3 Support

[Telegram.WebApp] Changing swipes behavior is not supported in version 7.6

Add `<ClosingConfirmation/>` component

Add support for Bot API 6.9

https://core.telegram.org/bots/api-changelog#september-22-2023

• CloudStorage

import { useWebAppCloudStorage } from "vue-tg"
const {
  setStorageItem,
  getStorageItem,
  getStorageItems,
  removeStorageItem,
  removeStorageItems,
  getStorageKeys,
} = useWebAppCloudStorage()

• requestContact, requestWriteAccess

import { useWebAppRequests } from "vue-tg"
const {
  requestContact,
  requestWriteAccess,
  onContactRequested,
  onWriteAccessRequested,
} = useWebAppRequests()

Add support for Telegram Widgets

• https://core.telegram.org/widgets/share

<TgShareButton 
	url: string
	comment?: string 
	size?: "medium"| "large"
	no-label?: boolean
/>

• https://core.telegram.org/widgets/post

<TgPost
	url: string
	width?: string
	author-photo?: boolean
	color?: string
	dark-color?: string
	dark?: boolean
/>

• https://core.telegram.org/widgets/login

<TgLoginButton 
	bot-username: string
	size?: "small" | "medium"| "large"
	user-photo?: boolean
	radius?: number
	request-write?: boolean
	redirect-url?: string
	@auth?: (user) => void
/>

• https://core.telegram.org/widgets/discussion

<TgDiscussion
	url: string
	height?: string
	comments?: number
	colorful?: boolean
	color?: string
	dark-color?: string
	dark?: boolean
/>

Improve `<BiometricManager>` component

• Slots API

<script lang="ts" setup>
import { BiometricManager } from 'vue-tg'
</script>

<template>
  <BiometricManager>
    <!-- isBiometricInited: false -->
    <template #loading>
      <p>Biometric init...</p>
    </template>

    <!-- isBiometricInited: true, isBiometricAvailable: false -->
    <template #not-supported>
      <p>Biometric is not supported on the current device</p>
    </template>

    <!-- isBiometricInited: true, isBiometricAccessGranted: false -->
    <template #not-granted>
      <p>Biometric access is not granted</p>
    </template>

    <p>Biometric is ready to use</p>
  </BiometricManager>
</template>

Is there a monitoring event for this

Is there a monitoring event for this?