misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

merge upstream

Browse source
This commit is contained in:
Hazelnoot 2025-03-25 16:14:53 -04:00
commit d8908ef2d8
1065 changed files with 32953 additions and 20092 deletions
Download patch file Download diff file Expand all files Collapse all files

30
packages/frontend/src/components/global/MkPageHeader.tabs.vue
View file

@ -8,13 +8,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.tabsInner">
<button
v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: defaultStore.reactiveState.animation.value }]"
class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: prefer.s.animation }]"
@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)"
>
<div :class="$style.tabInner">
<i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i>
<div
v-if="!t.iconOnly || (!defaultStore.reactiveState.animation.value && t.key === tab)"
v-if="!t.iconOnly || (!prefer.s.animation && t.key === tab)"
:class="$style.tabTitle"
>
{{ t.title }}
@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div
ref="tabHighlightEl"
:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value }]"
:class="[$style.tabHighlight, { [$style.animate]: prefer.s.animation }]"
></div>
</div>
</template>
@ -41,20 +41,20 @@ export type Tab = {
onClick?: (ev: MouseEvent) => void;
} & (
| {
iconOnly?: false;
title: string;
icon?: string;
}
iconOnly?: false;
title: string;
icon?: string;
}
| {
iconOnly: true;
icon: string;
}
iconOnly: true;
icon: string;
}
);
</script>
<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, shallowRef, watch } from 'vue';
import { defaultStore } from '@/store.js';
import { nextTick, onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
import { prefer } from '@/preferences.js';
const props = withDefaults(defineProps<{
tabs?: Tab[];
@ -69,9 +69,9 @@ const emit = defineEmits<{
(ev: 'tabClick', key: string);
}>();
const el = shallowRef<HTMLElement | null>(null);
const el = useTemplateRef('el');
const tabHighlightEl = useTemplateRef('tabHighlightEl');
const tabRefs: Record<string, HTMLElement | null> = {};
const tabHighlightEl = shallowRef<HTMLElement | null>(null);
function onTabMousedown(tab: Tab, ev: MouseEvent): void {
// ユーザビリティの観点からmousedown時にはonClickは呼ばない
@ -170,7 +170,7 @@ onMounted(() => {
if (props.rootEl) {
ro2 = new ResizeObserver((entries, observer) => {
if (document.body.contains(el.value as HTMLElement)) {
if (window.document.body.contains(el.value as HTMLElement)) {
nextTick(() => renderTab());
}
});