mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2025-12-31 13:39:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: viewport watch refactor

Browse Source
This commit is contained in:
Eli Bosley
2024-12-18 12:51:20 -05:00
parent e1515a118a
commit 9d2405bd21
1 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/components/shadcn/sheet/Sheet.vue
View File

@@ -1,22 +1,39 @@
<script setup lang="ts">
import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'radix-vue';
const props = defineProps<DialogRootProps & { class?: string }>()
const emits = defineEmits<DialogRootEmits>()
const MOBILE_VIEWPORT = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' as const;
const forwarded = useForwardPropsEmits(props, emits)
const initialViewport = ref(document.querySelector('meta[name="viewport"]')?.getAttribute('content') ?? 'width=1300');
const openListener = (opened: boolean) => {
/**
* Update meta tags for the root page when oepned
*/
const props = defineProps<DialogRootProps & { class?: string }>();
const emits = defineEmits<DialogRootEmits>();
if (opened) {
document.querySelector('meta[name="viewport"]')?.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0')
const getViewport = (): string => {
return document.querySelector('meta[name="viewport"]')?.getAttribute('content') ?? 'width=1300';
};
const updateViewport = (viewport: string): void => {
const meta = document.querySelector('meta[name="viewport"]');
if (meta) {
meta.setAttribute('content', viewport);
} else {
document.querySelector('meta[name="viewport"]')?.setAttribute('content', initialViewport.value);
const meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = viewport;
document.head.appendChild(meta);
}
}
};
const forwarded = useForwardPropsEmits(props, emits);
const initialViewport = ref(getViewport());
const openListener = (opened: boolean) => {
if (opened) {
updateViewport(MOBILE_VIEWPORT);
} else {
updateViewport(initialViewport.value);
}
};
onUnmounted(() => {
updateViewport(initialViewport.value);
});
</script>
<template>