@programmerg/bs-elements 0.1.0

package/src/base/BsDropdown.js

@@ -0,0 +1,98 @@
+import { Dropdown } from "bootstrap";
+import BsElement from "../core/BsElement.js";
+
+export default class BsDropdown extends BsElement {
+  
+  static get properties() {
+    return {
+      autoClose: {
+        description: "A boolean indicating whether the Dropdown should automatically close when an item is selected.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-auto-close"
+      },
+      direction: {
+        description: "The direction of the Dropdown menu",
+        type: String,
+        default: "down",
+        values: ["down", "start", "end", "up", "down-center", "up-center"]
+      },
+      open: {
+        description: "A boolean indicating whether the Dropdown is currently open.",
+        type: Boolean,
+        default: false
+      }
+    };
+  }
+
+  static get bs() {
+    return Dropdown;
+  }
+
+  constructor() {
+    super();
+    
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "open", {
+      get() {
+        return this.classList.contains("show");
+      },
+    });
+  }
+
+  hide() {
+    return this.bs?.hide();
+  }
+
+  show() {
+    return this.bs?.show();
+  }
+
+  toggle() {
+    return this.bs?.toggle();
+  }
+
+  update() {
+    return this.bs?.update();
+  }
+  
+  firstUpdated() {
+    this.classList.add("dropdown");
+
+    // Ensure toggle has the proper data attribute
+    const toggle = this.querySelector(
+      `:scope > [data-bs-toggle="dropdown"], :scope > .dropdown-toggle`
+    );
+    if (toggle && !toggle.hasAttribute("data-bs-toggle")) {
+      toggle.setAttribute("data-bs-toggle", "dropdown");
+    }
+
+    this._fixMarkup();
+    this._updateDirectionState();
+    this._updateOpenState(true);
+  }
+
+  _fixMarkup() {
+    // Ensure bs-dropdown-menu children receive Bootstrap class
+    const menu = this.querySelector(":scope > div, :scope > .dropdown-menu");
+    if (menu && !menu.classList.contains("dropdown-menu")) {
+      menu.classList.add("dropdown-menu");
+    }
+  }
+
+  _updateDirectionState() {
+    this.classList.remove(
+      ...this.constructor.properties
+        .direction.values.map(v => "drop" + v)
+    );
+    this.classList.add("drop" + this.direction);
+  }
+
+  _updateOpenState(isFirstUpdate = false) {
+    if (isFirstUpdate) this.classList.toggle("show", this.__propValues['open']);
+    else this.toggle();
+  }
+
+}
+
+customElements.define("bs-dropdown", BsDropdown);

package/src/base/BsModal.js

@@ -0,0 +1,204 @@
+import { Modal } from "bootstrap";
+import BsElement from "../core/BsElement.js";
+
+export default class BsModal extends BsElement {
+  
+  static get properties() {
+    return {
+      focus: {
+        description: "Automatically puts focus on the modal with it first opens.",
+        type: Boolean,
+        default: false,
+        attribute: "data-bs-focus"
+      },
+      backdrop: {
+        description: "Controls the visibility of the modal backdrop.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-backdrop"
+      },
+      centered: {
+        description: "Auto-positioning of the modal to ensure its centered in the viewport.",
+        type: Boolean,
+        default: false
+      },
+      fade: {
+        description: "Control the fade effect when opening or closing the modal.",
+        type: Boolean,
+        default: true
+      },
+      fullscreen: {
+        description: "Determines whether or no the modal is rendered in fullscreen mode.",
+        type: String,
+        default: "",
+        values: ["true", "sm", "md", "lg", "xl", "xxl"]
+      },
+      header: {
+        description: "Customize the modal header content.",
+        type: String,
+        default: undefined
+      },
+      open: {
+        description: "Used to control the modal state",
+        type: Boolean,
+        default: false
+      },
+      keyboard: {
+        description: "Ccontrol whether the modal can be closed using the ESC key.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-keyboard"
+      },
+      scrollable: {
+        description: "Determines if the modal content should be scrollable.",
+        type: Boolean,
+        default: false
+      },
+      size: {
+        description: "Specify the size of the modal.",
+        type: String,
+        default: "",
+        values: ["sm", "lg", "xl"]
+      }
+    };
+  }
+
+  static get bs() {
+    return Modal;
+  }
+
+  constructor() {
+    super();
+    
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "open", {
+      get() {
+        return this.classList.contains("show");
+      },
+    });
+  }
+
+  handleUpdate() {
+    return this.bs?.handleUpdate();
+  }
+
+  hide() {
+    return this.bs?.hide();
+  }
+
+  show() {
+    return this.bs?.show();
+  }
+
+  toggle() {
+    return this.bs?.toggle();
+  }
+  
+  firstUpdated() {
+    this.classList.add("modal");
+    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
+
+    this._fixMarkup();
+    this._updateFadeState();
+    this._updateCenteredState();
+    this._updateScrollableState();
+    this._updateSizeState();
+    this._updateFullscreenState();
+    this._updateOpenState(true);
+  }
+
+  _fixMarkup() {
+    let dialog = this.querySelector(":scope > .modal-dialog");
+    if (dialog) return;
+
+    dialog = document.createElement("div");
+    dialog.classList.add("modal-dialog");
+
+    const content = document.createElement("div");
+    content.classList.add("modal-content");
+
+    let header = this.querySelector(":scope > .modal-header");
+    if (!header) {
+      header = document.createElement("div");
+      header.classList.add("modal-header");
+      header.insertAdjacentHTML("afterbegin", `<h5 class="modal-title">${this.header}</h5>`);
+    }
+    content.appendChild(header);
+
+    if (header.querySelector(".btn-close")) {
+      header.insertAdjacentHTML("beforeend", 
+        `<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>`
+      );
+    }
+
+    let body = this.querySelector(":scope > .modal-body");
+    if (!body) {
+      body = document.createElement("div");
+      body.classList.add("modal-body");
+    }
+    content.appendChild(body);
+
+    let footer = this.querySelector(":scope > .modal-footer");
+    if (footer) {
+      content.appendChild(footer);
+    }
+
+    while (this.firstChild) {
+      body.appendChild(this.firstChild);
+    }
+
+    dialog.appendChild(content);
+    this.appendChild(dialog);
+  }
+
+  _updateHeaderState() {
+    const title = this.querySelector(":scope > .modal-dialog > .modal-header > .modal-title");
+    if (title) {
+      title.textContent = this.header;
+    }
+  }
+
+  _updateFadeState() {
+    this.classList.toggle("fade", this.fade);
+  }
+
+  _updateCenteredState() {
+    const dialog = this.querySelector(":scope > .modal-dialog");
+    dialog?.classList.toggle("modal-dialog-centered", this.centered);
+  }
+
+  _updateScrollableState() {
+    const dialog = this.querySelector(":scope > .modal-dialog");
+    dialog?.classList.toggle("modal-dialog-scrollable", this.scrollable);
+  }
+
+  _updateSizeState() {
+    const dialog = this.querySelector(":scope > .modal-dialog");
+    dialog?.classList.remove(
+      ...this.constructor.properties
+        .size.values.map(v => "modal-" + v)
+    );
+    if (this.size) dialog?.classList.add(`modal-${this.size}`);
+  }
+  
+  _updateFullscreenState() {
+    const dialog = this.querySelector(":scope > .modal-dialog");
+    dialog?.classList.remove(
+      ...this.constructor.properties
+        .fullscreen.values.map(v => "modal-fullscreen-" + v + "-down")
+    );
+    if (this.fullscreen) dialog?.classList.add(
+      this.fullscreen === "true"
+        ? "modal-fullscreen"
+        : `modal-fullscreen-${this.fullscreen}-down`
+    );
+  }
+
+  _updateOpenState(isFirstUpdate = false) {
+    if (isFirstUpdate) this.classList.toggle("show", this.__propValues['open']);
+    else this.toggle();
+  }
+
+}
+
+customElements.define("bs-modal", BsModal);

package/src/base/BsOffcanvas.js

@@ -0,0 +1,157 @@
+import { Offcanvas } from "bootstrap";
+import BsElement from "../core/BsElement.js";
+
+export default class BsOffcanvas extends BsElement {
+  
+  static get properties() {
+    return {
+      backdrop: {
+        description: "Controls whether the backdrop is displayed behind the offcanvas.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-backdrop"
+      },
+      fade: {
+        description: "Controls whether to use a fade animation when opening/closing the offcanvas.",
+        type: Boolean,
+        default: true
+      },
+      header: {
+        description: "The header content of the offcanvas.",
+        type: String,
+        default: ""
+      },
+      open: {
+        description: "Used to control the modal state",
+        type: Boolean,
+        default: false
+      },
+      keyboard: {
+        description: "Controls whether keyboard interaction is enabled for closing the offcanvas.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-keyboard"
+      },
+      placement: {
+        description: "The placement of the offcanvas.",
+        type: String,
+        default: "start",
+        values: ["start", "end", "top", "bottom"]
+      },
+      scroll: {
+        description: "Controls whether to allow scrolling of the body when the offcanvas is open.",
+        type: Boolean,
+        default: false,
+        attribute: "data-bs-scroll"
+      },
+      size: {
+        description: "Specify the size of the modal.",
+        type: String,
+        default: "",
+        values: ["sm", "md", "lg", "xl", "xxl"]
+      }
+    }
+  }
+  
+  static get bs() {
+    return Offcanvas;
+  }
+
+  constructor() {
+    super();
+    
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "open", {
+      get() {
+        return this.classList.contains("show");
+      },
+    });
+  }
+
+  hide() {
+    return this.bs?.hide();
+  }
+
+  show() {
+    return this.bs?.show();
+  }
+
+  toggle() {
+    return this.bs?.toggle();
+  }
+
+  firstUpdated() {
+    this.classList.add("offcanvas");
+    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
+
+    this._fixMarkup();
+    this._updateFadeState();
+    this._updatePlacementState();
+    this._updateSizeState();
+    this._updateOpenState(true);
+  }
+
+  _fixMarkup() {
+    let header = this.querySelector(":scope > .offcanvas-header");
+    if (!header) {
+      header = document.createElement("div");
+      header.classList.add("offcanvas-header");
+      header.insertAdjacentHTML("afterbegin", `<h5 class="offcanvas-title">${this.header ?? ""}</h5>`);
+      header.insertAdjacentHTML("beforeend",
+        `<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>`
+      );
+      this.appendChild(header);
+    }
+
+    if (!header.querySelector(".btn-close")) {
+      header.insertAdjacentHTML("beforeend",
+        `<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>`
+      );
+    }
+
+    let body = this.querySelector(":scope > .offcanvas-body");
+    if (!body) {
+      body = document.createElement("div");
+      body.classList.add("offcanvas-body");
+      this.appendChild(body);
+    }
+
+    for (const node of Array.from(this.childNodes)) {
+      if (node === header || node === body) continue;
+      body.appendChild(node)
+    }
+  }
+
+  _updateHeaderState() {
+    const title = this.querySelector(":scope > .offcanvas-header > .offcanvas-title");
+    if (title) title.textContent = this.header ?? "";
+  }
+
+  _updateFadeState() {
+    this.classList.toggle("fade", this.fade);
+  }
+
+  _updatePlacementState() {
+    this.classList.remove(
+      ...this.constructor.properties
+        .placement.values.map(v => "offcanvas-" + v)
+    );
+    if (this.placement) this.classList.add(`offcanvas-${this.placement}`);
+  }
+
+  _updateSizeState() {
+    this.classList.remove(
+      ...this.constructor.properties
+        .size.values.map(v => "offcanvas-" + v)
+    );
+    if (this.size) this.classList.add(`offcanvas-${this.size}`);
+  }
+
+  _updateOpenState(isFirstUpdate = false) {
+    if (isFirstUpdate) this.classList.toggle("show", this.__propValues['open']);
+    else this.toggle();
+  }
+
+}
+
+customElements.define("bs-offcanvas", BsOffcanvas);

package/src/base/BsPopover.js

@@ -0,0 +1,31 @@
+import { Popover } from "bootstrap";
+import BsTooltip from "./BsTooltip.js";
+
+export default class BsPopover extends BsTooltip {
+  
+  static get properties() {
+    return {
+      ...super.constructor.properties,
+      content: {
+        description: "The content to be displayed within the popover.",
+        type: String,
+        default: "",
+        attribute: "data-bs-content"
+      }
+    }
+  }
+  
+  static get bs() {
+    return Popover;
+  }
+
+  firstUpdated() {
+    if (!this.hasAttribute("data-bs-toggle")) {
+      this.setAttribute("data-bs-toggle", "popover");
+    }
+
+    this._updateOpenState(true);
+  }
+}
+
+customElements.define("bs-popover", BsPopover);

package/src/base/BsTab.js

@@ -0,0 +1,69 @@
+import { Tab } from "bootstrap";
+import BsElement from "../core/BsElement.js";
+
+export default class BsTab extends BsElement {
+  
+  static get properties() {
+    return {
+      fade: {
+        description: "Control the fade effect when opening or closing the modal.",
+        type: Boolean,
+        default: true
+      },
+      active: {
+        description: "Whether the element is active or not",
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+  
+  static get bs() {
+    return Tab;
+  }
+
+  constructor() {
+    super();
+
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "active", {
+      get() {
+        return this.classList.contains("active");
+      },
+    });
+  }
+
+  show() {
+    return this.bs?.show();
+  }
+
+  firstUpdated() {
+    this.classList.add("tab-pane");
+    if (!this.hasAttribute("role")) this.setAttribute("role", "tabpanel");
+    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+
+    this._updateFadeState();
+    this._updateActiveState(true);
+  }
+
+  _updateFadeState() {
+    this.classList.toggle("fade", this.fade);
+  }
+
+  _updateActiveState(isFirstUpdate = false) {
+    const newState = this.__propValues["active"];
+    if (isFirstUpdate) {
+      this.classList.toggle("show", newState);
+      this.classList.toggle("active", newState);
+    } else {
+      if (newState) this.show();
+      else {
+        this.classList.toggle("show", false);
+        this.classList.toggle("active", false);
+      }
+    }
+  }
+
+}
+
+customElements.define("bs-tab", BsTab);