Drop Fomantic tab, checkbox and form patches (#37377)

Clean up the fomantic helpers that nothing inside fomantic depends on.
Manually tested all functionality.

---------

Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/features/comp/ComboMarkdownEditor.ts

@@ -23,7 +23,7 @@ import {
 } from './EditorMarkdown.ts';
 import {DropzoneCustomEventReloadFiles, initDropzone} from '../dropzone.ts';
 import {createTippy} from '../../modules/tippy.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {initTabSwitcher} from '../../modules/fomantic/tab.ts';
 import type EasyMDE from 'easymde';
 import {localUserSettings} from '../../modules/user-settings.ts';
 
@@ -204,22 +204,21 @@ export class ComboMarkdownEditor {
   }
 
   setupTab() {
-    const tabs = this.container.querySelectorAll<HTMLElement>('.tabular.menu > .item');
-    if (!tabs.length) return;
+    const elTabular = this.container.querySelector('.ui.tabular');
+    if (!elTabular) return;
+    this.tabEditor = this.container.querySelector('[data-tab-for="markdown-writer"]')!;
+    this.tabPreviewer = this.container.querySelector('[data-tab-for="markdown-previewer"]')!;
+    const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]')!;
+    const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]')!;
 
     // Fomantic Tab requires the "data-tab" to be globally unique.
     // So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic.
     const tabIdSuffix = generateElemId();
-    const tabsArr = Array.from(tabs);
-    this.tabEditor = tabsArr.find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer')!;
-    this.tabPreviewer = tabsArr.find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer')!;
     this.tabEditor.setAttribute('data-tab', `markdown-writer-${tabIdSuffix}`);
     this.tabPreviewer.setAttribute('data-tab', `markdown-previewer-${tabIdSuffix}`);
-
-    const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]')!;
-    const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]')!;
     panelEditor.setAttribute('data-tab', `markdown-writer-${tabIdSuffix}`);
     panelPreviewer.setAttribute('data-tab', `markdown-previewer-${tabIdSuffix}`);
+    initTabSwitcher(elTabular);
 
     this.tabEditor.addEventListener('click', () => {
       requestAnimationFrame(() => {
@@ -227,8 +226,6 @@ export class ComboMarkdownEditor {
       });
     });
 
-    fomanticQuery(tabs).tab();
-
     this.tabPreviewer.addEventListener('click', async () => {
       const formData = new FormData();
       formData.append('mode', this.previewMode);

web_src/js/features/comp/ConfirmModal.ts

@@ -1,7 +1,7 @@
 import {svg} from '../../svg.ts';
 import {html, htmlRaw} from '../../utils/html.ts';
 import {createElementFromHTML} from '../../utils/dom.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {showFomanticModal} from '../../modules/fomantic/modal.ts';
 import {hideToastsAll} from '../../modules/toast.ts';
 
 const {i18n} = window.config;
@@ -32,15 +32,14 @@ export function confirmModal(modal: HTMLElement | ConfirmModalOptions): Promise<
   // it's fine to do so because the modal is triggered by user's explicit action, so the user should already have read the toast messages
   hideToastsAll();
   return new Promise((resolve) => {
-    const $modal = fomanticQuery(modal);
-    $modal.modal({
+    showFomanticModal(modal, {
       onApprove() {
         resolve(true);
       },
       onHidden() {
-        $modal.remove();
+        modal.remove();
         resolve(false);
       },
-    }).modal('show');
+    });
   });
 }

web_src/js/features/comp/LabelEdit.ts

@@ -1,5 +1,5 @@
 import {toggleElem} from '../../utils/dom.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {showFomanticModal} from '../../modules/fomantic/modal.ts';
 import {submitFormFetchAction} from '../common-fetch-action.ts';
 
 function nameHasScope(name: string): boolean {
@@ -65,7 +65,7 @@ export function initCompLabelEdit(pageSelector: string) {
     form.action = isEdit ? `${curPageLink}/edit` : `${curPageLink}/new`;
     toggleElem(elIsArchivedField, isEdit);
     syncModalUi();
-    fomanticQuery(elModal).modal({
+    showFomanticModal(elModal, {
       onApprove() {
         if (!form.checkValidity()) {
           form.reportValidity();
@@ -74,7 +74,7 @@ export function initCompLabelEdit(pageSelector: string) {
         submitFormFetchAction(form);
         return false;
       },
-    }).modal('show');
+    });
   };
 
   elModal.addEventListener('input', () => syncModalUi());