feat: viewport watch refactor

elibosley · elibosley · commit 9aefa382ec64 · 2024-12-18T14:22:28.000-05:00
diff --git a/web/components/shadcn/sheet/Sheet.vue b/web/components/shadcn/sheet/Sheet.vue
@@ -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>();
+
+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 {
+    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) {
-    document.querySelector('meta[name="viewport"]')?.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0')
+    updateViewport(MOBILE_VIEWPORT);
   } else {
-    document.querySelector('meta[name="viewport"]')?.setAttribute('content', initialViewport.value);
+    updateViewport(initialViewport.value);
   }
-}
+};
+
+onUnmounted(() => {
+  updateViewport(initialViewport.value);
+});
 </script>
 
 <template>
