keystone_ui 0.42.0 → 0.44.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 28436277e0b304a48d5093a2220bb1df0e04f94315f085781e93cb34207ea654
-  data.tar.gz: 82bb8f8de9b4132f47da04e7ab3423ba3c73e216b2ae79659f8709b52888bfde
+  metadata.gz: 399e1a496d6abbf8fc37149cbf05ea62223222c1cf6b5678dc400b286a17f06a
+  data.tar.gz: 5d7566e89343b57e8a35a6693e4fe6107184203299a880d58eab541b6ff16d81
 SHA512:
-  metadata.gz: 3e63c3495c2b1709109cb25584e9a9e5c5b7fcaef4cfb1cc1e948641b5ae06a22acc3703f52d038d69a7371b57d39a554d75a8ac671e90662f525734979ab8fd
-  data.tar.gz: 8941b3263e4944bbfc4e6d6dbc8eb82f74908ee51b922f9c6f61b6cb9c4af869171c22b8e5cbdc4bef6e7c238e740d2f531b143cd5abaddba2a5d73b36d34b1a
+  metadata.gz: e0e0ab5ac2704a8612ec78bd80987d61ddfaee104cf0eedf976075e8ea28b4d64ac26990e061055165d334f06c8951b0eb8083b6005cb666dd8d47fec7ec5a7f
+  data.tar.gz: 8de679cd46c03c8c8856196fc1d73d87def5ab3910c7b142d744ab7fca02c8b011f0cea93a2a2b42979d677b84c7448c32880d2ab6783851506188622bba7c30

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/app/components/keystone/ui/value_list_component.html.erb

@@ -0,0 +1,11 @@
+<dl class="<%= classes %>">
+  <% rows.each do |row| %>
+    <div class="<%= row_classes(row) %>">
+      <dt class="ks-value-list-label">
+        <%= row[:label] %>
+        <% if row[:note] %><span class="ks-value-list-note"><%= row[:note] %></span><% end %>
+      </dt>
+      <dd class="ks-value-list-value"><%= shown_value(row) %></dd>
+    </div>
+  <% end %>
+</dl>

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

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class ValueListComponent < ViewComponent::Base
+      ALIGN_CLASSES = { start: nil, end: "ks-value-list-end" }.freeze
+
+      attr_reader :rows
+
+      def initialize(rows:, align: :start)
+        @rows = rows
+        @align = align
+      end
+
+      def classes
+        [ "ks-value-list", ALIGN_CLASSES.fetch(@align) ].compact.join(" ")
+      end
+
+      def shown_value(row)
+        row[:value].to_s.empty? ? row[:fallback] : row[:value]
+      end
+
+      def row_classes(row)
+        [ "ks-value-list-row", ("ks-value-list-total" if row[:total]) ].compact.join(" ")
+      end
+    end
+  end
+end

data/app/helpers/keystone_ui_helper.rb

@@ -249,6 +249,10 @@ module KeystoneUiHelper
     render Keystone::Ui::ParagraphComponent.new(**args)
   end
 
+  def ui_value_list(**args)
+    render Keystone::Ui::ValueListComponent.new(**args)
+  end
+
   def ui_info(**args, &block)
     render(Keystone::Ui::InfoComponent.new(**args), &block)
   end

data/lib/keystone_ui/safelist.rb

@@ -32,6 +32,7 @@ module Keystone
       Keystone::Ui::CardLinkComponent,
       Keystone::Ui::InputComponent,
       Keystone::Ui::TextareaComponent,
+      Keystone::Ui::ValueListComponent,
       Keystone::Ui::FormFieldComponent,
       Keystone::Ui::PageHeaderComponent,
       Keystone::Ui::ParagraphComponent,

data/lib/keystone_ui/version.rb

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

data/the_local/agents/keystone_ui-develop.md

@@ -66,6 +66,7 @@ not available in the app yet, that is `keystone_ui-install`'s job.
 - `ui_heading` — a heading at one of three sizes, with an optional short note on its right.
 - `ui_caption` — small uppercase muted text placed above a title or a figure.
 - `ui_paragraph` — a paragraph of running text.
+- `ui_value_list` — rows of a label and its value, such as a ledger or a byline.
 - `ui_alert` — a banner message, optionally dismissible.
 - `ui_progress` — a labelled progress bar.
 - `ui_stat_card` — a single metric tile with optional change, link and info button.
@@ -404,6 +405,9 @@ two exceptions: `ui_page`'s `padding:` treats any value other than `:none` as
      and `note:` puts a short muted note at the right end of the heading's row.
    - `ui_caption(text:)` shows small uppercase muted text above a title or a figure.
    - `ui_paragraph(text:)` shows running text.
+   - `ui_value_list(rows:, align: :start)` — each row is `{ label:, value: }`
+     with optional `note:`, `total: true` and `fallback:`, shown when the value
+     is `nil` or empty. `align: :end` pushes values to the right, as in a ledger.
 
 10. Explain figures.
 

data/the_local/interface.yml

@@ -67,6 +67,7 @@ develop:
   - ui_heading
   - ui_caption
   - ui_paragraph
+  - ui_value_list
   - ui_breakdown
   - ui_theme_toggle
   - Keystone::Ui::Column

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui
 version: !ruby/object:Gem::Version
-  version: 0.42.0
+  version: 0.44.0
 platform: ruby
 authors:
 - Tyler Schneider
@@ -15,14 +15,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.19.0
+        version: 0.20.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.19.0
+        version: 0.20.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -202,6 +202,8 @@ files:
 - app/components/keystone/ui/textarea_component.rb
 - app/components/keystone/ui/theme_toggle_component.html.erb
 - app/components/keystone/ui/theme_toggle_component.rb
+- app/components/keystone/ui/value_list_component.html.erb
+- app/components/keystone/ui/value_list_component.rb
 - app/helpers/keystone_ui_helper.rb
 - config/importmap.rb
 - lib/generators/keystone/install_generator.rb