Add cursor as Style property

Author: wwwillchen

mesop/component_helpers/style.py

@@ -121,6 +121,7 @@ class Style:
       color: Sets the color of the text inside the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/color).
       column_gap: Sets the gap between columns. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap).
       columns: Specifies the number of columns in a multi-column element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/columns).
+      cursor: Sets the mouse cursor. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor).
       display: Defines the display type of the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
       flex_basis: Specifies the initial length of a flexible item. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis).
       flex_direction: Establishes the main-axis, thus defining the direction flex items are placed in the flex container. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
@@ -170,6 +171,7 @@ class Style:
   color: str | None = None
   column_gap: int | str | None = None
   columns: int | None = None
+  cursor: str | None = None
   display: Literal[
     # precomposed values
     "block",
@@ -267,6 +269,7 @@ def to_style_proto(s: Style) -> pb.Style:
     color=s.color,
     column_gap=_px_str(s.column_gap),
     columns=s.columns,
+    cursor=s.cursor,
     display=s.display,
     flex_basis=s.flex_basis,
     flex_direction=s.flex_direction,

mesop/protos/ui.proto

@@ -217,7 +217,7 @@ message UserDefinedType {
     repeated Arg args = 1;
 }
 
-// Next id: 46
+// Next id: 47
 message Style {
     optional string align_content = 32;
     optional string align_items = 1;
@@ -228,6 +228,7 @@ message Style {
     optional string color = 4;
     optional string column_gap = 33;
     optional int32 columns = 5;
+    optional string cursor = 46;
     optional string display = 6;
     optional string flex_basis = 7;
     optional string flex_direction = 8;

mesop/web/src/utils/styles.ts

@@ -49,6 +49,9 @@ export function formatStyle(styleObj: Style): string {
   if (styleObj.getColumns()) {
     style += `columns: ${styleObj.getColumns()};`;
   }
+  if (styleObj.getCursor()) {
+    style += `cursor: ${styleObj.getCursor()};`;
+  }
   if (styleObj.getDisplay()) {
     style += `display: ${styleObj.getDisplay()};`;
   }