PyPI - accrete - Versions diffs - 0.0.99__py3-none-any.whl → 0.0.109__py3-none-any.whl - Mend

accrete 0.0.99py3-none-any.whl → 0.0.109py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (254) hide show

accrete/contrib/ui/templates/ui/layout.html CHANGED Viewed

@@ -1,266 +1,209 @@
 <!doctype html>
 {% load static %}
 {% load i18n %}
-{% load accrete_ui %}
+{% load partials %}
+{% load ui %}
-<html lang="en" style="overflow: hidden" data-theme="light">
+<html lang="en" style="overflow: hidden">
 <head>
-{% block head %}
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    {% block favicon %}<link rel="icon" type="image/svg" href="{% static 'icons/accrete.svg' %}"/>{% endblock %}
-    {% block style %}
-        <link rel="stylesheet" type="text/css" href="{% static "css/accrete.css" %}?v=0.0.93">
+    {% block head %}
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        {% block favicon %}<link rel="icon" type="image/svg" href="{% static 'icons/Logo.svg' %}"/>{% endblock %}
+        <link rel="stylesheet" type="text/css" href="{% static "css/accrete.css" %}?v=1">
         <link rel="stylesheet" type="text/css" href="{% static "css/icons.css" %}">
         <link rel="stylesheet" type="text/css" href="{% static "css/fa.css" %}">
-    {% endblock %}
-    {% block script %}
+        <script src="{% static "js/filter.js" %}" type="text/javascript"></script>
         <script src="{% static "js/htmx.min.js" %}" defer type="text/javascript"></script>
-        <script src="{% static "js/ui.js" %}" defer type="text/javascript"></script>
         <script src="{% static "js/alpine-sort3.14.1.js" %}" defer type="text/javascript"></script>
         <script src="{% static "js/alpine3.14.1.js" %}" defer type="text/javascript"></script>
+        <script defer>
+            document.addEventListener("setTenant", function(evt){
+                document.body.setAttribute('data-tenant-id', evt.detail.value);
+            })
+            document.addEventListener('htmx:configRequest', function (evt) {
+                evt.detail.headers['X-TENANT-ID'] = getTenant();
+            })
+            document.addEventListener('htmx:afterRequest', function(evt) {
+                const url = new URL(window.location);
+                url.searchParams.set('tenant_id', document.body.getAttribute('data-tenant-id'));
+                history.replaceState(null, '', url);
+             })
+            function getTenant() {
+                return document.body.getAttribute('data-tenant-id')
+            }
+            window.addEventListener('DOMContentLoaded', (event) => {
+                const url = new URL(window.location);
+                if (!document.body.getAttribute('data-tenant-id') && url.searchParams.get('tenant_id')) {
+                    document.body.setAttribute('data-tenant-id', url.searchParams.get('tenant_id'));
+                }
+            })
+        </script>
+        <title>{% block title %}{{ title }} | HRP{% endblock %}</title>
     {% endblock %}
-    {% block title_tag %}<title id="head-page-title">{% block title %}{{ title }}{% endblock %}</title>{% endblock %}
-{% endblock %}
 </head>
+{% block body %}
+<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' data-tenant-id="{{ tenant.id }}" hx-boost="true" hx-history="false"
+      x-data="{ showPanel: false, openPanel() { if(window.innerWidth >= 1216) {this.showPanel = true}  } }"
+>
+    <nav id="navbar" class="navbar is-success is-fixed-top" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+            <div class="navbar-item is-hidden-widescreen pr-2" x-on:click.stop="$dispatch('toggle-panel')">
+                <button>
+                    <i class="fa fa-indent" x-show="!showPanel"></i>
+                    <i class="fa fa-outdent" x-show="showPanel"></i>
+                </button>
+            </div>
+            <div class="navbar-item is-unselectable"
+                 onclick="document.getElementById('tenant-quick-switch').classList.toggle('is-invisible')"
+            >
+                {{ request.tenant.name }}
+            </div>
+            <a id="navbar-burger" role="button" class="navbar-burger"
+               aria-label="menu" aria-expanded="false"
+               onclick="this.classList.toggle('is-active'); document.getElementById('navbar-menu').classList.toggle('is-active');"
+               x-on:click="showPanel = false"
+            >
+                {# Display hamburger menu on mobile #}
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+            </a>
+        </div>
-<body {% block body_attrs %}hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-boost="true" hx-history="false" {% endblock %}>
-    {% block body %}
-        {% block navbar %}
-            <nav id="navbar" class="navbar is-success is-fixed-top" role="navigation" aria-label="main navigation">
-                <div class="navbar-brand">
-                    {% block navbar_brand %}
-                        <div class="navbar-item is-unselectable"
-                             onclick="document.getElementById('tenant-quick-switch').classList.toggle('is-invisible')"
-                        >
-                            {{ request.tenant.name }}
-                        </div>
-                    {% endblock %}
-                    <a id="navbar-burger" role="button" class="navbar-burger"
-                       aria-label="menu" aria-expanded="false"
-                       onclick="this.classList.toggle('is-active'); document.getElementById('navbar-menu').classList.toggle('is-active');"
-                    >
-                        {# Display hamburger menu on mobile #}
-                        <span aria-hidden="true"></span>
-                        <span aria-hidden="true"></span>
-                        <span aria-hidden="true"></span>
-                        <span aria-hidden="true"></span>
-                    </a>
-                </div>
-                <div id="navbar-menu" class="navbar-menu is-fixed-top">
-                    <div class="navbar-start">
-                        {% block navbar_start %}
-                            {% combine_templates 'accrete_menu.html' %}
-                        {% endblock %}
-                    </div>
+        <div id="navbar-menu" class="navbar-menu is-fixed-top">
+            <div class="navbar-start">
+                {% combine_templates 'accrete_navbar.html' request %}
+            </div>
-                    <div class="navbar-end">
-                        {% block navbar_end %}
-                            <div class="navbar-item has-dropdown is-hoverable" onclick="this.classList.toggle('is-active');">
-                                <a class="navbar-link is-arrowless {% if request.member.name %}is-size-7 has-text-centered-desktop{% endif %}">
-                                    {% if request.member.name %}
-                                        {{ request.member }}
-                                    {% else %}
-                                        {{ user }}
-                                    {% endif %}
-                                </a>
-                                <div id="navbar-end-dropdown" class="navbar-dropdown is-right">
-                                    {% combine_templates 'accrete_navbar_end_dropdown.html' request=request %}
-                                </div>
-                            </div>
-                        {% endblock %}
+            <div class="navbar-end">
+                {% block navbar_end %}
+                    <div class="navbar-item has-dropdown" onclick="this.classList.toggle('is-active');">
+                        <a id="navbar-user-name" class="navbar-link is-arrowless">{{ user }}</a>
+                        <div id="navbar-end-dropdown" class="navbar-dropdown is-right">
+                            <a class="navbar-item" href="{% url 'teams:teams_list' %}">{% translate 'Teams' %}</a>
+                            <hr class="navbar-divider">
+                            <a class="navbar-item" href="{% url 'user:detail' %}">{% translate 'Preferences' %}</a>
+                            {% if request.user.is_staff %}
+                                <a class="navbar-item" hx-boost="false" href="/admin/">Admin</a>
+                            {% endif %}
+                            <hr class="navbar-divider">
+                            <a class="navbar-item" hx-post="{% url 'user:logout' %}">{% translate "Log out" %}</a>
+                        </div>
                     </div>
-                </div>
-            </nav>
-            <div id="tenant-quick-switch" class="navbar-brand-dropdown is-invisible box py-3 px-0 is-flex is-flex-direction-column" style="min-width: 200px">
-                {% for tenant in request.user.all_tenants %}
-                    <a class="navbar-brand-dropdown-item px-4 py-1 mb-1" href="{% block tenant_switch_url %}/{% endblock %}?tenant_id={{ tenant.id }}">
-                        <span class=""
-                           onclick="document.getElementById('tenant-quick-switch').classList.toggle('is-invisible')"
-                        >
-                            {{ tenant }}
-                        </span>
-                    </a>
-                {% endfor %}
+                {% endblock %}
             </div>
-        {% endblock %}
+        </div>
+    </nav>
+    <div class="is-flex" style="padding-top: var(--bulma-navbar-height); height: 100svh;" x-init="showPanel = window.innerWidth >= 1216;">
+        <div x-show="showPanel" >
+            <div id="action-panel" x-show="showPanel"
+                 @resize.debounce.100.window="openPanel()"
+                 @toggle-panel.window="showPanel = !showPanel"
+                 x-transition.duration.200ms
+            >
+                <nav class="px-1" style="height: 100%; overflow-y: auto; position: sticky; top: 0">
+                    {% block panel %}{% endblock %}
+                    {% if filter %}
+                        <div class="mt-4">
+                            <div class="mx-3 mb-1" style="border-bottom: 1px var(--bulma-grey) solid">
+                                <span>{% translate 'Filter' %}</span>
+                            </div>
+                            <div class="p-3">
+                                {% include 'ui/filter/filter.html' %}
+                            </div>
-        <div id="main" class="is-flex is-flex-direction-row" style="padding-top: var(--bulma-navbar-height); height: 100svh">
-            <div class="side-panel is-hidden-touch is-hidden-desktop-only is-hidden-widescreen-only p-0">
-                <nav class="pb-5" style="height: 100%; overflow-y: auto; position: sticky; top: 0">
-                    {% if list_page.paginator %}
-                        <div class="side-panel-action">
-                            {% include 'ui/partials/pagination_list.html' %}
                         </div>
                     {% endif %}
-                    {% if detail_page %}
-                        <div class="side-panel-action">
-                            {% include 'ui/partials/pagination_detail.html' %}
-                        </div>
-                    {% endif %}
-                    <div id="panel-actions">
-                        {% for action in actions %}
-                            {% if action.actions %}
-                                <div class="dropdown" style="width: 100%" onclick="setDropDown(this)">
-                                    <div class="dropdown-trigger" style="width: 100%">
-                                        <div class="side-panel-action" style="width: 292px">
-                                            <button class="button side-panel-action-content" aria-haspopup="true" style="width: 100%">
-                                                <span>{{ action.name }}</span>
-                                                <span class="icon is-small">
-                                                    <i class="fas fa-angle-down" aria-hidden="true"></i>
-                                                </span>
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="dropdown-menu side-panel-action" role="menu">
-                                        <div class="dropdown-content">
-                                            {% for group_action in action.actions %}
-                                                {% if group_action.submit %}
-                                                    <div class="dropdown-item">
-                                                        <button class="button is-fullwidth {{ group_action.class_list|join:' ' }}"
-                                                               type="submit" form={{ group_action.form_id }} value="{{ group_action.name }}"
-                                                               {{ group_action.attrs_str }}
-                                                        >
-                                                            <div class="side-panel-action-content level"><span>{{ group_action.name }}</span>
-                                                                {% if group_action.icon %}<i class="{{ group_action.icon.value }}"></i>{% endif %}
-                                                            </div>
-                                                        </button>
-                                                    </div>
-                                                {% else %}
-                                                    <div class="dropdown-item">
-                                                        <a class="button is-fullwidth {{ group_action.class_list|join:' ' }}"
-                                                            {% if group_action.url %}
-                                                                {{ group_action.method.value }}="{{ group_action.url }}"
-                                                            {% endif %}
-                                                           {{ group_action.attrs_str }}
-                                                        >
-                                                            <div class="side-panel-action-content level">
-                                                                <span>{{ group_action.name }}</span>
-                                                                {% if group_action.icon %}<i class="{{ group_action.icon.value }}"></i>{% endif %}
-                                                            </div>
-                                                        </a>
-                                                    </div>
-                                                {% endif %}
-                                            {% endfor %}
-                                        </div>
-                                    </div>
-                                </div>
-                            {% elif action.submit %}
-                                <div class="side-panel-action">
-                                    <button class="button is-fullwidth {{ action.class_list|join:' ' }}"
-                                           type="submit" form={{ action.form_id }} value="{{ action.name }}"
-                                           {{ action.attrs_str }}
-                                    >
-                                        <div class="side-panel-action-content level"><span>{{ action.name }}</span>
-                                            {% if action.icon %}<i class="{{ action.icon.value }}"></i>{% endif %}
-                                        </div>
-                                    </button>
-                                </div>
-                            {% else %}
-                                <div class="side-panel-action">
-                                    <a class="button is-fullwidth {{ action.class_list|join:' ' }}"
-                                        {% if action.url %}
-                                            {{ action.method.value }}="{{ action.url }}"
-                                        {% endif %}
-                                       {{ action.attrs_str }}
-                                    >
-                                        <div class="side-panel-action-content level">
-                                            <span>{{ action.name }}</span>
-                                            {% if action.icon %}
-                                                <span class="icon is-small">
-                                                    <i class="{{ action.icon.value }}" aria-hidden="true"></i>
-                                                </span>
-                                            {% endif %}
-                                        </div>
-                                    </a>
-                                </div>
-                            {% endif %}
-                        {% endfor %}
-                    </div>
-                    {% block filter %}
-                        {% if filter %}
-                            <div id="filter-panel" class="mt-2">
-                                <div class="panel-list mx-3 mb-1 has-text-centered" style="border-bottom: 1px #ccc solid">
-                                    <span>{% translate 'Filter' %}</span>
-                                </div>
-                                {% include 'ui/partials/filter.html' %}
-                            </div>
-                        {% endif %}
-                    {% endblock %}
                 </nav>
             </div>
+        </div>
-            <div class="is-flex-grow-1" style="overflow-x: auto">
-                <div class="is-flex is-flex-direction-column" style="height: 100%; overflow: hidden">
-                    <div>
-                        {% block header %}
-                            {% include 'ui/partials/header.html' %}
-                        {% endblock %}
-                    </div>
-                    <div id="content" class="px-3 pb-4" style="overflow: auto; flex-grow: 1">
-                        {% block messages %}
-                            {% if messages %}
-                                <div class="columns is-desktop">
-                                    <div class="column">
-                                        {% for message in messages %}
-                                            <div class="columns py-0">
-                                                <div class="column is-12">
-                                                    <div class="notification {{ message|message_class }} is-light">
-                                                        <p>{{ message }}</p>
-                                                    </div>
-                                                </div>
+        <div class="is-flex-grow-1" style="height: 100%; overflow-x: auto;">
+            <div id="content" x-ref="content" style="height: calc(100svh - var(--bulma-navbar-height))">
+                <div id="message" class="" style="position: fixed; top: calc(var(--bulma-navbar-height) + 5px); left: 50%; transform: translateX(-50%); z-index: 999"></div>
+                <div x-data="{showContentRight: false}"
+                     class="is-flex is-flex-direction-row"
+                     style="overflow: hidden; height: calc(100svh - var(--bulma-navbar-height))"
+                >
+                    <div id="content-left-container" class="table-container is-flex is-flex-grow-1 is-flex-direction-column mb-0" x-bind:class="showContentRight ? 'is-hidden-mobile' : ''">
+                        <div id="content-left-header">
+                            <div class="is-flex is-justify-content-space-between is-flex-wrap-wrap">
+                                    <div class="is-flex is-flex-wrap-wrap is-flex-grow-5 is-align-self-center py-2">
+                                        {% block header_left %}
+                                            <div>
+                                                <p class="subtitle is-5 px-2 py-1 my-1">{{ title }}</p>
                                             </div>
-                                        {% endfor %}
+                                        {% endblock %}
                                     </div>
-                                </div>
-                            {% endif %}
-                        {% endblock %}
-                        {% block content %}{% endblock %}
+                                    {% if page %}
+                                        <div id="pagination" class="field has-addons is-flex-grow-1 is-flex-wrap-nowrap is-align-self-center py-2 mx-2" style="width: 200px">
+                                            {% partialdef pagination inline=True %}
+                                                <p class="control">
+                                                    <button id="pagination-prev-button" class="button"
+                                                            hx-get="{% if page.has_previous %}{% querystring page=page.previous_page_number %}{% else %}{% querystring page=page.paginator.num_pages %}{% endif %}"
+                                                            hx-replace-url="true"
+                                                            hx-select-oob="#content-left,#pagination"
+                                                    >
+                                                        &lt;
+                                                    </button>
+                                                </p>
+                                                <p class="control is-expanded">
+                                                    <button class="button is-fullwidth px-1" style="white-space: normal">
+                                                        <span style="display: flex" class="is-flex-wrap-nowrap">
+                                                            <span id="pagination-start-index" class="is-flex is-flex-wrap-nowrap"><span>{{ page.start_index }}</span><span class="mx-1"> - </span></span>
+                                                            <span id="pagination-end-index">{{ page.end_index }}</span>
+                                                            <span class="is-flex is-flex-wrap-nowrap"><span class="mx-1">/</span><span>{{ page.paginator.count }}</span></span>
+                                                        </span>
+                                                    </button>
+                                                </p>
+                                                <p class="control">
+                                                    <button id="pagination-next-button" class="button"
+                                                            hx-get="{% if page.has_next %}{% querystring page=page.next_page_number %}{% else %}{% querystring page=1 %}{% endif %}"
+                                                            hx-replace-url="true"
+                                                            hx-select-oob="#content-left,#pagination"
+                                                    >
+                                                        &gt;
+                                                    </button>
+                                                </p>
+                                            {% endpartialdef %}
+                                        </div>
+                                    {% endif %}
+                            </div>
+                        </div>
+                        <div id="content-left" class="is-flex-grow-1" style="overflow-y: auto;">
+                            {% block content_left %}{% endblock %}
+                        </div>
                     </div>
-                    <div>
-                        {% if list_page.paginator %}
-                            <div class="level is-hidden-tablet is-align-self-flex-start m-3">
-                                <div class="level-item is-align-content-flex-start" style="width: 100%">
-                                    {% include 'ui/partials/pagination_list.html' %}
+                    <div id="content-right-container" x-show="showContentRight" style="display: none;"
+                             x-transition:enter.duration.500ms x-transition:leave.duration.150ms
+                    >
+                        <div class="is-flex is-flex-direction-column" style="height: 100%">
+                            <div class="is-flex is-flex-wrap-nowrap is-justify-content-space-between m-1">
+                                <div id="content-right-header" class="is-flex is-flex-wrap-wrap">
+                                    {% block header_right %}{% endblock %}
                                 </div>
+                                <button class="button is-light is-align-self-baseline m-1" style="border-radius: var(--bulma-radius-rounded)" x-on:click="showContentRight = false;">
+                                    <span class="icon"><i class="fa fa-xmark"></i></span>
+                                </button>
                             </div>
-                        {% endif %}
-                        {% if detail_page %}
-                            <div class="level is-hidden-tablet is-align-self-flex-start m-3">
-                                <div class="level-item is-align-content-flex-start" style="width: 100%">
-                                    {% include 'ui/partials/pagination_detail.html' %}
-                                </div>
+                            <div id="content-right" style="overflow-y: auto; flex-grow: 1">
+                                {% block content_right %}{% endblock %}
                             </div>
-                        {% endif %}
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-        {% if filter %}
-            <div id="filter-modal" class="modal">
-                <div class="modal-background filter-modal-close" onclick="hideFilterModal()"></div>
-                <div class="modal-card" style="height: 100%">
-                    <header class="modal-card-head">
-                        <p class="modal-card-title">
-                            {% block search_modal_title %}{% translate 'Filter' %}{% endblock %}</p>
-                        <button class="delete filter-modal-close" aria-label="close" onclick="hideFilterModal()"></button>
-                    </header>
-                    <section id="modal-content" class="modal-card-body px-0">
-                    </section>
-                    <footer class="modal-card-foot">
-                        <button id="applyFilterFromModalButton"
-                                class="button is-fullwidth is-success ml-1"
-                                onclick="hideFilterModal()"
-                        >{% translate 'Filter' %}</button>
-                    </footer>
-                </div>
-            </div>
-        {% endif %}
-    {% endblock %}
-</body>
+    </div>
+</body>
+{% endblock %}

accrete/contrib/ui/templates/ui/list.html CHANGED Viewed

@@ -1,35 +1,46 @@
 {% extends 'ui/layout.html' %}
-{% load static %}
 {% load i18n %}
+{% load ui %}
+{% load partials %}
-{% block tenant_switch_url %}{% endblock %}
+{% block header_left %}
+    {{ block.super }}
+{% endblock %}
+{% block content_left %}
+    <div class="fixed-grid has-{{ column_count }}-cols has-1-cols-mobile m-2">
+        <div id="list-grid" class="grid m-0">
+            {% for object in page.object_list %}
+                <div id="list-entry-{{ object.pk }}" class="list-entry cell pb-0" style="height: {{ column_height }}{{ column_height_unit }}">
+                    <div class="box is-hoverable p-3"
+                         style="word-break: break-word; height: 100%; border: var(--accrete-box-border); overflow-y: auto; {% if obj.get_absolute_url %}cursor:pointer;{% endif %}"
+                         {% if object.get_absolute_url %}hx-get="{{ object.get_absolute_url }}{% querystring %}" hx-target="#content-right-header" hx-select="#content-right-header" hx-select-oob="#content-right" hx-swap="outerHTML"{% endif %}
+                         x-data=""
+                         {% if detail_enabled %}
+                         x-on:click="showContentRight = true; $nextTick(() => { $el.scrollIntoView( {block: 'nearest'} ) });"
+                         {% endif %}
+                    >
-{% block content %}
-    <div class="columns is-multiline">
-        {% for obj in list_page %}
-            <div class="list-column column pb-0 is-{{ column_width }}-fullhd is-{{ column_width_widescreen }}-widescreen is-{{ column_width_desktop }}-desktop is-12-touch"
-                 style="height: {{ column_height }}{{ column_height_unit }}"
-                 {% if endless_scroll and forloop.last and list_page.has_next %}
-                    hx-get="{{ pagination_param_str }}&page={{ list_page.next_page_number }}"
-                    hx-trigger="intersect once"
-                    hx-select=".list-column"
-                    hx-select-oob="#list-pagination-end-index,#list-pagination-next-button,#list-pagination-prev-button"
-                    hx-swap="afterend"
-                    hx-indicator="#endless-scroll-indicator"
-                {% endif %}
-            >
-                <div class="box is-hoverable p-3"
-                     style="word-break: break-word; height: 100%; border: var(--accrete-box-border); overflow-y: auto; {% if obj.get_absolute_url %}cursor:pointer;{% endif %}"
-                     {% if obj.get_absolute_url %}hx-get="{{ obj.get_absolute_url }}{{ object_param_str }}" hx-target="body" hx-push-url="true" {% endif %}
-                >
-                    {% block data %}
-                        {{ obj }}
-                    {% endblock %}
+                        <div id="list-data-{{ object.pk }}">
+                            {% block data %}
+                                {{ object }}
+                            {% endblock %}
+                        </div>
+                    </div>
                 </div>
-            </div>
-        {% endfor %}
+            {% endfor %}
+        </div>
+        {% if endless_scroll and page.has_next %}
+            <div id="endless-scroller"
+                 hx-get="{% querystring page=page.next_page_number %}"
+                 hx-target="#list-grid"
+                 hx-trigger="intersect once"
+                 hx-select=".list-entry"
+                 hx-select-oob="#pagination-next-button,#pagination-end-index,#endless-scroller"
+                 hx-swap="beforeend"
+                 hx-replace-url="true"
+                 hx-indicator="#endless-scroll-indicator"></div>
+            <progress id="endless-scroll-indicator" class="htmx-indicator progress is-small is-success" max="100">15%</progress>
+        {% endif %}
     </div>
-    {% if endless_scroll %}
-        <progress id="endless-scroll-indicator" class="htmx-indicator progress is-small is-success" max="100">15%</progress>
-    {% endif %}
 {% endblock %}

accrete/contrib/ui/templates/ui/list_update.html ADDED Viewed

@@ -0,0 +1,3 @@
+<div hx-swap-oob="innerHTML:#list-data-{{ object.pk }}">
+    {% include template with object=object %}
+</div>

accrete/contrib/ui/templates/ui/message.html ADDED Viewed

@@ -0,0 +1,13 @@
+{% load ui %}
+{% if messages %}
+    {% for message in messages %}
+        <div hx-swap-oob="beforeend:#message">
+            <div class="mb-2" style="min-width: 330px; max-width: 330px" x-data="{ show: false }" x-show="show" x-cloak="" x-init="show = true; setTimeout(() => show = false, 4000)" x-transition.duration.200ms>
+                <div class="notification is-light {{ message|message_class }}">
+                    <p>{{ message }}</p>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+{% endif %}

accrete/contrib/ui/templates/ui/{partials/modal.html → modal.html} RENAMED Viewed

@@ -1,6 +1,9 @@
 {% load i18n %}
+{% load ui %}
 <div id="{{ modal_id }}" x-data="{close() {$refs.modal.remove()} }" x-ref="modal" class="modal is-active"
+     @close-modal-{{ modal_id }}.window="$refs.modal.remove()"
+     @keyup.escape.window="if (! $refs.{{ modal_id|xrefsave }}Indicator.classList.contains('htmx-request')) {$dispatch('close-modal-{{ modal_id }}')}"
      {% if blocking %}
         hx-indicator="#{{ modal_id }}-indicator"
         hx-disabled-elt="#{{ modal_id }}-background"
@@ -21,14 +24,15 @@
             {% block modal_footer %}
                 <div class="buttons" style="width: 100%">
                     {% block modal_buttons %}
+                        <button type="button" class="button is-light" @click="$refs.modal.remove()">
+                            {% translate 'Close' %}
+                        </button>
                     {% endblock %}
                 </div>
             {% endblock %}
         </footer>
-        {% if blocking %}
-            <div id="{{ modal_id }}-indicator" class="htmx-indicator modal-request-overlay" style="position: absolute; inset: 0; background: rgba(47, 47, 62, 0.2)">
-                <progress class="progress is-success" max="100" style="position: fixed; inset: 0; min-width: 300px; max-width: 20vw; margin: auto;"></progress>
-            </div>
-        {% endif %}
+        <div id="{{ modal_id }}-indicator" x-ref="{{ modal_id|xrefsave }}Indicator" class="htmx-indicator modal-request-overlay" style="position: absolute; inset: 0; background: rgba(47, 47, 62, 0.2)">
+            <progress class="progress is-success" max="100" style="position: fixed; inset: 0; min-width: 300px; max-width: 20vw; margin: auto;"></progress>
+        </div>
     </div>
 </div>

accrete/contrib/ui/templates/ui/oob.html ADDED Viewed

@@ -0,0 +1,3 @@
+<{{ oob.tag|default_if_none:'div' }} {% if oob.id %}id="{{ oob.id }}"{% endif %} hx-swap-oob="{{ oob.swap|default_if_none:'true' }}" {% if oob.select %}hx-select-oob="{{ oob.select }}"{% endif %}>
+    {% include oob.template %}
+</{{ oob.tag|default_if_none:'div' }}>

accrete 0.0.99__py3-none-any.whl → 0.0.109__py3-none-any.whl

accrete 0.0.99py3-none-any.whl → 0.0.109py3-none-any.whl