plutonium 0.15.24 → 0.16.1

data/lib/plutonium/core/controllers/authorizable.rb

@@ -16,13 +16,15 @@ module Plutonium
 
         private
 
-        def authorized_resource_scope(resource, **options)
+        # Use this when getting a scope for a resource that is not the current
+        # Use this instead of authorized_scope directly
+        def authorized_resource_scope(resource, relation: nil, **options)
           raise ArgumentError("Expected resource to be a class inheriting ActiveRecord::Base") unless resource.instance_of?(Class) && resource < ActiveRecord::Base
 
           options[:with] ||= ActionPolicy.lookup(resource, namespace: authorization_namespace)
-          resource = resource.all
+          relation ||= resource.all
 
-          authorized_scope(resource, **options)
+          authorized_scope(relation, **options)
         end
 
         def entity_scope_for_authorize

data/lib/plutonium/ui/component/methods.rb

@@ -48,6 +48,7 @@ module Plutonium
           :current_interactive_action,
           :current_engine,
           :policy_for,
+          :authorized_resource_scope,
           :allowed_to?,
           :registered_resources,
           :root_path,

data/lib/plutonium/ui/display/theme.rb

@@ -18,6 +18,7 @@ module Plutonium
             color: "flex items-center text-md text-gray-900 dark:text-white mb-1 whitespace-pre-line",
             color_indicator: "w-10 h-10 rounded-full mr-2", # max-h-fit
             email: "flex items-center text-md text-primary-600 dark:text-primary-500 mb-1 whitespace-pre-line",
+            phone: "flex items-center text-md text-primary-600 dark:text-primary-500 mb-1 whitespace-pre-line",
             json: "text-sm text-gray-900 dark:text-white mb-1 whitespace-pre font-mono shadow-inner p-4",
             prefixed_icon: "w-8 h-8 mr-2",
             markdown: "format dark:format-invert format-primary"

data/lib/plutonium/ui/form/base.rb

@@ -14,15 +14,29 @@ module Plutonium
           end
           alias_method :markdown_tag, :easymde_tag
 
-          alias_method :basic_select_tag, :select_tag
-          def slim_select_tag(**, &)
-            basic_select_tag(**, data_controller: "slim-select", class!: "", &)
+          def slim_select_tag(**attributes, &)
+            attributes[:data_controller] = tokens(attributes[:data_controller], "slim-select")
+            select_tag(**attributes, class!: "", &)
+          end
+
+          def belongs_to_tag(**attributes, &)
+            attributes[:data_controller] = tokens(attributes[:data_controller], "slim-select") # TODO: put this behind a config
+            create_component(Components::BelongsTo, :belongs_to, **attributes, &)
+          end
+
+          def has_many_tag(**attributes, &)
+            attributes[:data_controller] = tokens(attributes[:data_controller], "slim-select") # TODO: put this behind a config
+            create_component(Components::HasMany, :has_many, **attributes, &)
           end
-          alias_method :select_tag, :slim_select_tag
 
           def flatpickr_tag(**, &)
-            create_component(Plutonium::UI::Form::Components::Flatpickr, :flatpickr, **, &)
+            create_component(Components::Flatpickr, :flatpickr, **, &)
+          end
+
+          def int_tel_input_tag(**, &)
+            create_component(Components::IntlTelInput, :int_tel_input, **, &)
           end
+          alias_method :phone_tag, :int_tel_input_tag
         end
 
         private

data/lib/plutonium/ui/form/components/belongs_to.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        class BelongsTo < Phlexi::Form::Components::BelongsTo
+          include Plutonium::UI::Component::Methods
+
+          private
+
+          def choices
+            @choices ||= begin
+              collection = authorized_resource_scope(association_reflection.klass, relation: @choice_collection)
+              Phlexi::Form::ChoicesMapper.new(collection, label_method: @label_method, value_method: @value_method)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/components/has_many.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        class HasMany < Phlexi::Form::Components::HasMany
+          include Plutonium::UI::Component::Methods
+
+          private
+
+          def choices
+            @choices ||= begin
+              collection = authorized_resource_scope(association_reflection.klass, relation: @choice_collection)
+              Phlexi::Form::ChoicesMapper.new(collection, label_method: @label_method, value_method: @value_method)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/components/intl_tel_input.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        class IntlTelInput < Phlexi::Form::Components::Input
+          def view_template
+            div(data_controller: "intl-tel-input") {
+              super
+            }
+          end
+
+          private
+
+          def build_input_attributes
+            super
+            attributes[:data_intl_tel_input_target] = tokens(attributes[:data_intl_tel_input_target], :input)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/options/inferred_types.rb

@@ -8,16 +8,19 @@ module Plutonium
           private
 
           def infer_field_component
-            return :markdown if inferred_field_type == :rich_text
+            case inferred_field_type
+            when :rich_text
+              return :markdown
+            end
 
-            component = super
-            case component
+            inferred_field_component = super
+            case inferred_field_component
             when :select
               :slim_select
             when :date, :time, :datetime
               :flatpickr
             else
-              component
+              inferred_field_component
             end
           end
         end

data/lib/plutonium/ui/form/theme.rb

@@ -42,7 +42,12 @@ module Plutonium
             flatpickr: :input,
             valid_flatpickr: :valid_input,
             invalid_flatpickr: :invalid_input,
-            neutral_flatpickr: :neutral_input
+            neutral_flatpickr: :neutral_input,
+            # int_tel_input
+            int_tel_input: :input,
+            valid_int_tel_input: :valid_input,
+            invalid_int_tel_input: :invalid_input,
+            neutral_int_tel_input: :neutral_input
           })
         end
       end

data/lib/plutonium/ui/layout/base.rb

@@ -132,6 +132,12 @@ module Plutonium
             integrity: "sha384-RkASv+6KfBMW9eknReJIJ6b3UnjKOKC5bOUaNgIY778NFbQ8MtWq9Lr/khUgqtTt",
             crossorigin: "anonymous"
           )
+          link(
+            rel: "stylesheet",
+            href: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.8.1/build/css/intlTelInput.min.css",
+            integrity: "sha384-oE0RVGDyNw9goP8V3wYWC9+3GYojVc/LhhKmLT9J5k+L+oGHPa1gRF3FomvOCOFs",
+            crossorigin: "anonymous"
+          )
         end
 
         def render_scripts
@@ -157,6 +163,11 @@ module Plutonium
             integrity: "sha384-5JqMv4L/Xa0hfvtF06qboNdhvuYXUku9ZrhZh3bSk8VXF0A/RuSLHpLsSV9Zqhl6",
             crossorigin: "anonymous"
           )
+          script(
+            src: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.8.1/build/js/intlTelInput.min.js",
+            integrity: "sha384-oCoRbvnGGnM56vTrLX0f7cgRy2aqLchemkQhvfBT7J+b6km6CSuWz/89IpPnTq9j",
+            crossorigin: "anonymous"
+          )
         end
 
         def render_body_scripts

data/lib/plutonium/ui/table/display_theme.rb

@@ -12,6 +12,7 @@ module Plutonium
             color: "flex items-center",
             color_indicator: "w-10 h-10 rounded-full mr-2",
             email: "flex items-center text-primary-600 dark:text-primary-500 whitespace-nowrap",
+            phone: "flex items-center text-primary-600 dark:text-primary-500 whitespace-nowrap",
             json: " whitespace-pre font-mono shadow-inner p-4"
           })
         end

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.15.24"
+  VERSION = "0.16.1"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0

data/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@radioactive-labs/plutonium",
-      "version": "0.1.15",
+      "version": "0.1.16",
       "license": "MIT",
       "dependencies": {
         "@hotwired/stimulus": "^3.2.2",

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Core assets for the Plutonium gem",
   "type": "module",
   "main": "src/js/core.js",

data/src/css/slim_select.css

@@ -92,7 +92,7 @@
   }
 
   .ss-main .ss-values .ss-value {
-    @apply flex select-none items-center w-fit bg-primary-500 rounded-md;
+    @apply flex select-none items-center w-fit bg-primary-500 rounded-md text-white;
     animation: ss-valueIn 0.2s ease-out forwards;
   }
 
@@ -101,11 +101,11 @@
   }
 
   .ss-main .ss-values .ss-value .ss-value-text {
-    @apply text-xs text-white dark:text-gray-900 leading-normal p-[3px_5px];
+    @apply text-xs leading-normal p-[3px_5px];
   }
 
   .ss-main .ss-values .ss-value .ss-value-delete {
-    @apply flex items-center h-[7px] w-[7px] p-[3px_5px] cursor-pointer border-l border-solid border-white dark:border-gray-900 box-content;
+    @apply flex items-center h-[7px] w-[7px] p-[3px_5px] cursor-pointer border-l border-solid border-white box-content;
   }
 
   .ss-main .ss-values .ss-value .ss-value-delete svg {
@@ -113,7 +113,7 @@
   }
 
   .ss-main .ss-values .ss-value .ss-value-delete svg path {
-    @apply fill-none stroke-white dark:stroke-gray-900;
+    @apply fill-none stroke-white;
     stroke-width: 18;
     stroke-linecap: round;
     stroke-linejoin: round;

data/src/js/controllers/easymde_controller.js

@@ -6,13 +6,13 @@ import { marked } from 'marked';
 export default class extends Controller {
   connect() {
     console.log(`easymde connected: ${this.element}`)
-    self.easyMDE = new EasyMDE(this.#buildOptions())
+    this.easyMDE = new EasyMDE(this.#buildOptions())
     this.element.setAttribute("data-action", "turbo:morph-element->easymde#reconnect")
   }
 
   disconnect() {
-    self.easyMDE.toTextArea()
-    self.easyMDE = null
+    this.easyMDE.toTextArea()
+    this.easyMDE = null
   }
 
   reconnect() {

data/src/js/controllers/flatpickr_controller.js

@@ -4,13 +4,13 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   connect() {
     console.log(`flatpickr connected: ${this.element}`)
-    self.picker = new flatpickr(this.element, this.#buildOptions())
+    this.picker = new flatpickr(this.element, this.#buildOptions())
     this.element.setAttribute("data-action", "turbo:morph-element->flatpickr#reconnect")
   }
 
   disconnect() {
-    self.picker.destroy()
-    self.picker = null
+    this.picker.destroy()
+    this.picker = null
   }
 
   reconnect() {

data/src/js/controllers/intl_tel_input_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="intl-tel-input"
+export default class extends Controller {
+  static targets = ["input"]
+
+  connect() {
+    console.log(`intl-tel-input connected: ${this.element}`)
+  }
+
+  disconnect() {
+    this.inputTargetDisconnected()
+  }
+
+  inputTargetConnected() {
+    if (!this.hasInputTarget) return;
+
+    this.iti = window.intlTelInput(this.inputTarget, this.#buildOptions())
+    this.inputTarget.setAttribute("data-action", "turbo:morph-element->intl-tel-input#reconnect")
+  }
+
+  inputTargetDisconnected() {
+    if (this.iti) this.iti.destroy()
+    this.iti = null
+  }
+
+  reconnect() {
+    this.inputTargetDisconnected()
+    this.inputTargetConnected()
+  }
+
+  #buildOptions() {
+    return {
+      strictMode: true,
+      hiddenInput: () => ({ phone: this.inputTarget.attributes.name.value }),
+      loadUtilsOnInit: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.8.1/build/js/utils.js",
+    }
+  }
+}

data/src/js/controllers/register_controllers.js

@@ -24,6 +24,7 @@ import ColorModeController from "./color_mode_controller.js"
 import EasyMDEController from "./easymde_controller.js"
 import SlimSelectController from "./slim_select_controller.js"
 import FlatpickrController from "./flatpickr_controller.js"
+import IntlTelInputController from "./intl_tel_input_controller.js"
 
 export default function (application) {
   // Register controllers here
@@ -52,4 +53,5 @@ export default function (application) {
   application.register("easymde", EasyMDEController)
   application.register("slim-select", SlimSelectController)
   application.register("flatpickr", FlatpickrController)
+  application.register("intl-tel-input", IntlTelInputController)
 }

data/src/js/controllers/slim_select_controller.js

@@ -4,15 +4,15 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   connect() {
     console.log(`slim-select connected: ${this.element}`)
-    self.slimSelect = new SlimSelect({
+    this.slimSelect = new SlimSelect({
       select: this.element
     })
     this.element.setAttribute("data-action", "turbo:morph-element->slim-select#reconnect")
   }
 
   disconnect() {
-    self.slimSelect.destroy()
-    self.slimSelect = null
+    this.slimSelect.destroy()
+    this.slimSelect = null
   }
 
   reconnect() {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.15.24
+  version: 0.16.1
 platform: ruby
 authors:
 - Stefan Froelich
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-12-01 00:00:00.000000000 Z
+date: 2024-12-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -1408,8 +1408,11 @@ files:
 - lib/plutonium/ui/dyna_frame/host.rb
 - lib/plutonium/ui/empty_card.rb
 - lib/plutonium/ui/form/base.rb
+- lib/plutonium/ui/form/components/belongs_to.rb
 - lib/plutonium/ui/form/components/easymde.rb
 - lib/plutonium/ui/form/components/flatpickr.rb
+- lib/plutonium/ui/form/components/has_many.rb
+- lib/plutonium/ui/form/components/intl_tel_input.rb
 - lib/plutonium/ui/form/concerns/renders_nested_resource_fields.rb
 - lib/plutonium/ui/form/interaction.rb
 - lib/plutonium/ui/form/options/inferred_types.rb
@@ -1468,6 +1471,7 @@ files:
 - src/js/controllers/has_many_panel_controller.js
 - src/js/controllers/header_controller.js
 - src/js/controllers/interactive_action_form_controller.js
+- src/js/controllers/intl_tel_input_controller.js
 - src/js/controllers/nav_grid_menu_controller.js
 - src/js/controllers/nav_grid_menu_item_controller.js
 - src/js/controllers/nav_user_controller.js