Merge pull request #16 from struckchure/develop

Develop

Author: struckchure

examples/builder/main.py

@@ -13,7 +13,7 @@
 from melid.router import Route, Router
 from melid.store import State
 from melid.tailwind import Tailwind, TailwindConfig
-from melid.widgets import Button, Input, InputType, Label
+from melid.widgets import Button, Input, InputType, Label, Option, Select
 
 tw_cfg = TailwindConfig().extend(colors={"primary": "gold"})
 tw = Tailwind(tw_cfg).tw
@@ -73,6 +73,12 @@ def LoginPage():
     return Box(
         Box(
             [
+                Select(
+                    [Option("Python", 1), Option("Go", 2), Option("TypeScript", 3)],
+                    on_change=print,
+                    style=tw("Select", "rounded-0 p-2 bg-gray-900")
+                    + tw("Select QAbstractItemView", "px-2 w-full"),
+                ),
                 Label(
                     update_title()[0],
                     style=tw(

examples/store/main.py

@@ -26,12 +26,12 @@ def __init__(self, *args, **kwargs):
 
         self.label = Label(lambda: globalStore.state["count"])
 
-        self.increase_button = Button(text="+")
+        self.increase_button = Button(child="+")
         self.increase_button.clicked.connect(
             lambda: globalStore.setState({"count": globalStore.state["count"] + 1})
         )
 
-        self.reduce_button = Button(text="-")
+        self.reduce_button = Button(child="-")
         self.reduce_button.clicked.connect(
             lambda: globalStore.setState({"count": globalStore.state["count"] - 1})
         )

examples/tailwind/main.py

@@ -4,11 +4,17 @@
 BASE_DIR = Path(__file__).parent.parent.parent
 sys.path.append(str(BASE_DIR))
 
-from melid.tailwind import Tailwind
+from melid.tailwind import Tailwind, TailwindConfig
+
+tw_cfg = TailwindConfig()
+tw_cfg.extend(
+    colors={"primary": "orange"},
+    variants={"checked": {"type": "pseudo", "pseudo": ":checked"}},
+)
 
 print(
-    Tailwind().tw(
+    Tailwind(tw_cfg).tw(
         "Button",
-        "bg-blue-300 text-black hover:bg-blue-500 rounded-md hover:p-sm ml-sm",
+        "bg-primary border-primary text-black checked:bg-pink-500 hover:bg-blue-500 rounded-md hover:p-sm ml-sm after:w-40",
     )
 )

melid/store.py

@@ -49,3 +49,37 @@ def set(self, value):
 
     def subscribe(self, callback: typing.Callable[[typing.Any], None]):
         self.updated.connect(callback)
+
+
+class StatefulWidget:
+    def state(
+        self,
+        state: State,
+        condition: typing.Union[bool, typing.Callable[[], bool]] = True,
+        attribute: str = None,
+        params: typing.Union[typing.List, typing.Dict, typing.Callable] = None,
+    ):
+        def resolve_params(p):
+            if callable(p):
+                return resolve_params(p())
+
+            p1 = p if isinstance(p, list) else []
+            p2 = p if isinstance(p, dict) else {}
+
+            return p1, p2
+
+        def resolve_condition(c):
+            if callable(c):
+                return resolve_condition(c())
+
+            return c
+
+        def on_state_change():
+            p1, p2 = resolve_params(params)
+
+            if resolve_condition(condition) and attribute and hasattr(self, attribute):
+                getattr(self, attribute)(*p1, **p2)
+
+        state.subscribe(on_state_change)
+
+        return self

melid/tailwind/size.py

@@ -72,27 +72,27 @@ def generate_size_utilities(sizes: Dict[str, str]) -> Dict[str, Any]:
         }
         utilities[f"border-x-{name}"] = {
             "declarations": [
-                {"property": "border-width-left", "value": value},
-                {"property": "border-width-right", "value": value},
+                {"property": "border-left-width", "value": value},
+                {"property": "border-right-width", "value": value},
             ]
         }
         utilities[f"border-y-{name}"] = {
             "declarations": [
-                {"property": "border-width-top", "value": value},
-                {"property": "border-width-bottom", "value": value},
+                {"property": "border-top-width", "value": value},
+                {"property": "border-bottom-width", "value": value},
             ],
         }
         utilities[f"border-l-{name}"] = {
-            "declarations": [{"property": "border-width-left", "value": value}]
+            "declarations": [{"property": "border-left-width", "value": value}]
         }
         utilities[f"border-r-{name}"] = {
-            "declarations": [{"property": "border-width-right", "value": value}]
+            "declarations": [{"property": "border-right-width", "value": value}]
         }
         utilities[f"border-t-{name}"] = {
-            "declarations": [{"property": "border-width-top", "value": value}]
+            "declarations": [{"property": "border-top-width", "value": value}]
         }
         utilities[f"border-b-{name}"] = {
-            "declarations": [{"property": "border-width-bottom", "value": value}]
+            "declarations": [{"property": "border-bottom-width", "value": value}]
         }
 
         # Border Radius Utilities

melid/widgets.py

@@ -1,14 +1,15 @@
 import enum
 import types
 import typing
+from dataclasses import dataclass
 
 from PyQt5 import QtCore, QtGui, QtWidgets
 
-from melid.store import State
+from melid.store import StatefulWidget
 from melid.types import AppEvents
 
 
-class Widget(QtWidgets.QGroupBox):
+class Widget(QtWidgets.QGroupBox, StatefulWidget):
 
     STYLESHEET_PATH = ""
     STYLESHEET_TYPE = "CSS"
@@ -19,8 +20,8 @@ def __init__(
     ):
         super().__init__()
 
-        if qt_window_resized:
-            qt_window_resized.connect(self.onWindowResized)
+        # if qt_window_resized:
+        #     qt_window_resized.connect(self.onWindowResized)
 
         self.setObjectName(self.__class__.__name__)
         self.setContentsMargins(0, 0, 0, 0)
@@ -90,38 +91,6 @@ def onWindowResized(self, size: QtCore.QSize):
     def updateStyleSheet(self, style: str):
         self.setStyleSheet(self.styleSheet() + "\n%s" % style)
 
-    def state(
-        self,
-        state: State,
-        condition: typing.Union[bool, typing.Callable[[], bool]] = True,
-        attribute: str = None,
-        params: typing.Union[typing.List, typing.Dict, typing.Callable] = None,
-    ):
-        def resolve_params(p):
-            if callable(p):
-                return resolve_params(p())
-
-            p1 = p if isinstance(p, list) else []
-            p2 = p if isinstance(p, dict) else {}
-
-            return p1, p2
-
-        def resolve_condition(c):
-            if callable(c):
-                return resolve_condition(c())
-
-            return c
-
-        def on_state_change():
-            p1, p2 = resolve_params(params)
-
-            if resolve_condition(condition) and attribute and hasattr(self, attribute):
-                getattr(self, attribute)(*p1, **p2)
-
-        state.subscribe(on_state_change)
-
-        return self
-
 
 class Label(QtWidgets.QLabel, Widget):
     def __init__(self, text: str, style: str = "", *args, **kwargs):
@@ -136,21 +105,25 @@ def __init__(self, text: str, style: str = "", *args, **kwargs):
 class Button(QtWidgets.QPushButton, Widget):
     def __init__(
         self,
-        text: typing.Optional[typing.Union[str, QtWidgets.QWidget]] = "",
+        child: typing.Optional[typing.Union[str, QtWidgets.QWidget, QtGui.QIcon]] = "",
         on_click: typing.Optional[types.FunctionType] = None,
         style: typing.Optional[str] = "",
         *args,
         **kwargs,
     ):
         super(Button, self).__init__(*args, **kwargs)
 
-        if isinstance(text, str):
-            self.setText(text)
+        self.setObjectName(self.__class__.__name__)
+
+        if child:
+            if isinstance(child, str):
+                self.setText(child)
+            if isinstance(child, QtGui.QIcon):
+                self.setIcon(child)
 
         if on_click:
             self.clicked.connect(lambda: on_click())
 
-        self.setObjectName(self.__class__.__name__)
         self.setStyleSheet(style)
         self.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor))
 
@@ -182,8 +155,87 @@ def __init__(
 
         self.setObjectName(self.__class__.__name__)
         self.setStyleSheet(style)
-        self.setSizePolicy(
-            QtWidgets.QSizePolicy(
-                QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding
-            )
+
+
+class TextArea(QtWidgets.QTextEdit, Widget):
+    def __init__(
+        self,
+        on_change: typing.Optional[typing.Callable] = None,
+        style: typing.Optional[str] = "",
+    ):
+        super().__init__()
+
+        if on_change:
+            self.textChanged.connect(on_change)
+
+        self.setObjectName(self.__class__.__name__)
+        self.setStyleSheet(style)
+
+
+@dataclass
+class Option:
+    label: str
+    value: typing.Any
+
+
+class Select(QtWidgets.QComboBox, Widget):
+    def __init__(
+        self,
+        options: typing.Optional[typing.List[Option]] = None,
+        on_change: typing.Optional[typing.Callable] = None,
+        style: typing.Optional[str] = "",
+    ):
+        super().__init__()
+
+        if options:
+            self.addItems(list(map(lambda x: x.label, options)))
+
+        if on_change:
+            self.activated.connect(lambda idx: on_change(options[idx].value))
+
+        # Set placeholder text for the combo box
+        self.setEditable(True)
+        self.lineEdit().setPlaceholderText("Select an option...")
+        self.lineEdit().setAlignment(QtCore.Qt.AlignCenter)
+        self.setEditable(False)  # Disable edit after setting placeholder
+
+        # Set custom background color and styling using CSS
+        # self.setStyleSheet(
+        #     """
+        #         QComboBox {
+        #             background-color: #EFEFEF;
+        #             border: 1px solid #AFAFAF;
+        #             padding: 5px;
+        #             border-radius: 5px;
+        #         }
+        #         QComboBox::drop-down {
+        #             subcontrol-origin: padding;
+        #             subcontrol-position: top right;
+        #             width: 20px;
+        #             border-left-width: 1px;
+        #             border-left-color: darkgray;
+        #             border-left-style: solid; /* Just a single line */
+        #             border-top-right-radius: 3px; /* same radius as the QComboBox */
+        #             border-bottom-right-radius: 3px;
+        #         }
+        #         QComboBox::down-arrow {
+        #             image: url(icons/down_arrow.png);  /* Custom down-arrow icon */
+        #         }
+        #         QComboBox QAbstractItemView {
+        #             background-color: white;
+        #             selection-background-color: lightgray;
+        #             selection-color: black;
+        #         }
+        #     """
+        # )
+        self.setStyleSheet(
+            style
+            + """
+            Select::drop-down {
+                subcontrol-origin: padding;
+                subcontrol-position: top right;
+                width: 5px;
+                padding: 5px;
+            }
+            """
         )