Ditch Vue component in favor of simple scrolling table

Better Algolia indexing and stuff and just simpler overall.

Author: adamwathan

docs/source/_assets/js/app.js

@@ -5,7 +5,6 @@ window.anchors = new anchorJS()
 window.Vue = require('vue')
 
 Vue.component('responsive-code-sample', require('./components/ResponsiveCodeSample.vue'))
-Vue.component('class-table', require('./components/ClassTable.vue'))
 
 const app = new Vue({
   el: '#app'

docs/source/_assets/js/components/ClassTable.vue

@@ -1,24 +1,22 @@
-<div>
-  <class-table :rows="{{ json_encode($rows) }}"></class-table>
+<div class="border-t border-b border-grey-light">
+  <div class="max-h-sm overflow-y-scroll">
+    <table class="w-full text-left table-collapse">
+      <thead>
+        <tr>
+          <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+          <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+          <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+        </tr>
+      </thead>
+      <tbody class="align-baseline">
+        @foreach ($rows as $row)
+        <tr>
+          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{{ $row[0] }}</td>
+          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-pre">{{ $row[1] }}</td>
+          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker whitespace-no-wrap lg:whitespace-normal">{{ $row[2] }}</td>
+        </tr>
+        @endforeach
+      </tbody>
+    </table>
+  </div>
 </div>
-{{-- <div class="border-t border-grey-lighter">
-  <table class="w-full text-left table-collapse">
-    <thead>
-      <tr>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-      </tr>
-    </thead>
-    <tbody class="align-baseline">
-      @foreach ($rows as $row)
-      <tr>
-        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{{ $row[0] }}</td>
-        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-pre">{{ $row[1] }}</td>
-        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">{{ $row[2] }}</td>
-      </tr>
-      @endforeach
-    </tbody>
-  </table>
-</div>
- --}}

docs/source/_partials/class-table.blade.php

@@ -70,6 +70,10 @@ config.height = Object.assign(config.height, {
   '7': '1.75rem',
 })
 
+config.maxHeight = Object.assign(config.maxHeight, {
+  'sm': '30rem',
+})
+
 config.padding = Object.assign(config.padding, {
   '10': '2.5rem',
   '12': '3rem',