feat(search): add keyboard hide button and auto-hide Dock

- Add floating keyboard hide button that appears on search input focus
- Create KeyboardStore to manage keyboard state globally
- Auto-hide Dock component when keyboard is open on search page
- Position keyboard hide button at bottom when Dock is hidden
- Update keyboard state on focus, blur, and hide actions
This commit is contained in:
2025-12-01 22:37:30 +03:00
parent 17ff888c05
commit db8d1360fc
3 changed files with 32 additions and 2 deletions

View File

@@ -42,6 +42,7 @@ import {FullscreenViewport, useMiniApp, useWebAppViewport} from 'vue-tg';
import {useRoute, useRouter} from "vue-router";
import {useSettingsStore} from "@/stores/SettingsStore.js";
import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
import {useKeyboardStore} from "@/stores/KeyboardStore.js";
import CartButton from "@/components/CartButton.vue";
import Dock from "@/components/Dock.vue";
import AppDebugMessage from "@/components/AppDebugMessage.vue";
@@ -58,6 +59,7 @@ const router = useRouter();
const route = useRoute();
const settings = useSettingsStore();
const filtersStore = useProductFiltersStore();
const keyboardStore = useKeyboardStore();
const backButton = window.Telegram.WebApp.BackButton;
const haptic = window.Telegram.WebApp.HapticFeedback;
const drawerOpen = ref(false);
@@ -70,7 +72,14 @@ const routesToHideAppDock = [
];
const isAppDockShown = computed(() => {
return routesToHideAppDock.indexOf(route.name) === -1;
if (routesToHideAppDock.indexOf(route.name) === -1) {
// Скрываем Dock, если клавиатура открыта на странице поиска
if (route.name === 'search' && keyboardStore.isOpen) {
return false;
}
return true;
}
return false;
});
function navigateBack() {