refactor

lib/actions/backButton/index.ts

@@ -1,7 +1,8 @@
+import { isVersionAtLeast } from '../isVersionAtLeast'
+
 export { offClick, onClick } from './events'
 export { hide, show } from './visible'
-import { isVersionAtLeast } from '../isVersionAtLeast'
 
-export function isBackButtonSupported(): boolean {
+export function isSupported(): boolean {
   return isVersionAtLeast('6.1')
 }

lib/actions/backgroundColor/index.ts

@@ -0,0 +1,12 @@
+import { updateState } from '../../state'
+import { webApp } from '../../webApp'
+import { isVersionAtLeast } from '../isVersionAtLeast'
+
+export function isSupported(): boolean {
+  return isVersionAtLeast('6.1')
+}
+
+export function set(color: string) {
+  webApp.setBackgroundColor(color)
+  updateState()
+}

lib/actions/closingConfirmation/index.ts

@@ -0,0 +1,17 @@
+import { updateState } from '../../state'
+import { webApp } from '../../webApp'
+import { isVersionAtLeast } from '../isVersionAtLeast'
+
+export function isSupported(): boolean {
+  return isVersionAtLeast('6.2')
+}
+
+export function enable() {
+  webApp.enableClosingConfirmation()
+  updateState()
+}
+
+export function disable() {
+  webApp.disableClosingConfirmation()
+  updateState()
+}

lib/actions/cloudStorage/index.ts

@@ -1,11 +1,12 @@
+import { isVersionAtLeast } from '../isVersionAtLeast'
+
 export { getItem } from './getItem'
 export { getItems } from './getItems'
 export { getKeys } from './getKeys'
 export { removeItem } from './removeItem'
 export { removeItems } from './removeItems'
 export { setItem } from './setItem'
-import { isVersionAtLeast } from '../isVersionAtLeast'
 
-export function isHapticFeedbackSupported(): boolean {
+export function isSupported(): boolean {
   return isVersionAtLeast('6.9')
 }

lib/actions/events/index.ts

@@ -0,0 +1,10 @@
+import { Events } from '../../enums'
+import { webApp } from '../../webApp'
+
+export function onEvent(eventType: Events, eventHandler: (arg?: any) => void) {
+  webApp.onEvent(eventType, eventHandler)
+}
+
+export function offEvent(eventType: Events, eventHandler: (arg?: any) => void) {
+  webApp.offEvent(eventType, eventHandler)
+}

lib/actions/expand/index.ts

@@ -0,0 +1,22 @@
+import { state } from '../../options'
+import { updateState } from '../../state'
+import { webApp } from '../../webApp'
+
+let autoExpandHandler: any
+
+export function index() {
+  webApp.expand()
+  updateState()
+}
+
+export function enableAutoExpand() {
+  autoExpandHandler = setInterval(() => {
+    if (!webApp.isExpanded) {
+      index()
+    }
+  }, state.autoExpandInterval)
+}
+
+export function disableAutoExpand() {
+  clearInterval(autoExpandHandler)
+}

lib/actions/hapticFeedback/index.ts

@@ -1,8 +1,9 @@
+import { isVersionAtLeast } from '../isVersionAtLeast'
+
 export { impactOccurred } from './impactOccurred'
 export { notificationOccurred } from './notificationOccurred'
 export { selectionChanged } from './selectionChanged'
-import { isVersionAtLeast } from '../isVersionAtLeast'
 
-export function isHapticFeedbackSupported(): boolean {
+export function isSupported(): boolean {
   return isVersionAtLeast('6.1')
 }

lib/actions/headerColor/index.ts

@@ -0,0 +1,12 @@
+import { updateState } from '../../state'
+import { webApp } from '../../webApp'
+import { isVersionAtLeast } from '../isVersionAtLeast'
+
+export function isSupported(): boolean {
+  return isVersionAtLeast('6.1')
+}
+
+export function set(color: string) {
+  webApp.setHeaderColor(color)
+  updateState()
+}

lib/actions/index.ts

@@ -1,18 +1,12 @@
-import * as BackButton from './backButton'
-import * as CloudStorage from './cloudStorage'
-import * as HapticFeedback from './hapticFeedback'
-
+export * as BackButton from './backButton'
+export * as BackgroundColor from './backgroundColor'
 export { close } from './close'
-export {
-  disableClosingConfirmation,
-  enableClosingConfirmation,
-  isClosingConfirmationSupported
-} from './closingConfirmation'
-export { offEvent, onEvent } from './events'
-export { autoExpand, expand, stopAutoExpand } from './expand'
+export * as ClosingConfirmation from './closingConfirmation'
+export * as CloudStorage from './cloudStorage'
+export * as Events from './events'
+export * as Expand from './expand'
+export * as HapticFeedback from './hapticFeedback'
+export * as HeaderColor from './headerColor'
 export { isVersionAtLeast } from './isVersionAtLeast'
 export { ready } from './ready'
-export { isBackgroundColorSupported, setBackgroundColor } from './setBackgroundColor'
-export { isHeaderColorSupported, setHeaderColor } from './setHeaderColor'
-export { disableVerticalSwipes, enableVerticalSwipes, isVerticalSwipesSupported } from './verticalSwipes'
-export { BackButton, CloudStorage, HapticFeedback }
+export * as VerticalSwipes from './verticalSwipes'

lib/actions/verticalSwipes/index.ts

@@ -0,0 +1,17 @@
+import { updateState } from '../../state'
+import { webApp } from '../../webApp'
+import { isVersionAtLeast } from '../isVersionAtLeast'
+
+export function isSupported(): boolean {
+  return isVersionAtLeast('7.7')
+}
+
+export function enable() {
+  webApp.enableVerticalSwipes()
+  updateState()
+}
+
+export function disable() {
+  webApp.disableVerticalSwipes()
+  updateState()
+}

lib/enums.ts

@@ -0,0 +1,16 @@
+export enum Events {
+  ThemeChanged = 'themeChanged',
+  ViewportChanged = 'viewportChanged',
+  MainButtonClicked = 'mainButtonClicked',
+  BackButtonClicked = 'backButtonClicked',
+  SettingsButtonClicked = 'settingsButtonClicked',
+  InvoiceClosed = 'invoiceClosed',
+  PopupClosed = 'popupClosed',
+  QrTextReceived = 'qrTextReceived',
+  ClipboardTextReceived = 'clipboardTextReceived',
+  WriteAccessRequested = 'writeAccessRequested',
+  ContactRequested = 'contactRequested',
+  BiometricManagerUpdated = 'biometricManagerUpdated',
+  BiometricAuthRequested = 'biometricAuthRequested',
+  BiometricTokenUpdated = 'biometricTokenUpdated'
+}

lib/helpers/fixTma.ts

@@ -1,4 +1,4 @@
-import { enableVerticalSwipes, isVerticalSwipesSupported } from '../actions/verticalSwipes'
+import { VerticalSwipes } from '../actions'
 
 const options = { passive: false }
 let ts: any
@@ -29,8 +29,8 @@ function onScroll() {
 }
 
 export function fixTma(el: HTMLElement | null) {
-  if (isVerticalSwipesSupported()) {
-    enableVerticalSwipes()
+  if (VerticalSwipes.isSupported()) {
+    VerticalSwipes.enable()
   } else {
     scrollableEl = el
 
@@ -48,7 +48,7 @@ export function fixTma(el: HTMLElement | null) {
 }
 
 export function unfixTma() {
-  if (!isVerticalSwipesSupported()) {
+  if (!VerticalSwipes.isSupported()) {
     window.removeEventListener('scroll', onScroll)
     document.documentElement.removeEventListener('touchstart', onTouchStart)
     document.documentElement.removeEventListener('touchmove', onTouchMove)

lib/index.ts

@@ -1,8 +1,8 @@
 export * from './actions'
+export { Events } from './enums'
 export { fixIosMultitaps, unfixIosMultitaps } from './helpers/fixIosMultitaps'
 export { fixTma, unfixTma } from './helpers/fixTma'
 export { createTelegramMiniApp } from './plugin'
 export { state, updateState } from './state'
-export { EventType } from './types'
 export type { Options } from './types'
 export { webApp } from './webApp'

lib/options.ts

@@ -1,6 +1,6 @@
 import { reactive } from 'vue'
 
-import { autoExpand, enableClosingConfirmation, setBackgroundColor, setHeaderColor } from './actions'
+import { BackgroundColor, ClosingConfirmation, Expand, HeaderColor } from './actions'
 import type { Options } from './types'
 
 export const state = reactive<Options>({
@@ -13,18 +13,18 @@ export function setOptions(options: Options) {
   }
 
   if (options.alwaysExpand) {
-    autoExpand()
+    Expand.enableAutoExpand()
   }
 
   if (options.closingConfirmation) {
-    enableClosingConfirmation()
+    ClosingConfirmation.enable()
   }
 
   if (options.headerColor) {
-    setHeaderColor(options.headerColor)
+    HeaderColor.set(options.headerColor)
   }
 
   if (options.backgroundColor) {
-    setBackgroundColor(options.backgroundColor)
+    BackgroundColor.set(options.backgroundColor)
   }
 }

lib/types.ts

@@ -21,20 +21,3 @@ export type Options = {
   headerColor?: `#${string}` | 'bg_color' | 'secondary_bg_color'
   backgroundColor?: `#${string}` | 'bg_color' | 'secondary_bg_color'
 }
-
-export enum EventType {
-  ThemeChanged = 'themeChanged',
-  ViewportChanged = 'viewportChanged',
-  MainButtonClicked = 'mainButtonClicked',
-  BackButtonClicked = 'backButtonClicked',
-  SettingsButtonClicked = 'settingsButtonClicked',
-  InvoiceClosed = 'invoiceClosed',
-  PopupClosed = 'popupClosed',
-  QrTextReceived = 'qrTextReceived',
-  ClipboardTextReceived = 'clipboardTextReceived',
-  WriteAccessRequested = 'writeAccessRequested',
-  ContactRequested = 'contactRequested',
-  BiometricManagerUpdated = 'biometricManagerUpdated',
-  BiometricAuthRequested = 'biometricAuthRequested',
-  BiometricTokenUpdated = 'biometricTokenUpdated'
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolirt/vue-telegram-mini-app",
-  "version": "0.0.8",
+  "version": "1.0.0",
   "type": "module",
   "description": "Vue 3 telegram mini app package",
   "author": "kolirt",