From ddf67a060ba659f102673eff31eb2e30231c2d93 Mon Sep 17 00:00:00 2001
From: Eder Soares <edersoares@me.com>
Date: Thu, 31 Oct 2024 11:29:08 -0300
Subject: [PATCH] feat(InputMenu): allows to customize labels (#2295)

---
 docs/content/2.components/input-menu.md    | 4 ++++
 src/runtime/components/forms/InputMenu.vue | 4 ++--
 src/runtime/ui.config/forms/inputMenu.ts   | 8 +++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/docs/content/2.components/input-menu.md b/docs/content/2.components/input-menu.md
index 171349cc..460c2836 100644
--- a/docs/content/2.components/input-menu.md
+++ b/docs/content/2.components/input-menu.md
@@ -174,6 +174,8 @@ componentProps:
 
 Use the `#option-empty` slot to customize the content displayed when the `searchable` prop is `true` and there is no options. You will have access to the `query` property in the slot scope.
 
+You can also configure this globally through the `ui.inputMenu.default.optionEmpty.label` config. The token `{query}` will be replaced by `query` property. Defaults to `No results for "{query}".`.
+
 ::component-example
 ---
 component: 'input-menu-example-option-empty-slot'
@@ -186,6 +188,8 @@ componentProps:
 
 Use the `#empty` slot to customize the content displayed when there is no options. Defaults to `No options.`.
 
+You can also configure this globally through the `ui.inputMenu.default.empty.label` config. Defaults to `No options.`.
+
 ::component-example
 ---
 component: 'input-menu-example-empty-slot'
diff --git a/src/runtime/components/forms/InputMenu.vue b/src/runtime/components/forms/InputMenu.vue
index 7714983c..5f15383b 100644
--- a/src/runtime/components/forms/InputMenu.vue
+++ b/src/runtime/components/forms/InputMenu.vue
@@ -75,12 +75,12 @@
 
             <p v-if="query && !filteredOptions.length" :class="uiMenu.option.empty">
               <slot name="option-empty" :query="query">
-                No results for "{{ query }}".
+                {{ uiMenu.default.optionEmpty.label.replace('{query}', query) }}
               </slot>
             </p>
             <p v-else-if="!filteredOptions.length" :class="uiMenu.empty">
               <slot name="empty" :query="query">
-                No options.
+                {{ uiMenu.default.empty.label }}
               </slot>
             </p>
           </HComboboxOptions>
diff --git a/src/runtime/ui.config/forms/inputMenu.ts b/src/runtime/ui.config/forms/inputMenu.ts
index baa4dae4..dfee6189 100644
--- a/src/runtime/ui.config/forms/inputMenu.ts
+++ b/src/runtime/ui.config/forms/inputMenu.ts
@@ -53,7 +53,13 @@ export default {
   },
   default: {
     selectedIcon: 'i-heroicons-check-20-solid',
-    trailingIcon: 'i-heroicons-chevron-down-20-solid'
+    trailingIcon: 'i-heroicons-chevron-down-20-solid',
+    empty: {
+      label: 'No options.'
+    },
+    optionEmpty: {
+      label: 'No results for "{query}".'
+    }
   },
   arrow: {
     ...arrow,