From 52208fbf359b40e211dead74aba08cb2a8c0aba5 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Fri, 24 Nov 2017 12:21:05 -0400
Subject: [PATCH 1/8] feat(table): add toggelDetails method to scoped item
 slots

---
 src/components/table/table.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index b2a5c8f3b6f..d5eb992995c 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -18,7 +18,6 @@
     }
     table.b-table>tbody>tr.b-table-details>td {
         border-top: none;
-        padding-top: 0;
     }
 
     /* Sort styling */
@@ -233,6 +232,11 @@
       // Add the body rows
       items.forEach((item, index) => {
         const detailsSlot = $scoped['row-details']
+        const toggleDetailsFn = () => {
+          if (detailsSlot) {
+            t.$set(item, '_showDetails', !Boolean(item._showDetails))
+          }
+        }
         // For Each Row
         const tds = fields.map((field) => {
           // Foe Each field in the row
@@ -248,7 +252,9 @@
                 item: item,
                 index: index,
                 unformatted: item[field.key],
-                value: t.getFormattedValue(item, field)
+                value: t.getFormattedValue(item, field),
+                toggleDetails: toggleDetailsFn,
+                detailsShowing: item._showDetails
               })
             ]
           } else {

From 1956deaa0e6bcda3ca6573ffa288760fe9b87c43 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Fri, 24 Nov 2017 12:28:53 -0400
Subject: [PATCH 2/8] add toggleDetails to details scoped var

---
 src/components/table/table.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index d5eb992995c..af0b4a9e64b 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -254,7 +254,7 @@
                 unformatted: item[field.key],
                 value: t.getFormattedValue(item, field),
                 toggleDetails: toggleDetailsFn,
-                detailsShowing: item._showDetails
+                detailsShowing: Boolean(item._showDetails)
               })
             ]
           } else {
@@ -281,7 +281,7 @@
           const details = h(
             'td',
             { attrs: { colspan: String(fields.length) } },
-            [ detailsSlot({ item: item, index: index, fields: fields }) ]
+            [ detailsSlot({ item: item, index: index, fields: fields, toggleDetails: toggleDetailsFn }) ]
           )
           rows.push(h(
             'tr',

From d95ce26f596288fc5158d57be5ad0050f6524cc8 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Fri, 24 Nov 2017 13:58:23 -0400
Subject: [PATCH 3/8] documentation update

---
 src/components/table/README.md | 105 +++++++++++++++++++--------------
 1 file changed, 61 insertions(+), 44 deletions(-)

diff --git a/src/components/table/README.md b/src/components/table/README.md
index 0adf3ee7b9f..8e2c44aa0a5 100755
--- a/src/components/table/README.md
+++ b/src/components/table/README.md
@@ -621,8 +621,10 @@ The slot's scope variable (`data` in the above sample) will have the following p
 | -------- | ---- | -----------
 | `index` | Number | The row number (indexed from zero) relative to the displayed rows
 | `item` | Object | The entire raw record data (i.e. `items[index]`) for this row (before any formatter is applied)
-| `value` | Any | The value for this key in the record (`null` or `undefined` if a virtual column), or the output of thr field's `formatter` function (see below for for information on field `formatter` callback functions)
+| `value` | Any | The value for this key in the record (`null` or `undefined` if a virtual column), or the output of the field's `formatter` function (see below for for information on field `formatter` callback functions)
 | `unformatted` | Any | The raw value for this key in the item record (`null` or `undefined` if a virtual column), before being passed to the field's `formtter` function
+| detailsShowing | Boolean | Will be `true` if the row's `row-details` scoped slot is visible. See section [Row details support](#row-details-support) below for additional information
+| toggleDetails | Function | Can be called to toggle the visibility of the rows `row-details` scoped slot. See section [Row details support](#row-details-support) below for additional information
 
 
 **Notes:**
@@ -631,9 +633,9 @@ computed after pagination and filtering have been applied to the original
 table data. The `index` value will refer to the **displayed row number**. This
 number will align with the indexes from the optional `v-model` bound variable.*
 - When placing inputs, buttons, selects or links within a data cell scoped slot,
-be sure to add a `@click.stop` handler (which can be empty) to prevent the
-click on the input, button, select, or link, from triggering the `row-clicked`
-event:
+be sure to add a `@click.stop` (or `@click.native.stop` if needed) handler (which can
+be empty) to prevent the click on the input, button, select, or link, from triggering
+the `row-clicked` event:
 
 ```html
 <template slot="actions" scope="cell">
@@ -749,14 +751,16 @@ The slot's scope variable (`data` in the above example) will have the following
 | `label` | String | The fields label value (also available as `data.field.label`)
 
 When placing inputs, buttons, selects or links within a `HEAD_` or `FOOT_` slot,
-be sure to add a `@click.stop` handler (which can be empty) to prevent the
+be sure to add a `@click.stop` (or `@click.native.stop`) handler (which can be empty) to prevent the
 click on the input, button, select, or link, from triggering a change in sorting,
 or a `head-clicked` event.
 
 ```html
 <template slot="HEAD_actions" scope="foo">
   <!-- We use click.stop here to prevent 'sort-changed' or 'head-clicked' events -->
-  <input type="checkbox" :value="foo.column" v-model="selected" @click.stop>
+  <input @click.stop type="checkbox" :value="foo.column" v-model="selected">
+  <!-- We use click.native.stop here to prevent 'sort-changed' or 'head-clicked' events -->
+  <b-form-checkbox @click.native.stop :value="foo.column" v-model="selected">
 </template>
 ```
 
@@ -768,28 +772,43 @@ columns not specified in the fields definition array), you can use the scoped sl
 
 If the record has it's `_showDetails` property set to `true`, **and** a `row-details`
 scoped slot exists, a new row will be shown just below the item, with the rendered
-contents of the scoped slot.
+contents of the `row-details` scoped slot.
 
-**Note:** the `_showDetails` property **must** exist in the items data for proper
-reactive detection of changes in `_showDetails`. Read more about
-[Vue ractivity limitations](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats).
+In the scoped field slot, you can toggle the visibility of the row's `row-details`
+scoped slot by calling the `toggleDetails` function passed to the field's scoped slot
+variable. You can use the scoped fields slot variable `detailsShowing` to determine
+the visibility of the `row-details` slot.
 
-Available scoped variables:
+**Note:** If manipulating the `_showDetails` property directly on the item data (i.e.
+ not via the `toggleDetails` function reference), the `_showDetails` propertly **must**
+ exist in the items data for proper reactive detection of changes to it's value. Read more about
+[Vue's reactivity limitations](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats).
 
-| Property | Description
-| -------- | -----------
-| `item` | The entire row record data object
-| `index` | The current visible row number
-| `fields` | The normailized fields definition array (in the _array of objects_ format)
+Available `row-details` scoped viariable properties:
+
+| Property | Type | Description
+| -------- | ---- | -----------
+| `item` | Object | The entire row record data object
+| `index` | Number | The current visible row number
+| `fields` | Array | The normailized fields definition array (in the _array of objects_ format)
+| `toggleDetails` | Function | Function to toggle visibility of the row's details slot
+
+In the following example, we show two methods of toggling the visibility of the details:
+one via a button, and one via a checkbox. We also have the third row row details defaulting
+to have details initially showing.
 
 ```html
 <template>
   <b-table :items="items" :fields="fields">
     <template slot="show_details" scope="row">
-      <!-- we use @click.native.stop here to prevent emitting of a 'row-clicked' event  -->
-      <!-- In some circumstances you may need to use @click.stop instead -->
-      <b-form-checkbox @click.native.stop v-model="row.item._showDetails">
-        <span class="sr-only">Show record details</span>
+      <!-- we use @click.stop here to prevent emitting of a 'row-clicked' event  -->
+      <b-button size="sm" @click.stop="row.toggleDetails" class="mr-2">
+       {{ row.detailsShowing ? 'Hide' : 'Show'}} Details
+      </b-button>
+      <!-- In some circumstances you may need to use @click.native.stop instead -->
+      <!-- As `row.showDetails` is one-way, we call the toggleDetails function on @change -->
+      <b-form-checkbox @click.native.stop @change="row.toggleDetails" checked="row.detailsShowing">
+        Details via check
       </b-form-checkbox>
     </template>
     <template slot="row-details" scope="row">
@@ -798,10 +817,11 @@ Available scoped variables:
           <b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
           <b-col>{{ row.item.age }}</b-col>
         </b-row>
-        <b-row>
+        <b-row class="mb-2">
           <b-col sm="3" class="text-sm-right"><b>Is Active:</b></b-col>
           <b-col>{{ row.item.isActive }}</b-col>
         </b-row>
+        <b-button size="sm" @click="row.toggleDetails">Hide Details</b-button>
       </b-card>
     </template>
   </b-table>
@@ -813,10 +833,10 @@ export default {
     return {
       fields: [ 'first_name', 'last_name', 'show_details' ],
       items: [
-        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald', _showDetails: false },
-        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw', _showDetails: false },
-        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson', _showDetails: false },
-        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney', _showDetails: false }
+        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
+        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
+        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson', _showDetails: true },
+        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
       ]
     }
   }
@@ -1238,12 +1258,11 @@ when fetching your data!
       <template slot="actions" scope="row">
         <!-- We use @click.stop here to prevent a 'row-clicked' event from also happening -->
         <b-button size="sm" @click.stop="info(row.item, row.index, $event.target)" class="mr-1">
-          Info
+          Info modal
+        </b-button>
+        <b-button size="sm" @click.stop="row.toggleDetails">
+          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
         </b-button>
-        <!-- In some circumstances you may need to use @click.native.stop -->
-        <b-form-checkbox @click.native.stop v-model="row.item._showDetails">
-          Details
-        </b-form-checkbox>
       </template>
       <template slot="row-details" scope="row">
         <b-card>
@@ -1264,30 +1283,28 @@ when fetching your data!
 
 <script>
 const items = [
-  { isActive: true, age: 40, name: { first: 'Dickerson', last: 'Macdonald' }, _showDetails: false },
-  { isActive: false, age: 21, name: { first: 'Larsen', last: 'Shaw' }, _showDetails: false },
+  { isActive: true, age: 40, name: { first: 'Dickerson', last: 'Macdonald' } },
+  { isActive: false, age: 21, name: { first: 'Larsen', last: 'Shaw' } },
   {
     isActive: false,
     age: 9,
     name: { first: 'Mini', last: 'Navarro' },
-    _rowVariant: 'success',
-    _showDetails: false
+    _rowVariant: 'success'
   },
-  { isActive: false, age: 89, name: { first: 'Geneva', last: 'Wilson' }, _showDetails: false },
-  { isActive: true, age: 38, name: { first: 'Jami', last: 'Carney' }, _showDetails: false },
-  { isActive: false, age: 27, name: { first: 'Essie', last: 'Dunlap' }, _showDetails: false },
-  { isActive: true, age: 40, name: { first: 'Thor', last: 'Macdonald' }, _showDetails: false },
+  { isActive: false, age: 89, name: { first: 'Geneva', last: 'Wilson' } },
+  { isActive: true, age: 38, name: { first: 'Jami', last: 'Carney' } },
+  { isActive: false, age: 27, name: { first: 'Essie', last: 'Dunlap' } },
+  { isActive: true, age: 40, name: { first: 'Thor', last: 'Macdonald' } },
   {
     isActive: true,
     age: 87,
     name: { first: 'Larsen', last: 'Shaw' },
-    _cellVariants: { age: 'danger', isActive: 'warning' },
-    _showDetails: false
+    _cellVariants: { age: 'danger', isActive: 'warning' }
   },
-  { isActive: false, age: 26, name: { first: 'Mitzi', last: 'Navarro' }, _showDetails: false },
-  { isActive: false, age: 22, name: { first: 'Genevieve', last: 'Wilson' }, _showDetails: false },
-  { isActive: true, age: 38, name: { first: 'John', last: 'Carney' }, _showDetails: false },
-  { isActive: false, age: 29, name: { first: 'Dick', last: 'Dunlap' }, _showDetails: false }
+  { isActive: false, age: 26, name: { first: 'Mitzi', last: 'Navarro' } },
+  { isActive: false, age: 22, name: { first: 'Genevieve', last: 'Wilson' } },
+  { isActive: true, age: 38, name: { first: 'John', last: 'Carney' } },
+  { isActive: false, age: 29, name: { first: 'Dick', last: 'Dunlap' } }
 ]
 
 export default {

From 25541899392d0cd000a6a84964d19048cbb938b1 Mon Sep 17 00:00:00 2001
From: Vitaly Mosin <mosinve@gmail.com>
Date: Sat, 25 Nov 2017 02:46:05 +0700
Subject: [PATCH 4/8] Update README.md

---
 src/components/table/README.md | 56 +++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/components/table/README.md b/src/components/table/README.md
index 8e2c44aa0a5..d79141e4dd4 100755
--- a/src/components/table/README.md
+++ b/src/components/table/README.md
@@ -54,10 +54,10 @@ These titles wil be displayed in the table header, in the order they appear in t
 **first** record of data. See the [**Fields**](#fields-column-definitions-) section
 below for customizing how field headings appear.
 
-**Note:** Field order is not guaranteed. Fields will typically appear in the order they
+>**Note:** _Field order is not guaranteed. Fields will typically appear in the order they
 were defined in the first row, but this may not always be the case depending on the version
 of browser in use. See section [**Fields (column definitions)**](#fields-column-definitions-)
-below to see how to guarantee the order of fields.
+below to see how to guarantee the order of fields._
 
 Record data may also have additional special reserved name keys for colorizing
 rows and individual cells (variants), and for triggering additional row detail. The supported
@@ -255,8 +255,8 @@ export default {
 <!-- table-fields-object.vue -->
 ```
 
-**Note:** if a `key` property is defined in the field definition, it will take
-precidence over the key used to define the field.
+>**Note:** _if a `key` property is defined in the field definition, it will take
+precidence over the key used to define the field._
 
 ### Field definition reference
 The following field properties are recognized:
@@ -274,13 +274,13 @@ The following field properties are recognized:
 | `variant` | String | Apply contextual class to the `<th>` **and** `<td>` in the column - `active`, `success`, `info`, `warning`, `danger` (these variants map to classes `thead-${variant}`, `table-${variant}`, or `bg-${variant}` accordingly)
 | `tdAttr` | Object | JavaScript object representing additional attributes to apply to the `td` cell
 
-**Notes:**
- - _Field properties, if not present, default to `null` unless otherwise stated above._
- - _`thClass` and `tdClass` will not work with classes that are defined in scoped CSS_
- - _For information on the syntax supported by `thStyle`, see
+>**Notes:**
+> - _Field properties, if not present, default to `null` unless otherwise stated above._
+> - _`thClass` and `tdClass` will not work with classes that are defined in scoped CSS_
+> - _For information on the syntax supported by `thStyle`, see
 [Class and Style Bindings](https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles)
 in the Vue.js guide._
- - _Any additional properties added to the field objects will be left intact - so you can access
+> - _Any additional properties added to the field objects will be left intact - so you can access
 them via the named scoped slots for custom data, header, and footer rendering._
 
 For information and usage about scoped slots and formatters, refer to
@@ -314,8 +314,8 @@ fields: [
 | `head-variant` | Use `light` or `dark` to make table header appear light or dark gray, respectively
 | `foot-variant` | Use `light` or `dark` to make table footer appear light or dark gray, respectively. If not set, `head-variant` will be used. Has no effect if `foot-clone` is not set
 
-**Deprecation note:** As of Bootstrap-Vue v1.0.0-beta.10, the prop `inverse` has been deprecated in
-favour of prop `dark` to better align with Bootstrap V4.beta.2 CSS class names.
+>**Deprecation note:** _As of Bootstrap-Vue v1.0.0-beta.10, the prop `inverse` has been deprecated in
+favour of prop `dark` to better align with Bootstrap V4.beta.2 CSS class names._
 
 **Example: Bordered table**
 ```html
@@ -419,7 +419,7 @@ responsive across all viewports by setting the prop `responsive` to `true`. Or,
 maximum breakpoint with which to have a responsive table up to by setting the prop
 `responsive` to one of the breakpoint values: `sm`, `md`, `lg`, or `xl`.
 
-**Note: Possible vertical clipping/truncation**
+>**Note: _Possible vertical clipping/truncation_**
 
 Responsive tables make use of `overflow-y: hidden`, which clips off any content that
 goes beyond the bottom or top edges of the table. In particular, this can clip off
@@ -627,15 +627,15 @@ The slot's scope variable (`data` in the above sample) will have the following p
 | toggleDetails | Function | Can be called to toggle the visibility of the rows `row-details` scoped slot. See section [Row details support](#row-details-support) below for additional information
 
 
-**Notes:**
-- *`index` will not always be the actual row's index number, as it is
+>**Notes:**
+>- _`index` will not always be the actual row's index number, as it is
 computed after pagination and filtering have been applied to the original
 table data. The `index` value will refer to the **displayed row number**. This
-number will align with the indexes from the optional `v-model` bound variable.*
-- When placing inputs, buttons, selects or links within a data cell scoped slot,
+number will align with the indexes from the optional `v-model` bound variable._
+>- _When placing inputs, buttons, selects or links within a data cell scoped slot,
 be sure to add a `@click.stop` (or `@click.native.stop` if needed) handler (which can
 be empty) to prevent the click on the input, button, select, or link, from triggering
-the `row-clicked` event:
+the `row-clicked` event:_
 
 ```html
 <template slot="actions" scope="cell">
@@ -779,10 +779,10 @@ scoped slot by calling the `toggleDetails` function passed to the field's scoped
 variable. You can use the scoped fields slot variable `detailsShowing` to determine
 the visibility of the `row-details` slot.
 
-**Note:** If manipulating the `_showDetails` property directly on the item data (i.e.
+>**Note:** _If manipulating the `_showDetails` property directly on the item data (i.e.
  not via the `toggleDetails` function reference), the `_showDetails` propertly **must**
  exist in the items data for proper reactive detection of changes to it's value. Read more about
-[Vue's reactivity limitations](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats).
+[Vue's reactivity limitations](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)._
 
 Available `row-details` scoped viariable properties:
 
@@ -864,7 +864,7 @@ based on the current sort critera. See the
 [Vue docs](http://vuejs.org/v2/guide/components.html#sync-Modifier) for details
 on the `.sync` prop modifier
 
-**Note:** _The built-in `sort-compare` routine **cannot** sort virtual columns, nor
+>**Note:** _The built-in `sort-compare` routine **cannot** sort virtual columns, nor
 sort based on the custom rendering of the field data (formatter functions and/or
 scoped slots are used only for presentation only, and do not affect the underlying data).
 Refer to the [**Sort-compare routine**](#sort-compare-routine) section below for details on
@@ -1002,7 +1002,7 @@ the original `items` array (except when `items` is set to a provider function).
 Deleting a record from the v-model will **not** remove the record from the
 original items array.
 
-**Note:** *Do not bind any value directly to the `value` prop. Use the `v-model` binding.*
+>**Note:** _Do not bind any value directly to the `value` prop. Use the `v-model` binding._
 
 
 ## Using Items Provider Functions
@@ -1078,7 +1078,7 @@ function myProvider (ctx) {
 a `busy` prop that can be used either to override inner `busy`state, or to monitor
 `<b-table>`'s current busy state in your application using the 2-way `.sync` modifier.
 
-**Note:** _in order to allow `<b-table>` fully track it's `busy` state, custom items
+>**Note:** _in order to allow `<b-table>` fully track it's `busy` state, custom items
 provider function should handle errors from data sources and return an empty
 array to `<b-table>`._
 
@@ -1117,10 +1117,10 @@ methods: {
 }
 ```
 
-**Notes:**
-- _If you manually place the table in the `busy` state, the items provider will
+>**Notes:**
+>- _If you manually place the table in the `busy` state, the items provider will
 __not__ be called/refreshed until the `busy` state has been set to `false`._
-- _All click related and hover events, and sort-changed events will __not__ be
+>- _All click related and hover events, and sort-changed events will __not__ be
  emiited when in the `busy` state (either set automatically during provider update,
  or when manually set)._
 
@@ -1140,12 +1140,12 @@ following `b-table` prop(s) to `true`:
 When `no-provider-paging` is `false` (default), you should only return at
 maximum, `perPage` number of records.
 
-**Notes:**
-- _`<b-table>` needs reference to your pagination and filtering values in order to
+>**Notes:**
+>- _`<b-table>` needs reference to your pagination and filtering values in order to
 trigger the calling of the provider function. So be sure to bind to the `per-page`,
 `current-page` and `filter` props on `b-table` to trigger the provider update function call
 (unless you have the respective `no-provider-*` prop set to `true`)._
-- _The `no-local-sorting` prop has no effect when `items` is a provider funtion._
+>- _The `no-local-sorting` prop has no effect when `items` is a provider funtion._
 
 ### Event based refreshing of data
 You may also trigger the refresh of the provider function by emitting the

From 1057f2726df6246d486b04a38b0942c1e96fd6e5 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 25 Nov 2017 11:24:12 -0400
Subject: [PATCH 5/8] Update README.md

---
 src/components/table/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/table/README.md b/src/components/table/README.md
index d79141e4dd4..2a8f027dac9 100755
--- a/src/components/table/README.md
+++ b/src/components/table/README.md
@@ -807,7 +807,7 @@ to have details initially showing.
       </b-button>
       <!-- In some circumstances you may need to use @click.native.stop instead -->
       <!-- As `row.showDetails` is one-way, we call the toggleDetails function on @change -->
-      <b-form-checkbox @click.native.stop @change="row.toggleDetails" checked="row.detailsShowing">
+      <b-form-checkbox @click.native.stop @change="row.toggleDetails" v-model="row.detailsShowing">
         Details via check
       </b-form-checkbox>
     </template>

From 17da3ae2bece099ac75a84af136fe54aba1a6c76 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 25 Nov 2017 13:14:06 -0400
Subject: [PATCH 6/8] Update README.md

---
 src/components/table/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/table/README.md b/src/components/table/README.md
index 2a8f027dac9..bc965fef9b8 100755
--- a/src/components/table/README.md
+++ b/src/components/table/README.md
@@ -1233,7 +1233,7 @@ when fetching your data!
         </b-form-group>
       </b-col>
       <b-col md="6" class="my-1">
-        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" />
+        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
       </b-col>
       <b-col md="6" class="my-1">
         <b-form-group horizontal label="Per page" class="mb-0">

From 253d7c29953f0e7e77550ff413247cc0be7ce57f Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 25 Nov 2017 13:36:43 -0400
Subject: [PATCH 7/8] Use idMixin and add aria-describedby for details

---
 src/components/table/table.vue | 53 +++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index af0b4a9e64b..29bd237bac2 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -64,7 +64,7 @@
   import { warn, looseEqual, KeyCodes } from '../../utils'
   import { keys, assign } from '../../utils/object'
   import { isArray, concat } from '../../utils/array'
-  import { listenOnRootMixin } from '../../mixins'
+  import { idMixin, listenOnRootMixin } from '../../mixins'
   import startCase from 'lodash.startcase'
 
   function toString (v) {
@@ -118,7 +118,7 @@
   }
 
   export default {
-    mixins: [listenOnRootMixin],
+    mixins: [ idMixin, listenOnRootMixin ],
     render (h) {
       const t = this
       const $slots = t.$slots
@@ -232,6 +232,8 @@
       // Add the body rows
       items.forEach((item, index) => {
         const detailsSlot = $scoped['row-details']
+        const rowShowDetails = Boolean(item._showDetails && detailsSlot)
+        const detailsId = rowShowDetails ? t.safeId(`_details_${index}_`) : null
         const toggleDetailsFn = () => {
           if (detailsSlot) {
             t.$set(item, '_showDetails', !Boolean(item._showDetails))
@@ -267,7 +269,8 @@
           'tr',
           {
             key: index,
-            class: [ t.rowClasses(item), (item._showDetails && detailsSlot) ? 'b-table-has-details' : '' ],
+            class: [ t.rowClasses(item), { 'b-table-has-details': rowShowDetails } ],
+            attrs: { 'aria-describedby':  detailsId },
             on: {
               click: (evt) => { t.rowClicked(evt, item, index) },
               dblclick: (evt) => { t.rowDblClicked(evt, item, index) },
@@ -277,7 +280,7 @@
           tds
         ))
         // Row Details slot
-        if (item._showDetails && detailsSlot) {
+        if (rowShowDetails) {
           const details = h(
             'td',
             { attrs: { colspan: String(fields.length) } },
@@ -285,10 +288,11 @@
           )
           rows.push(h(
             'tr',
-            { key: `${index}-details`, class: [ 'b-table-details' ] },
+            { key: `details-${index}`, class: [ 'b-table-details' ], attrs: { id: detailsId } },
             [ details ]
           ))
-        } else {
+        } else if (detailsSlot) {
+          // Only add the placeholder if a the table has a row-details slot defined (but not shown)
           rows.push(h(false))
         }
       })
@@ -326,14 +330,14 @@
       }
 
       // Assemble the rows into the tbody
-      const tbody = h('tbody', {}, rows)
+      const tbody = h('tbody', {} }, rows)
 
       // Return the assembled table
       return h(
         'table',
         {
           class: t. tableClasses,
-          attrs: { id: t.id || null, 'aria-busy': t.computedBusy ? 'true' : 'false'}
+          attrs: { id: t.safeId(), 'aria-busy': t.computedBusy ? 'true' : 'false'}
         },
         [ caption, colgroup, thead, tfoot, tbody ]
       )
@@ -349,24 +353,16 @@
       }
     },
     props: {
-      id: {
-        type: String,
-        default: ''
-      },
-      caption: {
-        type: String,
-        default: null
-      },
-      captionTop: {
-        type: Boolean,
-        default: false
-      },
       items: {
         type: [Array, Function],
         default() {
           return []
         }
       },
+      fields: {
+        type: [Object, Array],
+        default: null
+      },
       sortBy: {
         type: String,
         default: null
@@ -375,14 +371,14 @@
         type: Boolean,
         default: false
       },
-      apiUrl: {
+      caption: {
         type: String,
-        default: ''
-      },
-      fields: {
-        type: [Object, Array],
         default: null
       },
+      captionTop: {
+        type: Boolean,
+        default: false
+      },
       striped: {
         type: Boolean,
         default: false
@@ -407,7 +403,7 @@
         }
       },
       inverse: {
-        // Deprecated in v1.0.0.beta.10 in favor of `dark`
+        // Deprecated in v1.0.0 in favor of `dark`
         type: Boolean,
         default: null
       },
@@ -498,6 +494,11 @@
       emptyFilteredText: {
         type: String,
         default: 'There are no records matching your request'
+      },
+      apiUrl: {
+        // Passthrough prop. Passed to the context object. Not used by b-table directly
+        type: String,
+        default: ''
       }
     },
     watch: {

From 09f3ab0b99e3d14cd025d27d430b6ad3a38e36c0 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 25 Nov 2017 13:38:49 -0400
Subject: [PATCH 8/8] ESlint

---
 src/components/table/table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 29bd237bac2..4993a9c3566 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -330,7 +330,7 @@
       }
 
       // Assemble the rows into the tbody
-      const tbody = h('tbody', {} }, rows)
+      const tbody = h('tbody', {}, rows)
 
       // Return the assembled table
       return h(