gd-bs 6.6.90 → 6.6.92

package/src/components/tooltip/index.ts

@@ -1,5 +1,4 @@
-import tippy, { animateFill, followCursor, inlinePositioning, sticky } from "tippy.js";
-import { ITippyProps } from "../types";
+import { IFloatingUI } from "../floating-ui/types";
 import { ITooltip, ITooltipProps } from "./types";
 import { Base } from "../base";
 import { IButton } from "../button/types";
@@ -7,6 +6,7 @@ import { Button, ButtonTypes } from "../button";
 import { IDropdown } from "../dropdown/types";
 import { Dropdown, DropdownTypes } from "../dropdown";
 import { appendContent } from "../common";
+import { FloatingUI, FloatingUIPlacements } from "../floating-ui";
 
 /**
  * Tooltip Types
@@ -28,23 +28,7 @@ export enum TooltipTypes {
 /**
  * Tooltip Placements
  */
-export enum TooltipPlacements {
-    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 TooltipPlacements }
 
 /**
  * Tooltip
@@ -53,7 +37,7 @@ class _Tooltip extends Base<ITooltipProps> {
     private _btn: IButton = null;
     private _ddl: IDropdown = null;
     private _elContent: HTMLElement = null;
-    private _tippy = null;
+    private _floatingUI: IFloatingUI = null;
 
     // Constructor
     constructor(props: ITooltipProps, template: string = "") {
@@ -106,65 +90,6 @@ class _Tooltip extends Base<ITooltipProps> {
 
     // Configure the options
     private configureOptions() {
-        // Set the placements
-        let placement = null;
-        switch (this.props.placement) {
-            // Auto
-            case TooltipPlacements.Auto:
-                placement = "auto";
-                break;
-            case TooltipPlacements.AutoEnd:
-                placement = "auto-end";
-                break;
-            case TooltipPlacements.AutoStart:
-                placement = "auto-start";
-                break;
-            // Bottom
-            case TooltipPlacements.Bottom:
-                placement = "bottom";
-                break;
-            case TooltipPlacements.BottomEnd:
-                placement = "bottom-end";
-                break;
-            case TooltipPlacements.BottomStart:
-                placement = "bottom-start";
-                break;
-            // Left
-            case TooltipPlacements.Left:
-                placement = "left";
-                break;
-            case TooltipPlacements.LeftEnd:
-                placement = "left-end";
-                break;
-            case TooltipPlacements.LeftStart:
-                placement = "left-start";
-                break;
-            // Right
-            case TooltipPlacements.Right:
-                placement = "right";
-                break;
-            case TooltipPlacements.RightEnd:
-                placement = "right-end";
-                break;
-            case TooltipPlacements.RightStart:
-                placement = "right-start";
-                break;
-            // Top
-            case TooltipPlacements.Top:
-                placement = "top";
-                break;
-            case TooltipPlacements.TopEnd:
-                placement = "top-end";
-                break;
-            case TooltipPlacements.TopStart:
-                placement = "top-start";
-                break;
-            // Default - Auto
-            default:
-                placement = "top";
-                break;
-        }
-
         // Set the theme
         let theme = null;
         switch (this.props.type) {
@@ -272,30 +197,16 @@ class _Tooltip extends Base<ITooltipProps> {
                 break;
         }
 
-        // Set the options
-        let options: ITippyProps = {
-            ...{
-                allowHTML: false,
-                animation: "scale",
-                arrow: true,
-                content: this.props.content,
-                delay: 100,
-                inertia: true,
-                interactive: false,
-                placement,
-                plugins: [animateFill, followCursor, inlinePositioning, sticky],
-                theme
-            },
-            ...this.props.options
-        };
-
-        // Create the tooltip content element
-        this._elContent = document.createElement("div") as HTMLElement;
-        this._elContent.classList.add("tooltip-content");
-        appendContent(this._elContent, options.content as any);
-        options.content = this._elContent;
+        // Set the tooltip content element
+        if (typeof (this.props.content) === "string") {
+            this._elContent = document.createElement("div") as HTMLElement;
+            this._elContent.innerHTML = this.props.content;
+        } else {
+            this._elContent = this.props.content as any;
+        }
 
         // Set the on create event
+        /*
         options["onCreate"] = (tippyObj) => {
             // Get the content element
             let elContent = tippyObj.popper.querySelector(".tippy-content") as HTMLElement;
@@ -316,9 +227,21 @@ class _Tooltip extends Base<ITooltipProps> {
             // 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.props.target || this.el, options as any);
+            */
+
+        // Create the floating ui
+        this._floatingUI = FloatingUI({
+            className: "floating-tooltip",
+            elContent: this._elContent,
+            elTarget: this.el,
+            options: {
+                ...{ arrow: true, flip: true, shift: { padding: 5 } },
+                ...this.props.options
+            },
+            show: this.props.show,
+            placement: this.props.placement,
+            theme: this.props.type
+        });
     }
 
     /**
@@ -348,19 +271,19 @@ class _Tooltip extends Base<ITooltipProps> {
     // Hides the tooltip
     hide() {
         // See if it's visible
-        if (this.isVisible) { this._tippy.hide(); }
+        if (this.isVisible) { this._floatingUI.hide(); }
     }
 
     // Determines if the tooltip 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 instance
+    get floatingUI() { return this._floatingUI; }
 
     // Sets the tippy content
     setContent(content: string | Element) {
         // Set the tippy content
-        this.tippy.setContent(content);
+        this._floatingUI.setContent(content);
 
         // See if the content is a string
         if (typeof (content) === "string") {
@@ -373,7 +296,7 @@ class _Tooltip extends Base<ITooltipProps> {
     // Shows the tooltip
     show() {
         // See if it's hidden
-        if (!this.isVisible) { this._tippy.show(); }
+        if (!this.isVisible) { this._floatingUI.show(); }
     }
 
     // Toggles the tooltip

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

@@ -44,16 +44,17 @@ export const Tooltip: (props: ITooltipProps, template?: string) => ITooltip;
 /**
  * Tooltip Placements
  */
-export const TooltipPlacements: ITooltipPlacements;
+export const TooltipPlacements: IFloatingUIPlacements;
 
 /**
  * Tooltip Types
  */
-export const TooltipTypes: ITooltipTypes;
+export const TooltipTypes: IFloatingUITypes;
 
-import { IBaseProps, ITippyProps } from "../types";
+import { IBaseProps } from "../types";
 import { IButtonProps, IButton } from "../button/types";
 import { IDropdownProps, IDropdown } from "../dropdown/types";
+import { IFloatingUIOptions, IFloatingUIPlacements, IFloatingUITypes } from "../floating-ui/types";
 
 /**
  * Tooltip
@@ -74,13 +75,13 @@ export interface ITooltip {
     /** Reference to the dropdown. */
     ddl?: IDropdown;
 
-    /** The tippy instance. */
-    tippy: any;
+    /** The floating ui instance. */
+    floatingUI: any;
 
     /** Toggles an element's tooltip. */
     toggle: () => void;
 
-    /** Sets the tippy content. */
+    /** Sets the floating ui content. */
     setContent: (content: string | Element) => void;
 
     /** Reveals an element’s tooltip. */
@@ -94,46 +95,9 @@ export interface ITooltipProps extends IBaseProps<ITooltip> {
     btnProps?: IButtonProps;
     ddlProps?: IDropdownProps;
     content?: string | Element;
-    options?: ITippyProps;
+    options?: IFloatingUIOptions;
     placement?: number;
+    show?: boolean;
     target?: HTMLElement;
     type?: number;
-}
-
-/**
- * Tooltip Types
- */
-export type ITooltipTypes = {
-    Danger: number;
-    Dark: number;
-    Info: number;
-    Light: number;
-    LightBorder: number;
-    Material: number;
-    Primary: number;
-    Secondary: number;
-    Success: number;
-    Translucent: number;
-    Warning: number;
-}
-
-/**
- * Tooltip Placements
- */
-export type ITooltipPlacements = {
-    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;
 }

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

@@ -40,8 +40,9 @@
  */
 export const TooltipGroup: (props: ITooltipGroupProps, template?: string, btnTemplate?: string) => ITooltipGroup;
 
-import { IBaseProps, ITippyProps } from "../types";
+import { IBaseProps } from "../types";
 import { ITooltip, ITooltipProps } from "../tooltip/types";
+import { IFloatingUIOptions } from "../floating-ui/types";
 
 /**
  * Tooltip Group
@@ -74,7 +75,7 @@ export interface ITooltipGroupProps extends IBaseProps<ITooltipGroup> {
     isSmall?: boolean;
     isVertical?: boolean;
     label?: string;
-    tooltipOptions?: ITippyProps;
+    tooltipOptions?: IFloatingUIOptions;
     tooltipPlacement?: number;
     tooltipType?: number;
 }

package/src/components/types.d.ts

@@ -30,51 +30,4 @@ export interface IBaseProps<IBaseObj = any> {
 
     /** The element to render the component to. */
     el?: HTMLElement;
-}
-
-/** Tippy Options */
-export interface ITippyProps {
-    allowHTML?: boolean;
-    animateFill?: boolean;
-    animation?: string | boolean;
-    appendTo?: HTMLElement;
-    aria?: object;
-    arrow?: boolean | string | SVGElement | DocumentFragment;
-    content?: string | Element;
-    delay?: number | [number | null, number | null];
-    duration?: number | [number | null, number | null];
-    followCursor?: boolean | 'horizontal' | 'vertical' | 'initial';
-    hideOnClick?: boolean | 'toggle';
-    ignoreAttributes?: boolean;
-    inertia?: boolean;
-    inlinePositioning?: boolean;
-    interactive?: boolean;
-    interactiveBorder?: number;
-    interactiveDebounce?: number;
-    maxWidth?: number | string;
-    moveTransition?: string;
-    offset?: number[];
-    onAfterUpdate?: (tippyObj?, props?) => void;
-    onBeforeUpdate?: (tippyObj?, props?) => void;
-    onClickOutside?: (tippyObj?, ev?) => void;
-    onCreate?: (tippyObj?) => void;
-    onDestroy?: (tippyObj?) => void;
-    onHidden?: (tippyObj?) => void;
-    onHide?: (tippyObj?) => void;
-    onMount?: (tippyObj?) => void;
-    onShow?: (tippyObj?) => void;
-    onShown?: (tippyObj?) => void;
-    onTrigger?: (tippyObj?, ev?) => void;
-    onUntrigger?: (tippyObj?, ev?) => void;
-    placement?: string;
-    plugins?: any[];
-    popperOptions?: object;
-    role?: string;
-    showOnCreate?: boolean;
-    sticky?: boolean | 'reference' | 'popper';
-    theme?: string;
-    touch?: boolean | 'hold' | ['hold', number];
-    trigger?: string;
-    triggerTarget?: HTMLElement | HTMLElement[] | null;
-    zIndex?: number;
 }

package/src/custom-elements.js

@@ -0,0 +1,46 @@
+class BSElement extends HTMLElement {
+    constructor() { super(); }
+    connectedCallback() {
+        if (this.nodeName == "BS-PAGING") {
+            setTimeout(() => { new GD.Components.CustomElement(this); });
+        } else {
+            // Wait for the children elements to render
+            const observer = new MutationObserver(() => {
+                setTimeout(() => { new GD.Components.CustomElement(this); });
+                observer.disconnect();
+            });
+            observer.observe(this, { childList: true, subtree: true });
+        }
+    }
+}
+customElements.define("bs-accordion", class Accordion extends BSElement { });
+customElements.define("bs-alert", class Alert extends BSElement { });
+customElements.define("bs-badge", class Badge extends BSElement { });
+customElements.define("bs-breadcrumb", class Breadcrumb extends BSElement { });
+customElements.define("bs-button", class Button extends BSElement { });
+customElements.define("bs-button-group", class ButtonGroup extends BSElement { });
+customElements.define("bs-collapse", class Collapse extends BSElement { });
+customElements.define("bs-card", class Card extends BSElement { });
+customElements.define("bs-card-group", class CardGroup extends BSElement { });
+customElements.define("bs-carousel", class Carousel extends BSElement { });
+customElements.define("bs-checkbox-group", class CheckboxGroup extends BSElement { });
+customElements.define("bs-dropdown", class Dropdown extends BSElement { });
+customElements.define("bs-form", class Form extends BSElement { });
+customElements.define("bs-form-control", class FormControl extends BSElement { });
+customElements.define("bs-icon-link", class IconLink extends BSElement { });
+customElements.define("bs-input-group", class InputGroup extends BSElement { });
+customElements.define("bs-list-box", class ListBox extends BSElement { });
+customElements.define("bs-list-group", class ListGroup extends BSElement { });
+customElements.define("bs-modal", class Modal extends BSElement { });
+customElements.define("bs-nav", class Nav extends BSElement { });
+customElements.define("bs-navbar", class Navbar extends BSElement { });
+customElements.define("bs-offcanvas", class Offcanvas extends BSElement { });
+customElements.define("bs-paging", class Paging extends BSElement { });
+customElements.define("bs-popover", class Popover extends BSElement { });
+customElements.define("bs-progress", class Progress extends BSElement { });
+customElements.define("bs-progress-group", class ProgressGroup extends BSElement { });
+customElements.define("bs-spinner", class Spinner extends BSElement { });
+customElements.define("bs-table", class Table extends BSElement { });
+customElements.define("bs-toast", class Toast extends BSElement { });
+customElements.define("bs-toolbar", class Toolbar extends BSElement { });
+customElements.define("bs-tooltip", class Tooltip extends BSElement { });

package/src/index-icons.d.ts

@@ -1,9 +1,7 @@
 import * as Components from "./components/components";
 import { Icons, IconTypes } from "./icons";
-declare var tippy: Function;
 
 export {
     Components,
-    Icons, IconTypes,
-    tippy
+    Icons, IconTypes
 }

package/src/index-icons.ts

@@ -8,14 +8,14 @@ import "./ie";
 import * as Components from "./components";
 export { Components }
 
-// TippyJS library
-import tippy from "tippy.js";
-export { tippy }
+// Render method
+import { render } from "./render";
+export { render };
 
 // Icons
 import { Icons, IconTypes } from "./icons";
 export { Icons, IconTypes }
 
 // Bootstrap Global library
-const BS = { Components, Icons, IconTypes, tippy }
+const BS = { Components, Icons, IconTypes, render }
 window["GD"] = window["GD"] || BS;

package/src/index.d.ts

@@ -1,6 +1,6 @@
 import * as Components from "./components/components";
-declare var tippy: Function;
+declare var render: (el: HTMLElement) => void;
 
 export {
-    Components, tippy
+    Components, render
 }

package/src/index.ts

@@ -8,10 +8,10 @@ import "./ie";
 import * as Components from "./components";
 export { Components }
 
-// TippyJS library
-import tippy from "tippy.js";
-export { tippy }
+// Render method
+import { render } from "./render";
+export { render };
 
 // Bootstrap Global library
-const BS = { Components, tippy }
+const BS = { Components, render }
 window["GD"] = window["GD"] || BS;