nuxt-telegram-mini-app 0.0.1 → 0.0.2

package/README.md

@@ -226,29 +226,46 @@ Nuxt Layers provide a way to extend and customize Nuxt applications by sharing c
 
 ### Using This Template as a Layer
 
-To use this Telegram Mini App template as a layer in another Nuxt project:
+To use this Telegram Mini App template as a layer in another Nuxt project, install it as an NPM package:
 
-1. **Clone or reference the layer**:
+1. **Install the NPM package**:
    ```bash
-   # Option 1: Clone as a subdirectory
+   npm install nuxt-telegram-mini-app
+   # or
+   yarn add nuxt-telegram-mini-app
+   # or
+   pnpm add nuxt-telegram-mini-app
+   ```
+
+2. **Configure your Nuxt project** to extend this layer:
+   ```ts
+   // nuxt.config.ts
+   export default defineNuxtConfig({
+     extends: [
+       'nuxt-telegram-mini-app'
+     ],
+     // Your custom config here
+   })
+   ```
+
+   Alternatively, if you prefer to use a local clone or git dependency:
+   ```bash
+   # Clone as a subdirectory
    git clone https://github.com/patricktobias86/nuxt-telegram-mini-app.git layers/telegram-app
 
-   # Option 2: Add as git dependency (recommended for teams)
-   # In your project's package.json:
+   # Or add as git dependency in package.json:
    # "dependencies": {
    #   "nuxt-telegram-mini-app": "github:patricktobias86/nuxt-telegram-mini-app"
    # }
    ```
 
-2. **Configure your Nuxt project** to extend this layer:
+   Then configure:
    ```ts
    // nuxt.config.ts
    export default defineNuxtConfig({
      extends: [
-       // Local path
-       './layers/telegram-app',
-       // Or npm package
-       // 'nuxt-telegram-mini-app'
+       './layers/telegram-app'
+       // or 'nuxt-telegram-mini-app' for git dependency
      ],
      // Your custom config here
    })

package/app/assets/css/main.css

@@ -40,7 +40,7 @@ html, body {
   overscroll-behavior: contain;
 }
 
-.tg-bg { background-color: var(--tg-theme-secondary-bg-color); }
+.tg-bg { background-color: var(---tg-theme-bg-color); }
 .tg-secondary-bg { background-color: var(--tg-theme-secondary-bg-color); }
 .tg-section-bg { background-color: var(--tg-theme-section-bg-color); }
 .tg-link, a { color: var(--tg-theme-link-color); }

package/app/components/tg/Button.vue

@@ -1,16 +1,17 @@
 <template>
-  <component :is="tag" v-bind="bind" :class="classes" :disabled="disabled || loading" @click="onClick">
+  <div class="px-3">
+    <component :is="tag" v-bind="bind" :class="classes" :disabled="disabled || loading" @click="onClick">
     <Icon v-if="loading" name="i-heroicons-arrow-path-20-solid" class="h-5 w-5 animate-spin" />
     <Icon v-if="icon && iconPosition === 'left' && !loading" :name="icon" class="h-5 w-5" />
     <span>{{ title }}</span>
     <Icon v-if="icon && iconPosition === 'right' && !loading" :name="icon" class="h-5 w-5" />
   </component>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { shareURL } from '~/composables/telegram'
-import { useHapticFeedback } from '~/composables/telegram'
+import { shareURL, useHapticFeedback  } from '~/composables/telegram'
 
 const props = withDefaults(defineProps<{
   title: string

package/app/components/tg/Cell.vue

@@ -79,7 +79,7 @@ const bgClass = computed(() => props.tone === 'secondary' ? 'bg-secondaryBg' : '
 const showChevron = computed(() => props.chevron ?? isLink.value)
 
 const rootClass = computed(() => [
-  'w-full flex items-center gap-3 px-4 py-3',
+  'w-full flex items-center gap-3 p-4',
   bgClass.value,
   props.border ? 'border-b border-sectionSeparator last:border-b-0' : '',
   (isLink.value || props.clickable) ? 'hover:bg-secondaryBg transition-colors' : '',

package/app/components/tg/Content.vue

@@ -2,6 +2,7 @@
   <component :is="asTag" :class="rootClasses">
     <slot />
   </component>
+  <div class="h-2" />
 </template>
 
 <script setup lang="ts">

package/app/pages/index.vue

@@ -10,12 +10,10 @@
       <TgCell
         title="Navigation Demo"
         subtitle="Use the bottom navigation bar to navigate"
-        icon="i-heroicons-arrow-right-circle-20-solid"
+        icon="heroicons:clipboard-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"
+        title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo."
       />
         <template #append>
         Use the navigation bar at the bottom to switch between pages.
@@ -24,15 +22,14 @@
 
     <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>
 
+      <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" />
+
     <TgSection title="Init Data" inset>
       <TgCell title="User" :description="initUser" icon="i-heroicons-user-20-solid" />
       <TgCell title="Query ID" :description="initQueryId" />
@@ -42,10 +39,6 @@
     <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>
@@ -69,16 +62,18 @@
         <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>
+      
+      <div class="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>
+
     </ClientOnly>
 
     <TgSection title="Links" inset>
-      <div class="p-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+      <div class="p-4 grid grid-cols-1 sm:grid-cols-3">
         <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" />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-telegram-mini-app",
   "description": "Structure and configurations for building a Telegram Mini App using Nuxt and TailWind, hosted on Netlify.",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "build": "nuxt build",