fix(ux): allow custom empty messages in autocomp

- set custom message for State

models/doctype/Address/Address.js

@@ -50,6 +50,12 @@ export default {
       label: 'State',
       placeholder: 'State',
       fieldtype: 'AutoComplete',
+      emptyMessage: (doc) => {
+        if (doc.country) {
+          return 'Enter State';
+        }
+        return 'Enter Country to load States';
+      },
       getList: getStates,
     },
     {

src/components/Controls/AutoComplete.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dropdown :items="suggestions" :is-loading="isLoading">
+  <Dropdown :items="suggestions" :is-loading="isLoading" :df="df" :doc="doc">
     <template
       v-slot="{
         toggleDropdown,

src/components/Dropdown.vue

@@ -21,8 +21,11 @@
         <div v-if="isLoading" class="p-2 text-gray-600 italic">
           {{ _('Loading...') }}
         </div>
-        <div v-if="!isLoading && dropdownItems.length === 0" class="p-2 text-gray-600 italic">
+        <div
-          {{ _('Empty') }}
+          v-if="!isLoading && dropdownItems.length === 0"
+          class="p-2 text-gray-600 italic"
+        >
+          {{ getEmptyMessage() }}
         </div>
         <template v-else>
           <div v-for="d in dropdownItems" :key="d.label">
@@ -92,6 +95,12 @@ export default {
       type: Boolean,
       default: false,
     },
+    df: {
+      default: null,
+    },
+    doc: {
+      default: null,
+    },
   },
   components: {
     Popover,
@@ -156,6 +165,15 @@ export default {
     },
   },
   methods: {
+    getEmptyMessage() {
+      const { emptyMessage } = this.df ?? {};
+      if (typeof emptyMessage === 'function') {
+        return _(emptyMessage(this.doc));
+      } else if (emptyMessage) {
+        return _(emptyMessage);
+      }
+      return _('Empty');
+    },
     selectItem(d) {
       if (d.action) {
         d.action();