zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

after the search bar is focused and the screen height is reduced, let the sheet scroll to top

Browse Source
This commit is contained in:
MaysWind
2025-02-12 00:56:08 +08:00
parent 13cc6a2cf0
commit 2e01e5530c
4 changed files with 48 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/TransactionTagSelectionSheet.vue
+10 -4
View File
@@ -1,5 +1,5 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler"
<f7-sheet ref="sheet" swipe-to-close swipe-handler=".swipe-handler"
style="height: auto" :opened="show"
@sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
@@ -18,7 +18,8 @@
:placeholder="tt('Find tag')"
:disable-button="false"
v-if="enableFilter"
@input="filterContent = $event.target.value">
@input="filterContent = $event.target.value"
@focus="onSearchBarFocus">
</f7-searchbar>
<f7-page-content :class="'no-padding-top ' + heightClass">
<f7-list class="no-margin-top no-margin-bottom" v-if="(!allTags || !allTags.length || noAvailableTag) && !newTag">
@@ -84,7 +85,7 @@
<script setup lang="ts">
import { ref, computed, useTemplateRef } from 'vue';
import type { Searchbar } from 'framework7/types';
import type { Sheet, Searchbar } from 'framework7/types';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
@@ -93,7 +94,7 @@ import { TransactionTag } from '@/models/transaction_tag.ts';
import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
import { copyArrayTo } from '@/lib/common.ts';
import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
import { type Framework7Dom, scrollToSelectedItem, scrollSheetToTop } from '@/lib/ui/mobile.ts';
const props = defineProps<{
modelValue: string[];
@@ -112,6 +113,7 @@ const { showToast } = useI18nUIComponents();
const transactionTagsStore = useTransactionTagsStore();
const sheet = useTemplateRef<Sheet.Sheet>('sheet');
const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
const filterContent = ref<string>('');
@@ -220,6 +222,10 @@ function cancelSaveNewTag(): void {
newTag.value = null;
}
function onSearchBarFocus(): void {
scrollSheetToTop(sheet.value?.$el as HTMLElement, window.innerHeight); // $el is not Framework7 Dom
}
function onSheetOpen(event: { $el: Framework7Dom }): void {
selectedItemIds.value = copyArrayTo(props.modelValue, []);
newTag.value = null;
src/components/mobile/TreeViewSelectionSheet.vue
+10 -4
View File
@@ -1,5 +1,5 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler"
<f7-sheet ref="sheet" swipe-to-close swipe-handler=".swipe-handler"
style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<div class="swipe-handler"></div>
@@ -13,7 +13,8 @@
:placeholder="filterPlaceholder"
:disable-button="false"
v-if="enableFilter"
@input="filterContent = $event.target.value">
@input="filterContent = $event.target.value"
@focus="onSearchBarFocus">
</f7-searchbar>
<f7-page-content :class="'no-padding-top ' + heightClass">
<f7-list class="no-margin-top no-margin-bottom" v-if="!filteredItems || !filteredItems.length">
@@ -49,12 +50,12 @@
<script setup lang="ts">
import { ref, computed, useTemplateRef } from 'vue';
import type { Searchbar } from 'framework7/types';
import type { Sheet, Searchbar } from 'framework7/types';
import { useI18n } from '@/locales/helpers.ts';
import { type TwoLevelItemSelectionBaseProps, useTwoLevelItemSelectionBase } from '@/components/base/TwoLevelItemSelectionBase.ts';
import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
import { type Framework7Dom, scrollToSelectedItem, scrollSheetToTop } from '@/lib/ui/mobile.ts';
interface MobileTwoLevelItemSelectionBaseProps extends TwoLevelItemSelectionBaseProps {
show: boolean;
@@ -78,6 +79,7 @@ const {
updateCurrentSecondaryValue
} = useTwoLevelItemSelectionBase(props);
const sheet = useTemplateRef<Sheet.Sheet>('sheet');
const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
const currentValue = ref<unknown>(props.modelValue);
@@ -132,6 +134,10 @@ function onSecondaryItemClicked(subItem: unknown): void {
emit('update:show', false);
}
function onSearchBarFocus(): void {
scrollSheetToTop(sheet.value?.$el as HTMLElement, window.innerHeight); // $el is not Framework7 Dom
}
function onSheetOpen(event: { $el: Framework7Dom }): void {
currentValue.value = props.modelValue;
scrollToSelectedItem(event.$el, '.page-content', '.treeview-item .treeview-item-selected');
src/components/mobile/TwoColumnListItemSelectionSheet.vue
+10 -4
View File
@@ -1,5 +1,5 @@
<template>
<f7-sheet swipe-to-close swipe-handler=".swipe-handler"
<f7-sheet ref="sheet" swipe-to-close swipe-handler=".swipe-handler"
style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
<f7-toolbar>
<div class="swipe-handler"></div>
@@ -13,7 +13,8 @@
:placeholder="filterPlaceholder"
:disable-button="false"
v-if="enableFilter"
@input="filterContent = $event.target.value">
@input="filterContent = $event.target.value"
@focus="onSearchBarFocus">
</f7-searchbar>
<f7-page-content class="no-padding-top">
<div class="grid grid-gap" :class="{ 'grid-cols-2': filteredItems && filteredItems.length }">
@@ -70,12 +71,12 @@
<script setup lang="ts">
import { ref, computed, useTemplateRef } from 'vue';
import type { Searchbar } from 'framework7/types';
import type { Sheet, Searchbar } from 'framework7/types';
import { useI18n } from '@/locales/helpers.ts';
import { type CommonTwoColumnListItemSelectionProps, useTwoColumnListItemSelectionBase } from '@/components/base/TwoColumnListItemSelectionBase.ts';
import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
import { type Framework7Dom, scrollToSelectedItem, scrollSheetToTop } from '@/lib/ui/mobile.ts';
interface MobileTwoColumnListItemSelectionProps extends CommonTwoColumnListItemSelectionProps {
show: boolean;
@@ -101,6 +102,7 @@ const {
updateCurrentSecondaryValue
} = useTwoColumnListItemSelectionBase(props);
const sheet = useTemplateRef<Sheet.Sheet>('sheet');
const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
const currentPrimaryValue = ref<unknown>(getCurrentPrimaryValueBySecondaryValue(props.modelValue));
@@ -127,6 +129,10 @@ function onSecondaryItemClicked(subItem: unknown): void {
close();
}
function onSearchBarFocus(): void {
scrollSheetToTop(sheet.value?.$el as HTMLElement, window.innerHeight); // $el is not Framework7 Dom
}
function onSheetOpen(event: { $el: Framework7Dom }): void {
currentPrimaryValue.value = getCurrentPrimaryValueBySecondaryValue(props.modelValue);
currentSecondaryValue.value = props.modelValue;
src/lib/ui/mobile.ts
+18
View File
@@ -140,6 +140,24 @@ export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector:
container.scrollTop(targetPos);
}
export function scrollSheetToTop(sheetElement: HTMLElement | undefined, windowNormalInnerHeight: number): void {
if (!sheetElement) {
return;
}
const sheetHeight = sheetElement.offsetHeight;
if (sheetHeight < windowNormalInnerHeight) {
setTimeout(() => {
const windowNewInnerHeight = window.innerHeight;
if (windowNewInnerHeight < windowNormalInnerHeight && sheetHeight < windowNewInnerHeight) {
window.scrollTo({ top: windowNormalInnerHeight - sheetHeight - 24, behavior: "smooth" });
}
}, 300);
}
}
export function useI18nUIComponents() {
const { tt, te } = useI18n();