feat: rework Image widget

lua/wikis/arenafps/Infobox/Map/Custom.lua

@@ -54,7 +54,7 @@ function CustomInjector:parse(widgetId, widgets)
 				children = {WidgetImage{
 					imageLight = args.minimap,
 					size = '350px',
-					alignment = 'center',
+					horizontalAlignment = 'center',
 				}}
 			} or nil
 		)

lua/wikis/commons/Widget/Image/Icon/Image.lua

@@ -7,42 +7,79 @@
 
 local Lua = require('Module:Lua')
 
+local Array = Lua.import('Module:Array')
 local Class = Lua.import('Module:Class')
-local Image = Lua.import('Module:Image')
+local Logic = Lua.import('Module:Logic')
 
 local WidgetIcon = Lua.import('Module:Widget/Image/Icon')
 
 ---@class IconImageWidgetParameters
 ---@field imageLight string?
 ---@field imageDark string?
----@field link string?
----@field size string?
----@field caption string?
+---@field link string
 ---@field alt string?
----@field alignment string?
+---@field class string?
+---@field border 'border'? # only available if `format: 'frameless'?`
+---@field format 'frameless'|'frame'|'thumb'?
+---@field size string? # '{width}px'|'x{height}px'|'{width}x{height}px'
+---@field horizontalAlignment 'left'|'right'|'center'|'none'?
+---@field verticalAlignment 'baseline'|'sub'|'super'|'top'|'text-top'|'middle'|'bottom'|'text-bottom'?
+---@field caption string?
+---@field alignment string? # legacy for during conversion
 
 ---@class IconImageWidget: IconWidget
 ---@operator call(IconImageWidgetParameters): IconImageWidget
 ---@field props IconImageWidgetParameters
 local Icon = Class.new(WidgetIcon)
 Icon.defaultProps = {
 	link = '',
-	size = 'x20px'
+	size = 'x20px',
+	verticalAlignment = 'middle', -- make the implicit mw default explicit
 }
 
 ---@return string?
 function Icon:render()
-	return Image.display(
-		self.props.imageLight,
-		self.props.imageDark,
-		{
-			link = self.props.link,
-			size = self.props.size,
-			caption = self.props.caption,
-			alt = self.props.alt,
-			alignment = self.props.alignment,
-		}
+	-- legacy, only for conversion outside of git ...
+	self.props.horizontalAlignment = self.props.horizontalAlignment or self.props.alignment
+
+	local imageLight = self.props.imageLight
+	local imageDark = self.props.imageDark
+	if Logic.isEmpty(imageLight) or Logic.isEmpty(imageDark) or imageLight == imageDark then
+		return self:_make(Logic.nilIfEmpty(imageLight) or Logic.nilIfEmpty(imageDark))
+	end
+
+	return self:_make(imageLight, 'show-when-light-mode')
+		.. self:_make(imageDark, 'show-when-dark-mode')
+end
+
+---@param image string?
+---@param themeClass string?
+---@return string
+---@overload fun(nil): nil
+function Icon:_make(image, themeClass)
+	if not image then
+		return
+	end
+	local class = table.concat(Array.append({Logic.nilIfEmpty(self.props.class)}, themeClass), ' ')
+
+	local border = Logic.nilIfEmpty(self.props.border)
+	assert((self.props.format == 'frameless' or not self.props.format) or not border,
+		'border can only be used for frameless images')
+
+	local parts = Array.append({},
+		'File:' .. image,
+		Logic.nilIfEmpty(self.props.border),
+		Logic.nilIfEmpty(self.props.format),
+		Logic.isNumeric(self.props.size) and (self.props.size .. 'px') or Logic.nilIfEmpty(self.props.size),
+		Logic.nilIfEmpty(self.props.horizontalAlignment),
+		self.props.verticalAlignment ~= 'middle' and self.props.verticalAlignment or nil,
+		'link=' .. self.props.link,
+		Logic.isNotEmpty(self.props.alt) and ('alt=' .. self.props.alt) or nil,
+		Logic.isNotEmpty(class) and ('class=' .. class) or nil,
+		Logic.nilIfEmpty(self.props.caption)
 	)
+
+	return '[[' .. table.concat(parts, '|') .. ']]'
 end
 
 return Icon

lua/wikis/commons/Widget/Image/Icon/TeamIcon.lua

@@ -55,7 +55,7 @@ function TeamIcon:_getIcon(image, size, link)
 	return WidgetIconImage{
 		imageLight = image,
 		size = size,
-		alignment = 'middle',
+		verticalAlignment = 'middle',
 		caption = self.props.name,
 		link = link,
 	}

lua/wikis/hearthstone/Infobox/Unit/Custom.lua

@@ -76,7 +76,7 @@ function CustomInjector:parse(id, widgets)
 			-- returning Fragment is needed to have placeholders where necessary
 			if not value then return HtmlWidgets.Fragment{} end
 			return HtmlWidgets.Fragment{children = {
-				Image{size = 'x32px', alignment = 'text-top', link = link, imageLight = image},
+				Image{size = 'x32px', verticalAlignment = 'text-top', link = link, imageLight = image},
 				HtmlWidgets.Br{},
 				value,
 			}}

lua/wikis/heroes/Infobox/Map/Custom.lua

@@ -86,7 +86,7 @@ function CustomMap:_image2()
 		children = {Image{
 			imageLight = self.args.image2,
 			size = '294px',
-			alignment = 'center',
+			horizontalAlignment = 'center',
 		}}
 	}
 end