fluxbit_view_components 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5f5ca4fde5d32556cdbc0f25088912fa549531dea43e9e46557806c742a61a3c
-  data.tar.gz: 2feca2ea7274688b6d1e850aee6dc6d5638718718584e977514f0abf96cedd8e
+  metadata.gz: 88d83b2e55472c883a4c14bb7df900c55c1ee9f69d128c4864b9edd4966cda26
+  data.tar.gz: 431db78fc6116407ee9244ef970110dcf24f5dd57ea540845543e7459ffbad5c
 SHA512:
-  metadata.gz: 85ef792f0b9ead019bf89459531723043c7b771fe7b6c8f016ba03697d2e80d93139a081e0f4250d46545eb97b31f159fcaa9ba2bd5592c27053a0792c8063f5
-  data.tar.gz: da59d2153f6ea5bb116ee44ae2dd7fd8cd8631c9024ebe7972d5103eb58f1fc05012953386d4520aed4247970dc00fc810ede2afc08a0ecc8329db053b3d5cb6
+  metadata.gz: 994ef29e0f99d930f9983558ce48b78eb67804bb43fb586c840acac7fc47049667f07cf93e6830f96d33b2d9a3d834a7bcee92923ce566aacdce45cac40d2c0b
+  data.tar.gz: f4bb70523e48dde4b7d4b97032ca09c793f81ef7bbda326b03e5bb387b21f379191f1de77b98d0e0d1fd8ffcfd4db09fd0743a52d6a1a5d67e3abcd6a3e3ed90

data/README.md

@@ -24,6 +24,16 @@ Render Fluxbit ViewComponents:
 <%= fx_card(title: "Title") do %>
   <p>Card example</p>
 <% end %>
+
+<!-- Breadcrumb navigation -->
+<%= fx_breadcrumb do |c| %>
+  <% c.with_item href: "/" do %>Home<% end %>
+  <% c.with_item href: "/projects" do %>Projects<% end %>
+  <% c.with_item current_page: true do %>Current Page<% end %>
+<% end %>
+
+<!-- Pagination controls -->
+<%= fx_pagination(page: 1, last: 10, count: 100) %>
 ```
 
 ## Dependencies

data/app/assets/javascripts/fluxbit_view_components/assigner_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  assign(event) {
+    if (event.params["preventDefault"] === "true") {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    Object.keys(event.params["change"]).forEach(el => {
+      const targetElement = document.querySelector(el);
+      if (!targetElement) {
+        console.error(`fx-assigner: Target element "${el}" not found.`);
+        return;
+      }
+      Object.keys(event.params["change"][el]).forEach(attr => {
+        let value = "";
+        if (typeof event.params["change"][el][attr] == "object") {
+          const element = event.params["change"][el][attr]["element"];
+          const attribute = event.params["change"][el][attr]["attribute"];
+          const fromElement = document.querySelector(element);
+          if (!fromElement) {
+            console.error(`fx-assigner: Element "${element}" not found.`);
+            return;
+          }
+
+          if(attribute === "innerHTML")
+            value = fromElement.innerHTML;
+          else if (attribute === "value")
+            value = fromElement.value;
+          else if (attribute === "textContent")
+            value = fromElement.textContent;
+          else
+            value = fromElement.getAttribute(attribute);
+        } else
+          value = event.params["change"][el][attr];
+
+        if (attr === "innerHTML")
+          targetElement.innerHTML = value;
+        else if (attr === "value")
+          targetElement.value = value;
+        else if (attr === "textContent")
+          targetElement.textContent = value;
+        else
+          targetElement.setAttribute(attr, value);
+      });
+    });
+  }
+}

data/app/assets/javascripts/fluxbit_view_components/auto_submit_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static values = {
+    delay: { type: Number, default: 150 }
+  }
+
+  connect() {
+    this.timeout = null;
+  }
+
+  submit(event) {
+    // Clear any existing timeout
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+
+    // Set new timeout
+    this.timeout = setTimeout(() => {
+      if (event.params["formId"]) {
+        const form = document.getElementById(event.params["formId"]);
+        if (!form) {
+          console.error(`fx-auto-submit: Form with ID "${event.params["formId"]}" not found.`);
+          return;
+        }
+        form.requestSubmit();
+        return;
+      }
+
+      this.element.requestSubmit();
+    }, this.delayValue);
+  }
+
+  disconnect() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+  }
+}

data/app/assets/javascripts/fluxbit_view_components/drawer_controller.js

@@ -0,0 +1,135 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "drawer" ];
+  static values = {
+    autoShow: false,
+    placement: 'left',
+    backdrop: true,
+    bodyScrolling: false,
+    edge: false,
+    edgeOffset: String,
+    backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30',
+    onHide: Object,
+    onShow: Object,
+    onToggle: Object
+  }
+
+  connect() {
+    this.drawers = {};
+
+    // 2 ways of using this controller:
+    if (this.drawerTargets.length === 0) {
+      // 1. If there is no drawerTarget, it will toggle the element itself
+      if (!this.element.id) this.element.id = 'drawer-' + Math.random().toString(36).substring(2, 15);
+
+      this._initDrawer(this.element, this._optionsFromElements());
+      this._addListeners(this.element);
+      if(this.autoShowValue) this.drawers[this.element.id].show();
+    } else {
+      // 2. Using the drawerTarget to initialize a single drawer
+      this.drawerTargets.forEach(target => {
+        if (!target.id) target.id = 'drawer-' + Math.random().toString(36).substring(2, 15);
+
+        this._initDrawer(target, this._optionsFromElements(target));
+        this._addListeners(target);
+        if (this.autoShowValue) this.drawers[target.id].show();
+      });
+    }
+  }
+
+  async _ensureDrawerLoaded() {
+    if (typeof Drawer === "undefined") {
+      const module = await import('flowbite');
+      window.Drawer = module.Drawer;
+    }
+  }
+
+  _initDrawer(target, options = {}) {
+    //await this._ensureDrawerLoaded();
+    this.drawers[target.id] = new Drawer(target, options);
+  }
+
+  _addListeners(target) {
+      if (!this._drawerListeners) this._drawerListeners = new Set();
+
+    ["show", "hide", "toggle"].forEach(action => {
+      const eventName = `${action}Drawer:${target.id}`;
+      if (!this._drawerListeners.has(eventName)) {
+        document.addEventListener(eventName, () => {
+          if (this.drawers[target.id]) this.drawers[target.id][action]();
+        });
+        this._drawerListeners.add(eventName);
+      }
+    });
+  }
+  disconnect() {
+    Object.entries(this.drawers).forEach(([id, drawer]) => {
+      if (drawer) {
+        drawer.hide();
+        drawer.destroy();
+        delete this.drawers[id];
+      }
+    });
+  }
+
+  _optionsFromElements(target = null) {
+    let options = {};
+    if (this.hasPlacementValue) options["placement"] = this.placementValue;
+    if (this.hasBackdropValue) options["backdrop"] = this.backdropValue;
+    if (this.hasBodyScrollingValue) options["bodyScrolling"] = this.bodyScrollingValue;
+    if (this.hasEdgeValue) options["edge"] = this.edgeValue;
+    if (this.hasEdgeOffsetValue) options["edgeOffset"] = this.edgeOffsetValue;
+    if (this.hasBackdropClassesValue) options["backdropClasses"] = this.backdropClassesValue;
+    if (this.hasOnHideValue) options["onHide"] = this.onHideValue;
+    if (this.hasOnShowValue) options["onShow"] = this.onShowValue;
+    if (this.hasOnToggleValue) options["onToggle"] = this.onToggleValue;
+
+    if (target) {
+      if (target.dataset.autoShow !== undefined) options["autoShow"] = target.dataset.autoShow === "true";
+      if (target.dataset.placement) options["placement"] = target.dataset.placement;
+      if (target.dataset.backdrop !== undefined) options["backdrop"] = target.dataset.backdrop === "true";
+      if (target.dataset.bodyScrolling !== undefined) options["bodyScrolling"] = target.dataset.bodyScrolling === "true";
+      if (target.dataset.edge !== undefined) options["edge"] = target.dataset.edge === "true";
+      if (target.dataset.edgeOffset) options["edgeOffset"] = target.dataset.edgeOffset;
+      if (target.dataset.backdropClasses) options["backdropClasses"] = target.dataset.backdropClasses;
+      if (target.dataset.onHide) options["onHide"] = target.dataset.onHide;
+      if (target.dataset.onShow) options["onShow"] = target.dataset.onShow;
+      if (target.dataset.onToggle) options["onToggle"] = target.dataset.onToggle;
+    }
+    return options;
+  }
+
+  _toCamelCase(str) {
+    return str.replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase());
+  }
+
+  toggle(event) {
+    const targetId = event.target.dataset[this._toCamelCase(this.identifier + '-id')];
+    if (targetId) {
+      if (this.drawers[targetId]) this.drawers[targetId].toggle();
+      else console.warn(`Drawer with id ${targetId} not found.`);
+    } else
+      Object.entries(this.drawers).forEach(([_id, drawer]) => { if (drawer) drawer.toggle(); });
+  }
+
+  show(event) {
+    const targetId = event.target.dataset[this._toCamelCase(this.identifier + '-id')];
+    if (targetId) {
+      if (this.drawers[targetId]) this.drawers[targetId].show();
+      else console.warn(`Drawer with id ${targetId} not found.`);
+    } else
+      Object.entries(this.drawers).forEach(([_id, drawer]) => { if (drawer) drawer.show(); });
+  }
+
+  hide(event) {
+    const targetId = event.target.dataset[this._toCamelCase(this.identifier + '-id')];
+    if (targetId) {
+      if (this.drawers[targetId]) this.drawers[targetId].hide();
+      else console.warn(`Drawer with id ${targetId} not found.`);
+    } else
+      Object.entries(this.drawers).forEach(([_id, drawer]) => { if (drawer) drawer.hide(); });
+  }
+}
+
+// document.dispatchEvent(new CustomEvent("toggleDrawer:demo-drawer"));

data/app/assets/javascripts/fluxbit_view_components/index.js

@@ -0,0 +1,56 @@
+import FxAssigner from './assigner_controller'
+import FxAutoSubmit from './auto_submit_controller'
+import FxDrawer from './drawer_controller'
+import FxMethodLink from './method_link_controller'
+import FxModal from './modal_controller'
+import FxPassword from './password_controller'
+import FxProgress from './progress_controller'
+import FxRowClick from './row_click_controller'
+import FxSelectAll from './select_all_controller'
+import FxSpinnerPercent from './spinner_percent_controller'
+import FxThemeButton from './theme_button_controller'
+
+export {
+  FxAssigner,
+  FxAutoSubmit,
+  FxDrawer,
+  FxMethodLink,
+  FxModal,
+  FxPassword,
+  FxProgress,
+  FxRowClick,
+  FxSelectAll,
+  FxSpinnerPercent,
+  FxThemeButton
+}
+
+export function registerFluxbitControllers(application) {
+  application.register('fx-assigner', FxAssigner)
+  application.register('fx-auto-submit', FxAutoSubmit)
+  application.register('fx-drawer', FxDrawer)
+  application.register('fx-method-link', FxMethodLink)
+  application.register('fx-modal', FxModal)
+  application.register('fx-password', FxPassword)
+  application.register('fx-progress', FxProgress)
+  application.register('fx-row-click', FxRowClick)
+  application.register('fx-select-all', FxSelectAll)
+  application.register('fx-spinner-percent', FxSpinnerPercent)
+  application.register('fx-theme-button', FxThemeButton)
+
+  // Make controllers globally accessible for vanilla JS
+  if (typeof window !== 'undefined') {
+    window.FluxbitControllers = {
+      FxAssigner,
+      FxAutoSubmit,
+      FxDrawer,
+      FxMethodLink,
+      FxModal,
+      FxPassword,
+      FxProgress,
+      FxRowClick,
+      FxSelectAll,
+      FxSpinnerPercent,
+      FxThemeButton
+    }
+  }
+}

data/app/assets/javascripts/fluxbit_view_components/method_link_controller.js

@@ -0,0 +1,143 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { 
+    method: "get",
+    url: String,
+    params: Object,
+    formDataId: String,
+    debug: false,
+    eventType: "click"
+  }
+
+  connect() {
+    this.element.addEventListener(this.eventTypeValue, this.click.bind(this));
+  }
+
+  disconnect() {
+    this.element.removeEventListener(this.eventTypeValue, this.click.bind(this));
+  }
+
+  click(event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const formData = this.createFormData();
+
+    // Add any additional parameters
+    if (this.hasParamsValue) this.addParams(formData)
+
+    // Submit the request
+    const url = this.hasUrlValue ? this.urlValue : this.element.href
+    this.submitRequest(url, formData)
+  }
+
+  createFormData() {
+    const formData = new FormData()
+
+    if (this.hasFormDataIdValue) {
+      // Try to use existing form data
+      const existingForm = document.getElementById(this.formDataIdValue)
+      const formElements = existingForm.querySelectorAll("input, select, textarea")
+      
+      formElements.forEach(element => {
+        if (element.name && (element.type !== "checkbox" || element.checked))
+          formData.append(element.name, element.value)
+      })
+    }
+
+    formData.append("_method", (this.methodValue || formData.method).toUpperCase())
+    formData.append("authenticity_token", this.getCSRFToken())
+    return formData
+  }
+
+  addParams(formData) {
+    this.appendNestedParams(formData, this.paramsValue, "")
+  }
+
+  appendNestedParams(formData, obj, prefix) {
+    Object.entries(obj).forEach(([key, value]) => {
+      const fullKey = prefix ? `${prefix}[${key}]` : key
+      
+      if (typeof value === "object" && value !== null) {
+        // Check if it's an element reference object
+        if (this.isElementReference(value)) {
+          const resolvedValue = this.resolveElementValue(value)
+          formData.append(fullKey, resolvedValue)
+        } else {
+          // Recursively handle nested objects
+          this.appendNestedParams(formData, value, fullKey)
+        }
+      } else {
+        // Primitive value
+        formData.append(fullKey, value)
+      }
+    })
+  }
+
+  isElementReference(obj) {
+    return obj.hasOwnProperty("element") && obj.hasOwnProperty("attribute")
+  }
+
+  resolveElementValue(elementRef) {
+    const { element, attribute } = elementRef
+    const domElement = document.querySelector(element)
+    
+    if (!domElement) {
+      console.error(`fx-method-link: Element "${element}" not found.`)
+      return ""
+    }
+
+    switch (attribute) {
+      case "innerHTML":
+        return domElement.innerHTML
+      case "value":
+        return domElement.value
+      case "textContent":
+        return domElement.textContent
+      default:
+        return domElement.getAttribute(attribute) || ""
+    }
+  }
+
+  submitRequest(url, formData) {
+    // Debug: Log form data contents
+    if (this.debugValue) {
+      console.log("Submitting form data:")
+      for (let [key, value] of formData.entries()) {
+        console.log(`${key}: ${value}`)
+      }
+    }
+
+    // Submit the request
+    fetch(url, {
+      method: "POST",
+      body: formData,
+      headers: {
+        "Accept": "text/vnd.turbo-stream.html, text/html",
+        "X-Requested-With": "XMLHttpRequest"
+      }
+    }).then(response => {
+      if (response.ok) {
+        // Handle successful response
+        if (response.headers.get("Content-Type")?.includes("turbo-stream")) {
+          return response.text().then(html => {
+            Turbo.renderStreamMessage(html)
+          })
+        } else {
+          // For regular HTML responses, you might want to redirect or reload
+          window.location.reload()
+        }
+      } else {
+        console.error("Request failed:", response.statusText)
+      }
+    }).catch(error => {
+      console.error("Network error:", error)
+    })
+  }
+
+  getCSRFToken() {
+    const token = document.querySelector('meta[name="csrf-token"]')
+    return token ? token.getAttribute("content") : ""
+  }
+}

data/app/assets/javascripts/fluxbit_view_components/modal_controller.js

@@ -0,0 +1,118 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "modal" ];
+  static values = {
+    autoShow: false,
+    placement: 'bottom-right',
+    backdrop: 'dynamic',
+    backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30',
+    closable: false,
+    onHide: Object,
+    onShow: Object,
+    onToggle: Object
+  }
+
+  connect() {
+    this.modals = {};
+
+    // 2 ways of using this controller:
+    if (this.modalTargets.length === 0) {
+      // 1. If there is no modalTarget, it will toggle the element itself
+      if (!this.element.id) this.element.id = 'modal-' + Math.random().toString(36).substring(2, 15);
+
+      this._initModal(this.element, this._optionsFromElements());
+      this._addListeners(this.element);
+      if(this.autoShowValue) this.modals[this.element.id].show();
+    } else {
+      // 2. Using the modalTarget to initialize a single modal
+      this.modalTargets.forEach(target => {
+        if (!target.id) target.id = 'modal-' + Math.random().toString(36).substring(2, 15);
+        this._initModal(target, this._optionsFromElements(target));
+        this._addListeners(target);
+        if (this.autoShowValue) this.modals[target.id].show();
+      });
+    }
+  }
+
+  async _ensureModalLoaded() {
+    if (typeof Modal === "undefined") {
+      const module = await import('flowbite');
+      window.Modal = module.Modal;
+    }
+  }
+
+  async _initModal(target, options = {}) {
+    await this._ensureModalLoaded();
+    this.modals[target.id] = new Modal(target, options);
+  }
+
+  _addListeners(target) {
+      if (!this._modalListeners) this._modalListeners = new Set();
+
+    ["show", "hide", "toggle"].forEach(action => {
+      const eventName = `${action}Modal:${target.id}`;
+      if (!this._modalListeners.has(eventName)) {
+        document.addEventListener(eventName, () => {
+          this.modals[target.id][action]();
+        });
+        this._modalListeners.add(eventName);
+      }
+    });
+  }
+
+  _optionsFromElements(target = null) {
+    let options = {};
+    if (this.hasPlacementValue) options["placement"] = this.placementValue;
+    if (this.hasBackdropValue) options["backdrop"] = this.backdropValue;
+    if (this.hasBackdropClassesValue) options["backdropClasses"] = this.backdropClassesValue;
+    if (this.hasClosableValue) options["closable"] = this.closableValue;
+    if (this.hasOnHideValue) options["onHide"] = this.onHideValue;
+    if (this.hasOnShowValue) options["onShow"] = this.onShowValue;
+    if (this.hasOnToggleValue) options["onToggle"] = this.onToggleValue;
+
+    if (target) {
+      if (target.dataset.placement) options["placement"] = target.dataset.placement;
+      if (target.dataset.backdrop !== undefined) options["backdrop"] = target.dataset.backdrop === "true";
+      if (target.dataset.backdropClasses) options["backdropClasses"] = target.dataset.backdropClasses;
+      if (target.dataset.closable) options["closable"] = target.dataset.edgeOffset;
+      if (target.dataset.onHide) options["onHide"] = target.dataset.onHide;
+      if (target.dataset.onShow) options["onShow"] = target.dataset.onShow;
+      if (target.dataset.onToggle) options["onToggle"] = target.dataset.onToggle;
+    }
+    return options;
+  }
+
+  _toCamelCase(str) {
+    return str.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+  }
+
+  toggle(event) {
+    const targetId = event.target.dataset[this._toCamelCase(this.identifier + '-id')];
+    if (targetId) {
+      if (this.modals[targetId]) this.modals[targetId].toggle();
+      else console.warn(`Modal with id ${targetId} not found.`);
+    } else
+      Object.entries(this.modals).forEach(([_id, modal]) => { if (modal) modal.toggle(); });
+  }
+
+  show(event) {
+    const targetId = event.target.dataset[this._toCamelCase(this.identifier + '-id')];
+    if (targetId) {
+      if (this.modals[targetId]) this.modals[targetId].show();
+      else console.warn(`Modal with id ${targetId} not found.`);
+    } else
+      Object.entries(this.modals).forEach(([_id, modal]) => { if (modal) modal.show(); });
+  }
+
+  hide(event) {
+    const targetId = event.target.dataset[this._toCamelCase(this.identifier + '-id')];
+    if (targetId) {
+      if (this.modals[targetId]) this.modals[targetId].hide();
+      else console.warn(`Modal with id ${targetId} not found.`);
+    } else
+      Object.entries(this.modals).forEach(([_id, modal]) => { if (modal) modal.hide(); });
+  }
+}
+
+// document.dispatchEvent(new CustomEvent("toggleModal:demo-modal"));