nuxt-telegram-mini-app 0.0.2 → 0.0.4

package/app/pages/components.vue

@@ -107,50 +107,202 @@
       <div class="p-4 space-y-4">
         <div class="space-y-2">
           <h3 class="text-sm font-medium text-subtitle">Form Elements</h3>
-          <div class="space-y-3">
-            <input
-              v-model="textInput"
-              type="text"
-              placeholder="Enter text here..."
-              class="w-full px-3 py-2 bg-secondaryBg border border-sectionSeparator rounded-lg text-text placeholder-hint"
-            />
-            <textarea
-              v-model="textareaInput"
-              rows="3"
-              placeholder="Multi-line input..."
-              class="w-full px-3 py-2 bg-secondaryBg border border-sectionSeparator rounded-lg text-text placeholder-hint resize-none"
-            />
+          <div class="space-y-5">
+            <label class="block rounded-2xl bg-secondaryBg px-4 py-3">
+              <span class="mb-2 block text-xs text-hint">Display name</span>
+              <input
+                v-model="formName"
+                type="text"
+                placeholder="Your name"
+                class="min-h-10 w-full bg-transparent text-base text-text placeholder-hint outline-none focus-visible:ring-2 focus-visible:ring-link/40"
+              />
+            </label>
+
+            <label class="block rounded-2xl bg-secondaryBg px-4 py-3">
+              <span class="mb-2 block text-xs text-hint">Notes</span>
+              <textarea
+                v-model="formNotes"
+                rows="3"
+                placeholder="Add a short note"
+                class="min-h-20 w-full resize-none bg-transparent text-base text-text placeholder-hint outline-none focus-visible:ring-2 focus-visible:ring-link/40"
+              />
+            </label>
+
+            <div class="space-y-2">
+              <p class="px-4 text-xs uppercase tracking-normal text-hint">Notifications</p>
+              <div class="overflow-hidden rounded-2xl bg-secondaryBg">
+                <label class="flex min-h-16 items-center justify-between gap-3 px-4 py-3 active:bg-bg/60">
+                  <span class="min-w-0 text-base font-medium text-text">Notifications</span>
+                  <input
+                    v-model="notificationsEnabled"
+                    type="checkbox"
+                    class="peer sr-only"
+                    @change="onFormSelection"
+                  />
+                  <span
+                    class="relative h-8 w-12 shrink-0 rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-link/40"
+                    :class="notificationsEnabled ? 'bg-primary' : 'bg-bg'"
+                  >
+                    <span
+                      class="absolute left-1 top-1 h-6 w-6 rounded-full bg-primaryFg shadow-sm transition-transform"
+                      :class="notificationsEnabled ? 'translate-x-4' : 'translate-x-0'"
+                    />
+                  </span>
+                </label>
+
+                <label class="flex min-h-16 items-center justify-between gap-3 border-t border-sectionSeparator px-4 py-3 active:bg-bg/60">
+                  <span class="min-w-0">
+                    <span class="block text-base font-medium text-text">Updates</span>
+                    <span class="block text-sm text-hint">Include product news in this demo profile</span>
+                  </span>
+                  <input
+                    v-model="termsAccepted"
+                    type="checkbox"
+                    class="peer sr-only"
+                    @change="onFormSelection"
+                  />
+                  <span
+                    class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-link/40"
+                    :class="termsAccepted ? 'border-primary bg-primary text-primaryFg' : 'border-hint/40 text-transparent'"
+                  >
+                    <Icon name="i-heroicons-check-20-solid" class="h-5 w-5" />
+                  </span>
+                </label>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <p class="px-4 text-xs uppercase tracking-normal text-hint">Visibility</p>
+              <div class="overflow-hidden rounded-2xl bg-secondaryBg">
+                <label
+                  v-for="option in visibilityOptions"
+                  :key="option.value"
+                  class="flex min-h-14 items-center gap-4 border-b border-sectionSeparator px-4 py-3 last:border-b-0 active:bg-bg/60"
+                >
+                  <input
+                    v-model="selectedVisibility"
+                    type="radio"
+                    name="visibility"
+                    :value="option.value"
+                    class="peer sr-only"
+                    @change="onFormSelection"
+                  />
+                  <span
+                    class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-link/40"
+                    :class="selectedVisibility === option.value ? 'border-primary' : 'border-hint/40'"
+                  >
+                    <span
+                      class="h-3.5 w-3.5 rounded-full transition-colors"
+                      :class="selectedVisibility === option.value ? 'bg-primary' : 'bg-transparent'"
+                    />
+                  </span>
+                  <span class="text-base font-medium text-text">{{ option.label }}</span>
+                </label>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <p class="px-4 text-xs uppercase tracking-normal text-hint">Mode</p>
+              <div class="grid grid-cols-3 rounded-2xl bg-secondaryBg p-1">
+                <button
+                  v-for="option in modeOptions"
+                  :key="option.value"
+                  type="button"
+                  class="min-h-11 rounded-xl px-2 text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link/40"
+                  :class="selectedMode === option.value ? 'bg-primary text-primaryFg' : 'text-text active:bg-bg/70'"
+                  @click="selectMode(option.value)"
+                >
+                  {{ option.label }}
+                </button>
+              </div>
+            </div>
+
+            <div class="overflow-hidden rounded-2xl bg-secondaryBg">
+              <label class="relative flex min-h-16 items-center justify-between gap-3 border-b border-sectionSeparator px-4 py-3 active:bg-bg/60">
+                <span class="text-base font-medium text-text">Category</span>
+                <span class="flex min-w-0 items-center gap-1 text-base text-hint">
+                  <span class="truncate">{{ selectedCategoryLabel }}</span>
+                  <Icon name="i-heroicons-chevron-right-20-solid" class="h-5 w-5 shrink-0" />
+                </span>
+                <select
+                  v-model="selectedCategory"
+                  aria-label="Category"
+                  class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                  @change="onFormSelection"
+                >
+                  <option
+                    v-for="option in categoryOptions"
+                    :key="option.value"
+                    :value="option.value"
+                  >
+                    {{ option.label }}
+                  </option>
+                </select>
+              </label>
+
+              <label class="block px-4 py-3">
+                <span class="mb-3 flex items-center justify-between gap-3 text-base">
+                  <span class="font-medium text-text">Intensity</span>
+                  <span class="text-hint">{{ sliderValue }}%</span>
+                </span>
+                <input
+                  v-model.number="sliderValue"
+                  type="range"
+                  min="0"
+                  max="100"
+                  step="5"
+                  class="tg-native-range h-8 w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link/40"
+                  :style="{ '--range-value': `${sliderValue}%` }"
+                  @change="onFormSelection"
+                />
+              </label>
+            </div>
           </div>
         </div>
 
         <div class="space-y-2">
           <h3 class="text-sm font-medium text-subtitle">Counters & Progress</h3>
-          <div class="space-y-3">
-            <div class="flex items-center justify-between">
-              <span class="text-sm">Counter: {{ counter }}</span>
-              <div class="flex gap-2">
+          <div class="overflow-hidden rounded-2xl bg-secondaryBg">
+            <div class="flex min-h-24 items-center justify-between gap-4 px-4 py-4">
+              <span class="text-lg font-medium text-text">Counter</span>
+              <div class="grid shrink-0 grid-cols-[3.25rem_3rem_3.25rem] items-center gap-2">
                 <button
-                  @click="counter--"
-                  class="w-8 h-8 bg-button-color text-button-text rounded-full flex items-center justify-center text-sm font-medium"
+                  type="button"
+                  aria-label="Decrease counter"
+                  class="flex h-[3.25rem] w-[3.25rem] items-center justify-center rounded-2xl bg-bg text-3xl font-light leading-none text-primary transition-colors active:bg-sectionSeparator focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link/40"
+                  @click="decrementCounter"
                 >
-                  -
+                  <span class="-mt-1">-</span>
                 </button>
+                <output class="text-center text-2xl font-semibold tabular-nums text-text">
+                  {{ counter }}
+                </output>
                 <button
-                  @click="counter++"
-                  class="w-8 h-8 bg-button-color text-button-text rounded-full flex items-center justify-center text-sm font-medium"
+                  type="button"
+                  aria-label="Increase counter"
+                  class="flex h-[3.25rem] w-[3.25rem] items-center justify-center rounded-2xl bg-bg text-3xl font-light leading-none text-primary transition-colors active:bg-sectionSeparator focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link/40"
+                  @click="incrementCounter"
                 >
-                  +
+                  <span class="-mt-1">+</span>
                 </button>
               </div>
             </div>
-            <div class="space-y-1">
-              <div class="flex justify-between text-sm">
-                <span>Progress</span>
-                <span>{{ progress }}%</span>
+
+            <div class="border-t border-sectionSeparator px-4 py-5">
+              <div class="mb-4 flex items-center justify-between gap-3">
+                <span class="text-lg font-medium text-text">Progress</span>
+                <output class="text-xl tabular-nums text-hint">{{ progress }}%</output>
               </div>
-              <div class="w-full h-2 bg-secondaryBg rounded-full overflow-hidden">
+              <div
+                class="h-3 w-full overflow-hidden rounded-full bg-bg"
+                role="progressbar"
+                :aria-valuenow="progress"
+                aria-valuemin="0"
+                aria-valuemax="100"
+                aria-label="Counter progress"
+              >
                 <div
-                  class="h-full bg-link transition-all duration-300"
+                  class="h-full rounded-full bg-primary transition-all duration-300"
                   :style="{ width: `${progress}%` }"
                 />
               </div>
@@ -218,16 +370,44 @@ const main = useMainButton()
 // Interactive state
 const loadingButton = ref(false)
 const counter = ref(0)
-const textInput = ref('')
-const textareaInput = ref('')
+const formName = ref('Your name')
+const formNotes = ref('')
+const notificationsEnabled = ref(true)
+const termsAccepted = ref(true)
+const selectedVisibility = ref('friends')
+const selectedMode = ref('auto')
+const selectedCategory = ref('personal')
+const sliderValue = ref(60)
 
 const progress = computed(() => Math.min(100, Math.max(0, counter.value * 10)))
 
 const cellDescription = computed(() => {
-  if (textInput.value) return `You typed: "${textInput.value}"`
+  if (formName.value) return `You typed: "${formName.value}"`
   return 'Type something in the input above'
 })
 
+const visibilityOptions = [
+  { label: 'Everyone', value: 'everyone' },
+  { label: 'Friends', value: 'friends' },
+  { label: 'Only me', value: 'private' },
+]
+
+const modeOptions = [
+  { label: 'Auto', value: 'auto' },
+  { label: 'Light', value: 'light' },
+  { label: 'Dark', value: 'dark' },
+]
+
+const categoryOptions = [
+  { label: 'Personal', value: 'personal' },
+  { label: 'Work', value: 'work' },
+  { label: 'Travel', value: 'travel' },
+]
+
+const selectedCategoryLabel = computed(() => {
+  return categoryOptions.find(option => option.value === selectedCategory.value)?.label || selectedCategory.value
+})
+
 function toggleLoading() {
   loadingButton.value = true
   setTimeout(() => {
@@ -241,6 +421,26 @@ function onCellClick() {
   counter.value += 5
 }
 
+function onFormSelection() {
+  haptic.selectionChanged()
+}
+
+function selectMode(value: string) {
+  if (selectedMode.value === value) return
+  selectedMode.value = value
+  onFormSelection()
+}
+
+function decrementCounter() {
+  counter.value -= 1
+  haptic.selectionChanged()
+}
+
+function incrementCounter() {
+  counter.value += 1
+  haptic.selectionChanged()
+}
+
 // Theme colors demo
 const themeColors = computed(() => [
   { name: 'Background', value: theme.backgroundColor.value || 'var(--tg-theme-bg-color)' },
@@ -277,3 +477,54 @@ onMounted(() => {
   }, 500)
 })
 </script>
+
+<style scoped>
+.tg-native-range {
+  appearance: none;
+  background: transparent;
+}
+
+.tg-native-range::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 9999px;
+  background: linear-gradient(
+    to right,
+    var(--tg-theme-button-color) 0%,
+    var(--tg-theme-button-color) var(--range-value, 60%),
+    var(--tg-theme-bg-color) var(--range-value, 60%),
+    var(--tg-theme-bg-color) 100%
+  );
+}
+
+.tg-native-range::-webkit-slider-thumb {
+  appearance: none;
+  width: 28px;
+  height: 28px;
+  margin-top: -12px;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--tg-theme-button-color);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 24%);
+}
+
+.tg-native-range::-moz-range-track {
+  height: 4px;
+  border-radius: 9999px;
+  background: var(--tg-theme-bg-color);
+}
+
+.tg-native-range::-moz-range-progress {
+  height: 4px;
+  border-radius: 9999px;
+  background: var(--tg-theme-button-color);
+}
+
+.tg-native-range::-moz-range-thumb {
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--tg-theme-button-color);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 24%);
+}
+</style>

package/app/types/telegram-webapp.ts

@@ -33,6 +33,14 @@ export interface TelegramWebAppInitData {
   can_send_after?: number
   auth_date: number
   hash: string
+  signature?: string
+}
+
+export interface TelegramWebAppInsets {
+  top: number
+  bottom: number
+  left: number
+  right: number
 }
 
 export interface TelegramWebAppThemeParams {
@@ -62,11 +70,15 @@ export interface TelegramWebAppBackButton {
 }
 
 export interface TelegramWebAppMainButton {
+  type?: 'main' | 'secondary'
+  iconCustomEmojiId?: string
   text: string
   color: string
   textColor: string
   isVisible: boolean
   isActive: boolean
+  hasShineEffect?: boolean
+  position?: 'left' | 'right' | 'top' | 'bottom'
   readonly isProgressVisible: boolean
   setText(text: string): void
   onClick(callback: () => void): void
@@ -78,20 +90,134 @@ export interface TelegramWebAppMainButton {
   showProgress(leaveActive?: boolean): void
   hideProgress(): void
   setParams(params: {
+    icon_custom_emoji_id?: string
     text?: string
     color?: string
     text_color?: string
+    has_shine_effect?: boolean
+    position?: 'left' | 'right' | 'top' | 'bottom'
     is_active?: boolean
     is_visible?: boolean
   }): void
 }
 
 export interface TelegramWebAppHapticFeedback {
-  impactOccurred(style: 'light' | 'medium' | 'heavy'): void
+  impactOccurred(style: 'light' | 'medium' | 'heavy' | 'rigid' | 'soft'): void
   notificationOccurred(type: 'error' | 'success' | 'warning'): void
   selectionChanged(): void
 }
 
+export interface TelegramWebAppSettingsButton {
+  isVisible: boolean
+  onClick(callback: () => void): void
+  offClick(callback: () => void): void
+  show(): void
+  hide(): void
+}
+
+export interface TelegramStorageError {
+  error?: string
+  message?: string
+}
+
+export type TelegramStorageCallback<T = boolean> = (error: TelegramStorageError | string | null, result?: T) => void
+
+export interface TelegramWebAppCloudStorage {
+  setItem(key: string, value: string, callback?: TelegramStorageCallback<boolean>): void
+  getItem(key: string, callback: TelegramStorageCallback<string>): void
+  getItems(keys: string[], callback: TelegramStorageCallback<Record<string, string>>): void
+  removeItem(key: string, callback?: TelegramStorageCallback<boolean>): void
+  removeItems(keys: string[], callback?: TelegramStorageCallback<boolean>): void
+  getKeys(callback: TelegramStorageCallback<string[]>): void
+}
+
+export interface TelegramWebAppDeviceStorage {
+  setItem(key: string, value: string, callback?: TelegramStorageCallback<boolean>): void
+  getItem(key: string, callback: TelegramStorageCallback<string | null>): void
+  removeItem(key: string, callback?: TelegramStorageCallback<boolean>): void
+  clear(callback?: TelegramStorageCallback<boolean>): void
+}
+
+export interface TelegramWebAppSecureStorage extends TelegramWebAppDeviceStorage {
+  getItem(key: string, callback: (error: TelegramStorageError | string | null, value?: string | null, canRestore?: boolean) => void): void
+  restoreItem(key: string, callback?: TelegramStorageCallback<string | null>): void
+}
+
+export interface TelegramWebAppBiometricManager {
+  isInited: boolean
+  isBiometricAvailable: boolean
+  biometricType: 'finger' | 'face' | 'unknown'
+  isAccessRequested: boolean
+  isAccessGranted: boolean
+  isBiometricTokenSaved: boolean
+  deviceId: string
+  init(callback?: () => void): void
+  requestAccess(params: { reason?: string }, callback?: (granted: boolean) => void): void
+  authenticate(params: { reason?: string }, callback?: (authenticated: boolean, token?: string) => void): void
+  updateBiometricToken(token: string, callback?: (updated: boolean) => void): void
+  openSettings(): void
+}
+
+export interface TelegramWebAppMotionSensor {
+  isStarted: boolean
+  x: number
+  y: number
+  z: number
+  start(params?: { refresh_rate?: number }, callback?: (started: boolean) => void): void
+  stop(callback?: (stopped: boolean) => void): void
+}
+
+export interface TelegramWebAppDeviceOrientation {
+  isStarted: boolean
+  absolute: boolean
+  alpha: number
+  beta: number
+  gamma: number
+  start(params?: { refresh_rate?: number, need_absolute?: boolean }, callback?: (started: boolean) => void): void
+  stop(callback?: (stopped: boolean) => void): void
+}
+
+export interface TelegramLocationData {
+  latitude: number
+  longitude: number
+  altitude: number | null
+  course: number | null
+  speed: number | null
+  horizontal_accuracy: number | null
+  vertical_accuracy: number | null
+  course_accuracy: number | null
+  speed_accuracy: number | null
+}
+
+export interface TelegramWebAppLocationManager {
+  isInited: boolean
+  isLocationAvailable: boolean
+  isAccessRequested: boolean
+  isAccessGranted: boolean
+  init(callback?: () => void): void
+  getLocation(callback: (location: TelegramLocationData | null) => void): void
+  openSettings(): void
+}
+
+export type TelegramHomeScreenStatus = 'unsupported' | 'unknown' | 'added' | 'missed'
+
+export interface TelegramStoryShareParams {
+  text?: string
+  widget_link?: {
+    url: string
+    name?: string
+  }
+}
+
+export interface TelegramEmojiStatusParams {
+  duration?: number
+}
+
+export interface TelegramDownloadFileParams {
+  url: string
+  file_name: string
+}
+
 export interface TelegramWebApp {
   initData: string
   initDataUnsafe: TelegramWebAppInitData
@@ -99,9 +225,14 @@ export interface TelegramWebApp {
   platform: string
   colorScheme: 'light' | 'dark'
   themeParams: TelegramWebAppThemeParams
+  isActive?: boolean
   isExpanded: boolean
+  isFullscreen?: boolean
+  isOrientationLocked?: boolean
   viewportHeight: number
   viewportStableHeight: number
+  safeAreaInset?: TelegramWebAppInsets
+  contentSafeAreaInset?: TelegramWebAppInsets
   headerColor: string
   backgroundColor: string
   bottomBarColor: string
@@ -109,7 +240,17 @@ export interface TelegramWebApp {
   isVerticalSwipesEnabled: boolean
   BackButton: TelegramWebAppBackButton
   MainButton: TelegramWebAppMainButton
+  SecondaryButton?: TelegramWebAppMainButton
+  SettingsButton?: TelegramWebAppSettingsButton
   HapticFeedback: TelegramWebAppHapticFeedback
+  CloudStorage?: TelegramWebAppCloudStorage
+  BiometricManager?: TelegramWebAppBiometricManager
+  Accelerometer?: TelegramWebAppMotionSensor
+  DeviceOrientation?: TelegramWebAppDeviceOrientation
+  Gyroscope?: TelegramWebAppMotionSensor
+  LocationManager?: TelegramWebAppLocationManager
+  DeviceStorage?: TelegramWebAppDeviceStorage
+  SecureStorage?: TelegramWebAppSecureStorage
 
   isVersionAtLeast(version: string): boolean
   setHeaderColor(color: string): void
@@ -119,13 +260,25 @@ export interface TelegramWebApp {
   disableClosingConfirmation(): void
   enableVerticalSwipes(): void
   disableVerticalSwipes(): void
-  onEvent(eventType: string, eventHandler: () => void): void
-  offEvent(eventType: string, eventHandler: () => void): void
+  requestFullscreen?(): void
+  exitFullscreen?(): void
+  lockOrientation?(): void
+  unlockOrientation?(): void
+  addToHomeScreen?(): void
+  checkHomeScreenStatus?(callback?: (status: TelegramHomeScreenStatus) => void): void
+  onEvent(eventType: string, eventHandler: (...args: any[]) => void): void
+  offEvent(eventType: string, eventHandler: (...args: any[]) => void): void
   sendData(data: string): void
   switchInlineQuery(query: string, choose_chat_types?: string[]): void
   openLink(url: string, options?: { try_instant_view?: boolean }): void
   openTelegramLink(url: string): void
   openInvoice(url: string, callback?: (status: string) => void): void
+  shareToStory?(mediaUrl: string, params?: TelegramStoryShareParams): void
+  shareMessage?(msgId: string, callback?: (sent: boolean) => void): void
+  setEmojiStatus?(customEmojiId: string, params?: TelegramEmojiStatusParams, callback?: (set: boolean) => void): void
+  requestEmojiStatusAccess?(callback?: (granted: boolean) => void): void
+  downloadFile?(params: TelegramDownloadFileParams, callback?: (accepted: boolean) => void): void
+  hideKeyboard?(): void
   showPopup(params: {
     title?: string
     message: string
@@ -144,6 +297,7 @@ export interface TelegramWebApp {
   readTextFromClipboard(callback?: (text: string) => void): void
   requestWriteAccess(callback?: (granted: boolean) => void): void
   requestContact(callback?: (granted: boolean) => void): void
+  requestChat?(reqId: string, callback?: (sent: boolean) => void): void
   ready(): void
   expand(): void
   close(): void

package/app/utils/color.ts

@@ -1,17 +1,42 @@
 export type RGB = { r?: number; g?: number; b?: number }
 
+const namedColors: Record<string, string> = {
+  red: '#ff0000',
+  green: '#008000',
+  blue: '#0000ff'
+}
+
+function componentToHex(value: number): string | null {
+  if (!Number.isInteger(value) || value < 0 || value > 255) return null
+  return value.toString(16).padStart(2, '0')
+}
+
 export function toHex(value?: RGB | `#${string}` | string | null): string {
   if (!value) return '—'
 
   if (typeof value === 'string') {
-    const v = value.trim()
-    return v.startsWith('#') ? v : '—'
+    const v = value.trim().toLowerCase()
+    if (/^#[0-9a-f]{6}$/.test(v)) return v
+    if (/^#[0-9a-f]{3}$/.test(v)) {
+      return `#${v.slice(1).split('').map(c => c + c).join('')}`
+    }
+
+    const rgb = v.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/)
+    if (rgb) {
+      const parts = rgb.slice(1).map(part => componentToHex(Number(part)))
+      if (parts.every(Boolean)) return `#${parts.join('')}`
+    }
+
+    return namedColors[v] || '—'
   }
 
   const { r, g, b } = value
   if (typeof r !== 'number' || typeof g !== 'number' || typeof b !== 'number') return '—'
-  const to = (n: number) => n.toString(16).padStart(2, '0')
-  return `#${to(r)}${to(g)}${to(b)}`
+  const red = componentToHex(r)
+  const green = componentToHex(g)
+  const blue = componentToHex(b)
+  if (!red || !green || !blue) return '—'
+  return `#${red}${green}${blue}`
 }
 
 export function toRgb(value?: RGB | `#${string}` | string | null): { r: number; g: number; b: number } | null {
@@ -34,4 +59,3 @@ export function toRgb(value?: RGB | `#${string}` | string | null): { r: number;
   if (typeof r !== 'number' || typeof g !== 'number' || typeof b !== 'number') return null
   return { r, g, b }
 }
-

package/nuxt.config.ts

@@ -27,7 +27,7 @@ export default defineNuxtConfig({
       ],
       script: [
         {
-          src: 'https://telegram.org/js/telegram-web-app.js?58'
+          src: 'https://telegram.org/js/telegram-web-app.js?62'
         }
       ]
     },