feat: update gitea vendor

package/gitea/source/web_src/js/modules/fomantic/aria.md

@@ -50,7 +50,7 @@ However, the templates still have the Fomantic-style HTML layout:
 </div>
 ```
 
-We call `initAriaCheckboxPatch` to link the `input` and `label` which makes clicking the
+We call `initAriaLabels` to link the `input` and `label` which makes clicking the
 label etc. work. There is still a problem: These checkboxes are not friendly to screen readers,
 so we add IDs to all the Fomantic UI checkboxes automatically by JS. If the `label` part is empty,
 then the checkbox needs to get the `aria-label` attribute manually.

package/gitea/source/web_src/js/modules/fomantic/base.ts

@@ -1,6 +1,6 @@
-import {generateElemId} from '../../utils/dom.ts';
+import {generateElemId, queryElems} from '../../utils/dom.ts';
 
-export function linkLabelAndInput(label: Element, input: Element) {
+function linkLabelAndInput(label: Element, input: Element) {
   const labelFor = label.getAttribute('for');
   const inputId = input.getAttribute('id');
 
@@ -13,6 +13,34 @@ export function linkLabelAndInput(label: Element, input: Element) {
   }
 }
 
+function patchLabels(parent: ParentNode, containerSelector: string, labelSelector: string, inputSelector: string, marker: string) {
+  // Sample layout for this function:
+  // <div parent>
+  //   <div container><label/><input/></div>
+  //   <div container><label/><input/></div>
+  // </div>
+  //
+  // OR the parent is also the container:
+  // <div parent container><label/><input/></div>
+
+  const patchLabelContainer = (container: Element) => {
+    if (container.hasAttribute(marker)) return;
+    const label = container.querySelector(labelSelector);
+    const input = container.querySelector(inputSelector);
+    if (!label || !input) return;
+    linkLabelAndInput(label, input);
+    container.setAttribute(marker, 'true');
+  };
+  queryElems(parent, containerSelector, patchLabelContainer);
+  if (parent instanceof Element && parent.matches(containerSelector)) patchLabelContainer(parent);
+}
+
+// link labels and inputs in `.ui.checkbox` and `.ui.form .field` so labels are clickable and accessible
+export function initAriaLabels(container: ParentNode) {
+  patchLabels(container, '.ui.checkbox', 'label', 'input', 'data-checkbox-patched');
+  patchLabels(container, '.ui.form .field', ':scope > label', ':scope > input, :scope > select', 'data-field-patched');
+}
+
 export function fomanticQuery(s: string | Element | NodeListOf<Element>): ReturnType<typeof $> {
   // intentionally make it only work for query selector, it isn't used for creating HTML elements (for safety)
   return typeof s === 'string' ? $(document).find(s) : $(s);

package/gitea/source/web_src/js/modules/fomantic/checkbox.ts

@@ -1,13 +0,0 @@
-import {linkLabelAndInput} from './base.ts';
-
-export function initAriaCheckboxPatch() {
-  // link the label and the input element so it's clickable and accessible
-  for (const el of document.querySelectorAll('.ui.checkbox')) {
-    if (el.hasAttribute('data-checkbox-patched')) continue;
-    const label = el.querySelector('label');
-    const input = el.querySelector('input');
-    if (!label || !input) continue;
-    linkLabelAndInput(label, input);
-    el.setAttribute('data-checkbox-patched', 'true');
-  }
-}

package/gitea/source/web_src/js/modules/fomantic/dropdown.test.ts

@@ -1,6 +1,23 @@
+import '../../../fomantic/build/fomantic.js';
 import {createElementFromHTML} from '../../utils/dom.ts';
 import {hideScopedEmptyDividers} from './dropdown.ts';
 
+test('dropdown-item-literal-text', () => {
+  // a "choice" workflow_dispatch input can offer the string "false" as an option.
+  // jQuery `.data()` would coerce `data-text="false"` to the boolean `false`, which then renders as empty text.
+  const $dropdown = $(`<select class="ui dropdown">
+    <option value="1">1</option>
+    <option value="0">0</option>
+    <option value="true">true</option>
+    <option value="false">false</option>
+  </select>`).dropdown();
+  for (const value of ['1', '0', 'true', 'false']) {
+    $dropdown.dropdown('set selected', value);
+    expect($dropdown.dropdown('get text')).toEqual(value);
+    expect($dropdown.dropdown('get value')).toEqual(value);
+  }
+});
+
 test('hideScopedEmptyDividers-simple', () => {
   const container = createElementFromHTML(`<div>
 <div class="divider"></div>
@@ -13,13 +30,13 @@ test('hideScopedEmptyDividers-simple', () => {
 </div>`);
   hideScopedEmptyDividers(container);
   expect(container.innerHTML).toEqual(`
-<div class="divider hidden transition"></div>
+<div class="divider hidden"></div>
 <div class="item">a</div>
-<div class="divider hidden transition"></div>
-<div class="divider hidden transition"></div>
+<div class="divider hidden"></div>
+<div class="divider hidden"></div>
 <div class="divider"></div>
 <div class="item">b</div>
-<div class="divider hidden transition"></div>
+<div class="divider hidden"></div>
 `);
 });
 
@@ -35,7 +52,7 @@ test('hideScopedEmptyDividers-items-all-filtered', () => {
   hideScopedEmptyDividers(container);
   expect(container.innerHTML).toEqual(`
 <div class="any"></div>
-<div class="divider hidden transition"></div>
+<div class="divider hidden"></div>
 <div class="item filtered">a</div>
 <div class="item filtered">b</div>
 <div class="divider"></div>
@@ -52,7 +69,7 @@ test('hideScopedEmptyDividers-hide-last', () => {
   hideScopedEmptyDividers(container);
   expect(container.innerHTML).toEqual(`
 <div class="item">a</div>
-<div class="divider hidden transition" data-scope="b"></div>
+<div class="divider hidden" data-scope="b"></div>
 <div class="item tw-hidden" data-scope="b">b</div>
 `);
 });
@@ -68,9 +85,9 @@ test('hideScopedEmptyDividers-scoped-items', () => {
   hideScopedEmptyDividers(container);
   expect(container.innerHTML).toEqual(`
 <div class="item" data-scope="">a</div>
-<div class="divider hidden transition" data-scope="b"></div>
+<div class="divider hidden" data-scope="b"></div>
 <div class="item tw-hidden" data-scope="b">b</div>
-<div class="divider hidden transition" data-scope=""></div>
+<div class="divider hidden" data-scope=""></div>
 <div class="item" data-scope="">c</div>
 `);
 });

package/gitea/source/web_src/js/modules/fomantic/dropdown.ts

@@ -8,7 +8,6 @@ const fomanticDropdownFn = $.fn.dropdown;
 export function initAriaDropdownPatch() {
   if ($.fn.dropdown === ariaDropdownFn) throw new Error('initAriaDropdownPatch could only be called once');
   $.fn.dropdown = ariaDropdownFn;
-  $.fn.fomanticExt.onResponseKeepSelectedItem = onResponseKeepSelectedItem;
   $.fn.fomanticExt.onDropdownAfterFiltered = onDropdownAfterFiltered;
   (ariaDropdownFn as FomanticInitFunction).settings = fomanticDropdownFn.settings;
 }
@@ -254,22 +253,22 @@ function attachDomEvents(dropdown: HTMLElement, focusable: HTMLElement, menu: HT
   dropdown.addEventListener('mousedown', () => {
     ignoreClickPreVisible += isMenuVisible() ? 1 : 0;
     ignoreClickPreEvents++;
-  }, true);
+  }, {capture: true});
   dropdown.addEventListener('focus', () => {
     ignoreClickPreVisible += isMenuVisible() ? 1 : 0;
     ignoreClickPreEvents++;
     deferredRefreshAriaActiveItem();
-  }, true);
+  }, {capture: true});
   dropdown.addEventListener('blur', () => {
     ignoreClickPreVisible = ignoreClickPreEvents = 0;
     deferredRefreshAriaActiveItem(100);
-  }, true);
+  }, {capture: true});
   dropdown.addEventListener('mouseup', () => {
     setTimeout(() => {
       ignoreClickPreVisible = ignoreClickPreEvents = 0;
       deferredRefreshAriaActiveItem(100);
     }, 0);
-  }, true);
+  }, {capture: true});
   dropdown.addEventListener('click', (e: MouseEvent) => {
     if (isMenuVisible() &&
       ignoreClickPreVisible !== 2 && // dropdown is switch from invisible to visible
@@ -278,7 +277,7 @@ function attachDomEvents(dropdown: HTMLElement, focusable: HTMLElement, menu: HT
       e.stopPropagation(); // if the dropdown menu has been opened by focus, do not trigger the next click event again
     }
     ignoreClickPreEvents = ignoreClickPreVisible = 0;
-  }, true);
+  }, {capture: true});
 }
 
 // Although Fomantic Dropdown supports "hideDividers", it doesn't really work with our "scoped dividers"
@@ -296,8 +295,8 @@ export function hideScopedEmptyDividers(container: Element) {
   let curScope: string = '', lastVisibleScope: string = '';
   const isDivider = (item: Element) => item.classList.contains('divider');
   const isScopedDivider = (item: Element) => isDivider(item) && item.hasAttribute('data-scope');
-  const hideDivider = (item: Element) => item.classList.add('hidden', 'transition'); // dropdown has its own classes to hide items
-  const showDivider = (item: Element) => item.classList.remove('hidden', 'transition');
+  const hideDivider = (item: Element) => item.classList.add('hidden'); // dropdown has its own classes to hide items
+  const showDivider = (item: Element) => item.classList.remove('hidden');
   const isHidden = (item: Element) => item.classList.contains('hidden') || item.classList.contains('filtered') || item.classList.contains('tw-hidden');
   const handleScopeSwitch = (itemScope: string) => {
     if (curScopeVisibleItems.length === 1 && isScopedDivider(curScopeVisibleItems[0])) {
@@ -324,7 +323,7 @@ export function hideScopedEmptyDividers(container: Element) {
       handleScopeSwitch(itemScope);
     }
     if (!isHidden(item)) {
-      curScopeVisibleItems.push(item as HTMLElement);
+      curScopeVisibleItems.push(item);
     }
   }
   handleScopeSwitch('');
@@ -347,19 +346,3 @@ export function hideScopedEmptyDividers(container: Element) {
     if (visibleItems[i + 1].matches('.divider')) hideDivider(visibleItems[i]);
   }
 }
-
-function onResponseKeepSelectedItem(dropdown: typeof $ | HTMLElement, selectedValue: string) {
-  // There is a bug in fomantic dropdown when using "apiSettings" to fetch data
-  // * when there is a selected item, the dropdown insists on hiding the selected one from the list:
-  // * in the "filter" function: ('[data-value="'+value+'"]').addClass(className.filtered)
-  //
-  // When user selects one item, and click the dropdown again,
-  // then the dropdown only shows other items and will select another (wrong) one.
-  // It can't be easily fix by using setTimeout(patch, 0) in `onResponse` because the `onResponse` is called before another `setTimeout(..., timeLeft)`
-  // Fortunately, the "timeLeft" is controlled by "loadingDuration" which is always zero at the moment, so we can use `setTimeout(..., 10)`
-  const elDropdown = (dropdown instanceof HTMLElement) ? dropdown : (dropdown as any)[0];
-  setTimeout(() => {
-    queryElems(elDropdown, `.menu .item[data-value="${CSS.escape(selectedValue)}"].filtered`, (el) => el.classList.remove('filtered'));
-    $(elDropdown).dropdown('set selected', selectedValue ?? '');
-  }, 10);
-}

package/gitea/source/web_src/js/modules/fomantic/form.ts

@@ -1,13 +0,0 @@
-import {linkLabelAndInput} from './base.ts';
-
-export function initAriaFormFieldPatch() {
-  // link the label and the input element so it's clickable and accessible
-  for (const el of document.querySelectorAll('.ui.form .field')) {
-    if (el.hasAttribute('data-field-patched')) continue;
-    const label = el.querySelector(':scope > label');
-    const input = el.querySelector(':scope > input, :scope > select');
-    if (!label || !input) continue;
-    linkLabelAndInput(label, input);
-    el.setAttribute('data-field-patched', 'true');
-  }
-}

package/gitea/source/web_src/js/modules/fomantic/modal.ts

@@ -2,6 +2,27 @@ import type {FomanticInitFunction} from '../../types.ts';
 import {queryElems} from '../../utils/dom.ts';
 import {hideToastsFrom} from '../toast.ts';
 
+type ModalOpts = {
+  closable?: boolean;
+  onApprove?: (this: HTMLElement) => boolean | void;
+  onShow?: (this: HTMLElement) => void | Promise<void>;
+  onHide?: (this: HTMLElement) => void;
+  onHidden?: (this: HTMLElement) => void;
+};
+
+// thin wrapper around Fomantic's jQuery modal plugin so callers don't have to touch jQuery or fomanticQuery
+export function showFomanticModal(el: Element | null, opts: ModalOpts = {}) {
+  if (!el) return;
+  const $el = $(el);
+  if (Object.keys(opts).length) $el.modal(opts);
+  $el.modal('show');
+}
+
+export function hideFomanticModal(el: Element | null) {
+  if (!el) return;
+  $(el).modal('hide');
+}
+
 const fomanticModalFn = $.fn.modal;
 
 // use our own `$.fn.modal` to patch Fomantic's modal module

package/gitea/source/web_src/js/modules/fomantic/tab.ts

@@ -1,18 +1,18 @@
 import {queryElemSiblings} from '../../utils/dom.ts';
 
-export function initFomanticTab() {
-  $.fn.tab = function (this: any) {
-    for (const elBtn of this) {
-      const tabName = elBtn.getAttribute('data-tab');
-      if (!tabName) continue;
-      elBtn.addEventListener('click', () => {
-        const elTab = document.querySelector(`.ui.tab[data-tab="${tabName}"]`)!;
-        queryElemSiblings(elTab, `.ui.tab`, (el) => el.classList.remove('active'));
-        queryElemSiblings(elBtn, `[data-tab]`, (el) => el.classList.remove('active'));
-        elBtn.classList.add('active');
-        elTab.classList.add('active');
-      });
-    }
-    return this;
-  };
+export function initTabSwitcher(tabItemContainer: Element) {
+  // Clicking a `.item[data-tab]` menu item activates the matching `.ui.tab[data-tab=...]` panel
+  // This design is from Fomantic UI, and it has problems like :
+  // * The panel selector is global, callers should make sure the "data-tab" values don't conflict on the same page
+  const tabItems = tabItemContainer.querySelectorAll('.item[data-tab]');
+  for (const elItem of tabItems) {
+    const tabName = elItem.getAttribute('data-tab')!;
+    elItem.addEventListener('click', () => {
+      const elPanel = document.querySelector(`.ui.tab[data-tab="${CSS.escape(tabName)}"]`)!;
+      queryElemSiblings(elPanel, '.ui.tab', (el) => el.classList.remove('active'));
+      queryElemSiblings(elItem, '.item[data-tab]', (el) => el.classList.remove('active'));
+      elItem.classList.add('active');
+      elPanel.classList.add('active');
+    });
+  }
 }