Merge pull request #397 from matestack/20200310_82_henning_add-range-input

Add datalist component, update input and form_input to handle type range

Author: jonasjabari

app/concepts/matestack/ui/core/datalist/datalist.haml

@@ -0,0 +1,3 @@
+%datalist{@tag_attributes}
+  - if block_given?
+    = yield

app/concepts/matestack/ui/core/datalist/datalist.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Datalist
+  class Datalist < Matestack::Ui::Core::Component::Static
+
+  end
+end

app/concepts/matestack/ui/core/form/input/input.haml

@@ -1,27 +1,38 @@
-- if options[:label]
-  %label=options[:label]
+- if label
+  %label=label
 
-- if [:text, :number, :email, :date, :password].include?(options[:type])
-  %input{@tag_attributes,
-    "v-model#{'.number' if options[:type] == :number}": input_key,
-    type: options[:type],
+- if [:text, :number, :email, :date, :password].include?(type)
+  %input{ @tag_attributes,
+    "v-model#{'.number' if type == :number}": input_key,
+    type: type,
     "@change": "inputChanged(\"#{attr_key}\")",
     ref: "input.#{attr_key}",
-    placeholder: options[:placeholder],
-    "init-value": init_value}
-  %span{class: "errors", "v-if": error_key }
-    %span{class: "error", "v-for": "error in  #{error_key}"}
-      {{ error }}
+    placeholder: placeholder,
+    "init-value": init_value }
 
-- if options[:type] == :textarea
-  %textarea{@tag_attributes,
+- if type == :textarea
+  %textarea{ @tag_attributes,
     "v-model": input_key,
     "@change": "inputChanged(\"#{attr_key}\")",
     ref: "input.#{attr_key}",
-    placeholder: options[:placeholder],
+    placeholder: placeholder,
     "init-value": init_value,
     rows: options[:rows],
-    cols: options[:cols]}
-  %span{class: "errors", "v-if": error_key }
-    %span{class: "error", "v-for": "error in  #{error_key}"}
-      {{ error }}
+    cols: options[:cols] }
+
+- if type == :range
+  %input{ @tag_attributes,
+    "v-model": input_key,
+    type: :range,
+    "@change": "inputChanged(\"#{attr_key}\")",
+    ref: "input.#{attr_key}",
+    placeholder: placeholder,
+    "init-value": init_value,
+    min: options[:min],
+    max: options[:max],
+    step: options[:step],
+    list: options[:list] }
+
+%span{ class: "errors", "v-if": error_key }
+  %span{ class: "error", "v-for": "error in #{error_key}" }
+    {{ error }}

app/concepts/matestack/ui/core/form/input/input.rb

@@ -7,21 +7,35 @@ def custom_options_validation
       raise "included form config is missing, please add ':include' to parent form component" if @included_config.nil?
     end
 
+    def key
+      options[:key]
+    end
+
+    def label
+      options[:label]
+    end
+
+    def type
+      options[:type]
+    end
+
+    def placeholder
+      options[:placeholder]
+    end
+
     def input_key
-      'data["' + options[:key].to_s + '"]'
+      "data['#{key.to_s}']"
     end
 
     def error_key
-      'errors["' + options[:key].to_s + '"]'
+      "errors['#{key.to_s}']"
     end
 
     def input_wrapper
       case options[:for]
       when nil
         return nil
-      when Symbol
-        return options[:for]
-      when String
+      when Symbol, String
         return options[:for]
       end
       if options[:for].respond_to?(:model_name)
@@ -31,44 +45,37 @@ def input_wrapper
 
     def attr_key
       if input_wrapper.nil?
-        return options[:key].to_s
+        return key.to_s
       else
-        return "#{input_wrapper}.#{options[:key].to_s}"
+        return "#{input_wrapper}.#{key.to_s}"
       end
     end
 
     def init_value
-      unless options[:init].nil?
-        return options[:init]
-      end
+      return options[:init] unless options[:init].nil?
 
       unless options[:for].nil?
-        value = options[:for].send(options[:key])
-        if [true, false].include? value
-          value ? 1 : 0
-        else
-          return value
-        end
+        value = parse_value(options[:for].send key)
       else
         unless @included_config.nil? && @included_config[:for].nil?
-          if @included_config[:for].respond_to?(options[:key])
-            value = @included_config[:for].send(options[:key])
-            if [true, false].include? value
-              value ? 1 : 0
-            else
-              return value
-            end
+          if @included_config[:for].respond_to?(key)
+            value = parse_value(@included_config[:for].send key)
           else
-            if @included_config[:for].is_a?(Symbol) || @included_config[:for].is_a?(String)
-              return nil
-            end
-            if @included_config[:for].is_a?(Hash)
-              return @included_config[:for][options[:key]]
-            end
+            @included_config[:for][key] if @included_config[:for].is_a?(Hash)
           end
         end
       end
     end
 
+    private
+
+    def parse_value(value)
+      if [true, false].include? value
+        value ? 1 : 0
+      else
+        return value
+      end
+    end
+
   end
 end

app/concepts/matestack/ui/core/input/input.haml

@@ -1,3 +1,2 @@
-%input{@tag_attributes}
-  - if block_given?
-    = yield
+%input{ @tag_attributes,
+  type: type }

app/concepts/matestack/ui/core/input/input.rb

@@ -1,5 +1,9 @@
 module Matestack::Ui::Core::Input
   class Input < Matestack::Ui::Core::Component::Static
 
+    def type
+      options[:type]
+    end
+
   end
 end

docs/components/datalist.md

@@ -0,0 +1,31 @@
+# matestack core component: Datalist
+
+Show [specs](/spec/usage/components/datalist_spec.rb)
+
+The HTML `<datalist>` tag implemented in Ruby.
+
+## Parameters
+
+This component can take 2 optional configuration params and yield content.
+
+#### # id (optional)
+Expects a string with all ids the datalist should have.
+
+#### # class (optional)
+Expects a string with all classes the datalist should have.
+
+
+## Example 1
+Adding an optional id
+
+```ruby
+datalist id: 'foo', class: 'bar' do
+  plain 'Example Text'
+end
+```
+
+returns
+
+```html
+<datalist id="foo" class="bar">Example Text</datalist>
+```

docs/components/form.md

@@ -578,7 +578,7 @@ end
 
 ### Example 4: Multiple input fields of different types
 
-Of course, our input core component accepts not only 'text', but very different input types: In this example, we will introduce 'password', 'number', 'email', 'textarea' types!
+Of course, our input core component accepts not only 'text', but very different input types: In this example, we will introduce 'password', 'number', 'email', 'range', 'textarea' types!
 
 On our example page, we define the input fields, together with a `type: X` configuration:
 
@@ -592,6 +592,7 @@ class ExamplePage < Matestack::Ui::Page
         form_input id: 'email-input',     key: :email_input, type: :email
         form_input id: 'password-input',  key: :password_input, type: :password
         form_input id: 'number-input',    key: :number_input, type: :number
+        form_input id: 'range-input',     key: :range_input, type: :range
         form_input id: 'textarea-input',  key: :textarea_input, type: :textarea
         form_submit do
           button text: 'Submit me!'
@@ -1326,3 +1327,25 @@ end
 ```
 
 Again, we can visit our example page on `localhost:3000/example` and are welcome by the preselected status of our `TestModel` instance. Changing the value of the status by toggling the radio button and filling in a description plus submitting it works just as before!
+
+#### Example 10.4: The Range Input
+
+Whilst working similiar to the 'text' input, the range input accepts a few more parameters. It accepts also 'min', 'max', 'step', 'list' as optional parameters.
+
+##### Example 10.4.1: Range input with max, min, step set
+
+```ruby
+form_input id: 'range-input', type: :range, min: 0, max: 100, step: 1
+```
+
+#### Example 10.4.2: Range input with corresponding datalist
+
+To use a datalist for the range input specify the 'list' parameter with the id of the provided datalist
+
+```ruby
+form_input id: 'range-input', type: :range, list: 'datalist-id'
+datalist id: 'datalist-id' do
+  option value: 10
+  option value: 20
+end
+```

docs/components/input.md

@@ -0,0 +1,30 @@
+# matestack core component: Input
+
+Show [specs](/spec/usage/components/input_spec.rb)
+
+The HTML input tag implemented in ruby.
+
+## Parameters
+
+This component can take 3 optional configuration params and optional content.
+
+#### # id (optional)
+Expects a string with all ids the main should have.
+
+#### # class (optional)
+Expects a string with all classes the main should have.
+
+#### # type (optional)
+Expects a symbol with that specifies the input type.
+
+## Example
+
+```ruby
+input type: :text, id: "foo", class: "bar"
+```
+
+returns
+
+```html
+<input type="text" id="foo" class="bar" />
+```

spec/usage/components/datalist_spec.rb

@@ -0,0 +1,31 @@
+require_relative "../../support/utils"
+include Utils
+
+describe 'Datalist Component', type: :feature, js: true do
+
+  it 'Example 1 - yield' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          datalist id: 'foo', class: 'bar' do
+            plain 'Example Text'
+          end
+        }
+      end
+
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <datalist id="foo" class="bar">Example Text</datalist>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
+end