fluxbit_view_components 0.3.0 → 0.4.0

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

@@ -0,0 +1,170 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [
+    "eyeIcon",
+    "eyeSlashIcon",
+    "inputWrapper",
+    "strengthIndicator",
+    "strengthBar",
+    "checkLength",
+    "checkLengthPass",
+    "checkLengthFail",
+    "checkUppercase",
+    "checkUppercasePass",
+    "checkUppercaseFail",
+    "checkLowercase",
+    "checkLowercasePass",
+    "checkLowercaseFail",
+    "checkNumbers",
+    "checkNumbersPass",
+    "checkNumbersFail",
+    "checkSpecial",
+    "checkSpecialPass",
+    "checkSpecialFail"
+  ]
+
+  static values = {
+    minLength: { type: Number, default: 8 },
+    requireUppercase: { type: Boolean, default: true },
+    requireLowercase: { type: Boolean, default: true },
+    requireNumbers: { type: Boolean, default: true },
+    requireSpecial: { type: Boolean, default: true }
+  }
+
+  connect() {
+    this.passwordVisible = false
+    this.passwordInput = this.element.querySelector('input[type="password"]')
+
+    if (!this.passwordInput) {
+      this.passwordInput = this.element.querySelector('input[type="text"]')
+    }
+
+    // Store original attributes that might be lost when changing type
+    this.maxLength = this.passwordInput.getAttribute('maxlength')
+  }
+
+  toggleVisibility(event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    this.passwordVisible = !this.passwordVisible
+
+    if (this.passwordVisible) {
+      this.passwordInput.type = "text"
+      this.showEyeSlash()
+    } else {
+      this.passwordInput.type = "password"
+      this.showEye()
+    }
+
+    // Restore maxlength if it was set
+    if (this.maxLength) {
+      this.passwordInput.setAttribute('maxlength', this.maxLength)
+    }
+  }
+
+  showEye() {
+    if (!this.hasEyeIconTarget || !this.hasEyeSlashIconTarget) return
+
+    this.eyeIconTarget.classList.remove('hidden')
+    this.eyeSlashIconTarget.classList.add('hidden')
+  }
+
+  showEyeSlash() {
+    if (!this.hasEyeIconTarget || !this.hasEyeSlashIconTarget) return
+
+    this.eyeIconTarget.classList.add('hidden')
+    this.eyeSlashIconTarget.classList.remove('hidden')
+  }
+
+  validate() {
+    if (!this.hasStrengthIndicatorTarget) return
+
+    const password = this.passwordInput.value
+    const checks = {
+      length: password.length >= this.minLengthValue,
+      uppercase: this.requireUppercaseValue ? /[A-Z]/.test(password) : true,
+      lowercase: this.requireLowercaseValue ? /[a-z]/.test(password) : true,
+      numbers: this.requireNumbersValue ? /[0-9]/.test(password) : true,
+      special: this.requireSpecialValue ? /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]/.test(password) : true
+    }
+
+    // Update check indicators
+    this.updateCheck("length", checks.length)
+    if (this.requireUppercaseValue) this.updateCheck("uppercase", checks.uppercase)
+    if (this.requireLowercaseValue) this.updateCheck("lowercase", checks.lowercase)
+    if (this.requireNumbersValue) this.updateCheck("numbers", checks.numbers)
+    if (this.requireSpecialValue) this.updateCheck("special", checks.special)
+
+    // Calculate strength
+    const totalChecks = Object.values(checks).length
+    const passedChecks = Object.values(checks).filter(Boolean).length
+    const strengthPercentage = (passedChecks / totalChecks) * 100
+
+    this.updateStrengthBar(strengthPercentage)
+  }
+
+  updateCheck(type, passed) {
+    const capitalizedType = type.charAt(0).toUpperCase() + type.slice(1)
+    const checkTarget = `check${capitalizedType}Target`
+    const passTarget = `check${capitalizedType}PassTarget`
+    const failTarget = `check${capitalizedType}FailTarget`
+
+    // Check if targets exist
+    if (!this[`has${checkTarget.charAt(0).toUpperCase() + checkTarget.slice(1)}`]) return
+    if (!this[`has${passTarget.charAt(0).toUpperCase() + passTarget.slice(1)}`]) return
+    if (!this[`has${failTarget.charAt(0).toUpperCase() + failTarget.slice(1)}`]) return
+
+    const checkElement = this[checkTarget]
+    const passIcon = this[passTarget]
+    const failIcon = this[failTarget]
+    const iconContainer = checkElement.querySelector('.flex-shrink-0')
+
+    if (passed) {
+      // Show check icon, hide X icon
+      passIcon.classList.remove('hidden')
+      failIcon.classList.add('hidden')
+
+      // Update colors
+      iconContainer.classList.remove('text-red-500', 'dark:text-red-400')
+      iconContainer.classList.add('text-green-500', 'dark:text-green-400')
+      checkElement.classList.remove('text-slate-600', 'dark:text-slate-400')
+      checkElement.classList.add('text-green-600', 'dark:text-green-400')
+    } else {
+      // Show X icon, hide check icon
+      passIcon.classList.add('hidden')
+      failIcon.classList.remove('hidden')
+
+      // Update colors
+      iconContainer.classList.remove('text-green-500', 'dark:text-green-400')
+      iconContainer.classList.add('text-red-500', 'dark:text-red-400')
+      checkElement.classList.remove('text-green-600', 'dark:text-green-400')
+      checkElement.classList.add('text-slate-600', 'dark:text-slate-400')
+    }
+  }
+
+  updateStrengthBar(percentage) {
+    if (!this.hasStrengthBarTarget) return
+
+    this.strengthBarTarget.style.width = `${percentage}%`
+
+    // Update color based on strength
+    this.strengthBarTarget.classList.remove(
+      'bg-red-500', 'dark:bg-red-400',
+      'bg-yellow-500', 'dark:bg-yellow-400',
+      'bg-green-500', 'dark:bg-green-400',
+      'bg-slate-300', 'dark:bg-slate-600'
+    )
+
+    if (percentage === 0) {
+      this.strengthBarTarget.classList.add('bg-slate-300', 'dark:bg-slate-600')
+    } else if (percentage < 50) {
+      this.strengthBarTarget.classList.add('bg-red-500', 'dark:bg-red-400')
+    } else if (percentage < 100) {
+      this.strengthBarTarget.classList.add('bg-yellow-500', 'dark:bg-yellow-400')
+    } else {
+      this.strengthBarTarget.classList.add('bg-green-500', 'dark:bg-green-400')
+    }
+  }
+}

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

@@ -0,0 +1,374 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["bar", "textLabel", "progressLabel"];
+  static values = {
+    progress: {
+      type: Number,
+      default: 0
+    },
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    speed: {
+      type: String,
+      default: "normal"
+    }
+  };
+
+  connect() {
+    this.updateProgress();
+    this.updateBarTransition();
+  }
+
+  progressValueChanged() {
+    this.updateProgress();
+  }
+
+  animateValueChanged() {
+    this.updateBarTransition();
+  }
+
+  speedValueChanged() {
+    this.updateBarTransition();
+  }
+
+  updateProgress() {
+    const clampedProgress = Math.max(0, Math.min(100, this.progressValue));
+
+    if (this.hasBarTarget) {
+      this.barTarget.style.width = `${clampedProgress}%`;
+      this.barTarget.setAttribute('aria-valuenow', clampedProgress);
+    }
+
+    if (this.hasProgressLabelTarget) {
+      this.progressLabelTarget.textContent = `${clampedProgress}%`;
+    }
+
+    this.element.setAttribute('aria-valuenow', clampedProgress);
+  }
+
+  updateBarTransition() {
+    if (!this.hasBarTarget) return;
+
+    if (this.animateValue) {
+      let duration;
+      switch (this.speedValue) {
+        case 'slow':
+          duration = '2s';
+          break;
+        case 'fast':
+          duration = '0.3s';
+          break;
+        case 'very_fast':
+          duration = '0.1s';
+          break;
+        case 'normal':
+        default:
+          duration = '0.6s';
+          break;
+      }
+
+      this.barTarget.style.transition = `width ${duration} ease-out`;
+    } else {
+      this.barTarget.style.transition = 'none';
+    }
+  }
+
+  // Core progress methods
+  setProgress(progress) {
+    this.progressValue = progress;
+  }
+
+  incrementProgress(amount = 1) {
+    this.progressValue = Math.min(100, this.progressValue + amount);
+  }
+
+  decrementProgress(amount = 1) {
+    this.progressValue = Math.max(0, this.progressValue - amount);
+  }
+
+  reset() {
+    this.progressValue = 0;
+  }
+
+  complete() {
+    this.progressValue = 100;
+  }
+
+  setSpeed(speed) {
+    this.speedValue = speed;
+  }
+
+  setAnimate(animate) {
+    this.animateValue = animate;
+  }
+
+  // Animation method
+  animateToProgress(targetProgress, duration = 1000) {
+    const startProgress = this.progressValue;
+    const difference = targetProgress - startProgress;
+    const startTime = performance.now();
+
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+    }
+
+    const animate = (currentTime) => {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easeOut = 1 - Math.pow(1 - progress, 3);
+      const currentProgress = startProgress + (difference * easeOut);
+
+      this.updateProgressDirect(Math.round(currentProgress));
+
+      if (progress < 1) {
+        this.animationId = requestAnimationFrame(animate);
+      } else {
+        this.progressValue = targetProgress;
+        this.animationId = null;
+      }
+    };
+
+    this.animationId = requestAnimationFrame(animate);
+  }
+
+  updateProgressDirect(progress) {
+    const clampedProgress = Math.max(0, Math.min(100, progress));
+
+    if (this.hasBarTarget) {
+      this.barTarget.style.width = `${clampedProgress}%`;
+      this.barTarget.setAttribute('aria-valuenow', clampedProgress);
+    }
+
+    if (this.hasProgressLabelTarget) {
+      this.progressLabelTarget.textContent = `${clampedProgress}%`;
+    }
+
+    this.element.setAttribute('aria-valuenow', clampedProgress);
+  }
+
+  // Action methods (for Stimulus data-action bindings)
+  increment(event) {
+    const amount = parseInt(event.params?.amount) || 1;
+    const progressId = event.params?.id;
+
+    if (progressId) {
+      this.updateProgressById(progressId, (controller) => controller.incrementProgress(amount));
+    } else {
+      this.incrementProgress(amount);
+    }
+  }
+
+  decrement(event) {
+    const amount = parseInt(event.params?.amount) || 1;
+    const progressId = event.params?.id;
+
+    if (progressId) {
+      this.updateProgressById(progressId, (controller) => controller.decrementProgress(amount));
+    } else {
+      this.decrementProgress(amount);
+    }
+  }
+
+  resetProgress(event) {
+    const progressId = event.params?.id;
+
+    if (progressId) {
+      this.updateProgressById(progressId, (controller) => controller.reset());
+    } else {
+      this.reset();
+    }
+  }
+
+  completeProgress(event) {
+    const progressId = event.params?.id;
+
+    if (progressId) {
+      this.updateProgressById(progressId, (controller) => controller.complete());
+    } else {
+      this.complete();
+    }
+  }
+
+  animateTo(event) {
+    const target = parseInt(event.params?.target) || 100;
+    const duration = parseInt(event.params?.duration) || 1000;
+    const progressId = event.params?.id;
+
+    if (progressId) {
+      this.updateProgressById(progressId, (controller) => controller.animateToProgress(target, duration));
+    } else {
+      this.animateToProgress(target, duration);
+    }
+  }
+
+  updateSpeed(event) {
+    const speed = event.params?.speed || 'normal';
+    const progressId = event.params?.id;
+
+    if (progressId) {
+      this.updateProgressById(progressId, (controller) => controller.setSpeed(speed));
+    } else {
+      this.setSpeed(speed);
+    }
+  }
+
+  // Helper method to target specific progress bars by ID
+  updateProgressById(progressId, callback) {
+    const progressContainer = this.element.querySelector(`[data-progress-id="${progressId}"]`);
+    if (!progressContainer) return;
+
+    // Get the progress bar and labels within the specific progress container
+    const progressBar = progressContainer.querySelector('div[style*="width"]');
+    const textLabel = progressContainer.parentElement.querySelector('span:first-child');
+    const progressLabel = progressContainer.parentElement.querySelector('span:last-child');
+
+    if (!progressBar) return;
+
+    // Create a temporary controller-like object to operate on this specific progress bar
+    const tempController = {
+      barElement: progressBar,
+      textLabelElement: textLabel,
+      progressLabelElement: progressLabel,
+      containerElement: progressContainer,
+
+      setProgress: (progress) => {
+        const clampedProgress = Math.max(0, Math.min(100, progress));
+        this.updateSpecificProgress(progressBar, progressLabel, clampedProgress);
+      },
+
+      incrementProgress: (amount = 1) => {
+        const currentProgress = this.getCurrentProgress(progressBar);
+        const newProgress = Math.min(100, currentProgress + amount);
+        this.updateSpecificProgress(progressBar, progressLabel, newProgress);
+      },
+
+      decrementProgress: (amount = 1) => {
+        const currentProgress = this.getCurrentProgress(progressBar);
+        const newProgress = Math.max(0, currentProgress - amount);
+        this.updateSpecificProgress(progressBar, progressLabel, newProgress);
+      },
+
+      reset: () => {
+        this.updateSpecificProgress(progressBar, progressLabel, 0);
+      },
+
+      complete: () => {
+        this.updateSpecificProgress(progressBar, progressLabel, 100);
+      },
+
+      animateToProgress: (targetProgress, duration = 1000) => {
+        const currentProgress = this.getCurrentProgress(progressBar);
+        this.animateSpecificProgress(progressBar, progressLabel, currentProgress, targetProgress, duration);
+      },
+
+      setSpeed: (speed) => {
+        // Update transition speed for this specific progress bar
+        let duration;
+        switch (speed) {
+          case 'slow': duration = '2s'; break;
+          case 'fast': duration = '0.3s'; break;
+          case 'very_fast': duration = '0.1s'; break;
+          default: duration = '0.6s'; break;
+        }
+        progressBar.style.transition = `width ${duration} ease-out`;
+      }
+    };
+
+    if (callback) {
+      callback(tempController);
+    }
+  }
+
+  // Helper methods for specific progress bar operations
+  getCurrentProgress(progressBar) {
+    const widthStyle = progressBar.style.width;
+    return parseInt(widthStyle.replace('%', '')) || 0;
+  }
+
+  updateSpecificProgress(progressBar, progressLabel, progress) {
+    const clampedProgress = Math.max(0, Math.min(100, progress));
+
+    progressBar.style.width = `${clampedProgress}%`;
+    progressBar.setAttribute('aria-valuenow', clampedProgress);
+
+    if (progressLabel) {
+      progressLabel.textContent = `${clampedProgress}%`;
+    }
+  }
+
+  animateSpecificProgress(progressBar, progressLabel, startProgress, targetProgress, duration) {
+    const difference = targetProgress - startProgress;
+    const startTime = performance.now();
+
+    const animate = (currentTime) => {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easeOut = 1 - Math.pow(1 - progress, 3);
+      const currentProgress = startProgress + (difference * easeOut);
+
+      this.updateSpecificProgress(progressBar, progressLabel, Math.round(currentProgress));
+
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        this.updateSpecificProgress(progressBar, progressLabel, targetProgress);
+      }
+    };
+
+    requestAnimationFrame(animate);
+  }
+
+  disconnect() {
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = null;
+    }
+  }
+
+  // Global access methods for vanilla JavaScript
+  static getController(element) {
+    if (typeof element === 'string') {
+      element = document.querySelector(element);
+    }
+    if (!element) return null;
+
+    const controllerElement = element.closest('[data-controller*="fx-progress"]');
+    if (!controllerElement) return null;
+
+    return window.Stimulus?.getControllerForElementAndIdentifier(controllerElement, 'fx-progress') ||
+           application?.getControllerForElementAndIdentifier(controllerElement, 'fx-progress');
+  }
+
+  static updateProgress(selector, progress) {
+    const controller = this.getController(selector);
+    if (controller) controller.setProgress(progress);
+  }
+
+  static incrementProgress(selector, amount = 10) {
+    const controller = this.getController(selector);
+    if (controller) controller.incrementProgress(amount);
+  }
+
+  static animateProgress(selector, target, duration = 1000) {
+    const controller = this.getController(selector);
+    if (controller) controller.animateToProgress(target, duration);
+  }
+
+  static resetProgress(selector) {
+    const controller = this.getController(selector);
+    if (controller) controller.reset();
+  }
+
+  static completeProgress(selector) {
+    const controller = this.getController(selector);
+    if (controller) controller.complete();
+  }
+
+  static updateProgressById(selector, progressId, callback) {
+    const controller = this.getController(selector);
+    if (controller) controller.updateProgressById(progressId, callback);
+  }
+}

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

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { url: String, frame: String }
+
+  connect() {
+    // Ensure we're dealing with a table row
+    if (this.element.tagName !== 'TR') {
+      console.warn('row-click controller should only be used on <tr> tags')
+      return
+    }
+    this.element.addEventListener("click", this.navigate.bind(this));
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this.navigate.bind(this));
+  }
+
+  navigate(event) {
+    if (event.target === event.currentTarget || 
+        !event.target.closest('button, a, input, select, textarea')) {
+      if (this.frameValue) {
+        // Navigate within a turbo frame
+        window.Turbo.visit(this.urlValue, { frame: this.frameValue });
+
+      } else {
+        // Regular navigation
+        window.Turbo.visit(this.urlValue);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,122 @@
+import { Controller } from "@hotwired/stimulus";
+
+// This controller manages the behavior of a select all checkbox and its associated checkboxes
+// It allows users to select or deselect all items in a list and provides visual feedback based on the selection state.
+// It also updates the visibility and enabled/disabled state of other elements based on the selection state
+// The code is based on Stimulus Component Checkbox Select All 
+// (https://github.com/stimulus-components/stimulus-components/tree/master/components/checkbox-select-all)
+//
+// Copyright (c) 2024 Guillaume Briday <guillaumebriday@gmail.com>
+// Licensed under the MIT License
+// Modified by Arthur Molina <arthurmolina@gmail.com>, 2025
+export default class extends Controller {
+  static targets = [
+    "selectAll",
+    "select",
+    "disableOnEmptySelect",
+    "enableOnEmptySelect",
+    "hideOnEmptySelect",
+    "showOnEmptySelect",
+    "count"
+  ];
+
+  static values = {
+    disableIndeterminate: {
+      type: Boolean,
+      default: false,
+    },
+  };
+
+  initialize() {
+    this.toggle = this.toggle.bind(this);
+    this.refresh = this.refresh.bind(this);
+  }
+
+  selectAllTargetConnected(checkbox) {
+    checkbox.addEventListener("change", this.toggle);
+    this.refresh();
+  }
+
+  selectTargetConnected(checkbox) {
+    checkbox.addEventListener("change", this.refresh);
+    this.refresh();
+  }
+
+  selectAllTargetDisconnected(checkbox) {
+    checkbox.removeEventListener("change", this.toggle);
+    this.refresh();
+  }
+
+  selectTargetDisconnected(checkbox) {
+    checkbox.removeEventListener("change", this.refresh);
+    this.refresh();
+  }
+
+  toggle(e) {
+    e.preventDefault();
+
+    this.selectTargets.forEach((checkbox) => {
+      checkbox.checked = e.target.checked;
+      this.triggerInputEvent(checkbox);
+    });
+    this.refresh()
+  }
+
+  refresh() {
+    const checkboxesCount = this.selectTargets.length;
+    const checkboxesCheckedCount = this.checked.length;
+
+    if (this.disableIndeterminateValue) {
+      this.selectAllTarget.checked = checkboxesCheckedCount === checkboxesCount;
+    } else {
+      this.selectAllTarget.checked = checkboxesCheckedCount > 0;
+      this.selectAllTarget.indeterminate = checkboxesCheckedCount > 0 && checkboxesCheckedCount < checkboxesCount;
+    }
+    this.updateVisibility();
+    this.updateDisabledState();
+    this.updateCount();
+  }
+
+  updateVisibility() {
+    const hasChecked = this.checkedCount() > 0;
+    this.hideOnEmptySelectTargets.forEach((el) => {
+      el.classList.toggle("hidden", hasChecked);
+    });
+    this.showOnEmptySelectTargets.forEach((el) => {
+      el.classList.toggle("hidden", !hasChecked);
+    });
+  }
+
+  updateDisabledState() {
+    const hasChecked = this.checkedCount() > 0;
+    this.disableOnEmptySelectTargets.forEach((el) => {
+      el.disabled = !hasChecked;
+    });
+    this.enableOnEmptySelectTargets.forEach((el) => {
+      el.disabled = hasChecked;
+    });
+  }
+
+  updateCount() {
+    this.countTargets.forEach((el) => {
+      el.textContent = this.checkedCount().toString();
+    });
+  }
+
+  triggerInputEvent(checkbox) {
+    const event = new Event("input", { bubbles: false, cancelable: true });
+    checkbox.dispatchEvent(event);
+  }
+
+  checkedCount() {
+    return this.checked.length;
+  }
+
+  get checked() {
+    return this.selectTargets.filter((checkbox) => checkbox.checked);
+  }
+
+  get unchecked() {
+    return this.selectTargets.filter((checkbox) => !checkbox.checked);
+  }
+}