django-unfold 0.39.0__py3-none-any.whl → 0.41.0__py3-none-any.whl

unfold/static/unfold/js/app.js

@@ -12,6 +12,21 @@ window.addEventListener("load", (e) => {
   warnWithoutSaving();
 });
 
+/*************************************************************
+ * Alpine.sort.js callback after sorting
+ *************************************************************/
+const sortRecords = (e) => {
+  const orderingField = e.from.dataset.orderingField;
+
+  const weightInputs = Array.from(
+    e.from.querySelectorAll(`.has_original input[name$=-${orderingField}]`)
+  );
+
+  weightInputs.forEach((input, index) => {
+    input.value = index;
+  });
+};
+
 /*************************************************************
  * Warn without saving
  *************************************************************/
@@ -120,15 +135,26 @@ const dateTimeShortcutsOverlay = () => {
  * File upload path
  *************************************************************/
 const fileInputUpdatePath = () => {
-  Array.from(document.querySelectorAll("input[type=file]")).forEach((input) => {
-    input.addEventListener("change", (e) => {
-      const parts = e.target.value.split("\\");
-      const placeholder =
-        input.parentNode.parentNode.parentNode.querySelector(
-          "input[type=text]"
-        );
-      placeholder.setAttribute("value", parts[parts.length - 1]);
-    });
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "childList") {
+        for (const input of document.querySelectorAll("input[type=file]")) {
+          input.addEventListener("change", (e) => {
+            const parts = e.target.value.split("\\");
+            const placeholder =
+              input.parentNode.parentNode.parentNode.querySelector(
+                "input[type=text]"
+              );
+            placeholder.setAttribute("value", parts[parts.length - 1]);
+          });
+        }
+      }
+    }
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
   });
 };
 
@@ -153,7 +179,7 @@ const submitSearch = () => {
       }, {});
 
     if (searchString) {
-      queryParams["q"] = searchString;
+      queryParams["q"] = encodeURIComponent(searchString);
     }
 
     const result = Object.entries(queryParams)

unfold/static/unfold/js/select2.init.js

@@ -10,6 +10,6 @@
   };
 
   $(function () {
-    $(".admin-autocomplete").djangoCustomSelect2();
+    $(".unfold-admin-autocomplete.admin-autocomplete").djangoCustomSelect2();
   });
 }

unfold/styles.css

@@ -60,6 +60,10 @@ html {
   @apply text-red-600;
 }
 
+.sortable-ghost {
+  @apply opacity-50;
+}
+
 /*******************************************************
  Icons
  *******************************************************/
@@ -287,7 +291,7 @@ h3 span:nth-child(3) {
  Autocomplete
  *******************************************************/
 .select2.select2-container {
-  @apply bg-white border max-w-2xl relative rounded-md shadow-sm !w-full dark:bg-gray-900 dark:border-gray-700;
+  @apply bg-white border max-w-2xl !min-h-9.5 relative rounded-md shadow-sm !w-full dark:bg-gray-900 dark:border-gray-700;
 }
 
 .errors .select2.select2-container {

unfold/templates/admin/app_index.html

@@ -10,7 +10,7 @@
     {% block breadcrumbs %}
         <div class="px-12">
             <div class="container mb-12 mx-auto -my-3">
-                <ul class="flex">
+                <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}
                     {% trans 'Home' as name %}
                     {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

unfold/templates/admin/app_list.html

@@ -27,7 +27,7 @@
 
                                             {% if model.admin_url %}
                                                 <a href="{{ model.admin_url }}" id="link-{{ app.app_label }}-{{ model.object_name|lower }}"
-                                                   class="block -mx-3 px-3 py-3 rounded-md truncate {% if model.admin_url in request.path|urlencode %}bg-gray-100 font-semibold text-primary-600 dark:bg-white/[.06] dark:text-primary-500{% endif %}">
+                                                   class="block -mx-3 px-3 py-3 rounded-md truncate hover:text-primary-600 dark:hover:text-primary-500 {% if model.admin_url in request.path|urlencode %}bg-gray-100 font-semibold text-primary-600 dark:bg-white/[.06] dark:text-primary-500{% endif %}">
                                                     {{ model.name }}
                                                 </a>
                                             {% else %}

unfold/templates/admin/auth/user/change_password.html

@@ -8,7 +8,7 @@
     {% block breadcrumbs %}
         <div class="px-12">
             <div class="container mb-12 mx-auto -my-3">
-                <ul class="flex">
+                <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}
                     {% trans 'Home' as name %}
                     {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

unfold/templates/admin/base.html

@@ -18,7 +18,7 @@
                     {% block breadcrumbs %}
                         <div class="px-4 lg:px-12">
                             <div class="container mb-12 mx-auto -my-3">
-                                <ul class="flex">
+                                <ul class="flex flex-wrap">
                                     {% url 'admin:index' as link %}
                                     {% trans 'Home' as name %}
                                     {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

unfold/templates/admin/change_form.html

@@ -13,7 +13,7 @@
     {% block breadcrumbs %}
         <div class="px-4 lg:px-12">
             <div class="container mb-6 mx-auto -my-3 lg:mb-12">
-                <ul class="flex">
+                <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}
                     {% trans 'Home' as name %}
                     {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

unfold/templates/admin/change_list.html

@@ -26,7 +26,7 @@
     {% block breadcrumbs %}
         <div class="px-4 lg:px-12">
             <div class="{% if not cl.model_admin.list_fullwidth %}container{% endif %} mb-6 mx-auto -my-3 lg:mb-12">
-                <ul class="flex">
+                <ul class="flex flex-wrap">
                     {% url 'admin:index' as link %}
                     {% trans 'Home' as name %}
                     {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
@@ -62,52 +62,62 @@
         {% endif %}
 
         <div class="flex -mx-4 module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
-            <div class="changelist-form-container flex-grow min-w-0 px-4" x-data="{ filterOpen: false }">
-                {% block date_hierarchy %}
-                    {% if cl.date_hierarchy %}
-                        {% date_hierarchy cl %}
+            <div class="changelist-form-container flex flex-row flex-grow gap-4 min-w-0 px-4" x-data="{ filterOpen: false }">
+                <div class="flex-grow min-w-0">
+                    {% block date_hierarchy %}
+                        {% if cl.date_hierarchy %}
+                            {% date_hierarchy cl %}
+                        {% endif %}
+                    {% endblock %}
+
+                    {% if cl.model_admin.list_before_template %}
+                        {% include cl.model_admin.list_before_template %}
                     {% endif %}
-                {% endblock %}
 
-                <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>
-                    {% csrf_token %}
+                    <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>
+                        {% csrf_token %}
 
-                    {% if cl.formset %}
-                        <div>{{ cl.formset.management_form }}</div>
-                    {% endif %}
+                        {% if cl.formset %}
+                            <div>{{ cl.formset.management_form }}</div>
+                        {% endif %}
+
+                        {% block result_list %}
+                            {% if actions_on_top %}
+                                {% if cl.search_fields or action_form or cl.has_filters %}
+                                    <div class="bg-gray-50 flex flex-col gap-3 mb-4 p-3 rounded-md lg:flex-row dark:bg-gray-800">
+                                        {% block search %}
+                                            {% search_form cl %}
+                                        {% endblock %}
 
-                    {% block result_list %}
-                        {% if actions_on_top %}
-                            {% if cl.search_fields or action_form or cl.has_filters %}
-                                <div class="bg-gray-50 flex flex-col gap-3 mb-4 p-3 rounded-md lg:flex-row dark:bg-gray-800">
-                                    {% block search %}
-                                        {% search_form cl %}
-                                    {% endblock %}
-
-                                    {% if action_form %}
-                                        {% admin_actions %}
-                                    {% endif %}
-
-                                    {% block filters %}
-                                        {% if cl.has_filters %}
-                                            <a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white dark:bg-gray-900 dark:border-gray-700{% endif %} border cursor-pointer flex font-medium group items-center px-3 py-2 rounded-md shadow-sm text-sm lg:ml-auto md:mt-0" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
-                                                {% trans "Filters" %}
-
-                                                <span class="material-symbols-outlined md-18 ml-auto -mr-1 pl-4 {% if cl.has_active_filters %}text-white{% else %}text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-400 dark:text-gray-500{% endif %}">filter_list</span>
-                                            </a>
+                                        {% if action_form %}
+                                            {% admin_actions %}
                                         {% endif %}
-                                    {% endblock %}
-                                </div>
+
+                                        {% block filters %}
+                                            {% if cl.has_filters %}
+                                                <a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white dark:bg-gray-900 dark:border-gray-700{% endif %} border cursor-pointer flex font-medium group items-center px-3 py-2 rounded-md shadow-sm text-sm lg:ml-auto md:mt-0 {% if not cl.model_admin.list_filter_sheet %}2xl:hidden{% endif %}" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
+                                                    {% trans "Filters" %}
+
+                                                    <span class="material-symbols-outlined md-18 ml-auto -mr-1 pl-4 {% if cl.has_active_filters %}text-white{% else %}text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-400 dark:text-gray-500{% endif %}">filter_list</span>
+                                                </a>
+                                            {% endif %}
+                                        {% endblock %}
+                                    </div>
+                                {% endif %}
                             {% endif %}
-                        {% endif %}
 
-                        {% unfold_result_list cl %}
+                            {% unfold_result_list cl %}
 
-                        {% block pagination %}
-                            {% pagination cl %}
+                            {% block pagination %}
+                                {% pagination cl %}
+                            {% endblock %}
                         {% endblock %}
-                    {% endblock %}
-                </form>
+                    </form>
+
+                    {% if cl.model_admin.list_after_template %}
+                        {% include cl.model_admin.list_after_template %}
+                    {% endif %}
+                </div>
 
                 {% if cl.has_filters %}
                     {% include "unfold/change_list_filter.html" %}

unfold/templates/admin/delete_confirmation.html

@@ -10,9 +10,9 @@
 {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation{% endblock %}
 
 {% block breadcrumbs %}
-    <div class="px-12">
-        <div class="container mb-12 mx-auto -my-3">
-            <ul class="flex">
+    <div class="px-4 lg:px-12">
+        <div class="container mb-6 mx-auto -my-3 lg:mb-12">
+            <ul class="flex flex-wrap">
                 {% url 'admin:index' as link %}
                 {% trans 'Home' as name %}
                 {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
@@ -95,12 +95,7 @@
                         <input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}">
                     {% endif %}
 
-
-                    <a href="#" class="border cancel-link font-medium hidden mb-3 px-3 py-2 rounded-md w-full hover:bg-gray-50 lg:block lg:mb-0 lg:mr-3 lg:w-auto dark:border-gray-700 dark:text-font-default-dark dark:hover:text-gray-200 dark:hover:bg-gray-900">
-                        {% translate "No, take me back" %}
-                    </a>
-
-                    <input type="submit" value="{% translate 'Yes, I’m sure' %}" class="bg-red-600 cursor-pointer font-medium ml-auto px-3 py-2 rounded-md text-white dark:bg-red-500/20 dark:text-red-500">
+                    {% include "unfold/helpers/delete_submit_line.html" %}
                 </div>
             </form>
         </div>

unfold/templates/admin/delete_selected_confirmation.html

@@ -10,9 +10,9 @@
 {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation delete-selected-confirmation{% endblock %}
 
 {% block breadcrumbs %}
-    <div class="px-12">
-        <div class="container mb-12 mx-auto -my-3">
-            <ul class="flex">
+    <div class="px-4 lg:px-12">
+        <div class="container mb-6 mx-auto -my-3 lg:mb-12">
+            <ul class="flex flex-wrap">
                 {% url 'admin:index' as link %}
                 {% trans 'Home' as name %}
                 {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}
@@ -89,11 +89,7 @@
                     <input type="hidden" name="action" value="delete_selected">
                     <input type="hidden" name="post" value="yes">
 
-                    <a href="#" class="border cancel-link font-medium hidden mb-3 px-3 py-2 rounded-md transition-all w-full hover:bg-gray-50 lg:block lg:mb-0 lg:mr-3 lg:w-auto dark:border-gray-700 dark:text-font-default-dark dark:hover:text-gray-200 dark:hover:bg-gray-900">
-                        {% translate "No, take me back" %}
-                    </a>
-
-                    <input type="submit" value="{% translate 'Yes, I’m sure' %}" class="bg-red-600 cursor-pointer font-medium ml-auto px-3 py-2 rounded-md text-white dark:bg-red-500/20 dark:text-red-500">
+                    {% include "unfold/helpers/delete_submit_line.html" %}
                 </div>
             </form>
         </div>

unfold/templates/admin/edit_inline/stacked.html

@@ -13,82 +13,84 @@
         {{ inline_admin_formset.formset.management_form }}
         {% include "unfold/helpers/messages/error.html" with errors=inline_admin_formset.formset.non_form_errors %}
 
-        {% if inline_admin_formset.forms|length == 0 %}
-            <div>
-                <p class="mb-6 text-sm">
-                    {% trans "No records found." %}
-                </p>
-            </div>
-        {% else %}
-            <div class="border border-gray-200 mb-6 overflow-hidden rounded-md shadow-sm w-full dark:border-gray-800">
-                {% for inline_admin_form in inline_admin_formset %}
-                    <div class="inline-related group inline-stacked {% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form last-related{% endif %}" id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
-                        {% if not inline_admin_formset.opts.hide_title or inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
-                            <h3 class="bg-gray-50 border-b {% if not forloop.first %}border-t{% endif %} border-gray-200 flex font-medium items-center mb-3 px-3 py-2 text-sm dark:bg-white/[.02] dark:border-gray-800">
-                                <span class="mr-2">
-                                    {{ inline_admin_formset.opts.verbose_name|capfirst }}:
-                                </span>
+        <div class="border border-gray-200 mb-6 overflow-hidden rounded-md shadow-sm w-full dark:border-gray-800 *:border-t first:*:border-t-0 *:border-gray-200 dark:*:border-gray-800"
+             {% if inline_admin_formset.opts.ordering_field %}
+                 data-ordering-field="{{ inline_admin_formset.opts.ordering_field }}" x-on:end="sortRecords" x-sort.ghost
+             {% endif %}>
 
-                                <span class="inline_label font-semibold text-font-important-light dark:text-font-important-dark">
-                                    {% if inline_admin_form.original and inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
-                                        <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="{% if inline_admin_formset.has_change_permission %}inlinechangelink{% else %}inlineviewlink{% endif %} font-medium text-primary-600 dark:text-primary-500">
-                                            {{ inline_admin_form.original }}
-                                        </a>
-                                    {% else %}
-                                        {% if inline_admin_form.original %}
-                                            {% with inline_title=inline_admin_form.original.get_inline_title %}
-                                                {% if inline_title %}
-                                                    {{ inline_title }}
-                                                {% else %}
-                                                    {{ inline_admin_form.original }}
-                                                {% endif %}
-                                            {% endwith %}
+            {% for inline_admin_form in inline_admin_formset %}
+                <div x-sort:item class="inline-related group inline-stacked {% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form last-related{% endif %}" id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
+                    {% if not inline_admin_formset.opts.hide_title or inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
+                        <h3 class="bg-gray-50 border-b border-gray-200 flex font-medium items-center gap-2 mb-3 px-3 py-2 text-sm dark:bg-white/[.02] dark:border-gray-800">
+                            {% if inline_admin_formset.opts.ordering_field %}
+                                {% if inline_admin_form.original %}
+                                    <span class="material-symbols-outlined cursor-pointer" x-sort:handle>drag_indicator</span>
+                                {% else %}
+                                    <span class="-mr-2" x-sort:handle></span>
+                                {% endif %}
+                            {% endif %}
 
-                                            {% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
-                                                <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="{{ inline_admin_formset.has_change_permission|yesno:'inlinechangelink,inlineviewlink' }} font-medium ml-2 text-primary-600 dark:text-primary-500">
-                                                    {% if inline_admin_formset.has_change_permission %}
-                                                        {% translate "Change" %}
-                                                    {% else %}
-                                                        {% translate "View" %}
-                                                    {% endif %}
-                                                </a>
+                            {{ inline_admin_formset.opts.verbose_name|capfirst }}:
+
+                            <span class="inline_label font-semibold text-font-important-light dark:text-font-important-dark">
+                                {% if inline_admin_form.original and inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
+                                    <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="{% if inline_admin_formset.has_change_permission %}inlinechangelink{% else %}inlineviewlink{% endif %} font-medium text-primary-600 dark:text-primary-500">
+                                        {{ inline_admin_form.original }}
+                                    </a>
+                                {% else %}
+                                    {% if inline_admin_form.original %}
+                                        {% with inline_title=inline_admin_form.original.get_inline_title %}
+                                            {% if inline_title %}
+                                                {{ inline_title }}
+                                            {% else %}
+                                                {{ inline_admin_form.original }}
                                             {% endif %}
-                                        {% else %}
-                                            #{{ forloop.counter }}
+                                        {% endwith %}
+
+                                        {% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
+                                            <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="{{ inline_admin_formset.has_change_permission|yesno:'inlinechangelink,inlineviewlink' }} font-medium ml-2 text-primary-600 dark:text-primary-500">
+                                                {% if inline_admin_formset.has_change_permission %}
+                                                    {% translate "Change" %}
+                                                {% else %}
+                                                    {% translate "View" %}
+                                                {% endif %}
+                                            </a>
                                         {% endif %}
+                                    {% else %}
+                                        #{{ forloop.counter }}
                                     {% endif %}
-                                </span>
-
-                                {% if inline_admin_form.show_url %}
-                                    <a href="{{ inline_admin_form.absolute_url }}" class="font-medium ml-2 text-primary-600 dark:text-primary-500">
-                                        {% trans "View on site" %}
-                                    </a>
                                 {% endif %}
+                            </span>
 
-                                {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission and inline_admin_form.original %}
-                                    <span class="delete flex gap-2 items-center ml-auto">
-                                        {{ inline_admin_form.deletion_field.field|add_css_class:form_classes.checkbox }} {{ inline_admin_form.deletion_field.label_tag }}
-                                    </span>
-                                {% endif %}
-                            </h3>
-                        {% endif %}
+                            {% if inline_admin_form.show_url %}
+                                <a href="{{ inline_admin_form.absolute_url }}" class="font-medium ml-2 text-primary-600 dark:text-primary-500">
+                                    {% trans "View on site" %}
+                                </a>
+                            {% endif %}
+
+                            {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission and inline_admin_form.original %}
+                                <span class="delete flex gap-2 items-center ml-auto">
+                                    {{ inline_admin_form.deletion_field.field|add_css_class:form_classes.checkbox }} {{ inline_admin_form.deletion_field.label_tag }}
+                                </span>
+                            {% endif %}
+                        </h3>
+                    {% endif %}
 
-                        {% include "unfold/helpers/messages/error.html" with errors=inline_admin_form.form.non_field_errors %}
+                    {% include "unfold/helpers/messages/error.html" with errors=inline_admin_form.form.non_field_errors %}
 
-                        {% for fieldset in inline_admin_form %}
-                            <div class="px-3 -mb-5 {% if inline_admin_formset.opts.hide_title %}{% if not inline_admin_formset.formset.can_delete or not inline_admin_formset.has_delete_permission  %}pt-3{% endif %}{% endif %}">
-                                {% include 'admin/includes/fieldset.html' with stacked=1 %}
-                            </div>
-                        {% endfor %}
+                    {% for fieldset in inline_admin_form %}
+                        <div class="px-3 -mb-5 {% if inline_admin_formset.opts.hide_title %}{% if not inline_admin_formset.formset.can_delete or not inline_admin_formset.has_delete_permission  %}pt-3{% endif %}{% endif %}">
+                            {% include 'admin/includes/fieldset.html' with stacked=1 %}
+                        </div>
+                    {% endfor %}
 
-                        {% if inline_admin_form.needs_explicit_pk_field %}
-                            {{ inline_admin_form.pk_field.field }}
-                        {% endif %}
+                    {% if inline_admin_form.needs_explicit_pk_field %}
+                        {{ inline_admin_form.pk_field.field }}
+                    {% endif %}
 
-                        {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
-                    </div>
-                {% endfor %}
-            </div>
-        {% endif %}
+                    {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
+                </div>
+            {% endfor %}
+        </div>
     </fieldset>
 </div>