@windwalker-io/unicorn-next 0.1.0 → 0.1.1

package/src/module/ui-bootstrap5.ts

@@ -1,107 +1,116 @@
-import * as bootstrap from 'bootstrap';
-import { Tooltip } from 'bootstrap';
-import type { ButtonRadio, ButtonRadioModule, ButtonRadioOptions } from '../bootstrap/button-radio';
-import type { KeepTab, KeepTabModule, KeepTabOptions } from '../bootstrap/keep-tab';
-import { getBoundedInstanceList, html, selectAll, selectOne } from '../service';
-import type { UIThemeInterface } from '../types';
-
-export class UIBootstrap5 implements UIThemeInterface {
-  static instance: UIBootstrap5 | null = null;
-
-  bootstrap = bootstrap;
-
-  static get() {
-    return this.instance ??= new this();
-  }
-
-  renderMessage(messages: string | string[], type: string = 'info') {
-    if (!Array.isArray(messages)) {
-      messages = [messages];
-    }
-
-    let text = '';
-
-    messages.forEach((msg) => {
-      text += `<div class="">${msg}</div>`;
-    });
-
-    const msgHtml = html(`<div class="alert alert-${type} alert-dismissible fade show" role="alert">
-  ${text}
-  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-</div>`);
-
-    const container = selectOne('.c-messages-container');
-
-    if (container) {
-      container.appendChild(msgHtml);
-    }
-  }
-
-  clearMessages() {
-    const container = selectOne('.c-messages-container');
-
-    if (container) {
-      container.innerHTML = '';
-    }
-  }
-
-  async keepTab(): Promise<KeepTabModule>;
-  async keepTab(selector?: string | HTMLElement, options?: KeepTabOptions): Promise<KeepTab>;
-  async keepTab(selector?: string | HTMLElement, options: KeepTabOptions = {}): Promise<any> {
-    const module = await import('../bootstrap/keep-tab');
-
-    await module.ready;
-
-    if (selector) {
-      return new module.KeepTab(selector, options);
-    }
-
-    return module;
-  }
-
-  async buttonRadio(): Promise<ButtonRadioModule>;
-  async buttonRadio(selector?: string | HTMLElement, options?: ButtonRadioOptions): Promise<ButtonRadio>;
-  async buttonRadio(selector?: string | HTMLElement, options: ButtonRadioOptions = {}): Promise<any> {
-    const m = await import('../bootstrap/button-radio');
-
-    await m.ready;
-
-    if (selector) {
-      return m.ButtonRadio.handle(selector, options);
-    }
-
-    return m;
-  }
-
-  tooltip(
-    selector: NodeListOf<Element> | Element | string = '[data-bs-toggle="tooltip"]',
-    config: Partial<Tooltip.Options> = {}
-  ): Tooltip[] {
-    return this.selectAsArray(selector)
-      .map((ele) => Tooltip.getOrCreateInstance(ele, config));
-  }
-
-  protected selectAsArray(selector: NodeListOf<Element> | Element | string) {
-    if (selector instanceof NodeList) {
-      return Array.from(selector);
-    } else if (typeof selector === 'string') {
-      return selectAll(selector);
-    } else {
-      return [selector];
-    }
-  }
-
-  getMajorVersion(module: any) {
-    return Number(module.VERSION.split('.').shift());
-  }
-
-  pushBootstrapToGlobal() {
-    window.bootstrap = bootstrap;
-  }
-}
-
-declare global {
-  export interface Window {
-    bootstrap: typeof bootstrap;
-  }
-}
+import * as bootstrap from 'bootstrap';
+import { Tooltip } from 'bootstrap';
+import type { ButtonRadio, ButtonRadioModule, ButtonRadioOptions } from '../bootstrap/button-radio';
+import type { KeepTab, KeepTabModule, KeepTabOptions } from '../bootstrap/keep-tab';
+import { html, selectAll, selectOne, uid } from '../service';
+import type { UIThemeInterface } from '../types';
+
+export class UIBootstrap5 implements UIThemeInterface {
+  static instance: UIBootstrap5 | null = null;
+
+  bootstrap = bootstrap;
+
+  static get() {
+    return this.instance ??= new this();
+  }
+
+  renderMessage(messages: string | string[], type: string = 'info'): () => void {
+    if (!Array.isArray(messages)) {
+      messages = [messages];
+    }
+
+    let text = '';
+    const id = 'uni-msg-' + uid();
+
+    messages.forEach((msg) => {
+      text += `<div class="">${msg}</div>`;
+    });
+
+    const msgHtml = html(`<div id="${id}" class="alert alert-${type} alert-dismissible fade show" role="alert">
+  ${text}
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>`);
+
+    const container = selectOne('.c-messages-container');
+
+    if (container) {
+      container.appendChild(msgHtml);
+    }
+
+    return () => {
+      const ele = document.getElementById(id);
+
+      if (ele) {
+        ele.remove();
+      }
+    }
+  }
+
+  clearMessages() {
+    const container = selectOne('.c-messages-container');
+
+    if (container) {
+      container.innerHTML = '';
+    }
+  }
+
+  async keepTab(): Promise<KeepTabModule>;
+  async keepTab(selector?: string | HTMLElement, options?: KeepTabOptions): Promise<KeepTab>;
+  async keepTab(selector?: string | HTMLElement, options: KeepTabOptions = {}): Promise<any> {
+    const module = await import('../bootstrap/keep-tab');
+
+    await module.ready;
+
+    if (selector) {
+      return new module.KeepTab(selector, options);
+    }
+
+    return module;
+  }
+
+  async buttonRadio(): Promise<ButtonRadioModule>;
+  async buttonRadio(selector?: string | HTMLElement, options?: ButtonRadioOptions): Promise<ButtonRadio>;
+  async buttonRadio(selector?: string | HTMLElement, options: ButtonRadioOptions = {}): Promise<any> {
+    const m = await import('../bootstrap/button-radio');
+
+    await m.ready;
+
+    if (selector) {
+      return m.ButtonRadio.handle(selector, options);
+    }
+
+    return m;
+  }
+
+  tooltip(
+    selector: NodeListOf<Element> | Element | string = '[data-bs-toggle="tooltip"]',
+    config: Partial<Tooltip.Options> = {}
+  ): Tooltip[] {
+    return this.selectAsArray(selector)
+      .map((ele) => Tooltip.getOrCreateInstance(ele, config));
+  }
+
+  protected selectAsArray(selector: NodeListOf<Element> | Element | string) {
+    if (selector instanceof NodeList) {
+      return Array.from(selector);
+    } else if (typeof selector === 'string') {
+      return selectAll(selector);
+    } else {
+      return [selector];
+    }
+  }
+
+  getMajorVersion(module: any) {
+    return Number(module.VERSION.split('.').shift());
+  }
+
+  pushBootstrapToGlobal() {
+    window.bootstrap = bootstrap;
+  }
+}
+
+declare global {
+  export interface Window {
+    bootstrap: typeof bootstrap;
+  }
+}