opendesk

1<template>
2  <div class="flex flex-col h-full w-full pb-8">
3    <div class="px-10 py-8 pb-6 relative z-10">
4      <div class="flex items-start justify-between">
5        <div class="flex flex-col gap-1 text-start">
6          <slot name="title">
7            <div v-if="backLabel" class="flex items-center gap-2">
8              <Button
9                variant="ghost"
10                icon-left="lucide-chevron-left"
11                :label="backLabel"
12                size="md"
13                @click="onBack"
14                class="cursor-pointer -ms-4 hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5 text-ink-gray-7 text-md-semibold hover:opacity-70 !pe-0 !max-w-96 !justify-start rtl:flex-row-reverse rtl:ps-4"
15              />
16              <UnsavedBadge :show="Boolean(dirty)" />
17            </div>
18            <h1 v-else class="text-md-semibold text-ink-gray-8">
19              {{ __(title) }}
20            </h1>
21          </slot>
22          <slot
23            name="description"
24            v-if="Boolean($slots['description']) || Boolean(description)"
25          >
26            <p class="text-p-sm max-w-md text-ink-gray-6">
27              {{ __(description) }}
28            </p>
29          </slot>
30        </div>
31        <slot name="header-actions" v-if="Boolean($slots['header-actions'])" />
32      </div>
33      <div class="mt-6" v-if="Boolean($slots['header-bottom'])">
34        <slot name="header-bottom" />
35      </div>
36    </div>
37    <div class="px-10 pb-8 overflow-y-auto h-full flex flex-col text-start">
38      <slot name="content" />
39    </div>
40  </div>
41</template>
42
43<script setup lang="ts">
44import UnsavedBadge from "@/components/UnsavedBadge.vue";
45
46defineProps<{
47  title?: string;
48  description?: string;
49  backLabel?: string;
50  onBack?: () => void;
51  dirty?: boolean;
52}>();
53</script>
54