Merge pull request #4 from grapp-dev/feat/add-winhighlight

feat: ✨ Allows modifying the appearance and behavior of the floating window

Author: mobily

docs/pages/docs/component.mdx

@@ -586,6 +586,38 @@ Where `Padding` is:
 ```
 </Property>
 
+#### window
+
+> Allows you to modify the appearance and behavior of the floating window.
+
+<Property 
+  types={['WindowOptions']}
+>
+Where `WindowOptions` is:
+
+```lua
+{
+  blend = number,
+  highlight = table | string
+}
+```
+
+Examples:
+```lua
+window = {
+  highlight = {
+    FloatBorder = "Normal",
+    NormalFloat = "String",
+  }
+}
+
+window = {
+  highlight = "FloatBorder:Normal,NormalFloat:String"
+}
+```
+
+</Property>
+
 #### global_focus_key
 
 > Specifies a global key used to focus on the component.

lua/nui-components/component/init.lua

@@ -10,16 +10,7 @@ local fn = require("nui-components.utils.fn")
 local Component = Popup:extend("Component")
 
 function Component:init(props, popup_options)
-  popup_options = fn.deep_merge({
-    enter = false,
-    focusable = true,
-    win_options = {
-      winblend = 0,
-    },
-    zindex = 100,
-  }, fn.default_to(popup_options, {}))
-
-  props = fn.merge({
+  props = fn.deep_merge({
     hidden = false,
     mappings = fn.always({}),
     events = fn.always({}),
@@ -30,8 +21,34 @@ function Component:init(props, popup_options)
     on_mount = fn.ignore,
     on_unmount = fn.ignore,
     id = tostring(math.random()),
+    window = {
+      blend = 0,
+      highlight = nil,
+    },
   }, props)
 
+  local winhighlight = props.window.highlight
+
+  if winhighlight and type(winhighlight) == "table" then
+    winhighlight = table.concat(
+      fn.kreduce(winhighlight, function(acc, value, key)
+        table.insert(acc, key .. ":" .. value)
+        return acc
+      end, {}),
+      ","
+    )
+  end
+
+  popup_options = fn.deep_merge({
+    enter = false,
+    focusable = true,
+    win_options = {
+      winblend = props.window.blend,
+      winhighlight = winhighlight,
+    },
+    zindex = 100,
+  }, popup_options)
+
   if props.border_label and not props.border_style then
     props.border_style = "rounded"
   end
@@ -161,6 +178,7 @@ function Component:_default_prop_types()
     padding = { "table", "number", "nil" },
     autofocus = { "boolean", "nil" },
     validate = { "function", "nil" },
+    window = "table",
   }
 end