bulma-phlex-rails 0.1.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a85eb64e11f1a1cd0649c716644d77c998f8eca5586702134d05b9ba19f742f9
-  data.tar.gz: a5913c8af7d86296bb9fe8749ed1cd2bf95bbcbad68a96ece2f6219d229d227e
+  metadata.gz: 9ccde325abe028d8ab12fb8dfbcd754814274554029fffe1c443c21d0936c6e1
+  data.tar.gz: 0e526e0539626fa8b17780e9ce1db8edc2d81b68c4808fa0fcb108dad44e1944
 SHA512:
-  metadata.gz: a7bad96383be09de73ba745775ab5ef114d843f232eacf18f8f7b7a8242819d02dfbbd889bdc052bbdf05d8d602fd85138d5ba3aa7f130d1f1475ed3e923f804
-  data.tar.gz: 72f5562ee7c4c5774ec3c9158f37ec8b91b349bed77f64852d5c7b4fdcf8f563d1fa3ae926ae09bc0dc072b58a285c218c198a847d2240abeb1ad8e49990dd44
+  metadata.gz: fca248f599cd3f0793a37864c791e451b8e9019639e093dea13b27dc5a5443dc21b85959201f14763a896edf8f094c22907fd45854b74c6302dce3f5712430e0
+  data.tar.gz: 0e7e6196221edf59fb6c1303d4ef0e74d30522dfbb37e9c7c2ff8a15f3e90f33a6c3f65c142776ce1f9a53d155ab8e6860c909335bafe9ccd464e25c11b3d64e

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.rb

@@ -1,7 +1,3 @@
 # frozen_string_literal: true
 
-require "bulma_phlex_rails/engine"
-
-# Create namespace for engine.
-module BulmaPhlexRails
-end
+require "bulma_phlex/rails"

data/lib/bulma_phlex/rails/engine.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require "rails/engine"
+
+module BulmaPhlex
+  module Rails
+    # Rails Engine for BulmaPhlex
+    class Engine < ::Rails::Engine
+      initializer "bulma_phlex.rails.importmap", before: "importmap" do |app|
+        app.config.importmap.paths << Engine.root.join("config/importmap.rb")
+      end
+
+      initializer "bulma_phlex.rails.assets" do |app|
+        app.config.assets.paths << root.join("app/javascript")
+      end
+    end
+  end
+end

data/lib/bulma_phlex/rails/helpers/card_helper.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  module Rails
+    # # Card Helper
+    #
+    # This module provides method `turbo_frame_content` to create a card with a turbo frame as its content.
+    module CardHelper
+      extend ActiveSupport::Concern
+
+      included do
+        include Phlex::Rails::Helpers::TurboFrameTag
+      end
+
+      # Renders a Bulma-styled card with a Turbo Frame as its content. This uses the same signatures as
+      # `turbo_frame_tag`, with the addition of two optional attributes: `pending_message` and `pending_icon`.
+      #
+      # The two pending attributes have the following defaults:
+      # - pending_message: "Loading..."
+      # - pending_icon: "fas fa-spinner fa-pulse"
+      def turbo_frame_content(*ids, src: nil, target: nil, **attributes)
+        pending_message = attributes.delete(:pending_message) || "Loading..."
+        pending_icon = attributes.delete(:pending_icon) || "fas fa-spinner fa-pulse"
+
+        content do
+          turbo_frame_tag ids, src: src, target: target, **attributes do
+            span(class: "icon") { i class: pending_icon }
+            span { plain pending_message }
+          end
+          # rescue StandardError => e
+          #   puts "Error in turbo_frame_content: #{e.message}"
+          #   puts e.args
+        end
+      end
+    end
+  end
+end

data/lib/bulma_phlex/rails/helpers/table_helper.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  module Rails
+    # # Table Helper
+    #
+    # This module provides method `amount_column` to create an amount column in a table.
+    module TableHelper
+      extend ActiveSupport::Concern
+
+      included do
+        include Phlex::Rails::Helpers::NumberToCurrency
+      end
+
+      def amount_column(header, currency: {}, **html_attributes, &content)
+        html_attributes[:class] = [html_attributes[:class], "has-text-right"].compact.join(" ")
+
+        column(header, **html_attributes) do |row|
+          number_to_currency(content.call(row), **currency)
+        end
+      end
+    end
+  end
+end

data/lib/bulma_phlex/rails/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  module Rails
+    VERSION = "0.2.1"
+  end
+end

data/lib/bulma_phlex/rails.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "action_view"
+require "bulma-phlex"
+require "phlex-rails"
+require "zeitwerk"
+
+module BulmaPhlex
+  # The Rails namespace provides Bulma Phlex components and helpers for integration with Ruby on Rails applications.
+  module Rails
+  end
+end
+
+loader = Zeitwerk::Loader.for_gem_extension(BulmaPhlex)
+loader.collapse("#{__dir__}/rails/components")
+loader.collapse("#{__dir__}/rails/helpers")
+loader.setup
+
+require "bulma_phlex/rails/engine"
+
+# Rails-specific extensions to BulmaPhlex components
+BulmaPhlex::Card.include(BulmaPhlex::Rails::CardHelper) if defined?(Turbo)
+BulmaPhlex::Table.include(BulmaPhlex::Rails::TableHelper)

metadata

@@ -1,14 +1,70 @@
 --- !ruby/object:Gem::Specification
 name: bulma-phlex-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Todd Kummer
 bindir: bin
 cert_chain: []
 date: 1980-01-02 00:00:00.000000000 Z
-dependencies: []
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: actionpack
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.2'
+- !ruby/object:Gem::Dependency
+  name: bulma-phlex
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.8.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.8.0
+- !ruby/object:Gem::Dependency
+  name: phlex-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.3'
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.2'
 description: Create forms with Bulma CSS framework styles using Phlex components in
   your Rails applications.
 email:
@@ -17,9 +73,17 @@ 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/engine.rb
-- lib/bulma_phlex_rails/version.rb
+- lib/bulma_phlex/rails.rb
+- lib/bulma_phlex/rails/engine.rb
+- lib/bulma_phlex/rails/helpers/card_helper.rb
+- lib/bulma_phlex/rails/helpers/table_helper.rb
+- lib/bulma_phlex/rails/version.rb
 homepage: https://github.com/RockSolt/bulma-phlex-rails
 licenses:
 - MIT
@@ -33,7 +97,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 3.2.0
+      version: '3.4'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="

data/lib/bulma_phlex_rails/engine.rb

@@ -1,6 +0,0 @@
-# frozen_string_literal: true
-
-module BulmaPhlexRails
-  class Engine # rubocop:disable Lint/EmptyClass
-  end
-end

data/lib/bulma_phlex_rails/version.rb

@@ -1,5 +0,0 @@
-# frozen_string_literal: true
-
-module BulmaPhlexRails
-  VERSION = "0.1.0"
-end