django-unfold 0.42.0__py3-none-any.whl → 0.43.0__py3-none-any.whl

unfold/templates/admin/change_form.html

@@ -61,6 +61,10 @@
     <div id="content-main">
         {% block form_before %}{% endblock %}
 
+        {% if adminform.model_admin.change_form_outer_before_template %}
+            {% include adminform.model_admin.change_form_outer_before_template %}
+        {% endif %}
+
         <form {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}" {% endif %}method="post" id="{{ opts.model_name }}_form" {% if adminform.model_admin.warn_unsaved_form %}class="warn-unsaved-form"{% endif %} novalidate>
             {% csrf_token %}
 
@@ -116,6 +120,10 @@
             </div>
         </form>
 
+        {% if adminform.model_admin.change_form_outer_after_template %}
+            {% include adminform.model_admin.change_form_outer_after_template %}
+        {% endif %}
+
         {% block form_after %}{% endblock %}
     </div>
 {% endblock %}

unfold/templates/admin/nav_sidebar.html

@@ -1,22 +1,13 @@
 {% load i18n %}
 
 <div class="relative z-50">
-    <div @click="sidebarDesktopOpen = !sidebarDesktopOpen"
-         hx-get="{% url "admin:toggle_sidebar" %}"
-         hx-swap="none"
-         class="bg-white border cursor-pointer fixed h-6 hidden items-center justify-center rounded-full text-gray-500 top-5 -translate-x-1/2 w-6 z-50 xl:flex dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
-         :class="{'ml-6 rotate-180': !sidebarDesktopOpen, 'ml-72': sidebarDesktopOpen}">
-        <span class="material-symbols-outlined md-16">
-            first_page
-        </span>
-    </div>
-
     <div @click="sidebarMobileOpen = !sidebarMobileOpen"
          class="fixed bottom-0 bg-gray-700 cursor-pointer flex items-center left-0 mb-2 ml-2 justify-center px-2 py-1 rounded-full shadow-sm text-xs text-white uppercase z-50 xl:hidden"
          :class="{'ml-72 -translate-x-1/2': sidebarMobileOpen}">
         {% trans "Menu" %}
     </div>
 
+
     <div :class="{'xl:block': sidebarDesktopOpen, 'xl:hidden': !sidebarDesktopOpen, 'max-xl:fixed': sidebarMobileOpen, 'hidden': !sidebarMobileOpen }">
         {% include "unfold/helpers/navigation.html" %}
     </div>

unfold/templates/unfold/change_list_filter.html

@@ -46,11 +46,9 @@
                 {% endfor %}
 
                 {% if cl.model_admin.list_filter_submit %}
-                    <div class="bottom-4 absolute left-4 right-4 {% if not cl.model_admin.list_filter_sheet %}2xl:left-0 2xl:right-0 2xl:relative 2xl:mt-8{% endif %}">
-                        <button type="submit" class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded-md self-end text-sm text-white w-full">
-                            {% trans "Apply Filters" %}
-                        </button>
-                    </div>
+                    <button type="submit" class="bg-primary-600 block border border-transparent font-medium mb-4 mt-8 px-3 py-2 rounded-md self-end text-sm text-white w-full">
+                        {% trans "Apply Filters" %}
+                    </button>
                     </form>
                 {% endif %}
             </div>

unfold/templates/unfold/components/card.html

@@ -1,6 +1,6 @@
 <div class="border flex flex-col flex-grow overflow-hidden p-6 relative rounded-md shadow-sm dark:border-gray-800 {% if class %} {{ class }}{% endif %}">
     {% if title %}
-        <h2 class="border-b font-semibold mb-6 -mt-2 -mx-6 pb-4 px-6 text-font-important-light dark:text-font-important-dark dark:border-gray-800">
+        <h2 class="bg-gray-50 border-b font-semibold mb-6 -mt-6 -mx-6 py-4 px-6 text-font-important-light dark:text-font-important-dark dark:border-gray-800 dark:bg-white/[.02]">
             {{ title }}
         </h2>
     {% endif %}

unfold/templates/unfold/components/chart/cohort.html

@@ -0,0 +1,59 @@
+<div class="overflow-auto w-full" data-simplebar>
+    <table class="w-full">
+        <thead>
+            <tr>
+                <th></th>
+
+                {% for header in data.headers %}
+                    <th class="font-normal px-3 pb-2.5 text-left ">
+                        <div class="font-semibold text-font-important-light truncate dark:text-font-important-dark">
+                            {{ header.title }}
+                        </div>
+
+                        {% if header.subtitle %}
+                            <div class="mt-0.5 text-xs truncate">
+                                {{ header.subtitle }}
+                            </div>
+                        {% endif %}
+                    </th>
+                {% endfor %}
+            </tr>
+        </thead>
+
+        <tbody>
+            {% for row in data.rows %}
+                <tr class="h-full">
+                    <td>
+                        <div class="pr-3 py-2.5">
+                            <div class="font-semibold text-font-important-light dark:text-font-important-dark">
+                                {{ row.header.title }}
+                            </div>
+
+                            {% if row.header.subtitle %}
+                                <div class="mt-0.5 text-xs">
+                                    {{ row.header.subtitle }}
+                                </div>
+                            {% endif %}
+                        </div>
+                    </td>
+
+                    {% for col in row.cols %}
+                        <td class="h-full">
+                            <div class="flex flex-col h-full justify-center px-3 py-2.5 rounded-md {% if col.color %}{{ col.color }}{% else %}bg-gray-50 border border-dashed dark:bg-gray-800 dark:border-gray-700{% endif %}">
+                                <span>
+                                    {{ col.value }}
+                                </span>
+
+                                {% if col.subtitle %}
+                                    <span class="mt-0.5">
+                                        {{ col.subtitle }}
+                                    </span>
+                                {% endif %}
+                            </div>
+                        </td>
+                    {% endfor %}
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>

unfold/templates/unfold/components/navigation.html

@@ -1,5 +1,5 @@
 {% if items %}
-    <nav class="bg-gray-100 flex gap-2 mb-8 p-1 rounded text-sm dark:bg-white/[.04]{% if class %} {{ class }}{% endif %}">
+    <nav class="bg-gray-100 flex gap-2 p-1 rounded text-sm dark:bg-white/[.04]{% if class %} {{ class }}{% endif %}">
         {% for item in items %}
             <a href="{{ item.link }}" class="flex flex-row font-medium items-center px-2.5 py-1 rounded {% if item.active %} bg-white shadow-sm text-font-important-light hover:bg-white dark:bg-gray-900 dark:hover:bg-gray-900 dark:text-font-important-dark{% else %}text-font-subtle-light dark:text-font-subtle-dark hover:bg-gray-700/[.04]  dark:hover:bg-white/[.04]{% endif %}">
                 {% if item.icon %}

unfold/templates/unfold/components/tracker.html

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

unfold/templates/unfold/helpers/messages/debug.html

@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-400">
+    {{ message }}
+</p>

unfold/templates/unfold/helpers/messages/error.html

@@ -1,13 +1,15 @@
 {% load i18n %}
 
-{% if errors or error %}
-    <p class="errornote bg-red-100 mb-8 text-red-600 px-3 py-3 rounded-md text-sm dark:bg-red-500/20 dark:border-red-500/20 dark:text-red-500 group-[.inline-tabular]:mb-0 group-[.inline-tabular]:mt-3 group-[.inline-tabular]:mx-3 group-[.inline-stacked]:mb-3 group-[.inline-stacked]:mt-3 group-[.inline-stacked]:mx-3">
+{% if errors or error or message %}
+    <div class="errornote mb-3 px-3 py-3 rounded-md group-[.inline-tabular]:mb-0 group-[.inline-tabular]:mt-3 group-[.inline-tabular]:mx-3 group-[.inline-stacked]:mb-3 group-[.inline-stacked]:mt-3 group-[.inline-stacked]:mx-3 bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400">
         {% if error %}
             {{ error }}
+        {% elif message %}
+            {{ message }}
         {% else %}
             {% for error in errors %}
                 {{ error }}
             {% endfor %}
         {% endif %}
-    </p>
+    </div>
 {% endif %}

unfold/templates/unfold/helpers/messages/info.html

@@ -1,3 +1,3 @@
-<p class="bg-blue-50 mb-8 text-blue-500 px-3 py-3 rounded-md text-sm dark:bg-blue-500/20 dark:border-blue-500/10">
-    {{ message|safe }}
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400">
+    {{ message }}
 </p>

unfold/templates/unfold/helpers/messages/success.html

@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400">
+    {{ message }}
+</p>

unfold/templates/unfold/helpers/messages/warning.html

@@ -0,0 +1,3 @@
+<p class="mb-3 px-3 py-3 rounded-md text-sm last:mb-8 bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400">
+    {{ message }}
+</p>

unfold/templates/unfold/helpers/messages.html

@@ -1,19 +1,18 @@
 {% if messages %}
-    <ul>
+    <ul class="flex flex-col gap-4 mb-8">
         {% for message in messages %}
-            <li class="{{ message.tags }} mb-3 px-3 py-3 rounded-md text-sm last:mb-8
-                       {% if message.tags == 'success' %}
-                           bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400
-                       {% elif message.tags == 'warning' %}
-                           bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400
-                       {% elif message.tags == 'error' %}
-                           bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400
-                       {% elif message.tags == 'info' %}
-                           bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400
-                       {% else %}
-                           bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-400
-                       {% endif %}">
-                {{ message|capfirst }}
+            <li class="*:!mb-0">
+                {% if message.tags == 'info' %}
+                    {% include "unfold/helpers/messages/info.html" with message=message %}
+                {% elif message.tags == 'success' %}
+                    {% include "unfold/helpers/messages/success.html" with message=message %}
+                {% elif message.tags == 'warning' %}
+                    {% include "unfold/helpers/messages/warning.html" with message=message %}
+                {% elif message.tags == 'error' %}
+                    {% include "unfold/helpers/messages/error.html" with message=message %}
+                {% else %}
+                    {% include "unfold/helpers/messages/debug.html" with message=message %}
+                {% endif %}
             </li>
         {% endfor %}
     </ul>

unfold/templates/unfold/helpers/welcomemsg.html

@@ -1,6 +1,14 @@
 {% load i18n %}
 
-<div class="flex-grow font-semibold min-w-0 mr-3">
+<div class="flex flex-row flex-grow font-semibold items-center min-w-0 mr-3">
+    <span class="cursor-pointer hidden flex-row items-center text-sm xl:flex">
+        <span class="material-symbols-outlined" hx-get="{% url "admin:toggle_sidebar" %}" hx-swap="none" x-on:click="sidebarDesktopOpen = !sidebarDesktopOpen">
+            dock_to_right
+        </span>
+    </span>
+
+    <span class="hidden bg-gray-200 h-5 mx-3 w-px xl:block dark:bg-gray-700"></span>
+
     <h1 class="overflow-hidden text-ellipsis text-sm whitespace-nowrap xl:text-base text-font-important-light dark:text-font-important-dark">
         {% if content_title %}
             <span class="tracking-tight">

unfold/templates/unfold/layouts/skeleton.html

@@ -58,7 +58,7 @@
 
         {% if colors %}
             <style>
-                html {
+                :root {
                     {% for name, weights in colors.items %}
                         {% for weight, value in weights.items %}
                             --color-{{ name }}-{{ weight }}: {{ value }};

unfold/templates/unfold/widgets/clearable_file_input.html

@@ -21,7 +21,7 @@
         </div>
     {% endif %}
 
-    <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 flex-grow font-medium px-3 py-2 text-ellipsis dark:bg-gray-900">
+    <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 flex-grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-gray-900">
 
     <div class="flex flex-none items-center leading-none self-stretch">
         <div class="hidden">

unfold/templates/unfold/widgets/clearable_file_input_small.html

@@ -14,7 +14,7 @@
             </div>
         {% endif %}
 
-        <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 flex-grow font-medium px-3 py-2 text-ellipsis dark:bg-gray-900">
+        <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 flex-grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-gray-900">
 
         <div class="flex flex-none items-center leading-none self-stretch">
             <div class="hidden">

unfold/templatetags/unfold.py

@@ -10,6 +10,8 @@ from django.template.base import NodeList, Parser, Token, token_kwargs
 from django.template.loader import render_to_string
 from django.utils.safestring import SafeText
 
+from unfold.components import ComponentRegistry
+
 register = Library()
 
 
@@ -154,24 +156,37 @@ class RenderComponentNode(template.Node):
         template_name: str,
         nodelist: NodeList,
         extra_context: Optional[Dict] = None,
+        include_context: bool = False,
         *args,
         **kwargs,
     ):
         self.template_name = template_name
         self.nodelist = nodelist
         self.extra_context = extra_context or {}
+        self.include_context = include_context
         super().__init__(*args, **kwargs)
 
     def render(self, context: RequestContext) -> str:
-        result = self.nodelist.render(context)
+        values = {
+            name: var.resolve(context) for name, var in self.extra_context.items()
+        }
+
+        values.update(
+            {
+                "children": self.nodelist.render(context),
+            }
+        )
 
-        ctx = {name: var.resolve(context) for name, var in self.extra_context.items()}
-        ctx.update({"children": result})
+        if "component_class" in values:
+            values = ComponentRegistry.create_instance(
+                values["component_class"], request=context.request
+            ).get_context_data(**values)
+
+        if self.include_context:
+            values.update(context.flatten())
 
         return render_to_string(
-            self.template_name,
-            request=context.request,
-            context=ctx,
+            self.template_name, request=context.request, context=values
         )
 
 
@@ -202,17 +217,21 @@ def do_component(parser: Parser, token: Token) -> str:
                 raise TemplateSyntaxError(
                     '"with" in {bits[0]} tag needs at least one keyword argument.'
                 )
+        elif option == "include_context":
+            value = True
         else:
             raise TemplateSyntaxError(f"Unknown argument for {bits[0]} tag: {option}.")
 
         options[option] = value
 
+    include_context = options.get("include_context", False)
     nodelist = parser.parse(("endcomponent",))
     template_name = bits[1][1:-1]
+
     extra_context = options.get("with", {})
     parser.next_token()
 
-    return RenderComponentNode(template_name, nodelist, extra_context)
+    return RenderComponentNode(template_name, nodelist, extra_context, include_context)
 
 
 @register.filter