fix: lint

This commit is contained in:
Wu Clan
2026-05-05 17:10:07 +08:00
parent cc70e4b59c
commit 5242cbb3c6
9 changed files with 93 additions and 130 deletions
@@ -2,73 +2,62 @@
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { AlertTriangle, X } from "lucide-vue-next";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { useConnectionStore } from "@/stores/connectionStore";
const props = withDefaults(
defineProps<{
connectionId?: string | null;
triggerClass?: string;
}>(),
{
connectionId: null,
triggerClass: "",
},
defineProps<{
connectionId?: string | null;
triggerClass?: string;
}>(),
{
connectionId: null,
triggerClass: "",
},
);
const { t } = useI18n();
const connectionStore = useConnectionStore();
const errorMessage = computed(() =>
props.connectionId
? connectionStore.connectionErrors[props.connectionId]
: "",
);
const errorMessage = computed(() => (props.connectionId ? connectionStore.connectionErrors[props.connectionId] : ""));
function clearError() {
if (props.connectionId)
connectionStore.clearConnectionError(props.connectionId);
if (props.connectionId) connectionStore.clearConnectionError(props.connectionId);
}
</script>
<template>
<Popover v-if="errorMessage">
<PopoverTrigger as-child>
<button
type="button"
class="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-amber-500 hover:bg-amber-500/10 hover:text-amber-600 focus:outline-none focus:ring-1 focus:ring-amber-500/40"
:class="triggerClass"
:title="t('connection.lastError')"
@click.stop
>
<AlertTriangle class="h-3.5 w-3.5" />
</button>
</PopoverTrigger>
<PopoverContent side="top" class="w-72 gap-2 p-2 text-xs" @click.stop>
<div class="flex items-start gap-2">
<div class="min-w-0 flex-1">
<div class="font-medium text-foreground">
{{ t("connection.lastError") }}
</div>
<div
class="mt-1 max-h-36 overflow-auto whitespace-pre-wrap break-words text-muted-foreground"
>
{{ errorMessage }}
</div>
</div>
<button
type="button"
class="shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
:title="t('connection.clearError')"
@click="clearError"
>
<X class="h-3.5 w-3.5" />
</button>
</div>
</PopoverContent>
</Popover>
<Popover v-if="errorMessage">
<PopoverTrigger as-child>
<button
type="button"
class="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-amber-500 hover:bg-amber-500/10 hover:text-amber-600 focus:outline-none focus:ring-1 focus:ring-amber-500/40"
:class="triggerClass"
:title="t('connection.lastError')"
@click.stop
>
<AlertTriangle class="h-3.5 w-3.5" />
</button>
</PopoverTrigger>
<PopoverContent side="top" class="w-72 gap-2 p-2 text-xs" @click.stop>
<div class="flex items-start gap-2">
<div class="min-w-0 flex-1">
<div class="font-medium text-foreground">
{{ t("connection.lastError") }}
</div>
<div class="mt-1 max-h-36 overflow-auto whitespace-pre-wrap break-words text-muted-foreground">
{{ errorMessage }}
</div>
</div>
<button
type="button"
class="shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
:title="t('connection.clearError')"
@click="clearError"
>
<X class="h-3.5 w-3.5" />
</button>
</div>
</PopoverContent>
</Popover>
</template>
+6 -10
View File
@@ -1,19 +1,15 @@
<script setup lang="ts">
import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
import type { PopoverRootEmits, PopoverRootProps } from "reka-ui";
import { PopoverRoot, useForwardPropsEmits } from "reka-ui";
const props = defineProps<PopoverRootProps>()
const emits = defineEmits<PopoverRootEmits>()
const props = defineProps<PopoverRootProps>();
const emits = defineEmits<PopoverRootEmits>();
const forwarded = useForwardPropsEmits(props, emits)
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<PopoverRoot
v-slot="slotProps"
data-slot="popover"
v-bind="forwarded"
>
<PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
<slot v-bind="slotProps" />
</PopoverRoot>
</template>
+4 -7
View File
@@ -1,15 +1,12 @@
<script setup lang="ts">
import type { PopoverAnchorProps } from 'reka-ui'
import { PopoverAnchor } from 'reka-ui'
import type { PopoverAnchorProps } from "reka-ui";
import { PopoverAnchor } from "reka-ui";
const props = defineProps<PopoverAnchorProps>()
const props = defineProps<PopoverAnchorProps>();
</script>
<template>
<PopoverAnchor
data-slot="popover-anchor"
v-bind="props"
>
<PopoverAnchor data-slot="popover-anchor" v-bind="props">
<slot />
</PopoverAnchor>
</template>
+13 -20
View File
@@ -1,30 +1,23 @@
<script setup lang="ts">
import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import {
PopoverContent,
PopoverPortal,
useForwardPropsEmits,
} from 'reka-ui'
import { cn } from '@/lib/utils'
import type { PopoverContentEmits, PopoverContentProps } from "reka-ui";
import type { HTMLAttributes } from "vue";
import { reactiveOmit } from "@vueuse/core";
import { PopoverContent, PopoverPortal, useForwardPropsEmits } from "reka-ui";
import { cn } from "@/lib/utils";
defineOptions({
inheritAttrs: false,
})
});
const props = withDefaults(
defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
{
align: 'center',
sideOffset: 4,
},
)
const emits = defineEmits<PopoverContentEmits>()
const props = withDefaults(defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(), {
align: "center",
sideOffset: 4,
});
const emits = defineEmits<PopoverContentEmits>();
const delegatedProps = reactiveOmit(props, 'class')
const delegatedProps = reactiveOmit(props, "class");
const forwarded = useForwardPropsEmits(delegatedProps, emits)
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
@@ -1,17 +1,14 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import type { HTMLAttributes } from "vue";
import { cn } from "@/lib/utils";
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
class?: HTMLAttributes["class"];
}>();
</script>
<template>
<p
data-slot="popover-description"
:class="cn('text-muted-foreground', props.class)"
>
<p data-slot="popover-description" :class="cn('text-muted-foreground', props.class)">
<slot />
</p>
</template>
+5 -8
View File
@@ -1,17 +1,14 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import type { HTMLAttributes } from "vue";
import { cn } from "@/lib/utils";
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
class?: HTMLAttributes["class"];
}>();
</script>
<template>
<div
data-slot="popover-header"
:class="cn('flex flex-col gap-0.5 text-sm', props.class)"
>
<div data-slot="popover-header" :class="cn('flex flex-col gap-0.5 text-sm', props.class)">
<slot />
</div>
</template>
+5 -8
View File
@@ -1,17 +1,14 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import type { HTMLAttributes } from "vue";
import { cn } from "@/lib/utils";
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
class?: HTMLAttributes["class"];
}>();
</script>
<template>
<div
data-slot="popover-title"
:class="cn('font-medium cn-font-heading', props.class)"
>
<div data-slot="popover-title" :class="cn('font-medium cn-font-heading', props.class)">
<slot />
</div>
</template>
+4 -7
View File
@@ -1,15 +1,12 @@
<script setup lang="ts">
import type { PopoverTriggerProps } from 'reka-ui'
import { PopoverTrigger } from 'reka-ui'
import type { PopoverTriggerProps } from "reka-ui";
import { PopoverTrigger } from "reka-ui";
const props = defineProps<PopoverTriggerProps>()
const props = defineProps<PopoverTriggerProps>();
</script>
<template>
<PopoverTrigger
data-slot="popover-trigger"
v-bind="props"
>
<PopoverTrigger data-slot="popover-trigger" v-bind="props">
<slot />
</PopoverTrigger>
</template>
+7 -7
View File
@@ -1,7 +1,7 @@
export { default as Popover } from './Popover.vue'
export { default as PopoverAnchor } from './PopoverAnchor.vue'
export { default as PopoverContent } from './PopoverContent.vue'
export { default as PopoverDescription } from './PopoverDescription.vue'
export { default as PopoverHeader } from './PopoverHeader.vue'
export { default as PopoverTitle } from './PopoverTitle.vue'
export { default as PopoverTrigger } from './PopoverTrigger.vue'
export { default as Popover } from "./Popover.vue";
export { default as PopoverAnchor } from "./PopoverAnchor.vue";
export { default as PopoverContent } from "./PopoverContent.vue";
export { default as PopoverDescription } from "./PopoverDescription.vue";
export { default as PopoverHeader } from "./PopoverHeader.vue";
export { default as PopoverTitle } from "./PopoverTitle.vue";
export { default as PopoverTrigger } from "./PopoverTrigger.vue";