Fixed command id collision. Added class support in style preset
This commit is contained in:
@@ -250,6 +250,42 @@ manager.add_formatter_preset("CHF", {
|
||||
})
|
||||
```
|
||||
|
||||
**CSS Classes in Style Presets:**
|
||||
|
||||
Style presets can include a special `__class__` key to apply CSS classes (DaisyUI, Tailwind, or custom):
|
||||
|
||||
```python
|
||||
manager.add_style_preset("badge", {
|
||||
"__class__": "badge badge-primary",
|
||||
"background-color": "blue",
|
||||
"color": "white"
|
||||
})
|
||||
```
|
||||
|
||||
When a preset with `__class__` is applied:
|
||||
- The CSS classes are added to the element's `class` attribute
|
||||
- The CSS properties are applied as inline styles
|
||||
- This allows combining DaisyUI component classes with custom styling
|
||||
|
||||
**Example with DaisyUI badges:**
|
||||
|
||||
```python
|
||||
# Define badge presets
|
||||
manager.add_style_preset("status_draft", {
|
||||
"__class__": "badge badge-neutral"
|
||||
})
|
||||
|
||||
manager.add_style_preset("status_approved", {
|
||||
"__class__": "badge badge-success",
|
||||
"font-weight": "bold"
|
||||
})
|
||||
|
||||
# Use in DSL
|
||||
column status:
|
||||
style("status_draft") if value == "draft"
|
||||
style("status_approved") if value == "approved"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Layer 1: Formatting Engine
|
||||
@@ -441,7 +477,7 @@ def apply_format(
|
||||
rules: list[FormatRule],
|
||||
cell_value: Any,
|
||||
row_data: dict = None
|
||||
) -> tuple[str | None, str | None]:
|
||||
) -> tuple[StyleContainer | None, str | None]:
|
||||
"""
|
||||
Apply format rules to a cell value.
|
||||
|
||||
@@ -451,8 +487,8 @@ def apply_format(
|
||||
row_data: Dict of {col_id: value} for column references
|
||||
|
||||
Returns:
|
||||
Tuple of (css_string, formatted_value):
|
||||
- css_string: CSS inline style string, or None
|
||||
Tuple of (style_container, formatted_value):
|
||||
- style_container: StyleContainer with cls and css attributes, or None
|
||||
- formatted_value: Formatted string, or None
|
||||
"""
|
||||
```
|
||||
@@ -478,9 +514,17 @@ rules = [
|
||||
]
|
||||
|
||||
# Apply to cell
|
||||
css, formatted = engine.apply_format(rules, -1234.56)
|
||||
# css = "background-color: var(--color-error); color: var(--color-error-content);"
|
||||
style, formatted = engine.apply_format(rules, -1234.56)
|
||||
# style = StyleContainer(
|
||||
# cls=None,
|
||||
# css="background-color: var(--color-error); color: var(--color-error-content);"
|
||||
# )
|
||||
# formatted = "-1 234,56 €"
|
||||
|
||||
# Access CSS string
|
||||
if style:
|
||||
css_string = style.css
|
||||
css_classes = style.cls
|
||||
```
|
||||
|
||||
### Sub-components
|
||||
@@ -511,11 +555,47 @@ Converts `Style` objects to CSS strings:
|
||||
resolver = StyleResolver()
|
||||
|
||||
style = Style(preset="error", font_weight="bold")
|
||||
|
||||
# Get CSS properties dict
|
||||
css_dict = resolver.resolve(style)
|
||||
# {"background-color": "var(--color-error)", "color": "var(--color-error-content)", "font-weight": "bold"}
|
||||
|
||||
# Get CSS inline string
|
||||
css_string = resolver.to_css_string(style)
|
||||
# "background-color: var(--color-error); color: var(--color-error-content); font-weight: bold;"
|
||||
|
||||
# Get StyleContainer with classes and CSS
|
||||
container = resolver.to_style_container(style)
|
||||
# StyleContainer(cls=None, css="background-color: var(--color-error); ...")
|
||||
```
|
||||
|
||||
**StyleContainer:**
|
||||
|
||||
The `to_style_container()` method returns a `StyleContainer` object that separates CSS classes from inline styles:
|
||||
|
||||
```python
|
||||
@dataclass
|
||||
class StyleContainer:
|
||||
cls: str | None = None # CSS class names
|
||||
css: str = None # Inline CSS string
|
||||
```
|
||||
|
||||
This is useful when presets include the `__class__` key:
|
||||
|
||||
```python
|
||||
# Preset with CSS classes
|
||||
custom_presets = {
|
||||
"badge": {
|
||||
"__class__": "badge badge-primary",
|
||||
"background-color": "blue"
|
||||
}
|
||||
}
|
||||
resolver = StyleResolver(style_presets=custom_presets)
|
||||
style = Style(preset="badge")
|
||||
|
||||
container = resolver.to_style_container(style)
|
||||
# container.cls = "badge badge-primary"
|
||||
# container.css = "background-color: blue;"
|
||||
```
|
||||
|
||||
#### FormatterResolver
|
||||
@@ -1217,9 +1297,12 @@ Used by `DataGridFormattingEditor` to configure the CodeMirror editor.
|
||||
7. DataGrid renders cells
|
||||
- mk_body_cell_content() applies formatting
|
||||
- FormattingEngine.apply_format(rules, cell_value, row_data)
|
||||
- Returns (StyleContainer, formatted_value)
|
||||
│
|
||||
▼
|
||||
8. CSS + formatted value rendered in cell
|
||||
8. CSS classes + inline styles + formatted value rendered in cell
|
||||
- StyleContainer.cls applied to class attribute
|
||||
- StyleContainer.css applied as inline style
|
||||
```
|
||||
|
||||
---
|
||||
@@ -1235,11 +1318,33 @@ from myfasthtml.controls.DataGridsManager import DataGridsManager
|
||||
|
||||
manager = DataGridsManager.get_instance(session)
|
||||
|
||||
# Style preset with CSS properties only
|
||||
manager.add_style_preset("corporate", {
|
||||
"background-color": "#003366",
|
||||
"color": "#FFFFFF",
|
||||
"font-weight": "bold"
|
||||
})
|
||||
|
||||
# Style preset with CSS classes (DaisyUI/Tailwind)
|
||||
manager.add_style_preset("badge_primary", {
|
||||
"__class__": "badge badge-primary",
|
||||
"font-weight": "bold"
|
||||
})
|
||||
|
||||
# Style preset mixing classes and inline styles
|
||||
manager.add_style_preset("highlighted", {
|
||||
"__class__": "badge badge-accent",
|
||||
"background-color": "#fef08a",
|
||||
"color": "#854d0e"
|
||||
})
|
||||
```
|
||||
|
||||
**Usage in DSL:**
|
||||
|
||||
```python
|
||||
column status:
|
||||
style("badge_primary") if value == "active"
|
||||
style("highlighted") if value == "important"
|
||||
```
|
||||
|
||||
#### Add Custom Formatter Presets
|
||||
|
||||
Reference in New Issue
Block a user