bootstrap-for-ember-rails 0.0.2

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/progressbar.md

@@ -0,0 +1,117 @@
+# Progress Bar
+
+> Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
+<small>By Bootstrap</small>
+
+## Basic usage
+
+<div class="bs-example">
+    {{bs-progress progress=60}}
+</div>
+
+``` html
+    \{\{bs-progress progress=60\}\}
+```
+
+**Simple as that! a single short line, compared to [Bootstarp Tags](http://getbootstrap.com/components/#progress) 5 long lines that
+produces the same result.**
+
+The progress component respects all _aria_ tags mentioned in _Bootstrap_ documentation.
+
+---
+
+> Progress bars use some of the same button and alert classes for consistent styles
+<small>By Bootstrap</small>
+
+<div class="bs-example">
+    {{bs-progress progress=40 type="success"}}
+    {{bs-progress progress=20 type="info"}}
+    {{bs-progress progress=60 type="warning"}}
+    {{bs-progress progress=80 type="danger"}}
+</div>
+
+
+``` html
+    \{\{bs-progress progress=40 type="success"\}\}
+    \{\{bs-progress progress=20 type="info"\}\}
+    \{\{bs-progress progress=60 type="warning"\}\}
+    \{\{bs-progress progress=80 type="danger"\}\}
+```
+
+
+---
+
+The _progress_ property can be bound to a controller property:
+
+<div class="bs-example">
+    {{bs-progress progressBinding="prog"}}
+    {{bs-button clicked="increment" title="Increment!"}}
+</div>
+
+``` html
+    \{\{bs-progress progressBinding="prog"\}\}
+    \{\{bs-button clicked="increment" content="Increment!"\}\}
+```
+
+Controller sample code:
+
+``` javascript
+Showcase.ShowComponentsProgressbarController = Ember.Controller.extend({
+  prog: 0,
+  incrementBy: 20,
+  increment: function() {
+    if (this.prog < 100) {
+      return this.incrementProperty("prog", this.incrementBy);
+    } else {
+      return this.set("prog", this.incrementBy);
+    }
+  }
+});
+```
+
+## Striped
+
+> Uses a gradient to create a striped effect. Not available in IE8.
+<small>By Bootstrap</small>
+
+This is simply done by setting the _stripped=true_ property.
+
+<div class="bs-example">
+    {{bs-progress progress=40 type="success" stripped=true}}
+    {{bs-progress progress=20 type="info" stripped=true}}
+    {{bs-progress progress=60 type="warning" stripped=true}}
+    {{bs-progress progress=80 type="danger" stripped=true}}
+</div>
+
+
+## Animated
+
+In addition to _stripped=true_, add _animated=true_ property to animate the stripes right to left.
+
+<div class="bs-example">
+    {{bs-progress progress=45 stripped=true animated=true}}
+</div>
+
+``` html
+    \{\{bs-progress progress=45 stripped=true animated=true\}\}
+```
+
+## Stacked
+
+Multiple bars can be placed into the same _bs-progress_ to stack them:
+
+<div class="bs-example">
+    {{#bs-progress}}
+        {{bs-progressbar type="success" progress="35"}}
+        {{bs-progressbar type="warning" progress="20"}}
+        {{bs-progressbar type="danger" progress="10"}}
+    {{/bs-progress}}
+</div>
+
+``` html
+    \{\{#bs-progress\}\}
+        \{\{bs-progressbar type="success" progress="35"\}\}
+        \{\{bs-progressbar type="warning" progress="20"\}\}
+        \{\{bs-progressbar type="danger" progress="10"\}\}
+    \{\{/bs-progress\}\}
+```

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/tabs-panes.md

@@ -0,0 +1,42 @@
+# Tab Panes
+
+Defining {{#link-to "show_components.tabs"}}Tab Component{{/link-to}} covers the Tabs rendering and help you to interact with the selected tab. But usually some content should be rendered as a response for a tab click right?
+
+This is where _Tab Panes_ come into play, a tab pane is the content area of each rendered tab, when a tab is selected, the corresponding _tab pane_ becomes visible, see below for the possible options.
+
+
+Tab Panes expects a `contentBinding` property just like the _bs-tabs_ component, the _Tabs Panes_ component also must be aware of the _bs-tabs_ component it is bound to by specifying the _items-id_ property set to the _id_ of the corresponding _bs-tabs_
+
+<div class="bs-example">
+    {{bs-tabs id="tabs1" contentBinding="tabsMeta" default="Foo"}}
+    {{bs-tabs-panes items-id="tabs1" contentBinding="tabsMeta"}}
+</div>
+
+``` html
+\{\{bs-tabs id="tabs1" contentBinding="tabsMeta" default="Foo"\}\}
+\{\{bs-tabs-panes items-id="tabs1" contentBinding="tabsMeta"\}\}
+```
+
+* An `id` property is required for the _bs-tabs_.
+* The _bs-tabs-panes_ generates a tab pane per element in the _content_ array.
+* The `items-id` property must refer to the `id` of the `bs-tabs` component.
+* If you like one tab to be activated by default, set the `default` property of the _bs-tabs_ component to a title of the tab you would like to be activated by default.
+
+Here is the controller _tabsPanesOptions_ property:
+
+``` javascript
+SomeController = Ember.Controller.extend({
+    tabsMeta: Ember.A([
+            Ember.Object.create({ title: 'Foo', template: 'tabs/foo-tabpane', controller: 'ShowcaseComponentsTabsFoo'}),
+            Ember.Object.create({ title: 'Bar', template: 'tabs/bar-tabpane'})
+    ]);
+});
+
+The `template: 'some-template'` defines what template to render in the corresponding _Tab Pane_ when the Tab is selected.
+
+```
+Note that for the `Foo` tab, a `controller` property was defined, calling `\{\{controller\}\}` within the tab pane template `tabs/foo-tabpane` will point to the specified `ShowcaseComponentsTabsFoo` controller instead of the default controller
+which is the controller of the template the `\{\{bs-tabs-panes\}\}` was called from.
+
+
+Thats all needed! awesome isn't it?

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/tabs-with-routes.md

@@ -0,0 +1,64 @@
+# Tabs in conjuction with Routes
+
+Rendering tab content can be simply done by providing a template per tab using the _bs-tabs-panes_ component,
+Another possiblity is to have a _route per tab_ for rendering tabs contents, Choose this approach if:
+
+
+* **You need your tabs to be bookmarkable, this is possible because each route is bound to some URL path.**
+* **Your tabs are complicated and have a lot of logic and you need a controller per tab.**
+
+If one or more of the reasons above makes sense to you, read on, otherwise use _bs-tabs-panes_ because its setup is much simpler.
+
+## Users Profile Example
+
+This is much easier to explain by example, so for the sake of example, we'll build a User profile with 3 tabs.
+
+## Defining routes
+
+First, lets define the routes of the User profile:
+
+``` javascript
+this.resource('user', function() {
+  this.route('general');
+  this.route('privacy');
+  return this.route('activities');
+});
+```
+
+A resource is required per tabs component, here we define the resource as _user_ because tabs deals with managing a _User_ and a _@route_ is required per tab.
+
+
+## Putting the Tabs component in the Resource template.
+
+In Ember.js, every resource page has its own main template, nested routes are rendered within the _resource_ page, with such hierarchy, it makes sense to put the _tabs component_ in the resource page so it will be available for any nested route that the user visits.
+
+Content goes into the `user` template.
+
+``` html
+    \{\{bs-tabs contentBinding="tabsMeta"\}\}
+    \{\{outlet\}\}
+```
+
+The `tabsMeta` is an array of the Tabs metadata in the `UserController`:
+
+``` javascript
+
+App.UserController = Ember.Controller.extend({
+  tabsMeta: [
+    Ember.Object.create({title: 'General', linkTo: 'user.general'}),
+    Ember.Object.create({title: 'Privacy', linkTo: 'user.privacy'}),
+    Ember.Object.create({title: 'Activities', linkTo: 'user.activities'})
+  ]
+});
+````
+
+The _outlet_ is important so the content of each tab will be rendered beneath the tabs component.
+
+
+## Defining Templates
+
+Simply define a template per nested route, just like you would do if each nested route wouldnt be apart of the tab component.
+
+## Live example
+
+Want to see it alive? take a look here: {{#link-to "user.general"}}User Profile{{/link-to}}

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/tabs.md

@@ -0,0 +1,30 @@
+# Tabs
+
+Tabs are like Pills but styled differently,
+The share exactly the same concepts, so this page doesn't repeat everything, visit Pills for the complete details.
+
+## Simple Tabs
+
+<div class="bs-example">
+    {{bs-tabs contentBinding="content" selectedBinding="selected"}}
+
+    <br/>
+    **Selected**: {{selected}}
+</div>
+
+
+``` html
+    \{\{bs-tabs contentBinding="content" selectedBinding="selected"\}\}
+```
+
+Controller's code:
+
+``` javascript
+Showcase.ShowComponentsTabsController = Ember.Controller.extend({
+  content: ['Home', 'Profile', 'Messages']
+});
+```
+
+## Panes
+
+Please see {{#link-to "show_components.tabs-panes"}}Tab Panes{{/link-to}} for more info about Tab Panes.

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/template.jst

@@ -0,0 +1 @@
+<%=content%>

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/well.md

@@ -0,0 +1,84 @@
+# Well
+
+## Default Well
+
+<p>Here is a default well, but **pay attention** that it is clickable, the click will be propagated to the **controller**.</p>
+
+<div class="bs-example">
+    {{#bs-well clicked="wellClick"}}
+    I am in a well, click me!
+    {{/bs-well}}
+</div>
+
+``` html
+\{\{#bs-well clicked="wellClick"\}\}
+I am in a well!
+\{\{/bs-well\}\}
+```
+
+
+<code>wellClick</code> is the function name in the **controller**.
+
+## Optional classes
+
+As explained by Bootstrap:
+> Control padding and rounded corners with two optional modifier classes.
+
+### Large Well
+
+<div class="bs-example">
+    {{#bs-well large=true}}
+    Look, I'm in a large well!
+    {{/bs-well}}
+</div>
+
+``` html
+\{\{#bs-well large=true\}\}
+Look, I'm in a large well!
+\{\{/bs-well\}\}
+```
+
+<b>You can set large well by adding <code>class="well-lg"</code> or just set the <code>large</code> property to true</b>
+
+### Small Well
+
+<div class="bs-example">
+    {{#bs-well small=true}}
+    Look, I'm in a small well!
+    {{/bs-well}}
+</div>
+
+``` html
+\{\{#bs-well small=true\}\}
+Look, I'm in a small well!
+\{\{/bs-well\}\}
+```
+
+<b>You can set large well by adding <code>class="well-sm"</code> or just set the <code>small</code> property to true</b>
+
+## Component Properties
+
+<div class="table-responsive">
+    <table class="table table-bordered table-striped">
+        <thead>
+            <tr>
+                <th style="width: 150px;">Property</th>
+                <th>Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>large</td>
+                <td>If true, a large well _will_ be rendered by adding the **well-lg** class.</td>
+            </tr>
+            <tr>
+                <td>small</td>
+                <td>If true, a small _well_ will be rendered by adding the **well-sm** class.</td>
+            </tr>
+            <tr>
+                <td>clicked</td>
+                <td>Triggers the specified function name on the **controller** immediately when user clicks the area of the well.</td>
+            </tr>
+        </tbody>
+    </table>
+</div>

data/lib/bootstrap-for-ember-rails/bootstrap-for-ember/app/templates/showcase/show_components/wizard.md

@@ -0,0 +1,109 @@
+# Wizard
+
+Wizard is a multi step view component with transitioning workflow,
+Wizard has a lot in common with the Tabs component as you can think about each Wizard step as a tab & pane, the main different is that with the Wizard component the transitioning order of the steps is defined a head.
+
+## Wizard Sample
+
+Defining an inline content Wizard with blocks is the simplest form of using the wizard component.
+
+<div class="bs-example">
+    {{bs-wizard contentBinding="steps"}}
+</div>
+
+
+``` html
+\{\{bs-wizard contentBinding="steps"\}\}
+```
+
+`contentBinding="steps"` defines a property named _steps_ in the current controll that defines the wizard steps,
+Here is the current controll of this example:
+
+``` javascript
+Showcase.ShowComponentsWizardController = Ember.Controller.extend({
+  init: function() {
+    this._super();
+    this.set('steps', Ember.A([
+      Ember.Object.create({title: 'Foo', template: 'tabs/foo-tabpane'}),
+      Ember.Object.create({title: 'Bar', template: 'tabs/bar-tabpane'}),
+      Ember.Object.create({title: 'Baz', template: 'tabs/baz-tabpane'})
+    ]));
+  }
+});
+```
+
+## Disable Step Selection
+
+Sometimes it makes sense to create a wizard with fixed step flow, this can be done by disabling the steps by providing `disabled=true` per step.
+
+It is also possible to disallow moving to previous step if needed.
+
+<div class="bs-example">
+    {{bs-wizard prevAllowed=false contentBinding="stepsNoPrev"}}
+</div>
+
+``` html
+\{\{bs-wizard prevAllowed=false contentBinding="stepsNoPrev"\}\}
+```
+
+``` javascript
+Showcase.ShowComponentsWizardController = Ember.Controller.extend({
+  init: function() {
+    this._super();
+    this.set('steps', Ember.A([
+      Ember.Object.create({title: 'Step1', template: 'tabs/foo-tabpane', disabled="true"}),
+      Ember.Object.create({title: 'Step2', template: 'tabs/bar-tabpane', disabled="true"}),
+      Ember.Object.create({title: 'Step3', template: 'tabs/baz-tabpane', disabled="true"})
+    ]));
+  }
+});
+```
+
+## Programatically Created Wizard
+
+Creating a wizard programatically should be used if rendering a Wizard is based on some action such as a button click, for example, a modal can be rendered by pressing a button that will render a Wizard within a modal as the example shown below:
+
+<div class="bs-example">
+    {{bs-button title="Start Wizard" type="primary" clicked="createWizard"}}
+</div>
+
+
+``` html
+\{\{bs-button title="Start Wizard" type="primary" clicked="createWizard"\}\}
+```
+
+_Controller's code:_
+
+``` javascript
+Showcase.ShowComponentsWizardController = Ember.Controller.extend({
+  actions: {
+    createWizard: function() {
+      var body;
+      body = Bootstrap.BsWizardComponent.extend({
+        content: [
+          Ember.Object.create({title: 'Step1', template: 'wizard/step1', disabled: true}),
+          Ember.Object.create({title: 'Step2', template: 'wizard/step2', disabled: true}),
+          Ember.Object.create({title: 'Step3', template: 'wizard/step3', disabled: true})
+        ],
+        targetObject: this,
+        onNext: "onNext",
+        onPrev: "onPrev",
+        onFinish: 'onFinish'
+      });
+      Bootstrap.ModalManager.open('manualModal', 'Wizard Title...', body, null, this);
+    },
+    onNext: function() {
+      return console.log('NEXT');
+    },
+    onPrev: function() {
+      return console.log('PREV');
+    },
+    onFinish: function() {
+      Bootstrap.ModalManager.close('manualModal');
+      return Bootstrap.NM.push('Wizard completed!');
+    }
+  }
+});
+```
+
+The controller is responsible for creating the Modal and the Wizard components, our controller listens to the Wizard _onFinish_ event and close the modal as a response plus send an application notification.