gd-bs 6.6.90 → 6.6.92

package/src/components/index.ts

@@ -1,3 +1,4 @@
+// Components
 export * from "./accordion";
 export * from "./alert";
 export * from "./badge";
@@ -10,6 +11,7 @@ export * from "./carousel";
 export * from "./checkboxGroup";
 export * from "./collapse";
 export * from "./dropdown";
+export * from "./floating-ui";
 export * from "./form";
 export * from "./iconLink";
 export * from "./inputGroup";
@@ -29,4 +31,7 @@ export * from "./table";
 export * from "./toast";
 export * from "./toolbar";
 export * from "./tooltip";
-export * from "./tooltipGroup";
+export * from "./tooltipGroup";
+
+// Custom Elements
+export * from "./custom-element";

package/src/components/modal/index.ts

@@ -82,6 +82,9 @@ class _Modal extends Base<IModalProps> implements IModal {
             }
         }
 
+        // Set the header
+        appendContent(this.el.querySelector(".modal-header"), this.props.header);
+
         // Set the body
         appendContent(this.el.querySelector(".modal-body"), this.props.body);
 
@@ -299,12 +302,15 @@ class _Modal extends Base<IModalProps> implements IModal {
     }
 
     // Updates the title
-    setTitle(title: string) {
+    setTitle(title: string | Element) {
         // Get the title
-        let elTitle = this.el.querySelector(".modal-title");
+        let elTitle = this.el.querySelector(".modal-title") as HTMLElement;
         if (elTitle) {
-            // Set the text
-            elTitle.innerHTML = title == null ? "" : title;
+            // Clear the element
+            while (elTitle.firstChild) { elTitle.removeChild(elTitle.firstChild); }
+
+            // Append the content
+            appendContent(elTitle, title);
         }
     }
 

package/src/components/modal/types.d.ts

@@ -76,7 +76,7 @@ import { IBaseProps } from "../types";
 /**
  * Modal
  */
-export interface IModal {
+export interface IModal<T = HTMLElement> {
     /** The element. */
     el: HTMLElement;
 
@@ -108,7 +108,7 @@ export interface IModal {
     setScrollable: (value: boolean) => void;
 
     /** Updates the title. */
-    setTitle: (title: string) => void;
+    setTitle: (title: string | T) => void;
 
     /** Updates the type. */
     setType: (modalType: number) => void;
@@ -153,6 +153,7 @@ export interface IModalProps<T = HTMLElement> extends IBaseProps<IModal> {
     body?: string | T;
     disableFade?: boolean;
     footer?: string | T;
+    header?: string | T;
     hideCloseButton?: boolean;
     id?: string;
     onClose?: (el: HTMLDivElement) => void;

package/src/components/nav/index.ts

@@ -11,7 +11,7 @@ class _Nav extends Base<INavProps> implements INav {
     private _links: Array<NavLink> = null;
 
     // Constructor
-    constructor(props: INavProps, template: string = props.isTabs ? (props.isVertical ? HTMLVerticalTabs : HTMLTabs) : HTML, itemTemplate?: string) {
+    constructor(props: INavProps, template: string = props.menuOnly ? HTML : (props.isVertical ? HTMLVerticalTabs : HTMLTabs), itemTemplate?: string) {
         super(template, props);
 
         // Configure the collapse
@@ -30,12 +30,12 @@ class _Nav extends Base<INavProps> implements INav {
         let nav = this.el.classList.contains("nav") ? this.el : this.el.querySelector(".nav");
         if (nav) {
             this.props.id ? nav.id = this.props.id : null;
-            this.props.enableFill ? this.el.classList.add("nav-fill") : null;
-            this.props.isJustified ? this.el.classList.add("nav-justified") : null;
-            this.props.isPills ? this.el.classList.add("nav-pills") : null;
-            this.props.isTabs ? this.el.classList.add("nav-tabs") : null;
-            this.props.isUnderline ? this.el.classList.add("nav-underline") : null;
-            this.props.isVertical ? this.el.classList.add("flex-column") : null;
+            this.props.enableFill ? nav.classList.add("nav-fill") : null;
+            this.props.isJustified ? nav.classList.add("nav-justified") : null;
+            this.props.isPills ? nav.classList.add("nav-pills") : null;
+            this.props.isTabs ? nav.classList.add("nav-tabs") : null;
+            this.props.isUnderline ? nav.classList.add("nav-underline") : null;
+            this.props.isVertical ? nav.classList.add("flex-column") : null;
         }
 
         // Render the nav links

package/src/components/nav/templates.ts

@@ -14,7 +14,7 @@ export const HTMLTab = `<div class="tab-pane" role="tabpanel"></div>`;
 export const HTMLTabs = `
 <div class="row">
     <div class="col">
-        <ul class="nav nav-tabs" role="tablist"></ul>
+        <ul class="nav" role="tablist"></ul>
         <div class="tab-content"></div>
     </div>
 </div>`.trim();

package/src/components/nav/types.d.ts

@@ -92,6 +92,7 @@ export interface INavProps<T = HTMLElement> extends IBaseProps<INav> {
     isTabs?: boolean;
     isUnderline?: boolean;
     isVertical?: boolean;
+    menuOnly?: boolean;
     onClick?: (newTab?: INavLink, prevTab?: INavLink) => void;
     onLinkRendered?: (el?: HTMLElement, item?: INavLinkProps) => void;
     onRendered?: (el?: HTMLElement) => void;

package/src/components/navbar/types.d.ts

@@ -92,7 +92,7 @@ export const NavbarTypes: INavbarTypes;
 
 import { IBaseProps } from "../types";
 import { IDropdownItem } from "../dropdown/types";
-import { IPopoverProps } from "../popover/types";
+import { IFloatingUIProps } from "../floating-ui/types";
 
 /**
  * Navbar
@@ -130,7 +130,7 @@ export interface INavbarItem {
     isDisabled?: boolean;
     items?: Array<IDropdownItem>;
     onClick?: (item?: INavbarItem, ev?: Event) => void;
-    onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
+    onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
     onRender?: (el?: HTMLElement, item?: INavbarItem) => void;
     target?: string;
     text?: string;

package/src/components/popover/index.ts

@@ -1,9 +1,9 @@
-import tippy, { animateFill, followCursor, inlinePositioning, sticky } from "tippy.js";
-import { ITippyProps } from "../types";
-import { IPopover, IPopoverProps } from "./types";
+import { IFloatingUI } from "../floating-ui/types";
 import { Button } from "../button";
 import { Base } from "../base";
 import { appendContent, setClassNames } from "../common";
+import { FloatingUI, FloatingUIPlacements } from "../floating-ui";
+import { IPopover, IPopoverProps } from "./types";
 
 /**
  * Popover Types
@@ -25,30 +25,14 @@ export enum PopoverTypes {
 /**
  * Popover Placements
  */
-export enum PopoverPlacements {
-    Auto = 1,
-    AutoStart = 2,
-    AutoEnd = 3,
-    Bottom = 4,
-    BottomStart = 5,
-    BottomEnd = 6,
-    Left = 7,
-    LeftStart = 8,
-    LeftEnd = 9,
-    Right = 10,
-    RightStart = 11,
-    RightEnd = 12,
-    Top = 13,
-    TopStart = 14,
-    TopEnd = 15
-}
+export { FloatingUIPlacements as PopoverPlacements }
 
 /**
  * Popover
  */
 class _Popover extends Base<IPopoverProps> implements IPopover {
     private _elContent: HTMLDivElement = null;
-    private _tippy = null;
+    private _floatingUI: IFloatingUI = null;
 
     // Constructor
     constructor(props: IPopoverProps, template: string = "") {
@@ -63,143 +47,6 @@ class _Popover extends Base<IPopoverProps> implements IPopover {
 
     // Configure the card group
     private configure() {
-        // Set the placements
-        let placement = null;
-        switch (this.props.placement) {
-            // Auto
-            case PopoverPlacements.Auto:
-                placement = "auto";
-                break;
-            case PopoverPlacements.AutoEnd:
-                placement = "auto-end";
-                break;
-            case PopoverPlacements.AutoStart:
-                placement = "auto-start";
-                break;
-            // Bottom
-            case PopoverPlacements.Bottom:
-                placement = "bottom";
-                break;
-            case PopoverPlacements.BottomEnd:
-                placement = "bottom-end";
-                break;
-            case PopoverPlacements.BottomStart:
-                placement = "bottom-start";
-                break;
-            // Left
-            case PopoverPlacements.Left:
-                placement = "left";
-                break;
-            case PopoverPlacements.LeftEnd:
-                placement = "left-end";
-                break;
-            case PopoverPlacements.LeftStart:
-                placement = "left-start";
-                break;
-            // Right
-            case PopoverPlacements.Right:
-                placement = "right";
-                break;
-            case PopoverPlacements.RightEnd:
-                placement = "right-end";
-                break;
-            case PopoverPlacements.RightStart:
-                placement = "right-start";
-                break;
-            // Top
-            case PopoverPlacements.Top:
-                placement = "top";
-                break;
-            case PopoverPlacements.TopEnd:
-                placement = "top-end";
-                break;
-            case PopoverPlacements.TopStart:
-                placement = "top-start";
-                break;
-            // Default - Auto
-            default:
-                placement = "top";
-                break;
-        }
-
-        // Set the theme
-        let theme = null;
-        switch (this.props.type) {
-            // Dark
-            case PopoverTypes.Dark:
-                theme = "dark";
-                break;
-            // Danger
-            case PopoverTypes.Danger:
-                theme = "danger";
-                break;
-            // Info
-            case PopoverTypes.Info:
-                theme = "info";
-                break;
-            // Light
-            case PopoverTypes.Light:
-                theme = "light";
-                break;
-            case PopoverTypes.LightBorder:
-                theme = "light-border";
-                break;
-            // Material
-            case PopoverTypes.Material:
-                theme = "material";
-                break;
-            // Primary
-            case PopoverTypes.Primary:
-                theme = "primary";
-                break;
-            // Secondary
-            case PopoverTypes.Secondary:
-                theme = "secondary";
-                break;
-            // Success
-            case PopoverTypes.Success:
-                theme = "success";
-                break;
-            // Translucent
-            case PopoverTypes.Translucent:
-                theme = "translucent";
-                break;
-            // Warning
-            case PopoverTypes.Warning:
-                theme = "warning";
-                break;
-            // Default - Light Border
-            default:
-                theme = "light-border";
-                break;
-        }
-
-        // Set the options
-        let options: ITippyProps = {
-            ...{
-                allowHTML: true,
-                appendTo: document.body,
-                animation: "scale",
-                arrow: true,
-                delay: 100,
-                inertia: true,
-                interactive: true,
-                placement,
-                plugins: [animateFill, followCursor, inlinePositioning, sticky],
-                theme,
-                popperOptions: {
-                    modifiers: [{
-                        name: "preventOverflow",
-                        options: {
-                            altAxis: true,
-                            tether: false
-                        }
-                    }]
-                }
-            },
-            ...this.props.options
-        };
-
         // See if we are targeting an element
         let elPopover: HTMLElement = null;
         if (this.props.target) {
@@ -219,44 +66,28 @@ class _Popover extends Base<IPopoverProps> implements IPopover {
             this.el = Button(btnProps).el;
         }
 
-        // Create the popover content element
-        this._elContent = document.createElement("div") as HTMLDivElement;
+        // Create the content element
+        this._elContent = document.createElement("div");
         this._elContent.classList.add("popover");
-        this._elContent.classList.add("popover-content");
+        setClassNames(this._elContent, this.props.className);
         this._elContent.innerHTML = '<div class="popover-header"></div><div class="popover-body"></div>';
         appendContent(this._elContent.querySelector(".popover-header"), this.props.title);
         setClassNames(this._elContent.querySelector(".popover-header"), this.props.classNameHeader);
-        appendContent(this._elContent.querySelector(".popover-body"), options.content as any);
+        appendContent(this._elContent.querySelector(".popover-body"), this.props.options?.content);
         setClassNames(this._elContent.querySelector(".popover-body"), this.props.classNameBody);
-        options.content = this._elContent;
-
-        // Set the on create event
-        options["onCreate"] = (tippyObj) => {
-            // Get the content element
-            let elContent = tippyObj.popper.querySelector(".tippy-content") as HTMLElement;
-            if (elContent) {
-                // Set the class
-                elContent.classList.add("bs");
-
-                // Set the styling
-                elContent.style.padding = "0";
 
-                // Get the custom class name(s)
-                let custom = (this.props.className || "").trim().split(" ");
-                for (let i = 0; i < custom.length; i++) {
-                    let className = custom[i];
-
-                    // Add the custom class name
-                    className ? elContent.classList.add(custom[i]) : null;
-                }
-            }
-
-            // Call the custom event if it's defined
-            this.props.options && this.props.options.onCreate ? this.props.options.onCreate(tippyObj) : null;
-        }
-
-        // Create the tippy
-        this._tippy = tippy(this.el, options as any);
+        // Create the floating ui
+        this._floatingUI = FloatingUI({
+            elContent: this._elContent,
+            elTarget: this.el,
+            options: {
+                ...{ arrow: true, flip: true, shift: { padding: 5 } },
+                ...this.props.options
+            },
+            placement: this.props.placement,
+            show: this.props.show,
+            theme: this.props.type
+        });
     }
 
     /**
@@ -276,20 +107,17 @@ class _Popover extends Base<IPopoverProps> implements IPopover {
     }
 
     // Hides the popover
-    hide() {
-        // See if it's visible
-        if (this.isVisible) { this._tippy.hide(); }
-    }
+    hide() { this._floatingUI.hide(); }
 
     // Determines if the popover is visible
-    get isVisible(): boolean { return this._tippy.state.isVisible; }
+    get isVisible(): boolean { return this._floatingUI.isVisible; }
 
-    // The tippy instance
-    get tippy() { return this._tippy; }
+    // The floating ui instand
+    get floatingUI() { return this._floatingUI; }
 
     // Sets the popover body element
     setBody(content: string | Element) {
-        let elBody: HTMLElement = this.tippy.popper.querySelector(".popover-body");
+        let elBody: HTMLElement = this._elContent.querySelector(".popover-body");
         if (elBody) {
             // Clear the content
             while (elBody.firstChild) { elBody.removeChild(elBody.firstChild); }
@@ -301,13 +129,22 @@ class _Popover extends Base<IPopoverProps> implements IPopover {
 
     // Sets the tippy content
     setContent(content: string | Element) {
-        // Set the tippy content
-        this.tippy.setContent(content);
+        // See if this is a string
+        if (typeof (content) === "string") {
+            // Set the content
+            this._elContent.innerHTML = content;
+        } else {
+            // Clear the content
+            while (this._elContent.firstChild) { this._elContent.removeChild(this._elContent.firstChild); }
+
+            // Append the content
+            appendContent(this._elContent, content);
+        }
     }
 
     // Sets the popover header element
     setHeader(content: string | Element) {
-        let elHeader: HTMLElement = this.tippy.popper.querySelector(".popover-header");
+        let elHeader: HTMLElement = this._elContent.querySelector(".popover-header");
         if (elHeader) {
             // Clear the content
             while (elHeader.firstChild) { elHeader.removeChild(elHeader.firstChild); }
@@ -318,10 +155,7 @@ class _Popover extends Base<IPopoverProps> implements IPopover {
     }
 
     // Shows the popover
-    show() {
-        // See if it's hidden
-        if (!this.isVisible) { this._tippy.show(); }
-    }
+    show() { this._floatingUI.show(); }
 
     // Toggles the popover
     toggle() {

package/src/components/popover/types.d.ts

@@ -55,15 +55,16 @@ export const Popover: (props: IPopoverProps, template?: string) => IPopover;
 /**
  * Popover Placements
  */
-export const PopoverPlacements: IPopoverPlacements;
+export const PopoverPlacements: IFloatingUIPlacements;
 
 /**
  * Popover Types
  */
-export const PopoverTypes: IPopoverTypes;
+export const PopoverTypes: IFloatingUITypes;
 
-import { IBaseProps, ITippyProps } from "../types";
+import { IBaseProps } from "../types";
 import { IButtonProps } from "../button/types";
+import { IFloatingUIOptions, IFloatingUIPlacements, IFloatingUITypes } from "../floating-ui/types";
 
 /**
  * Popover
@@ -72,8 +73,8 @@ export interface IPopover {
     /** The element. */
     el: HTMLElement;
 
-    /** The tippy instance. */
-    tippy: any;
+    /** The floating ui instance. */
+    floatingUI: any;
 
     /** Enables the popover. */
     enable: () => void;
@@ -81,13 +82,16 @@ export interface IPopover {
     /** Hides an element’s popover. */
     hide: () => void;
 
+    /** True if the popover is visible, false otherwise. */
+    isVisible: boolean;
+
     /** Toggles an element's popover. */
     toggle: () => void;
 
     /** Sets the body element of the popover. */
     setBody: (content: string | Element) => void;
 
-    /** Sets the tippy content. */
+    /** Sets the floating ui content. */
     setContent: (content: string | Element) => void;
 
     /** Sets the header element of the popover. */
@@ -105,47 +109,10 @@ export interface IPopoverProps extends IBaseProps<IPopover> {
     classNameBody?: string;
     classNameHeader?: string;
     isDismissible?: boolean;
-    options?: ITippyProps;
+    options?: IFloatingUIOptions;
     placement?: number;
+    show?: boolean;
     target?: HTMLElement,
     title?: string;
     type?: number;
-}
-
-/**
- * Popover Types
- */
-export type IPopoverTypes = {
-    Danger: number;
-    Dark: number;
-    Info: number;
-    Light: number;
-    LightBorder: number;
-    Material: number;
-    Primary: number;
-    Secondary: number;
-    Success: number;
-    Translucent: number;
-    Warning: number;
-}
-
-/**
- * Popover Placements
- */
-export type IPopoverPlacements = {
-    Auto: number;
-    AutoStart: number;
-    AutoEnd: number;
-    Bottom: number;
-    BottomStart: number;
-    BottomEnd: number;
-    Left: number;
-    LeftStart: number;
-    LeftEnd: number;
-    Right: number;
-    RightStart: number;
-    RightEnd: number;
-    Top: number;
-    TopStart: number;
-    TopEnd: number;
 }