From 4be5c18b7a2fbb46f3ff689160e98a2260051141 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 Nov 2023 15:40:42 +0530
Subject: [PATCH] feat: Link component to render any link field with options

---
 frontend/src/components/Controls/Link.vue | 54 +++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 frontend/src/components/Controls/Link.vue

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
new file mode 100644
index 00000000..be043143
--- /dev/null
+++ b/frontend/src/components/Controls/Link.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="space-y-1.5">
+    <label class="block" :class="labelClasses" v-if="attrs.label">
+      {{ attrs.label }}
+    </label>
+    <Autocomplete
+      :options="options"
+      v-model="value"
+      :size="attrs.size || 'sm'"
+      :variant="attrs.variant"
+      :placeholder="attrs.placeholder"
+    />
+  </div>
+</template>
+
+<script setup>
+import { call } from 'frappe-ui'
+import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
+import { defineModel, useAttrs, computed } from 'vue'
+import { computedAsync } from '@vueuse/core'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    required: true,
+  },
+})
+
+const value = defineModel()
+const attrs = useAttrs()
+
+const options = computedAsync(async () => {
+  let options = await call('frappe.desk.search.search_link', {
+    txt: '',
+    doctype: props.doctype,
+  })
+  return options?.map((option) => {
+    return {
+      label: option.value,
+      value: option.value,
+    }
+  })
+})
+
+const labelClasses = computed(() => {
+  return [
+    {
+      sm: 'text-xs',
+      md: 'text-base',
+    }[attrs.size || 'sm'],
+    'text-gray-600',
+  ]
+})
+</script>