keystone_ui 0.27.0 → 0.28.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 77e17961bce047a1477df49c98660ff0484456e5add3eb78a59b67735296d91b
-  data.tar.gz: 75fa1c3b979a7490ea47423b5b5d64a075648ff203a9554af170a1dfc06865bf
+  metadata.gz: 88ffa01b58c46bdab1ddcf7657b1b60e3caf4320519cb64e5bcf6dfc59e047c9
+  data.tar.gz: 151698597ec642c7a410e5835d4b66f3c5b17a1fc778c995f9b583d912e565df
 SHA512:
-  metadata.gz: 5f1b133c91668e4fa4886c15f664588d2cec6fd972dae84caf199fd891aeb22c6e48c534f8274b5a64669fb02cd6adb09890f51b75656bd9943a2252b30555a8
-  data.tar.gz: 34db47e65e4304e7224557d1b29dc1abe8803edd920e851f4a9f8f456d680b71b78710fe2966fd2253b756373a6ca01197dbd1881ec53fa28b730c72e7516a0b
+  metadata.gz: 97232de923802fef99483afbdfc76ecc8cac4a7220ed40e97aa4d19426fb885b0d5c012b587ec7e94cd980042fb27d70b99d832e332addd608e4d41645901618
+  data.tar.gz: 7b6cf8260919c664248a7246eda7d917e580d6d709737eb83b2d27d7e9e67e37c45fb4302061b8d824cf5e96bd20af403eb07e9f3c6c78f6e4571920f3d0ff6a

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

@@ -22,6 +22,13 @@
     </select>
   <% else %>
     <%= tag.input(**input_options) %>
+    <% if suggestions? %>
+      <datalist id="<%= suggestions_id %>">
+        <% suggestions.each do |suggestion| %>
+          <option value="<%= suggestion %>"></option>
+        <% end %>
+      </datalist>
+    <% end %>
   <% end %>
 
   <% if hint? %>

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

@@ -11,7 +11,7 @@ module Keystone
       CHECKBOX_CLASSES = "ks-checkbox"
       CHECKBOX_WRAPPER_CLASSES = "ks-form-field-checkbox flex items-center"
 
-      def initialize(attribute:, label: nil, type: :text, required: false, hint: nil, placeholder: nil, min: nil, max: nil, step: nil, value: nil, options: [], errors: [], include_blank: nil, disabled: false)
+      def initialize(attribute:, label: nil, type: :text, required: false, hint: nil, placeholder: nil, min: nil, max: nil, step: nil, value: nil, options: [], errors: [], include_blank: nil, disabled: false, suggestions: [])
         @attribute = attribute
         @label = label
         @type = type
@@ -26,6 +26,7 @@ module Keystone
         @errors = Array(errors)
         @include_blank = include_blank.to_s
         @disabled = disabled
+        @suggestions = Array(suggestions)
       end
 
       def label_text
@@ -83,8 +84,21 @@ module Keystone
         options[:max] = @max unless @max.nil?
         options[:step] = @step unless @step.nil?
         options[:disabled] = true if @disabled
+        options[:list] = suggestions_id if suggestions?
         options
       end
+
+      def suggestions?
+        @suggestions.any?
+      end
+
+      def suggestions
+        @suggestions
+      end
+
+      def suggestions_id
+        "#{@attribute.to_s.parameterize}-suggestions"
+      end
     end
   end
 end

data/lib/keystone_ui/version.rb

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

data/the_local/agents/keystone_ui-develop.md

@@ -146,7 +146,7 @@ outer element. See Conventions before using it.
   The `<form>` wrapper. `method:` may be `:patch`/`:put`/`:delete` and is
   translated for Rails. Set `multipart: true` when the form contains a file
   upload.
-- `ui_form_field(attribute:, label: nil, type: :text, required: false, hint: nil, placeholder: nil, min: nil, max: nil, step: nil, value: nil, options: [], errors: [], include_blank: nil, disabled: false)`
+- `ui_form_field(attribute:, label: nil, type: :text, required: false, hint: nil, placeholder: nil, min: nil, max: nil, step: nil, value: nil, options: [], errors: [], include_blank: nil, disabled: false, suggestions: [])`
   — a labeled field with hint and error text. This is the default way to render
   an input. `type:` `:text` `:number` `:email` `:password` `:date` `:textarea`
   `:checkbox` `:select`. `attribute:` is used verbatim as the input's `name`, so
@@ -159,7 +159,12 @@ outer element. See Conventions before using it.
   it. Never add your own empty choice to `options:` as well. A
   `:checkbox` renders its label beside the box, submits `"0"` when unchecked and
   `"1"` when checked, and pre-checks when `value:` is `"1"`. `errors:` is an
-  array of message strings.
+  array of message strings. `suggestions:` is an array of strings the browser
+  offers while the field's text is typed, and the user can still type a value
+  that is not in it. It applies to `:text`, `:number`, `:email`, `:password`
+  and `:date` fields, and a `:textarea`, `:checkbox` or `:select` ignores it.
+  The suggestion list's `id` is built from `attribute:`, so two fields with
+  suggestions on one screen need different `attribute:` values.
 - `ui_input(name:, type: :text, value: nil, placeholder: nil, disabled: false, min: nil, max: nil, step: nil)`
   — a bare styled input with no label. `type:` `:text` `:number` `:email`
   `:password` `:date`.
@@ -392,6 +397,10 @@ outer element. See Conventions before using it.
    To show the arithmetic behind a figure, put `ui_calculation` under it rather
    than a hand-built list. Which lines and groups to show is the app's own
    calculation, so ask the developer which steps a reader needs to see.
+   A field whose value must be one of a fixed list is a `:select` with
+   `options:`, and a field that accepts any text and offers common values is a
+   text field with `suggestions:`. Which one a field is, and which values it
+   suggests, is the app's own rule, so ask the developer rather than pick.
    On a radio card or a checkbox row, text every reader needs to choose goes in `hint:` and
    text only some will want goes in `info:`. Which is which is the app's own
    wording, so ask the developer rather than pick.

data/the_local/agents/keystone_ui-info.md

@@ -88,6 +88,12 @@ holds the catalog.
   and the text stays hidden until the button is hovered or tapped. A piece
   given no such text shows no button. On a radio card and a checkbox row the
   button sits on the line with the label.
+- **Suggestions.** A form field can carry a list of suggested values. The
+  browser offers them while the field's text is typed, and the user can still
+  enter a value that is not on the list. This applies to a field with a typed
+  input, such as text, number, email, password or date. A textarea, select or
+  checkbox field ignores the list, and a field given no list offers nothing.
+  It needs no JavaScript.
 - **Options are symbols, and each component accepts its own set.** Appearance is
   chosen by name — `variant:`, `size:`, `type:`, `padding:`, `spacing:`,
   `max_width:`, `radius:` — on a size scale (`:sm` … `:xl`) or a short list of

data/the_local/agents/keystone_ui-install.md

@@ -40,7 +40,7 @@ built on ViewComponent; hook it in before building any screen with those helpers
 ## How to use it
 
 1. Confirm the prerequisites: Ruby >= 3.2 and **tailwindcss-rails v4+** in the
-   host app. The gem brings ViewComponent and keystone_ui-styles 0.6.0 or later with it.
+   host app. The gem brings ViewComponent and keystone_ui-styles 0.8.0 or later with it.
    Tailwind does not have to be initialized first, because the generator creates
    the stylesheet if it is missing.
 

metadata

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