Add ability to change state directly via refs

Closes #5

Author: deptyped

src/composables/useWebAppBackButton.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useWebApp } from './useWebApp'
 import type { OnBackButtonClickedCallback } from '~/types'
 
@@ -25,7 +25,14 @@ export function useWebAppBackButton() {
     onEvent('backButtonClicked', eventHandler)
 
   return {
-    isBackButtonVisible,
+    isBackButtonVisible: computed({
+      get() {
+        return isBackButtonVisible.value
+      },
+      set(isVisible) {
+        isVisible ? showBackButton() : hideBackButton()
+      },
+    }),
     onBackButtonClicked,
     showBackButton,
     hideBackButton,

src/composables/useWebAppClosingConfirmation.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 const isClosingConfirmationEnabled = ref(Telegram.WebApp.isClosingConfirmationEnabled)
 
@@ -18,7 +18,14 @@ function disableClosingConfirmation(...params: Parameters<typeof Telegram.WebApp
 
 export function useWebAppClosingConfirmation() {
   return {
-    isClosingConfirmationEnabled,
+    isClosingConfirmationEnabled: computed({
+      get() {
+        return isClosingConfirmationEnabled.value
+      },
+      set(isEnabled) {
+        isEnabled ? enableClosingConfirmation() : disableClosingConfirmation()
+      },
+    }),
     enableClosingConfirmation,
     disableClosingConfirmation,
   }

src/composables/useWebAppMainButton.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useWebApp } from './useWebApp'
 import type { OnMainButtonClickedCallback } from '~/types'
 
@@ -65,12 +65,58 @@ export function useWebAppMainButton() {
     onEvent('mainButtonClicked', eventHandler)
 
   return {
-    mainButtonText,
-    mainButtonColor,
-    mainButtonTextColor,
-    isMainButtonVisible,
-    isMainButtonActive,
-    isMainButtonProgressVisible,
+    mainButtonText: computed({
+      get() {
+        return mainButtonText.value
+      },
+      set(text) {
+        setMainButtonText(text)
+      },
+    }),
+    mainButtonColor: computed({
+      get() {
+        return mainButtonColor.value
+      },
+      set(color) {
+        setMainButtonParams({
+          color,
+        })
+      },
+    }),
+    mainButtonTextColor: computed({
+      get() {
+        return mainButtonTextColor.value
+      },
+      set(color) {
+        setMainButtonParams({
+          text_color: color,
+        })
+      },
+    }),
+    isMainButtonVisible: computed({
+      get() {
+        return isMainButtonVisible.value
+      },
+      set(isVisible) {
+        isVisible ? showMainButton() : hideMainButton()
+      },
+    }),
+    isMainButtonActive: computed({
+      get() {
+        return isMainButtonActive.value
+      },
+      set(isActive) {
+        isActive ? enableMainButton() : disableMainButton()
+      },
+    }),
+    isMainButtonProgressVisible: computed({
+      get() {
+        return isMainButtonProgressVisible.value
+      },
+      set(isProgressVisible) {
+        isProgressVisible ? showMainButtonProgress() : hideMainButtonProgress()
+      },
+    }),
     setMainButtonText,
     onMainButtonClicked,
     showMainButton,

src/composables/useWebAppTheme.ts

@@ -34,8 +34,22 @@ export function useWebAppTheme() {
   return {
     colorScheme: readonly(colorScheme),
     themeParams: readonly(themeParams),
-    headerColor,
-    backgroundColor,
+    headerColor: computed({
+      get() {
+        return headerColor.value
+      },
+      set(newValue) {
+        setHeaderColor(newValue)
+      },
+    }),
+    backgroundColor: computed({
+      get() {
+        return backgroundColor.value
+      },
+      set(newValue) {
+        setBackgroundColor(newValue)
+      },
+    }),
     setHeaderColor,
     setBackgroundColor,
     onThemeChanged,