FIx Vue warning about extranous attributes
This commit is contained in:
parent
2ff4e08c4e
commit
789ac0ad1b
@ -1,5 +1,8 @@
|
|||||||
<script setup>
|
<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({
|
const props = defineProps({
|
||||||
modelValue: { type: Boolean, default: false },
|
modelValue: { type: Boolean, default: false },
|
||||||
@ -23,6 +26,9 @@ const dialogHeight = ref(null)
|
|||||||
const hasMoved = ref(false)
|
const hasMoved = ref(false)
|
||||||
const margin = 8 // viewport margin in px to keep dialog from touching edges
|
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) {
|
function clamp(val, min, max) {
|
||||||
return Math.min(Math.max(val, min), max)
|
return Math.min(Math.max(val, min), max)
|
||||||
}
|
}
|
||||||
@ -87,6 +93,17 @@ const modalStyle = computed(() => {
|
|||||||
return {}
|
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() {
|
function close() {
|
||||||
emit('update:modelValue', false)
|
emit('update:modelValue', false)
|
||||||
emit('closed')
|
emit('closed')
|
||||||
@ -171,7 +188,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<span ref="anchorRef" class="ec-modal-anchor" aria-hidden="true"></span>
|
<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')">
|
<form class="ec-form" @submit.prevent="emit('submit')">
|
||||||
<header class="ec-header" @pointerdown="startDrag">
|
<header class="ec-header" @pointerdown="startDrag">
|
||||||
<h2 class="ec-title">
|
<h2 class="ec-title">
|
||||||
|
@ -547,8 +547,6 @@ function handleWeekColMouseMove(e) {
|
|||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
}
|
}
|
||||||
|
|
||||||
// (momentum removed per requirements)
|
|
||||||
|
|
||||||
function handleWeekColMouseUp(e) {
|
function handleWeekColMouseUp(e) {
|
||||||
if (!isWeekColDragging.value) return
|
if (!isWeekColDragging.value) return
|
||||||
isWeekColDragging.value = false
|
isWeekColDragging.value = false
|
||||||
|
Loading…
x
Reference in New Issue
Block a user