fh-pydantic-form 0.2.0__py3-none-any.whl → 0.2.2__py3-none-any.whl

fh_pydantic_form/field_renderers.py

@@ -3,6 +3,7 @@ from datetime import date, time
 from enum import Enum
 from typing import (
     Any,
+    List,
     Optional,
     get_args,
     get_origin,
@@ -61,6 +62,8 @@ class BaseFieldRenderer:
         disabled: bool = False,
         label_color: Optional[str] = None,
         spacing: SpacingValue = SpacingTheme.NORMAL,
+        field_path: Optional[List[str]] = None,
+        form_name: Optional[str] = None,
     ):
         """
         Initialize the field renderer
@@ -73,17 +76,61 @@ class BaseFieldRenderer:
             disabled: Whether the field should be rendered as disabled
             label_color: Optional CSS color value for the field label
             spacing: Spacing theme to use for layout ("normal", "compact", or SpacingTheme enum)
+            field_path: Path segments from root to this field (for nested list support)
+            form_name: Explicit form name (used for nested list URLs)
         """
         self.field_name = f"{prefix}{field_name}" if prefix else field_name
         self.original_field_name = field_name
         self.field_info = field_info
         self.value = value
         self.prefix = prefix
+        self.field_path: List[str] = field_path or []
+        self.explicit_form_name: Optional[str] = form_name
         self.is_optional = _is_optional_type(field_info.annotation)
         self.disabled = disabled
         self.label_color = label_color
         self.spacing = _normalize_spacing(spacing)
 
+    def _is_inline_color(self, color: str) -> bool:
+        """
+        Determine if a color should be applied as an inline style or CSS class.
+
+        Args:
+            color: The color value to check
+
+        Returns:
+            True if the color should be applied as inline style, False if as CSS class
+        """
+        # Check if it's a hex color value (starts with #) or basic HTML color name
+        return color.startswith("#") or color in [
+            "red",
+            "blue",
+            "green",
+            "yellow",
+            "orange",
+            "purple",
+            "pink",
+            "cyan",
+            "magenta",
+            "brown",
+            "black",
+            "white",
+            "gray",
+            "grey",
+        ]
+
+    def _get_color_class(self, color: str) -> str:
+        """
+        Get the appropriate CSS class for a color.
+
+        Args:
+            color: The color name
+
+        Returns:
+            The CSS class string for the color
+        """
+        return f"text-{color}-600"
+
     def render_label(self) -> FT:
         """
         Render label for the field
@@ -118,13 +165,12 @@ class BaseFieldRenderer:
 
         # Apply color styling if specified
         if self.label_color:
-            # Check if it's a CSS class (contains letters/hyphens) or a color value
-            if self.label_color.replace("-", "").replace("#", "").isalnum():
-                # Looks like a CSS class, add it to the class list
-                cls_attr = f"block text-sm font-medium {self.label_color} {label_gap_class}".strip()
-            else:
+            if self._is_inline_color(self.label_color):
                 # Treat as color value
                 label_attrs["style"] = f"color: {self.label_color};"
+            else:
+                # Treat as CSS class (includes Tailwind colors like emerald, amber, rose, teal, indigo, lime, violet, etc.)
+                cls_attr = f"block text-sm font-medium {self._get_color_class(self.label_color)} {label_gap_class}".strip()
 
         # Create and return the label - using standard fh.Label with appropriate styling
         return fh.Label(
@@ -147,49 +193,38 @@ class BaseFieldRenderer:
 
     def render(self) -> FT:
         """
-        Render the complete field (label + input) with spacing in a collapsible accordion
+        Render the complete field (label + input) with spacing
+
+        For compact spacing: renders label and input side-by-side
+        For normal spacing: renders label above input (traditional)
 
         Returns:
-            A FastHTML component (mui.Accordion) containing the complete field
+            A FastHTML component containing the complete field
         """
-        # 1. Get the full label component (fh.Label)
+        # 1. Get the label component
         label_component = self.render_label()
 
-        # Apply color styling directly to the Label component if needed
-        if self.label_color and isinstance(label_component, fh.FT):
-            if "style" in label_component.attrs:
-                label_component.attrs["style"] += f" color: {self.label_color};"
-            else:
-                label_component.attrs["style"] = f"color: {self.label_color};"
-
-        # 2. Render the input field that will be the accordion content
+        # 2. Render the input field
         input_component = self.render_input()
 
-        # 3. Define unique IDs for potential targeting
-        item_id = f"{self.field_name}_item"
-        accordion_id = f"{self.field_name}_accordion"
-
-        # 4. Create the AccordionItem with the full label component as title
-        accordion_item = mui.AccordionItem(
-            label_component,  # Use the entire label component including the "for" attribute
-            input_component,  # Content component (the input field)
-            open=True,  # Open by default
-            li_kwargs={"id": item_id},  # Pass the specific ID for the <li>
-            cls=spacing(
-                "outer_margin_sm", self.spacing
-            ),  # Add spacing between accordion items
-        )
-
-        # 5. Wrap the single AccordionItem in an Accordion container
-        accordion_container = mui.Accordion(
-            accordion_item,  # The single item to include
-            id=accordion_id,  # ID for the accordion container (ul)
-            multiple=True,  # Allow multiple open (though only one exists)
-            collapsible=True,  # Allow toggling
-            cls=f"{spacing('accordion_divider', self.spacing)} {spacing('accordion_content', self.spacing)}".strip(),
-        )
-
-        return accordion_container
+        # 3. Choose layout based on spacing theme
+        if self.spacing == SpacingTheme.COMPACT:
+            # Horizontal layout for compact mode
+            return fh.Div(
+                fh.Div(
+                    label_component,
+                    input_component,
+                    cls=f"flex {spacing('horizontal_gap', self.spacing)} {spacing('label_align', self.spacing)} w-full",
+                ),
+                cls=f"{spacing('outer_margin', self.spacing)} w-full",
+            )
+        else:
+            # Vertical layout for normal mode (existing behavior)
+            return fh.Div(
+                label_component,
+                input_component,
+                cls=spacing("outer_margin", self.spacing),
+            )
 
 
 # ---- Specific Field Renderers ----
@@ -301,6 +336,29 @@ class BooleanFieldRenderer(BaseFieldRenderer):
 
         return mui.CheckboxX(**checkbox_attrs)
 
+    def render(self) -> FT:
+        """
+        Render the complete field (label + input) with spacing, placing the checkbox next to the label.
+
+        Returns:
+            A FastHTML component containing the complete field
+        """
+        # Get the label component
+        label_component = self.render_label()
+
+        # Get the checkbox component
+        checkbox_component = self.render_input()
+
+        # Create a flex container to place label and checkbox side by side
+        return fh.Div(
+            fh.Div(
+                label_component,
+                checkbox_component,
+                cls="flex items-center gap-2 w-full",  # Use flexbox to align items horizontally with a small gap
+            ),
+            cls=f"{spacing('outer_margin', self.spacing)} w-full",
+        )
+
 
 class DateFieldRenderer(BaseFieldRenderer):
     """Renderer for date fields"""
@@ -559,26 +617,36 @@ class BaseModelFieldRenderer(BaseFieldRenderer):
         Returns:
             A FastHTML component (mui.Accordion) containing the accordion structure.
         """
-        # 1. Get the label content (the inner Span with text/tooltip)
-        label_component = self.render_label()
-        if isinstance(label_component, fh.FT) and label_component.children:
-            label_content = label_component.children[0]
-            # Extract label style if present
-            label_style = label_component.attrs.get("style", "")
-            # Apply label style directly to the span if needed
-            if label_style:
-                # Check if label_content is already a Span, otherwise wrap it
-                if isinstance(label_content, fh.Span):
-                    label_content.attrs["style"] = label_style
-                else:
-                    # This case is less likely if render_label returns Label(Span(...))
-                    label_content = fh.Span(label_content, style=label_style)
+
+        # Extract the label text and apply color styling
+        label_text = self.original_field_name.replace("_", " ").title()
+
+        # Create the title component with proper color styling
+        if self.label_color:
+            if self._is_inline_color(self.label_color):
+                # Color value - apply as inline style
+                title_component = fh.Span(
+                    label_text,
+                    style=f"color: {self.label_color};",
+                    cls="text-sm font-medium",
+                )
+            else:
+                # CSS class - apply as Tailwind class (includes emerald, amber, rose, teal, indigo, lime, violet, etc.)
+                title_component = fh.Span(
+                    label_text,
+                    cls=f"text-sm font-medium {self._get_color_class(self.label_color)}",
+                )
         else:
-            # Fallback if structure is different (should not happen ideally)
-            label_content = self.original_field_name.replace("_", " ").title()
-            label_style = f"color: {self.label_color};" if self.label_color else ""
-            if label_style:
-                label_content = fh.Span(label_content, style=label_style)
+            # No color specified - use default styling
+            title_component = fh.Span(
+                label_text, cls="text-sm font-medium text-gray-700"
+            )
+
+        # Add tooltip if description is available
+        description = getattr(self.field_info, "description", None)
+        if description:
+            title_component.attrs["uk-tooltip"] = description
+            title_component.attrs["title"] = description
 
         # 2. Render the nested input fields that will be the accordion content
         input_component = self.render_input()
@@ -588,13 +656,8 @@ class BaseModelFieldRenderer(BaseFieldRenderer):
         accordion_id = f"{self.field_name}_accordion"
 
         # 4. Create the AccordionItem using the MonsterUI component
-        #    - Pass label_content as the title.
-        #    - Pass input_component as the content.
-        #    - Set 'open=True' to be expanded by default.
-        #    - Pass item_id via li_kwargs.
-        #    - Add 'mb-4' class for bottom margin spacing.
         accordion_item = mui.AccordionItem(
-            label_content,  # Title component (already potentially styled Span)
+            title_component,  # Title component with proper color styling
             input_component,  # Content component (the Card with nested fields)
             open=True,  # Open by default
             li_kwargs={"id": item_id},  # Pass the specific ID for the <li>
@@ -609,7 +672,7 @@ class BaseModelFieldRenderer(BaseFieldRenderer):
             id=accordion_id,  # ID for the accordion container (ul)
             multiple=True,  # Allow multiple open (though only one exists)
             collapsible=True,  # Allow toggling
-            cls=f"{spacing('accordion_divider', self.spacing)} {spacing('accordion_content', self.spacing)}".strip(),
+            cls=f"{spacing('accordion_divider', self.spacing)} {spacing('accordion_content', self.spacing)} w-full".strip(),
         )
 
         return accordion_container
@@ -695,6 +758,8 @@ class BaseModelFieldRenderer(BaseFieldRenderer):
                     prefix=nested_prefix,
                     disabled=self.disabled,  # Propagate disabled state to nested fields
                     spacing=self.spacing,  # Propagate spacing to nested fields
+                    field_path=self.field_path + [nested_field_name],  # Propagate path
+                    form_name=self.explicit_form_name,  # Propagate form name
                 )
 
                 nested_inputs.append(renderer.render())
@@ -729,6 +794,54 @@ class BaseModelFieldRenderer(BaseFieldRenderer):
 class ListFieldRenderer(BaseFieldRenderer):
     """Renderer for list fields containing any type"""
 
+    def _container_id(self) -> str:
+        """
+        Return a DOM-unique ID for the list's <ul> / <div> wrapper.
+
+        Format: <formname>_<hierarchy>_items_container
+        Example:  main_form_compact_tags_items_container
+        """
+        base = "_".join(self.field_path)  # tags  or  main_address_tags
+        if self._form_name:  # already resolved in property
+            return f"{self._form_name}_{base}_items_container"
+        return f"{base}_items_container"  # fallback (shouldn't happen)
+
+    @property
+    def _form_name(self) -> str:
+        """Get form name - prefer explicit form name if provided"""
+        if self.explicit_form_name:
+            return self.explicit_form_name
+
+        # Fallback to extracting from prefix (for backward compatibility)
+        # The prefix always starts with the form name followed by underscore
+        # e.g., "main_form_compact_" or "main_form_compact_main_address_tags_"
+        # We need to extract just "main_form_compact"
+        if self.prefix:
+            # For backward compatibility with existing non-nested lists
+            # Split by underscore and rebuild the form name by removing known field components
+            parts = self.prefix.rstrip("_").split("_")
+
+            # For a simple heuristic: form names typically have 2-3 parts (main_form_compact)
+            # Field paths are at the end, so we find where the form name ends
+            # This is imperfect but works for most cases
+            if len(parts) >= 3 and parts[1] == "form":
+                # Standard pattern: main_form_compact
+                form_name = "_".join(parts[:3])
+            elif len(parts) >= 2:
+                # Fallback: take first 2 parts
+                form_name = "_".join(parts[:2])
+            else:
+                # Single part
+                form_name = parts[0] if parts else ""
+
+            return form_name
+        return ""
+
+    @property
+    def _list_path(self) -> str:
+        """Get the hierarchical path for this list field"""
+        return "/".join(self.field_path)
+
     def render(self) -> FT:
         """
         Render the complete field (label + input) with spacing, adding a refresh icon for list fields.
@@ -738,13 +851,42 @@ class ListFieldRenderer(BaseFieldRenderer):
             A FastHTML component containing the complete field with refresh icon
         """
         # Extract form name from prefix (removing trailing underscore if present)
-        form_name = self.prefix.rstrip("_") if self.prefix else None
+        # form_name = self.prefix.rstrip("_") if self.prefix else None
+        form_name = self._form_name or None
+
+        # Create the label text with proper color styling
+        label_text = self.original_field_name.replace("_", " ").title()
+
+        # Create the styled label span
+        if self.label_color:
+            if self._is_inline_color(self.label_color):
+                # Color value - apply as inline style
+                label_span = fh.Span(
+                    label_text,
+                    style=f"color: {self.label_color};",
+                    cls=f"block text-sm font-medium {spacing('label_gap', self.spacing)}",
+                )
+            else:
+                # CSS class - apply as Tailwind class (includes emerald, amber, rose, teal, indigo, lime, violet, etc.)
+                label_span = fh.Span(
+                    label_text,
+                    cls=f"block text-sm font-medium {self._get_color_class(self.label_color)} {spacing('label_gap', self.spacing)}",
+                )
+        else:
+            # No color specified - use default styling
+            label_span = fh.Span(
+                label_text,
+                cls=f"block text-sm font-medium text-gray-700 {spacing('label_gap', self.spacing)}",
+            )
 
-        # Get the original label
-        original_label = self.render_label()
+        # Add tooltip if description is available
+        description = getattr(self.field_info, "description", None)
+        if description:
+            label_span.attrs["uk-tooltip"] = description
+            label_span.attrs["title"] = description
 
         # Construct the container ID that will be generated by render_input()
-        container_id = f"{self.prefix}{self.original_field_name}_items_container"
+        container_id = self._container_id()
 
         # Only add refresh icon if we have a form name
         if form_name:
@@ -761,21 +903,23 @@ class ListFieldRenderer(BaseFieldRenderer):
                 hx_post=f"/form/{form_name}/refresh",
                 hx_target=f"#{form_name}-inputs-wrapper",
                 hx_swap="innerHTML",
-                hx_include=f"#{form_name}-form",
+                hx_include="closest form",  # ← key change
                 uk_tooltip="Refresh form display to update list summaries",
+                # Prevent 'toggleListItems' on the parent from firing
+                onclick="event.stopPropagation();",
             )
 
             # Combine label and icon
             label_with_icon = fh.Div(
-                original_label,
+                label_span,  # Use the properly styled label span
                 refresh_icon_trigger,
                 cls="flex items-center cursor-pointer",  # Added cursor-pointer
                 onclick=f"toggleListItems('{container_id}'); return false;",  # Add click handler
             )
         else:
-            # If no form name, just use the original label but still make it clickable
+            # If no form name, just use the styled label but still make it clickable
             label_with_icon = fh.Div(
-                original_label,
+                label_span,  # Use the properly styled label span
                 cls="flex items-center cursor-pointer",  # Added cursor-pointer
                 onclick=f"toggleListItems('{container_id}'); return false;",  # Add click handler
                 uk_tooltip="Click to toggle all items open/closed",
@@ -785,7 +929,7 @@ class ListFieldRenderer(BaseFieldRenderer):
         return fh.Div(
             label_with_icon,
             self.render_input(),
-            cls=spacing("outer_margin", self.spacing),
+            cls=f"{spacing('outer_margin', self.spacing)} w-full",
         )
 
     def render_input(self) -> FT:
@@ -839,8 +983,8 @@ class ListFieldRenderer(BaseFieldRenderer):
                     )
                 )
 
-        # Container for list items with form-specific prefix in ID
-        container_id = f"{self.prefix}{self.original_field_name}_items_container"
+        # Container for list items using hierarchical field path
+        container_id = self._container_id()
 
         # Use mui.Accordion component
         accordion = mui.Accordion(
@@ -854,13 +998,10 @@ class ListFieldRenderer(BaseFieldRenderer):
         # Empty state message if no items
         empty_state = ""
         if not items:
-            # Extract form name from prefix if available
-            form_name = self.prefix.rstrip("_") if self.prefix else None
-
-            # Check if it's a simple type or BaseModel
+            # Use hierarchical path for URL
             add_url = (
-                f"/form/{form_name}/list/add/{self.original_field_name}"
-                if form_name
+                f"/form/{self._form_name}/list/add/{self._list_path}"
+                if self._form_name
                 else f"/list/add/{self.field_name}"
             )
 
@@ -913,9 +1054,6 @@ class ListFieldRenderer(BaseFieldRenderer):
             item_id = f"{self.field_name}_{idx}"
             item_card_id = f"{item_id}_card"
 
-            # Extract form name from prefix if available
-            form_name = self.prefix.rstrip("_") if self.prefix else None
-
             # Check if it's a simple type or BaseModel
             is_model = hasattr(item_type, "model_fields")
 
@@ -1060,6 +1198,11 @@ class ListFieldRenderer(BaseFieldRenderer):
                                 prefix=name_prefix,
                                 disabled=self.disabled,  # Propagate disabled state
                                 spacing=self.spacing,  # Propagate spacing
+                                field_path=self.field_path
+                                + [
+                                    str(idx),
+                                    nested_field_name,
+                                ],  # Propagate path with index
                             )
 
                             # Add rendered field to valid fields
@@ -1095,21 +1238,23 @@ class ListFieldRenderer(BaseFieldRenderer):
                     prefix=self.prefix,  # Correct: Provide the form prefix
                     disabled=self.disabled,  # Propagate disabled state
                     spacing=self.spacing,  # Propagate spacing
+                    field_path=self.field_path
+                    + [str(idx)],  # Propagate path with index
                 )
                 input_element = simple_renderer.render_input()
                 item_content_elements.append(fh.Div(input_element))
 
             # --- Create action buttons with form-specific URLs ---
-            # Generate HTMX endpoints with form name if available
+            # Generate HTMX endpoints using hierarchical paths
             delete_url = (
-                f"/form/{form_name}/list/delete/{self.original_field_name}"
-                if form_name
+                f"/form/{self._form_name}/list/delete/{self._list_path}"
+                if self._form_name
                 else f"/list/delete/{self.field_name}"
             )
 
             add_url = (
-                f"/form/{form_name}/list/add/{self.original_field_name}"
-                if form_name
+                f"/form/{self._form_name}/list/add/{self._list_path}"
+                if self._form_name
                 else f"/list/add/{self.field_name}"
             )