VanUI 0.9.1: Support customized class and style overrides for cross button when it's hovered over

Author: Tao-VanJS

components/README.md

@@ -488,6 +488,20 @@ van.add(document.body, FloatingWindow(
 ))
 ```
 
+Window with customized close button:
+
+```ts
+van.add(document.body, FloatingWindow(
+  {
+    title: "Example Window 3", x: 175, y: 175, closeCross: "❌",
+    crossHoverStyleOverrides: {"background-color": "transparent"},
+  },
+  div({style: "display: flex; justify-content: center;"},
+    p("This is a floating window with custom cross button!"),
+  ),
+))
+```
+
 Window with `Tabs` and custom close button:
 
 ```ts
@@ -645,6 +659,8 @@ You can override the default stacking behavior by specifying `{customStacking: t
 * `childrenContainerStyleOverrides`: Type `Record<string, string | number>`. Default `{}`. Optional. A [property bag](#property-bag-for-style-overrides) for the styles you want to override for the container of `children` DOM nodes.
 * `crossClass`: Type `string`. Default `""`. Optional. The `class` attribute of the close button. You can specify multiple CSS classes separated by `" "`.
 * `crossStyleOverrides`: Type `Record<string, string | number>`. Default `{}`. Optional. A [property bag](#property-bag-for-style-overrides) for the styles you want to override for the close button.
+* `crossHoverClass`: Type `string`. Default `""`. Optional. The `class` attribute of the close button when it's hovered over. You can specify multiple CSS classes separated by `" "`.
+* `crossStyleOverrides`: Type `Record<string, string | number>`. Default `{}`. Optional. A [property bag](#property-bag-for-style-overrides) for the styles you want to override for the close button when it's hovered over.
 
 ### Property Bag for Style Overrides
 

components/dist/van-ui.d.ts

@@ -130,6 +130,8 @@ export interface FloatingWindowProps {
     readonly childrenContainerStyleOverrides?: CSSPropertyBag;
     readonly crossClass?: string;
     readonly crossStyleOverrides?: CSSPropertyBag;
+    readonly crossHoverClass?: string;
+    readonly crossHoverStyleOverrides?: CSSPropertyBag;
 }
 export declare const topMostZIndex: () => number;
-export declare const FloatingWindow: ({ title, closed, x, y, width, height, closeCross, customStacking, zIndex, disableMove, disableResize, headerColor, windowClass, windowStyleOverrides, headerClass, headerStyleOverrides, childrenContainerClass, childrenContainerStyleOverrides, crossClass, crossStyleOverrides, }: FloatingWindowProps, ...children: readonly ChildDom[]) => () => HTMLDivElement | null;
+export declare const FloatingWindow: ({ title, closed, x, y, width, height, closeCross, customStacking, zIndex, disableMove, disableResize, headerColor, windowClass, windowStyleOverrides, headerClass, headerStyleOverrides, childrenContainerClass, childrenContainerStyleOverrides, crossClass, crossStyleOverrides, crossHoverClass, crossHoverStyleOverrides, }: FloatingWindowProps, ...children: readonly ChildDom[]) => () => HTMLDivElement | null;

components/dist/van-ui.js

@@ -248,7 +248,7 @@ export const Banner = ({ backgroundColor = "#fff1a8", fontColor = "currentcolor"
 };
 let curWindowZIndex = 0;
 export const topMostZIndex = () => ++curWindowZIndex;
-export const FloatingWindow = ({ title, closed = van.state(false), x = 100, y = 100, width = 300, height = 200, closeCross = "×", customStacking = false, zIndex = 1, disableMove = false, disableResize = false, headerColor = "lightgray", windowClass = "", windowStyleOverrides = {}, headerClass = "", headerStyleOverrides = {}, childrenContainerClass = "", childrenContainerStyleOverrides = {}, crossClass = "", crossStyleOverrides = {}, }, ...children) => {
+export const FloatingWindow = ({ title, closed = van.state(false), x = 100, y = 100, width = 300, height = 200, closeCross = "×", customStacking = false, zIndex = 1, disableMove = false, disableResize = false, headerColor = "lightgray", windowClass = "", windowStyleOverrides = {}, headerClass = "", headerStyleOverrides = {}, childrenContainerClass = "", childrenContainerStyleOverrides = {}, crossClass = "", crossStyleOverrides = {}, crossHoverClass = "", crossHoverStyleOverrides = {}, }, ...children) => {
     const xState = stateOf(x), yState = stateOf(y);
     const widthState = stateOf(width), heightState = stateOf(height);
     const zIndexState = stateOf(zIndex);
@@ -257,6 +257,8 @@ export const FloatingWindow = ({ title, closed = van.state(false), x = 100, y =
     const dragging = van.state(false), resizingDirection = van.state(null);
     const startX = van.state(0), startY = van.state(0);
     const startWidth = van.state(0), startHeight = van.state(0);
+    const crossHover = crossHoverClass || Object.keys(crossHoverStyleOverrides) ?
+        van.state(false) : null;
     const onmousedown = (e) => {
         if (e.button !== 0)
             return;
@@ -390,9 +392,20 @@ export const FloatingWindow = ({ title, closed = van.state(false), x = 100, y =
         }),
         ...(disableMove ? {} : { onmousedown }),
     }, title, closeCross ? span({
-        class: ["vanui-window-cross"].concat(crossClass ? crossClass : []).join(" "),
-        style: toStyleStr(crossStyleOverrides),
+        class: () => ["vanui-window-cross"]
+            .concat(crossClass ? crossClass : [])
+            .concat(crossHoverClass && crossHover.val ? crossHoverClass : [])
+            .join(" "),
+        style: () => toStyleStr({
+            ...crossStyleOverrides,
+            ...(Object.keys(crossHoverStyleOverrides).length && crossHover.val ?
+                crossHoverStyleOverrides : {}),
+        }),
         onclick: () => closed.val = true,
+        ...(crossHover ? {
+            onmouseenter: () => crossHover.val = true,
+            onmouseleave: () => crossHover.val = false,
+        } : {})
     }, closeCross) : null) : disableMove ? null : div({
         class: "vanui-window-dragarea",
         onmousedown,

components/dist/van-ui.nomodule.js

@@ -248,7 +248,7 @@
   };
   let curWindowZIndex = 0;
   window.topMostZIndex = () => ++curWindowZIndex;
-  window.FloatingWindow = ({ title, closed = van.state(false), x = 100, y = 100, width = 300, height = 200, closeCross = "×", customStacking = false, zIndex = 1, disableMove = false, disableResize = false, headerColor = "lightgray", windowClass = "", windowStyleOverrides = {}, headerClass = "", headerStyleOverrides = {}, childrenContainerClass = "", childrenContainerStyleOverrides = {}, crossClass = "", crossStyleOverrides = {}, }, ...children) => {
+  window.FloatingWindow = ({ title, closed = van.state(false), x = 100, y = 100, width = 300, height = 200, closeCross = "×", customStacking = false, zIndex = 1, disableMove = false, disableResize = false, headerColor = "lightgray", windowClass = "", windowStyleOverrides = {}, headerClass = "", headerStyleOverrides = {}, childrenContainerClass = "", childrenContainerStyleOverrides = {}, crossClass = "", crossStyleOverrides = {}, crossHoverClass = "", crossHoverStyleOverrides = {}, }, ...children) => {
       const xState = stateOf(x), yState = stateOf(y);
       const widthState = stateOf(width), heightState = stateOf(height);
       const zIndexState = stateOf(zIndex);
@@ -257,6 +257,8 @@
       const dragging = van.state(false), resizingDirection = van.state(null);
       const startX = van.state(0), startY = van.state(0);
       const startWidth = van.state(0), startHeight = van.state(0);
+      const crossHover = crossHoverClass || Object.keys(crossHoverStyleOverrides) ?
+          van.state(false) : null;
       const onmousedown = (e) => {
           if (e.button !== 0)
               return;
@@ -390,9 +392,20 @@
           }),
           ...(disableMove ? {} : { onmousedown }),
       }, title, closeCross ? span({
-          class: ["vanui-window-cross"].concat(crossClass ? crossClass : []).join(" "),
-          style: toStyleStr(crossStyleOverrides),
+          class: () => ["vanui-window-cross"]
+              .concat(crossClass ? crossClass : [])
+              .concat(crossHoverClass && crossHover.val ? crossHoverClass : [])
+              .join(" "),
+          style: () => toStyleStr({
+              ...crossStyleOverrides,
+              ...(Object.keys(crossHoverStyleOverrides).length && crossHover.val ?
+                  crossHoverStyleOverrides : {}),
+          }),
           onclick: () => closed.val = true,
+          ...(crossHover ? {
+              onmouseenter: () => crossHover.val = true,
+              onmouseleave: () => crossHover.val = false,
+          } : {})
       }, closeCross) : null) : disableMove ? null : div({
           class: "vanui-window-dragarea",
           onmousedown,

components/dist/van-ui.nomodule.min.js

@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.2.5",
-    "vanjs-ui": "^0.9.0"
+    "vanjs-ui": "^0.9.1"
   }
 }

components/examples/banner/package-lock.json

@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.2.5",
-    "vanjs-ui": "^0.9.0"
+    "vanjs-ui": "^0.9.1"
   }
 }