ui_bibz 1.2.5.3 → 2.0.0.alpha

data/lib/ui_bibz/ui/ux/table/table.rb

@@ -29,6 +29,7 @@ module UiBibz::Ui::Ux
   # * +actionable+ - Boolean
   # * +sortable+ - Boolean
   # * +searchable+ - Boolean
+  # * +default_actions+ - Boolean
   #
   # ==== Signatures
   #
@@ -39,7 +40,7 @@ module UiBibz::Ui::Ux
   #       c.column :id, name: '#'
   #     end
   #     t.actions do |a|
-  #       a.action '', url: url, glyph: ''
+  #       a.link '', url: url, glyph: ''
   #     end
   #   end
   #
@@ -55,9 +56,9 @@ module UiBibz::Ui::Ux
   #       c.column :status_id, { name: 'Status', format: lambda{ |records, record| "Test #{ record.id}"} }
   #     end
   #     t.actions do |a|
-  #       a.action 'toto', url: users_path(:id), glyph: 'eye'
-  #       a.action '---'
-  #       a.action 'momo', url: users_path(:id), glyph: 'home'
+  #       a.link 'toto', url: users_path(:id), glyph: 'eye'
+  #       a.divider
+  #       a.link 'momo', url: users_path(:id), glyph: 'home'
   #     end
   #   end.render
   #
@@ -73,8 +74,8 @@ module UiBibz::Ui::Ux
   #       end
   #     end
   #     t.actions do |acs|
-  #       acs.action(content, options = {}, html_options = {})
-  #       acs.action(options = {}, html_options = {}) do
+  #       acs.link(content, options = {}, html_options = {})
+  #       acs.link(options = {}, html_options = {}) do
   #         content
   #       end
   #     end
@@ -140,7 +141,7 @@ module UiBibz::Ui::Ux
     end
 
     def table_html
-      content_tag(:table, class_and_html_options(["table", type])) do
+      content_tag(:table, html_options) do
 
         ths = cols.collect do |col|
           content_tag(:th, sort.header(col)) unless col.hidden?
@@ -171,5 +172,11 @@ module UiBibz::Ui::Ux
       end
     end
 
+  private
+
+    def component_html_classes
+      ["table", type]
+    end
+
   end
 end

data/lib/ui_bibz/ui/ux/table/{table_panel.rb → table_card.rb}

@@ -1,9 +1,9 @@
 require "ui_bibz/ui/ux/table/components/store"
 module UiBibz::Ui::Ux
 
-  # Create a TablePanel
+  # Create a TableCard
   #
-  # This element is an extend of UiBibz::Ui::Ux::Panel.
+  # This element is an extend of UiBibz::Ui::Ux::card.
   #
   # ==== Attributes
   #
@@ -25,23 +25,23 @@ module UiBibz::Ui::Ux
   #
   # ==== Signatures
   #
-  #   UiBibz::Ui::Ux::TablePanel.new(store: @store)
+  #   UiBibz::Ui::Ux::TableCard.new(store: @store)
   #
-  #   UiBibz::Ui::Ux::TablePanel.new(store: @store, tap: true) do |t|
+  #   UiBibz::Ui::Ux::TableCard.new(store: @store, tap: true) do |t|
   #     t.columns do |c|
   #       c.column '#', { data_index: '#' }
   #     end
   #     t.actions do |a|
-  #       a.action '', url: url, glyph: ''
+  #       a.link '', url: url, glyph: ''
   #     end
   #   end
   #
   # ==== Examples
   #
-  #   UiBibz::Ui::Ux::TablePanel.new(store: @users, table_options: { actionable: false }).render
+  #   UiBibz::Ui::Ux::TableCard.new(store: @users, table_options: { actionable: false }).render
   #
-  #   UiBibz::Ui::Ux::TablePanel.new(store: @users).tap do |t|
-  #     t.header 'My Table panel'
+  #   UiBibz::Ui::Ux::TableCard.new(store: @users).tap do |t|
+  #     t.header 'My Table card'
   #     t.columns do |c|
   #       c.column :id, { name: '# }, { class: 'column-id' }
   #       c.column :name_fr, { name: 'Name FR', link: edit_user_path(:id), order: 2 }
@@ -49,17 +49,17 @@ module UiBibz::Ui::Ux
   #       c.column :status_id, { name: 'Status', format: lambda{ |records, record| "Test #{ record.id}"} }
   #     end
   #     t.actions do |a|
-  #       a.action 'toto', url: users_path(:id), glyph: 'eye'
-  #       a.action '---'
-  #       a.action 'momo', url: users_path(:id), glyph: 'home'
+  #       a.link 'toto', url: users_path(:id), glyph: 'eye'
+  #       a.divider
+  #       a.link 'momo', url: users_path(:id), glyph: 'home'
   #     end
   #   end.render
   #
   # ==== Helper
   #
-  #   table_panel(options = {}, html_options = {})
+  #   table_card(options = {}, html_options = {})
   #
-  #   table_panel(options = { tap: true }, html_options = {}) do |t|
+  #   table_card(options = { tap: true }, html_options = {}) do |t|
   #     t.header(content, options = {}, html_options = {})
   #     # or
   #     t.header(options = {}, html_options = {}) do
@@ -91,7 +91,7 @@ module UiBibz::Ui::Ux
   #       content
   #     end
   #   end
-  class TablePanel < UiBibz::Ui::Core::Panel
+  class TableCard < UiBibz::Ui::Core::Card
 
     attr_accessor :columns
 
@@ -104,19 +104,15 @@ module UiBibz::Ui::Ux
 
     # Render html tag
     def render
-      initialize_header
-      initialize_footer
+      init_components
 
-      content_tag :div, class_and_html_options(panel_classes) do |f|
+      content_tag :div, html_options do
         form_tag(url_for(url_parameters), method: :get) do
           store.parameters.each do |k,v|
             concat tag(:input, type: 'hidden', name: k, value: v) if !default_parameters?(k) && !v.blank?
           end
           concat tag(:input, type: 'hidden', name: 'store_id', value: store.id) unless store.id.nil? # if there is more one table in html page
-          concat(header_html) unless @header.nil?
-          concat(body_html)   unless @body.nil?
-          concat(table_html)  unless store.nil?
-          concat(footer_html) unless @footer.nil?
+          concat @items.join.html_safe
         end
       end
     end
@@ -138,6 +134,10 @@ module UiBibz::Ui::Ux
 
   private
 
+    def component_html_classes
+      %w(card table-card)
+    end
+
     def store
       @store ||= if @options[:store].nil?
         raise 'Store is nil!'
@@ -148,6 +148,12 @@ module UiBibz::Ui::Ux
       end
     end
 
+    def init_components
+      @items << search.render     if search.searchable?
+      @items << table.render      unless @store.nil?
+      @items << pagination.render if pagination.paginable?
+    end
+
     def default_parameters?(k)
       %w(store_id per_page search utf8 search controller action utf8).include?(k)
     end
@@ -156,8 +162,12 @@ module UiBibz::Ui::Ux
       { controller: store.controller, action: store.action, id: store.param_id }
     end
 
+    def table
+      @table
+    end
+
     def table_html
-      content_tag :div, @table.render, class: 'panel-table'
+      content_tag :div, @table.render, class: 'card-table'
     end
 
     def panel_classes
@@ -165,23 +175,11 @@ module UiBibz::Ui::Ux
     end
 
     def search
-      @search ||= Searchable.new store, @options.merge({ wrap_form: false })
+      @search ||= Searchable.new store, @options.merge({ wrap_form: false }), { class: 'card-header' }
     end
 
     def pagination
-      @pagination ||= Paginable.new store, @options.merge({ wrap_form: false })
-    end
-
-    def initialize_footer
-      @footer = @table.pagination
-    end
-
-    def initialize_header
-      @header = UiBibz::Ui::Core::Component.new search.render
-    end
-
-    def initialize_footer
-      @footer = UiBibz::Ui::Core::Component.new(pagination.render) if pagination.paginable?
+      @pagination ||= Paginable.new store, @options.merge({ wrap_form: false }), { class: 'card-footer' }
     end
 
   end

data/lib/ui_bibz/ui/ux/table/table_search_field.rb

@@ -1,15 +1,18 @@
 require "ui_bibz/ui/ux/table/components/store"
 module UiBibz::Ui::Ux
-  class TableSearchField < UiBibz::Ui::Base
+  class TableSearchField < UiBibz::Ui::Core::Component
 
     # Initialize search_field with component item
-    def initialize options = nil, html_options = nil
-      @search_field = UiBibz::Ui::Core::Component.new nil, options, html_options
+    def initialize content = nil, options = nil, html_options = nil
+      html_options = options
+      options = content
+      content = nil
+      super
     end
 
     # Render html tag
     def render
-      if @search_field.options[:wrap_form] != false
+      if options[:wrap_form] != false
         form_tag(url_for(url_parameters), method: :get, class: 'form-table-search-field') do
           search_field_html_in_wrap
         end
@@ -27,17 +30,18 @@ module UiBibz::Ui::Ux
 
     # Store must be generated by *table_search_pagination* method
     def store
-      @store ||= if @search_field.options[:store].nil?
+      @store ||= if @options[:store].nil?
         raise 'Store is nil!'
-      elsif @search_field.options[:store].try(:records).nil?
+      elsif @options[:store].try(:records).nil?
         raise 'Store can be created only with "table_search_pagination" method!'
       else
-        Store.new @search_field.options.delete :store
+        Store.new @options.delete :store
       end
     end
 
     def search_field_html
-      content_tag :div, @search_field.class_and_html_options(div_class) do
+      # add surround_field maybe ?
+      content_tag :div, html_options do
         concat content_tag(:span, UiBibz::Ui::Core::Glyph.new('search').render, class: 'input-group-addon')
         concat tag(:input, type: 'search', value: store.search, name: 'search', class: 'form-control', placeholder: search_placeholder_field)
         concat content_tag(:span, UiBibz::Ui::Core::Glyph.new('times-circle').render, class: 'clear-search-btn input-group-addon')
@@ -45,18 +49,22 @@ module UiBibz::Ui::Ux
     end
 
     def search_field_html_in_wrap
-      content_tag :div, @search_field.class_and_html_options(div_class) do
+      content_tag :div, html_options do
         concat content_tag(:span, UiBibz::Ui::Core::Glyph.new('search').render, class: 'input-group-addon')
         store.parameters.each do |k,v|
           concat tag(:input, type: 'hidden', name: k, value: v) unless default_parameters?(k)
         end
         concat tag(:input, type: 'hidden', name: 'store_id', value: store.id) unless store.id.nil? # if there is more one table in html page
         concat tag(:input, type: 'search', value: store.search, name: 'search', class: 'form-control', placeholder: search_placeholder_field)
-        concat content_tag(:span, UiBibz::Ui::Core::Glyph.new('times-circle').render, class: 'clear-search-btn input-group-addon')
+        concat content_tag(:span, clear_button, class: 'input-group-btn')
       end
     end
 
-    def div_class
+    def clear_button
+      content_tag :button, UiBibz::Ui::Core::Glyph.new('times-circle').render, type: :button, class: 'btn btn-secondary'
+    end
+
+    def component_html_classes
       %w(input-group input-group-sm table-search-field)
     end
 

data/lib/ui_bibz/version.rb

@@ -1,3 +1,3 @@
 module UiBibz
-  VERSION = "1.2.5.3"
+  VERSION = "2.0.0.alpha"
 end

data/test/ui/breadcrumb_test.rb

@@ -0,0 +1,25 @@
+require 'test_helper'
+include UiBibz::Helpers
+class NavTest < ActionView::TestCase
+
+  test 'breadcrumb' do
+    actual = UiBibz::Ui::Core::Breadcrumb.new.tap do |b|
+      b.link 'Home', url: '#home', glyph: 'home'
+      b.link 'Toto', { url: '#toto', status: :active }
+    end.render
+    expected = "<ol class=\"breadcrumb\"><li><a href=\"#home\"><i class=\"glyph fa fa-home\"></i> Home</a></li><li class=\"active\"><a href=\"#toto\">Toto</a></li></ol>"
+
+    assert_equal expected, actual
+  end
+
+  test 'breadcrumb with store' do
+    users    = create_list(:user, 3)
+    actual   = UiBibz::Ui::Core::Breadcrumb.new(store: users, link_label: :name_fr, link_url: user_path(:id)).render
+    expected = "<ol class=\"breadcrumb\"><li><a href=\"/users/1/\">Name fr</a></li><li><a href=\"/users/2/\">Name fr</a></li><li>Name fr</li></ol>"
+
+    assert_equal expected, actual
+  end
+
+
+end
+

data/test/ui/button_test.rb

@@ -14,7 +14,7 @@ class ButtonTest < ActionView::TestCase
     actual = UiBibz::Ui::Core::ButtonGroup.new position: :vertical do
       UiBibz::Ui::Core::Button.new('toto').render
     end.render
-    expected = "<div class=\"btn-group btn-group-vertical\" role=\"group\"><button class=\"btn-default btn\">toto</button></div>"
+    expected = "<div data-toggle=\"buttons\" class=\"btn-group btn-group-vertical\" role=\"group\"><button class=\"btn-primary btn\">toto</button></div>"
 
     assert_equal expected, actual
   end
@@ -26,6 +26,47 @@ class ButtonTest < ActionView::TestCase
     assert_equal expected, actual
   end
 
+  test 'button outline' do
+    actual   = UiBibz::Ui::Core::Button.new('toto', state: :success, outline: true).render
+    expected = "<button class=\"btn-success-outline btn\">toto</button>"
+
+    assert_equal expected, actual
+  end
+
+  test 'checkbox button checked' do
+    actual   = UiBibz::Ui::Core::ButtonChoice.new('Toto', { status: :active }).render
+    expected = "<label class=\"active btn-primary btn\"><input type=\"checkbox\" autocomplete=\"off\" checked=\"checked\" />Toto</label>"
+
+    assert_equal expected, actual
+  end
+
+  test 'checkbox button non checked' do
+    actual   = UiBibz::Ui::Core::ButtonChoice.new('Toto', { name: 'toto', id: 'toto', input_html_options: { class: 'toto'}}).render
+    expected = "<label class=\"btn-primary btn\"><input type=\"checkbox\" autocomplete=\"off\" name=\"toto\" id=\"toto\" class=\"toto\" />Toto</label>"
+
+    assert_equal expected, actual
+  end
+
+  test 'button group choice checkbox' do
+    actual = UiBibz::Ui::Core::ButtonGroup.new do
+      concat UiBibz::Ui::Core::ButtonChoice.new('Toto1').render
+      concat UiBibz::Ui::Core::ButtonChoice.new('Toto2').render
+    end.render
+    expected = "<div data-toggle=\"buttons\" class=\"btn-group\" role=\"group\"><label class=\"btn-primary btn\"><input type=\"checkbox\" autocomplete=\"off\" />Toto1</label><label class=\"btn-primary btn\"><input type=\"checkbox\" autocomplete=\"off\" />Toto2</label></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'button group choice radio' do
+    actual = UiBibz::Ui::Core::ButtonGroup.new do
+      concat UiBibz::Ui::Core::ButtonChoice.new('Toto1', type: :radio).render
+      concat UiBibz::Ui::Core::ButtonChoice.new('Toto2', type: :radio).render
+    end.render
+    expected = "<div data-toggle=\"buttons\" class=\"btn-group\" role=\"group\"><label class=\"btn-primary btn\"><input type=\"radio\" autocomplete=\"off\" />Toto1</label><label class=\"btn-primary btn\"><input type=\"radio\" autocomplete=\"off\" />Toto2</label></div>"
+
+    assert_equal expected, actual
+  end
+
   test 'button dropdown' do
       actual = UiBibz::Ui::Core::ButtonDropdown.new("Dropdown", type: :dropup, state: :success).tap do |d|
       d.link 'toto'
@@ -34,7 +75,7 @@ class ButtonTest < ActionView::TestCase
       d.divider
       d.link 'lolo'
     end.render
-    expected = "<div class=\"btn-group dropup\" role=\"group\"><button class=\"btn btn-success dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\" aria-expanded=\"false\">Dropdown <span class=\"caret\"></span></button><ul class=\"dropdown-menu dropdown-menu-left\" role=\"menu\"><li class=\"\" role=\"presentation\"><a href=\"#\">toto</a></li><li class=\"dropdown-header\" role=\"presentation\">header</li><li class=\"\" role=\"presentation\"><a href=\"#\">momo</a></li><li class=\"divider\" role=\"separator\"></li><li class=\"\" role=\"presentation\"><a href=\"#\">lolo</a></li></ul></div>"
+    expected = "<div class=\"btn-group dropup\" role=\"group\"><button class=\"btn btn-success dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">Dropdown <span class=\"caret\"></span></button><div class=\"dropdown-menu dropdown-menu-left\"><a class=\"dropdown-item\" href=\"#\">toto</a><h6 class=\"dropdown-header\" role=\"presentation\">header</h6><a class=\"dropdown-item\" href=\"#\">momo</a><div class=\"dropdown-divider\"></div><a class=\"dropdown-item\" href=\"#\">lolo</a></div></div>"
 
     assert_equal expected, actual
   end
@@ -47,10 +88,9 @@ class ButtonTest < ActionView::TestCase
       d.divider
       d.link 'lolo'
     end.render
-    expected = "<div class=\"btn-group dropup\" role=\"group\"><button class=\"btn btn-primary\">Dropdown</button><button class=\"btn btn-primary dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\" aria-expanded=\"false\"><span class=\"caret\"></span><span class=\"sr-only\">Toggle Dropdown</span></button><ul class=\"dropdown-menu dropdown-menu-left\" role=\"menu\"><li class=\"\" role=\"presentation\"><a href=\"#\">toto</a></li><li class=\"dropdown-header\" role=\"presentation\">header</li><li class=\"\" role=\"presentation\"><a href=\"#\">momo</a></li><li class=\"divider\" role=\"separator\"></li><li class=\"\" role=\"presentation\"><a href=\"#\">lolo</a></li></ul></div>"
+    expected = "<div class=\"btn-group dropup\" role=\"group\"><button class=\"btn btn-primary\">Dropdown</button><button class=\"btn btn-primary dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"caret\"></span><span class=\"sr-only\">Toggle Dropdown</span></button><div class=\"dropdown-menu dropdown-menu-left\"><a class=\"dropdown-item\" href=\"#\">toto</a><h6 class=\"dropdown-header\" role=\"presentation\">header</h6><a class=\"dropdown-item\" href=\"#\">momo</a><div class=\"dropdown-divider\"></div><a class=\"dropdown-item\" href=\"#\">lolo</a></div></div>"
 
     assert_equal expected, actual
   end
 
-
 end

data/test/ui/card_test.rb

@@ -0,0 +1,106 @@
+require 'test_helper'
+include UiBibz::Helpers
+include UiBibz::Helpers::UiCoreHelper
+class CardTest < ActionView::TestCase
+
+  test 'create card' do
+    actual = card do
+      'test'
+    end
+    expected = "<div class=\"card card-block\">test</div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'create card with image, list and block' do
+    actual = card(tap: true) do |c|
+      c.image 'image.svg'
+      c.block do
+        "test"
+      end
+      c.list_group do |lg|
+        lg.list "Cras justo odio"
+        lg.list "Dapibas ac facilisis in"
+        lg.list "vestibulum at eros"
+      end
+      c.block do
+        link_to "Card link", '#', class: "card-link"
+        link_to "Card link", '#', class: "card-link"
+      end
+    end
+    expected = "<div class=\"card\"><img src=\"/images/image.svg\" alt=\"Image\" /><div class=\"card-block\">test</div><ul class=\"list-group-flush list-group\"><li class=\"list-group-item\">Cras justo odio</li><li class=\"list-group-item\">Dapibas ac facilisis in</li><li class=\"list-group-item\">vestibulum at eros</li></ul><div class=\"card-block\"><a class=\"card-link\" href=\"#\">Card link</a></div></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'create card with header, block and footer' do
+    actual = card(state: :danger, tap: true, class: 'toto') do |p|
+      p.header 'toto', glyph: 'eye'
+      p.block 'toto'
+      p.footer 'toto'
+    end
+    expected = "<div class=\"card-danger toto card\"><div class=\"card-header\"><i class=\"glyph fa fa-eye\"></i> toto</div><div class=\"card-block\">toto</div><div class=\"card-footer\">toto</div></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'create card group' do
+    actual = card_group do |cg|
+      cg.card 'test 1', block: true
+      cg.card 'test 2', block: true
+      cg.card 'test 3', block: true
+    end
+    expected = "<div class=\"card-group\"><div class=\"card card-block\">test 1</div><div class=\"card card-block\">test 2</div><div class=\"card card-block\">test 3</div></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'create card deck' do
+    actual = card_deck do |cg|
+      cg.card 'test 1', block: true
+      cg.card 'test 2', block: true
+      cg.card 'test 3', block: true
+    end
+    expected = "<div class=\"card-deck-wrapper\"><div class=\"card-deck\"><div class=\"card card-block\">test 1</div><div class=\"card card-block\">test 2</div><div class=\"card card-block\">test 3</div></div></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'create card column' do
+    actual = card_column do |cg|
+      cg.card 'test 1', block: true
+      cg.card 'test 2', block: true
+      cg.card 'test 3', block: true
+    end
+    expected = "<div class=\"card-columns\"><div class=\"card card-block\">test 1</div><div class=\"card card-block\">test 2</div><div class=\"card card-block\">test 3</div></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'card list group' do
+    actual = card tap: true do |c|
+      c.list_group do |lg|
+        lg.list "list 1"
+        lg.list "list 2"
+        lg.list "list 3"
+      end
+    end
+    expected = "<div class=\"card\"><ul class=\"list-group-flush list-group\"><li class=\"list-group-item\">list 1</li><li class=\"list-group-item\">list 2</li><li class=\"list-group-item\">list 3</li></ul></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'card block parameters' do
+    actual = card tap: true do |c|
+      c.block tap: true do |b|
+        b.title "title"
+        b.text "text"
+        b.link 'link'
+      end
+    end
+    expected = "<div class=\"card\"><div class=\"card-block\"><h4 class=\"card-title\">title</h4><p class=\"card-text\">text</p><a class=\"card-title\">link</a></div></div>"
+
+    assert_equal expected, actual
+  end
+
+end