django-unfold 0.56.0__py3-none-any.whl → 0.57.0__py3-none-any.whl

unfold/styles.css

@@ -90,6 +90,10 @@
   font-size: 18px;
 }
 
+.errorlist {
+  @apply *:before:align-bottom *:before:content-['warning'] *:before:material-symbols-outlined *:before:mr-1;
+}
+
 [x-cloak] {
   @apply hidden!;
 }
@@ -153,50 +157,37 @@ table tr.selected th {
  Datetime
  *******************************************************/
 .datetimeshortcuts {
-  @apply absolute flex flex-row-reverse items-center right-0 text-[0px] top-px;
+  @apply absolute flex flex-row-reverse items-center right-px text-[0px] top-px;
 }
 
 .datetimeshortcuts a {
-  @apply text-[0px] text-base-400 transition hover:text-base-700;
+  @apply flex items-center h-9 text-[0px] text-base-400 transition hover:text-base-700;
 }
 
 .datetimeshortcuts a:first-child {
-  @apply hover:text-base-700 dark:text-base-500 dark:hover:text-base-200;
+  @apply hidden;
 }
 
 .datetimeshortcuts a:first-child:after {
-  @apply border-l border-base-200 flex h-9 items-center justify-center leading-none material-symbols-outlined py-2 text-center w-9 hover:text-base-700 dark:border-base-700 dark:hover:text-white;
-  content: "timer";
+  @apply content-['update'] flex h-9 items-center justify-center leading-none material-symbols-outlined px-3 py-2 text-center hover:text-base-700 dark:border-base-700 dark:hover:text-base-700;
 }
 
 .datetimeshortcuts a:first-child:after {
   @apply flex;
 }
 
+.clock-icon,
 .date-icon {
-  @apply block h-9 text-base-400 transition-all w-9 hover:text-base-700 dark:text-base-500 dark:hover:text-white;
-}
-
-.date-icon:after {
-  @apply border-l border-base-200 h-9 items-center justify-center leading-none material-symbols-outlined py-2 text-center w-9 hover:text-base-700 dark:border-base-700;
-  content: "edit";
+  @apply block text-base-400 transition-all hover:text-base-700 dark:text-base-500 dark:hover:text-base-200;
+  @apply after:border-base-200 after:material-symbols-outlined after:px-3 dark:after:border-base-700;
 }
 
 .date-icon:after {
-  @apply flex dark:hover:text-white;
-}
-
-.clock-icon {
-  @apply block h-9 ml-2 w-9 hover:text-base-700 dark:text-base-500 dark:hover:text-base-200;
+  content: "calendar_today";
 }
 
 .clock-icon:after {
-  @apply border-l border-base-200 h-9 items-center justify-center material-symbols-outlined py-2 text-base text-center w-9 hover:text-base-700 dark:border-base-700 dark:hover:text-white;
-  content: "edit";
-}
-
-.clock-icon:after {
-  @apply flex;
+  content: "schedule";
 }
 
 .timezonewarning {
@@ -381,7 +372,7 @@ h3 span:nth-child(3) {
 .select2-container.select2-container--admin-autocomplete
   .select2-selection--single
   .select2-selection__clear {
-  @apply flex items-center h-9 -mt-2 text-[0px];
+  @apply flex items-center h-9 -mt-2 text-[0px] after:text-base-400 hover:after:text-base-700 dark:hover:after:text-base-200 dark:after:text-base-500;
 }
 
 .select2-container.select2-container--admin-autocomplete
@@ -390,9 +381,7 @@ h3 span:nth-child(3) {
 .select2-container.select2-container--admin-autocomplete
   .select2-selection--single
   .select2-selection__clear:after {
-  @apply material-symbols-outlined text-base-500;
-  content: "close";
-  font-size: 14px;
+  @apply material-symbols-outlined transition-all content-['close'] text-[18px] ;
 }
 
 .select2-container.select2-container--admin-autocomplete
@@ -404,7 +393,7 @@ h3 span:nth-child(3) {
 .select2-container.select2-container--admin-autocomplete
   .select2-selection--single
   .select2-selection__arrow:after {
-  @apply left-0 leading-none m-0 material-symbols-outlined text-base-500 text-lg;
+  @apply left-0 leading-none m-0 material-symbols-outlined text-base-400 text-lg;
   content: "expand_more";
 }
 
@@ -464,9 +453,10 @@ h3 span:nth-child(3) {
 .select2-container.select2-container--admin-autocomplete
   .select2-selection--multiple
   .select2-selection__clear {
-  @apply m-0 mr-2 top-0;
+  @apply m-0 mr-3 top-0;
 }
 
+
 .select2-container.select2-container--admin-autocomplete
   .select2-selection--multiple
   .select2-selection__rendered {

unfold/templates/admin/actions.html

@@ -2,7 +2,7 @@
 
 <div id="changelist-actions" class="actions flex flex-col gap-3 text-white sm:flex-row sm:items-center lg:items-center {% if not cl.model_admin.list_fullwidth %}mx-auto{% endif %}"  x-bind:style="'width: ' + changeListWidth + 'px'">
     {% block actions %}
-        <div class="flex flex-row gap-2 lg:flex-row" x-data="{action: ''}">
+        <div class="group primary flex flex-row gap-2 lg:flex-row" x-data="{action: ''}">
             {% block actions-form %}
                 {% for field in action_form %}
                     {% if field.label %}

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

@@ -16,7 +16,7 @@
             {{ field.field }}
 
             {% if field.field.errors|length > 0 %}
-                <div class="mt-1 text-red-600 text-sm dark:text-red-500">
+                <div class="mt-2 text-red-600 text-xs dark:text-red-500">
                     {% for error in field.field.errors %}
                         {{ error }}
                     {% endfor %}

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 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 field.is_image %}inline-block [&_img]:rounded-default py-0!{% endif %}">{% if value %}{{ value }}{% elif field.contents %}{{ field.contents }}{% else %}-{% endif %}</div>

unfold/templates/unfold/helpers/fieldset_row_checkbox.html

@@ -16,7 +16,7 @@
             </div>
 
             {% if field.errors %}
-                <div class="mt-1 text-red-600 text-sm dark:text-red-500">
+                <div class="mt-2 text-red-600 text-xs dark:text-red-500">
                     {{ field.errors }}
                 </div>
             {% endif %}
@@ -36,7 +36,7 @@
             {% endif %}
 
             {% if field.errors %}
-                <div class="mt-1 text-red-600 text-sm dark:text-red-500">
+                <div class="mt-2 text-red-600 text-xs dark:text-red-500">
                     {{ field.errors }}
                 </div>
             {% endif %}

unfold/templates/unfold/helpers/fieldset_row_field.html

@@ -2,7 +2,7 @@
     {{ field.label_tag }}
 </div>
 
-<div class="grow">
+<div class="grow relative">
     {% if field.is_readonly %}
         {% include "unfold/helpers/field_readonly_value.html" %}
     {% else %}
@@ -14,7 +14,7 @@
     {% endif %}
 
     {% if field.errors %}
-        <div class="mt-1 text-red-600 text-sm dark:text-red-500">
+        <div class="mt-2 text-red-600 text-xs dark:text-red-500">
             {{ field.errors }}
         </div>
     {% endif %}

unfold/templates/unfold/helpers/form_errors.html

@@ -1,5 +1,5 @@
 {% if errors %}
-    <div class="mt-1 text-red-600 text-sm dark:text-red-500">
+    <div class="mt-2 text-red-600 text-xs dark:text-red-500">
         <ul>
             {% for error in errors %}
                 <li>

unfold/templates/unfold/helpers/messages/errornote.html

@@ -2,10 +2,6 @@
 
 {% if errors %}
     <p class="errornote bg-red-100 mb-8 text-red-700 px-3 py-3 rounded-default dark:bg-red-500/20 dark:border-red-500/20 dark:text-red-400">
-        {% if errors.items|length == 1 %}
-            {% translate "Please correct the error below." %}
-        {% else %}
-            {% translate "Please correct the errors below." %}
-        {% endif %}
+        {% blocktranslate count counter=errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
     </p>
 {% endif %}

unfold/templates/unfold/layouts/skeleton.html

@@ -58,7 +58,7 @@
         {% endblock %}
     </head>
 
-    <body class="antialiased bg-base-50 font-sans text-font-default-light text-sm dark:bg-base-900 dark:text-font-default-dark {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{{% if opts %}activeTab: 'general',{% endif %} sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }" x-init="activeTab = {% if opts %}window.location.hash?.replace('#', '') || 'general'{% else %}''{% endif %}">
+    <body class="antialiased bg-base-50 font-sans text-font-default-light text-sm dark:bg-base-900 dark:text-font-default-dark {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{ {% if opts %}activeTab: 'general',{% endif %} sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }" x-init="activeTab = {% if opts %}window.location.hash?.replace('#', '') || 'general'{% else %}''{% endif %}">
         {% if colors %}
             <style id="unfold-theme-colors">
                 :root {

unfold/templates/unfold/widgets/clearable_file_input.html

@@ -24,18 +24,18 @@
     <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-base-900">
 
     <div class="bg-white flex flex-none items-center leading-none self-stretch dark:bg-base-900">
-        <div class="opacity-0 w-[0px]">
+        <div class="opacity-0 overflow-hidden w-[0px]">
             <input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %} />
         </div>
 
         {% if widget.is_initial %}
             <a href="{{ widget.value.url }}" class="border-r border-base-200 cursor-pointer text-base-400 px-3 hover:text-base-700 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200" target="_blank">
-                <span class="material-symbols-outlined">download</span>
+                <span class="block material-symbols-outlined">download</span>
             </a>
         {% endif %}
 
         <label for="{{ widget.attrs.id }}" class="cursor-pointer text-base-400 px-3 hover:text-base-700 dark:text-base-500 dark:hover:text-base-200">
-            <span class="material-symbols-outlined">upload</span>
+            <span class="block material-symbols-outlined">upload</span>
         </label>
     </div>
 </div>

unfold/templates/unfold/widgets/clearable_file_input_small.html

@@ -17,7 +17,7 @@
         <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-base-900">
 
         <div class="flex flex-none items-center leading-none self-stretch">
-            <div class="opacity-0 w-[0px]">
+            <div class="opacity-0 overflow-hidden w-[0px]">
                 <input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %} />
             </div>
 

unfold/templates/unfold/widgets/select.html

@@ -0,0 +1,9 @@
+<div class="grow relative max-w-2xl">
+    <select name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% for group_name, group_choices, group_index in widget.optgroups %}{% if group_name %}
+        <optgroup label="{{ group_name }}">{% endif %}{% for option in group_choices %}
+            {% include option.template_name with widget=option %}{% endfor %}{% if group_name %}
+                </optgroup>{% endif %}{% endfor %}
+    </select>
+
+    <span class="material-symbols-outlined absolute group-[.primary]:text-white -ml-[31px] pointer-events-none text-base-400 top-0 top-1/2 hover:text-base-700 dark:text-base-500 dark:hover:text-base-200 -translate-y-1/2">expand_more</span>
+</div>

unfold/templates/unfold_crispy/errors_formset.html

@@ -0,0 +1,3 @@
+{% if formset.non_form_errors %}
+    {% include "unfold/helpers/messages/error.html" with errors=formset.non_form_errors %}
+{% endif %}

unfold/templates/unfold_crispy/field.html

@@ -3,7 +3,7 @@
 {% if field.is_hidden %}
     {{ field }}
 {% else %}
-    <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="group {% if tag == "td" %}align-top border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden px-3 py-3 text-left dark:border-base-800 dark:before:text-font-important-dark{% endif%} {% if field.errors %}errors{% endif %} {% if field_class %} {{ field_class }}{% endif %} {% if field|is_checkbox and tag == "td" %}flex flex-row gap-2 h-[38px] items-center{% else %}{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
+    <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="group {% if tag == "td" %}align-top border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden px-3 py-3 text-left dark:border-base-800 dark:before:text-font-important-dark{% endif%} {% if field.errors %}errors{% endif %} {% if field_class %} {{ field_class }}{% endif %} {% if field|is_checkbox and tag == "td" %}flex flex-row gap-2 items-center{% else %}{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
     {% if field.label and not field|is_checkbox and form_show_labels %}
         <label {% if field.id_for_label %}for="{{ field.id_for_label }}"{% endif %} class="block font-semibold mb-2 text-font-important-light text-sm dark:text-font-important-dark {% if label_class %} {{ label_class }}{% endif %}">
             {{ field.label }}{% if field.field.required %} <span class="asteriskField">*</span>{% endif %}

unfold/templates/unfold_crispy/inputs.html

@@ -1,5 +1,5 @@
 {% if inputs %}
-    <div class="border border-base-200 rounded-default flex flex-col gap-2 justify-end p-3 lg:flex-row dark:border-base-800 {{ field_class }}">
+    <div class="flex flex-col gap-2 justify-end lg:flex-row {{ field_class }}">
         {% for input in inputs %}
             {% include "unfold_crispy/layout/baseinput.html" %}
         {% endfor %}

unfold/templates/unfold_crispy/layout/field_errors.html

@@ -1,7 +1,7 @@
 {% if form_show_errors and field.errors %}
-    {% for error in field.errors %}
-        <span id="error_{{ forloop.counter }}_{{ field.auto_id }}" class="block text-red-600 text-xs mt-1 dark:text-red-500">
-            {{ error }}
-        </span>
-    {% endfor %}
+    <ul class="errorlist">
+        {% for error in field.errors %}
+            <li id="error_{{ forloop.counter }}_{{ field.auto_id }}" class="mt-2 text-red-600 text-xs dark:text-red-500">{{ error }}</li>
+        {% endfor %}
+    </ul>
 {% endif %}

unfold/templates/unfold_crispy/layout/hr.html

@@ -0,0 +1,13 @@
+<div class="flex flex-row justify-center items-center gap-4 my-4">
+    {% if title %}
+        <span class="bg-base-200 grow h-px"></span>
+
+        {% if title %}
+            <span>
+                {{ title }}
+            </span>
+        {% endif %}
+    {% endif %}
+
+    <span class="bg-base-200 grow h-px"></span>
+</div>

unfold/templates/unfold_crispy/layout/table_inline_formset.html

@@ -9,7 +9,9 @@
         {% csrf_token %}
     {% endif %}
 
-    <div class="overflow-x-auto border border-base-200 rounded-default shadow-xs dark:border-base-800" {% if form_id %} id="{{ form_id }}"{% endif %}>
+    {% include "unfold_crispy/errors_formset.html" %}
+
+    <div class="overflow-x-auto border border-base-200 mb-8 rounded-default shadow-xs dark:border-base-800" {% if form_id %} id="{{ form_id }}"{% endif %}>
         {{ formset.management_form|crispy }}
 
         <table class="w-full">
@@ -66,10 +68,10 @@
                 </tbody>
             {% endif %}
         </table>
-
-        {% include "unfold_crispy/inputs.html" %}
     </div>
 
+    {% include "unfold_crispy/inputs.html" %}
+
     {% if formset_tag %}
         </form>
     {% endif %}

unfold/templates/unfold_crispy/whole_uni_formset.html

@@ -0,0 +1,30 @@
+{% load crispy_forms_tags %}
+{% load crispy_forms_utils %}
+
+{% specialspaceless %}
+    {% if formset_tag %}
+        <form {{ flat_attrs }} method="{{ form_method }}" {% if formset.is_multipart %} enctype="multipart/form-data"{% endif %}>
+    {% endif %}
+    {% if formset_method|lower == 'post' and not disable_csrf %}
+        {% csrf_token %}
+    {% endif %}
+
+    <div>
+        {{ formset.management_form|crispy }}
+    </div>
+
+    {% include "unfold_crispy/errors_formset.html" %}
+
+    {% for form in formset %}
+        {% include "unfold_crispy/display_form.html" %}
+    {% endfor %}
+
+    {% if inputs %}
+        <div class="form-actions">
+            {% for input in inputs %}
+                {% include "unfold_crispy/layout/baseinput.html" %}
+            {% endfor %}
+        </div>
+    {% endif %}
+    {% if formset_tag %}</form>{% endif %}
+{% endspecialspaceless %}

unfold/widgets.py

@@ -86,6 +86,7 @@ BASE_CLASSES = [
     "dark:group-[.errors]:border-red-500",
     "dark:focus:group-[.errors]:outline-red-500",
     "dark:scheme-dark",
+    "group-[.primary]:border-transparent",
 ]
 
 BASE_INPUT_CLASSES = [
@@ -633,6 +634,8 @@ class UnfoldAdminBigIntegerFieldWidget(AdminBigIntegerFieldWidget):
 
 
 class UnfoldAdminNullBooleanSelectWidget(NullBooleanSelect):
+    template_name = "unfold/widgets/select.html"
+
     def __init__(self, attrs=None):
         if attrs is None:
             attrs = {}
@@ -644,6 +647,8 @@ class UnfoldAdminNullBooleanSelectWidget(NullBooleanSelect):
 
 
 class UnfoldAdminSelectWidget(Select):
+    template_name = "unfold/widgets/select.html"
+
     def __init__(self, attrs=None, choices=()):
         if attrs is None:
             attrs = {}
@@ -690,6 +695,31 @@ class UnfoldAdminSelectMultipleWidget(SelectMultiple):
         super().__init__(attrs, choices)
 
 
+class UnfoldAdminSelect2MultipleWidget(SelectMultiple):
+    def __init__(self, attrs=None, choices=()):
+        if attrs is None:
+            attrs = {}
+
+        attrs["data-theme"] = "admin-autocomplete"
+        attrs["class"] = "unfold-admin-autocomplete admin-autocomplete"
+
+        super().__init__(attrs, choices)
+
+    class Media:
+        js = (
+            "admin/js/vendor/jquery/jquery.js",
+            "admin/js/vendor/select2/select2.full.js",
+            "admin/js/jquery.init.js",
+            "unfold/js/select2.init.js",
+        )
+        css = {
+            "screen": (
+                "admin/css/vendor/select2/select2.css",
+                "admin/css/autocomplete.css",
+            ),
+        }
+
+
 class UnfoldAdminRadioSelectWidget(AdminRadioSelect):
     template_name = "unfold/widgets/radio.html"
     option_template_name = "unfold/widgets/radio_option.html"