opendesk

1<template>
2  <FormControl
3    :type="show ? 'text' : 'password'"
4    :value="modelValue || value"
5    v-bind="$attrs"
6    @keydown.meta.i.prevent="show = !show"
7    @keydown.ctrl.i.prevent="show = !show"
8  >
9    <template #prefix v-if="$slots.prefix">
10      <slot name="prefix" />
11    </template>
12    <template #suffix>
13      <Tooltip bare>
14        <template #content>
15          <div
16            class="rounded-4 bg-surface-gray-10 py-1.5 px-2 text-xs text-ink-base shadow-xl"
17          >
18            <span class="flex items-center gap-1">
19              {{ show ? "Hide Password" : "Show Password" }}
20            </span>
21          </div>
22        </template>
23        <div>
24          <component
25            v-show="showEye"
26            :is="show ? LucideEyeOff : LucideEye"
27            class="h-3 cursor-pointer me-1"
28            @click="show = !show"
29          />
30        </div>
31      </Tooltip>
32    </template>
33  </FormControl>
34</template>
35<script setup lang="ts">
36import LucideEye from "~icons/lucide/eye";
37import LucideEyeOff from "~icons/lucide/eye-off";
38import { ref, computed } from "vue";
39import { FormControl, Tooltip } from "frappe-ui";
40
41const props = defineProps({
42  value: {
43    type: String,
44    default: "",
45  },
46  modelValue: {
47    type: String,
48    default: "",
49  },
50});
51
52const show = ref(false);
53const showEye = computed(() => {
54  let v = props.modelValue || props.value;
55  return !v?.includes("*");
56});
57</script>
58