opendesk

1<template>
2  <div>
3    <div class="mb-1.5 text-base text-ink-gray-5">{{ __("Icon") }}</div>
4    <div class="flex items-center gap-2">
5      <div
6        v-if="isEmojiIcon"
7        class="grid size-7 shrink-0 place-items-center rounded-4 bg-surface-gray-3 text-base leading-none"
8        :title="__('Current icon')"
9      >
10        {{ icon }}
11      </div>
12      <IconPicker
13        v-model="pickerIcon"
14        :max-icons="1000"
15        class="flex-1"
16        :placeholder="
17          isEmojiIcon ? __('Replace with an icon...') : __('Select an icon...')
18        "
19      />
20    </div>
21  </div>
22</template>
23
24<script setup lang="ts">
25import { computed } from "vue";
26import { IconPicker } from "frappe-ui/experimental";
27import { __ } from "./translation";
28import { isEmoji } from "./utils";
29
30const icon = defineModel<string>({ default: "" });
31
32// IconPicker is lucide-only; keep a legacy emoji out of it until replaced.
33const isEmojiIcon = computed(() => isEmoji(icon.value));
34const pickerIcon = computed({
35  get: () => (isEmojiIcon.value ? "" : icon.value),
36  set: (value) => (icon.value = value || ""),
37});
38</script>
39