ui_bibz 2.0.0.alpha → 2.0.0.alpha2

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

@@ -0,0 +1,51 @@
+module UiBibz::Ui::Ux
+
+  # Create a Thead
+  #
+  # This element is an extend of UiBibz::Ui::Core::Component.
+  #
+  # ==== Attributes
+  #
+  # * +content+ - Content of element
+  # * +options+ - Options of element
+  # * +html_options+ - Html Options of element
+  #
+  # ==== Options
+  #
+  # You can add HTML attributes using the +html_options+.
+  # You can pass arguments in options attribute:
+  # * +state+ - State of élement with symbol value:
+  #   (+:inverse+, +:default+)
+  #
+  # ==== Signatures
+  #
+  #   UiBibz::Ui::Ux::Thead.new(content, options = nil, html_options = nil)
+  #
+  #   UiBibz::Ui::Ux::Thead.new(options = nil, html_options = nil) do
+  #     content
+  #   end
+  #
+  # ==== Examples
+  #
+  #   UiBibz::Ui::Ux::Thead.new(content, { state: :inverse }).render
+  #
+  class Thead < UiBibz::Ui::Core::Component
+
+    # See UiBibz::Ui::Core::Component.initialize
+    def initialize content = nil, options = nil, html_options = nil, &block
+      super
+    end
+
+    # Render html tag
+    def render
+      content_tag :thead, content, html_options
+    end
+
+    private
+
+    def state
+      "thead-#{ @options[:state] }" unless @options[:state].nil?
+    end
+
+  end
+end

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

@@ -31,7 +31,7 @@ module UiBibz::Ui::Ux
       unless @actions.nil?
         @actions.format_action.call(record) unless @actions.format_action.nil?
         unless (default_actions? != true && @actions.raw_list.empty?)
-          UiBibz::Ui::Core::Dropdown.new(dropdown_action_name, { position: :right, size: :sm, glyph: actions_glyph }, { class: 'dropdown-action' }).tap do |d|
+          UiBibz::Ui::Core::ButtonDropdown.new(dropdown_action_name, { position: :right, size: :xs, glyph: actions_glyph }, { class: 'dropdown-action' }).tap do |d|
             actions_links(record).each do |l|
               d.html l.to_s.html_safe
             end

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

@@ -71,11 +71,11 @@ module UiBibz::Ui::Ux
     end
 
     def name_with_caret
-      sort_name == sort_column && @column.id.to_s == @store.column_id.to_s ? @name + caret : @name
+      sort_name.to_s == sort_column.to_s && @column.id.to_s == @store.column_id.to_s ? @name + caret : @name
     end
 
     def caret
-      content_tag(:span, '', class: 'caret')
+      UiBibz::Ui::Core::Glyph.new("caret-#{ direction == 'desc' ? 'up' : 'down' }").render
     end
 
     def cls

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

@@ -2,6 +2,7 @@ require "ui_bibz/ui/ux/table/components/store"
 require "ui_bibz/ui/ux/table/components/columns"
 require "ui_bibz/ui/ux/table/components/column"
 require "ui_bibz/ui/ux/table/components/actions"
+require "ui_bibz/ui/ux/table/components/thead"
 require "ui_bibz/ui/ux/table/extensions/paginable"
 require "ui_bibz/ui/ux/table/extensions/paginable"
 require "ui_bibz/ui/ux/table/extensions/searchable"
@@ -30,6 +31,18 @@ module UiBibz::Ui::Ux
   # * +sortable+ - Boolean
   # * +searchable+ - Boolean
   # * +default_actions+ - Boolean
+  # * +state+
+  #   (+:inverse+, +:default+, +:success+, +:primary+, +:secondary+, +:info+,
+  #   +:danger+, +:warning+)
+  # * +thead+ - Hash
+  #   (+state+)
+  #     (+:inverse+, +:default+)
+  # * +bordered+ - Boolean
+  # * +hoverable+ - Boolean
+  # * +size+
+  #   (+:sm+)
+  # * +responsive+ - Boolean
+  # * +reflow+ - Boolean
   #
   # ==== Signatures
   #
@@ -148,16 +161,18 @@ module UiBibz::Ui::Ux
         end
 
         ths = action.header ths
-        concat content_tag(:tr, ths.join.html_safe)
+        concat Thead.new(content_tag(:tr, ths.join.html_safe), @options[:thead]).render
 
-        store.records.each do |record|
+        trs = store.records.collect do |record|
           tds = cols.collect do |col|
             content_tag(:td, td_content(record, col)) unless col.hidden?
           end
 
           tds = action.body record, tds
-          concat content_tag :tr, tds.join.html_safe
+          content_tag(:tr, tds.join.html_safe)
         end
+
+        concat content_tag :tbody, trs.join.html_safe
       end
     end
 
@@ -175,7 +190,35 @@ module UiBibz::Ui::Ux
   private
 
     def component_html_classes
-      ["table", type]
+      ["table", striped, bordered, hoverable, size, responsive, reflow]
+    end
+
+    def state
+      "table-#{ @options[:state] }" unless @options[:state].nil?
+    end
+
+    def striped
+      "table-striped" unless @options[:striped].nil?
+    end
+
+    def bordered
+      "table-bordered" unless @options[:bordered].nil?
+    end
+
+    def hoverable
+      "table-hoverable" unless @options[:hoverable].nil?
+    end
+
+    def size
+      "table-#{ @options[:size] }" unless @options[:size].nil?
+    end
+
+    def responsive
+      "table-responsive" unless @options[:responsive].nil?
+    end
+
+    def reflow
+      "table-reflow" unless @options[:reflow].nil?
     end
 
   end

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

@@ -22,6 +22,18 @@ module UiBibz::Ui::Ux
   #   * +actionable+ - Boolean
   #   * +sortable+ - Boolean
   #   * +searchable+ - Boolean
+  #   * +state+
+  #     (+:inverse+)
+  #   * +thead+ - Hash
+  #     (+state+)
+  #       (+inverse+, +default+)
+  #   * +bordered+ - Boolean
+  #   * +hoverable+ - Boolean
+  #   * +size+
+  #     (+sm+)
+  #   * +responsive+ - Boolean
+  #   * +reflow+ - Boolean
+  #
   #
   # ==== Signatures
   #
@@ -170,10 +182,6 @@ module UiBibz::Ui::Ux
       content_tag :div, @table.render, class: 'card-table'
     end
 
-    def panel_classes
-      %w(panel panel-default table-panel)
-    end
-
     def search
       @search ||= Searchable.new store, @options.merge({ wrap_form: false }), { class: 'card-header' }
     end

data/lib/ui_bibz/version.rb

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

data/lib/ui_bibz.rb

@@ -12,36 +12,50 @@ module UiBibz
 
     # Core
     module Core
-      autoload :Alert,                   "ui_bibz/ui/core/alert"
-      autoload :Breadcrumb,              "ui_bibz/ui/core/breadcrumb/breadcrumb"
+      # Button section
       autoload :Button,                  "ui_bibz/ui/core/button/button"
       autoload :ButtonChoice,            "ui_bibz/ui/core/button/button_choice"
       autoload :ButtonDropdown,          "ui_bibz/ui/core/button/button_dropdown"
       autoload :ButtonGroup,             "ui_bibz/ui/core/button/button_group"
       autoload :ButtonLink,              "ui_bibz/ui/core/button/button_link"
       autoload :ButtonSplitDropdown,     "ui_bibz/ui/core/button/button_split_dropdown"
+
+      # Card section
       autoload :Card,                    "ui_bibz/ui/core/card/card"
       autoload :CardColumn,              "ui_bibz/ui/core/card/card_column"
       autoload :CardDeck,                "ui_bibz/ui/core/card/card_deck"
       autoload :CardGroup,               "ui_bibz/ui/core/card/card_group"
+
+      # Input section
+      autoload :AutocompleteField,       "ui_bibz/ui/core/input/autocomplete_field"
+      autoload :DatePickerField,         "ui_bibz/ui/core/input/date_picker_field"
+      autoload :DropdownSelectField,     "ui_bibz/ui/core/input/dropdown_select_field"
+      autoload :MultiColumnField,        "ui_bibz/ui/core/input/multi_column_field"
+      autoload :MultiSelectField,        "ui_bibz/ui/core/input/multi_select_field"
+      autoload :SurroundField,           "ui_bibz/ui/core/input/surround_field"
+      autoload :SwitchField,             "ui_bibz/ui/core/input/switch_field"
+
+      # Layout section
+      autoload :Row,                     "ui_bibz/ui/core/layout/row"
       autoload :Col,                     "ui_bibz/ui/core/layout/col"
-      autoload :Component,               "ui_bibz/ui/core/component"
       autoload :Container,               "ui_bibz/ui/core/layout/container"
-      autoload :DatePickerField,         "ui_bibz/ui/core/input/date_picker_field"
+
+      # Nav section
+      autoload :Nav,                     "ui_bibz/ui/core/nav/nav"
+      autoload :Navbar,                  "ui_bibz/ui/core/nav/navbar"
+
+      # Other section
+      autoload :Alert,                   "ui_bibz/ui/core/alert"
+      autoload :Breadcrumb,              "ui_bibz/ui/core/breadcrumb/breadcrumb"
+      autoload :Component,               "ui_bibz/ui/core/component"
       autoload :Dropdown,                "ui_bibz/ui/core/dropdown/dropdown"
       autoload :Glyph,                   "ui_bibz/ui/core/glyph"
       autoload :Jumbotron,               "ui_bibz/ui/core/jumbotron"
       autoload :Label,                   "ui_bibz/ui/core/label"
       autoload :ListGroup,               "ui_bibz/ui/core/list/list_group"
       autoload :Modal,                   "ui_bibz/ui/core/modal/modal"
-      autoload :MultiSelectField,        "ui_bibz/ui/core/input/multi_select_field"
-      autoload :MultiColumnField,        "ui_bibz/ui/core/input/multi_column_field"
-      autoload :Nav,                     "ui_bibz/ui/core/nav/nav"
-      autoload :Navbar,                  "ui_bibz/ui/core/nav/navbar"
       autoload :Progress,                "ui_bibz/ui/core/progress"
-      autoload :Row,                     "ui_bibz/ui/core/layout/row"
       autoload :Stars,                   "ui_bibz/ui/core/stars"
-      autoload :SurroundField,           "ui_bibz/ui/core/input/surround_field"
       autoload :Tab,                     "ui_bibz/ui/core/nav/tab"
     end
 

data/test/ui/card_test.rb

@@ -28,7 +28,7 @@ class CardTest < ActionView::TestCase
         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>"
+    expected = "<div class=\"card\"><img src=\"/assets/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

data/test/ui/input_dropdown_select_field_test.rb

@@ -0,0 +1,78 @@
+require 'test_helper'
+
+include UiBibz::Helpers
+class InputDropdownSelectFieldTest < ActionView::TestCase
+
+    test 'dropdowm_select_field' do
+      options  = options_for_select(2.times.map{ |i| "option #{i}" })
+      actual = UiBibz::Ui::Core::DropdownSelectField.new('test', options_tags: options).render
+      expected = "<select name=\"test\" id=\"test\" class=\"selectpicker\"></select>"
+
+      assert_equal expected, actual
+    end
+
+    test 'dropdowm_select_field searchable' do
+      options  = options_for_select(2.times.map{ |i| "option #{i}" })
+      actual = UiBibz::Ui::Core::DropdownSelectField.new('test', { options_tags: options, searchable: true }).render
+      expected = "<select name=\"test\" id=\"test\" data-live-search=\"true\" class=\"selectpicker\"></select>"
+
+      assert_equal expected, actual
+    end
+
+    test 'dropdowm_select_field max_options' do
+      options  = options_for_select(2.times.map{ |i| "option #{i}" })
+      actual = UiBibz::Ui::Core::DropdownSelectField.new('test', { options_tags: options, max_options: 2 }).render
+      expected = "<select name=\"test\" id=\"test\" data-max-options=\"2\" class=\"selectpicker\"></select>"
+
+      assert_equal expected, actual
+    end
+
+    test 'dropdowm_select_field selected_text_format' do
+      options  = options_for_select(2.times.map{ |i| "option #{i}" })
+      actual = UiBibz::Ui::Core::DropdownSelectField.new('test', { options_tags: options, selected_text_format: "count > x" }).render
+      expected = "<select name=\"test\" id=\"test\" data-selected-text-format=\"count &gt; x\" class=\"selectpicker\"></select>"
+
+      assert_equal expected, actual
+    end
+
+    test 'dropdowm_select_field menu_size' do
+      options  = options_for_select(2.times.map{ |i| "option #{i}" })
+      actual = UiBibz::Ui::Core::DropdownSelectField.new('test', { options_tags: options, menu_size: 2 }).render
+      expected = "<select name=\"test\" id=\"test\" data-size=\"2\" class=\"selectpicker\"></select>"
+
+      assert_equal expected, actual
+    end
+
+    test 'dropdowm_select_field actions_box' do
+      options  = options_for_select(2.times.map{ |i| "option #{i}" })
+      actual = UiBibz::Ui::Core::DropdownSelectField.new('test', { options_tags: options, actions_box: true }).render
+      expected = "<select name=\"test\" id=\"test\" data-actions-box=\"true\" class=\"selectpicker\"></select>"
+
+      assert_equal expected, actual
+    end
+
+    test 'dropdowm_select_field show_tick' do
+      options  = options_for_select(2.times.map{ |i| "option #{i}" })
+      actual = UiBibz::Ui::Core::DropdownSelectField.new('test', { options_tags: options, show_tick: true }).render
+      expected = "<select name=\"test\" id=\"test\" class=\"selectpicker show-tick\"></select>"
+
+      assert_equal expected, actual
+    end
+
+    test 'dropdowm_select_field show_menu_arrow' do
+      options  = options_for_select(2.times.map{ |i| "option #{i}" })
+      actual = UiBibz::Ui::Core::DropdownSelectField.new('test', { options_tags: options, show_menu_arrow: true }).render
+      expected = "<select name=\"test\" id=\"test\" class=\"selectpicker show-menu-arrow\"></select>"
+
+      assert_equal expected, actual
+    end
+
+    test 'dropdowm_select_field dropup' do
+      options  = options_for_select(2.times.map{ |i| "option #{i}" })
+      actual = UiBibz::Ui::Core::DropdownSelectField.new('test', { options_tags: options, dropup: true }).render
+      expected = "<select name=\"test\" id=\"test\" class=\"selectpicker dropup\"></select>"
+
+      assert_equal expected, actual
+    end
+
+end

data/test/ui/input_switch_field_test.rb

@@ -0,0 +1,86 @@
+require 'test_helper'
+
+include UiBibz::Helpers
+class InputsSwitchFieldTest < ActionView::TestCase
+
+    # OK
+    test 'switch_field size' do
+      actual = UiBibz::Ui::Core::SwitchField.new('test', size: :lg).render
+      expected = "<input type=\"checkbox\" name=\"test\" id=\"test\" data-size=\"large\" class=\"switch\" />"
+
+      assert_equal expected, actual
+    end
+
+    # OK
+    test 'switch_field animate' do
+      actual = UiBibz::Ui::Core::SwitchField.new('test', animate: false).render
+      expected = "<input type=\"checkbox\" name=\"test\" id=\"test\" data-animate=\"false\" class=\"switch\" />"
+
+      assert_equal expected, actual
+    end
+
+    # OK
+    test 'switch_field checked' do
+      actual = UiBibz::Ui::Core::SwitchField.new('test', {}, checked: true).render
+      expected = "<input type=\"checkbox\" name=\"test\" id=\"test\" checked=\"checked\" class=\"switch\" />"
+
+      assert_equal expected, actual
+    end
+
+    # OK
+    test 'switch_field status' do
+      actual = UiBibz::Ui::Core::SwitchField.new('test', {}, status: "disabled").render
+      expected = "<input type=\"checkbox\" name=\"test\" id=\"test\" status=\"disabled\" class=\"switch\" />"
+
+      assert_equal expected, actual
+    end
+
+    # NON FONCTIONNEL
+    test 'switch_field readonly' do
+      actual = UiBibz::Ui::Core::SwitchField.new('test', {}, readonly: true).render
+      expected = "<input type=\"checkbox\" name=\"test\" id=\"test\" readonly=\"readonly\" class=\"switch\" />"
+
+      assert_equal expected, actual
+    end
+
+    # OK
+    test 'switch_field left_color' do
+      actual = UiBibz::Ui::Core::SwitchField.new('test', left_color: "success").render
+      expected = "<input type=\"checkbox\" name=\"test\" id=\"test\" data-on-color=\"success\" class=\"switch\" />"
+
+      assert_equal expected, actual
+    end
+
+    # OK
+    test 'switch_field right_color' do
+      actual = UiBibz::Ui::Core::SwitchField.new('test', right_color: "info").render
+      expected = "<input type=\"checkbox\" name=\"test\" id=\"test\" data-off-color=\"info\" class=\"switch\" />"
+
+      assert_equal expected, actual
+    end
+
+    # OK
+    test 'switch_field middle_text' do
+      actual = UiBibz::Ui::Core::SwitchField.new('test', middle_text: "testlabeltext").render
+      expected = "<input type=\"checkbox\" name=\"test\" id=\"test\" data-label-text=\"testlabeltext\" class=\"switch\" />"
+
+      assert_equal expected, actual
+    end
+
+    # OK
+    test 'switch_field left_text' do
+      actual = UiBibz::Ui::Core::SwitchField.new('test', left_text: 'testonlabel').render
+      expected = "<input type=\"checkbox\" name=\"test\" id=\"test\" data-on-text=\"testonlabel\" class=\"switch\" />"
+
+      assert_equal expected, actual
+    end
+
+    # OK
+    test 'switch_field right_text' do
+      actual = UiBibz::Ui::Core::SwitchField.new('test', right_text: "testofflabel").render
+      expected = "<input type=\"checkbox\" name=\"test\" id=\"test\" data-off-text=\"testofflabel\" class=\"switch\" />"
+
+      assert_equal expected, actual
+    end
+
+end

data/test/ui/inputs_test.rb

@@ -4,8 +4,8 @@ include UiBibz::Helpers
 class InputsTest < ActionView::TestCase
 
     test "Date Picker Field" do
-      actual   = UiBibz::Ui::Core::DatePickerField.new('date', { append: 'a', prepend: 'b', range: 'u' }, { class: 'datepicker-test' }).render
-      expected = "<div class=\"input-group input-daterange\"><span class=\"input-group-addon\">a</span><input type=\"text\" name=\"date\" id=\"date\" class=\"datepicker-test date_picker form-control\" data-date-locale=\"en\" data-provide=\"datepicker\" data-date-format=\"dd/mm/yyyy\" data-date-today-btn=\"linked\" /><span class=\"input-group-addon input-group-range\">u</span><input type=\"text\" name=\"date\" id=\"date\" class=\"datepicker-test date_picker form-control\" data-date-locale=\"en\" data-provide=\"datepicker\" data-date-format=\"dd/mm/yyyy\" data-date-today-btn=\"linked\" /><span class=\"input-group-addon\">b</span></div>"
+      actual   = UiBibz::Ui::Core::DatePickerField.new(['date_1', 'date_2'], { append: 'a', prepend: 'b', range: 'u' }, { class: 'datepicker-test' }).render
+      expected = "<div class=\"input-group input-daterange\"><span class=\"input-group-addon\">a</span><input type=\"text\" name=\"date_1\" id=\"date_1\" class=\"datepicker-test date_picker form-control\" data-date-locale=\"en\" data-provide=\"datepicker\" data-date-format=\"dd/mm/yyyy\" data-date-today-btn=\"linked\" /><span class=\"input-group-addon input-group-range\">u</span><input type=\"text\" name=\"date_2\" id=\"date_2\" class=\"datepicker-test date_picker form-control\" data-date-locale=\"en\" data-provide=\"datepicker\" data-date-format=\"dd/mm/yyyy\" data-date-today-btn=\"linked\" /><span class=\"input-group-addon\">b</span></div>"
 
       assert_equal expected, actual
     end
@@ -40,7 +40,7 @@ class InputsTest < ActionView::TestCase
     test "Multi Select Field" do
       options  = options_for_select(2.times.map{ |i| "option #{i}" })
       actual   = UiBibz::Ui::Core::MultiSelectField.new('example', option_tags: options).render
-      expected = "<select name=\"example[]\" id=\"example\" class=\"btn-primary btn multi-select\" multiple=\"multiple\"><option value=\"option 0\">option 0</option>
+      expected = "<select name=\"example[]\" id=\"example\" class=\"btn-secondary btn multi-select\" multiple=\"multiple\"><option value=\"option 0\">option 0</option>
 <option value=\"option 1\">option 1</option></select>"
 
       assert_equal expected, actual
@@ -49,7 +49,7 @@ class InputsTest < ActionView::TestCase
     test "Multi Select Field data html options" do
       grouped_options = { 'North America' => [['United States','US'], 'Canada'], 'Europe' => ['Denmark','Germany','France'] }
       actual   = UiBibz::Ui::Core::MultiSelectField.new('example', { option_tags: grouped_options_for_select(grouped_options), clickable_opt_group: true, collapsible_opt_group: true, searchable: true, select_all_option: true, state: :danger }).render
-      expected = "<select name=\"example[]\" id=\"example\" data-enable-clickable-opt-groups=\"true\" data-enable-collapsible-opt-groups=\"true\" data-enable-filtering=\"true\" data-include-select-all-option=\"true\" class=\"btn-danger btn multi-select\" multiple=\"multiple\"><optgroup label=\"North America\"><option value=\"US\">United States</option>
+      expected = "<select name=\"example[]\" id=\"example\" data-enable-clickable-opt-groups=\"true\" data-enable-collapsible-opt-groups=\"true\" data-enable-filtering=\"true\" data-include-select-all-option=\"true\" class=\"danger btn multi-select\" multiple=\"multiple\"><optgroup label=\"North America\"><option value=\"US\">United States</option>
 <option value=\"Canada\">Canada</option></optgroup><optgroup label=\"Europe\"><option value=\"Denmark\">Denmark</option>
 <option value=\"Germany\">Germany</option>
 <option value=\"France\">France</option></optgroup></select>"
@@ -78,4 +78,12 @@ class InputsTest < ActionView::TestCase
       assert_equal expected, actual
     end
 
+    test 'autocomplete_field' do
+      options  = options_for_select(2.times.map{ |i| "option #{i}" })
+      actual = UiBibz::Ui::Core::AutocompleteField.new('test', { option_tags: options }, { id: 'test' }).render
+      expected = "<input type=\"text\" name=\"test\" id=\"test\" class=\"form-control\" autocomplete=\"true\" list=\"test-datalist\" /><datalist id=\"test-datalist\"><option value=\"option 0\">option 0</option>
+<option value=\"option 1\">option 1</option></datalist>"
+
+      assert_equal expected, actual
+    end
 end

data/test/ui/table_test.rb

@@ -5,6 +5,7 @@ require "ui_bibz/ui/ux/table/extensions/searchable"
 require "ui_bibz/ui/ux/table/extensions/sortable"
 require "ui_bibz/ui/ux/table/extensions/actionable"
 include UiBibz::Helpers
+
 class TableTest < ActionView::TestCase
 
   setup do
@@ -193,4 +194,19 @@ class TableTest < ActionView::TestCase
     end
   end
 
+  test 'table visual options' do
+    table  = UiBibz::Ui::Ux::Table.new(store: @users, striped: true, state: :inverse, responsive: true, bordered: true, size: :sm, hoverable: true, reflow: true).render
+    actual = Nokogiri::HTML(table).xpath("//table")[0].attributes["class"].value
+    expected = "table-inverse table table-striped table-bordered table-hoverable table-sm table-responsive table-reflow"
+
+    assert_equal expected, actual
+  end
+
+  test 'table thead visual options' do
+    table  = UiBibz::Ui::Ux::Table.new(store: @users, thead: { state: :default }).render
+    actual = Nokogiri::HTML(table).xpath("//thead")[0].attributes["class"].value
+    expected = "thead-default"
+
+    assert_equal expected, actual
+  end
 end

data/ui_bibz.gemspec

@@ -8,10 +8,10 @@ Gem::Specification.new do |s|
   s.name        = "ui_bibz"
   s.version     = UiBibz::VERSION
   s.authors     = ["Thooams"]
-  s.email       = ["thooams@gmail.com"]
+  s.email       = ["thomas@hummel.link"]
   s.homepage    = "http://thooams.github.io/Ui-Bibz/"
   s.summary     = "A Rails Bootstrap framework..."
-  s.description = "A Rails Boostrap framework..."
+  s.description = "A Rails Bootstrap framework..."
   s.license     = "MIT"
 
   s.files         = `git ls-files`.split("\n")
@@ -19,7 +19,8 @@ Gem::Specification.new do |s|
   s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
   s.require_paths = ["lib", "vendor"]
 
-  # rails
+  # Rails gems
+  s.add_dependency 'bundler', '>= 1.8.4'
   s.add_dependency 'rails', '>= 4.2.0'
   s.add_dependency 'will_paginate', '~> 3.1.0'
   s.add_dependency 'will_paginate-bootstrap'
@@ -28,9 +29,18 @@ Gem::Specification.new do |s|
   s.add_dependency 'haml-rails'
   s.add_dependency 'sass-rails', '>= 5.0.0'
   s.add_dependency 'font-awesome-sass'
-  s.add_dependency 'bootstrap', '~> 4.0.0.alpha3'
+  s.add_dependency 'bootstrap', '< 4.0.0.alpha3'
+
+  # Javascript gems (rails-assets.org)
   s.add_dependency 'rails-assets-tether', '>= 1.1.0'
+  s.add_dependency 'rails-assets-bootstrap-select', '>= 1.10.0'
+  s.add_dependency 'rails-assets-bootstrap-datepicker', '>= 1.6.0'
+
+  # not compatible with boostrap 4
+  #s.add_dependency 'rails-assets-bootstrap-switch', '>= 3.3.2'
+  #s.add_dependency 'rails-assets-bootstrap-multiselect', '>= 0.9.13'
 
+  # Development gems
   s.add_development_dependency "minitest"
   s.add_development_dependency "rdoc"
   s.add_development_dependency "sqlite3"

data/vendor/assets/stylesheets/bootstrap-switch.min.css

@@ -19,4 +19,4 @@
  * ========================================================================
  */
 
-.bootstrap-switch{display:inline-block;direction:ltr;cursor:pointer;border-radius:4px;border:1px solid #ccc;position:relative;text-align:left;overflow:hidden;line-height:8px;z-index:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.bootstrap-switch .bootstrap-switch-container{display:inline-block;top:0;border-radius:4px;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on,.bootstrap-switch .bootstrap-switch-label{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block!important;height:100%;padding:6px 12px;font-size:14px;line-height:20px}.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on{text-align:center;z-index:1}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary{color:#fff;background:#337ab7}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info{color:#fff;background:#5bc0de}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success{color:#fff;background:#5cb85c}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning{background:#f0ad4e;color:#fff}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger{color:#fff;background:#d9534f}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default{color:#000;background:#eee}.bootstrap-switch .bootstrap-switch-label{text-align:center;margin-top:-1px;margin-bottom:-1px;z-index:100;color:#333;background:#fff}.bootstrap-switch .bootstrap-switch-handle-on{border-bottom-left-radius:3px;border-top-left-radius:3px}.bootstrap-switch .bootstrap-switch-handle-off{border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch input[type=radio],.bootstrap-switch input[type=checkbox]{position:absolute!important;top:0;left:0;margin:0;z-index:-1;opacity:0;filter:alpha(opacity=0)}.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label{padding:1px 5px;font-size:12px;line-height:1.5}.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label{padding:5px 10px;font-size:12px;line-height:1.5}.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label{padding:6px 16px;font-size:18px;line-height:1.3333333}.bootstrap-switch.bootstrap-switch-disabled,.bootstrap-switch.bootstrap-switch-indeterminate,.bootstrap-switch.bootstrap-switch-readonly{cursor:default!important}.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label{opacity:.5;filter:alpha(opacity=50);cursor:default!important}.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container{-webkit-transition:margin-left .5s;-o-transition:margin-left .5s;transition:margin-left .5s}.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on{border-radius:0 3px 3px 0}.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off{border-radius:3px 0 0 3px}.bootstrap-switch.bootstrap-switch-focused{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{border-bottom-left-radius:3px;border-top-left-radius:3px}
+.bootstrap-switch{display:inline-block;direction:ltr;cursor:pointer;border-radius:4px;border:1px solid #ccc;position:relative;text-align:left;overflow:hidden;line-height:8px;z-index:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.bootstrap-switch .bootstrap-switch-container{display:inline-block;top:0;border-radius:4px;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on,.bootstrap-switch .bootstrap-switch-label{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block!important;padding:6px 12px;font-size:14px;line-height:20px}.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on{text-align:center;z-index:1}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary{color:#fff;background:#337ab7}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info{color:#fff;background:#5bc0de}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success{color:#fff;background:#5cb85c}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning{background:#f0ad4e;color:#fff}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger{color:#fff;background:#d9534f}.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default{color:#000;background:#eee}.bootstrap-switch .bootstrap-switch-label{text-align:center;margin-top:-1px;margin-bottom:-1px;z-index:100;color:#333;background:#fff}.bootstrap-switch .bootstrap-switch-handle-on{border-bottom-left-radius:3px;border-top-left-radius:3px}.bootstrap-switch .bootstrap-switch-handle-off{border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch input[type=radio],.bootstrap-switch input[type=checkbox]{position:absolute!important;top:0;left:0;margin:0;z-index:-1;opacity:0;filter:alpha(opacity=0)}.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label{padding:1px 5px;font-size:12px;line-height:1.5}.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label{padding:5px 10px;font-size:12px;line-height:1.5}.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label{padding:6px 16px;font-size:18px;line-height:1.3333333}.bootstrap-switch.bootstrap-switch-disabled,.bootstrap-switch.bootstrap-switch-indeterminate,.bootstrap-switch.bootstrap-switch-readonly{cursor:default!important}.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label{opacity:.5;filter:alpha(opacity=50);cursor:default!important}.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container{-webkit-transition:margin-left .5s;-o-transition:margin-left .5s;transition:margin-left .5s}.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on{border-radius:0 3px 3px 0}.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off{border-radius:3px 0 0 3px}.bootstrap-switch.bootstrap-switch-focused{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{border-bottom-left-radius:3px;border-top-left-radius:3px}