@programmerg/bs-elements 0.1.0

package/src/base/BsToast.js

@@ -0,0 +1,163 @@
+import { Toast } from "bootstrap";
+import BsElement from "../core/BsElement.js";
+
+export default class BsToast extends BsElement {
+  
+  static get properties() {
+    return {
+      color: {
+        description: "Color of the Toast background.",
+        type: String,
+        default: "",
+        values: ["", "primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+      },
+      header: {
+        description: "Customize the modal header content.",
+        type: String,
+        default: undefined
+      },
+      autohide: {
+        description: "Controls whether the Toast component autohides after a certain duration.",
+        type: Boolean,
+        default: false,
+        attribute: "data-bs-autohide"
+      },
+      delay: {
+        description: "The time delay (in milliseconds) before the Toast component autohides.",
+        type: Number,
+        default: 5000,
+        attribute: "data-bs-delay"
+      },
+      animation: {
+        description: "Controls whether the Toast component fades in and out.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-animation"
+      },
+      open: {
+        description: "Controls whether the Toast component is initially open.",
+        type: Boolean,
+        default: true
+      },
+      dismissible: {
+        description: "Controls whether the Toast component is dismissible",
+        type: Boolean,
+        default: true
+      }
+    }
+  }
+  
+  static get bs() {
+    return Toast;
+  }
+
+  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();
+  }
+
+  isShown() {
+    return this.bs?.isShown();
+  }
+
+  firstUpdated() {
+    this.classList.add("toast");
+    if (!this.hasAttribute("role")) this.setAttribute("role", "alert");
+    if (!this.hasAttribute("aria-live")) this.setAttribute("aria-live", "assertive");
+    if (!this.hasAttribute("aria-atomic")) this.setAttribute("aria-atomic", "true");
+
+    this._fixMarkup();
+    this._updateHeaderState();
+    this._updateDismissibleState();
+    this._updateColorState();
+    this._updateOpenState(true);
+  }
+
+  _fixMarkup() {
+    let header = this.querySelector(":scope > .toast-header");
+    if (!header && this.header) {
+      header = document.createElement("div");
+      header.classList.add("toast-header");
+      
+      header.insertAdjacentHTML("afterbegin", `<strong class="me-auto">${this.header}</strong>`);
+      
+      this.appendChild(header);
+    }
+
+    let body = this.querySelector(":scope > .toast-body");
+    if (!body) {
+      body = document.createElement("div");
+      body.classList.add("toast-body");
+
+      for (let i = 0; i < this.childNodes.length; i++) {
+        if (this.childNodes[i].classList?.contains("toast-header")) continue;
+        body.appendChild(this.childNodes[i]);
+      }
+      
+      this.appendChild(body);
+    }
+  }
+
+  _updateHeaderState() {
+    let header = this.querySelector(":scope > .toast-header");
+    if (!header && this.header) {
+      this._fixMarkup();
+      header = this.querySelector(":scope > .toast-header");
+      header.textContent = this.header || "";
+    }
+    if (header && !this.header) {
+      header.remove();
+    }
+  }
+
+  _updateDismissibleState() {
+    const closeBtn = this.querySelector(".btn-close");
+    if (this.dismissible) {
+      if (!closeBtn) this.firstChild?.insertAdjacentHTML("beforeend",
+        `<button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>`
+      );
+    } else {
+      if (closeBtn) closeBtn.remove();
+    }
+  }
+
+  _updateColorState() {
+    this.classList.remove(
+      ...this.constructor.properties
+        .color.values.map(v => "bg-" + v)
+    );
+    if (this.color) this.classList.add("bg-" + this.color);
+
+    if (this.color === "" || this.color === "light" || this.color === "warning") {
+      this.classList.remove("text-white");
+    } else {
+      this.classList.add("text-white");
+    }
+  }
+  
+  _updateOpenState(isFirstUpdate = false) {
+    const newState = this.__propValues['open'];
+    if (isFirstUpdate) this.classList.toggle("show", newState);
+    else {
+      if (newState) this.show();
+      else this.hide();
+    }
+  }
+
+}
+
+customElements.define("bs-toast", BsToast);

package/src/base/BsTooltip.js

@@ -0,0 +1,118 @@
+import { Tooltip } from "bootstrap";
+import BsElement from "../core/BsElement.js";
+
+export default class BsTooltip extends BsElement {
+  
+  static get properties() {
+    return {
+      animation: {
+        description: "Flag to enable animation for the tooltip.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-animation"
+      },
+      title: {
+        description: "The title to be displayed within the tooltip.",
+        type: String,
+        default: "",
+        attribute: "data-bs-title"
+      },
+      delay: {	
+        description: "The delay for showing the tooltip (in milliseconds).",
+        type: Number,
+        default: 0,
+        attribute: "data-bs-delay"
+      },
+      html: {
+        description: "",
+        type: Boolean,
+        default: false,
+        attribute: "data-bs-html"
+      },
+      open: {
+        description: "Controls the visibility of the tooltip.",
+        type: Boolean,
+        default: false
+      },
+      placement: {
+        description: "The preferred placement of the tooltip.",
+        type: String,
+        default: "top",
+        attribute: "data-bs-placement"
+      },
+      trigger: {
+        description: "The trigger action to open/close the popover.",
+        type: String,
+        default: "click",
+        attribute: "data-bs-trigger"
+      },
+      container: {
+        description: "the popover’s HTML appears within that element.",
+        type: String,
+        default: "body",
+        attribute: "data-bs-container"
+      }
+    }
+  }
+
+  static get bs() {
+    return Tooltip;
+  }
+
+  constructor() {
+    super();
+    
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "open", {
+      get() {
+        return this.bs?.tip && this.bs?.tip.classList.contains('show');
+      },
+    });
+  }
+  
+  disable() {
+    return this.bs?.disable();
+  }
+  
+  enable() {
+    return this.bs?.enable();
+  }
+  
+  hide() {
+    return this.bs?.hide();
+  }
+
+  show() {
+    return this.bs?.show();
+  }
+
+  toggle() {
+    return this.bs?.toggle();
+  }
+
+  toggleEnabled() {
+    return this.bs?.toggleEnabled();
+  }
+
+  setContent() {
+    return this.bs?.setContent();
+  }
+
+  update() {
+    return this.bs?.update();
+  }
+
+  firstUpdated() {
+    if (!this.hasAttribute("data-bs-toggle")) this.setAttribute("data-bs-toggle", "tooltip");
+
+    this._updateOpenState(true);
+  }
+
+  _updateOpenState(isFirstUpdate = false) {
+    if (isFirstUpdate) this.classList.toggle("show", this.__propValues['open']);
+    else this.toggle();
+  }
+
+}
+
+customElements.define("bs-tooltip", BsTooltip);

package/src/core/BsElement.js

@@ -0,0 +1,81 @@
+import ReactiveElement from "./ReactiveElement.js";
+
+/**
+ * Reactive Element with Bootstrap integration
+ */
+export default class BsElement extends ReactiveElement {
+
+  constructor() {
+    super();
+
+    this.bs = null;
+  }
+  
+  static __bsProps = [];
+
+  static get bsProps() {
+    if (this.__bsProps === undefined) {
+      this.__bsProps = [];
+
+      // memoize related props
+      const props = this.properties || this.properties?.() || {};
+      for (const [prop, def] of Object.entries(props)) {
+        if ((def.attribute ?? '').startsWith('data-bs-')) this.__bsProps.push(prop);
+      }
+    }
+    return this.__bsProps;
+  }
+  
+  /**
+   * Must return a Bootstrap JS constructor (e.g. bootstrap.Modal, bootstrap.Collapse)
+   */
+  static get bs() {
+    return null;
+  }
+
+  createInstance() {
+    if (!this.constructor.bs || this.bs) return;
+
+    const options = this.constructor.bsProps.reduce((acc, key) => {
+      if (key in this.__propValues) acc[key] = this.__propValues[key];
+      return acc;
+    }, {}) || {};
+
+    this.bs = new this.constructor.bs(this, options);
+  }
+
+  dispose() {
+    if (!this.bs) return;
+
+    this.bs?.dispose();
+    this.bs = null;
+  }
+
+  connectedCallback() {
+    // try to guess prop initial values from markup when it's not set
+    const props = this.properties || this.properties?.() || {};
+    for (const [prop, def] of Object.entries(props)) {
+      if (this.__propValues[prop] !== undefined) continue;
+      this[prop] = def.values?.find(v => this.className.includes(v));
+    }
+    
+    super.connectedCallback();
+    this.createInstance();
+  }
+
+  updated(changed) {
+    super.updated(changed);
+
+    const shouldReinit = this.constructor.bsProps.some(p => changed.has(p));
+    if (shouldReinit) {
+      this.dispose();
+      this.createInstance();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.dispose();
+  }
+
+}

package/src/core/ReactiveElement.js

@@ -0,0 +1,183 @@
+export default class ReactiveElement extends HTMLElement {
+  
+  constructor() {
+    super();
+
+    // reactive internals
+    this.__propValues = Object.create(null);
+    this.__changed = new Set();
+    this.__updateScheduled = false;
+    this.__reflecting = false;
+
+    this.createReactiveProperties();
+  }
+
+  /* ------------------------------------------------------------------
+   * Reactive helpers
+   * ------------------------------------------------------------------ */
+
+  static get properties() {
+    return {};
+  }
+
+  static __propertyToAttributeMap;
+
+  static __attributeToPropertyMap;
+
+  static propertyToAttribute(property) {
+    if (this.__propertyToAttributeMap.size < 1) this.observedAttributes();
+    return this.__propertyToAttributeMap.get(property);
+  }
+
+  static attributeToProperty(attribute) {
+    if (this.__attributeToPropertyMap.size < 1) this.observedAttributes();
+    return this.__attributeToPropertyMap.get(attribute);
+  }
+
+  static get observedAttributes() {
+    if (this.__attributeToPropertyMap === undefined) {
+      this.__propertyToAttributeMap = new Map();
+      this.__attributeToPropertyMap = new Map();
+      
+      // memoize mappings
+      const props = this.properties || this.properties?.() || {};
+      for (const [prop, def] of Object.entries(props)) {
+        const attr = def?.attribute ?? prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+        this.__propertyToAttributeMap.set(prop, attr);
+        this.__attributeToPropertyMap.set(attr, prop);
+      }
+    }
+    return [...this.__attributeToPropertyMap.keys()];
+  }
+
+  getAttrValue(attr, type) {
+    const value = this.getAttribute(attr);
+
+    switch (type) {
+      case Boolean: 
+        return this.hasAttribute(attr) && (value === "" || value === "true");
+      case Number:
+        const n = Number(value);
+        return Number.isNaN(n) ? undefined : n;
+      default:
+        return value === null ? undefined : value;
+    }
+  }
+
+  setAttrValue(attr, value, type) {
+    if (value === null || value === undefined || (type === Boolean && !value)) {
+      this.removeAttribute(attr);
+    } else {
+      this.setAttribute(attr, (type === Boolean) ? "" : String(value));
+    }
+  }
+
+  createReactiveProperties() {
+    const props = this.constructor.properties || this.constructor.properties?.() || {};
+    for (const [prop, def] of Object.entries(props)) {
+      this.createReactiveProperty(prop, def);
+    }
+  }
+
+  createReactiveProperty(prop, def) {
+    const attr = this.constructor.propertyToAttribute(prop);
+
+    // avoid redefining existing properties
+    if (!Object.getOwnPropertyDescriptor(this.constructor.prototype, prop)) {
+      Object.defineProperty(this.constructor.prototype, prop, {
+        get() {
+          return this.__propValues[prop];
+        },
+        set(value) {
+          const old = this.__propValues[prop];
+          if (old === value) return;
+
+          this.__propValues[prop] = value;
+          
+          // reflect props to attributes
+          const shouldReflect = def.reflect;
+          if (shouldReflect) {
+            this.__reflecting = true;
+            this.setAttrValue(attr, value, def.type);
+            queueMicrotask(() => (this.__reflecting = false));
+          }
+
+          this.__changed.add(prop);
+          this.scheduleUpdate();
+        },
+        configurable: true,
+        enumerable: true
+      });
+    }
+  
+    // seed initial values from attributes or defaults
+    this.__propValues[prop] = this.getAttrValue(attr, def.type) ?? def.default;
+  }
+  
+  childrenToSlots(html) {
+    var template = document.createElement("template");
+    template.innerHTML = html;
+
+    const slots = template.content.querySelectorAll("slot");
+    for (const slot of slots) {
+      const slotChildren = this.querySelectorAll(`[slot="${slot.name}"]`);
+      slotChildren.forEach(el => el.removeAttribute("slot"));
+      slot.replaceWith(...slotChildren);
+    }
+
+    this.replaceChildren(template.content);
+  }
+
+  /* ------------------------------------------------------------------
+   * Custom Element Lifecycle
+   * ------------------------------------------------------------------ */
+
+  connectedCallback() {
+    this.firstUpdated();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  firstUpdated() {}
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (this.__reflecting) return;
+
+    const prop = this.constructor.attributeToProperty(attrName);
+
+    const props = this.constructor.properties || this.constructor.properties?.() || {};
+    const def = props[prop] || {};
+
+    const old = this.__propValues[prop];
+    const value = this.getAttrValue(attrName, def.type);
+    if (old === value) return;
+    this.__propValues[prop] = value;
+    this.__changed.add(prop);
+    this.scheduleUpdate();
+  }
+
+  scheduleUpdate() {
+    if (this.__updateScheduled) return;
+    this.__updateScheduled = true;
+    queueMicrotask(() => {
+      this.__updateScheduled = false;
+      const changed = new Set(this.__changed);
+      this.__changed.clear();
+      try {
+        this.updated(changed);
+      } catch (e) {
+        console.error(e);
+      }
+    });
+  }
+
+  updated(changed) {
+    changed.forEach(prop => {
+      const fn = `_update${prop.charAt(0).toUpperCase() + prop.slice(1)}State`;
+      if (typeof this[fn] === "function") this[fn]();
+    })
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  disconnectedCallback() {}
+
+}

package/src/extra/BsCalendar.js

@@ -0,0 +1,14 @@
+import BsElement from "../core/BsElement.js";
+
+export default class BsCalendar extends BsElement {
+  
+  static get properties() {
+    return {}
+  }
+
+  firstUpdated() {
+
+  }
+}
+
+customElements.define("bs-calendar", BsCalendar);

package/src/extra/BsCombobox.js

@@ -0,0 +1,14 @@
+import BsElement from "../core/BsElement.js";
+
+export default class BsCombobox extends BsElement {
+  
+  static get properties() {
+    return {}
+  }
+
+  firstUpdated() {
+    // https://tom-select.js.org/docs/selectize.js
+  }
+}
+
+customElements.define("bs-combobox", BsCombobox);