opendesk

1<template>
2  <div class="flex items-center gap-3 mb-2">
3    <FileUploader :fileTypes="['image/*']" @success="onSuccess">
4      <template #default="{ openFileSelector, uploading }">
5        <!-- Filled: image with hover-to-replace + remove badge -->
6        <div v-if="image" class="group relative size-11.5 shrink-0">
7          <Avatar
8            :image="image"
9            :label="fallbackLabel"
10            :shape="shape"
11            size="3xl"
12          />
13          <button
14            type="button"
15            class="absolute inset-0 flex cursor-pointer items-center justify-center bg-black/40 text-white opacity-0 outline-none transition focus:outline-none focus-visible:outline-none group-hover:opacity-100"
16            :class="roundedClass"
17            :aria-label="__('Replace image')"
18            @click.prevent="openFileSelector()"
19          >
20            <LucidePencil class="size-4" />
21          </button>
22          <button
23            type="button"
24            class="absolute -right-2.5 -top-2.5 flex size-4.5 cursor-pointer items-center justify-center rounded-full bg-surface-base text-ink-gray-4 opacity-0 outline outline-black-overlay-50 duration-300 ease-in-out focus:outline-none focus-visible:outline-none hover:bg-surface-gray-2 group-hover:opacity-100 [@media(hover:none)]:opacity-100"
25            :aria-label="__('Remove image')"
26            @click.prevent="image = ''"
27          >
28            <LucideX class="size-2.5" />
29          </button>
30        </div>
31
32        <!-- Empty: upload box -->
33        <button
34          v-else
35          type="button"
36          class="flex size-11.5 shrink-0 cursor-pointer items-center justify-center border border-outline-gray-2 text-ink-gray-4 outline-none transition focus:outline-none focus-visible:outline-none hover:border-outline-gray-3"
37          :class="roundedClass"
38          :disabled="uploading"
39          :aria-label="label || __('Upload image')"
40          @click.prevent="openFileSelector()"
41        >
42          <LucideUpload class="size-4.5" />
43        </button>
44      </template>
45    </FileUploader>
46
47    <div v-if="label || description" class="flex flex-col gap-0.5">
48      <span v-if="label" class="text-p-sm-medium text-ink-gray-8">
49        {{ __(label) }}
50      </span>
51      <span v-if="description" class="text-p-sm text-ink-gray-5">
52        {{ __(description) }}
53      </span>
54    </div>
55  </div>
56</template>
57
58<script setup lang="ts">
59import { __ } from "@/translation";
60import type { File as FileType } from "@/types";
61import { Avatar, FileUploader } from "frappe-ui";
62import { computed } from "vue";
63import LucidePencil from "~icons/lucide/pencil";
64import LucideUpload from "~icons/lucide/upload";
65import LucideX from "~icons/lucide/x";
66
67const image = defineModel<string>({ default: "" });
68
69const props = withDefaults(
70  defineProps<{
71    label?: string;
72    description?: string;
73    fallbackLabel?: string;
74    shape?: "circle" | "square";
75  }>(),
76  {
77    label: "",
78    description: __("Upload an image in PNG or JPG format"),
79    fallbackLabel: "",
80    shape: "square",
81  }
82);
83
84const roundedClass = computed(() =>
85  props.shape === "circle" ? "rounded-full" : "rounded-[10px]"
86);
87
88function onSuccess(file: FileType) {
89  image.value = file.file_url;
90}
91</script>
92