From 789ac0ad1b7b3b8467cbea408cd6142f82b2ecaa Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Mon, 25 Aug 2025 12:01:20 -0600
Subject: [PATCH] FIx Vue warning about extranous attributes

---
 src/components/BaseDialog.vue   | 21 +++++++++++++++++++--
 src/components/CalendarView.vue |  2 --
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/BaseDialog.vue b/src/components/BaseDialog.vue
index c58dbab..de83896 100644
--- a/src/components/BaseDialog.vue
+++ b/src/components/BaseDialog.vue
@@ -1,5 +1,8 @@
 <script setup>
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, nextTick, useAttrs } from 'vue'
+
+// Disable automatic attr inheritance so we can forward class/style specifically to the modal element
+defineOptions({ inheritAttrs: false })
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
@@ -23,6 +26,9 @@ const dialogHeight = ref(null)
 const hasMoved = ref(false)
 const margin = 8 // viewport margin in px to keep dialog from touching edges
 
+// Collect incoming non-prop attributes (e.g., class / style from usage site)
+const attrs = useAttrs()
+
 function clamp(val, min, max) {
   return Math.min(Math.max(val, min), max)
 }
@@ -87,6 +93,17 @@ const modalStyle = computed(() => {
   return {}
 })
 
+// Merge external class / style with internal ones so parent usage like
+// <BaseDialog class="settings-modal" :style="{ top: '...' }" /> works even with fragment root.
+const modalAttrs = computed(() => {
+  const { class: extClass, style: extStyle, ...rest } = attrs
+  return {
+    ...rest,
+    class: ['ec-modal', extClass].filter(Boolean),
+    style: [modalStyle.value, extStyle].filter(Boolean), // external style overrides internal
+  }
+})
+
 function close() {
   emit('update:modelValue', false)
   emit('closed')
@@ -171,7 +188,7 @@ onUnmounted(() => {
 
 <template>
   <span ref="anchorRef" class="ec-modal-anchor" aria-hidden="true"></span>
-  <div v-if="modelValue" class="ec-modal" ref="modalRef" :style="modalStyle">
+  <div v-if="modelValue" ref="modalRef" v-bind="modalAttrs">
     <form class="ec-form" @submit.prevent="emit('submit')">
       <header class="ec-header" @pointerdown="startDrag">
         <h2 class="ec-title">
diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index 1efb5a4..09f21cc 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -547,8 +547,6 @@ function handleWeekColMouseMove(e) {
   e.preventDefault()
 }
 
-// (momentum removed per requirements)
-
 function handleWeekColMouseUp(e) {
   if (!isWeekColDragging.value) return
   isWeekColDragging.value = false