matestack-ui-bootstrap 2.0.1 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a52f9ec08954578164ea02cbde68d738d01fca0dfe32e845680064adc9848cfa
-  data.tar.gz: 6d5f1563e5fbee81e0ce69ce5fb0cf95996d969fa45a3b66e593d1dbb03c69a9
+  metadata.gz: 765f0c5d8c9c1ff744e18f2f9cf03e988b45527941b13d420b777e304bd04149
+  data.tar.gz: 2b24f828ef784ce5c7f137a7354f3f6eeb6ee46679e38e8e6e1670089bd9d092
 SHA512:
-  metadata.gz: 49765f7bf19eded33e7d4e99ee41b576922f93168ae24420587c1084452c4906411a1ff38c8faa83318b878b931158015c735f8c3389100a582507061996be23
-  data.tar.gz: f49088e4c4ed0283a47b99b25389eeea5607869f0f171be1036ffdd45e3b9defb53f3de2efe80556f14f311455e1d4d28c9f2bd43cd4075de9606469015462da
+  metadata.gz: 4576738c13b40735fe220ad577416834b0adc0ec129426cb438843dc7513957d193de42948050e64d1309da6545cb1dbc38d24969d339c7e7b1f10e1ad81e615
+  data.tar.gz: 496c5eefd617f97462c4987a172a4510743f5c896d828f5bf5f7186e2cf8fd46977d049375ffd93be9c588ed1a34e51eb503dee8303632274f05aa66e5ae737c

data/README.md

@@ -1,84 +1,60 @@
-# Matestack Ui Bootstrap
+[![Specs](https://github.com/matestack/matestack-ui-bootstrap/workflows/specs/badge.svg)](https://github.com/matestack/matestack-ui-bootstrap/actions)
+[![Discord](https://img.shields.io/discord/771413294136426496.svg)](https://discord.com/invite/c6tQxFG)
+[![Gem Version](https://badge.fury.io/rb/matestack-ui-bootstrap.svg)](https://badge.fury.io/rb/matestack-ui-bootstrap)
+[![Docs](https://img.shields.io/badge/docs-matestack-blue.svg)](https://docs.matestack.io/matestack-ui-bootstrap)
+[![Twitter Follow](https://img.shields.io/twitter/follow/matestack.svg?style=social)](https://twitter.com/matestack)
 
-**Docs and specs in progress, please wait for official release announcement before using this gem**
+![matestack logo](./logo.png)
 
-## Development
+# matestack-ui-bootstrap | beautiful, reactive UIs in pure Ruby
 
-### Dummy App
+As an extension for [`matestack-ui-core`](https://github.com/matestack/matestack-ui-core), `matestack-ui-bootstrap` ships all you need to build beautiful,
+reactive UIs in pure Ruby and smart CRUD components based on Bootstrap v5.
 
-**initial setup**
+----
 
-```shell
-docker-compose build dummy
-docker-compose run --rm dummy bash
-```
+`matestack-ui-core` enables you to craft maintainable web UIs in pure Ruby, skipping ERB and HTML. UI code becomes a native and fun part of your Rails app. Thanks to reactive core components, reactivity can be optionally added on top without writing JavaScript, just using a simple Ruby DSL.
 
-inside container:
+You end up writing 50% less code while increasing productivity, maintainability and developer happiness. Work with pure Ruby. If necessary, extend with pure JavaScript. No Opal involved.
 
-```shell
-bundle install
-yarn install
-cd spec/dummy
-bundle install
-npm install (npm and not yarn!)
-rails app:db:setup
-```
+----
 
-**dummy app start**
+`matestack-ui-core` does not have an opinion on styling. In contrast, `matestack-ui-bootstrap` ships all Bootstrap v5 components as Matestack UI components usable in pure Ruby. Additionally layout and CRUD components help you to build a beautiful web app meeting typical requirements of a data driven web app.
 
-on your host:
-```shell
-docker-compose up dummy
-```
+Don't think about styling anymore and just create admin or application UIs faster than ever before!
 
-and
+[<img src="https://img.youtube.com/vi/bwsVgCb97v0/0.jpg" width="350">](https://www.youtube.com/watch?v=bwsVgCb97v0)
 
-```shell
-docker-compose run --rm dummy sh -c "cd spec/dummy && ./bin/webpack --watch"
-```
+## Compatibility
 
-simultaneously to be able to visit the demo app on [localhost:3000](localhost:3000).
+### Ruby/Rails
 
-## Testing
+`matestack-ui-bootstrap` is tested against:
 
-**initial setup**
+- Rails 6.1.1 + Ruby 3.0.0
+- Rails 6.1.1 + Ruby 2.7.2
+- Rails 6.0.3.4 + Ruby 2.6.6
+- Rails 5.2.4.4 + Ruby 2.6.6
 
-```shell
-docker-compose build dummy
-docker-compose run --rm dummy bash
-```
+Rails versions below 5.2 are not supported.
 
-inside container:
+### Vue.js
 
-```shell
-bundle install
-yarn install
-cd spec/dummy
-bundle install
-npm install (npm and not yarn!)
-rails app:db:setup
-```
+`matestack-ui-bootstrap` requires Vue.js and Vuex for its reactivity features. Following version ranges are supported:
 
-**test run**
+- Vue.js ^2.6.0
+- Vuex ^3.6.0
 
-```shell
-docker-compose run --rm builder bash
+Vue 3 / Vuex 4 update is planned for Q2 2021.
 
-```
+## Documentation/Installation
 
-inside container:
+Documentation can be found [here](https://docs.matestack.io/matestack-ui-bootstrap)
 
-```shell
-bundle exec rspec spec/test
-```
+## Changelog
 
-## Release
+Changelog can be found [here](./CHANGELOG.md)
 
-```shell
-docker-compose run --rm builder
-gem bump ...
-gem release
-npm bump ...
-npm release
-git tag ...
-```
+## License
+
+`matestack-ui-bootstrap` is an Open Source project licensed under the terms of the [MIT license](./LICENSE)

data/lib/matestack/ui/bootstrap.rb

@@ -98,6 +98,7 @@ module Matestack
 end
 require "#{base_path}/form/checkbox"
 require "#{base_path}/form/input"
+require "#{base_path}/form/textarea"
 require "#{base_path}/form/radio"
 require "#{base_path}/form/select"
 require "#{base_path}/form/submit"

data/lib/matestack/ui/bootstrap/content/smart_collection/content.rb

@@ -69,7 +69,11 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Content
 
   def cell(data, key, value)
     td class: cell_class(value) do
-      plain cell_text(data, key, value)
+      if value.is_a?(Hash) && value[:slot]
+        value[:slot].call(data)
+      else
+        plain cell_text(data, key, value)
+      end
     end
   end
 
@@ -81,8 +85,17 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Content
   end
 
   def cell_text(data, key, value)
-    text = data.instance_eval(key.to_s)
-    text = value[:format].call(text) if value.is_a?(Hash) && value[:format]
+    if value.is_a?(Hash)
+      if value[:attribute].present?
+        text = data.instance_eval(value[:attribute].to_s)
+      else
+        text = data.instance_eval(key.to_s)
+      end
+      text = value[:format].call(text) if value[:format].present?
+    else
+      text = data.instance_eval(key.to_s)
+    end
+
     text
   end
 

data/lib/matestack/ui/bootstrap/form/checkbox.rb

@@ -10,7 +10,7 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
 
   def response
     div class: "matestack-ui-bootstrap-form-checkbox" do
-      label input_label, class: "form-label", for: attribute_key if input_label && multiple?
+      label input_label, class: "form-label", ":for": id if input_label && multiple?
       render_options
       render_errors
       render_form_text unless context.form_text.nil? # otherwise renders empty div
@@ -19,6 +19,15 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
 
   private
 
+  def bootstrap_attributes
+    classes = 'form-check-input'
+    classes = [options[:class], classes].join(' ')
+    {
+      class: classes,
+      disabled: context.disabled
+    }
+  end
+
   def multiple?
    checkbox_options.present?
   end
@@ -28,7 +37,7 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
     if multiple?
      checkbox_options.to_a.each do |item|
         checkbox_wrapper do
-          input options.merge(checkbox_attributes(item)).merge(class: 'form-check-input')
+          input options.merge(checkbox_attributes(item)).merge(bootstrap_attributes)
           bootstrap_label text: item_label(item), for_input: item_id(item)
         end
       end
@@ -36,7 +45,7 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
     else
       checkbox_wrapper do
         input true_false_checkbox_attributes.merge(type: :hidden, id: nil, value: 0)
-        input true_false_checkbox_attributes.merge(type: :checkbox, id: item_id(1), class: 'form-check-input')
+        input true_false_checkbox_attributes.merge(type: :checkbox, ":id": item_id(1)).merge(bootstrap_attributes)
 
         bootstrap_label text: input_label, for_input: item_id(1)
       end
@@ -53,7 +62,7 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
   end
 
   def bootstrap_label(text:, for_input:)
-    label text, for: for_input, class: 'form-check-label'
+    label text, ":for": for_input, class: 'form-check-label'
   end
 
   def render_errors
@@ -73,7 +82,7 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
   end
 
   def render_form_text
-    div id: "form_text_for_#{attribute_key}", class: "form-text" do
+    div class: "form-text form-text-for-#{attribute_key}" do
       plain context.form_text
     end
   end

data/lib/matestack/ui/bootstrap/form/input.rb

@@ -16,12 +16,12 @@ class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::VueJs::Components::
 
   def response
     div class: "matestack-ui-bootstrap-input" do
-      label input_label, for: attribute_key,  class: "form-label" if input_label
+      label input_label, ":for": id,  class: "form-label" if input_label
       case context.type
       when :range
         input options.merge(input_attributes).merge(bootstrap_range_attributes)
         if context.show_value
-          div id: attribute_key, class: "form-text" do
+          div class: "form-text form-text-for-#{attribute_key}" do
             plain "{{ data['#{attribute_key}'] }}"
           end
         end
@@ -37,9 +37,11 @@ class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::VueJs::Components::
 
   def bootstrap_input_attributes
     {
-      id: (options[:id] || attribute_key),
       class: (options[:class] || "") << (" form-control"),
-      disabled: context.disabled
+      disabled: context.disabled,
+      min: context.min,
+      max: context.max,
+      step: context.step
     }
   end
 
@@ -108,7 +110,7 @@ class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::VueJs::Components::
   end
 
   def render_form_text
-    div id: "form_text_for_#{attribute_key}", class: "form-text" do
+    div class: "form-text form-text-for-#{attribute_key}" do
       plain context.form_text
     end
   end

data/lib/matestack/ui/bootstrap/form/radio.rb

@@ -10,12 +10,12 @@ class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::VueJs::Components::
 
   def response
     div class: "matestack-ui-bootstrap-radio" do
-      label input_label, class: "form-label" if input_label
+      label input_label, class: "form-label", ":for": id if input_label
 
       radio_options.to_a.each_with_index do |item, index|
         div class: "form-check #{'form-check-inline' if context.variant == :inline}" do
           input options.merge(radio_attributes(item)).merge(bootstrap_radio_attributes)
-          label item_label(item), class: "form-check-label", for: item_id(item_value(item))
+          label item_label(item), class: "form-check-label", ":for": item_id(item_value(item))
           if index == radio_options.to_a.size - 1
             render_errors
           end
@@ -26,16 +26,18 @@ class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::VueJs::Components::
 
   end
 
+  private
 
   def bootstrap_radio_attributes
+    classes = 'form-check-input'
     {
-      class: (options[:class] || "") << (" form-check-input"),
+      class: (options[:class] || "") << classes,
       disabled: context.disabled
     }
   end
 
   def render_form_text
-    div id: "form_text_for_#{attribute_key}", class: "form-text" do
+    div class: "form-text form-text-for-#{attribute_key}" do
       plain context.form_text
     end
   end

data/lib/matestack/ui/bootstrap/form/select.rb

@@ -10,7 +10,7 @@ class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::VueJs::Components:
 
   def response
     div class: "matestack-ui-bootstrap-form-select" do
-      label input_label, for: attribute_key,  class: "form-label" if input_label
+      label input_label, ":for": id,  class: "form-label" if input_label
       select select_attributes.merge(bootstrap_select_attributes) do
         render_options
       end
@@ -55,7 +55,7 @@ class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::VueJs::Components:
   end
 
   def render_form_text
-    div id: "form_text_for_#{attribute_key}", class: "form-text" do
+    div class: "form-text form-text-for-#{attribute_key}" do
       plain context.form_text
     end
   end

data/lib/matestack/ui/bootstrap/form/switch.rb

@@ -10,7 +10,7 @@ class Matestack::Ui::Bootstrap::Form::Switch < Matestack::Ui::Bootstrap::Form::C
 
   def response
     div class: "matestack-ui-bootstrap-switch" do
-      label input_label, class: "form-label", for: attribute_key if input_label && multiple?
+      label input_label, class: "form-label", ":for": id if input_label && multiple?
       render_options
       render_errors
       plain context.form_text

data/lib/matestack/ui/bootstrap/form/textarea.rb

@@ -0,0 +1,49 @@
+class Matestack::Ui::Bootstrap::Form::Textarea < Matestack::Ui::VueJs::Components::Form::Textarea
+
+  include Matestack::Ui::Bootstrap::Registry
+
+  vue_name "matestack-ui-core-form-textarea"
+
+  optional :form_text
+  optional :disabled
+  optional :placeholder
+  optional :rows
+  optional :cols
+
+  def response
+    div class: "matestack-ui-bootstrap-textarea" do
+      label input_label, ":for": id,  class: "form-label" if input_label
+      textarea options.merge(textarea_attributes).merge(bootstrap_textarea_attributes)
+      render_errors
+      render_form_text if context.form_text
+    end
+  end
+
+  def bootstrap_textarea_attributes
+    {
+      class: (options[:class] || "") << (" form-control"),
+      rows: context.rows,
+      cols: context.cols,
+      disabled: context.disabled
+    }
+  end
+
+  def render_errors
+    if display_errors?
+      div class: 'invalid-feedback', 'v-for': "error in #{error_key}" do
+        plain '{{ error }}'
+      end
+    end
+  end
+
+  def input_error_class
+    'is-invalid'
+  end
+
+  def render_form_text
+    div class: "form-text form-text-for-#{attribute_key}" do
+      plain context.form_text
+    end
+  end
+
+end

data/lib/matestack/ui/bootstrap/registry.rb

@@ -114,6 +114,10 @@ module Matestack::Ui::Bootstrap::Registry
     Matestack::Ui::Bootstrap::Form::Input.(text, options, &block)
   end
 
+  def bs_form_textarea(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Form::Textarea.(text, options, &block)
+  end
+
   def bs_form_select(text=nil, options=nil, &block)
     Matestack::Ui::Bootstrap::Form::Select.(text, options, &block)
   end

data/lib/matestack/ui/bootstrap/version.rb

@@ -1,7 +1,7 @@
 module Matestack
   module Ui
     module Bootstrap
-      VERSION = '2.0.1'
+      VERSION = '2.1.0'
     end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: matestack-ui-bootstrap
 version: !ruby/object:Gem::Version
-  version: 2.0.1
+  version: 2.1.0
 platform: ruby
 authors:
 - Jonas Jabari
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-12 00:00:00.000000000 Z
+date: 2021-06-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: matestack-ui-core
@@ -17,14 +17,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: '2.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: '2.1'
 description: Bootstrap v5 components for Matestack UI
 email:
 - jonas@matestack.io
@@ -91,6 +91,7 @@ files:
 - lib/matestack/ui/bootstrap/form/select.rb
 - lib/matestack/ui/bootstrap/form/submit.rb
 - lib/matestack/ui/bootstrap/form/switch.rb
+- lib/matestack/ui/bootstrap/form/textarea.rb
 - lib/matestack/ui/bootstrap/index.js
 - lib/matestack/ui/bootstrap/layout/column.rb
 - lib/matestack/ui/bootstrap/layout/container.rb