@windwalker-io/unicorn-next 0.1.0

package/src/module/ui-bootstrap5.ts

@@ -0,0 +1,107 @@
+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;
+  }
+}