django-unfold 0.51.0__py3-none-any.whl → 0.53.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/auth/user/add_form.html

@@ -6,7 +6,7 @@
         {% if not is_popup %}
             {% translate 'First, enter a username and password. Then, you’ll be able to edit more user options.' %}
         {% else %}
-            {% translate "Enter a username and password." %}x
+            {% translate "Enter a username and password." %}
         {% endif %}
         <p>
 {% endblock %}

unfold/templates/admin/change_form.html

@@ -1,6 +1,6 @@
 {% extends "admin/base_site.html" %}
 
-{% load i18n admin_urls static admin_modify %}
+{% load i18n admin_urls static admin_modify unfold %}
 
 {% block extrahead %}{{ block.super }}
     <script src="{% url 'admin:jsi18n' %}"></script>
@@ -58,14 +58,14 @@
 {% 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 %}
             {% include adminform.model_admin.change_form_outer_before_template %}
         {% endif %}
 
-        <form {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}" {% endif %}method="post" id="{{ opts.model_name }}_form" {% if adminform.model_admin.warn_unsaved_form %}class="warn-unsaved-form"{% endif %} novalidate>
+        <form {% if adminform.model_admin.conditional_fields %}x-data='{{ adminform|changeform_data }}'{% endif %} {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}" {% endif %}method="post" id="{{ opts.model_name }}_form" {% if adminform.model_admin.warn_unsaved_form %}class="warn-unsaved-form"{% endif %} novalidate>
             {% csrf_token %}
 
             {% if adminform.model_admin.change_form_before_template %}
@@ -87,12 +87,13 @@
                 {% include "unfold/helpers/messages/error.html" with errors=adminform.form.non_field_errors %}
 
                 {% block field_sets %}
-                    {% for fieldset in adminform %}
-                        {% if "tab" not in fieldset.classes %}
-                            {% include 'admin/includes/fieldset.html' %}
-                        {% endif %}
-                    {% endfor %}
-
+                    {% with has_conditional_display=adminform.model_admin.conditional_fields %}
+                        {% for fieldset in adminform %}
+                            {% if "tab" not in fieldset.classes %}
+                                {% include 'admin/includes/fieldset.html' %}
+                            {% endif %}
+                        {% endfor %}
+                    {% endwith %}
                     {% include "unfold/helpers/fieldsets_tabs.html" %}
                 {% endblock %}
 

unfold/templates/admin/pagination.html

@@ -4,28 +4,12 @@
     <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}"{% endif %} x-bind:style="'width: ' + mainWidth + 'px'">
         <div class="lg:backdrop-blur-sm lg:bg-white/80 lg:flex lg:items-center lg:dark:bg-base-900/80 {% if not is_popup %}lg:border-t lg:border-base-200 lg:h-[71px] lg:py-2 lg:relative lg:scrollable-top lg:px-8 lg:dark:border-base-800{% endif %}">
             <div class="flex flex-row items-center {% if not cl.model_admin.list_fullwidth %}lg:mx-auto{% endif %}" x-bind:style="'width: ' + changeListWidth + 'px'">
-                {% if pagination_required %}
-                    {% for i in page_range %}
-                        <div class="{% if forloop.last %}pr-2{% else %}pr-4{% endif %}">
-                            {% paginator_number cl i %}
-                        </div>
-                    {% endfor %}
+                {% if cl.paginator.template_name %}
+                    {% include cl.paginator.template_name %}
+                {% else %}
+                    {% include "unfold/helpers/pagination_default.html" %}
                 {% endif %}
 
-                <div class="py-4">
-                    {% if pagination_required %}
-                        -
-                    {% endif %}
-
-                    {{ cl.result_count }}
-
-                    {% if cl.result_count == 1 %}
-                        {{ cl.opts.verbose_name }}
-                    {% else %}
-                        {{ cl.opts.verbose_name_plural }}
-                    {% endif %}
-                </div>
-
                 {% if show_all_url %}
                     <a href="{{ show_all_url }}" class="showall ml-4 text-primary-600 dark:text-primary-500">
                         {% translate 'Show all' %}

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/table.html

@@ -12,9 +12,9 @@
             <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-white/[.02]">
+                        <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 {% if card_included == 1 %}first:pl-6 last:pr-6{% endif %}">
+                                <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 %}

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.html

@@ -2,12 +2,24 @@
 
 <div class="{% fieldset_row_classes %} {% if forloop.last %}last{% endif %}">
     {% for field in line %}
-        <div class="{% fieldset_line_classes %}">
-            {% if field.is_checkbox %}
-                {% include "unfold/helpers/fieldset_row_checkbox.html" %}
-            {% else %}
-                {% include "unfold/helpers/fieldset_row_field.html" %}
-            {% endif %}
-        </div>
+        {% with adminform.model_admin.conditional_fields|index:field.field.name as conditional_display %}
+            <div class="{% fieldset_line_classes %}" {% if has_conditional_display and conditional_display %}x-show="{{ conditional_display }}"{% endif %}>
+                {% if has_conditional_display %}
+                    {% with field|changeform_condition as field %}
+                        {% if field.is_checkbox %}
+                            {% include "unfold/helpers/fieldset_row_checkbox.html" %}
+                        {% else %}
+                            {% include "unfold/helpers/fieldset_row_field.html" %}
+                        {% endif %}
+                    {% endwith %}
+                {% else %}
+                    {% if field.is_checkbox %}
+                        {% include "unfold/helpers/fieldset_row_checkbox.html" %}
+                    {% else %}
+                        {% include "unfold/helpers/fieldset_row_field.html" %}
+                    {% endif %}
+                {% endif %}
+            </div>
+        {% endwith %}
     {% endfor %}
 </div>

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/helpers/pagination_default.html

@@ -0,0 +1,23 @@
+{% load unfold_list %}
+
+{% if pagination_required %}
+    {% for i in page_range %}
+        <div class="{% if forloop.last %}pr-2{% else %}pr-4{% endif %}">
+            {% paginator_number cl i %}
+        </div>
+    {% endfor %}
+{% endif %}
+
+<div class="py-4">
+    {% if pagination_required %}
+        -
+    {% endif %}
+
+    {{ cl.result_count }}
+
+    {% if cl.result_count == 1 %}
+        {{ cl.opts.verbose_name }}
+    {% else %}
+        {{ cl.opts.verbose_name_plural }}
+    {% endif %}
+</div>

unfold/templates/unfold/helpers/pagination_infinite.html

@@ -0,0 +1,11 @@
+{% load unfold_list i18n %}
+
+<div class="flex flex-row gap-4">
+    <a {% if cl.page_num != 1 %}href="?p={{ cl.page_num|add:-1 }}"{% endif %} class="{% if cl.page_num != 1 %}hover:text-primary-600 dark:hover:text-primary-500{% endif %}">
+        {% trans "Previous" %}
+    </a>
+
+    <a href="?p={{ cl.page_num|add:1 }}" class="hover:text-primary-600 dark:hover:text-primary-500">
+        {% trans "Next" %}
+    </a>
+</div>

unfold/templates/unfold/helpers/site_icon.html

@@ -2,29 +2,29 @@
 
 {% if site_icon %}
     <div class="shrink-0">
-        <a href="{% url "admin:index" %}">
-            {% if site_icon.light and site_icon.dark %}
-                <img src="{{ site_icon.dark }}" alt="{% trans 'Home' %}" class="h-8 hidden dark:block"/>
+        <{% if site_dropdown %}span{% else %}a href="{% url "admin:index" %}"{% endif %}>
+        {% if site_icon.light and site_icon.dark %}
+            <img src="{{ site_icon.dark }}" alt="{% trans 'Home' %}" class="h-8 hidden dark:block"/>
 
-                <img src="{{ site_icon.light }}" alt="{% trans 'Home' %}" class="block h-8 dark:hidden" />
-            {% else %}
-                <img src="{{ site_icon }}" class="h-8" alt="{% trans 'Home' %}" />
-            {% endif %}
-        </a>
+            <img src="{{ site_icon.light }}" alt="{% trans 'Home' %}" class="block h-8 dark:hidden" />
+        {% else %}
+            <img src="{{ site_icon }}" class="h-8" alt="{% trans 'Home' %}" />
+        {% endif %}
+    </{% if site_dropdown %}span{% else %}a{% endif %}>
     </div>
 {% else %}
-    <a href="{% url "admin:index" %}" class="bg-primary-600 flex h-8 items-center justify-center rounded text-white text-xs w-8">
-        <span class="material-symbols-outlined md-18">{% if site_symbol %}{{ site_symbol }}{% else %}settings{% endif %}</span>
-    </a>
+    <{% if site_dropdown %}span{% else %}a href="{% url "admin:index" %}"{% endif %} class="bg-primary-600 flex h-8 items-center justify-center rounded shrink-0 text-white text-xs w-8">
+    <span class="material-symbols-outlined md-18">{% if site_symbol %}{{ site_symbol }}{% else %}settings{% endif %}</span>
+    </{% if site_dropdown %}span{% else %}a{% endif %}>
 {% endif %}
 
-<div class="flex flex-col grow min-w-0">
-    <div class="text-font-important-light leading-normal tracking-tight dark:text-font-important-dark *:leading-none {% if site_subheader %}xl:text-sm{% else %}xl:text-base{% endif %}">
+<div class="flex flex-col gap-0.5 grow justify-center min-w-0">
+    <div class="text-font-important-light leading-normal tracking-tight dark:text-font-important-dark *:leading-none *:truncate {% if site_subheader %}xl:text-sm{% else %}xl:text-base{% endif %}">
         {{ branding }}
     </div>
 
     {% if site_subheader %}
-        <div class="font-normal leading-normal text-font-subtle-light text-xs truncate dark:text-font-subtle-dark">
+        <div class="font-normal text-font-subtle-light text-xs leading-none dark:text-font-subtle-dark">
             {{ site_subheader }}
         </div>
     {% endif %}

unfold/templates/unfold/helpers/tab_action.html

@@ -25,7 +25,7 @@
         <template x-teleport="body">
             <nav x-anchor.bottom-end.offset.4="$refs.actionDropdown{{ action.method_name }}" class="absolute bg-white border flex flex-col -mr-px py-1 right-0 rounded shadow-lg top-10 w-52 z-50 dark:bg-base-800 dark:border-base-700" x-transition x-show="actionDropdownOpen" x-on:click.outside="actionDropdownOpen = false">
                 {% for item in action.items %}
-                    <a href="{{ item.path }}" class="flex items-center font-normal gap-2 max-h-[30px] mx-1 px-3 py-2 rounded text-left hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"{% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}>
+                    <a href="{{ item.path }}" class="flex items-center font-normal gap-2 max-h-[30px] mx-1 px-3 py-2 rounded text-left hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"{% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=item.attrs %}>
                         {% if item.icon %}
                             <span class="material-symbols-outlined">
                                 {{ item.icon }}

unfold/templates/unfold/helpers/welcomemsg.html

@@ -1,4 +1,4 @@
-{% load i18n %}
+{% load unfold i18n %}
 
 <div class="flex flex-row flex-grow font-semibold items-center min-w-0 mr-3">
     <span class="cursor-pointer flex flex-row items-center">
@@ -23,7 +23,7 @@
                 {{ content_title }}
             </span>
 
-            {% if cl and cl.full_result_count != cl.result_count %}
+            {% if cl and cl.full_result_count != cl.result_count and cl.paginator|class_name != "InfinitePaginator" %}
                 <span class="font-medium ml-2 text-font-subtle-light text-sm dark:text-font-subtle-dark">
                     {% blocktranslate count counter=cl.result_count %}{{ counter }} result{% plural %}{{ counter }} results{% endblocktranslate %} (<a href="?{% if cl.is_popup %}_popup=1{% endif %}">{% if cl.show_full_result_count %}{% blocktranslate with full_result_count=cl.full_result_count %}{{ full_result_count }} total{% endblocktranslate %}{% else %}{% translate "Show all" %}{% endif %}</a>)
                 </span>

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

@@ -1,21 +1,24 @@
+import json
 from collections.abc import Mapping
 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.contrib.admin.widgets import RelatedFieldWidgetWrapper
 from django.db.models import Model
 from django.db.models.options import Options
-from django.forms import Field
+from django.forms import BoundField, Field
 from django.http import HttpRequest
 from django.template import Context, Library, Node, RequestContext, TemplateSyntaxError
 from django.template.base import NodeList, Parser, Token, token_kwargs
 from django.template.loader import render_to_string
-from django.utils.safestring import SafeText
+from django.utils.safestring import SafeText, mark_safe
 
 from unfold.components import ComponentRegistry
 from unfold.dataclasses import UnfoldAction
 from unfold.enums import ActionVariant
+from unfold.widgets import UnfoldAdminSplitDateTimeWidget
 
 register = Library()
 
@@ -107,7 +110,10 @@ def class_name(value: Any) -> str:
 
 @register.filter
 def index(indexable: Mapping[int, Any], i: int) -> Any:
-    return indexable[i]
+    try:
+        return indexable[i]
+    except (KeyError, TypeError):
+        return None
 
 
 @register.filter
@@ -346,7 +352,6 @@ def fieldset_row_classes(context: Context) -> str:
     ]
 
     formset = context.get("inline_admin_formset", None)
-    adminform = context.get("adminform", None)
     line = context.get("line")
 
     # Hide the field in case of ordering field for sorting
@@ -359,27 +364,11 @@ def fieldset_row_classes(context: Context) -> str:
         ):
             classes.append("hidden")
 
-    # Compressed fields special styling
-    if (
-        adminform
-        and hasattr(adminform.model_admin, "compressed_fields")
-        and adminform.model_admin.compressed_fields
-    ):
-        classes.extend(
-            [
-                "lg:border-b",
-                "lg:border-base-200",
-                "dark:lg:border-base-800",
-                "last:lg:border-b-0",
-            ]
-        )
-
     if len(line.fields) > 1:
         classes.extend(
             [
-                "flex",
-                "flex-row",
-                "flex-wrap",
+                "grid",
+                f"lg:grid-cols-{len(line.fields)}",
             ]
         )
 
@@ -397,7 +386,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")
@@ -417,8 +407,8 @@ 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",
                 "lg:flex-row",
                 "dark:border-base-800",
@@ -495,3 +485,47 @@ def action_item_classes(context: Context, action: UnfoldAction) -> str:
         )
 
     return " ".join(set(classes))
+
+
+@register.filter
+def changeform_data(adminform: AdminForm) -> str:
+    fields = []
+
+    for fieldset in adminform:
+        for line in fieldset:
+            for field in line:
+                if isinstance(field.field, dict):
+                    continue
+
+                if isinstance(field.field.field.widget, UnfoldAdminSplitDateTimeWidget):
+                    for index, _widget in enumerate(field.field.field.widget.widgets):
+                        fields.append(
+                            f"{field.field.name}{field.field.field.widget.widgets_names[index]}"
+                        )
+                else:
+                    fields.append(field.field.name)
+
+    return mark_safe(json.dumps(dict.fromkeys(fields, "")))
+
+
+@register.filter(takes_context=True)
+def changeform_condition(field: BoundField) -> BoundField:
+    if isinstance(field.field, dict):
+        return field
+
+    if isinstance(field.field.field.widget, RelatedFieldWidgetWrapper):
+        field.field.field.widget.widget.attrs["x-model.fill"] = field.field.name
+        field.field.field.widget.widget.attrs["x-init"] = mark_safe(
+            f"const $ = django.jQuery; $(function () {{ const select = $('#{field.field.auto_id}'); select.on('change', (ev) => {{ {field.field.name} = select.val(); }}); }});"
+        )
+    elif isinstance(field.field.field.widget, UnfoldAdminSplitDateTimeWidget):
+        for index, widget in enumerate(field.field.field.widget.widgets):
+            field_name = (
+                f"{field.field.name}{field.field.field.widget.widgets_names[index]}"
+            )
+
+            widget.attrs["x-model.fill"] = field_name
+    else:
+        field.field.field.widget.attrs["x-model.fill"] = field.field.name
+
+    return field

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 (
@@ -18,7 +19,6 @@ 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
@@ -28,6 +28,7 @@ from django.utils.safestring import SafeText, mark_safe
 from django.utils.translation import gettext_lazy as _
 
 from unfold.utils import (
+    display_for_dropdown,
     display_for_field,
     display_for_header,
     display_for_label,
@@ -189,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
@@ -226,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: