mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-07-07 20:44:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

all MkFolder to not have a sticky header

Browse source
This commit is contained in:
Hazelnoot 2025-05-29 23:13:15 -04:00
parent b3022e853e
commit 5924e27859
2 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/frontend/src/components/MkFolder.vue
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div ref="rootEl" :class="$style.root" role="group" :aria-expanded="opened"> <div ref="rootEl" :class="$style.root" role="group" :aria-expanded="opened">
<MkStickyContainer> <MkStickyContainer :sticky="sticky">
<template #header> <template #header>
<button :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle"> <button :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle">
<div :class="$style.headerIcon"><slot name="icon"></slot></div> <div :class="$style.headerIcon"><slot name="icon"></slot></div>
@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
> >
<KeepAlive> <KeepAlive>
<div v-show="opened"> <div v-show="opened">
<MkStickyContainer> <MkStickyContainer :sticky="sticky">
<template #header> <template #header>
<div v-if="$slots.header" :class="$style.inBodyHeader"> <div v-if="$slots.header" :class="$style.inBodyHeader">
<slot name="header"></slot> <slot name="header"></slot>
@ -73,12 +73,14 @@ const props = withDefaults(defineProps<{
withSpacer?: boolean; withSpacer?: boolean;
spacerMin?: number; spacerMin?: number;
spacerMax?: number; spacerMax?: number;
sticky?: boolean;
}>(), { }>(), {
defaultOpen: false, defaultOpen: false,
maxHeight: null, maxHeight: null,
withSpacer: true, withSpacer: true,
spacerMin: 14, spacerMin: 14,
spacerMax: 22, spacerMax: 22,
sticky: true,
}); });
const rootEl = useTemplateRef('rootEl'); const rootEl = useTemplateRef('rootEl');

12
packages/frontend/src/components/global/MkStickyContainer.vue
View file

@ -5,17 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div ref="rootEl"> <div ref="rootEl">
<div ref="headerEl" :class="$style.header"> <div ref="headerEl" :class="{ [$style.header]: sticky }">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
<div <div
:class="$style.body" :class="{ [$style.body]: sticky }"
:data-sticky-container-header-height="headerHeight" :data-sticky-container-header-height="headerHeight"
:data-sticky-container-footer-height="footerHeight" :data-sticky-container-footer-height="footerHeight"
> >
<slot></slot> <slot></slot>
</div> </div>
<div ref="footerEl" :class="$style.footer"> <div ref="footerEl" :class="{ [$style.footer]: sticky }">
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</div> </div>
@ -25,6 +25,12 @@ SPDX-License-Identifier: AGPL-3.0-only
import { onMounted, onUnmounted, provide, inject, ref, watch, useTemplateRef } from 'vue'; import { onMounted, onUnmounted, provide, inject, ref, watch, useTemplateRef } from 'vue';
import { DI } from '@/di.js'; import { DI } from '@/di.js';
withDefaults(defineProps<{
sticky?: boolean,
}>(), {
sticky: true,
});
const rootEl = useTemplateRef('rootEl'); const rootEl = useTemplateRef('rootEl');
const headerEl = useTemplateRef('headerEl'); const headerEl = useTemplateRef('headerEl');
const footerEl = useTemplateRef('footerEl'); const footerEl = useTemplateRef('footerEl');