fix(frontend): PageWithHeaderからPageHeaderに全Propsが伝わっていなかった問題を修正 (#15858)
This commit is contained in:
parent
3b3bb36c49
commit
6a69e4180b
|
@ -40,19 +40,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts">
|
||||||
import { onMounted, onUnmounted, ref, inject, useTemplateRef, computed } from 'vue';
|
|
||||||
import { scrollToTop } from '@@/js/scroll.js';
|
|
||||||
import XTabs from './MkPageHeader.tabs.vue';
|
|
||||||
import type { Tab } from './MkPageHeader.tabs.vue';
|
|
||||||
import type { PageHeaderItem } from '@/types/page-header.js';
|
import type { PageHeaderItem } from '@/types/page-header.js';
|
||||||
import type { PageMetadata } from '@/page.js';
|
import type { PageMetadata } from '@/page.js';
|
||||||
import { globalEvents } from '@/events.js';
|
import type { Tab } from './MkPageHeader.tabs.vue';
|
||||||
import { openAccountMenu as openAccountMenu_ } from '@/accounts.js';
|
|
||||||
import { $i } from '@/i.js';
|
|
||||||
import { DI } from '@/di.js';
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
export type PageHeaderProps = {
|
||||||
overridePageMetadata?: PageMetadata;
|
overridePageMetadata?: PageMetadata;
|
||||||
tabs?: Tab[];
|
tabs?: Tab[];
|
||||||
tab?: string;
|
tab?: string;
|
||||||
|
@ -60,7 +53,19 @@ const props = withDefaults(defineProps<{
|
||||||
thin?: boolean;
|
thin?: boolean;
|
||||||
hideTitle?: boolean;
|
hideTitle?: boolean;
|
||||||
displayMyAvatar?: boolean;
|
displayMyAvatar?: boolean;
|
||||||
}>(), {
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, onUnmounted, ref, inject, useTemplateRef, computed } from 'vue';
|
||||||
|
import { scrollToTop } from '@@/js/scroll.js';
|
||||||
|
import XTabs from './MkPageHeader.tabs.vue';
|
||||||
|
import { globalEvents } from '@/events.js';
|
||||||
|
import { openAccountMenu as openAccountMenu_ } from '@/accounts.js';
|
||||||
|
import { $i } from '@/i.js';
|
||||||
|
import { DI } from '@/di.js';
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<PageHeaderProps>(), {
|
||||||
tabs: () => ([] as Tab[]),
|
tabs: () => ([] as Tab[]),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<template>
|
<template>
|
||||||
<div ref="rootEl" :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']">
|
<div ref="rootEl" :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']">
|
||||||
<MkStickyContainer>
|
<MkStickyContainer>
|
||||||
<template #header><MkPageHeader v-model:tab="tab" :actions="actions" :tabs="tabs"/></template>
|
<template #header><MkPageHeader v-model:tab="tab" v-bind="pageHeaderProps"/></template>
|
||||||
<div :class="$style.body">
|
<div :class="$style.body">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
|
@ -16,21 +16,18 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useTemplateRef } from 'vue';
|
import { computed, useTemplateRef } from 'vue';
|
||||||
import { scrollInContainer } from '@@/js/scroll.js';
|
import { scrollInContainer } from '@@/js/scroll.js';
|
||||||
import type { PageHeaderItem } from '@/types/page-header.js';
|
import type { PageHeaderProps } from './MkPageHeader.vue';
|
||||||
import type { Tab } from './MkPageHeader.tabs.vue';
|
|
||||||
import { useScrollPositionKeeper } from '@/use/use-scroll-position-keeper.js';
|
import { useScrollPositionKeeper } from '@/use/use-scroll-position-keeper.js';
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = defineProps<PageHeaderProps & {
|
||||||
tabs?: Tab[];
|
|
||||||
actions?: PageHeaderItem[] | null;
|
|
||||||
thin?: boolean;
|
|
||||||
hideTitle?: boolean;
|
|
||||||
displayMyAvatar?: boolean;
|
|
||||||
reversed?: boolean;
|
reversed?: boolean;
|
||||||
}>(), {
|
}>();
|
||||||
tabs: () => ([] as Tab[]),
|
|
||||||
|
const pageHeaderProps = computed(() => {
|
||||||
|
const { reversed, ...rest } = props;
|
||||||
|
return rest;
|
||||||
});
|
});
|
||||||
|
|
||||||
const tab = defineModel<string>('tab');
|
const tab = defineModel<string>('tab');
|
||||||
|
|
Loading…
Reference in New Issue