Merge pull request #1124 from ae-utbm/tabs

Add tab widget and remove jquery-ui

com/templates/com/news_detail.jinja

@@ -18,7 +18,7 @@
 {% endblock %}
 
 {% block additional_js %}
-  <script type="module" src={{ static("bundled/com/components/moderation-alert-index.ts") }}></script>
+  <script type="module" src={{ static("bundled/com/moderation-alert-index.ts") }}></script>
 {% endblock %}
 
 {% block content %}

com/templates/com/news_list.jinja

@@ -15,8 +15,8 @@
 
 {% block additional_js %}
   <script type="module" src={{ static("bundled/com/components/ics-calendar-index.ts") }}></script>
-  <script type="module" src={{ static("bundled/com/components/moderation-alert-index.ts") }}></script>
+  <script type="module" src={{ static("bundled/com/moderation-alert-index.ts") }}></script>
-  <script type="module" src={{ static("bundled/com/components/upcoming-news-loader-index.ts") }}></script>
+  <script type="module" src={{ static("bundled/com/upcoming-news-loader-index.ts") }}></script>
 {% endblock %}
 
 {% block content %}

core/static/bundled/core/components/tabs-index.ts

@@ -0,0 +1,120 @@
+import { registerComponent } from "#core:utils/web-components";
+import { html, render } from "lit-html";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+
+@registerComponent("ui-tab")
+export class Tab extends HTMLElement {
+  static observedAttributes = ["title", "active"];
+  private description = "";
+  private inner = "";
+  private active = false;
+
+  attributeChangedCallback(name: string, _oldValue?: string, newValue?: string) {
+    const activeOld = this.active;
+    this.active = this.hasAttribute("active");
+    if (this.active !== activeOld && this.active) {
+      this.dispatchEvent(
+        new CustomEvent("ui-tab-activated", { detail: this, bubbles: true }),
+      );
+    }
+
+    if (name === "title") {
+      this.description = newValue;
+    }
+    this.dispatchEvent(new CustomEvent("ui-tab-updated", { bubbles: true }));
+  }
+
+  getButtonTemplate() {
+    return html`
+    	<button
+	    	role="tab"
+	    	?aria-selected=${this.active}
+    		class="tab-header clickable ${this.active ? "active" : ""}"
+    		@click="${() => this.setActive(true)}"
+    	>
+    		${this.description}
+    	</button>
+    `;
+  }
+  getContentTemplate() {
+    return html`
+    	<section
+    		class="tab-section"
+    		?hidden=${!this.active}
+    	>
+	    	${unsafeHTML(this.getContentHtml())}
+	    </section>
+    `;
+  }
+
+  setActive(value: boolean) {
+    if (value) {
+      this.setAttribute("active", "");
+    } else {
+      this.removeAttribute("active");
+    }
+  }
+
+  connectedCallback() {
+    this.inner = this.innerHTML;
+    this.innerHTML = "";
+  }
+
+  getContentHtml() {
+    const content = this.getElementsByClassName("tab-section")[0];
+    if (content !== undefined) {
+      return content.innerHTML;
+    }
+    return this.inner;
+  }
+
+  setContentHtml(value: string) {
+    const content = this.getElementsByClassName("tab-section")[0];
+    if (content !== undefined) {
+      content.innerHTML = value;
+    }
+    this.inner = value;
+  }
+}
+
+@registerComponent("ui-tab-group")
+export class TabGroup extends HTMLElement {
+  private node: HTMLDivElement;
+
+  connectedCallback() {
+    this.node = document.createElement("div");
+    this.node.classList.add("tabs", "shadow");
+    this.appendChild(this.node);
+
+    this.addEventListener("ui-tab-activated", (event: CustomEvent) => {
+      const target = event.detail as Tab;
+      for (const tab of this.getElementsByTagName("ui-tab") as HTMLCollectionOf<Tab>) {
+        if (tab !== target) {
+          tab.setActive(false);
+        }
+      }
+    });
+    this.addEventListener("ui-tab-updated", () => {
+      this.render();
+    });
+
+    this.render();
+  }
+
+  render() {
+    const tabs = Array.prototype.slice.call(
+      this.getElementsByTagName("ui-tab"),
+    ) as Tab[];
+    render(
+      html`
+      	<div class="tab-headers">
+      		${tabs.map((tab) => tab.getButtonTemplate())}
+      	</div>
+      	<div class="tab-content">
+      		${tabs.map((tab) => tab.getContentTemplate())}
+      	</div>
+    `,
+      this.node,
+    );
+  }
+}

core/static/bundled/jquery-ui-index.js

@@ -1,2 +0,0 @@
-// This is only used to import jquery-ui css files
-import "jquery-ui/themes/base/all.css";

core/static/core/components/tabs.scss

@@ -0,0 +1,53 @@
+@import "core/static/core/colors";
+
+ui-tab-group {
+  *[hidden] {
+    display: none;
+  }
+
+  .tabs {
+    border-radius: 5px;
+
+    .tab-headers {
+      display: flex;
+      flex-flow: row wrap;
+      background-color: $primary-neutral-light-color;
+      padding: 3px 12px 12px;
+      column-gap: 20px;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+
+      .tab-header {
+        border: none;
+        padding-right: 0;
+        padding-left: 0;
+        font-size: 120%;
+        background-color: unset;
+        position: relative;
+
+        &:after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          border-bottom: 4px solid darken($primary-neutral-light-color, 10%);
+          border-radius: 2px;
+          transition: all 0.2s ease-in-out;
+        }
+
+        &:hover:after {
+          border-bottom-color: darken($primary-neutral-light-color, 20%);
+        }
+
+        &.active:after {
+          border-bottom-color: $primary-dark-color;
+        }
+      }
+    }
+
+    section {
+      padding: 20px;
+    }
+  }
+}

core/static/core/js/script.js

@@ -1,42 +1,4 @@
 $(() => {
-  // const buttons = $('.choose_file_button')
-  const popups = $(".choose_file_widget");
-  popups.dialog({
-    autoOpen: false,
-    modal: true,
-    width: "90%",
-    create: (event) => {
-      const target = $(event.target);
-      target.parent().css({
-        position: "fixed",
-        top: "5%",
-        bottom: "5%",
-      });
-      target.css("height", "300px");
-    },
-    buttons: [
-      {
-        text: "Choose",
-        click: function () {
-          $(`input[name=${$(this).attr("name")}]`).attr(
-            "value",
-            $("#file_id").attr("value"),
-          );
-          $(this).dialog("close");
-        },
-        disabled: true,
-      },
-    ],
-  });
-  $(".choose_file_button")
-    .button()
-    .on("click", function () {
-      const popup = popups.filter(`[name=${$(this).attr("name")}]`);
-      popup.html(
-        '<iframe src="/file/popup" width="100%" height="95%"></iframe><div id="file_id" value="null" />',
-      );
-      popup.dialog({ title: $(this).text() }).dialog("open");
-    });
   $("#quick_notif li").click(function () {
     $(this).hide();
   });

core/static/core/style.scss

@@ -111,12 +111,6 @@ body {
 
 /*--------------------------------HEADER-------------------------------*/
 
-#popupheader {
-  width: 88%;
-  margin: 0 auto;
-  padding: 0.3em 1%;
-}
-
 #info_boxes {
   display: flex;
   flex-wrap: wrap;
@@ -352,52 +346,6 @@ body {
     text-align: center;
   }
 
-  .tabs {
-    border-radius: 5px;
-
-    .tab-headers {
-      display: flex;
-      flex-flow: row wrap;
-      background-color: $primary-neutral-light-color;
-      padding: 3px 12px 12px;
-      column-gap: 20px;
-      border-top-left-radius: 5px;
-      border-top-right-radius: 5px;
-
-      .tab-header {
-        border: none;
-        padding-right: 0;
-        padding-left: 0;
-        font-size: 120%;
-        background-color: unset;
-        position: relative;
-
-        &:after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          border-bottom: 4px solid darken($primary-neutral-light-color, 10%);
-          border-radius: 2px;
-          transition: all 0.2s ease-in-out;
-        }
-
-        &:hover:after {
-          border-bottom-color: darken($primary-neutral-light-color, 20%);
-        }
-
-        &.active:after {
-          border-bottom-color: $primary-dark-color;
-        }
-      }
-    }
-
-    section {
-      padding: 20px;
-    }
-  }
-
   .tool_bar {
     overflow: auto;
     padding: 4px;
@@ -848,25 +796,6 @@ footer {
 }
 
 /*--------------------------------JQuery-------------------------------*/
-
-.ui-state-active,
-.ui-widget-content .ui-state-active,
-.ui-widget-header .ui-state-active,
-a.ui-button:active,
-.ui-button:active,
-.ui-button.ui-state-active:hover {
-  background: $primary-color;
-  border-color: $primary-color;
-}
-
-.ui-corner-all,
-.ui-corner-bottom,
-.ui-corner-right,
-.ui-corner-top,
-.ui-corner-left {
-  border-radius: 0;
-}
-
 #club_detail {
   .club_logo {
     float: right;

core/templates/core/base.jinja

@@ -14,10 +14,6 @@
       <link rel="stylesheet" href="{{ static('core/pagination.scss') }}">
       <link rel="stylesheet" href="{{ static('core/accordion.scss') }}">
 
-      {% block jquery_css %}
-        {# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}
-        <link rel="stylesheet" href="{{ static('bundled/jquery-ui-index.css') }}">
-      {% endblock %}
       <link rel="preload" as="style" href="{{ static('bundled/fontawesome-index.css') }}" onload="this.onload=null;this.rel='stylesheet'">
       <noscript><link rel="stylesheet" href="{{ static('bundled/fontawesome-index.css') }}"></noscript>
 
@@ -30,11 +26,8 @@
 
       <!-- Jquery declared here to be accessible in every django widgets -->
       <script src="{{ static('bundled/vendored/jquery.min.js') }}"></script>
-      <script src="{{ static('bundled/vendored/jquery-ui.min.js') }}"></script>
       <script src="{{ static('core/js/script.js') }}"></script>
 
-
-
       {% block additional_css %}{% endblock %}
       {% block additional_js %}{% endblock %}
     {% endblock %}
@@ -47,7 +40,6 @@
     {% csrf_token %}
 
     {% block header %}
-      {% if not popup %}
       {% include "core/base/header.jinja" %}
 
       {% block info_boxes %}
@@ -66,16 +58,10 @@
         </div>
       {% endblock %}
 
-      {% else %}
-        <div id="popupheader">{{ user.get_display_name() }}</div>
-      {% endif %}
-
     {% endblock %}
 
     {% block nav %}
-      {% if not popup %}
       {% include "core/base/navbar.jinja" %}
-      {% endif %}
     {% endblock %}
 
     <div id="page">
@@ -102,7 +88,6 @@
       </div>
     </div>
 
-    {% if not popup %}
     <footer>
       {% block footer %}
         <div>
@@ -119,7 +104,6 @@
       {% endblock %}
       <br>
     </footer>
-    {% endif %}
 
     {% block script %}
       <script>

core/templates/core/file.jinja

@@ -19,9 +19,9 @@
 {% macro print_file_name(file) %}
   {% if file %}
     {{ print_file_name(file.parent) }} >
-    <a href="{{ url('core:file_detail', file_id=file.id, popup=popup) }}">{{ file.get_display_name() }}</a>
+    <a href="{{ url('core:file_detail', file_id=file.id) }}">{{ file.get_display_name() }}</a>
   {% else %}
-    <a href="{{ url('core:file_list', popup) }}">{% trans %}Files{% endtrans %}</a>
+    <a href="{{ url('core:file_list') }}">{% trans %}Files{% endtrans %}</a>
   {% endif %}
 {% endmacro %}
 
@@ -33,16 +33,16 @@
       <div>
         {% set home = user.home %}
         {% if home %}
-          <a href="{{ url('core:file_detail', home.id, popup) }}">{% trans %}My files{% endtrans %}</a>
+          <a href="{{ url('core:file_detail', home.id) }}">{% trans %}My files{% endtrans %}</a>
         {% endif %}
       </div>
       {% if file %}
-        <a href="{{ url('core:file_detail', file.id, popup) }}">{% trans %}View{% endtrans %}</a>
+        <a href="{{ url('core:file_detail', file.id) }}">{% trans %}View{% endtrans %}</a>
         {% if can_edit(file, user) %}
-          <a href="{{ url('core:file_edit', file_id=file.id, popup=popup) }}">{% trans %}Edit{% endtrans %}</a>
+          <a href="{{ url('core:file_edit', file_id=file.id) }}">{% trans %}Edit{% endtrans %}</a>
         {% endif %}
         {% if can_edit_prop(file, user) %}
-          <a href="{{ url('core:file_prop', file_id=file.id, popup=popup) }}">{% trans %}Prop{% endtrans %}</a>
+          <a href="{{ url('core:file_prop', file_id=file.id) }}">{% trans %}Prop{% endtrans %}</a>
         {% endif %}
       {% endif %}
     </div>

core/templates/core/file_detail.jinja

@@ -45,7 +45,7 @@
             {% else %}
               <i class="fa fa-file" aria-hidden="true"></i>
             {% endif %}
-            <a href="{{ url('core:file_detail', file_id=f.id, popup=popup) }}">{{ f.get_display_name() }}</a></li>
+            <a href="{{ url('core:file_detail', file_id=f.id) }}">{{ f.get_display_name() }}</a></li>
         {% endfor %}
       </ul>
     </form>
@@ -59,22 +59,9 @@
     <p><a href="{{ url('core:download', file_id=file.id) }}">{% trans %}Download{% endtrans %}</a></p>
   {% endif %}
   {% if not file.home_of and not file.home_of_club and file.parent %}
-    <p><a href="{{ url('core:file_delete', file_id=file.id, popup=popup) }}">{% trans %}Delete{% endtrans %}</a></p>
+    <p><a href="{{ url('core:file_delete', file_id=file.id) }}">{% trans %}Delete{% endtrans %}</a></p>
   {% endif %}
   {% if user.is_com_admin %}
     <p><a href="{{ url('core:file_moderate', file_id=file.id) }}">{% trans %}Moderate{% endtrans %}</a></p>
   {% endif %}
 {% endblock %}
-
-{% block script %}
-  {{ super() }}
-  <script>
-    {% if popup and file.is_file %}
-      parent.$("#file_id").replaceWith('<div id="file_id" value="{{ file.id }}">{{ file.name }}</div>');
-      parent.$(".ui-dialog-buttonpane button").button("option", "disabled", false);
-    {% endif %}
-  </script>
-{% endblock %}
-
-
-

core/templates/core/file_list.jinja

@@ -12,7 +12,7 @@
           {% else %}
             <i class="fa fa-file" aria-hidden="true"></i>
           {% endif %}
-          <a href="{{ url('core:file_detail', file_id=f.id, popup=popup) }}">{{ f.name }}</a></li>
+          <a href="{{ url('core:file_detail', file_id=f.id) }}">{{ f.name }}</a></li>
       {% endfor %}
     </ul>
   {% else %}

core/templates/core/macros.jinja

@@ -245,65 +245,3 @@
   <button type="button" onclick="checkbox_{{form_id}}(true);">{% trans %}Select All{% endtrans %}</button>
   <button type="button" onclick="checkbox_{{form_id}}(false);">{% trans %}Unselect All{% endtrans %}</button>
 {% endmacro %}
-
-{% macro tabs(tab_list, attrs = "") %}
-  {# Tab component
-
-  Parameters:
-    tab_list: list[tuple[str, str]] The list of tabs to display.
-        Each element of the list is a tuple which first element
-        is the title of the tab and the second element its content
-    attrs: str Additional attributes to put on the enclosing div
-
-  Example:
-    A basic usage would be as follow :
-
-        {{ tabs([("title 1", "content 1"), ("title 2", "content 2")]) }}
-
-    If you want to display more complex logic, you can define macros
-    and use those macros in parameters :
-
-        {{ tabs([("title", my_macro())]) }}
-
-    It's also possible to get and set the currently selected tab using Alpine.
-    Here, the title of the currently selected tab will be displayed.
-    Moreover, on page load, the tab will be opened on "tab 2".
-
-        <div x-data="{current_tab: 'tab 2'}">
-          <p x-text="current_tab"></p>
-          {{ tabs([("tab 1", "Hello"), ("tab 2", "World")], "x-model=current_tab") }}
-        </div>
-
-    If you want to have translated tab titles, you can enclose the macro call
-    in a with block :
-
-        {% with title=_("title"), content=_("Content") %}
-            {{ tabs([(tab1, content)]) }}
-        {% endwith %}
-  #}
-  <div
-    class="tabs shadow"
-    x-data="{selected: '{{ tab_list[0][0] }}'}"
-    x-modelable="selected"
-    {{ attrs }}
-  >
-    <div class="tab-headers">
-      {% for title, _ in tab_list %}
-        <button
-          class="tab-header clickable"
-          :class="{active: selected === '{{ title }}'}"
-          @click="selected = '{{ title }}'"
-        >
-          {{ title }}
-        </button>
-      {% endfor %}
-    </div>
-    <div class="tab-content">
-      {% for title, content in tab_list %}
-        <section x-show="selected === '{{ title }}'">
-          {{ content }}
-        </section>
-      {% endfor %}
-    </div>
-  </div>
-{% endmacro %}

core/templates/core/user_edit.jinja

@@ -74,7 +74,7 @@
     {%- if this_picture -%}
       {% set default_picture = this_picture.get_download_url()|tojson %}
       {% set delete_url = (
-        url('core:file_delete', file_id=this_picture.id, popup='')
+        url('core:file_delete', file_id=this_picture.id)
         + "?next=" + url('core:user_edit', user_id=profile.id)
       )|tojson %}
     {%- else -%}

core/tests/test_files.py

@@ -146,7 +146,7 @@ class TestUserProfilePicture:
         return client.post(
             reverse(
                 "core:file_delete",
-                kwargs={"file_id": user.profile_pict.pk, "popup": ""},
+                kwargs={"file_id": user.profile_pict.pk},
                 query={"next": user.get_absolute_url()},
             ),
         )

core/urls.py

@@ -193,24 +193,24 @@ urlpatterns = [
         name="user_gift_delete",
     ),
     # File views
-    re_path(r"^file/(?P<popup>popup)?$", FileListView.as_view(), name="file_list"),
+    re_path(r"^file/$", FileListView.as_view(), name="file_list"),
     re_path(
-        r"^file/(?P<file_id>[0-9]+)/(?P<popup>popup)?$",
+        r"^file/(?P<file_id>[0-9]+)/$",
         FileView.as_view(),
         name="file_detail",
     ),
     re_path(
-        r"^file/(?P<file_id>[0-9]+)/edit/(?P<popup>popup)?$",
+        r"^file/(?P<file_id>[0-9]+)/edit/$",
         FileEditView.as_view(),
         name="file_edit",
     ),
     re_path(
-        r"^file/(?P<file_id>[0-9]+)/prop/(?P<popup>popup)?$",
+        r"^file/(?P<file_id>[0-9]+)/prop/$",
         FileEditPropView.as_view(),
         name="file_prop",
     ),
     re_path(
-        r"^file/(?P<file_id>[0-9]+)/delete/(?P<popup>popup)?$",
+        r"^file/(?P<file_id>[0-9]+)/delete/$",
         FileDeleteView.as_view(),
         name="file_delete",
     ),

core/views/__init__.py

@@ -37,8 +37,6 @@ from core.views.forms import LoginForm
 
 def forbidden(request, exception):
     context = {"next": request.path, "form": LoginForm()}
-    if popup := request.resolver_match.kwargs.get("popup"):
-        context["popup"] = popup
     return HttpResponseForbidden(render(request, "core/403.jinja", context=context))
 
 

core/views/files.py

@@ -198,9 +198,6 @@ class FileListView(ListView):
 
     def get_context_data(self, **kwargs):
         kwargs = super().get_context_data(**kwargs)
-        kwargs["popup"] = ""
-        if self.kwargs.get("popup") is not None:
-            kwargs["popup"] = "popup"
         return kwargs
 
 
@@ -217,20 +214,7 @@ class FileEditView(CanEditMixin, UpdateView):
         return modelform_factory(SithFile, fields=fields)
 
     def get_success_url(self):
-        if self.kwargs.get("popup") is not None:
+        return reverse("core:file_detail", kwargs={"file_id": self.object.id})
-            return reverse(
-                "core:file_detail", kwargs={"file_id": self.object.id, "popup": "popup"}
-            )
-        return reverse(
-            "core:file_detail", kwargs={"file_id": self.object.id, "popup": ""}
-        )
-
-    def get_context_data(self, **kwargs):
-        kwargs = super().get_context_data(**kwargs)
-        kwargs["popup"] = ""
-        if self.kwargs.get("popup") is not None:
-            kwargs["popup"] = "popup"
-        return kwargs
 
 
 class FileEditPropForm(forms.ModelForm):
@@ -268,16 +252,9 @@ class FileEditPropView(CanEditPropMixin, UpdateView):
     def get_success_url(self):
         return reverse(
             "core:file_detail",
-            kwargs={"file_id": self.object.id, "popup": self.kwargs.get("popup", "")},
+            kwargs={"file_id": self.object.id},
         )
 
-    def get_context_data(self, **kwargs):
-        kwargs = super().get_context_data(**kwargs)
-        kwargs["popup"] = ""
-        if self.kwargs.get("popup") is not None:
-            kwargs["popup"] = "popup"
-        return kwargs
-
 
 class FileView(CanViewMixin, DetailView, FormMixin):
     """Handle the upload of new files into a folder."""
@@ -353,15 +330,12 @@ class FileView(CanViewMixin, DetailView, FormMixin):
     def get_success_url(self):
         return reverse(
             "core:file_detail",
-            kwargs={"file_id": self.object.id, "popup": self.kwargs.get("popup", "")},
+            kwargs={"file_id": self.object.id},
         )
 
     def get_context_data(self, **kwargs):
         kwargs = super().get_context_data(**kwargs)
-        kwargs["popup"] = ""
         kwargs["form"] = self.form
-        if self.kwargs.get("popup") is not None:
-            kwargs["popup"] = "popup"
         kwargs["clipboard"] = SithFile.objects.filter(
             id__in=self.request.session["clipboard"]
         )
@@ -380,19 +354,17 @@ class FileDeleteView(AllowFragment, CanEditPropMixin, DeleteView):
             return self.request.GET["next"]
         if self.object.parent is None:
             return reverse(
-                "core:file_list", kwargs={"popup": self.kwargs.get("popup", "")}
+                "core:file_list",
             )
         return reverse(
             "core:file_detail",
             kwargs={
                 "file_id": self.object.parent.id,
-                "popup": self.kwargs.get("popup", ""),
             },
         )
 
     def get_context_data(self, **kwargs):
         kwargs = super().get_context_data(**kwargs)
-        kwargs["popup"] = "" if self.kwargs.get("popup") is None else "popup"
         kwargs["next"] = self.request.GET.get("next", None)
         kwargs["previous"] = self.request.GET.get("previous", None)
         kwargs["current"] = self.request.path

core/views/forms.py

@@ -86,30 +86,6 @@ class NFCTextInput(TextInput):
         return context
 
 
-class SelectFile(TextInput):
-    def render(self, name, value, attrs=None, renderer=None):
-        if attrs:
-            attrs["class"] = "select_file"
-        else:
-            attrs = {"class": "select_file"}
-        output = (
-            '%(content)s<div name="%(name)s" class="choose_file_widget" title="%(title)s"></div>'
-            % {
-                "content": super().render(name, value, attrs, renderer),
-                "title": _("Choose file"),
-                "name": name,
-            }
-        )
-        output += (
-            '<span name="'
-            + name
-            + '" class="choose_file_button">'
-            + gettext("Choose file")
-            + "</span>"
-        )
-        return output
-
-
 class SelectUser(TextInput):
     def render(self, name, value, attrs=None, renderer=None):
         if attrs:

counter/static/bundled/counter/counter-click-index.ts

@@ -137,8 +137,3 @@ document.addEventListener("alpine:init", () => {
     },
   }));
 });
-
-$(() => {
-  // biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
-  ($("#products") as any).tabs();
-});

counter/templates/counter/counter_click.jinja

@@ -9,12 +9,14 @@
   <link rel="stylesheet" type="text/css" href="{{ static('counter/css/counter-click.scss') }}" defer></link>
   <link rel="stylesheet" type="text/css" href="{{ static('bundled/core/components/ajax-select-index.css') }}" defer></link>
   <link rel="stylesheet" type="text/css" href="{{ static('core/components/ajax-select.scss') }}" defer></link>
+  <link rel="stylesheet" type="text/css" href="{{ static('core/components/tabs.scss') }}" defer></link>
   <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
 {% endblock %}
 
 {% block additional_js %}
   <script type="module" src="{{ static('bundled/counter/counter-click-index.ts') }}"></script>
   <script type="module" src="{{ static('bundled/counter/components/counter-product-select-index.ts') }}"></script>
+  <script type="module" src="{{ static('bundled/core/components/tabs-index.ts') }}"></script>
 {% endblock %}
 
 {% block info_boxes %}
@@ -205,13 +207,9 @@
             {% trans %}No products available on this counter for this user{% endtrans %}
           </div>
         {% else %}
-          <ul>
+          <ui-tab-group>
             {% for category in categories.keys() -%}
-              <li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
+              <ui-tab title="{{ category }}" {% if loop.index == 1 -%}active{%- endif -%}>
-            {%- endfor %}
-          </ul>
-          {% for category in categories.keys() -%}
-            <div id="cat_{{ category|slugify }}">
                 <h5 class="margin-bottom">{{ category }}</h5>
                 <div class="row gap-2x">
                   {% for product in categories[category] -%}
@@ -232,8 +230,9 @@
                     </button>
                   {%- endfor %}
                 </div>
-            </div>
+              </ui-tab>
-          {%- endfor %}
+            {% endfor %}
+          </ui-tab-group>
         {% endif %}
       </div>
     </div>

counter/templates/counter/stats.jinja

@@ -5,10 +5,6 @@
   {% trans counter_name=counter %}{{ counter_name }} stats{% endtrans %}
 {% endblock %}
 
-{% block jquery_css %}
-    {# Remove jquery_css #}
-{% endblock %}
-
 {% block content %}
   <h3>{% trans counter_name=counter %}{{ counter_name }} stats{% endtrans %}</h3>
   <h4>

eboutic/templates/eboutic/eboutic_checkout.jinja

@@ -4,10 +4,6 @@
   {% trans %}Basket state{% endtrans %}
 {% endblock %}
 
-{% block jquery_css %}
-    {#  Remove jquery css  #}
-{% endblock %}
-
 {% block additional_js %}
   <script type="module" src="{{ static('bundled/eboutic/checkout-index.ts') }}"></script>
 {% endblock %}

eboutic/templates/eboutic/eboutic_main.jinja

@@ -4,10 +4,6 @@
   {% trans %}Eboutic{% endtrans %}
 {% endblock %}
 
-{% block jquery_css %}
-    {#  Remove jquery css  #}
-{% endblock %}
-
 {% block additional_js %}
     {# This script contains the code to perform requests to manipulate the
     user basket without having to reload the page #}

locale/fr/LC_MESSAGES/djangojs.po

@@ -45,7 +45,7 @@ msgstr "Comment utiliser le lien du calendrier"
 msgid "Link copied"
 msgstr "Lien copié"
 
-#: com/static/bundled/com/components/moderation-alert-index.ts
+#: com/static/bundled/com/moderation-alert-index.ts
 #, javascript-format
 msgid ""
 "This event will take place every week for %s weeks. If you publish or delete "

package-lock.json

@@ -32,7 +32,6 @@
         "glob": "^11.0.0",
         "htmx.org": "^2.0.3",
         "jquery": "^3.7.1",
-        "jquery-ui": "^1.14.0",
         "js-cookie": "^3.0.5",
         "lit-html": "^3.3.0",
         "native-file-system-adapter": "^3.0.1",
@@ -3090,9 +3089,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "2.0.1",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -4356,15 +4355,6 @@
       "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
       "license": "MIT"
     },
-    "node_modules/jquery-ui": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.14.1.tgz",
-      "integrity": "sha512-DhzsYH8VeIvOaxwi+B/2BCsFFT5EGjShdzOcm5DssWjtcpGWIMsn66rJciDA6jBruzNiLf1q0KvwMoX1uGNvnQ==",
-      "license": "MIT",
-      "dependencies": {
-        "jquery": ">=1.12.0 <5.0.0"
-      }
-    },
     "node_modules/js-cookie": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",

package.json

@@ -59,7 +59,6 @@
     "glob": "^11.0.0",
     "htmx.org": "^2.0.3",
     "jquery": "^3.7.1",
-    "jquery-ui": "^1.14.0",
     "js-cookie": "^3.0.5",
     "lit-html": "^3.3.0",
     "native-file-system-adapter": "^3.0.1",

subscription/templates/subscription/subscription.jinja

@@ -12,6 +12,7 @@
    So we give them here.
    If the aforementioned bug is resolved, you can remove this. #}
 {% block additional_js %}
+  <script type="module" src="{{ static('bundled/core/components/tabs-index.ts') }}"></script>
   <script type="module" src="{{ static("bundled/core/components/ajax-select-index.ts") }}"></script>
   <script
     type="module"
@@ -19,6 +20,7 @@
   ></script>
 {% endblock %}
 {% block additional_css %}
+  <link rel="stylesheet" href="{{ static("core/components/tabs.scss") }}">
   <link rel="stylesheet" href="{{ static("bundled/core/components/ajax-select-index.css") }}">
   <link rel="stylesheet" href="{{ static("core/components/ajax-select.scss") }}">
   <link rel="stylesheet" href="{{ static("subscription/css/subscription.scss") }}">
@@ -34,12 +36,12 @@
 
 {% block content %}
   <h3>{% trans %}New subscription{% endtrans %}</h3>
-  <div id="subscription-form">
+  <ui-tab-group id="subscription-form">
-    {% with title1=_("Existing member"), title2=_("New member") %}
+    <ui-tab title="{% trans %}Existing member{% endtrans %}" active>
-      {{ tabs([
+      {{ form_fragment(existing_user_form, existing_user_post_url) }}
-      (title1, form_fragment(existing_user_form, existing_user_post_url)),
+    </ui-tab>
-      (title2, form_fragment(new_user_form, new_user_post_url)),
+    <ui-tab title="{% trans %}New member{% endtrans %}">
-      ]) }}
+      {{ form_fragment(new_user_form, new_user_post_url) }}
-    {% endwith %}
+    </ui-tab>
-  </div>
+  </ui-tab-group>
 {% endblock %}

vite.config.mts

@@ -93,10 +93,6 @@ export default defineConfig((config: UserConfig) => {
             src: resolve(nodeModules, "jquery/dist/jquery.min.js"),
             dest: vendored,
           },
-          {
-            src: resolve(nodeModules, "jquery-ui/dist/jquery-ui.min.js"),
-            dest: vendored,
-          },
         ],
       }),
     ],