django-unfold 0.66.0__py3-none-any.whl → 0.68.0__py3-none-any.whl

unfold/static/unfold/js/app.js

@@ -17,7 +17,9 @@ const sortRecords = (e) => {
   const orderingField = e.from.dataset.orderingField;
 
   const weightInputs = Array.from(
-    e.from.querySelectorAll(`.has_original input[name$=-${orderingField}]`)
+    e.from.querySelectorAll(
+      `.has_original input[name$=-${orderingField}], td.field-${orderingField} input[name$=-${orderingField}]`
+    )
   );
 
   weightInputs.forEach((input, index) => {
@@ -416,6 +418,12 @@ const DEFAULT_CHART_OPTIONS = {
       pointBorderWidth: 0,
       pointStyle: false,
     },
+    pie: {
+      borderWidth: 0,
+    },
+    doughnut: {
+      borderWidth: 0,
+    },
   },
   plugins: {
     legend: {
@@ -436,6 +444,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,
@@ -456,6 +471,13 @@ 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,
@@ -512,8 +534,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();
     }
   };
@@ -533,7 +564,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)
@@ -546,11 +587,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

@@ -16,7 +16,7 @@
 @source inline("{md:,lg:,2xl:,}relative {md:,lg:,2xl:,}flex {md:,lg:,2xl:,}absolute {md:,lg:,2xl:,}sticky");
 @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:,}{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}");
@@ -420,6 +420,10 @@ td .inline-deletelink {
   @apply py-1;
 }
 
+.select2-container .select2-results__option--highlighted[aria-selected] {
+    @apply !bg-base-100 dark:!bg-base-800;
+}
+
 .select2-container.select2-container--open .select2-dropdown {
   @apply bg-white border border-base-200 rounded-default shadow-xs dark:border-base-700 dark:bg-base-900;
 }
@@ -505,13 +509,17 @@ fieldset details[open] > summary:after {
 /*******************************************************
  Calendar
  *******************************************************/
+.calendarbox .calendar {
+  @apply min-h-[320px];
+}
+
 .calendarbox,
 .clockbox {
-  @apply bg-white border border-base-200 rounded-default shadow-xs text-base-500 text-sm w-80 z-50 dark:bg-base-800 dark:border-base-700 fixed! left-1/2! top-1/2! -translate-x-1/2 -translate-y-1/2;
+  @apply bg-white border border-base-200 rounded-default shadow-xs w-80 z-50 dark:bg-base-800 dark:border-base-700 fixed! left-1/2! top-1/2! -translate-x-1/2 -translate-y-1/2;
 }
 
 .calendar caption {
-  @apply font-medium mb-3 py-3 text-base-700 dark:text-base-200;
+  @apply font-semibold mb-3 py-3 text-important;
 }
 
 .calendar table {
@@ -519,7 +527,7 @@ fieldset details[open] > summary:after {
 }
 
 .calendar table th {
-  @apply font-medium text-center text-base-700 text-xs dark:text-base-200;
+  @apply font-semibold text-center text-important text-xs;
 }
 
 .calendar table td {
@@ -527,7 +535,7 @@ fieldset details[open] > summary:after {
 }
 
 .calendar table td a {
-  @apply block flex h-8 items-center justify-center rounded-full transition-all w-8 dark:text-base-300;
+  @apply block flex h-8 items-center justify-center rounded-full w-8 dark:text-base-300;
 }
 
 .calendar table td a:hover {
@@ -543,7 +551,7 @@ fieldset details[open] > summary:after {
 }
 
 .calendar-shortcuts a {
-  @apply border border-base-200  font-medium leading-none mx-1 px-2 py-2 rounded-default shadow-xs text-center text-base-500 text-xs transition-all w-1/3 dark:border-base-700 dark:hover:border-base-600 dark:text-base-300 dark:hover:text-base-200;
+  @apply border border-base-200 font-medium leading-none mx-1 px-2 py-2 rounded-default shadow-xs text-center text-base-500 text-xs w-1/3 dark:border-base-700 dark:text-base-300 ;
 }
 
 .calendar-cancel {
@@ -554,28 +562,25 @@ fieldset details[open] > summary:after {
   @apply absolute block ml-2 mt-2 left-0 text-[0px] top-0;
 }
 
-.calendarnav-next:after,
-.calendarnav-previous:after {
-  @apply border border-base-200 flex h-7 items-center justify-center material-symbols-outlined rounded-full text-base-400 transition-all w-7 hover:border-primary-600 hover:text-primary-500 dark:bg-base-800 dark:border-base-700 dark:hover:border-base-800;
+.calendarnav-next,
+.calendarnav-previous {
+  @apply after:border after:border-base-200 after:flex after:h-7 after:items-center after:justify-center after:material-symbols-outlined after:rounded-full after:transition-all after:w-7 dark:after:bg-base-800 dark:after:border-base-700;
+}
 
+.calendarnav-previous:after {
   content: "navigate_before";
   display: flex;
 }
 
-.calendarnav-next:hover:after,
-.calendarnav-previous:hover:after {
-  @apply dark:border-base-600 dark:text-base-200;
+.calendarnav-next:after {
+  content: "navigate_next";
+  display: flex;
 }
 
 .calendarnav-next {
   @apply absolute block mr-2 mt-2 right-0 text-[0px] top-0;
 }
 
-.calendarnav-next:after {
-  content: "navigate_next";
-  display: flex;
-}
-
 /*******************************************************
  Timepicker
  *******************************************************/
@@ -637,10 +642,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/change_form.html

@@ -34,7 +34,7 @@
             {% include adminform.model_admin.change_form_outer_before_template %}
         {% endif %}
 
-        <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 }}"{% else %}x-bind:value="activeTab && activeTab !== 'general' ? '#' + activeTab : ''" {% 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 %} x-bind:action="activeTab && activeTab !== 'general' ? window.location.pathname + window.location.search + '#' + activeTab : window.location.pathname + window.location.search" 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 %}
@@ -99,6 +99,10 @@
             {% endif %}
         </form>
 
+        {% for dataset in datasets %}
+            {{ dataset.contents }}
+        {% endfor %}
+
         {% if adminform.model_admin.change_form_outer_after_template %}
             {% include adminform.model_admin.change_form_outer_after_template %}
         {% endif %}

unfold/templates/admin/change_list_results.html

@@ -8,69 +8,11 @@
 
 {% if results %}
     <div class="{% if cl.search_fields or cl.has_filters %}lg:rounded-b-default{% else %}lg:rounded-default{% endif %} -mx-1 px-1 overflow-x-auto lg:border lg:border-base-200 lg:mx-0 lg:px-0 lg:shadow-xs lg:dark:border-base-800 lg:bg-white lg:dark:bg-base-900 {% if cl.model_admin.list_horizontal_scrollbar_top %}simplebar-horizontal-scrollbar-top{% endif %}" data-simplebar data-simplebar-auto-hide="false">
-        <table id="result_list" class="block border-base-200 border-spacing-none border-separate w-full lg:table">
-            <thead>
-                <tr>
-                    {% if cl.model_admin.list_sections|length > 0 %}
-                        <th></th>
-                    {% endif %}
-
-                    {% for header in result_headers %}
-                        <th class="align-middle font-semibold py-2 text-left text-font-important-light dark:text-font-important-dark whitespace-nowrap {{ header.class_attrib }} {% if "action-toggle" in header.text and forloop.counter == 1 %}lg:px-3 lg:w-10{% else %}hidden px-3 lg:table-cell{% endif %}" scope="col">
-                            <div class="flex items-center">
-                                <div class="text">
-                                    {% if header.sortable %}
-                                        <a href="{{ header.url_primary }}">
-                                            {{ header.text|capfirst }}
-                                        </a>
-                                    {% else %}
-                                        {% if "action-toggle" in header.text and forloop.counter == 1 %}
-                                            <label class="flex flex-row items-center gap-2">
-                                                {{ header.text|capfirst }}
-
-                                                <span class="block font-normal lg:hidden">
-                                                    {% trans "Select all rows"%}
-                                                </span>
-                                            </label>
-                                        {% else %}
-                                            <span>
-                                                {{ header.text|capfirst }}
-                                            </span>
-                                        {% endif %}
-                                    {% endif %}
-                                </div>
-
-                                {% if header.sortable %}
-                                    {% if header.sort_priority > 0 %}
-                                        <div class="sortoptions flex items-center ml-2">
-                                            <a href="{{ header.url_toggle }}" class="flex items-center leading-none text-base-400 hover:text-base-500 dark:text-base-500 dark:hover:text-base-400 toggle {% if header.ascending %}ascending{% else %}descending{% endif %}" title="{% translate "Toggle sorting" %}">
-                                                {% if header.ascending %}
-                                                    <span class="block material-symbols-outlined">arrow_circle_down</span>
-                                                {% else %}
-                                                    <span class="block material-symbols-outlined">arrow_circle_up</span>
-                                                {% endif %}
-                                            </a>
-
-                                            <a class="sortremove flex items-center leading-none ml-1 text-base-400 dark:text-base-500 transition-all hover:text-red-700 dark:hover:text-red-500" href="{{ header.url_remove }}" title="{% translate "Remove from sorting" %}">
-                                                <span class="block material-symbols-outlined">cancel</span>
-                                            </a>
-                                        </div>
-
-                                        {% if num_sorted_fields > 1 %}
-                                            <span class="sortpriority font-medium ml-2 text-xs" title="{% blocktranslate with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktranslate %}">
-                                                {{ header.sort_priority }}
-                                            </span>
-                                        {% endif %}
-                                    {% endif %}
-                                {% endif %}
-                            </div>
-                        </th>
-                    {% endfor %}
-                </tr>
-            </thead>
+        <table id="result_list" class="block border-base-200 border-spacing-none border-separate w-full lg:table" {% if cl.model_admin.ordering_field %}x-sort.ghost x-on:end="sortRecords"{% endif %} data-ordering-field="{{ cl.model_admin.ordering_field }}">
+            {% include 'unfold/helpers/change_list_headers.html' %}
 
             {% for result in results %}
-                <tbody class="block relative lg:table-row-group lg:hover:shadow-raised lg:dark:hover:shadow-raised-dark lg:hover:z-20 {% cycle '' 'bg-base-50 dark:bg-white/[.02]' %}" x-data="{rowOpen: false}">
+                <tbody class="block relative lg:table-row-group lg:hover:shadow-raised lg:dark:hover:shadow-raised-dark lg:hover:z-20 {% cycle '' 'bg-base-50 dark:bg-white/[.02]' %}" x-data="{rowOpen: false}" {% if cl.model_admin.ordering_field %}x-sort:item{% endif %}>
                     {% if result.form and result.form.non_field_errors %}
                         <tr>
                             <td class="text-left" colspan="{{ result|length }}">
@@ -80,6 +22,12 @@
                     {% endif %}
 
                     <tr class="block border border-base-200 mb-3 relative rounded-default shadow-xs lg:table-row lg:border-none lg:mb-0 lg:rounded-none lg:shadow-none dark:border-base-800">
+                        {% if cl.model_admin.ordering_field %}
+                            <td class="align-middle cursor-move flex border-b border-base-200 font-normal px-2.5 py-2 relative text-left before:font-semibold before:text-font-important-light before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:border-b-0 lg:border-t lg:pl-3 lg:pr-0 lg:py-3 lg:table-cell dark:border-base-800 dark:lg:border-base-800 dark:before:text-font-important-dark lg:w-px" x-sort:handle>
+                                <span class="material-symbols-outlined align-middle cursor-move">drag_indicator</span>
+                            </td>
+                        {% endif %}
+
                         {% if cl.model_admin.list_sections|length > 0 %}
                             <td class="align-middle cursor-pointer flex border-b border-base-200 font-normal px-2.5 py-2 relative text-left before:font-semibold before:text-font-important-light before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:border-b-0 lg:border-t lg:pl-3 lg:pr-0 lg:py-3 lg:table-cell dark:border-base-800 dark:lg:border-base-800 dark:before:text-font-important-dark lg:w-px"
                                 data-label="{% trans "Expand row" %}"
@@ -100,7 +48,7 @@
 
                     {% if cl.model_admin.list_sections|length > 0 %}
                         <tr class="block mb-3 relative z-30 lg:table-row" x-show="rowOpen">
-                            <td colspan="{{ result|length|add:2 }}" class="border bg-base-200/10 block border-base-200 relative rounded-default p-3 lg:shadow-inner lg:border-0 lg:border-t lg:rounded-none lg:table-cell dark:border-base-800">
+                            <td colspan="100%" class="border bg-base-200/10 block border-base-200 relative rounded-default p-3 lg:shadow-inner lg:border-0 lg:border-t lg:rounded-none lg:table-cell dark:border-base-800">
                                 <div class="absolute bg-primary-600 h-full hidden left-0 top-0 w-0.5 lg:block"></div>
 
                                 <div class="grid gap-3 {{ cl.model_admin.list_sections_classes }}">

unfold/templates/admin/edit_inline/stacked.html

@@ -34,7 +34,7 @@
 
                             {% 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>
+                                    <span class="material-symbols-outlined cursor-move" x-sort:handle>drag_indicator</span>
                                 {% else %}
                                     <span class="-mr-2" x-sort:handle></span>
                                 {% endif %}

unfold/templates/admin/search_form.html

@@ -2,7 +2,7 @@
 
 {% if cl.search_fields %}
     <div id="toolbar">
-        <form id="changelist-search" method="get" role="search" x-data="searchForm()">
+        <form {% if not cl.is_dataset %}id="changelist-search" x-data="searchForm()"{% endif %} method="get" role="search">
             <div class="bg-white border border-base-200 flex flex-row items-center px-3 rounded-default relative shadow-xs w-full focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 lg:w-96 dark:bg-base-900 dark:border-base-700">
                 <button type="submit" class="flex items-center focus:outline-hidden" id="searchbar-submit">
                     <span class="material-symbols-outlined md-18 text-base-400 dark:text-base-500">search</span>
@@ -14,10 +14,12 @@
                        class="grow font-medium min-w-0 overflow-hidden p-2 placeholder-font-subtle-light truncate focus:outline-hidden dark:bg-base-900 dark:placeholder-font-subtle-dark dark:text-font-default-dark"
                        name="{{ search_var }}"
                        value="{{ cl.query }}"
-                       id="searchbar"
+                       {% if not cl.is_dataset %}id="searchbar"{% endif %}
                        placeholder="{% if cl.search_help_text %}{{ cl.search_help_text }}{% else %}{% trans "Type to search" %}{% endif %}" />
 
-                {% include "unfold/helpers/shortcut.html" with shortcut="/" %}
+                {% if not cl.is_dataset %}
+                    {% include "unfold/helpers/shortcut.html" with shortcut="/" %}
+                {% endif %}
             </div>
 
             {% for pair in cl.filter_params.items %}

unfold/templates/unfold/components/card.html

@@ -1,8 +1,17 @@
 <{% 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-8{% endif %}">

unfold/templates/unfold/components/progress.html

@@ -15,9 +15,15 @@
         </div>
     {% endif %}
 
-    {% if value %}
-        <div class="bg-base-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 {{ progress_class }}" title="{{ value }}%" style="width: {{ value }}%"></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/helpers/change_list_headers.html

@@ -0,0 +1,65 @@
+{% load i18n %}
+
+<thead>
+    <tr>
+        {% if cl.model_admin.ordering_field %}
+            <th></th>
+        {% endif %}
+
+        {% if cl.model_admin.list_sections|length > 0 %}
+            <th></th>
+        {% endif %}
+
+        {% for header in result_headers %}
+            <th class="align-middle font-semibold py-2 text-left text-font-important-light dark:text-font-important-dark whitespace-nowrap {{ header.class_attrib }} {% if "action-toggle" in header.text and forloop.counter == 1 %}lg:px-3 lg:w-10{% else %}hidden px-3 lg:table-cell{% endif %}" scope="col">
+                <div class="flex items-center">
+                    <div class="text">
+                        {% if header.sortable %}
+                            <a href="{{ header.url_primary }}">
+                                {{ header.text|capfirst }}
+                            </a>
+                        {% else %}
+                            {% if "action-toggle" in header.text and forloop.counter == 1 %}
+                                <label class="flex flex-row items-center gap-2">
+                                    {{ header.text|capfirst }}
+
+                                    <span class="block font-normal lg:hidden">
+                                        {% trans "Select all rows"%}
+                                    </span>
+                                </label>
+                            {% else %}
+                                <span>
+                                    {{ header.text|capfirst }}
+                                </span>
+                            {% endif %}
+                        {% endif %}
+                    </div>
+
+                    {% if header.sortable %}
+                        {% if header.sort_priority > 0 %}
+                            <div class="sortoptions flex items-center ml-2">
+                                <a href="{{ header.url_toggle }}" class="flex items-center leading-none text-base-400 hover:text-base-500 dark:text-base-500 dark:hover:text-base-400 toggle {% if header.ascending %}ascending{% else %}descending{% endif %}" title="{% translate "Toggle sorting" %}">
+                                    {% if header.ascending %}
+                                        <span class="block material-symbols-outlined">arrow_circle_down</span>
+                                    {% else %}
+                                        <span class="block material-symbols-outlined">arrow_circle_up</span>
+                                    {% endif %}
+                                </a>
+
+                                <a class="sortremove flex items-center leading-none ml-1 text-base-400 dark:text-base-500 transition-all hover:text-red-700 dark:hover:text-red-500" href="{{ header.url_remove }}" title="{% translate "Remove from sorting" %}">
+                                    <span class="block material-symbols-outlined">cancel</span>
+                                </a>
+                            </div>
+
+                            {% if num_sorted_fields > 1 %}
+                                <span class="sortpriority font-medium ml-2 text-xs" title="{% blocktranslate with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktranslate %}">
+                                    {{ header.sort_priority }}
+                                </span>
+                            {% endif %}
+                        {% endif %}
+                    {% endif %}
+                </div>
+            </th>
+        {% endfor %}
+    </tr>
+</thead>

unfold/templates/unfold/helpers/dataset.html

@@ -0,0 +1,19 @@
+{% load admin_list unfold_list %}
+
+<div {% if cl.model_admin.tab %}x-show="activeTab == 'dataset-{{ dataset.model_name }}'"{% endif %}>
+    {% if not cl.model_admin.tab %}
+        <h2 class="inline-heading bg-base-100 font-semibold mb-6 px-4 py-3 rounded-default text-font-important-light @min-[1570px]:-mx-4 dark:bg-white/[.02] dark:text-font-important-dark">
+            {{ dataset.model_verbose_name|capfirst }}
+        </h2>
+    {% endif %}
+
+    {% if cl.search_fields %}
+        <div class="flex flex-col gap-4 mb-4  sm:flex-row empty:hidden lg:border lg:border-base-200 lg:dark:border-base-800 lg:-mb-8 lg:p-3 lg:pb-11 lg:rounded-t-default">
+            {% unfold_search_form cl %}
+        </div>
+    {% endif %}
+
+    {% unfold_result_list cl %}
+
+    {% pagination cl %}
+</div>

unfold/templates/unfold/helpers/edit_inline/tabular_field.html

@@ -2,7 +2,7 @@
     {% if forloop.parentloop.counter == 1 and forloop.counter == 1 %}
         {% 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>
+                <span class="material-symbols-outlined cursor-move" x-sort:handle>drag_indicator</span>
             {% else %}
                 <span class="-mr-3" x-sort:handle></span>
             {% endif %}

unfold/templates/unfold/helpers/empty_results.html

@@ -3,10 +3,12 @@
 {% url cl.opts|admin_urlname:"add" as add_url %}
 {% blocktranslate with name=cl.opts.verbose_name asvar title %}Add {{ name }}{% endblocktranslate %}
 
-<div class="bg-white border border-base-200 flex flex-col items-center px-8 py-24 rounded-default shadow-xs dark:bg-base-900 dark:border-base-800">
-    <div class="border border-base-300 border-dashed flex h-24 items-center justify-center mb-8 rounded-full w-24 dark:border-base-700">
-        <span class="material-symbols-outlined text-base-500 text-5xl! dark:text-base-400">inbox</span>
-    </div>
+<div class="bg-white border border-base-200 flex flex-col items-center px-8 shadow-xs dark:bg-base-900 dark:border-base-800 {% if cl.search_fields %}rounded-b-default{% else %}rounded-default{% endif %} {% if cl.is_dataset %}py-16{% else %}py-24{% endif %}">
+    {% if not cl.is_dataset %}
+        <div class="border border-base-300 border-dashed flex h-24 items-center justify-center mb-8 rounded-full w-24 dark:border-base-700">
+            <span class="material-symbols-outlined text-base-500 text-5xl! dark:text-base-400">inbox</span>
+        </div>
+    {% endif %}
 
     <h2 class="font-semibold mb-1 text-xl text-font-important-light tracking-tight dark:text-font-important-dark">
         {% trans "No results found" %}

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

@@ -24,6 +24,12 @@
                     {% endif %}
                 </a>
             {% endfor %}
+
+            {% for dataset in datasets_list %}
+                <a href="#dataset-{{ dataset.model_name }}" x-on:click="activeTab = 'dataset-{{ dataset.model_name }}'" x-bind:class="{'active': activeTab == 'dataset-{{ dataset.model_name }}'}">
+                    {{ dataset.model_verbose_name|capfirst }}
+                </a>
+            {% endfor %}
         {% endif %}
     </nav>
 {% endif %}