feat(docs): live demo (#602)

* v-play * ensure old example deleted on reload * typos * CTA for double-click content-editable * fix bug with double rendering
bootstrap-vue · Jun 30, 2017 · 843057e · 843057e
1 parent 0ebe67b
commit 843057e
Show file tree

Hide file tree

Showing 39 changed files with 1,234 additions and 30 deletions.
diff --git a/docs/components/alert/README.md b/docs/components/alert/README.md
@@ -2,6 +2,50 @@
 
 > Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
 
+```html
+<template>
+  <b-alert show>
+        Default Alert
+    </b-alert>
+
+    <b-alert variant="success" show>
+        Success Alert
+    </b-alert>
+
+    <b-alert variant="danger" dismissible :show="showDismissibleAlert" @dismissed="showDismissibleAlert=false">
+        Dismissible Alert!
+    </b-alert>
+
+    <b-alert :show="dismissCountDown" dismissible variant="warning" @dismiss-count-down="countDownChanged">
+        This alert will dismiss after {{dismissCountDown}} seconds...
+    </b-alert>
+
+    <b-btn @click="showAlert" variant="info" class="m-1">Show alert with count-down timer</b-btn>
+    <b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
+        Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
+    </b-btn>
+</template>
+
+<script>
+export default {
+  data: {
+    dismissCountDown: null,
+    showDismissibleAlert: false
+  },
+  methods: {
+    countDownChanged(dismissCountDown) {
+        this.dismissCountDown = dismissCountDown
+      },
+      showAlert() {
+        this.dismissCountDown = 5
+      }
+  }
+}
+</script>
+
+<!-- alert.vue -->
+```
+
 ### Alert contextual variants
 For proper styling, use one of the four required contextual variants by setting the
 `variant` prop to one of the following: `info`, `success`, `warning` or `danger`.

diff --git a/docs/components/alert/meta.json b/docs/components/alert/meta.json
@@ -1,7 +1,6 @@
 {
   "title": "Alert",
   "component": "bAlert",
-  "jsfiddle": "src29p6L",
   "events": [
     {
       "event": "dismissed",

diff --git a/docs/components/badge/README.md b/docs/components/badge/README.md
@@ -2,6 +2,14 @@
 
 > Small and adaptive tag for adding context to just about any content.
 
+```html
+<h3>Example heading <b-badge>New</b-badge></h3>
+<h4>Example heading <b-badge variant="primary">New</b-badge></h4>
+<h5>Example heading <b-badge pill variant="success">New</b-badge></h5>
+
+<!-- badges.vue -->
+```
+
 ### Contextual variations
 Add any of the following variants via the `variant` prop to change the
 appearance of a `<b-badge>`: `default`, `primary`, `success`, `warning`, `info`,

diff --git a/docs/components/badge/meta.json b/docs/components/badge/meta.json
@@ -1,5 +1,4 @@
 {
   "title": "Badge",
-  "component": "bBadge",
-  "jsfiddle": "k8xz9udb"
+  "component": "bBadge"
 }
diff --git a/docs/components/breadcrumb/README.md b/docs/components/breadcrumb/README.md
@@ -3,6 +3,31 @@
 > Indicate the current page’s location within a navigational hierarchy.
   Separators are automatically added in CSS through <code>::before</code> and <code>content</code>.
 
+```html
+<template>
+  <b-breadcrumb :items="items"/>
+</template>
+
+<script>
+export default {
+  data: {
+    items: [{
+      text: 'Admin',
+      link: '#',
+    }, {
+      text: 'Manage',
+      link: '#',
+    }, {
+      text: 'Library',
+      active: true
+    }]
+  }
+}
+</script>
+
+<!-- breadcrumb.vue -->
+```
+
 Items are rendered using `:items` prop. 
 It can be an array of objects to provide link and active state.
 Active state of last element is automatically set if it is undefined.

diff --git a/docs/components/button-group/README.md b/docs/components/button-group/README.md
@@ -2,6 +2,34 @@
 
 > Group a series of buttons together on a single line with `b-button group`.
 
+```html
+<div class="row">
+<div class="col">
+    <b-button-group vertical>
+    <b-button variant="success">Top</b-button>
+    <b-button variant="info">Middle</b-button>
+    <b-button variant="primary">Bottom</b-button>
+    </b-button-group>
+</div>
+<div class="col">
+    <b-button-group>
+    <b-button>Left</b-button>
+    <b-button>Middle</b-button>
+    <b-button>Right</b-button>
+    </b-button-group>
+</div>
+<div class="col">
+    <b-button-group size="sm">
+    <b-button>Left</b-button>
+    <b-button>Middle</b-button>
+    <b-button>Right</b-button>
+    </b-button-group>
+</div>
+</div>
+
+<!-- button-group.vue -->
+```
+
 ### Sizing
 Set the size prop to `lg` or `sm` to render larger or smaller, respectively, buttons.
 There is no need to specify the size on the individual buttons.

diff --git a/docs/components/button/README.md b/docs/components/button/README.md
@@ -2,7 +2,21 @@
 
 >  Use Bootstrap’s custom `b-button` component for actions in forms, dialogs, and more.
    Includes support for a handful of contextual variations, sizes, states, and more.
-
+
+```html
+<div class="row">
+<template v-for="variant in ['primary','secondary','success','outline-success','warning','danger','link']">
+    <div class="col-md-4 pb-2" v-for="size in ['sm','','lg']">
+    <b-button :size="size" :variant="variant" href="">
+        {{variant}} {{size}}
+    </b-button>
+    </div>
+</template>
+</div>
+
+<!-- button.vue -->
+```
+
 The `b-button` component generally renders a `<button>` element. However, you can also
 render a an `<a>` element by proding an `href` prop vale. You man also generate
 `vue-router` `<router-link>` when providing a value for the `to` prop (`vue-router`

diff --git a/docs/components/card/README.md b/docs/components/card/README.md
@@ -2,3 +2,38 @@
 
 >  A card is a flexible and extensible content container. It includes options for headers and footers,
    a wide variety of content, contextual background colors, and powerful display options.
+
+```html
+<!-- Simple -->
+<b-card class="mb-2" variant="success">Simple Card</b-card>
+
+<!-- Standard -->
+<b-card header="Card header text"
+        class="mb-2"
+        title="Card title"
+        sub-title="Card subtitle"
+        show-footer
+>
+    <small slot="footer" class="text-muted">
+        Last updated 3 mins ago
+    </small>
+</b-card>
+
+<!-- With image -->
+<b-card img="http://placeskull.com/200/200/ABABAB/-1/0"
+        title="Skulls are nice"
+        class="mb-2"
+>
+    This is my opinion :)
+</b-card>
+
+<!-- Overlay image -->
+<b-card overlay
+        img="http://placeskull.com/200/200/E8117F/-1/0"
+        class="mb-2"
+>
+    Overlay cards are cute!
+</b-card>
+
+<!-- card.vue -->
+```
diff --git a/docs/components/carousel/README.md b/docs/components/carousel/README.md
@@ -4,6 +4,27 @@
 
 >  The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
 
+```html
+<b-carousel controls indicators :interval="3000" background="#ABABAB" height="300px">
+
+  <!-- Text slides -->
+  <b-carousel-slide height="300px" caption="First slide" text="Nulla vitae elit libero, a pharetra augue mollis interdum." img="http://placeskull.com/600/300/ABABAB/-1/0">
+  </b-carousel-slide>
+
+  <!-- Slides with custom text -->
+  <b-carousel-slide height="300px" img="http://placeskull.com/600/300/1C90F3/-1/0">
+    Hello world
+  </b-carousel-slide>
+
+  <!-- Slides with image -->
+  <b-carousel-slide height="300px" img="http://placeskull.com/600/300/f44336/-1/0">
+  </b-carousel-slide>
+
+</b-carousel>
+
+<!-- carousel.vue -->
+```
+
 ### Usage
 
 ```html

diff --git a/docs/components/collapse/README.md b/docs/components/collapse/README.md
@@ -3,6 +3,45 @@
 > The Bootstrap `b-collapse` component and `v-b-toggle` directive allows you to
 > toggle content visibility on your pages.
 
+```html
+<p>
+<b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
+</p>
+
+<b-collapse id="collapse1">
+<b-card>
+    Collapse contents Here
+    <b-btn v-b-toggle.collapse2 size="sm">Toggle Inner Collapse</b-btn>
+    <b-collapse id=collapse2 class="mt-2">
+    <b-card>Hello!</b-card>
+    </b-collapse>
+</b-card>
+</b-collapse>
+
+<hr>
+
+<b-btn block v-b-toggle.accordion1 variant="primary">Accordion 1</b-btn>
+<b-collapse id="accordion1" visible accordion="my-accordion">
+<b-card>
+    Accordion 1 contents Here
+</b-card>
+</b-collapse>
+<b-btn block class="mt-1" v-b-toggle.accordion2 variant="primary">Accordion 2</b-btn>
+<b-collapse id="accordion2" accordion="my-accordion">
+<b-card>
+    Accordion 2 contents Here
+</b-card>
+</b-collapse>
+<b-btn block class="mt-1" v-b-toggle.accordion3 variant="primary">Accordion 3</b-btn>
+<b-collapse id="accordion3" accordion="my-accordion">
+<b-card>
+    Accordion 3 contents Here
+</b-card>
+</b-collapse>
+
+<!-- collapse.vue -->
+```
+
 Other elements can easily toggle `b-collapse` components using the `v-b-toggle` directive.
 
 ```html

diff --git a/docs/components/dropdown/README.md b/docs/components/dropdown/README.md
@@ -2,6 +2,45 @@
 
 > Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin.
 
+```html
+<b-dropdown text="Dropdown Button sm" class="m-md-2">
+<b-dropdown-header>This is a heading</b-dropdown-header>
+<b-dropdown-item>Action</b-dropdown-item>
+<b-dropdown-item>Another action</b-dropdown-item>
+<b-dropdown-divider></b-dropdown-divider>
+<b-dropdown-item>Something else here...</b-dropdown-item>
+</b-dropdown>
+
+<br>
+<br>
+
+<b-dropdown text="Split Dropdown Button" variant="success" split class="m-md-2">
+<b-dropdown-item href="#">Action</b-dropdown-item>
+<b-dropdown-item href="#">Another action</b-dropdown-item>
+<b-dropdown-item href="#">Something else here...</b-dropdown-item>
+</b-dropdown>
+
+<br>
+<br>
+
+<b-dropdown text="Right align" variant="warning" right class="m-md-2">
+<b-dropdown-item href="#">Action</b-dropdown-item>
+<b-dropdown-item href="#">Another action</b-dropdown-item>
+<b-dropdown-item href="#">Something else here</b-dropdown-item>
+</b-dropdown>
+
+<br>
+<br>
+
+<b-dropdown text="Drop-Up" dropup variant="info" class="m-md-2">
+<b-dropdown-item href="#">Action</b-dropdown-item>
+<b-dropdown-item href="#">Another action</b-dropdown-item>
+<b-dropdown-item href="#">Something else here</b-dropdown-item>
+</b-dropdown>
+
+<!-- dropdown.vue -->
+```
+
 Simple usage:
 ```html
 <b-dropdown text="Dropdown" variant="success" class="m-md-2">

diff --git a/docs/components/form-checkbox/README.md b/docs/components/form-checkbox/README.md
@@ -4,6 +4,26 @@
 checkbox input to replace the browser default checkbox input. It is built on top of
 semantic and accessible markup, so it is a solid replacement for the default checkbox input.
 
+```html
+<template>
+  <b-form-checkbox v-model="state" value="accepted" unchecked-value="not_accepted">
+    I accept terms and use
+  </b-form-checkbox>
+
+  <div>State: <strong>{{state}}</strong></div>
+</template>
+
+<script>
+export default {
+    data: {
+        state: 'please_accept'
+    }
+}
+</script>
+
+<!-- form-checkbox.vue -->
+```
+
 ### Value
 By default, the checkbox value will be `true` when checked and `false` when unchecked.
 You can customize the checked and unchecked values by specifying the `value` and `unchecked-value`

diff --git a/docs/components/form-fieldset/README.md b/docs/components/form-fieldset/README.md
@@ -4,6 +4,40 @@
 purpose is to provide a label and control pairing, help text and feedback text, as well
 as contextual state visual feedback
 
+```html
+<template>
+<b-form-fieldset
+    :feedback="feedback" 
+    description="We'll convert your name to lowercase automatically."
+    label="Example Label"
+    :state="state"
+    :label-size="1"
+>
+
+<b-form-input v-model="name"></b-form-input>
+
+</b-form-fieldset>
+</template>
+
+<script>
+export default {
+  computed: {
+    feedback() {
+      return this.name.length ? '' : 'Please enter something';
+    },
+    state() {
+      return this.name.length ? 'success':'warning';
+    },
+  },
+  data: {
+    name: '',
+  }
+}
+</script>
+
+<!-- form-fieldset.vue -->
+```
+
 ### Label
 Use the prop `label` to set the content of the generted `<label>` element (html supported),
 or by using the named slot `label`, You may optionally visually hide the label by setting