bulma-phlex-rails 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ad0e3e804dc9faff6ac9cbdf36b8b037584553ed9abfbcf3419e71d59a303b27
-  data.tar.gz: c2a35b63fe132af025e3560e4e020e0fcd9659f45befdf93d2d4ece1cc13120c
+  metadata.gz: 8534c00b03a3ae8dad07d870b62ff94369802828940f05f6e8e9389b916c3dc9
+  data.tar.gz: 8a1284dc1ec5c8dd3a8bb60fdba5e69303fb6f3ae6a18bf6b3f58e70baf1840a
 SHA512:
-  metadata.gz: 4aa3c95dd7418630d1095174a9c856c68389f4497e7c771321915739e91c4760c9676e524b5151f1ec12b827ef44a73ea54a374ff22f870dc2f851ba4c78db5c
-  data.tar.gz: f1a842f1c1c6af94222373b104d507578263eecb0d61f5770244f9bb2649a76b8f5fe28df7e93971eac88cca1a988afc709694558dfddc9a77692cfaa257d8c0
+  metadata.gz: ed9272374b031aba4d8a685b011a5bd9f86989302da74cf8de070295e5457ce4b3502d1a6469ce94fdd536f6bca7bf5df0d501e2d4f29cd5c6f11e43a371ad98
+  data.tar.gz: ee41ceed1abc0e13778f74dce863579396740d19854f465fb1d12d086d3ca8480a6abb34c6959a8885dd9cff237fc9618632d3b2c7e3a154dca4439929eeed80

data/app/javascript/controllers/bulma_phlex/dropdown_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus";
+
+/*
+  To use this Stimulus controller, add the controller to your dropdown container
+  and the action to your dropdown button:
+
+    <div class="dropdown" data-controller="bulma_phlex--dropdown">
+      <button data-action="bulma_phlex--dropdown#toggle">
+        Dropdown
+      </button>
+      <div class="dropdown-menu">...</div>
+    </div>
+
+  This will toggle the dropdown menu when the button is clicked.
+*/
+
+export default class extends Controller {
+  connect() {
+    this.closeHandler = this.close.bind(this);
+    document.addEventListener("click", this.closeHandler);
+  }
+
+  disconnect() {
+    if (this.closeHandler) {
+      document.removeEventListener("click", this.closeHandler);
+      this.closeHandler = null;
+    }
+  }
+
+  toggle(event) {
+    event.stopPropagation();
+    this.element.classList.toggle("is-active");
+  }
+
+  close(_event) {
+    this.element.classList.remove("is-active");
+  }
+}

data/app/javascript/controllers/bulma_phlex/file_input_display_controller.js

@@ -0,0 +1,82 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["fileInput", "fileList"]
+
+  acceptValues = []
+
+  connect() {
+    this.show()
+    this.#parseAcceptAttribute()
+  }
+
+  show() {
+    const preview = this.fileListTarget;
+    this.#clear(preview)
+
+    const curFiles = this.fileInputTarget.files;
+    if (curFiles.length === 0) {
+      const para = document.createElement("p")
+      para.textContent = "No files currently selected for upload"
+      preview.appendChild(para)
+    } else {
+      const list = document.createElement("ul")
+      preview.appendChild(list)
+  
+      for (const file of curFiles) {
+        const listItem = document.createElement("li")
+        listItem.textContent =  this.#fileTextContent(file)
+        list.appendChild(listItem);
+      }
+    }
+  }
+
+  #clear(preview) {
+    while (preview.firstChild) {
+      preview.removeChild(preview.firstChild);
+    }
+  }
+
+  #fileTextContent(file) {
+    if (this.#validFileType(file)) {
+      return this.#fileInfo(file);
+    } else {
+      return `File name ${file.name}: Not a valid file type. Update your selection.`;
+    }
+  }
+
+  #validFileType(file) {
+    // If no accept attribute is specified, accept all files
+    if (this.acceptValues.length === 0) {
+      return true
+    }
+
+    const fileExtension = `.${file.name.split('.').pop().toLowerCase()}`
+    const fileMimeType = file.type.toLowerCase()
+
+    // Check if the file matches any of the accept criteria
+    return this.acceptValues.some(acceptValue => {
+      if (acceptValue.startsWith('.')) {
+        // Check file extension (e.g. ".jpg")
+        return acceptValue.toLowerCase() === fileExtension
+      } else if (acceptValue.includes('/*')) {
+        // Check MIME type with wildcard (e.g. "image/*")
+        const acceptGroup = acceptValue.split('/')[0]
+        return fileMimeType.startsWith(`${acceptGroup}/`)
+      } else {
+        // Check specific MIME type (e.g. "image/jpeg")
+        return acceptValue === fileMimeType
+      }
+    })
+  }
+
+  #fileInfo(file) {
+    return `${file.name} (${file.size} bytes)`
+  }
+
+  #parseAcceptAttribute() {
+    if (this.fileInputTarget.accept) {
+      this.acceptValues = this.fileInputTarget.accept.split(',').map(type => type.trim())
+    }
+  }
+}

data/app/javascript/controllers/bulma_phlex/navigation_bar_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "burger", "menu" ]
+
+  toggle(_event) {
+    this.burgerTarget.classList.toggle('is-active');
+    this.menuTarget.classList.toggle('is-active');
+  }
+}

data/app/javascript/controllers/bulma_phlex/tabs_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["tab", "content"];
+
+  showTabContent(event) {
+    event.preventDefault();
+
+    const id = event.currentTarget.dataset.tabContent;
+    this.showTabAndContentForId(id);
+  }
+
+  showTabAndContentForId(id) {
+    this.manageTabs(id);
+    this.manageContent(id);
+  }
+
+  manageTabs(id) {
+    this.tabTargets.forEach((tab) => {
+      if (tab.dataset.tabContent === id) {
+        tab.classList.add("is-active");
+      } else {
+        tab.classList.remove("is-active");
+      }
+    });
+  }
+
+  manageContent(id) {
+    this.contentTargets.forEach((content) => {
+      if (content.id === id) {
+        content.classList.remove("is-hidden");
+      } else {
+        content.classList.add("is-hidden");
+      }
+    });
+  }
+}

data/config/importmap.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+pin_all_from File.expand_path("../app/javascript/controllers/bulma_phlex", __dir__), under: "controllers/bulma_phlex"

data/lib/bulma_phlex/rails/form_builder.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  module Rails
+    # # Form Builder
+    #
+    # This form builder wraps inputs with [Bulma Form Fields](https://bulma.io/documentation/form/general/#form-field).
+    #
+    # In addition to standard input options, it supports the following Bulma-specific options:
+    # - `suppress_label`: If true, the label will not be rendered.
+    # - `icon_left`: If set, the specified icon will be rendered on the left side of the input.
+    # - `icon_right`: If set, the specified icon will be rendered on the right side of the input.
+    # - `column`: If true, the input will be wrapped in a Bulma column (only within a `columns` block).
+    # - `grid`: If true, the input will be wrapped in a Bulma grid cell (only within a `grid` block).
+    class FormBuilder < ActionView::Helpers::FormBuilder
+      def text_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def password_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def color_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def search_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def telephone_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def phone_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def date_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def time_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def datetime_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def datetime_local_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def month_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def week_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def url_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def email_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def number_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+      def range_field(method, **options) = wrap_field(method, options) { |m, opts| super(m, opts) }
+
+      # Fields declared in a column block will be wrapped in a Bulma column and carry
+      # the `column` class by default (fields can use the `column` option to set sizes).
+      def columns(min_breakpoint = nil, &)
+        @columns_flag = true
+        columns = @template.capture(&)
+        @columns_flag = false
+
+        @template.content_tag(:div, class: [:columns, min_breakpoint]) do
+          @template.concat(columns)
+        end
+      end
+
+      # Fields declared in a fixed_grid block will be wrapped in a Bulma fixed grid and
+      # carry the `grid` class by default (fields can use the `grid` option to set sizes).
+      def fixed_grid(&)
+        # TODO: Use BulmaPhlex::FixedGrid for more options
+        @template.content_tag(:div, class: "fixed-grid") do
+          grid(&)
+        end
+      end
+
+      # Fields declared in a grid block will be wrapped in a Bulma fixed grid and carry
+      # the `grid` class by default (fields can use the `grid` option to set sizes).
+      def grid(&)
+        @grid_flag = true
+        cells = @template.capture(&)
+        @grid_flag = false
+
+        # TODO: Use BulmaPhlex::Grid for more options
+        @template.content_tag(:div, class: "grid") do
+          @template.concat(cells)
+        end
+      end
+
+      private
+
+      def wrap_field(method, options, &delivered)
+        options = options.dup
+        options[:class] = "input #{options[:class]}".rstrip
+
+        form_field_options = options.extract!(:icon_left, :icon_right, :column, :grid)
+                                    .with_defaults(column: @columns_flag, grid: @grid_flag)
+
+        form_field = FormField.new(**form_field_options) do |f|
+          f.label { label(method, class: "label").html_safe } unless options.delete(:suppress_label)
+          f.control { delivered.call(method, options) }
+        end
+
+        form_field.render_in(@template)
+      end
+    end
+  end
+end

data/lib/bulma_phlex/rails/version.rb

@@ -2,6 +2,6 @@
 
 module BulmaPhlex
   module Rails
-    VERSION = "0.2.0"
+    VERSION = "0.3.0"
   end
 end

data/lib/bulma_phlex/rails.rb

@@ -14,6 +14,7 @@ end
 loader = Zeitwerk::Loader.for_gem_extension(BulmaPhlex)
 loader.collapse("#{__dir__}/rails/components")
 loader.collapse("#{__dir__}/rails/helpers")
+loader.collapse("#{__dir__}/rails/models")
 loader.setup
 
 require "bulma_phlex/rails/engine"

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: bulma-phlex-rails
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Todd Kummer
 bindir: bin
 cert_chain: []
-date: 1980-01-02 00:00:00.000000000 Z
+date: 2026-01-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -29,14 +29,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.8.0
+        version: 0.9.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.8.0
+        version: 0.9.0
 - !ruby/object:Gem::Dependency
   name: phlex-rails
   requirement: !ruby/object:Gem::Requirement
@@ -73,9 +73,15 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- app/javascript/controllers/bulma_phlex/dropdown_controller.js
+- app/javascript/controllers/bulma_phlex/file_input_display_controller.js
+- app/javascript/controllers/bulma_phlex/navigation_bar_controller.js
+- app/javascript/controllers/bulma_phlex/tabs_controller.js
+- config/importmap.rb
 - lib/bulma-phlex-rails.rb
 - lib/bulma_phlex/rails.rb
 - lib/bulma_phlex/rails/engine.rb
+- lib/bulma_phlex/rails/form_builder.rb
 - lib/bulma_phlex/rails/helpers/card_helper.rb
 - lib/bulma_phlex/rails/helpers/table_helper.rb
 - lib/bulma_phlex/rails/version.rb