bs-helper 0.1.0

data/test/dummy/app/views/components/_navbar.html.erb

@@ -0,0 +1,36 @@
+<section id="navbar">
+  <div class="page-header">
+    <h1>Navbar
+      <small>bootstrap navbar helper</small>
+    </h1>
+  </div>
+
+  <p>Navbar helpers wraps the bootstrap navbar component.</p>
+
+  <h3>Navbar with brand and nav and divider</h3>
+
+  <div class="bs-docs-example">
+    <%= navbar do %>
+        <%= link_to 'Title', {}, href: '#', class: 'brand' %>
+        <%= nav do |n|
+            n.add link_to('nav1', href: '#'), {class: 'active'}
+            n.add link_to('nav2', href: '#')
+            n.add class: 'divider-vertical'
+            n.add link_to('nav3', href: '#')
+        end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= navbar %&gt;
+  &lt;%= link_to 'Title', {}, href: '#', class: 'brand' %&gt;
+  &lt;%= nav do |n|
+    n.add link_to('nav1', href: '#'), class: 'active'
+    n.add link_to('nav2', href: '#')
+    n.add class: 'divider-vertical'
+    n.add link_to('nav3', href: '#')
+  end %&gt;
+&lt;% end %&gt;
+</pre>
+</section>

data/test/dummy/app/views/components/_notify.html.erb

@@ -0,0 +1,30 @@
+<section id="notify">
+  <div class="page-header">
+    <h1>Notify
+      <small>bootstrap notify helper</small>
+    </h1>
+  </div>
+
+  <p>Notify helpers uses <a href="http://pinesframework.org/pnotify" target="_blank">pnotify</a> to represent various notifications.</p>
+  <p>PNotify is a pure js plugin, this gem is just for server generated javascript with simple configurations. </p>
+
+  <h3>Notify</h3>
+
+  <div class="bs-docs-example">
+    <%= btn('Warning', js: notify_js('Warning', 'I am a warning.')) %>
+    <%= btn('Info', js: notify_js('Info', 'I am an info.', type: 'info')) %>
+    <%= btn('Success', js: notify_js('Success', 'I am a success.', type: 'success')) %>
+    <%= btn('Error', js: notify_js('Error', 'I am an error.', type: 'error'), type: 'button') %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-js">
+&lt;%= btn('Warning', js: notify_js('Warning', 'I am a warning.')) %&gt;
+&lt;%= btn('Info', js: notify_js('Info', 'I am an info.', type: 'info')) %&gt;
+&lt;%= btn('Success', js: notify_js('Success', 'I am a success.', type: 'success')) %&gt;
+&lt;%= btn('Error', js: notify_js('Error', 'I am an error.', type: 'error'), type: 'button') %&gt;
+</pre>
+
+
+
+</section>

data/test/dummy/app/views/components/_progressbar.html.erb

@@ -0,0 +1,42 @@
+<section id="progressbar">
+  <div class="page-header">
+    <h1>Progress Bar
+      <small>bootstrap progress bar helper</small>
+    </h1>
+  </div>
+
+  <p>Progress bar helpers wraps bootstrap progress bar component.</p>
+
+  <h3>Non stacked bar</h3>
+
+  <div class="bs-docs-example">
+    <%= pg(percentage: 25, content: 'Done: 25%') %>
+    <%= pg({striped: true}, percentage: 25, content: 'Done: 25%') %>
+    <%= pg({active: true, striped: true}, percentage: 25, type: :success) %>
+    <%= pg({in_table: true}, percentage: 25, type: :warning) %>
+    <%= pg({in_table: true}, percentage: 25, type: :danger) %>
+    <%= pg({in_table: true}, percentage: 25, type: :info) %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= pg(percentage: 25, content: 'Done: 25%') %&gt;
+&lt;%= pg({striped: true}, percentage: 25, content: 'Done: 25%') %&gt;
+&lt;%= pg({active: true, striped: true}, percentage: 25, type: :success) %&gt;
+&lt;%= pg({in_table: true}, percentage: 25, type: :warning) %&gt;
+&lt;%= pg({in_table: true}, percentage: 25, type: :danger) %&gt;
+&lt;%= pg({in_table: true}, percentage: 25, type: :info) %&gt;
+</pre>
+
+  <h3>Stacked bar</h3>
+
+  <div class="bs-docs-example">
+    <%= pg({}, {percentage: 25, content: 'Done: 25%'}, {percentage: 50, type: :warning}) %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= pg({}, {percentage: 25, content: 'Done: 25%'}, {percentage: 50, type: :warning}) %&gt;
+</pre>
+
+</section>

data/test/dummy/app/views/components/_tab.html.erb

@@ -0,0 +1,134 @@
+<section id="tab">
+  <div class="page-header">
+    <h1>Tab
+      <small>bootstrap tab helper</small>
+    </h1>
+  </div>
+
+  <p>Tab helper will generate a tabs or a pills component in bootstrap way.</p>
+
+  <h3>Default Tab</h3>
+
+  <div class="bs-docs-example">
+    <%= tabs do |t| %>
+        <% t.tab('tab1') do %>
+            I'm tab #1.
+        <% end %>
+        <% t.tab('tab2') do %>
+            I'm tab #2.
+        <% end %>
+        <% t.tab('tab3') do %>
+            I'm tab #3.
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= tabs do |t| %&gt;
+  &lt;% t.tab('tab1') do %&gt;
+    I'm tab #1.
+  &lt;% end %&gt;
+  &lt;% t.tab('tab2') do %&gt;
+    I'm tab #2.
+  &lt;% end %&gt;
+  &lt;% t.tab('tab3') do %&gt;
+    I'm tab #3.
+  &lt;% end %&gt;
+&lt;% end %&gt;
+</pre>
+
+  <h3>Tab with options</h3>
+
+  <div class="bs-docs-example">
+    <%= tabs(id: 'tabs_10', position: 'below') do |t| %>
+        <% t.tab('tab1', disabled: true, clickable: false) do %>
+            I'm tab #1.
+        <% end %>
+        <% t.tab('tab2') do %>
+            I'm tab #2.
+        <% end %>
+        <% t.tab('tab3') do %>
+            I'm tab #3.
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= tabs(id: 'tabs_10', position: 'below') do |t| %&gt;
+  &lt;% t.tab('tab1', disabled: true, clickable: false) do %&gt;
+    I'm tab #1.
+  &lt;% end %&gt;
+  &lt;% t.tab('tab2') do %&gt;
+    I'm tab #2.
+  &lt;% end %&gt;
+  &lt;% t.tab('tab3') do %&gt;
+    I'm tab #3.
+  &lt;% end %&gt;
+&lt;% end %&gt;
+</pre>
+
+  <h3>Stacked Tab</h3>
+
+  <div class="bs-docs-example">
+    <%= tabs(id: 'tabs_20', stacked: true, class: 'span3', content_options: {class: 'span5'}) do |t| %>
+        <% t.tab('tab1', disabled: true, clickable: false) do %>
+            I'm tab #1.
+        <% end %>
+        <% t.tab('tab2') do %>
+            I'm tab #2.
+        <% end %>
+        <% t.tab('tab3') do %>
+            I'm tab #3.
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= tabs(id: 'tabs_20', stacked: true, class: 'span3', content_options: {class: 'span5'}) do |t| %&gt;
+  &lt;% t.tab('tab1', disabled: true, clickable: false) do %&gt;
+    I'm tab #1.
+  &lt;% end %&gt;
+  &lt;% t.tab('tab2') do %&gt;
+    I'm tab #2.
+  &lt;% end %&gt;
+  &lt;% t.tab('tab3') do %&gt;
+    I'm tab #3.
+  &lt;% end %&gt;
+&lt;% end %&gt;
+</pre>
+
+  <h3>Default Pill</h3>
+
+  <div class="bs-docs-example">
+    <%= tabs(style: 'pill', id: 'tab_30') do |t| %>
+        <% t.tab('tab1') do %>
+            I'm tab #1.
+        <% end %>
+        <% t.tab('tab2') do %>
+            I'm tab #2.
+        <% end %>
+        <% t.tab('tab3') do %>
+            I'm tab #3.
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= tabs(style: 'pill', id: 'tab_30') do |t| %&gt;
+  &lt;% t.tab('tab1') do %&gt;
+    I'm tab #1.
+  &lt;% end %&gt;
+  &lt;% t.tab('tab2') do %&gt;
+    I'm tab #2.
+  &lt;% end %&gt;
+  &lt;% t.tab('tab3') do %&gt;
+    I'm tab #3.
+  &lt;% end %&gt;
+&lt;% end %&gt;
+</pre>
+
+</section>

data/test/dummy/app/views/components/_table.html.erb

@@ -0,0 +1,244 @@
+<section id="table">
+  <div class="page-header">
+    <h1>Table
+      <small>bootstrap table helper</small>
+    </h1>
+  </div>
+
+  <p>Table helper wraps bootstrap table and will_paginate gem. It combines objects from the controller and table.</p>
+
+  <h3>Fluid table with paginate objects</h3>
+
+  <div class="bs-docs-example">
+    <%= table(obj: @orders, fixed: false) do |t| %>
+        <% t.column(align: 'center', h: {w: 2, t: 'Order Number'}) { |order| order.order_number } %>
+        <% t.column(h: {w: 2, l: 'Order Date'}) { |order| order.order_date } %>
+        <% t.column(h: {w: 3, l: 'Customer Name'}) { |order| order.customer_name } %>
+        <% t.column(align: 'center', h: {w: 1, t: 'Status'}) { |order| order.status } %>
+        <% t.column(align: 'center', h: {w: 3, t: 'Action'}) do %>
+            <%= link_to 'show', '#table' %> |
+            <%= link_to 'edit', '#table' %> |
+            <%= link_to 'destroy', '#table', confirm: 'sure?' %>
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= table(obj: @orders, fixed: false) do |t| %&gt;
+  &lt;% t.column(align: 'center', h: {w: 2, t: 'Order Number'}) { |order| order.order_number } %&gt;
+  &lt;% t.column(h: {w: 2, l: 'Order Date'}) { |order| order.order_date } %&gt;
+  &lt;% t.column(h: {w: 3, l: 'Customer Name'}) { |order| order.customer_name } %&gt;
+  &lt;% t.column(align: 'center', h: {w: 1, t: 'Status'}) { |order| order.status } %&gt;
+  &lt;% t.column(align: 'center', h: {w: 3, t: 'Action'}) do %&gt;
+      &lt;%= link_to 'show', '#' %&gt; |
+      &lt;%= link_to 'edit', '#' %&gt; |
+      &lt;%= link_to 'destroy', '#', confirm: 'sure?' %&gt;
+  &lt;% end %&gt;
+&lt;% end %&gt;
+</pre>
+
+  <h3>Fixed table with paginate objects</h3>
+
+  <div class="bs-docs-example">
+    <%= table(obj: @orders) do |t| %>
+        <% t.column(align: 'center', h: {w: 2, t: 'Order Number'}) { |order| order.order_number } %>
+        <% t.column(h: {w: 1, l: 'Order Date'}) { |order| order.order_date } %>
+        <% t.column(h: {w: 2, l: 'Customer Name'}) { |order| order.customer_name } %>
+        <% t.column(align: 'center', h: {w: 1, t: 'Status'}) { |order| order.status } %>
+        <% t.column(align: 'center', h: {w: 2, t: 'Action'}) do %>
+            <%= link_to 'show', '#table' %> |
+            <%= link_to 'edit', '#table' %> |
+            <%= link_to 'destroy', '#table', confirm: 'sure?' %>
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= table(obj: @orders) do |t| %&gt;
+  &lt;% t.column(align: 'center', h: {w: 2, t: 'Order Number'}) { |order| order.order_number } %&gt;
+  &lt;% t.column(h: {w: 1, l: 'Order Date'}) { |order| order.order_date } %&gt;
+  &lt;% t.column(h: {w: 2, l: 'Customer Name'}) { |order| order.customer_name } %&gt;
+  &lt;% t.column(align: 'center', h: {w: 1, t: 'Status'}) { |order| order.status } %&gt;
+  &lt;% t.column(align: 'center', h: {w: 2, t: 'Action'}) do %&gt;
+      &lt;%= link_to 'show', '#' %&gt; |
+      &lt;%= link_to 'edit', '#' %&gt; |
+      &lt;%= link_to 'destroy', '#', confirm: 'sure?' %&gt;
+  &lt;% end %&gt;
+&lt;% end %&gt;
+</pre>
+
+  <h3>Table with options</h3>
+
+  <div class="bs-docs-example">
+    <%= table(obj: @orders,
+              fixed: false,
+              caption: 'Orders',
+              show_seq: false,
+              striped: true,
+              bordered: true,
+              condensed: true,
+              actions: [{js: 'alert("show");', value: 'Action 1'},
+                        {js: 'alert("show");', value: 'Action 2'}]) do |t| %>
+        <% t.column(align: 'center', h: {w: 2, t: 'Order Number'}) { |order| order.order_number } %>
+        <% t.column(h: {w: 3, l: 'Order Date'}) { |order| order.order_date } %>
+        <% t.column(h: {w: 3, l: 'Customer Name'}) { |order| order.customer_name } %>
+        <% t.column(align: 'center', h: {w: 1, t: 'Status'}) { |order| order.status } %>
+        <% t.column(align: 'center', h: {w: 3, t: 'Action'}) do %>
+            <%= link_to 'show', '#table' %> |
+            <%= link_to 'edit', '#table' %> |
+            <%= link_to 'destroy', '#table', confirm: 'sure?' %>
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= table(obj: @orders,
+          fixed: false,
+          caption: 'Orders',
+          show_seq: false,
+          striped: true,
+          bordered: true,
+          condensed: true,
+          actions: [{js: 'alert("show");', value: 'Action 1'},
+                    {js: 'alert("show");', value: 'Action 2'}]) do |t| %&gt;
+  &lt;% t.column(align: 'center', h: {w: 3, t: 'Order Number'}) { |order| order.order_number } %&gt;
+  &lt;% t.column(h: {w: 2, l: 'Order Date'}) { |order| order.order_date } %&gt;
+  &lt;% t.column(h: {w: 3, l: 'Customer Name'}) { |order| order.customer_name } %&gt;
+  &lt;% t.column(align: 'center', h: {w: 1, t: 'Status'}) { |order| order.status } %&gt;
+  &lt;% t.column(align: 'center', h: {w: 3, t: 'Action'}) do %&gt;
+      &lt;%= link_to 'show', '#' %&gt; |
+      &lt;%= link_to 'edit', '#' %&gt; |
+      &lt;%= link_to 'destroy', '#', confirm: 'sure?' %&gt;
+  &lt;% end %&gt;
+&lt;% end %&gt;
+</pre>
+
+  <h3>Table with complex header</h3>
+
+  <div class="bs-docs-example">
+    <%= table([
+                  [{t: 'Order', colspan: 2},
+                   {l: 'Customer', w: 3, rowspan: 2},
+                   {t: 'Status', w: 1, rowspan: 2},
+                   {t: 'Action', w: 3, colspan: 3}],
+                  [{t: 'Number', w: 2},
+                   {t: 'Date', w: 3},
+                   {t: 'show', w: 1},
+                   {t: 'edit', w: 1},
+                   {t: 'destroy', w: 1}]
+              ],
+              obj: @orders,
+              fixed: false,
+              bordered: true) do |t| %>
+        <% t.column(align: 'center') { |order| order.order_number } %>
+        <% t.column(align: 'center') { |order| order.order_date } %>
+        <% t.column { |order| order.customer_name } %>
+        <% t.column(align: 'center') { |order| order.status } %>
+        <% t.column(align: 'center') { link_to 'show', '#table' } %>
+        <% t.column(align: 'center') { link_to 'edit', '#table' } %>
+        <% t.column(align: 'center') { link_to 'destroy', '#table', confirm: 'sure?' } %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= table([
+                  [
+                    {t: 'Order', colspan: 2},
+                    {l: 'Customer', w: 3, rowspan: 2},
+                    {t: 'Status', w: 1, rowspan: 2},
+                    {t: 'Action', w: 3, colspan: 3}
+                  ],
+                  [
+                   {t: 'Number', w: 2},
+                   {t: 'Date', w: 3},
+                   {t: 'show', w: 1},
+                   {t: 'edit', w: 1},
+                   {t: 'destroy', w: 1}
+                  ]
+          ],
+          obj: @orders,
+          fixed: false,
+          bordered: true) do |t| %&gt;
+  &lt;% t.column(align: 'center') { |order| order.order_number } %&gt;
+  &lt;% t.column(align: 'center') { |order| order.order_date } %&gt;
+  &lt;% t.column { |order| order.customer_name } %&gt;
+  &lt;% t.column(align: 'center') { |order| order.status } %&gt;
+  &lt;% t.column(align: 'center') { link_to 'show', '#table' } %&gt;
+  &lt;% t.column(align: 'center') { link_to 'edit', '#table' } %&gt;
+  &lt;% t.column(align: 'center') { link_to 'destroy', '#table', confirm: 'sure?' } %&gt;
+&lt;% end %&gt;
+</pre>
+
+  <h3>Table with radio button</h3>
+  <p>It only implement the html tags only, you must write your own javascript</p>
+
+  <div class="bs-docs-example">
+    <%= table(obj: @orders, fixed: false, radio: true) do |t| %>
+        <% t.column(align: 'center', h: {w: 2, t: 'Order Number'}) { |order| order.order_number } %>
+        <% t.column(h: {w: 2, l: 'Order Date'}) { |order| order.order_date } %>
+        <% t.column(h: {w: 3, l: 'Customer Name'}) { |order| order.customer_name } %>
+        <% t.column(align: 'center', h: {w: 1, t: 'Status'}) { |order| order.status } %>
+        <% t.column(align: 'center', h: {w: 3, t: 'Action'}) do %>
+            <%= link_to 'show', '#table' %> |
+            <%= link_to 'edit', '#table' %> |
+            <%= link_to 'destroy', '#table', confirm: 'sure?' %>
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= table(obj: @orders, fixed: false, radio: true) do |t| %&gt;
+  &lt;% t.column(align: 'center', h: {w: 2, t: 'Order Number'}) { |order| order.order_number } %&gt;
+  &lt;% t.column(h: {w: 2, l: 'Order Date'}) { |order| order.order_date } %&gt;
+  &lt;% t.column(h: {w: 3, l: 'Customer Name'}) { |order| order.customer_name } %&gt;
+  &lt;% t.column(align: 'center', h: {w: 1, t: 'Status'}) { |order| order.status } %&gt;
+  &lt;% t.column(align: 'center', h: {w: 3, t: 'Action'}) do %&gt;
+      &lt;%= link_to 'show', '#' %&gt; |
+      &lt;%= link_to 'edit', '#' %&gt; |
+      &lt;%= link_to 'destroy', '#', confirm: 'sure?' %&gt;
+  &lt;% end %&gt;
+&lt;% end %&gt;
+</pre>
+
+  <h3>Table with checkbox</h3>
+
+  <p>It only implement the html tags only, you must write your own javascript</p>
+
+  <div class="bs-docs-example">
+    <%= table(obj: @orders, fixed: false, check: true, actions: [{js: 'alert("show");', value: 'Action 1'},
+                                                                 {js: 'alert("show");', value: 'Action 2'}]) do |t| %>
+        <% t.column(align: 'center', h: {w: 2, t: 'Order Number'}) { |order| order.order_number } %>
+        <% t.column(h: {w: 2, l: 'Order Date'}) { |order| order.order_date } %>
+        <% t.column(h: {w: 3, l: 'Customer Name'}) { |order| order.customer_name } %>
+        <% t.column(align: 'center', h: {w: 1, t: 'Status'}) { |order| order.status } %>
+        <% t.column(align: 'center', h: {w: 3, t: 'Action'}) do %>
+            <%= link_to 'show', '#table' %> |
+            <%= link_to 'edit', '#table' %> |
+            <%= link_to 'destroy', '#table', confirm: 'sure?' %>
+        <% end %>
+    <% end %>
+  </div>
+
+
+<pre class="prettyprint linenums lang-erb">
+&lt;%= table(obj: @orders, fixed: false, check: true,
+             actions: [{js: 'alert("show");', value: 'Action 1'},
+                       {js: 'alert("show");', value: 'Action 2'}]) do |t| %&gt;
+  &lt;% t.column(align: 'center', h: {w: 2, t: 'Order Number'}) { |order| order.order_number } %&gt;
+  &lt;% t.column(h: {w: 2, l: 'Order Date'}) { |order| order.order_date } %&gt;
+  &lt;% t.column(h: {w: 3, l: 'Customer Name'}) { |order| order.customer_name } %&gt;
+  &lt;% t.column(align: 'center', h: {w: 1, t: 'Status'}) { |order| order.status } %&gt;
+  &lt;% t.column(align: 'center', h: {w: 3, t: 'Action'}) do %&gt;
+      &lt;%= link_to 'show', '#' %&gt; |
+      &lt;%= link_to 'edit', '#' %&gt; |
+      &lt;%= link_to 'destroy', '#', confirm: 'sure?' %&gt;
+  &lt;% end %&gt;
+&lt;% end %&gt;
+</pre>
+
+</section>