opendesk

1<template>
2  <div
3    v-if="!isSidebarCollapsed"
4    class="flex flex-col gap-3 shadow-sm rounded-6 py-2.5 px-3 bg-surface-elevation-2 text-base"
5  >
6    <div class="inline-flex gap-2 text-ink-gray-9">
7      <LucideShieldAlert class="h-4 w-4 my-0.5 shrink-0" />
8      <div class="flex flex-col gap-0.5 text-p-sm">
9        <div class="font-medium">{{ title }}</div>
10        <div class="text-ink-gray-7">{{ description }}</div>
11      </div>
12    </div>
13    <Button :label="__('Learn more')" theme="blue" @click="showDialog = true" />
14  </div>
15  <Button
16    v-else
17    variant="ghost"
18    :icon="LucideShieldAlert"
19    :tooltip="title"
20    @click="showDialog = true"
21  />
22  <Dialog v-model:open="showDialog" :title="dialogTitle">
23    <template #default>
24      <div class="flex flex-col gap-3 text-p-base text-ink-gray-7">
25        <slot />
26        <p class="text-p-sm text-ink-gray-5">
27          {{ __("You won't see this notice again.") }}
28        </p>
29      </div>
30    </template>
31    <template #actions>
32      <Button
33        class="w-full"
34        variant="solid"
35        :label="confirmLabel || __('Got it')"
36        :loading="confirming"
37        @click="confirm"
38      />
39    </template>
40  </Dialog>
41</template>
42
43<script setup lang="ts">
44import { type BannerName, useBanners } from "@/composables/useBanners";
45import { __ } from "@/translation";
46import { ref } from "vue";
47import LucideShieldAlert from "~icons/lucide/shield-alert";
48
49const props = defineProps<{
50  banner: BannerName;
51  title: string;
52  description: string;
53  dialogTitle: string;
54  isSidebarCollapsed: boolean;
55  confirmLabel?: string;
56  beforeDismiss?: () => Promise<unknown>;
57}>();
58
59const { dismiss } = useBanners();
60const showDialog = defineModel<boolean>("open", { default: false });
61const confirming = ref(false);
62
63async function confirm() {
64  confirming.value = true;
65  try {
66    await props.beforeDismiss?.();
67    await dismiss(props.banner);
68    showDialog.value = false;
69  } catch {
70  } finally {
71    confirming.value = false;
72  }
73}
74</script>
75