feat: big update for highlighting

README.md

@@ -25,7 +25,9 @@ please open an issue or pull request. I'm very happy to hear from you.
 create your own component. I'm very happy to see your component. So if you have
 any idea to create a new component, please open an issue or pull request.
 
-🛠️ At present, the highlight feature of this plugin is very simple. So I hope you can contribute to this plugin to make it better.
+🛠️ At present, I feel that use table to create new component is easy to control
+than creating by calling get and set function. So I recommend you to use branch
+[table_version](https://github.com/sontungexpt/sttusline/tree/table_version) instead of this branch
 
 ## Preview
 
@@ -53,7 +55,10 @@ any idea to create a new component, please open an issue or pull request.
         event = { "BufEnter" },
         config = function(_, opts)
             require("sttusline").setup {
-                -- 0 | 1 | 2 | 3
+                -- statusline_color = "#000000",
+                statusline_color = "StatusLine",
+
+                -- | 1 | 2 | 3
                 -- recommended: 3
                 laststatus = 3,
                 disabled = {
@@ -99,7 +104,6 @@ or copy the template to your component module
 
 ```lua
 -- Change NewComponent to your component name
-local utils = require("sttusline.utils")
 local NewComponent = require("sttusline.set_component").new()
 
 -- The component will be update when the event is triggered
@@ -125,26 +129,51 @@ NewComponent.set_config {}
 NewComponent.set_padding(1)
 -- or NewComponent.set_padding{ left = 1, right = 1 }
 
--- The colors of the component
+-- The colors of the component. Rely on the return value of the update function, you have 3 ways to set the colors
+-- If the return value is string
+-- NewComponent.set_colors { fg = colors.set_black, bg = colors.set_white }
+-- If the return value is table of string
+-- NewComponent.set_colors { { fg = "#009900", bg = "#ffffff" }, { fg = "#000000", bg = "#ffffff" }}
+-- -- so if the return value is { "string1", "string2" }
+-- -- then the string1 will be highlight with { fg = "#009900", bg = "#ffffff" }
+-- -- and the string2 will be highlight with { fg = "#000000", bg = "#ffffff" }
+--
+-- -- if you don't want to add highlight for the string1 now
+-- -- because it will auto update new colors when the returning value in update function is a table that contains the color options,
+-- -- you can add a empty table in the first element
+-- -- {
+--     colors = {
+--         {},
+--         { fg = "#000000", bg = "#ffffff" }
+--     },
+-- -- }
+--
+-- NOTE: The colors options can be the colors name or the colors options
+-- -- colors = {
+-- --  { fg = "#009900", bg = "#ffffff" },
+-- --  "DiagnosticsSignError",
+-- -- },
+-- -- So if the return value is { "string1", "string2" }
+-- -- then the string1 will be highlight with { fg = "#009900", bg = "#ffffff" }
+-- -- and the string2 will be highlight with the colors options of the DiagnosticsSignError highlight
+-- -- Or you can set the fg(bg) follow the colors options of the DiagnosticsSignError highlight
+-- -- {
+-- --  colors = {
+-- --      { fg = "DiagnosticsSignError", bg = "#ffffff" },
+-- --      "DiagnosticsSignError",
+-- --  },
+-- -- }
+
 NewComponent.set_colors {} -- { fg = colors.set_black, bg = colors.set_white }
 
--- The function will return the value of the component to display on the statusline
--- Must return a string
+-- The function will return the value of the component to display on the statusline(required).
+-- Must return a string or a table of string or a table of  { "string", { fg = "color", bg = "color" } }
+-- NewComponent.set_update(function() return { "string1", "string2" } end)
+-- NewComponent.set_update(function() return { { "string1", {fg = "#000000", bg ="#fdfdfd"} },  "string3", "string4" } end)
 NewComponent.set_update(function() return "" end)
--- NOTE:
--- If you don't use NewComponent.set_colors{} and you want to customize the highlight of your component
--- You should use utils.add_highlight_name(value, highlight_name) to add the highlight name to the value
--- After that you can set the highlight of your component by using vim.api.nvim_set_hl(0, highlight_name, opts) (You should add this to NewComponent.set_onhighlight)
--- The function utils.add_highlight_name(value,highlight_name) will return the value
--- So you can use it like this:
--- NewComponent.set_update(function() return utils.add_highlight_name("Hello", "HelloHighlight") end)
--- NewComponent.set_onhighlight(function() vim.api.nvim_set_hl(0, "HelloHighlight", { fg = "#ffffff", bg = "#000000" }) end)
 
 
 -- The function will call when the component is highlight
--- You should use it to set the highlight of the component
--- Example:
--- NewComponent.set_onhighlight(function() vim.api.nvim_set_hl(0, "ComponentHighlight", { fg = colors.set_black, bg = colors.set_white }) end)
 NewComponent.set_onhighlight(function() end)
 
 -- The function will return the condition to display the component when the component is update
@@ -221,18 +250,7 @@ We provide you some default component:
 
 ```lua
     require("sttusline").setup {
-        -- 0 | 1 | 2 | 3
-        -- recommended: 3
-        laststatus = 3,
-        disabled = {
-            filetypes = {
-                -- "NvimTree",
-                -- "lazy",
-            },
-            buftypes = {
-                -- "terminal",
-            },
-        },
+        -- ...
         components = {
             -- "mode",
             -- "filename",
@@ -370,15 +388,15 @@ Some config I provide to override default component
         ["x"] = { "CONFIRM", "STTUSLINE_CONFIRM_MODE" },
     },
     mode_colors = {
-        ["STTUSLINE_NORMAL_MODE"] = { fg = colors.blue, bg = colors.bg },
-        ["STTUSLINE_INSERT_MODE"] = { fg = colors.green, bg = colors.bg },
-        ["STTUSLINE_VISUAL_MODE"] = { fg = colors.purple, bg = colors.bg },
-        ["STTUSLINE_NTERMINAL_MODE"] = { fg = colors.gray, bg = colors.bg },
-        ["STTUSLINE_TERMINAL_MODE"] = { fg = colors.cyan, bg = colors.bg },
-        ["STTUSLINE_REPLACE_MODE"] = { fg = colors.red, bg = colors.bg },
-        ["STTUSLINE_SELECT_MODE"] = { fg = colors.magenta, bg = colors.bg },
-        ["STTUSLINE_COMMAND_MODE"] = { fg = colors.yellow, bg = colors.bg },
-        ["STTUSLINE_CONFIRM_MODE"] = { fg = colors.yellow, bg = colors.bg },
+        ["STTUSLINE_NORMAL_MODE"] = { fg = colors.blue },
+        ["STTUSLINE_INSERT_MODE"] = { fg = colors.green },
+        ["STTUSLINE_VISUAL_MODE"] = { fg = colors.purple },
+        ["STTUSLINE_NTERMINAL_MODE"] = { fg = colors.gray },
+        ["STTUSLINE_TERMINAL_MODE"] = { fg = colors.cyan },
+        ["STTUSLINE_REPLACE_MODE"] = { fg = colors.red },
+        ["STTUSLINE_SELECT_MODE"] = { fg = colors.magenta },
+        ["STTUSLINE_COMMAND_MODE"] = { fg = colors.yellow },
+        ["STTUSLINE_CONFIRM_MODE"] = { fg = colors.yellow },
         },
     },
     auto_hide_on_vim_resized = true,
@@ -395,12 +413,6 @@ Some config I provide to override default component
             HINT = "󰌵",
             WARN = "",
         },
-        diagnostics_color = {
-            ERROR = "DiagnosticError",
-            WARN = "DiagnosticWarn",
-            HINT = "DiagnosticHint",
-            INFO = "DiagnosticInfo",
-        },
         order = { "ERROR", "WARN", "INFO", "HINT" },
     }
 ```
@@ -425,7 +437,7 @@ encoding.set_config {
 ```lua
     local filename = require("sttusline.components.filename")
     filename.set_config {
-        color = { fg = colors.orange, bg = colors.bg },
+        color = { fg = colors.orange },
     }
 ```
 
@@ -450,11 +462,6 @@ encoding.set_config {
             changed = "",
             removed = "",
         },
-        colors = {
-            added = "DiagnosticInfo",
-            changed = "DiagnosticWarn",
-            removed = "DiagnosticError",
-        },
         order = { "added", "changed", "removed" },
     }
 ```
@@ -464,23 +471,23 @@ encoding.set_config {
 ```lua
 local indent = require("sttusline.components.indent")
 
-indent.set_colors { fg = colors.cyan, bg = colors.bg }
+indent.set_colors { fg = colors.cyan }
 ```
 
 - lsps-formatters
 
 ```lua
 local lsps_formatters = require("sttusline.components.lsps-formatters")
 
-lsps_formatters.set_colors { fg = colors.magenta, bg = colors.bg }
+lsps_formatters.set_colors { fg = colors.magenta }
 ```
 
 - copilot
 
 ```lua
 local copilot = require("sttusline.components.copilot")
 
-copilot.set_colors { fg = colors.yellow, bg = colors.bg }
+copilot.set_colors { fg = colors.yellow }
 copilot.set_config {
     icons = {
         normal = "",
@@ -502,7 +509,7 @@ pos_cursor.set_colors { fg = colors.fg }
 
 ```lua
 local pos_cursor_progress = require("sttusline.components.pos-cursor-progress")
-pos_cursor_rogress.set_colors { fg = colors.orange, bg = colors.bg }
+pos_cursor_rogress.set_colors { fg = colors.orange }
 ```
 
 ## Contributing

lua/sttusline/component.lua

@@ -79,11 +79,11 @@ function Component.new()
 
 		get_colors = function() return component_data.colors end,
 		set_colors = function(colors)
-			if type(colors) == "table" then
-				component_data.colors = {
-					fg = type(colors.fg) == "string" and colors.fg or nil,
-					bg = type(colors.bg) == "string" and colors.bg or nil,
-				}
+			if
+				require("sttusline.utils").is_highlight_option(colors)
+				or require("sttusline.utils").is_highlight_name(colors)
+			then
+				component_data.colors = colors
 			end
 		end,
 

lua/sttusline/components/diagnostics.lua

@@ -1,10 +1,13 @@
-local HIGHLIGHT_PREFIX = "STTUSLINE_DIAGNOSTICS_"
-
 local colors = require("sttusline.utils.color")
-local utils = require("sttusline.utils")
 local diag = vim.diagnostic
 
 local Diagnostics = require("sttusline.component").new()
+Diagnostics.set_colors {
+	{ fg = colors.tokyo_diagnostics_error },
+	{ fg = colors.tokyo_diagnostics_warn },
+	{ fg = colors.tokyo_diagnostics_hint },
+	{ fg = colors.tokyo_diagnostics_info },
+}
 
 Diagnostics.set_config {
 	icons = {
@@ -13,12 +16,6 @@ Diagnostics.set_config {
 		HINT = "󰌵",
 		WARN = "",
 	},
-	diagnostics_color = {
-		ERROR = { fg = colors.tokyo_diagnostics_error, bg = colors.bg },
-		WARN = { fg = colors.tokyo_diagnostics_warn, bg = colors.bg },
-		HINT = { fg = colors.tokyo_diagnostics_hint, bg = colors.bg },
-		INFO = { fg = colors.tokyo_diagnostics_info, bg = colors.bg },
-	},
 	order = { "ERROR", "WARN", "INFO", "HINT" },
 }
 
@@ -38,39 +35,25 @@ Diagnostics.set_update(function()
 
 	local config = Diagnostics.get_config()
 	local icons = config.icons
-	local diagnostics_color = config.diagnostics_color
 	local order = config.order
 
+	local should_add_spacing = false
 	for _, key in ipairs(order) do
 		local count = #diag.get(0, { severity = diag.severity[key] })
 
 		if count > 0 then
-			local color = diagnostics_color[key]
-			if color then
-				if utils.is_color(color) or type(color) == "table" then
-					table.insert(
-						result,
-						utils.add_highlight_name(icons[key] .. " " .. count, HIGHLIGHT_PREFIX .. key)
-					)
-				else
-					table.insert(result, utils.add_highlight_name(icons[key] .. " " .. count, color))
-				end
+			if should_add_spacing then
+				table.insert(result, " " .. icons[key] .. " " .. count)
+			else
+				should_add_spacing = true
+				table.insert(result, icons[key] .. " " .. count)
 			end
+		else
+			table.insert(result, "")
 		end
 	end
 
-	return #result > 0 and table.concat(result, " ") or ""
-end)
-
-Diagnostics.set_onhighlight(function()
-	local diagnostics_color = Diagnostics.get_config().diagnostics_color
-	for key, color in pairs(diagnostics_color) do
-		if utils.is_color(color) then
-			vim.api.nvim_set_hl(0, HIGHLIGHT_PREFIX .. key, { fg = color, bg = colors.bg })
-		elseif type(color) == "table" then
-			vim.api.nvim_set_hl(0, HIGHLIGHT_PREFIX .. key, color)
-		end
-	end
+	return result
 end)
 
 return Diagnostics

lua/sttusline/components/encoding.lua

@@ -1,7 +1,7 @@
 local colors = require("sttusline.utils.color")
 local Encoding = require("sttusline.component").new()
 
-Encoding.set_colors { fg = colors.yellow, bg = colors.bg }
+Encoding.set_colors { fg = colors.yellow }
 
 Encoding.set_config {
 	["utf-8"] = "󰉿",

lua/sttusline/components/filename.lua

@@ -1,20 +1,14 @@
-local FILENAME_HIGHLIGHT = "STTUSLINE_FILE_NAME"
-local ICON_HIGHLIGHT = "STTUSLINE_FILE_ICON"
-
 local fn = vim.fn
 local get_option = vim.api.nvim_buf_get_option
-local hl = vim.api.nvim_set_hl
-
 local colors = require("sttusline.utils.color")
-local utils = require("sttusline.utils")
 
 local Filename = require("sttusline.component").new()
 
-Filename.set_config {
-	color = { fg = colors.orange, bg = colors.bg },
-}
-
 Filename.set_event { "BufEnter", "WinEnter" }
+Filename.set_colors {
+	{},
+	{ fg = colors.orange },
+}
 
 Filename.set_update(function()
 	local has_devicons, devicons = pcall(require, "nvim-web-devicons")
@@ -44,22 +38,17 @@ Filename.set_update(function()
 		elseif filetype == "lazy" then
 			icon, color_icon = "󰏔", colors.red
 			filename = "Lazy"
+		elseif filetype == "checkhealth" then
+			icon, color_icon = "", colors.red
+			filename = "CheckHealth"
+		elseif filetype == "plantuml" then
+			icon, color_icon = "", colors.green
 		elseif filetype == "dashboard" then
 			icon, color_icon = "", colors.red
 		end
 	end
 
-	hl(0, ICON_HIGHLIGHT, { fg = color_icon, bg = colors.bg })
-
-	if icon then
-		return utils.add_highlight_name(icon, ICON_HIGHLIGHT)
-			.. " "
-			.. utils.add_highlight_name(filename, FILENAME_HIGHLIGHT)
-	else
-		return utils.add_highlight_name(filename, FILENAME_HIGHLIGHT)
-	end
+	return { icon and { icon, { fg = color_icon } } or "", " " .. filename }
 end)
 
-Filename.set_onhighlight(function() hl(0, FILENAME_HIGHLIGHT, Filename.get_config().color) end)
-
 return Filename

lua/sttusline/components/git-branch.lua

@@ -2,7 +2,7 @@ local colors = require("sttusline.utils.color")
 
 local GitBranch = require("sttusline.component").new()
 
-GitBranch.set_colors { fg = colors.pink, bg = colors.bg }
+GitBranch.set_colors { fg = colors.pink }
 GitBranch.set_config {
 	icon = "",
 }
@@ -16,7 +16,8 @@ local get_branch = function()
 		if head_file then
 			local content = head_file:read("*all")
 			head_file:close()
-			return content:match("ref: refs/heads/(.-)%s*$")
+			-- branch name  or commit hash
+			return content:match("ref: refs/heads/(.-)%s*$") or content:sub(1, 7) or ""
 		end
 		return ""
 	end