django-unfold 0.51.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/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_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

@@ -369,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",
             ]
@@ -397,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")
@@ -417,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 (
@@ -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:

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>