vib/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

client: refactor page-header

Browse source 
Fix a missing import.

Refactor all refs to use $ref.
This commit is contained in:
Johann150 2022-10-04 16:49:01 +02:00
parent 9abf8d467d
commit a593dcb003
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
1 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/client/src/components/global/page-header.vue
View file

@ -54,8 +54,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, onUnmounted, ref, inject, watch, nextTick } from 'vue'; import { onMounted, onUnmounted, inject, watch, nextTick } from 'vue';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import MkButton from '@/components/ui/button.vue';
import { popupMenu } from '@/os'; import { popupMenu } from '@/os';
import { scrollToTop } from '@/scripts/scroll'; import { scrollToTop } from '@/scripts/scroll';
import { globalEvents } from '@/events'; import { globalEvents } from '@/events';
@ -91,17 +92,16 @@ const emit = defineEmits<{
}>(); }>();
const metadata = injectPageMetadata(); const metadata = injectPageMetadata();
const hideTitle = inject('shouldOmitHeaderTitle', false); const hideTitle = inject('shouldOmitHeaderTitle', false);
const el = $ref<HTMLElement | null>(null);
const tabRefs = {}; const tabRefs = {};
const tabHighlightEl = $ref<HTMLElement | null>(null);
const bg = ref(null); let el = $ref<HTMLElement | null>(null);
let tabHighlightEl = $ref<HTMLElement | null>(null);
let bg = $ref(null);
let narrow = $ref(false); let narrow = $ref(false);
const hasTabs = $computed(() => props.tabs.length > 0); let hasTabs = $computed(() => props.tabs.length > 0);
const hasActions = $computed(() => props.actions.length > 0); let hasActions = $computed(() => props.actions.length > 0);
const show = $computed(() => !hideTitle || hasTabs || hasActions); let show = $computed(() => !hideTitle || hasTabs || hasActions);
function showTabsPopup(ev: MouseEvent): void { function showTabsPopup(ev: MouseEvent): void {
if (!hasTabs) return; if (!hasTabs) return;
@ -149,7 +149,7 @@ const calcBg = () => {
const rawBg = metadata?.bg || 'var(--bg)'; const rawBg = metadata?.bg || 'var(--bg)';
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg); const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
tinyBg.setAlpha(0.85); tinyBg.setAlpha(0.85);
bg.value = tinyBg.toRgbString(); bg = tinyBg.toRgbString();
}; };
let ro: ResizeObserver | null; let ro: ResizeObserver | null;