django-unfold 0.65.0__py3-none-any.whl → 0.67.0__py3-none-any.whl

unfold/static/unfold/js/app.js

@@ -68,7 +68,7 @@ function searchDropdown() {
       }
     },
     prevItem() {
-      if (this.currentIndex > 0) {
+      if (this.currentIndex > 1) {
         this.currentIndex--;
       }
     },
@@ -93,6 +93,7 @@ function searchCommand() {
     hasResults: false,
     openCommandResults: false,
     currentIndex: 0,
+    totalItems: 0,
     commandHistory: JSON.parse(localStorage.getItem("commandHistory") || "[]"),
     handleOpen() {
       this.openCommandResults = true;
@@ -102,6 +103,7 @@ function searchCommand() {
       }, 20);
 
       this.items = document.querySelectorAll("#command-history li");
+      this.totalItems = this.items.length;
     },
     handleShortcut(event) {
       if (
@@ -121,21 +123,46 @@ function searchCommand() {
         this.openCommandResults = false;
         this.el.innerHTML = "";
         this.items = undefined;
+        this.totalItems = 0;
         this.currentIndex = 0;
       } else {
         this.$refs.searchInputCommand.value = "";
       }
     },
     handleContentLoaded(event) {
-      this.items = event.target.querySelectorAll("li");
-      this.currentIndex = 0;
-      this.hasResults = this.items.length > 0;
+      if (
+        event.target.id !== "command-results" &&
+        event.target.id !== "command-results-list"
+      ) {
+        return;
+      }
+
+      const commandResultsList = document.getElementById(
+        "command-results-list"
+      );
+      if (commandResultsList) {
+        this.items = commandResultsList.querySelectorAll("li");
+        this.totalItems = this.items.length;
+      } else {
+        this.items = undefined;
+        this.totalItems = 0;
+      }
+
+      if (event.target.id === "command-results") {
+        this.currentIndex = 0;
+
+        if (this.items) {
+          this.totalItems = this.items.length;
+        } else {
+          this.totalItems = 0;
+        }
+      }
+
+      this.hasResults = this.totalItems > 0;
 
       if (!this.hasResults) {
         this.items = document.querySelectorAll("#command-history li");
       }
-
-      new SimpleBar(event.target);
     },
     handleOutsideClick() {
       this.$refs.searchInputCommand.value = "";
@@ -158,7 +185,7 @@ function searchCommand() {
       }
     },
     nextItem() {
-      if (this.currentIndex < this.items.length) {
+      if (this.currentIndex < this.totalItems) {
         this.currentIndex++;
         this.scrollToActiveItem();
       }
@@ -389,6 +416,12 @@ const DEFAULT_CHART_OPTIONS = {
       pointBorderWidth: 0,
       pointStyle: false,
     },
+    pie: {
+      borderWidth: 0,
+    },
+    doughnut: {
+      borderWidth: 0,
+    },
   },
   plugins: {
     legend: {
@@ -409,6 +442,13 @@ const DEFAULT_CHART_OPTIONS = {
   },
   scales: {
     x: {
+      display: function (context) {
+        if (["pie", "doughnut", "radar"].includes(context.chart.config.type)) {
+          return false;
+        }
+
+        return true;
+      },
       border: {
         dash: [5, 5],
         dashOffset: 2,
@@ -417,6 +457,11 @@ const DEFAULT_CHART_OPTIONS = {
       ticks: {
         color: "#9ca3af",
         display: true,
+        maxTicksLimit: function (context) {
+          return context.chart.data.datasets.find(
+            (dataset) => dataset.maxTicksXLimit
+          )?.maxTicksXLimit;
+        },
       },
       grid: {
         display: true,
@@ -424,15 +469,35 @@ const DEFAULT_CHART_OPTIONS = {
       },
     },
     y: {
+      display: function (context) {
+        if (["pie", "doughnut", "radar"].includes(context.chart.config.type)) {
+          return false;
+        }
+
+        return true;
+      },
       border: {
         dash: [5, 5],
         dashOffset: 5,
         width: 0,
       },
       ticks: {
-        display: false,
-        font: {
-          size: 13,
+        color: "#9ca3af",
+        display: function (context) {
+          return context.chart.data.datasets.some((dataset) => {
+            return (
+              dataset.hasOwnProperty("displayYAxis") && dataset.displayYAxis
+            );
+          });
+        },
+        callback: function (value) {
+          const suffix = this.chart.data.datasets.find(
+            (dataset) => dataset.suffixYAxis
+          )?.suffixYAxis;
+          if (suffix) {
+            return `${value} ${suffix}`;
+          }
+          return value;
         },
       },
       grid: {
@@ -467,8 +532,17 @@ const renderCharts = () => {
     const borderColor = hasDarkClass ? baseColorDark : baseColorLight;
 
     for (const chart of charts) {
-      chart.options.scales.x.grid.color = borderColor;
-      chart.options.scales.y.grid.color = borderColor;
+      if (chart.options.scales.x) {
+        chart.options.scales.x.grid.color = borderColor;
+      }
+
+      if (chart.options.scales.y) {
+        chart.options.scales.y.grid.color = borderColor;
+      }
+
+      if (chart.options.scales.r) {
+        chart.options.scales.r.grid.color = borderColor;
+      }
       chart.update();
     }
   };
@@ -488,7 +562,17 @@ const renderCharts = () => {
     for (const key in parsedData.datasets) {
       const dataset = parsedData.datasets[key];
       const processColor = (colorProp) => {
-        if (dataset?.[colorProp]?.startsWith("var(")) {
+        if (Array.isArray(dataset?.[colorProp])) {
+          for (const [index, prop] of dataset?.[colorProp].entries()) {
+            if (prop.startsWith("var(")) {
+              const cssVar = prop.match(/var\((.*?)\)/)[1];
+              const color = getComputedStyle(document.documentElement)
+                .getPropertyValue(cssVar)
+                .trim();
+              dataset[colorProp][index] = color;
+            }
+          }
+        } else if (dataset?.[colorProp]?.startsWith("var(")) {
           const cssVar = dataset[colorProp].match(/var\((.*?)\)/)[1];
           const color = getComputedStyle(document.documentElement)
             .getPropertyValue(cssVar)
@@ -501,11 +585,30 @@ const renderCharts = () => {
       processColor("backgroundColor");
     }
 
+    CHART_OPTIONS = { ...DEFAULT_CHART_OPTIONS };
+    if (type === "radar") {
+      CHART_OPTIONS.scales = {
+        r: {
+          ticks: {
+            backdropColor: "transparent",
+          },
+          pointLabels: {
+            color: "#9ca3af",
+            font: {
+              size: 12,
+            },
+          },
+        },
+      };
+    }
+    Chart.defaults.font.family = "Inter";
+    Chart.defaults.font.size = 12;
+
     charts.push(
       new Chart(ctx, {
         type: type || "bar",
         data: parsedData,
-        options: options ? JSON.parse(options) : DEFAULT_CHART_OPTIONS,
+        options: options ? JSON.parse(options) : { ...CHART_OPTIONS },
       })
     );
   }

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

@@ -18,7 +18,7 @@
     return this;
   };
 
-  $.fn.djangoAdminSelect2 = function () {
+  $.fn.djangoFilterSelect2 = function () {
     $.each(this, function (i, element) {
       $(element).select2({
         ajax: {
@@ -40,13 +40,6 @@
   $(function () {
     $(".unfold-admin-autocomplete.admin-autocomplete").djangoCustomSelect2();
 
-    $(".admin-autocomplete")
-      .not(".unfold-admin-autocomplete")
-      .not("[name*=__prefix__]")
-      .djangoAdminSelect2();
-  });
-
-  document.addEventListener("formset:added", (event) => {
-    $(event.target).find(".admin-autocomplete").djangoAdminSelect2();
+    $(".unfold-filter-autocomplete.admin-autocomplete").djangoFilterSelect2();
   });
 }

unfold/styles.css

@@ -9,19 +9,20 @@
   }
 }
 
-@source inline("bg-white/[.06] border-white/40 h-3 w-3 h-[64px] w-[65px]! left-[65px] {dark:,}text-base-{50,{100..900},950} dark:hover:bg-white/[.06] translate-x-1/4 -translate-y-1/4");
-@source inline("{-,}{top,bottom,left,right}-{0..6}");
+@source inline("aspect-square bg-white/[.06] border-white/40 h-3 w-3 h-[64px] w-[65px]! left-[65px] {dark:,}text-base-{50,{100..900},950} dark:hover:bg-white/[.06] {-,}translate-{x,y}-{1/2}");
+@source inline("{-,}{top,bottom,left,right}-{1/2,0..6} {!,}leading-[38px] text-{default,subtle,important}");
+@source inline("bg-linear-to-{{t,r,b,l,tl,tr,bl,br}} {dark:,}{from, to}-{{{base,primary}-{50,{100..900..100},950}},white}");
 @source inline("rounded rounded-{t,r,b,l} rounded-{t,r,b,l}-default");
 @source inline("{md:,lg:,2xl:,}relative {md:,lg:,2xl:,}flex {md:,lg:,2xl:,}absolute {md:,lg:,2xl:,}sticky");
-@source inline("{-,}m{t,r,b,l,x,y,}-{0..6} {-,}p{t,r,b,l,x,y,}-{0..6}");
+@source inline("{-,}{lg:,}m{t,r,b,l,x,y,}-{0..24} {-,}{lg:,}p{t,r,b,l,x,y,}-{0..24}");
 @source inline("{md:,lg:,}border-{0,2} {md:,lg:,}border-{t,r,b,l}-{0,2}");
-@source inline("{hover:,dark:,}bg-primary-{50,{100..900..100},950}");
+@source inline("{!,}{hover:,dark:,}bg-primary-{50,{100..900..100},950}");
 @source inline("{hover:,dark:,}border-base-{50,{100..900..100},950} {hover:,dark:,}border-transparent");
 @source inline("{hover:,dark:,}bg-base-{50,{100..900..100},950}");
-@source inline("{md:,lg:,}w-{1/2,1/3,2/3,1/4,2/4,3/4,1/5,2/5,3/5,4/5,1/6,2/6,3/6,4/6,5/6,1/7,2/7,3/7,4/7,5/7,6/7}");
-@source inline("{md:,lg:,}gap-{0.5,{1..12}}");
-@source inline("{md:,lg:,}grid-cols-{1..12}");
-@source inline("{md:,lg:,}col-span-{1..12}");
+@source inline("{md:,lg:,}{min-h,h,min-w,w}-{1..8} {md:,lg:,}w-{1/2,1/3,2/3,1/4,2/4,3/4,1/5,2/5,3/5,4/5,1/6,2/6,3/6,4/6,5/6,1/7,2/7,3/7,4/7,5/7,6/7}");
+@source inline("{md:,lg:,xl:,}gap-{0.5,{1..16}}");
+@source inline("{md:,lg:,xl:,}grid-cols-{1..16}");
+@source inline("{md:,lg:,xl:,}col-span-{1..16}");
 
 @layer base {
   *,
@@ -29,7 +30,7 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
+    border-color: var(--color-base-200, currentColor);
   }
 }
 
@@ -74,6 +75,19 @@
   --color-font-important-dark: var(--color-font-important-dark);
 }
 
+
+@utility text-important {
+ @apply text-font-important-light dark:text-font-important-dark;
+}
+
+@utility text-default {
+  @apply text-font-default-light dark:text-font-default-dark;
+}
+
+@utility text-subtle {
+  @apply text-font-subtle-light dark:text-font-subtle-dark;
+}
+
 @utility field-sizing-content {
   field-sizing: content;
 }
@@ -99,7 +113,7 @@
 }
 
 @utility scrollable-top {
-  @apply after:absolute after:content-[''] after:bg-linear-to-t after:from-gray-100 after:h-4 after:left-0 after:right-0 after:-top-px after:-translate-y-full dark:after:bg-none;
+  @apply after:absolute after:content-[''] after:bg-linear-to-t after:from-base-100 after:h-4 after:left-0 after:right-0 after:-top-px after:-translate-y-full dark:after:bg-none;
 }
 
 @utility md-16 {
@@ -264,7 +278,7 @@ table tr.selected th {
 
 .selector-chooseall,
 .selector-clearall {
-  @apply block border-t border-base-200 py-2 text-center text-sm text-primary-500 dark:border-base-700;
+  @apply block border-t border-base-200 cursor-pointer py-2 text-center text-sm text-default;
 }
 
 .selector-clearall {
@@ -623,10 +637,6 @@ fieldset details[open] > summary:after {
   @apply bg-primary-600 border-0 h-1;
 }
 
-#changelist-filter .admin-numeric-filter-slider-tooltips {
-  @apply flex flex-row font-medium mb-5 space-x-4 text-base-500 text-sm;
-}
-
 /*******************************************************
  Trix
  *******************************************************/

unfold/templates/admin/nav_sidebar.html

@@ -2,7 +2,7 @@
 
 <div class="relative z-50">
     <div class="fixed hidden xl:relative xl:block w-[288px] {% element_classes 'navigation_wrapper' %}" x-bind:class="{'xl:hidden!': !sidebarDesktopOpen, 'block!': sidebarMobileOpen}">
-        <div class="bg-gray-50 relative z-30 dark:bg-gray-900">
+        <div class="bg-base-50 relative z-30 dark:bg-base-900">
             <div id="nav-sidebar" class="bg-base-50 border-r border-base-200 bottom-0 fixed max-h-screen top-0 w-[288px] dark:border-base-800 dark:bg-base-900 {% element_classes 'navigation' %}">
                 {% if templates.navigation %}
                     {% include templates.navigation %}

unfold/templates/unfold/components/button.html

@@ -3,7 +3,7 @@ class="font-medium flex group items-center gap-2 px-3 py-2 rounded-default justi
 {% if variant == "default" %}
     border border-base-200 bg-white text-font-important-light dark:border-base-700 dark:bg-transparent dark:text-font-important-dark
 {% elif variant == "secondary" %}
-    bg-gray-100 border border-transparent dark:bg-base-800
+    bg-base-100 border border-transparent dark:bg-base-800
 {% elif variant == "ghost" %}
     bg-transparent text-font-important-light dark:text-font-important-dark
 {% else %}

unfold/templates/unfold/components/card.html

@@ -1,11 +1,20 @@
-<{% if href %}a href="{{ href }}"{% else %}div{% endif %} class="bg-white block border border-base-200 flex flex-col grow overflow-hidden p-6 relative rounded-default shadow-xs dark:bg-base-900 dark:border-base-800 {% if href %}cursor-pointer transition-all hover:border-base-300 hover:shadow-md hover:shadow-base-200 dark:hover:border-base-700 dark:hover:shadow-base-800/50 {% endif %}{% if class %} {{ class }}{% endif %}">
+<{% if href %}a href="{{ href }}"{% else %}div{% endif %} class="bg-white block flex flex-col grow overflow-hidden p-6 relative rounded-default shadow-xs dark:bg-base-900 dark:border-base-800 {% if not disable_border %}border border-base-200 {% else %}shadow-base-500/20{% endif %} {% if href %}cursor-pointer transition-all hover:border-base-300 hover:shadow-md dark:hover:border-base-700 dark:hover:shadow-base-800/50 {% endif %}{% if class %} {{ class }}{% endif %}">
+
 {% if title %}
-    <h2 class="border-b border-base-200 font-semibold mb-6 -mt-6 -mx-6 py-4 px-6 text-[15px] text-font-important-light dark:text-font-important-dark dark:border-base-800">
-        {{ title }}
-    </h2>
+    <div class="border-b border-base-200 flex flex-row items-center mb-6 -mt-6 -mx-6 py-4 px-6 dark:border-base-800">
+        <h2 class="font-semibold text-[15px] text-important">
+            {{ title }}
+        </h2>
+
+        {% if action %}
+            <div class="ml-auto">
+                {{ action }}
+            </div>
+        {% endif %}
+    </div>
 {% endif %}
 
-<div class="grow relative {% if icon %} pl-6{% endif %}">
+<div class="grow relative{% if icon %} pl-8{% endif %}">
     {{ children }}
 
     {% if label %}
@@ -15,7 +24,7 @@
     {% endif %}
 
     {% if icon %}
-        <span class="material-symbols-outlined absolute -left-6 text-base-300 top-1/2 -translate-x-1/3 -translate-y-1/2 text-6xl! dark:text-base-500">{{ icon }}</span>
+        <span class="material-symbols-outlined absolute -left-6 text-base-300 top-1/2 -translate-x-1/3 -translate-y-1/2 text-6xl! dark:text-base-500 {{ icon_class }}">{{ icon }}</span>
     {% endif %}
 </div>
 

unfold/templates/unfold/components/layer.html

@@ -0,0 +1 @@
+{{ children }}

unfold/templates/unfold/components/progress.html

@@ -1,5 +1,5 @@
-<div class="{% if class %}{{ class }}{% endif %}">
-    <div class="flex flex-col gap-2 relative">
+<div class="flex flex-col gap-2 relative w-full {% if class %}{{ class }}{% endif %}">
+    {% if title or description %}
         <div class="flex flex-row relative z-20">
             {% if title %}
                 <h3 class="text-font-important-light dark:text-font-important-dark text-sm">
@@ -13,11 +13,17 @@
                 </strong>
             {% endif %}
         </div>
+    {% endif %}
 
-        {% if value %}
-            <div class="bg-gray-100 overflow-hidden rounded-default dark:bg-base-800">
-                <div class="h-1.5 bg-primary-600 rounded-default z-10 dark:bg-primary-500" title="{{ value }}%" style="width: {{ value }}%"></div>
-            </div>
-        {% endif %}
-    </div>
+    {% if items or value %}
+        <div class="bg-base-100 flex flex-row overflow-hidden rounded-default dark:bg-base-800">
+            {% if items %}
+                {% for item in items %}
+                    <div class="h-1.5 bg-primary-600 z-10 dark:bg-primary-500 last:rounded-r-default {{ item.progress_class }}" title="{% if item.title %}{{ item.title }}: {% endif %}{{ item.value }}%" style="width: {{ item.value }}%"></div>
+                {% endfor %}
+            {% elif value %}
+                <div class="h-1.5 bg-primary-600 rounded-default z-10 last:rounded-r-default dark:bg-primary-500 {{ progress_class }}" title="{% if title %}{{ title }}: {% endif %}{{ value }}%" style="width: {{ value }}%"></div>
+            {% endif %}
+        </div>
+    {% endif %}
 </div>

unfold/templates/unfold/components/tracker.html

@@ -1,4 +1,4 @@
-<ul class="flex flex-row gap-0.5 overflow-hidden rounded-default">
+<ul class="flex flex-row gap-0.5 overflow-hidden rounded-default {% if class %}{{ class }}{% endif %}">
     {% for item in data %}
         <li class="h-8 px-px size-full {% if item.color %}{{ item.color }}{% else %}bg-base-300 dark:bg-base-400{% endif %} hover:opacity-50" title="{{ item.tooltip }}"></li>
     {% endfor %}

unfold/templates/unfold/helpers/app_list.html

@@ -72,7 +72,7 @@
             <div class="absolute bottom-0 left-0 right-0 top-0 z-50 md:left-72" x-cloak x-show="openAllApplications">
                 <div class="absolute bg-base-900/80 backdrop-blur-xs bottom-0 left-0 right-0 top-0 z-10 w-screen"></div>
 
-                <div class="bg-white flex flex-col h-full overflow-x-hidden overflow-y-auto py-5 px-8 relative text-sm w-80 z-20 dark:bg-base-900 dark:border-r dark:border-base-800" x-on:click.outside="openAllApplications = false" x-on:keydown.escape.window="openAllApplications = false">
+                <div class="bg-white flex flex-col h-full overflow-x-hidden overflow-y-auto py-5 px-8 relative text-sm w-80 z-20 dark:bg-base-900 dark:border-r dark:border-base-800" x-on:click.outside="openAllApplications = false" x-on:keydown.escape.window="openAllApplications = false" data-simplebar>
                     {% for app in app_list %}
                         <div class="mb-6 last:mb-0">
                             <h2 class="mb-4 font-semibold text-font-important-light truncate dark:text-font-important-dark">

unfold/templates/unfold/helpers/boolean.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<div class="inline-flex font-semibold items-center justify-center leading-normal h-6 w-6 rounded-full uppercase whitespace-nowrap {% if value == '' or value == None %}bg-base-100 text-base-700 dark:bg-base-500/20 dark:text-base-200{% elif value %}bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400{% else %}bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400{% endif %}"
+<div class="inline-flex font-semibold items-center justify-center leading-normal h-6 w-6 !rounded-full uppercase whitespace-nowrap {% if value == '' or value == None %}bg-base-100 text-base-700 dark:bg-base-500/20 dark:text-base-200{% elif value %}bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400{% else %}bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400{% endif %}"
      title="{% if value == '' or value == None %}{% trans "Unknown" %}{% elif value %}{% trans "True" %}{% else %}{% trans "False" %}{% endif %}">
 
     <span class="material-symbols-outlined">

unfold/templates/unfold/helpers/command.html

@@ -30,7 +30,7 @@
                     x-on:keydown.escape.prevent="handleEscape()"
                     x-on:keydown.arrow-down.prevent="nextItem()"
                     x-on:keydown.arrow-up.prevent="prevItem()"
-                    x-on:keydown.enter.prevent="selectItem()"
+                    x-on:keydown.enter.prevent="selectItem({% if command_show_history %}true{% else %}false{% endif %})"
                     hx-get="{% url "admin:search" %}?extended=1"
                     hx-trigger="keyup changed delay:500ms"
                     hx-select="#command-results-list"

unfold/templates/unfold/helpers/command_results.html

@@ -1,12 +1,20 @@
-{% load i18n %}
+{% load i18n unfold %}
 
 {% if results %}
     <ul id="command-results-list" class="flex flex-col gap-1.5 p-4">
         {% for item in results %}
             <li class="group"
-                x-bind:class="{'active': currentIndex === {{ forloop.counter }}}"
-                x-on:mouseenter="currentIndex = {{ forloop.counter }}">
-                <a class="bg-base-100 flex items-center rounded-default px-3.5 py-3 transition-colors group-[.active]:bg-primary-600 group-[.active]:text-white dark:bg-white/[.04] dark:text-base-200 dark:group-[.active]:bg-primary-600 dark:group-[.active]:text-white"
+                {% if forloop.last and results.next_page_number %}
+                    hx-get="{% url "admin:search" %}{% unfold_querystring extended=1 page=results.next_page_number %}"
+                    hx-trigger="intersect once threshold:0.5"
+                    hx-swap="beforeend"
+                    hx-select="#command-results-list > *"
+                    hx-target="#command-results-list"
+                    hx-indicator="#command-results-loading"
+                {% endif %}
+                x-bind:class="{'active': currentIndex === {{ page_counter|add:forloop.counter }}}"
+                x-on:mouseenter="currentIndex = {{ page_counter|add:forloop.counter }}">
+                <a class="bg-base-100 flex items-center rounded-default px-3.5 py-3 group-[.active]:bg-primary-600 group-[.active]:text-white dark:bg-white/[.04] dark:text-base-200 dark:group-[.active]:bg-primary-600 dark:group-[.active]:text-white"
                    href="{{ item.link }}"
                    data-title="{{ item.title }}"
                    data-description="{{ item.description }}"
@@ -25,26 +33,37 @@
                         <span class="text-font-subtle-light dark:text-font-subtle-dark group-[.active]:text-white">{{ item.description|capfirst }}</span>
                     </span>
 
-                    <span class="material-symbols-outlined ml-auto text-sm transition-all group-[.active]:text-white group-[.active]:-mr-1">arrow_forward</span>
+                    <span class="material-symbols-outlined ml-auto text-sm transition-transform group-[.active]:text-white group-[.active]:-translate-x-[2px]">arrow_forward</span>
                 </a>
             </li>
         {% endfor %}
     </ul>
 {% else %}
-    <ul id="command-results-list" class="px-4 py-8 flex items-center justify-center">
+    <ul class="px-4 py-8 flex items-center justify-center">
         <li class="text-lg">
             {% trans "No results matching your query" %}
         </li>
     </ul>
 {% endif %}
 
-
 <div id="command-results-note" x-show="hasResults">
     <div class="border-t border-base-200 px-4 py-3 flex items-center justify-center text-xs dark:border-base-700">
-        {% blocktranslate count counter=results|length with time=execution_time|floatformat:2 %}
-            Found {{ counter }} result in {{ time }} seconds
-        {% plural %}
-            Found {{ counter }} results in {{ time }} seconds
-        {% endblocktranslate %}
+        <div id="command-results-loading" class="hidden flex-row gap-2 grow h-[16px] items-center justify-center w-[16px] w-full [&.htmx-request]:flex [&.htmx-request+div]:hidden">
+            <span class="material-symbols-outlined animate-spin text-sm">
+                progress_activity
+            </span>
+
+            <span>
+                {% trans "Loading more results..." %}
+            </span>
+        </div>
+
+        <div>
+            {% blocktranslate count counter=page_obj.count with time=execution_time|floatformat:2 %}
+                Found {{ counter }} result in {{ time }} seconds
+            {% plural %}
+                Found {{ counter }} results in {{ time }} seconds
+            {% endblocktranslate %}
+        </div>
     </div>
 </div>

unfold/templates/unfold/helpers/field_readonly_value.html

@@ -1 +1 @@
-<div class="readonly break-words {% if field.is_json %}max-w-4xl{% else %}max-w-2xl{% endif %} py-2 text-sm *:rounded-default {% if not adminform.model_admin.compressed_fields and not field.is_image %}bg-base-50 border border-base-200 font-medium px-3 rounded-default shadow-xs dark:border-base-700 dark:bg-base-800{% endif %} {% if field.is_image %}inline-block [&_img]:rounded-default py-0!{% endif %}">{% if value %}{{ value }}{% elif field.contents %}{{ field.contents }}{% else %}-{% endif %}</div>
+<div class="readonly break-words {% if field.is_json %}max-w-4xl{% else %}max-w-2xl{% endif %} py-2 text-sm *:rounded-default {% if not adminform.model_admin.compressed_fields and not field.is_image %}bg-base-50 border border-base-200 font-medium px-3 rounded-default shadow-xs dark:border-base-700 dark:bg-base-800{% endif %}">{% if value %}{{ value }}{% elif field.contents %}{% if field.is_file %}{% include "unfold/helpers/field_readonly_value_file.html" %}{% else %}{{ field.contents }}{% endif %}{% else %}-{% endif %}</div>

unfold/templates/unfold/helpers/field_readonly_value_file.html

@@ -0,0 +1,18 @@
+{% load i18n %}
+
+{% with url=field.url %}
+    {% if not url %}
+        <span class="flex items-center">-<span>
+    {% elif field.is_image %}
+        <a href="{{ url }}" target="_blank" class="block max-w-48">
+            <img src="{{ url }}" alt="{% trans 'Image preview' %}" class="block rounded-default" />
+        </a>
+    {% else %}
+        <a href="{{ url }}" target="_blank">
+            <span class="flex items-center gap-2">
+                <span class="text-primary-600 dark:text-primary-500">{% trans "Click to download" %}</span>
+                <span class="material-symbols-outlined text-base-400 dark:text-base-500">download</span>
+            </span>
+        </a>
+    {% endif %}
+{% endwith %}

unfold/templates/unfold/helpers/search.html

@@ -27,6 +27,7 @@
                        name="s"
                        x-ref="searchInput"
                        x-on:focus="openSearchResults = true; currentIndex = 0"
+                       x-on:keydown="openSearchResults = true;"
                        x-on:keydown.arrow-down.prevent="nextItem()"
                        x-on:keydown.arrow-up.prevent="prevItem()"
                        x-on:keydown.escape.prevent="openSearchResults = false; if ($refs.searchInput.value === '') { $refs.searchInput.blur() } else { $refs.searchInput.value = '' }"

unfold/templates/unfold/widgets/clearable_file_input_small.html

@@ -3,7 +3,7 @@
 <div class="flex flex-row">
     <div class="{{ widget.file_wrapper_class }}">
         {% if widget.is_initial and not widget.required %}
-            <div class="bg-base-50 border-r border-base-200 flex flex-none items-center self-stretch px-3 dark:bg-base-900 dark:border-r-gray-700">
+            <div class="bg-base-50 border-r border-base-200 flex flex-none items-center self-stretch px-3 dark:bg-base-900 dark:border-r-base-700">
                 <label for="{{ widget.checkbox_id }}" class="flex items-center">
                     <input type="checkbox"{% if widget.class %} class="{{ widget.class }}"{% endif %} name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}" />