django-cfg 1.4.48__py3-none-any.whl → 1.5.7__py3-none-any.whl

django_cfg/modules/django_admin/templates/django_admin/documentation_block.html

@@ -0,0 +1,303 @@
+{% load static %}
+{# Multi-Section Markdown Documentation Block with Management Commands and Mermaid Support #}
+
+{# Load Mermaid resources once per page #}
+{% if documentation_config.enable_plugins and not mermaid_loaded %}
+    {{ mermaid_resources|safe }}
+    {% with mermaid_loaded=True %}{% endwith %}
+{% endif %}
+
+{% if documentation_config and documentation_sections or management_commands %}
+<div class="mb-6">
+    <div class="{% if not is_popup %}max-w-full{% endif %}">
+        {# Main documentation container with unfold semantic classes #}
+        <div class="bg-base-50 dark:bg-base-950 border border-base-200 dark:border-base-700 rounded-default shadow-xs overflow-hidden">
+
+            {# Header with semantic font colors #}
+            <div class="px-5 py-4 border-b border-base-200 dark:border-base-800 bg-base-100 dark:bg-base-900">
+                <div class="flex items-center gap-3">
+                    <span class="material-symbols-outlined text-xl text-primary-600 dark:text-primary-400">description</span>
+                    <h2 class="text-base font-semibold text-font-important-light dark:text-font-important-dark m-0">
+                        {{ documentation_config.title }}
+                    </h2>
+                    {% if documentation_sections %}
+                    <span class="ml-auto text-xs font-medium text-font-subtle-light dark:text-font-subtle-dark px-2.5 py-1 bg-base-100 dark:bg-base-800 rounded-full">
+                        {{ documentation_sections|length }} section{{ documentation_sections|length|pluralize }}
+                    </span>
+                    {% endif %}
+                </div>
+            </div>
+
+            {# Management Commands Section (if any) #}
+            {% if management_commands %}
+            <details class="group border-b border-base-200 dark:border-base-800">
+                <summary class="cursor-pointer px-5 py-3.5 bg-white dark:bg-base-900 hover:bg-base-700/[.04] dark:hover:bg-white/[.04] transition-all duration-200 flex items-center gap-3 select-none list-none">
+                    {# Terminal icon #}
+                    <span class="material-symbols-outlined text-base text-font-default-light dark:text-font-default-dark group-open:rotate-90 group-open:text-primary-600 dark:group-open:text-primary-400 transition-all duration-200">
+                        terminal
+                    </span>
+
+                    {# Title #}
+                    <span class="text-sm font-medium text-font-default-light dark:text-font-default-dark flex-1">
+                        Management Commands
+                    </span>
+
+                    {# Badge #}
+                    <span class="text-xs font-medium text-font-subtle-light dark:text-font-subtle-dark px-2.5 py-1 bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400 rounded-full">
+                        {{ management_commands|length }} command{{ management_commands|length|pluralize }}
+                    </span>
+
+                    {# Expand/collapse hint #}
+                    <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark group-open:hidden">
+                        Click to expand
+                    </span>
+                    <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark hidden group-open:inline">
+                        Click to collapse
+                    </span>
+                </summary>
+
+                {# Commands list #}
+                <div class="px-5 py-4 bg-white dark:bg-base-900">
+                    <div class="flex flex-col gap-3">
+                        {% for cmd in management_commands %}
+                        <div class="border border-base-200 dark:border-base-700 rounded-default p-4 bg-base-50 dark:bg-base-950 hover:border-primary-300 dark:hover:border-primary-700 transition-colors duration-200">
+                            {# Command name #}
+                            <div class="flex items-start gap-3 mb-2">
+                                <span class="material-symbols-outlined text-sm text-primary-600 dark:text-primary-400 mt-0.5">code</span>
+                                <div class="flex-1 min-w-0">
+                                    <code class="text-sm font-mono font-semibold text-font-important-light dark:text-font-important-dark">
+                                        python manage.py {{ cmd.name }}
+                                    </code>
+                                    {% if cmd.help %}
+                                    <p class="text-xs text-font-default-light dark:text-font-default-dark mt-1">
+                                        {{ cmd.help }}
+                                    </p>
+                                    {% endif %}
+                                </div>
+                            </div>
+
+                            {# Arguments #}
+                            {% if cmd.arguments %}
+                            <div class="mt-3 pt-3 border-t border-base-200 dark:border-base-700">
+                                <div class="text-xs font-medium text-font-subtle-light dark:text-font-subtle-dark mb-2">Arguments:</div>
+                                <div class="space-y-1.5">
+                                    {% for arg in cmd.arguments %}
+                                    <div class="flex items-start gap-2 text-xs">
+                                        <code class="font-mono text-primary-600 dark:text-primary-400 font-medium">{{ arg.name }}</code>
+                                        {% if arg.required %}
+                                        <span class="px-1.5 py-0.5 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded text-[10px] font-medium">required</span>
+                                        {% endif %}
+                                        {% if arg.help %}
+                                        <span class="text-font-subtle-light dark:text-font-subtle-dark">- {{ arg.help }}</span>
+                                        {% endif %}
+                                        {% if arg.default %}
+                                        <span class="text-font-subtle-light dark:text-font-subtle-dark ml-auto">default: <code class="text-[10px]">{{ arg.default }}</code></span>
+                                        {% endif %}
+                                    </div>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                            {% endif %}
+                        </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </details>
+            {% endif %}
+
+            {# Documentation Sections #}
+            {% if documentation_sections %}
+            <div class="divide-y divide-base-200 dark:divide-base-800">
+                {% for section in documentation_sections %}
+                {% if documentation_config.collapsible %}
+                {# Collapsible section #}
+                <details class="group"{% if section.default_open %} open{% endif %}>
+                    <summary class="cursor-pointer px-5 py-3.5 bg-white dark:bg-base-900 hover:bg-base-700/[.04] dark:hover:bg-white/[.04] transition-all duration-200 flex items-center gap-3 select-none list-none">
+                        {# Chevron icon #}
+                        <span class="material-symbols-outlined text-base text-font-default-light dark:text-font-default-dark group-open:rotate-90 group-open:text-primary-600 dark:group-open:text-primary-400 transition-all duration-200">
+                            chevron_right
+                        </span>
+
+                        {# Section title #}
+                        <span class="text-sm font-medium text-font-default-light dark:text-font-default-dark flex-1">
+                            {{ section.title }}
+                        </span>
+
+                        {# Expand/collapse hint #}
+                        <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark group-open:hidden">
+                            Click to expand
+                        </span>
+                        <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark hidden group-open:inline">
+                            Click to collapse
+                        </span>
+                    </summary>
+
+                    {# Section content #}
+                    <div class="p-5 bg-white dark:bg-base-900">
+                        <div class="border border-base-200 dark:border-base-700 rounded-default p-4 bg-white dark:bg-base-950 prose prose-sm dark:prose-invert max-w-none overflow-auto"
+                             {% if documentation_config.max_height %}style="max-height: {{ documentation_config.max_height }};"{% endif %}>
+                            {{ section.content|safe }}
+                        </div>
+                    </div>
+                </details>
+                {% else %}
+                {# Non-collapsible section #}
+                <div class="bg-white dark:bg-base-900">
+                    {% if section.title != documentation_config.title %}
+                    <div class="px-5 py-3 bg-base-50 dark:bg-base-950 border-b border-base-200 dark:border-base-800">
+                        <h3 class="text-sm font-medium text-font-important-light dark:text-font-important-dark m-0">
+                            {{ section.title }}
+                        </h3>
+                    </div>
+                    {% endif %}
+                    <div class="p-5">
+                        <div class="border border-base-200 dark:border-base-700 rounded-default p-4 bg-white dark:bg-base-950 prose prose-sm dark:prose-invert max-w-none overflow-auto"
+                             {% if documentation_config.max_height %}style="max-height: {{ documentation_config.max_height }};"{% endif %}>
+                            {{ section.content|safe }}
+                        </div>
+                    </div>
+                </div>
+                {% endif %}
+                {% endfor %}
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+{# Enhanced dark mode prose styles with unfold semantic colors #}
+<style>
+    /* Unfold semantic dark mode prose styles */
+    .dark .prose-invert {
+        --tw-prose-body: rgb(var(--color-base-300));
+        --tw-prose-headings: rgb(var(--color-base-100));
+        --tw-prose-lead: rgb(var(--color-base-400));
+        --tw-prose-links: rgb(96 165 250);
+        --tw-prose-bold: rgb(var(--color-base-100));
+        --tw-prose-counters: rgb(var(--color-base-400));
+        --tw-prose-bullets: rgb(var(--color-base-500));
+        --tw-prose-hr: rgb(var(--color-base-700));
+        --tw-prose-quotes: rgb(var(--color-base-100));
+        --tw-prose-quote-borders: rgb(var(--color-base-700));
+        --tw-prose-captions: rgb(var(--color-base-400));
+        --tw-prose-code: rgb(var(--color-base-100));
+        --tw-prose-pre-code: rgb(var(--color-base-200));
+        --tw-prose-pre-bg: rgb(var(--color-base-950));
+        --tw-prose-th-borders: rgb(var(--color-base-700));
+        --tw-prose-td-borders: rgb(var(--color-base-700));
+    }
+
+    /* Light mode pre blocks */
+    .prose pre {
+        background-color: rgb(249, 250, 251) !important;
+        border: 1px solid rgb(229, 231, 235) !important;
+        color: rgb(17, 24, 39) !important;
+    }
+
+    .prose code {
+        background-color: rgb(243, 244, 246) !important;
+        color: rgb(17, 24, 39) !important;
+        padding: 0.125rem 0.25rem;
+        border-radius: 0.25rem;
+        font-size: 0.875em;
+    }
+
+    .prose pre code {
+        background-color: transparent !important;
+        padding: 0;
+        color: inherit !important;
+    }
+
+    /* Dark mode pre blocks */
+    .dark .prose-invert pre {
+        background-color: rgb(3, 7, 18) !important;
+        border: 1px solid rgb(55, 65, 81) !important;
+        color: rgb(229, 231, 235) !important;
+    }
+
+    .dark .prose-invert code {
+        background-color: rgb(31, 41, 55) !important;
+        color: rgb(243, 244, 246) !important;
+        padding: 0.125rem 0.25rem;
+        border-radius: 0.25rem;
+        font-size: 0.875em;
+    }
+
+    .dark .prose-invert pre code {
+        background-color: transparent !important;
+        padding: 0;
+        color: inherit !important;
+    }
+
+    /* Tables with semantic colors */
+    .dark .prose-invert table {
+        border-color: rgb(var(--color-base-700));
+    }
+
+    .dark .prose-invert thead {
+        border-bottom-color: rgb(var(--color-base-700));
+        background-color: rgb(var(--color-base-800));
+    }
+
+    .dark .prose-invert th,
+    .dark .prose-invert td {
+        border-color: rgb(var(--color-base-700));
+    }
+
+    .dark .prose-invert tbody tr {
+        border-bottom-color: rgb(var(--color-base-700));
+    }
+
+    .dark .prose-invert tbody tr:hover {
+        background-color: rgb(var(--color-base-800));
+    }
+
+    /* Links */
+    .dark .prose-invert a {
+        color: rgb(96 165 250) !important;
+    }
+
+    .dark .prose-invert a:hover {
+        color: rgb(147 197 253) !important;
+    }
+
+    /* Blockquotes with semantic colors */
+    .dark .prose-invert blockquote {
+        border-left-color: rgb(var(--color-base-700));
+        background-color: rgb(var(--color-base-800));
+        padding: 1rem;
+        border-radius: 0.375rem;
+    }
+
+    /* Lists */
+    .dark .prose-invert ul > li::marker,
+    .dark .prose-invert ol > li::marker {
+        color: rgb(var(--color-base-500));
+    }
+
+    /* Horizontal rules */
+    .dark .prose-invert hr {
+        border-color: rgb(var(--color-base-700));
+    }
+
+    /* Custom scrollbar with semantic colors */
+    .dark .prose-invert::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    .dark .prose-invert::-webkit-scrollbar-track {
+        background: rgb(var(--color-base-800));
+        border-radius: 4px;
+    }
+
+    .dark .prose-invert::-webkit-scrollbar-thumb {
+        background: rgb(var(--color-base-700));
+        border-radius: 4px;
+    }
+
+    .dark .prose-invert::-webkit-scrollbar-thumb:hover {
+        background: rgb(var(--color-base-600));
+    }
+</style>
+{% endif %}

django_cfg/modules/django_admin/templates/django_admin/markdown_docs_block.html

@@ -0,0 +1,37 @@
+{% load static %}
+{# Markdown Documentation Block Template #}
+{#
+Usage:
+    {% include "django_admin/markdown_docs_block.html" with
+        content=markdown_content
+        title="Documentation"
+        collapsible=True
+        default_open=False
+    %}
+#}
+
+<div class="mb-6">
+    {% if collapsible %}
+    <details class="group border border-base-200 dark:border-base-700 rounded-lg overflow-hidden bg-white dark:bg-base-800 shadow-sm hover:shadow-md transition-shadow"{% if default_open %} open{% endif %}>
+        <summary class="cursor-pointer px-4 py-3 bg-base-50 dark:bg-base-900 hover:bg-base-100 dark:hover:bg-base-800 transition-colors flex items-center gap-2 select-none">
+            <span class="material-symbols-outlined text-base text-primary-600 dark:text-primary-400 group-open:rotate-90 transition-transform">chevron_right</span>
+            <span class="font-semibold text-sm text-font-default-light dark:text-font-default-dark">{{ title|default:"Documentation" }}</span>
+            <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark ml-auto">{% if default_open %}Click to collapse{% else %}Click to expand{% endif %}</span>
+        </summary>
+        <div class="p-4 bg-white dark:bg-base-800"{% if max_height %} style="max-height: {{ max_height }}; overflow-y: auto;"{% endif %}>
+            {{ content|safe }}
+        </div>
+    </details>
+    {% else %}
+    <div class="border border-base-200 dark:border-base-700 rounded-lg overflow-hidden bg-white dark:bg-base-800 shadow-sm">
+        {% if title %}
+        <div class="px-4 py-3 bg-base-50 dark:bg-base-900 border-b border-base-200 dark:border-base-700">
+            <h3 class="font-semibold text-sm text-font-default-light dark:text-font-default-dark">{{ title }}</h3>
+        </div>
+        {% endif %}
+        <div class="p-4"{% if max_height %} style="max-height: {{ max_height }}; overflow-y: auto;"{% endif %}>
+            {{ content|safe }}
+        </div>
+    </div>
+    {% endif %}
+</div>

django_cfg/modules/django_admin/templates/django_admin/widgets/encrypted_field.html

@@ -0,0 +1,80 @@
+{% comment %}
+Template for encrypted text field with copy button.
+Based on unfold/widgets/text.html with added copy functionality.
+{% endcomment %}
+
+<div class="max-w-2xl relative w-full">
+    {% if widget.prefix %}
+        <span class="absolute left-3 top-0 bottom-0 flex items-center justify-center">
+            {{ widget.prefix }}
+        </span>
+    {% endif %}
+
+    {% if widget.prefix_icon %}
+        <span class="material-symbols-outlined absolute left-3 top-0 bottom-0 flex items-center justify-center text-base-400 dark:text-base-500">
+            {{ widget.prefix_icon }}
+        </span>
+    {% endif %}
+
+    {% include "django/forms/widgets/input.html" %}
+
+    {% if widget.suffix %}
+        <span class="absolute right-3 top-0 bottom-0 flex items-center justify-center">
+            {{ widget.suffix }}
+        </span>
+    {% endif %}
+
+    {% if widget.suffix_icon %}
+        <span class="material-symbols-outlined absolute right-3 top-0 bottom-0 flex items-center justify-center text-base-400 dark:text-base-500">
+            {{ widget.suffix_icon }}
+        </span>
+    {% endif %}
+
+    {% if widget.show_copy_button %}
+        <button
+            type="button"
+            onclick="copyEncryptedField(this)"
+            class="material-symbols-outlined absolute right-3 top-0 bottom-0 flex items-center justify-center text-base-400 hover:text-primary-600 dark:text-base-500 dark:hover:text-primary-500 cursor-pointer transition-colors"
+            title="Copy to clipboard"
+        >
+            content_copy
+        </button>
+    {% endif %}
+</div>
+
+<script>
+function copyEncryptedField(button) {
+    // Get the input field (previous sibling of button's parent)
+    const container = button.parentElement;
+    const input = container.querySelector('input');
+
+    if (!input || !input.value) {
+        return;
+    }
+
+    // Copy to clipboard
+    navigator.clipboard.writeText(input.value).then(() => {
+        // Visual feedback - change icon temporarily
+        const originalIcon = button.textContent;
+        button.textContent = 'check';
+        button.classList.add('text-green-600', 'dark:text-green-500');
+
+        // Reset after 2 seconds
+        setTimeout(() => {
+            button.textContent = originalIcon;
+            button.classList.remove('text-green-600', 'dark:text-green-500');
+        }, 2000);
+    }).catch(err => {
+        console.error('Failed to copy:', err);
+        // Show error feedback
+        const originalIcon = button.textContent;
+        button.textContent = 'error';
+        button.classList.add('text-red-600', 'dark:text-red-500');
+
+        setTimeout(() => {
+            button.textContent = originalIcon;
+            button.classList.remove('text-red-600', 'dark:text-red-500');
+        }, 2000);
+    });
+}
+</script>

django_cfg/modules/django_admin/templates/django_admin/widgets/encrypted_password.html

@@ -0,0 +1,62 @@
+{% comment %}
+Template for encrypted password field with copy button.
+Based on Django's default password widget with Unfold styling and copy button.
+{% endcomment %}
+
+<div class="max-w-2xl relative w-full">
+    {% include "django/forms/widgets/input.html" %}
+
+    {% if widget.show_copy_button %}
+        <button
+            type="button"
+            onclick="copyEncryptedPassword(this)"
+            class="material-symbols-outlined absolute right-3 top-0 bottom-0 flex items-center justify-center text-base-400 hover:text-primary-600 dark:text-base-500 dark:hover:text-primary-500 cursor-pointer transition-colors"
+            title="Copy to clipboard"
+        >
+            content_copy
+        </button>
+    {% endif %}
+</div>
+
+<script>
+function copyEncryptedPassword(button) {
+    // Get the input field (previous sibling of button's parent)
+    const container = button.parentElement;
+    const input = container.querySelector('input');
+
+    if (!input || !input.value) {
+        return;
+    }
+
+    // For password fields, we need to temporarily change type to text to get the real value
+    const originalType = input.type;
+    input.type = 'text';
+    const value = input.value;
+    input.type = originalType;
+
+    // Copy to clipboard
+    navigator.clipboard.writeText(value).then(() => {
+        // Visual feedback - change icon temporarily
+        const originalIcon = button.textContent;
+        button.textContent = 'check';
+        button.classList.add('text-green-600', 'dark:text-green-500');
+
+        // Reset after 2 seconds
+        setTimeout(() => {
+            button.textContent = originalIcon;
+            button.classList.remove('text-green-600', 'dark:text-green-500');
+        }, 2000);
+    }).catch(err => {
+        console.error('Failed to copy:', err);
+        // Show error feedback
+        const originalIcon = button.textContent;
+        button.textContent = 'error';
+        button.classList.add('text-red-600', 'dark:text-red-500');
+
+        setTimeout(() => {
+            button.textContent = originalIcon;
+            button.classList.remove('text-red-600', 'dark:text-red-500');
+        }, 2000);
+    });
+}
+</script>

django_cfg/modules/django_admin/utils/__init__.py

@@ -1,17 +1,47 @@
 """
-Display and badge utilities for Django Admin.
+Display and utility modules for Django Admin.
+
+Refactored structure with logical organization:
+- badges/ - Status badges, progress badges, counter badges
+- displays/ - User displays, money displays, datetime displays
+- html/ - HTML building utilities (organized by functionality)
+- markdown/ - Markdown rendering with Mermaid support
+- decorators.py - Admin field decorators
+- html_builder.py - Backward-compatible facade for self.html.* API
 """
 
+# Badges
 from .badges import CounterBadge, ProgressBadge, StatusBadge
+
+# Decorators
 from .decorators import (
     annotated_field,
     badge_field,
     computed_field,
     currency_field,
 )
+
+# Displays
 from .displays import DateTimeDisplay, MoneyDisplay, UserDisplay
+
+# HTML Builders (organized by functionality)
+from .html import (
+    BadgeElements,
+    BaseElements,
+    CodeElements,
+    CompositionElements,
+    FormattingElements,
+    KeyValueElements,
+    MarkdownIntegration,
+    ProgressElements,
+)
+
+# HtmlBuilder - Backward-compatible facade
 from .html_builder import HtmlBuilder
 
+# Markdown
+from .markdown import MarkdownRenderer
+
 __all__ = [
     # Display utilities
     "UserDisplay",
@@ -21,8 +51,19 @@ __all__ = [
     "StatusBadge",
     "ProgressBadge",
     "CounterBadge",
-    # HTML Builder
+    # HTML Builders (modular)
+    "BaseElements",
+    "CodeElements",
+    "BadgeElements",
+    "CompositionElements",
+    "FormattingElements",
+    "KeyValueElements",
+    "ProgressElements",
+    "MarkdownIntegration",
+    # HTML Builder (backward-compatible facade)
     "HtmlBuilder",
+    # Markdown Renderer
+    "MarkdownRenderer",
     # Decorators
     "computed_field",
     "badge_field",

django_cfg/modules/django_admin/utils/badges/__init__.py

@@ -0,0 +1,13 @@
+"""
+Badge utilities for Django Admin.
+
+Provides StatusBadge, ProgressBadge, and CounterBadge classes.
+"""
+
+from .status_badges import CounterBadge, ProgressBadge, StatusBadge
+
+__all__ = [
+    "StatusBadge",
+    "ProgressBadge",
+    "CounterBadge",
+]