django-unfold 0.50.0__py3-none-any.whl → 0.52.0__py3-none-any.whl

unfold/styles.css

@@ -4,6 +4,11 @@
 
 @tailwind utilities;
 
+@layer utilities {
+  .field-sizing-content {
+      field-sizing: content;
+  }
+}
 
 /*******************************************************
  Classes
@@ -310,7 +315,7 @@ h3 span:nth-child(3) {
 .select2-container.select2-container--admin-autocomplete
   .select2-selection--single
   .select2-selection__rendered {
-  @apply font-medium h-9 px-3 py-2 text-base-500 text-sm dark:text-base-300;
+  @apply font-medium h-9 px-3 py-2 text-font-default-light text-sm dark:text-font-default-dark;
 }
 
 .select2-container.select2-container--admin-autocomplete
@@ -361,7 +366,7 @@ h3 span:nth-child(3) {
 .select2-container.select2-container--admin-autocomplete
   .select2-search--dropdown
   .select2-search__field {
-  @apply bg-base-50 border border-base-200 border-solid flex-grow font-medium mx-0 outline-none px-3 py-2 rounded shadow-sm text-base-500 text-sm w-full dark:bg-base-800 dark:border-base-800 dark:text-base-300;
+  @apply bg-base-50 border border-base-200 border-solid flex-grow font-medium mx-0 outline-none px-3 py-2 rounded shadow-sm text-font-default-light text-sm w-full dark:bg-base-800 dark:border-base-800 dark:text-font-default-dark;
 }
 
 .select2-container.select2-container--admin-autocomplete.select2-container--open.select2-container--above {
@@ -386,12 +391,17 @@ h3 span:nth-child(3) {
 
 .select2-container.select2-container--admin-autocomplete
   .select2-results__option {
-  @apply block px-3 py-2 text-base-500 text-sm transition-all dark:text-base-300;
+  @apply block px-3 py-2 text-font-default-light text-sm transition-all dark:text-font-default-dark;
 }
 
 .select2-container.select2-container--admin-autocomplete
-  .select2-results__option--highlighted[aria-selected] {
-  @apply text-primary-500;
+  .select2-results__option[aria-selected="true"] {
+  @apply text-primary-600 dark:text-primary-500;
+}
+
+.select2-container.select2-container--admin-autocomplete
+  .select2-results__option--highlighted[aria-selected="true"] {
+  @apply text-primary-600 dark:text-primary-500;
 }
 
 .select2-container.select2-container--admin-autocomplete

unfold/templates/admin/change_form.html

@@ -58,7 +58,7 @@
 {% endblock %}
 
 {% block content %}
-    <div id="content-main">
+    <div id="content-main" x-data="{ changeFormWidth: 0 }" x-resize="changeFormWidth = $width">
         {% block form_before %}{% endblock %}
 
         {% if adminform.model_admin.change_form_outer_before_template %}

unfold/templates/admin/change_list_results.html

@@ -1,4 +1,4 @@
-{% load admin_urls i18n %}
+{% load admin_urls i18n unfold %}
 
 {% if result_hidden_fields %}
     <div class="hiddenfields">
@@ -11,6 +11,10 @@
         <table id="result_list" class="block border-base-200 border-spacing-none border-separate w-full lg:table">
             <thead>
                 <tr>
+                    {% if cl.model_admin.list_sections|length > 0 %}
+                        <th></th>
+                    {% endif %}
+
                     {% for header in result_headers %}
                         <th class="align-middle font-semibold py-2 text-left text-font-important-light dark:text-font-important-dark whitespace-nowrap {{ header.class_attrib }} {% if "action-toggle" in header.text and forloop.counter == 1 %}lg:px-3 lg:w-10{% else %}hidden px-3 lg:table-cell{% endif %}" scope="col">
                             <div class="flex items-center">
@@ -65,8 +69,8 @@
                 </tr>
             </thead>
 
-            <tbody class="block lg:table-row-group">
-                {% for result in results %}
+            {% for result in results %}
+                <tbody class="block lg:table-row-group" x-data="{rowOpen: false}">
                     {% if result.form and result.form.non_field_errors %}
                         <tr>
                             <td class="text-left" colspan="{{ result|length }}">
@@ -76,13 +80,39 @@
                     {% endif %}
 
                     <tr class="{% cycle '' 'bg-base-50 dark:bg-white/[.02]' %} block border mb-3 rounded shadow-sm lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-base-800">
+                        {% if cl.model_admin.list_sections|length > 0 %}
+                            <td class="align-middle cursor-pointer flex border-b border-base-200 font-normal px-2.5 py-2 relative text-left before:font-semibold before:text-font-important-light before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:border-b-0 lg:border-t lg:pl-3 lg:pr-0 lg:py-3 lg:table-cell dark:border-base-800 dark:lg:border-base-800 dark:before:text-font-important-dark lg:w-px"
+                                data-label="{% trans "Expand row" %}"
+                                x-on:click="rowOpen = !rowOpen">
+                                <div class="absolute bg-primary-600 -bottom-px hidden left-0 top-0 w-0.5 z-10 lg:block" x-show="rowOpen"></div>
+                                <span class="material-symbols-outlined select-none !block -rotate-90 transition-all" x-bind:class="rowOpen && 'rotate-0'">
+                                    expand_more
+                                </span>
+                            </td>
+                        {% endif %}
+
                         {% for item in result %}
                             {{ item }}
                         {% endfor %}
-                        {% include 'unfold/helpers/actions_row.html' with actions=actions_row instance_pk=result.instance_pk %}
+
+                        {% include 'unfold/helpers/actions_row.html' with actions=actions_row instance_pk=result.instance.pk %}
                     </tr>
-                {% endfor %}
-            </tbody>
+
+                    {% if cl.model_admin.list_sections|length > 0 %}
+                        <tr class="block mb-3 lg:table-row" x-show="rowOpen">
+                            <td colspan="{{ result|length|add:1 }}" class="border bg-base-200/10 block border-base-200 relative rounded p-3 lg:shadow-inner lg:border-0 lg:border-t lg:rounded-none lg:table-cell dark:border-base-800">
+                                <div class="absolute bg-primary-600 h-full hidden left-0 top-0 w-0.5 lg:block"></div>
+
+                                <div class="grid gap-3 {{ cl.model_admin.list_sections_classes }}">
+                                    {% for section in cl.model_admin.list_sections %}
+                                        {% render_section cl.model_admin.list_sections|index:forloop.counter0 result.instance %}
+                                    {% endfor %}
+                                </div>
+                            </td>
+                        </tr>
+                    {% endif %}
+                </tbody>
+            {% endfor %}
         </table>
     </div>
 {% else %}

unfold/templates/admin/filter.html

@@ -15,7 +15,7 @@
         <ul class="dark:bg-base-900 border border-base-200 flex min-w-20 rounded shadow-sm text-font-default-light dark:border-base-700 dark:text-font-default-dark w-full">
             {% for choice in choices %}
                 <li class="basis-1/3 border-r border-base-200 flex-grow truncate last:border-r-0 dark:border-base-700 {% if choice.selected %}font-semibold text-primary-600 dark:text-primary-500 {% else %}hover:text-base-700 dark:hover:text-base-200{% endif %}">
-                    <a href="{{ choice.query_string|iriencode }}" title="{{ choice.display }}" class="block px-3 py-2 text-center hover:text-primary-600 dark:hover:text-primary-500">
+                    <a href="{{ choice.query_string|iriencode }}" title="{{ choice.display }}" class="block py-2 text-center hover:text-primary-600 dark:hover:text-primary-500">
                         {{ choice.display }}
                     </a>
                 </li>

unfold/templates/admin/submit_line.html

@@ -3,7 +3,7 @@
 <div {% if not is_popup %}id="submit-row"{% endif %} class="relative {% if not is_popup %}lg:mt-16{% endif %} z-20">
     <div class="{% if not is_popup %}max-w-full lg:bottom-0 lg:fixed lg:left-0 lg:right-0{% endif %}" {% if not is_popup %}x-bind:class="{'xl:left-0': !sidebarDesktopOpen, 'xl:left-72': sidebarDesktopOpen}" x-bind:style="'width: ' + mainWidth + 'px'"{% endif %}>
         <div class="backdrop-blur-sm bg-white/80 pb-4 dark:bg-base-900/80 {% if not is_popup %}lg:border-t lg:border-base-200 lg:py-4 relative lg:scrollable-top lg:px-8 dark:border-base-800{% endif %}">
-            <div class="flex flex-col-reverse gap-3 items-center mx-auto lg:flex-row-reverse">
+            <div class="flex flex-col-reverse gap-3 items-center mx-auto lg:flex-row-reverse" x-bind:style="'width: ' + changeFormWidth + 'px'">
                 {% block submit-row %}
                     {% if show_save %}
                         <button type="submit" name="_save" class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded text-white w-full lg:w-auto">

unfold/templates/unfold/components/card.html

@@ -1,4 +1,4 @@
-<div class="border flex flex-col flex-grow overflow-hidden p-6 relative rounded shadow-sm dark:border-base-800 {% if class %} {{ class }}{% endif %}">
+<div class="bg-white border flex flex-col flex-grow overflow-hidden p-6 relative rounded shadow-sm dark:bg-base-900 dark:border-base-800 {% if class %} {{ class }}{% endif %}">
     {% if title %}
         <h2 class="bg-base-50 border-b font-semibold mb-6 -mt-6 -mx-6 py-4 px-6 text-font-important-light dark:text-font-important-dark dark:border-base-800 dark:bg-white/[.02]">
             {{ title }}

unfold/templates/unfold/components/table.html

@@ -1,31 +1,47 @@
-{% load unfold %}
+{% load i18n unfold %}
 
-<div class="{% if card_included == 1 %}-m-6{% else %}lg:border lg:rounded lg:shadow-sm{% endif %} overflow-x-auto lg:dark:border-base-800">
-    <table class="block border-base-200 border-spacing-none border-separate w-full lg:table">
-        {% if table.headers %}
-            <thead class="text-base-900 dark:text-base-100">
-                <tr class="bg-base-50 dark:bg-white/[.02]">
-                    {% for  header in table.headers %}
-                        <th class="align-middle font-semibold py-2 text-left text-sm whitespace-nowrap sortable column-description hidden px-3 lg:table-cell {% if card_included == 1 %}first:pl-6 last:pr-6{% endif %}">
-                            {{ header }}
-                        </th>
-                    {% endfor %}
-                </tr>
-            </thead>
-        {% endif %}
+<div class="flex flex-col">
+    {% if title %}
+        <h3 class="font-semibold mb-1 text-font-important-light text-sm dark:text-font-important-dark">
+            {{ title }}
+        </h3>
+    {% endif %}
+
+    <div class="{% if card_included == 1 %}-m-6{% else %} bg-white flex flex-col grow lg:border lg:border-base-200 lg:overflow-hidden lg:rounded lg:shadow-sm{% endif %} lg:dark:border-base-800 dark:bg-base-900">
+        <div {% if height %}style="max-height: {{ height }}px;" data-simplebar{% endif %}>
+            <table class="block border-spacing-none border-separate w-full lg:table">
+                {% if table.headers %}
+                    <thead class="text-base-900 dark:text-base-100 {% if height %}sticky top-0{% endif %}">
+                        <tr class="bg-base-50 dark:bg-base-900">
+                            {% for  header in table.headers %}
+                                <th class="align-middle border-b border-base-200 font-semibold py-2 text-left text-sm whitespace-nowrap sortable column-description hidden px-3 lg:table-cell dark:border-base-800 dark:bg-white/[.02] {% if card_included == 1 %}first:pl-6 last:pr-6{% endif %}">
+                                    {{ header|capfirst }}
+                                </th>
+                            {% endfor %}
+                        </tr>
+                    </thead>
+                {% endif %}
 
-        {% if table.rows %}
-            <tbody class="block lg:table-row-group">
-                {% for row in table.rows %}
-                    <tr class="{% if striped == 1 %}{% cycle '' 'bg-base-50 dark:bg-white/[.02]' %}{% endif %} block {% if not card_included == 1 %}border mb-3 rounded shadow-sm{% else %}border-t{% endif %} lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-base-800">
-                        {% for cell in row %}
-                            <td class="px-3 py-2 align-middle flex border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden text-left before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto first:border-t-0 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-base-800 {% if card_included == 1 %}lg:first:pl-6 lg:last:pr-6{% endif %}" {% if table.headers %}data-label="{{ table.headers|index:forloop.counter0 }}"{% endif %}>
-                                {{ cell }}
-                            </td>
+                {% if table.rows %}
+                    <tbody class="block lg:table-row-group">
+                        {% for row in table.rows %}
+                            <tr class="{% if striped == 1 %}{% cycle '' 'bg-base-50 dark:bg-white/[.02]' %}{% endif %} block group {% if forloop.first %}first-row{% endif %} {% if not card_included == 1 %}border mb-3 rounded shadow-sm{% else %}border-b{% endif %} lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-base-800">
+                                {% for cell in row %}
+                                    <td class="px-3 py-2 align-middle flex border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden text-left before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto first:border-t-0 lg:group-[.first-row]:border-t-0 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-base-800 {% if card_included == 1 %}lg:first:pl-6 lg:last:pr-6{% endif %}" {% if table.headers %}data-label="{{ table.headers|index:forloop.counter0 }}"{% endif %}>
+                                        {{ cell }}
+                                    </td>
+                                {% endfor %}
+                            </tr>
                         {% endfor %}
-                    </tr>
-                {% endfor %}
-            </tbody>
+                    </tbody>
+                {% endif %}
+            </table>
+        </div>
+
+        {% if not table.rows %}
+            <p class="bg-white border border-base-200 flex grow items-center justify-center py-2 rounded shadow-sm dark:bg-base-900 lg:border-0 lg:rounded-none lg:shadow-none">
+                {% trans "No data" %}
+            </p>
         {% endif %}
-    </table>
+    </div>
 </div>

unfold/templates/unfold/helpers/change_list_filter_actions.html

@@ -22,7 +22,7 @@
             {% endif %}
 
             {% if cl.has_active_filters %}
-                <a href="{{ cl.clear_all_filters_qs }}" class="border flex-grow font-medium px-3 py-2 rounded text-center transition-all w-full hover:bg-base-50 lg:w-auto dark:border-base-700 dark:hover:text-base-200">
+                <a href="{{ cl.clear_all_filters_qs }}" class="border flex-grow font-medium px-3 py-2 rounded text-center transition-all w-full lg:w-auto dark:border-base-700 dark:hover:text-base-200">
                     {% trans "Clear all filters" %}
                 </a>
             {% endif %}

unfold/templates/unfold/helpers/display_dropdown.html

@@ -0,0 +1,33 @@
+{% with dropdown_id=instance.pk|cut:"-"|add:field_name %}
+    {% with total=value.items|length %}
+        <div x-data="{ openDropdownId{{ dropdown_id }}: false }">
+            <div class="flex flex-row gap-1.5 items-center {% if total > 0 or value.content %}cursor-pointer{% endif %}" {% if total > 0 or value.content %}x-ref="rowDropdown{{ dropdown_id }}" x-on:click="openDropdownId{{ dropdown_id }} = !openDropdownId{{ dropdown_id }}"{% endif %}>
+                {% if total > 0 or value.content %}
+                    <span class="material-symbols-outlined">unfold_more</span>
+                {% endif %}
+
+                <span>
+                    {{ value.title }}
+                </span>
+            </div>
+
+            {% if total > 0 or value.content %}
+                <template x-teleport="body">
+                    {% if value.content %}
+                        <div class="bg-white border overflow-y-auto overflow-x-hidden p-3 rounded shadow-lg text-sm top-7 z-50 w-48 dark:bg-base-800 dark:border-base-700" data-simplebar x-cloak x-transition x-anchor.bottom-start.offset.4="$refs.rowDropdown{{ dropdown_id }}" x-show="openDropdownId{{ dropdown_id }}"x-on:click.outside="openDropdownId{{ dropdown_id }} = false" {% if value.width or value.height %}style="{% if value.width %}width: {{ value.width }}px;{% endif %}{% if value.height %}height: {{ value.height }}px;{% endif %}"{% endif %}>
+                            {{ value.content }}
+                        </div>
+                    {% else %}
+                        <nav class="bg-white border overflow-y-auto overflow-x-hidden flex flex-col py-1 rounded shadow-lg text-sm top-7 z-50 w-48 dark:bg-base-800 dark:border-base-700" data-simplebar x-cloak x-transition x-anchor.bottom-start.offset.4="$refs.rowDropdown{{ dropdown_id }}" x-show="openDropdownId{{ dropdown_id }}"x-on:click.outside="openDropdownId{{ dropdown_id }} = false" {% if value.width or value.height %}style="{% if value.width %}width: {{ value.width }}px;{% endif %}{% if value.height %}height: {{ value.height }}px;{% endif %}"{% endif %}>
+                            {% for item in value.items %}
+                                <{% if item.link %}a{% else %}span{% endif %} {% if item.link %}href="{{ item.link }}"{% endif %} class="flex items-center gap-2 mx-1 px-3 py-2 max-h-[30px] rounded hover:bg-base-100 dark:hover:bg-base-700 dark:hover:text-base-200 {% if value.striped %}{% cycle '' 'bg-base-50 dark:bg-white/[.04]' %}{% endif %}">
+                                <span class="grow truncate">{{ item.title }}</span>
+                                </{% if item.link %}a{% else %}span{% endif %}>
+                            {% endfor %}
+                        </nav>
+                    {% endif %}
+                </template>
+            {% endif %}
+        </div>
+    {% endwith %}
+{% endwith %}

unfold/templates/unfold/helpers/fieldset_row_checkbox.html

@@ -1,6 +1,6 @@
 {% if adminform.model_admin.compressed_fields %}
     <div class="flex flex-col gap-4 py-2 lg:flex-row">
-        <div class="font-medium flex items-start -ml-2 min-w-32 w-32 lg:min-w-48 lg:w-48">
+        <div class="font-medium flex items-start -ml-2 min-w-32 w-32 lg:min-w-56 lg:w-56">
             {{ field.label_tag }}
         </div>
 

unfold/templates/unfold/helpers/fieldset_row_field.html

@@ -1,4 +1,4 @@
-<div class="{% if adminform.model_admin.compressed_fields %}lg:min-w-48 lg:mt-2 lg:w-48{% endif %}">
+<div class="{% if adminform.model_admin.compressed_fields %}lg:min-w-56 lg:mt-2 lg:w-56{% endif %}">
     {{ field.label_tag }}
 </div>
 

unfold/templates/unfold/helpers/messages/debug.html

@@ -1,3 +1,3 @@
-<p class="mb-3 px-3 py-3 rounded text-sm last:mb-8 bg-base-100 text-base-700 dark:bg-base-500/20 dark:text-base-400">
+<div class="mb-3 px-3 py-3 rounded text-sm last:mb-8 bg-base-100 text-base-700 dark:bg-base-500/20 dark:text-base-400">
     {{ message }}
-</p>
+</div>

unfold/templates/unfold/helpers/messages/info.html

@@ -1,3 +1,3 @@
-<p class="mb-3 px-3 py-3 rounded text-sm last:mb-8 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400">
+<div class="mb-3 px-3 py-3 rounded text-sm last:mb-8 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400">
     {{ message }}
-</p>
+</div>

unfold/templates/unfold/helpers/messages/success.html

@@ -1,3 +1,3 @@
-<p class="mb-3 px-3 py-3 rounded text-sm last:mb-8 bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400">
+<div class="mb-3 px-3 py-3 rounded text-sm last:mb-8 bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400">
     {{ message }}
-</p>
+</div>

unfold/templates/unfold/helpers/messages/warning.html

@@ -1,3 +1,3 @@
-<p class="mb-3 px-3 py-3 rounded text-sm last:mb-8 bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400">
+<div class="mb-3 px-3 py-3 rounded text-sm last:mb-8 bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400">
     {{ message }}
-</p>
+</div>

unfold/templates/unfold/widgets/date.html

@@ -1,3 +1,3 @@
-<div class="flex flex-col max-w-2xl min-w-48 relative w-full">
+<div class="flex flex-col max-w-2xl min-w-56 relative w-full">
     {% include "django/forms/widgets/input.html" %}
 </div>

unfold/templates/unfold/widgets/split_datetime.html

@@ -1,9 +1,5 @@
 <div class="datetime flex flex-col gap-2 max-w-2xl lg:flex-row lg:group-[.field-row]:flex-row lg:group-[.field-row]:items-center lg:group-[.field-tabular]:flex-row lg:group-[.field-tabular]:items-center">
     <div class="basis-1/2 flex flex-col lg:group-[.field-row]:flex-row group-[.field-row]:gap-2 lg:group-[.field-tabular]:flex-row group-[.field-tabular]:gap-2">
-        <div class="font-medium mb-2 group-[.field-row]:mb-0 group-[.field-row]:flex group-[.field-row]:items-center group-[.field-tabular]:mb-0 group-[.field-tabular]:flex group-[.field-tabular]:items-center">
-            {{ date_label }}
-        </div>
-
         {% with widget=widget.subwidgets.0 %}
             <div class="flex flex-col min-w-52 relative group-[.field-row]:flex-grow group-[.field-tabular]:flex-grow">
                 {% include widget.template_name %}
@@ -12,10 +8,6 @@
     </div>
 
     <div class="basis-1/2 flex flex-col lg:ml-auto md:mt-0 lg:group-[.field-row]:flex-row group-[.field-row]:gap-2 lg:group-[.field-tabular]:flex-row group-[.field-tabular]:gap-2">
-        <div class="font-medium mb-2 group-[.field-row]:mb-0 group-[.field-row]:flex group-[.field-row]:items-center group-[.field-tabular]:mb-0 group-[.field-tabular]:flex group-[.field-tabular]:items-center">
-            {{ time_label }}
-        </div>
-
         {% with widget=widget.subwidgets.1 %}
             <div class="flex flex-col min-w-52 relative group-[.field-row]:flex-grow group-[.field-tabular]:flex-grow">
                 {% include widget.template_name %}

unfold/templates/unfold/widgets/time.html

@@ -1,3 +1,3 @@
-<div class="flex flex-col max-w-2xl min-w-48 relative w-full">
+<div class="flex flex-col max-w-2xl min-w-56 relative w-full">
     {% include "django/forms/widgets/input.html" %}
 </div>

unfold/templatetags/unfold.py

@@ -4,6 +4,7 @@ from typing import Any, Optional, Union
 from django import template
 from django.contrib.admin.helpers import AdminForm, Fieldset
 from django.contrib.admin.views.main import ChangeList
+from django.db.models import Model
 from django.db.models.options import Options
 from django.forms import Field
 from django.http import HttpRequest
@@ -85,6 +86,11 @@ def tab_list(context: RequestContext, page: str, opts: Optional[Options] = None)
     )
 
 
+@register.simple_tag(name="render_section", takes_context=True)
+def render_section(context: Context, section_class, instance: Model) -> str:
+    return section_class(context.request, instance).render()
+
+
 @register.simple_tag(name="has_nav_item_active")
 def has_nav_item_active(items: list) -> bool:
     for item in items:
@@ -214,14 +220,17 @@ class RenderComponentNode(template.Node):
 
         if "component_class" in values:
             values = ComponentRegistry.create_instance(
-                values["component_class"], request=context.request
+                values["component_class"],
+                request=context.request if hasattr(context, "request") else None,
             ).get_context_data(**values)
 
         if self.include_context:
             values.update(context.flatten())
 
         return render_to_string(
-            self.template_name, request=context.request, context=values
+            self.template_name,
+            request=context.request if hasattr(context, "request") else None,
+            context=values,
         )
 
 
@@ -360,6 +369,7 @@ def fieldset_row_classes(context: Context) -> str:
             [
                 "lg:border-b",
                 "lg:border-base-200",
+                "lg:border-dashed",
                 "dark:lg:border-base-800",
                 "last:lg:border-b-0",
             ]
@@ -388,7 +398,8 @@ def fieldset_line_classes(context: Context) -> str:
         "flex-col",
         "flex-grow",
         "group/line",
-        "p-3",
+        "px-3",
+        "py-2.5",
     ]
     field = context.get("field")
     adminform = context.get("adminform")
@@ -408,6 +419,7 @@ def fieldset_line_classes(context: Context) -> str:
             [
                 "border-b",
                 "border-base-200",
+                "border-dashed",
                 "group-[.last]/row:border-b-0",
                 "lg:border-b-0",
                 "lg:border-l",

unfold/templatetags/unfold_list.py

@@ -1,4 +1,5 @@
 import datetime
+from collections.abc import Generator
 from typing import Any, Optional, Union
 
 from django.contrib.admin.templatetags.admin_list import (
@@ -16,8 +17,8 @@ from django.contrib.admin.views.main import (
 )
 from django.core.exceptions import ObjectDoesNotExist
 from django.db import models
+from django.db.models import Model
 from django.forms import Form
-from django.http import HttpRequest
 from django.template import Library
 from django.template.base import Parser, Token
 from django.template.loader import render_to_string
@@ -26,13 +27,14 @@ from django.utils.html import format_html
 from django.utils.safestring import SafeText, mark_safe
 from django.utils.translation import gettext_lazy as _
 
-from ..utils import (
+from unfold.utils import (
+    display_for_dropdown,
     display_for_field,
     display_for_header,
     display_for_label,
     display_for_value,
 )
-from ..widgets import UnfoldBooleanWidget
+from unfold.widgets import UnfoldBooleanWidget
 
 register = Library()
 
@@ -188,11 +190,9 @@ def result_headers(cl):
         }
 
 
-def items_for_result(cl: ChangeList, result: HttpRequest, form) -> SafeText:
-    """
-    Generate the actual list of data.
-    """
-
+def items_for_result(
+    cl: ChangeList, result: Model, form
+) -> Generator[SafeText, None, None]:
     def link_in_col(is_first: bool, field_name: str, cl: ChangeList) -> bool:
         if cl.list_display_links is None:
             return False
@@ -225,9 +225,14 @@ def items_for_result(cl: ChangeList, result: HttpRequest, form) -> SafeText:
                 boolean = getattr(attr, "boolean", False)
                 label = getattr(attr, "label", False)
                 header = getattr(attr, "header", False)
+                dropdown = getattr(attr, "dropdown", False)
 
                 if label:
                     result_repr = display_for_label(value, empty_value_display, label)
+                elif dropdown:
+                    result_repr = display_for_dropdown(
+                        result, field_name, value, empty_value_display
+                    )
                 elif header:
                     result_repr = display_for_header(value, empty_value_display)
                 else:
@@ -336,23 +341,22 @@ def items_for_result(cl: ChangeList, result: HttpRequest, form) -> SafeText:
 
 class UnfoldResultList(ResultList):
     def __init__(
-        self, instance_pk: Union[int, str], form: Optional[Form], *items: Any
+        self,
+        instance: Model,
+        form: Optional[Form],
+        *items: Any,
     ) -> None:
-        self.instance_pk = instance_pk
+        self.instance = instance
         super().__init__(form, *items)
 
 
 def results(cl: ChangeList):
     if cl.formset:
         for res, form in zip(cl.result_list, cl.formset.forms):
-            pk = cl.lookup_opts.pk.attname
-            pk_value = getattr(res, pk)
-            yield UnfoldResultList(pk_value, form, items_for_result(cl, res, form))
+            yield UnfoldResultList(res, form, items_for_result(cl, res, form))
     else:
         for res in cl.result_list:
-            pk = cl.lookup_opts.pk.attname
-            pk_value = getattr(res, pk)
-            yield UnfoldResultList(pk_value, None, items_for_result(cl, res, None))
+            yield UnfoldResultList(res, None, items_for_result(cl, res, None))
 
 
 def result_list(context: dict[str, Any], cl: ChangeList) -> dict[str, Any]:

unfold/utils.py

@@ -6,6 +6,7 @@ from typing import Any, Optional
 
 from django.conf import settings
 from django.db import models
+from django.db.models import Model
 from django.template.loader import render_to_string
 from django.utils import formats, timezone
 from django.utils.hashable import make_hashable
@@ -33,6 +34,19 @@ def display_for_header(value: Iterable, empty_value_display: str) -> SafeText:
     )
 
 
+def display_for_dropdown(
+    result: Model, field_name: str, value: Iterable, empty_value_display: str
+) -> SafeText:
+    return render_to_string(
+        "unfold/helpers/display_dropdown.html",
+        {
+            "instance": result,
+            "field_name": field_name,
+            "value": value,
+        },
+    )
+
+
 def display_for_label(value: Any, empty_value_display: str, label: Any) -> SafeText:
     label_type = None
     multiple = False

unfold/widgets.py

@@ -104,12 +104,9 @@ TEXTAREA_CLASSES = [
 ]
 
 TEXTAREA_EXPANDABLE_CLASSES = [
-    "absolute",
-    "bottom-0",
-    "left-0",
-    "right-0",
-    "top-0",
-    "h-full",
+    "block",
+    "field-sizing-content",
+    "!max-w-2xl",
 ]
 
 SELECT_CLASSES = [
@@ -472,9 +469,7 @@ class UnfoldAdminTextareaWidget(AdminTextareaWidget):
         )
 
 
-class UnfoldAdminExpandableTextareaWidget(AdminTextareaWidget):
-    template_name = "unfold/widgets/textarea_expandable.html"
-
+class UnfoldAdminExpandableTextareaWidget(UnfoldAdminTextareaWidget):
     def __init__(self, attrs: Optional[dict[str, Any]] = None) -> None:
         attrs = attrs or {}
 
@@ -499,7 +494,10 @@ class UnfoldAdminSplitDateTimeWidget(AdminSplitDateTime):
     template_name = "unfold/widgets/split_datetime.html"
 
     def __init__(self, attrs: Optional[dict[str, Any]] = None) -> None:
-        widgets = [UnfoldAdminDateWidget, UnfoldAdminTimeWidget]
+        widgets = [
+            UnfoldAdminDateWidget(attrs={"placeholder": _("Date")}),
+            UnfoldAdminTimeWidget(attrs={"placeholder": _("Time")}),
+        ]
         MultiWidget.__init__(self, widgets, attrs)
 
 

unfold/templates/unfold/widgets/textarea_expandable.html

@@ -1,7 +0,0 @@
-<div class="relative">
-    <div class="border border-base-200 break-words font-medium invisible max-w-4xl px-3 py-2 text-sm" style="min-height: 64px">
-        {% if widget.value %}{{ widget.value|linebreaks }}{% endif %}
-    </div>
-
-    <textarea onInput="this.previousElementSibling.innerText = this.value + String.fromCharCode(10)" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</textarea>
-</div>