plutonium 0.16.0 → 0.16.1

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

@@ -30,8 +30,13 @@ module Plutonium
           end
 
           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/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/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.16.0"
+  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/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,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.16.0
+  version: 0.16.1
 platform: ruby
 authors:
 - Stefan Froelich
@@ -1412,6 +1412,7 @@ files:
 - 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
@@ -1470,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