gd-bs 6.6.90 → 6.6.92

package/src/components/dropdown/index.ts

@@ -1,10 +1,10 @@
 import { IDropdown, IDropdownItem, IDropdownProps } from "./types";
 import { ICheckboxGroup, ICheckboxGroupItem } from "../checkboxGroup/types";
-import { IPopover, IPopoverProps } from "../popover/types";
+import { IFloatingUI } from "../floating-ui/types";
 import { Base } from "../base";
 import { ButtonClassNames, ButtonTypes } from "../button";
 import { CheckboxGroup, CheckboxGroupTypes } from "../checkboxGroup"
-import { Popover, PopoverPlacements, PopoverTypes } from "../popover";
+import { FloatingUI, FloatingUIPlacements, FloatingUITypes } from "../floating-ui";
 import { DropdownFormItem } from "./formItem";
 import { DropdownItem } from "./item";
 import { HTML, HTMLForm, HTMLNavItem, HTMLSplit } from "./templates";
@@ -12,7 +12,7 @@ import { HTML, HTMLForm, HTMLNavItem, HTMLSplit } from "./templates";
 /**
  * Dropdown Types
  */
-export const DropdownPlacements = PopoverPlacements;
+export const DropdownPlacements = FloatingUIPlacements;
 export const DropdownTypes = ButtonTypes;
 
 // Gets the template
@@ -38,9 +38,9 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
     private _autoSelect: boolean = null;
     private _cb: ICheckboxGroup = null;
     private _elMenu: HTMLElement;
+    private _floatingUI: IFloatingUI = null;
     private _initFl: boolean = false;
     private _items: Array<DropdownFormItem | DropdownItem> = null;
-    private _popover: IPopover = null;
 
     // Constructor
     constructor(props: IDropdownProps, template: string = GetHTML(props)) {
@@ -213,64 +213,58 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         let toggle = this.el.querySelector(".dropdown-toggle") as HTMLElement;
         if (toggle && this._elMenu) {
             // Set the type, based on the current dropdown type
-            let popoverType = PopoverTypes.LightBorder;
+            let popoverType = FloatingUITypes.LightBorder;
             switch (this.props.type) {
                 case DropdownTypes.Danger:
                 case DropdownTypes.OutlineDanger:
-                    popoverType = PopoverTypes.Danger;
+                    popoverType = FloatingUITypes.Danger;
                     break;
                 case DropdownTypes.Dark:
                 case DropdownTypes.OutlineDark:
-                    popoverType = PopoverTypes.Dark;
+                    popoverType = FloatingUITypes.Dark;
                     break;
                 case DropdownTypes.Info:
                 case DropdownTypes.OutlineInfo:
-                    popoverType = PopoverTypes.Info;
+                    popoverType = FloatingUITypes.Info;
                     break;
                 case DropdownTypes.Light:
                 case DropdownTypes.OutlineLight:
                 case DropdownTypes.Link:
                 case DropdownTypes.OutlineLink:
-                    popoverType = PopoverTypes.Light;
+                    popoverType = FloatingUITypes.Light;
                     break;
                 case DropdownTypes.Primary:
                 case DropdownTypes.OutlinePrimary:
-                    popoverType = PopoverTypes.Primary;
+                    popoverType = FloatingUITypes.Primary;
                     break;
                 case DropdownTypes.Secondary:
                 case DropdownTypes.OutlineSecondary:
-                    popoverType = PopoverTypes.Secondary;
+                    popoverType = FloatingUITypes.Secondary;
                     break;
                 case DropdownTypes.Success:
                 case DropdownTypes.OutlineSuccess:
-                    popoverType = PopoverTypes.Success;
+                    popoverType = FloatingUITypes.Success;
                     break;
                 case DropdownTypes.Warning:
                 case DropdownTypes.OutlineWarning:
-                    popoverType = PopoverTypes.Warning;
+                    popoverType = FloatingUITypes.Warning;
                     break;
             }
 
-            // Create the props
-            let props: IPopoverProps = {
-                target: toggle,
-                placement: typeof (this.props.placement) === "number" ? this.props.placement : PopoverPlacements.BottomStart,
-                type: popoverType,
+            // Create the menu
+            this._floatingUI = FloatingUI({
+                className: "floating-dropdown",
+                elContent: this._elMenu,
+                elTarget: toggle,
+                placement: typeof (this.props.placement) === "number" ? this.props.placement : FloatingUIPlacements.BottomStart,
+                theme: popoverType,
                 options: {
                     arrow: false,
-                    trigger: "click",
-                    offset: [0, 4]
+                    flip: true,
+                    shift: true,
+                    trigger: "click"
                 }
-            };
-
-            // Call the render event
-            props = this.props.onMenuRendering ? this.props.onMenuRendering(props) : props;
-
-            // Create a popover to display the menu
-            this._popover = Popover(props);
-
-            // Set the popover content
-            this._popover.setContent(this._elMenu);
+            });
         }
     }
 
@@ -610,10 +604,10 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
     get isMulti(): boolean { return this.props.multi; }
 
     // Returns true if the dropdown menu is visible
-    get isVisible(): boolean { return this._popover ? this._popover.tippy.state.isVisible : false; }
+    get isVisible(): boolean { return this._floatingUI ? this._floatingUI.isVisible : false; }
 
-    // The popover menu
-    get popover(): IPopover { return this._popover; }
+    // The floating ui menu
+    get floatingUI(): IFloatingUI { return this._floatingUI; }
 
     // Sets the dropdown items
     setItems(newItems: Array<IDropdownItem> = []) {
@@ -653,7 +647,7 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
     }
 
     // Sets the label of the dropdown
-    setLabel(value: string) {
+    setLabel(value: string = "") {
         // Get the dropdown
         let ddl = this.el.querySelector(".dropdown-toggle");
         if (ddl) {
@@ -750,7 +744,7 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         // See if we are updating the label
         if (this.props.updateLabel) {
             // See if a value exists
-            if (value) {
+            if (value && typeof (value) === "string") {
                 // Set the label
                 this.setLabel(value);
             }
@@ -771,7 +765,7 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
     // Toggles the menu
     toggle() {
         // Toggle the popover
-        this._popover ? this._popover.toggle() : null;
+        this._floatingUI ? this._floatingUI.toggle() : null;
     }
 }
 export const Dropdown = (props: IDropdownProps, template?: string): IDropdown => { return new _Dropdown(props, template); }

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

@@ -48,12 +48,12 @@ export const Dropdown: (props: IDropdownProps, template?: string) => IDropdown;
 
 import { IBaseProps } from "../types";
 import { IButtonTypes } from "../button/types";
-import { IPopover, IPopoverProps, IPopoverPlacements } from "../popover/types";
+import { IFloatingUI, IFloatingUIProps, IFloatingUIPlacements } from "../floating-ui/types";
 
 /**
  * Dropdown Placements
  */
-export const DropdownPlacements: IPopoverPlacements;
+export const DropdownPlacements: IFloatingUIPlacements;
 
 /**
  * Dropdown Types
@@ -83,7 +83,7 @@ export interface IDropdown {
     isMulti: boolean;
 
     /** The popover menu. */
-    popover: IPopover;
+    floatingUI: IFloatingUI;
 
     /** Updates the dropdown items. */
     setItems: (items: Array<IDropdownItem>) => void;
@@ -152,7 +152,7 @@ export interface IDropdownProps extends IBaseProps<IDropdown> {
     multi?: boolean;
     navFl?: boolean;
     onChange?: (item?: IDropdownItem | Array<IDropdownItem>, ev?: Event) => void;
-    onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
+    onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
     placement?: number;
     required?: boolean;
     title?: string;

package/src/components/floating-ui/index.ts

@@ -0,0 +1,392 @@
+import { arrow, autoPlacement, computePosition, flip, hide, inline, offset, shift, size, ComputePositionConfig } from "@floating-ui/dom";
+import { setClassNames } from "../common";
+import { IFloatingUIProps, IFloatingUI } from "./types";
+export * as FloatingUILib from "@floating-ui/dom";
+
+
+/**
+ * Floating UI Placements
+ */
+export enum FloatingUIPlacements {
+    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
+}
+
+/**
+ * Floating UI Types
+ */
+export enum FloatingUITypes {
+    Danger = 1,
+    Dark = 2,
+    Info = 3,
+    Light = 4,
+    LightBorder = 5,
+    Material = 6,
+    Primary = 7,
+    Secondary = 8,
+    Success = 9,
+    Translucent = 10,
+    Warning = 11
+}
+
+/**
+ * Floating UI Element
+ */
+class _FloatingUI {
+    private _elArrow: HTMLElement = null;
+    private _elTarget: HTMLElement = null;
+    private _elContent: HTMLElement = null;
+    private _options: ComputePositionConfig = null;
+    private _props: IFloatingUIProps = null;
+
+    // Static events
+    private static Events = [];
+    private static EventsCreated = false;
+    private static ScrollEvents = [];
+
+    // Constructor
+    constructor(props: IFloatingUIProps) {
+        this._elTarget = props.elTarget;
+        this._props = props;
+
+        // Create the content element
+        this._elContent = document.createElement("div");
+        this._elContent.classList.add("bs");
+        this._elContent.classList.add("floating-ui");
+        this._elContent.appendChild(props.elContent);
+        this._elContent.setAttribute("data-theme", this.getTheme(this._props.theme));
+        setClassNames(this._elContent, this._props.className);
+
+        // Add the events
+        this.addEvents(props.options?.trigger);
+
+        // Create the floating ui element
+        this.create();
+
+        // Set the visibility
+        this._props.show ? this.show() : this.hide();
+    }
+
+    private addEvents(trigger: string = "") {
+        // Events
+        if (trigger.indexOf("mouse") >= 0) {
+            this._elTarget.addEventListener("mouseenter", () => { this.show(); });
+            this._elTarget.addEventListener("mouseleave", () => { this.hide(); });
+        }
+        if (trigger.indexOf("focus") >= 0) {
+            this._elTarget.addEventListener("focus", () => { this.show(); });
+            this._elTarget.addEventListener("blur", () => { this.hide(); });
+        }
+        if (trigger.indexOf("click") >= 0) {
+            this._elTarget.addEventListener("click", (ev) => {
+                // Call the event
+                this.isVisible ? this.hide() : this.show();
+            });
+        }
+
+        // Add the events
+        _FloatingUI.Events.push((ev: Event) => {
+            // See if it's outside the target element
+            if (!this._elTarget.contains(ev.target as any)) {
+                // Hide the element
+                this.hide();
+            }
+        });
+        _FloatingUI.ScrollEvents.push((ev: Event) => {
+            // Refresh the content
+            this.refresh();
+        });
+
+        // Ensure the click event exists
+        if (!_FloatingUI.EventsCreated) {
+            // Create the event
+            document.addEventListener("click", (ev) => {
+                // Wait for the other events to run
+                setTimeout(() => {
+                    // Parse the events
+                    _FloatingUI.Events.forEach(fnEvent => {
+                        // Call the event
+                        fnEvent(ev);
+                    });
+                }, 10);
+            });
+
+            // Create the scroll event
+            document.addEventListener("scroll", (ev) => {
+                // Wait for the other events to run
+                setTimeout(() => {
+                    // Parse the events
+                    _FloatingUI.ScrollEvents.forEach(fnEvent => {
+                        // Call the event
+                        fnEvent(ev);
+                    });
+                }, 10);
+            });
+
+            // Set the flag
+            _FloatingUI.EventsCreated = true;
+        }
+    }
+
+    // Creates the floating ui
+    private create() {
+        let placement = this.getPlacement(this._props.placement);
+        let middleware = this.getMiddleware(placement);
+
+        // See if we are adding an arrow
+        if (this._props.options?.arrow) {
+            // Create the element
+            this._elArrow = document.createElement("div");
+            this._elArrow.classList.add("arrow");
+            this._elContent.appendChild(this._elArrow);
+
+            // Add the plugin
+            middleware.push(arrow({ element: this._elArrow }));
+            middleware = [offset(6)].concat(middleware);
+        }
+
+        // Set the options
+        this._options = {
+            middleware,
+            placement: placement.placement as any
+        };
+    }
+
+    // Returns the plugins
+    private getMiddleware(placement: { autoPlacement: boolean; placement: string; }) {
+        let middleware = [];
+
+        // See if we are adding the offset option
+        if (this._props.options?.offset) {
+            middleware.push(offset(this._props.options.offset));
+        }
+
+        // See if we are adding the auto placement option
+        if (this._props.options?.autoPlacement || placement.autoPlacement) {
+            middleware.push(autoPlacement(this._props.options.autoPlacement));
+        }
+        // Else, see if we are adding the flip option
+        else if (this._props.options?.flip) {
+            middleware.push(flip());
+        }
+
+        // See if we are adding the hide option
+        if (this._props.options?.hide) {
+            middleware.push(hide(this._props.options.hide));
+        }
+
+        // See if we are adding the inline option
+        if (this._props.options?.inline) {
+            middleware.push(inline(this._props.options.inline));
+        }
+
+        // See if we are adding the shift option
+        if (this._props.options?.shift) {
+            middleware.push(shift(this._props.options?.shift));
+        }
+
+        // See if we are adding the size option
+        if (this._props.options?.size) {
+            middleware.push(size(this._props.options?.size));
+        }
+
+        // Return the middle ware
+        return middleware;
+    }
+
+    // Returns the placement information
+    private getPlacement(placementValue: number): { autoPlacement: boolean; placement: string; } {
+        let autoPlacement = false;
+        let placement = "top-end";
+
+        switch (placementValue) {
+            // Auto
+            case FloatingUIPlacements.Auto:
+                autoPlacement = true;
+                break;
+            case FloatingUIPlacements.AutoEnd:
+                placement = 'end';
+                autoPlacement = true;
+                break;
+            case FloatingUIPlacements.AutoStart:
+                placement = 'start';
+                autoPlacement = true;
+                break;
+            // Bottom
+            case FloatingUIPlacements.Bottom:
+                placement = "bottom";
+                break;
+            case FloatingUIPlacements.BottomEnd:
+                placement = "bottom-end";
+                break;
+            case FloatingUIPlacements.BottomStart:
+                placement = "bottom-start";
+                break;
+            // Left
+            case FloatingUIPlacements.Left:
+                placement = "left";
+                break;
+            case FloatingUIPlacements.LeftEnd:
+                placement = "left-end";
+                break;
+            case FloatingUIPlacements.LeftStart:
+                placement = "left-start";
+                break;
+            // Right
+            case FloatingUIPlacements.Right:
+                placement = "right";
+                break;
+            case FloatingUIPlacements.RightEnd:
+                placement = "right-end";
+                break;
+            case FloatingUIPlacements.RightStart:
+                placement = "right-start";
+                break;
+            // Top
+            case FloatingUIPlacements.Top:
+                placement = "top";
+                break;
+            case FloatingUIPlacements.TopEnd:
+                placement = "top-end";
+                break;
+            case FloatingUIPlacements.TopStart:
+                placement = "top-start";
+                break;
+        }
+
+        // Return the placement
+        return { autoPlacement, placement };
+    }
+
+    // Returns the theme
+    private getTheme(themeValue: number) {
+        let theme = null;
+
+        // Set the theme
+        switch (themeValue) {
+            // Dark
+            case FloatingUITypes.Dark:
+                theme = "dark";
+                break;
+            // Danger
+            case FloatingUITypes.Danger:
+                theme = "danger";
+                break;
+            // Info
+            case FloatingUITypes.Info:
+                theme = "info";
+                break;
+            // Light
+            case FloatingUITypes.Light:
+                theme = "light";
+                break;
+            case FloatingUITypes.LightBorder:
+                theme = "light-border";
+                break;
+            // Material
+            case FloatingUITypes.Material:
+                theme = "material";
+                break;
+            // Primary
+            case FloatingUITypes.Primary:
+                theme = "primary";
+                break;
+            // Secondary
+            case FloatingUITypes.Secondary:
+                theme = "secondary";
+                break;
+            // Success
+            case FloatingUITypes.Success:
+                theme = "success";
+                break;
+            // Translucent
+            case FloatingUITypes.Translucent:
+                theme = "translucent";
+                break;
+            // Warning
+            case FloatingUITypes.Warning:
+                theme = "warning";
+                break;
+            // Default - Light Border
+            default:
+                theme = "light-border";
+                break;
+        }
+
+        // Return the theme
+        return theme;
+    }
+
+    // Refresh the element position
+    private refresh() {
+        // Create the floating ui
+        computePosition(this._elTarget, this._elContent, this._options).then(({ x, y, middlewareData }) => {
+            // Update the location
+            Object.assign(this._elContent.style, {
+                left: `${x}px`,
+                top: `${y}px`
+            });
+
+            // See if the arrow exists
+            if (this._elArrow) {
+                let arrowX = middlewareData.arrow.x;
+                let arrowY = middlewareData.arrow.y;
+                let side = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right'
+                }[middlewareData.offset?.placement || this._options.placement.split('-')[0]]
+
+                // Update the location
+                Object.assign(this._elArrow.style, {
+                    left: arrowX != null ? `${arrowX}px` : '',
+                    top: arrowY != null ? `${arrowY}px` : '',
+                    right: '',
+                    bottom: '',
+                    [side]: '-4px'
+                });
+            }
+        });
+    }
+
+    /**
+     * Public Methods
+     */
+
+    setContent(el) { this._elContent = el; }
+
+    // Hides the content
+    hide() {
+        // Remove it from the document
+        this._elContent.classList.add("d-none");
+        if (document.body.contains(this._elContent)) { document.body.removeChild(this._elContent); }
+    }
+
+    // Determines if the content is visible
+    get isVisible(): boolean { return !this._elContent.classList.contains("d-none"); }
+
+    // Shows the content
+    show() {
+        // Append it to the document
+        this._elContent.classList.remove("d-none");
+        if (!document.body.contains(this._elContent)) { document.body.appendChild(this._elContent); this.refresh(); }
+    }
+
+    // Toggles the floating ui
+    toggle() { this.isVisible ? this.hide() : this.show(); }
+}
+export const FloatingUI = (props: IFloatingUIProps): IFloatingUI => { return new _FloatingUI(props); }

package/src/components/floating-ui/types.d.ts

@@ -0,0 +1,73 @@
+export const FloatingUI: (props: IFloatingUIProps) => IFloatingUI;
+
+import { IBaseProps } from "../types";
+
+export const FloatingUIPlacements: IFloatingUIPlacements;
+
+export interface IFloatingUI {
+    hide: () => void;
+    isVisible: boolean;
+    setContent: (el: string | Element) => void;
+    show: () => void;
+    toggle: () => void;
+}
+
+export interface IFloatingUIOptions {
+    arrow?: boolean;
+    autoPlacement?: boolean | any;
+    className?: string;
+    content?: string;
+    flip?: boolean | any;
+    hide?: boolean | any;
+    inline?: boolean | any;
+    offset?: number | any;
+    shift?: boolean | any;
+    size?: boolean | any;
+    trigger?: 'click' | 'focus' | 'mouse';
+}
+
+export interface IFloatingUIProps extends IBaseProps<IFloatingUI> {
+    elContent: HTMLElement;
+    elTarget: HTMLElement;
+    options?: IFloatingUIOptions;
+    placement?: number;
+    show?: boolean;
+    theme?: number;
+}
+
+/**
+ * Floating UI Placements
+ */
+export type IFloatingUIPlacements = {
+    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;
+}
+/**
+ * Floating UI
+ */
+export type IFloatingUITypes = {
+    Danger: number;
+    Dark: number;
+    Info: number;
+    Light: number;
+    LightBorder: number;
+    Material: number;
+    Primary: number;
+    Secondary: number;
+    Success: number;
+    Translucent: number;
+    Warning: number;
+}

package/src/components/form/controlTypes.d.ts

@@ -25,7 +25,7 @@ import { ICheckboxGroup, ICheckboxGroupItem } from "../checkboxGroup/types";
 import { IDropdown, IDropdownItem, IDropdownProps } from "../dropdown/types";
 import { IInputGroup } from "../inputGroup/types";
 import { IListBox } from "../listBox/types";
-import { IPopoverProps } from "../popover/types";
+import { IFloatingUIProps } from "../floating-ui/types";
 
 /**
  * Custom Controls
@@ -115,7 +115,7 @@ export interface IFormControlPropsDropdown extends IFormControlProps {
     onChange?: (item: IDropdownItem, ev?: Event) => void;
     onControlRendering?: (control: IFormControlPropsDropdown) => void | PromiseLike<IFormControlPropsDropdown>;
     onGetValue?: (control: IFormControlPropsDropdown) => any;
-    onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
+    onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
     onValidate?: (control: IFormControlPropsDropdown, results: IFormControlValidationResult<IDropdownItem>) => boolean | IFormControlValidationResult<IDropdownItem>;
 }
 
@@ -168,7 +168,7 @@ export interface IFormControlPropsMultiDropdown extends IFormControlProps {
     onChange?: (item: Array<IDropdownItem>, ev?: Event) => void;
     onControlRendering?: (control: IFormControlPropsDropdown) => void | PromiseLike<IFormControlPropsDropdown>;
     onGetValue?: (control: IFormControlPropsDropdown) => any;
-    onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
+    onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
     onValidate?: (control: IFormControlPropsDropdown, results: IFormControlValidationResult<Array<IDropdownItem>>) => boolean | IFormControlValidationResult<Array<IDropdownItem>>;
 }