keystone_ui 0.42.0 → 0.43.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 28436277e0b304a48d5093a2220bb1df0e04f94315f085781e93cb34207ea654
-  data.tar.gz: 82bb8f8de9b4132f47da04e7ab3423ba3c73e216b2ae79659f8709b52888bfde
+  metadata.gz: ebff0095e42a243e35a441d1fd749813728e8abe011529ec23cb599602312c45
+  data.tar.gz: 0fc80932c6f8b9ea4c8511fa4ba83e9989eb97e4a74cbe9339999efdd8f62249
 SHA512:
-  metadata.gz: 3e63c3495c2b1709109cb25584e9a9e5c5b7fcaef4cfb1cc1e948641b5ae06a22acc3703f52d038d69a7371b57d39a554d75a8ac671e90662f525734979ab8fd
-  data.tar.gz: 8941b3263e4944bbfc4e6d6dbc8eb82f74908ee51b922f9c6f61b6cb9c4af869171c22b8e5cbdc4bef6e7c238e740d2f531b143cd5abaddba2a5d73b36d34b1a
+  metadata.gz: f9b81f7b07775c5ba362010016b5dacd0bb9a298620723cb20fee5fbd2ee96da12211256da33f4bb72029e8bfcc3392e6b5d42fad8efceb33a48d11642cbf99a
+  data.tar.gz: b0debeea715db19ec6aaac0731abd03bd7f4670a9f2a979f0a541a72588cccb2324b2569f3962c70812af5b0c514af17e57adcb46de28f509a27a173b84cd2fc

data/app/assets/javascripts/keystone_ui/color_picker_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["swatch", "hexLabel", "input", "panel", "svArea", "svGradient", "svCursor", "hueSlider"]
+  static targets = ["swatch", "text", "input", "panel", "svArea", "svGradient", "svCursor", "hueSlider"]
   static values = { value: String }
 
   connect() {
@@ -10,7 +10,7 @@ export default class extends Controller {
     this.val = 1
     this.dragging = false
 
-    if (this.valueValue) {
+    if (this.isSixDigitHex(this.valueValue)) {
       this.setFromHex(this.valueValue)
     }
 
@@ -55,6 +55,16 @@ export default class extends Controller {
     this.updateColor()
   }
 
+  textChanged() {
+    const colour = this.textTarget.value
+    if (!CSS.supports("color", colour)) return
+
+    if (this.isSixDigitHex(colour)) this.setFromHex(colour)
+    this.swatchTarget.style.backgroundColor = colour
+    this.inputTarget.value = colour
+    this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+  }
+
   svDown(event) {
     event.preventDefault()
     this.dragging = true
@@ -92,7 +102,7 @@ export default class extends Controller {
   updateColor() {
     const hex = this.hsvToHex(this.hue, this.sat, this.val)
     this.swatchTarget.style.backgroundColor = hex
-    this.hexLabelTarget.textContent = hex
+    this.textTarget.value = hex
     this.inputTarget.value = hex
 
     this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
@@ -118,6 +128,10 @@ export default class extends Controller {
     }
   }
 
+  isSixDigitHex(colour) {
+    return /^#[0-9a-f]{6}$/i.test(colour)
+  }
+
   hsvToHex(h, s, v) {
     const c = v * s
     const x = c * (1 - Math.abs(((h / 60) % 2) - 1))

data/app/components/keystone/ui/color_picker_component.html.erb

@@ -10,7 +10,7 @@
       data-color-picker-target="swatch"
       data-action="color-picker#toggle">
     </button>
-    <span class="text-sm text-gray-500 dark:text-gray-400" data-color-picker-target="hexLabel"><%= value %></span>
+    <input type="text" class="<%= TEXT_FIELD_CLASSES %>" value="<%= value %>" data-color-picker-target="text" data-action="input->color-picker#textChanged">
   </div>
 
   <input type="hidden" name="<%= name %>" value="<%= value %>" data-color-picker-target="input">

data/app/components/keystone/ui/color_picker_component.rb

@@ -9,6 +9,8 @@ module Keystone
 
       PANEL_CLASSES = "ks-color-picker-panel absolute z-50 hidden"
 
+      TEXT_FIELD_CLASSES = "ks-input w-28 text-sm"
+
       attr_reader :name, :value, :label
 
       def initialize(name:, value: "#000000", label: nil)

data/lib/keystone_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module KeystoneUi
-  VERSION = "0.42.0"
+  VERSION = "0.43.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui
 version: !ruby/object:Gem::Version
-  version: 0.42.0
+  version: 0.43.0
 platform: ruby
 authors:
 - Tyler Schneider