nuxt-telegram-mini-app 0.0.1

package/app/pages/components.vue

@@ -0,0 +1,279 @@
+<template>
+  <TgContent>
+    <Hero
+      title="Components Demo"
+      subtitle="Interactive showcase of all Telegram Mini App components"
+    />
+
+    <TgSection title="Buttons" inset>
+      <div class="p-4 space-y-3">
+        <div class="space-y-2">
+          <h3 class="text-sm font-medium text-subtitle">Primary Buttons</h3>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            <TgButton title="Default Primary" status="primary" haptic />
+            <TgButton title="Disabled Primary" status="primary" :disabled="true" />
+          </div>
+        </div>
+        
+        <div class="space-y-2">
+          <h3 class="text-sm font-medium text-subtitle">Secondary Buttons</h3>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            <TgButton title="Secondary" status="secondary" haptic="impact-light" />
+            <TgButton title="Outline" status="outline" haptic="selection" />
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <h3 class="text-sm font-medium text-subtitle">Special States</h3>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            <TgButton title="Loading..." status="primary" :loading="loadingButton" @click="toggleLoading" />
+            <TgButton title="Destructive" status="destructive" haptic="notification-warning" />
+          </div>
+        </div>
+      </div>
+    </TgSection>
+
+    <TgSection title="Cells & Lists" inset>
+      <TgCell
+        title="Basic Cell"
+        subtitle="Simple cell with subtitle"
+        icon="i-heroicons-star-20-solid"
+      />
+      <TgCell
+        title="Cell with Description"
+        :description="cellDescription"
+        icon="i-heroicons-information-circle-20-solid"
+      />
+      <TgCell
+        title="Interactive Cell"
+        subtitle="Demo cell (no navigation)"
+        icon="i-heroicons-arrow-right-circle-20-solid"
+        @click="onCellClick"
+      />
+      <TgCell
+        title="Cell with Action"
+        subtitle="Custom click handler"
+        icon="i-heroicons-bolt-20-solid"
+        @click="onCellClick"
+        :border="false"
+      />
+      <TgCell
+        title="Router Link Cell"
+        subtitle="Navigates using NuxtLink"
+        icon="i-heroicons-chevron-right-20-solid"
+        to="/"
+      />
+      <TgCell
+        title="External Link Cell"
+        subtitle="Opens external URL"
+        icon="i-heroicons-arrow-top-right-on-square-20-solid"
+        href="https://nuxt.com"
+      />
+    </TgSection>
+
+    <TgSection title="Color Showcase" inset>
+      <div class="p-4 space-y-4">
+        <div class="space-y-2">
+          <h3 class="text-sm font-medium text-subtitle">Theme Colors</h3>
+          <div class="grid grid-cols-2 gap-3">
+            <div v-for="color in themeColors" :key="color.name" class="flex items-center gap-2">
+              <div 
+                class="w-4 h-4 rounded border border-sectionSeparator"
+                :style="{ backgroundColor: color.value }"
+              />
+              <span class="text-xs">{{ color.name }}</span>
+            </div>
+          </div>
+        </div>
+        
+        <div class="space-y-2">
+          <h3 class="text-sm font-medium text-subtitle">Dynamic Colors</h3>
+          <div class="flex flex-wrap gap-2">
+            <button
+              v-for="colorOption in backgroundColors"
+              :key="colorOption.name"
+              class="px-3 py-1 text-xs rounded border border-sectionSeparator"
+              :style="{ backgroundColor: colorOption.value, color: colorOption.textColor }"
+              @click="changeBackgroundColor(colorOption.value)"
+            >
+              {{ colorOption.name }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </TgSection>
+
+    <TgSection title="Interactive Elements" inset>
+      <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>
+        </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">
+                <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"
+                >
+                  -
+                </button>
+                <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"
+                >
+                  +
+                </button>
+              </div>
+            </div>
+            <div class="space-y-1">
+              <div class="flex justify-between text-sm">
+                <span>Progress</span>
+                <span>{{ progress }}%</span>
+              </div>
+              <div class="w-full h-2 bg-secondaryBg rounded-full overflow-hidden">
+                <div
+                  class="h-full bg-link transition-all duration-300"
+                  :style="{ width: `${progress}%` }"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </TgSection>
+
+    <TgSection title="Haptic Feedback Demo" inset>
+      <div class="p-4 grid grid-cols-2 sm:grid-cols-3 gap-2">
+        <TgButton
+          title="Light Impact"
+          haptic="impact-light"
+          status="outline"
+          @click="() => {}"
+        />
+        <TgButton
+          title="Medium Impact"
+          haptic="impact-medium"
+          status="outline"
+          @click="() => {}"
+        />
+        <TgButton
+          title="Heavy Impact"
+          haptic="impact-heavy"
+          status="outline"
+          @click="() => {}"
+        />
+        <TgButton
+          title="Success"
+          haptic="notification-success"
+          status="outline"
+          @click="() => {}"
+        />
+        <TgButton
+          title="Warning"
+          haptic="notification-warning"
+          status="outline"
+          @click="() => {}"
+        />
+        <TgButton
+          title="Error"
+          haptic="notification-error"
+          status="outline"
+          @click="() => {}"
+        />
+      </div>
+    </TgSection>
+
+    <div class="h-2" />
+  </TgContent>
+
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useHapticFeedback, useMiniApp, useThemeParams, useMainButton } from '~/composables/telegram'
+
+const haptic = useHapticFeedback()
+const mini = useMiniApp()
+const theme = useThemeParams()
+const main = useMainButton()
+
+// Interactive state
+const loadingButton = ref(false)
+const counter = ref(0)
+const textInput = ref('')
+const textareaInput = ref('')
+
+const progress = computed(() => Math.min(100, Math.max(0, counter.value * 10)))
+
+const cellDescription = computed(() => {
+  if (textInput.value) return `You typed: "${textInput.value}"`
+  return 'Type something in the input above'
+})
+
+function toggleLoading() {
+  loadingButton.value = true
+  setTimeout(() => {
+    loadingButton.value = false
+    haptic.notificationOccurred('success')
+  }, 2000)
+}
+
+function onCellClick() {
+  haptic.impactOccurred('medium')
+  counter.value += 5
+}
+
+// Theme colors demo
+const themeColors = computed(() => [
+  { name: 'Background', value: theme.backgroundColor.value || 'var(--tg-theme-bg-color)' },
+  { name: 'Text', value: theme.textColor.value || 'var(--tg-theme-text-color)' },
+  { name: 'Button', value: theme.buttonColor.value || 'var(--tg-theme-button-color)' },
+  { name: 'Button Text', value: theme.buttonTextColor.value || 'var(--tg-theme-button-text-color)' },
+  { name: 'Link', value: theme.linkColor.value || 'var(--tg-theme-link-color)' },
+  { name: 'Secondary BG', value: theme.secondaryBackgroundColor.value || 'var(--tg-theme-secondary-bg-color)' },
+])
+
+const backgroundColors = [
+  { name: 'Default', value: 'var(--tg-theme-bg-color)', textColor: 'var(--tg-theme-text-color)' },
+  { name: 'Dark', value: '#1a1a1a', textColor: '#ffffff' },
+  { name: 'Blue', value: '#0088cc', textColor: '#ffffff' },
+  { name: 'Green', value: '#00c896', textColor: '#ffffff' },
+  { name: 'Purple', value: '#8b5cf6', textColor: '#ffffff' },
+]
+
+function changeBackgroundColor(color: string) {
+  mini.setBackgroundColor(color)
+  haptic.selectionChanged()
+}
+
+// Hide Main Button since we're using TgNav for navigation
+onMounted(() => {
+  main.mount()
+  
+  setTimeout(() => {
+    try {
+      main.setParams({ is_visible: false })
+    } catch (e) {
+      console.warn('Failed to hide main button:', e)
+    }
+  }, 500)
+})
+</script>

package/app/pages/functions.vue

@@ -0,0 +1,107 @@
+<template>
+  <TgContent>
+    <Hero
+      title="Functions"
+      image-src="/img/hero-user.svg"
+    />
+
+    <TgSection title="Navigation" inset>
+      <TgCell
+        title="Use Back Button"
+        subtitle="Telegram back button is shown on this page"
+        icon="i-heroicons-arrow-left-circle-20-solid"
+      />
+      <div class="p-4">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <TgButton title="Go Back (fallback)" haptic @click="goBack" />
+          <TgButton title="Go to Components" status="outline" to="/components" haptic="selection" />
+        </div>
+      </div>
+    </TgSection>
+
+    <TgSection title="Main Button" inset>
+      <TgCell title="Main Button is hidden" subtitle="Using bottom navigation instead" />
+      <div class="p-4">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <TgButton title="Demo Button" haptic @click="() => {}" />
+          <TgButton title="Toggle Main Button" status="outline" haptic="selection" @click="toggleMain" />
+        </div>
+      </div>
+    </TgSection>
+
+    <TgSection title="Links & Sharing" inset>
+      <div class="p-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+        <TgButton title="Open Nuxt" href="https://nuxt.com" haptic />
+        <TgButton title="Open Telegram" haptic @click="() => openTelegramLink('https://t.me/nuxt_tg_demo_bot')" />
+        <TgButton title="Share This Page" :share-url="shareUrl" haptic="notification-success" />
+      </div>
+    </TgSection>
+
+    <div class="h-2" />
+  </TgContent>
+
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useBackButton, useMainButton, openTelegramLink } from '~/composables/telegram'
+
+const back = useBackButton()
+const main = useMainButton()
+const router = useRouter()
+
+function goBack() {
+  if (!import.meta.client) return
+  // Prefer router navigation to play nicely with Nuxt links/TgNav
+  if (window.history.length > 1) {
+    try { router.back() } catch { /* fallback below */ }
+  } else {
+    try { router.push('/') } catch { /* no-op */ }
+  }
+}
+
+function toggleMain() {
+  const visible = !main.visible.value
+  main.setParams({ is_visible: visible })
+}
+
+// SSR-safe current URL for sharing examples
+const shareUrl = computed(() => import.meta.client ? window.location.href : 'https://example.com')
+
+onMounted(() => {
+  // Back Button wiring with guarded polling to avoid early store reads
+  back.mount()
+  const pollBack = setInterval(() => {
+    try {
+      // If store not ready yet, any error is swallowed
+      if (back.mounted.value) {
+        try { back.show() } catch {}
+        clearInterval(pollBack)
+      }
+    } catch {}
+  }, 50)
+  // Register back handler and properly unregister on unmount
+  const backHandler = () => { goBack() }
+  back.onClick(backHandler)
+
+  // Hide Main Button since we're using TgNav for navigation
+  main.mount()
+  const pollMain = setInterval(() => {
+    try {
+      if (main.mounted.value) {
+        main.setParams({ is_visible: false })
+        clearInterval(pollMain)
+      }
+    } catch {}
+  }, 50)
+
+  onBeforeUnmount(() => {
+    try { back.offClick(backHandler) } catch {}
+    try { back.hide() } catch {}
+  })
+})
+</script>
+
+<style scoped>
+</style>

package/app/pages/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <TgContent>
+    <Hero
+      title="Telegram Mini App Demo"
+      subtitle="Showcasing components and SDK integrations"
+      image-src="/img/nuxt-logo.svg"
+    />
+
+    <TgSection title="Navigation" inset>
+      <TgCell
+        title="Navigation Demo"
+        subtitle="Use the bottom navigation bar to navigate"
+        icon="i-heroicons-arrow-right-circle-20-solid"
+      />
+        <TgButton title="Demo Button" status="primary" haptic @click="() => haptic.impactOccurred('medium')" />
+        <TgButton title="Toggle Main Button" status="primary" haptic="selection" @click="toggleMain" />
+        <TgCell
+        title="Example Cell without icon"
+      />
+        <template #append>
+        Use the navigation bar at the bottom to switch between pages.
+        </template>
+    </TgSection>
+
+    <TgSection title="Haptic Feedback" inset>
+      <TgCell title="Supported" :description="hapticSupported" icon="i-heroicons-bolt-20-solid" :border="false" />
+      <div class="p-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+        <TgButton title="Impact" :disabled="!hapticSupportedBool" @click="haptic.impactOccurred('medium')" />
+        <TgButton title="Notification" :disabled="!hapticSupportedBool" @click="haptic.notificationOccurred('success')" />
+        <TgButton title="Selection" :disabled="!hapticSupportedBool" @click="haptic.selectionChanged()" />
+        <!-- Example using TgButton's built-in haptic prop -->
+        <TgButton title="Built-in Haptic (medium)" haptic="impact-medium" />
+      </div>
+    </TgSection>
+
+    <TgSection title="Init Data" inset>
+      <TgCell title="User" :description="initUser" icon="i-heroicons-user-20-solid" />
+      <TgCell title="Query ID" :description="initQueryId" />
+      <TgCell title="Start Param" :description="initStartParam" :border="false" />
+    </TgSection>
+
+    <TgSection title="Mini App" inset>
+      <TgCell title="Supported" :description="miniSupported" icon="i-heroicons-check-badge-20-solid" />
+      <TgCell title="Dark" :description="miniDark" />
+      <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <TgButton title="Header = bg" :disabled="!miniSupportedBool" haptic @click="mini.setHeaderColor('bg_color')" />
+        <TgButton title="BG = bg" :disabled="!miniSupportedBool" haptic @click="mini.setBackgroundColor('bg_color')" />
+      </div>
+    </TgSection>
+
+    <ClientOnly>
+      <TgSection title="Theme Params" inset>
+        <div class="p-4 grid grid-cols-1 gap-3 text-sm">
+          <div class="flex items-center gap-2">
+            <span class="inline-block w-4 h-4 rounded" :style="{ background: themeBgHex }" />
+            <span>BG: {{ themeBgHex }}</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="inline-block w-4 h-4 rounded" :style="{ background: themeTextHex }" />
+            <span>Text: {{ themeTextHex }}</span>
+          </div>
+        </div>
+      </TgSection>
+    </ClientOnly>
+
+    <ClientOnly>
+      <TgSection title="Viewport" inset>
+        <TgCell title="Width" :description="viewportWidth" />
+        <TgCell title="Height" :description="viewportHeight" />
+        <TgCell title="Stable Height" :description="viewportStableHeight" />
+        <TgCell title="Expanded" :description="String(viewport.expanded.value ?? false)" :border="false" />
+        <div class="p-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+          <TgButton title="Expand" haptic @click="viewport.expand" />
+          <TgButton title="Fullscreen" haptic="impact-light" @click="onRequestFullscreen" />
+          <TgButton title="Exit FS" haptic="impact-light" @click="onExitFullscreen" />
+        </div>
+      </TgSection>
+    </ClientOnly>
+
+    <TgSection title="Links" inset>
+      <div class="p-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+        <TgButton title="Open Link" haptic @click="openLink('https://t.me/n')" />
+        <TgButton title="Open Telegram" haptic @click="openTelegramLink('https://t.me/nuxt_tg_demo_bot')" />
+        <TgButton title="Share URL" haptic="notification-success" :share-url="shareUrl" />
+      </div>
+    </TgSection>
+
+    <div class="h-2" />
+  </TgContent>
+</template>
+
+<script setup lang="ts">
+import { onMounted, computed } from 'vue'
+import { toHex } from '~/utils/color'
+import { useRequestURL } from '#app'
+import {
+  useHapticFeedback,
+  useInitData,
+  useMainButton,
+  useMiniApp,
+  useThemeParams,
+  useViewport,
+  openLink,
+  openTelegramLink,
+} from '~/composables/telegram'
+
+const main = useMainButton()
+const haptic = useHapticFeedback()
+const init = useInitData()
+const mini = useMiniApp()
+const theme = useThemeParams()
+const viewport = useViewport()
+
+// SSR-safe current URL for sharing
+const reqURL = useRequestURL()
+const shareUrl = computed(() => import.meta.client ? window.location.href : reqURL.href)
+
+function toggleMain() {
+  const visible = !main.visible.value
+  main.setParams({ is_visible: visible })
+}
+
+// Guarded access helpers to avoid early SDK store reads
+const safe = function <T>(fn: () => T, fallback: T): T {
+  try { return fn() } catch { return fallback }
+}
+
+// Haptic
+const hapticSupported = computed(() => String(safe(() => haptic.supported.value, false)))
+const hapticSupportedBool = computed(() => safe(() => !!haptic.supported.value, false))
+
+// Mini App
+const miniSupported = computed(() => String(safe(() => mini.supported.value, false)))
+const miniSupportedBool = computed(() => safe(() => !!mini.supported.value, false))
+const miniDark = computed(() => String(safe(() => mini.dark.value, false)))
+
+// Init Data
+const initUser = computed(() => safe(() => init.user.value?.username || init.user.value?.first_name || '—', '—'))
+const initQueryId = computed(() => safe(() => init.queryId.value || '—', '—'))
+const initStartParam = computed(() => safe(() => init.startParam.value || '—', '—'))
+
+onMounted(async () => {
+  // Hide Main Button since we're using TgNav for navigation
+  main.mount()
+  
+  setTimeout(() => {
+    try {
+      main.setParams({ is_visible: false })
+    } catch (e) {
+      console.warn('Failed to hide main button:', e)
+    }
+  }, 500)
+
+  // Try restore init data if not present yet (fallback for some environments)
+  try {
+    if (!init.state.value) init.restore()
+  } catch {
+    // Ignore restore errors - this is a fallback mechanism
+  }
+})
+
+// Fallbacks for Theme Params and Viewport displays
+const themeBgHex = computed(() => {
+  const hex = toHex(theme.backgroundColor.value)
+  if (hex !== '—') return hex
+  if (import.meta.client) {
+    const v = getComputedStyle(document.documentElement).getPropertyValue('--tg-theme-bg-color')?.trim()
+    return v || '—'
+  }
+  return '—'
+})
+
+const themeTextHex = computed(() => {
+  const hex = toHex(theme.textColor.value)
+  if (hex !== '—') return hex
+  if (import.meta.client) {
+    const v = getComputedStyle(document.documentElement).getPropertyValue('--tg-theme-text-color')?.trim()
+    return v || '—'
+  }
+  return '—'
+})
+
+const viewportWidth = computed(() => String(safe(() => viewport.width.value, undefined) ?? (import.meta.client ? window.innerWidth : '—')))
+const viewportHeight = computed(() => String(safe(() => viewport.height.value, undefined) ?? (import.meta.client ? window.innerHeight : '—')))
+const viewportStableHeight = computed(() => String(safe(() => viewport.stableHeight.value, undefined) ?? (import.meta.client ? window.innerHeight : '—')))
+
+function onRequestFullscreen() {
+  try { 
+    viewport.requestFullscreen() 
+  } catch {
+    // Ignore viewport fullscreen errors - fallback to browser API
+  }
+  if (import.meta.client && document.fullscreenEnabled && !document.fullscreenElement) {
+    document.documentElement.requestFullscreen?.().catch(() => {})
+  }
+}
+
+function onExitFullscreen() {
+  try { 
+    viewport.exitFullscreen() 
+  } catch {
+    // Ignore viewport fullscreen errors - fallback to browser API
+  }
+  if (import.meta.client && document.fullscreenElement) {
+    document.exitFullscreen?.().catch(() => {})
+  }
+}
+</script>
+
+<style scoped>
+</style>