fix tab action

Author: mmaciekk

src/hope/apps/administration/templates/unfold/helpers/tab_action.html

@@ -0,0 +1,73 @@
+{% load unfold %}
+
+<li class="border rounded-default select-none
+           {% if action.variant.value == "primary" %}border-primary-700 bg-primary-600 text-white dark:border-primary-500
+           {% elif action.variant.value == "danger" %}border-red-700 bg-red-600 text-white dark:border-red-500
+           {% elif action.variant.value == "success" %}border-green-700 bg-green-600 text-white dark:border-green-500
+           {% elif action.variant.value == "info" %}border-blue-700 bg-blue-600 text-white dark:border-blue-500
+           {% elif action.variant.value == "warning" %}border-orange-700 bg-orange-600 text-white dark:border-orange-500
+           {% else %}border-base-200 dark:border-base-700 hover:text-primary-600 dark:hover:text-primary-500
+           {% endif %}"
+    {% if not link and action.items|length > 0 %}x-data="{actionDropdownOpen: false}" x-ref="actionDropdown{{ action.method_name }}"{% endif %}>
+    <a {% if link %}href="{{ link }}"{% endif %}class="cursor-pointer flex grow items-center gap-2 px-3 py-2 text-left whitespace-nowrap" {% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}
+       {% if not link %}
+           x-on:click="actionDropdownOpen = !actionDropdownOpen"
+           x-bind:class="{'{% if action.variant.value == "default" %}text-primary-600 dark:text-primary-500{% endif %}': actionDropdownOpen }"
+       {% endif %}>
+
+        {% if action.icon %}
+            <span class="material-symbols-outlined">
+                {{ action.icon }}
+            </span>
+        {% elif icon %}
+            <span class="material-symbols-outlined">
+                {{ icon }}
+            </span>
+        {% endif %}
+
+        {{ title }}
+
+        {% if not link and action.items|length > 0 %}
+            <span class="border-l border-base-200 flex items-center select-none self-stretch ml-auto -mr-1 !ml-1 pl-2
+                         {% if action.variant.value == "primary" %}border-primary-700 dark:border-primary-500
+                         {% elif action.variant.value == "danger" %}border-red-700 dark:border-red-500
+                         {% elif action.variant.value == "success" %}border-green-700 dark:border-green-500
+                         {% elif action.variant.value == "info" %}border-blue-700 dark:border-blue-500
+                         {% elif action.variant.value == "warning" %}border-orange-700 dark:border-orange-500
+                         {% else %}border-base-200 dark:border-base-700
+                         {% endif %}">
+                <span class="material-symbols-outlined ml-auto rotate-90 transition-transform" x-bind:class="{'-rotate-90!': actionDropdownOpen }">
+                    chevron_right
+                </span>
+            </span>
+        {% endif %}
+    </a>
+
+    {% if not link and action.items|length > 0 %}
+        <template x-teleport="body">
+            <nav x-anchor.bottom-end.offset.4="$refs.actionDropdown{{ action.method_name }}" class="absolute bg-white border border-base-200 flex flex-col -mr-px py-1 right-0 rounded-default shadow-lg top-10 w-52 z-50 dark:bg-base-800 dark:border-base-700" x-transition x-show="actionDropdownOpen" x-on:click.outside="actionDropdownOpen = false">
+                {% for item in action.items %}
+                    <a href="{{ item.path }}" class="flex items-center font-normal gap-2 max-h-[30px] mx-1 px-3 py-2 rounded-default text-left hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200
+                                                     {% if item.variant.value == "danger" %}text-red-700 dark:text-red-400 hover:text-red-700 dark:hover:text-red-400 hover:bg-red-100 dark:hover:bg-red-500/20
+                                                     {% elif item.variant.value == "warning" %}text-orange-700 dark:text-orange-400 hover:text-orange-700 dark:hover:text-orange-400 hover:bg-orange-100 dark:hover:bg-orange-500/20
+                                                     {% elif item.variant.value == "success" %}text-green-700 dark:text-green-400 hover:text-green-700 dark:hover:text-green-400 hover:bg-green-100 dark:hover:bg-green-500/20
+                                                     {% elif item.variant.value == "info" %}text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-500/20
+                                                     {% elif item.variant.value == "primary" %}text-primary-700 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-400 hover:bg-primary-100 dark:hover:bg-primary-500/20
+                                                     {% else %}hover:bg-base-100 dark:hover:bg-base-700/20
+                                                     {% endif %}"
+                       {% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=item.attrs %}>
+                        {% if item.icon %}
+                            <span class="material-symbols-outlined">
+                                {{ item.icon }}
+                            </span>
+                        {% endif %}
+
+                        <span class="grow truncate" title="{{ item.title }}">
+                            {{ item.title }}
+                        </span>
+                    </a>
+                {% endfor %}
+            </nav>
+        </template>
+    {% endif %}
+</li>