mirror of
https://github.com/t8y2/dbx.git
synced 2026-10-22 19:58:51 +00:00
fix: lint
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user