100
100
</nav >
101
101
<div id =" app" v-cloak class =" w-full flex lg:pt-10" >
102
102
<aside class =" text-sm ml-1.5 text-grey-darkest break-all bg-gray-200 pl-2 h-screen sticky top-1 overflow-auto" >
103
- <h1 class =" font-medium mx-3 mt-3" >Routes List</h1 >
103
+ <h1 class =" font-medium mx-3 mt-3" style = " width : max-content ; min-width : 350 px ; " >Routes List</h1 >
104
104
<hr class =" border-b border-gray-300" >
105
105
<table class =" table-fixed text-sm mt-5" style =" width : max-content " >
106
106
<tbody >
107
107
@foreach ($docs as $index => $doc )
108
108
<tr >
109
109
<td >
110
- <a href =" #{{ $doc [' methods' ][0 ] . ' -' . $doc [' uri' ]} }" @click =" highlightSidebar({{ $index } } )" >
110
+ <a href =" #{{ $doc [' methods' ][0 ] . ' -' . $doc [' uri' ]} }" @click =" highlightSidebar({{ $index } } )" v-if = " !docs[ {{ $index } } ]['isHidden'] " >
111
111
<span class ="
112
112
font-medium
113
113
inline-flex
@@ -154,7 +154,21 @@ class="inline-flex text-xs"
154
154
<br ><br >
155
155
<div class =" ml-6 mr-6 pl-2 w-2/3 p-2" style =" width : 100% " >
156
156
<h1 class =" pl-2 pr-2 break-normal text-black break-normal font-sans text-black font-medium" >
157
- Settings
157
+ Search・Sort settings
158
+ </h1 >
159
+ <hr class =" border-b border-gray-300" >
160
+ <br >
161
+ <section class =" pt-5 pl-2 pr-2 pb-5 border mb-10 rounded bg-white shadow" >
162
+ <div class =" font-sans" >
163
+ <h2 class =" text-sm break-normal text-black break-normal font-sans pb-1 pt-1 text-black" >
164
+ Filter
165
+ </h2 >
166
+ <p class =" text-xs pb-2 font-medium text-gray-500" >Hide non matching</code ></p >
167
+ <input type =" text" v-model =" filterTerm" @input =" filterDocs" class =" w-full p-2 border-2 border-gray-300 rounded" placeholder =" /api/search" >
168
+ </div >
169
+ </section >
170
+ <h1 class =" pl-2 pr-2 break-normal text-black break-normal font-sans text-black font-medium" >
171
+ Request Settings (editable)
158
172
</h1 >
159
173
<hr class =" border-b border-gray-300" >
160
174
<br >
@@ -175,7 +189,7 @@ class="my-prism-editor"
175
189
<hr class =" border-b border-gray-300" >
176
190
<br >
177
191
@foreach ($docs as $index => $doc )
178
- <section class =" pt-5 pl-2 pr-2 pb-5 border mb-10 rounded bg-white shadow" >
192
+ <section class =" pt-5 pl-2 pr-2 pb-5 border mb-10 rounded bg-white shadow" v-if = " !docs[ {{ $index } } ]['isHidden'] " >
179
193
<div class =" font-sans" id =" {{ $doc [' httpMethod' ] . ' -' . $doc [' uri' ]} }" >
180
194
<h1 class =" text-sm break-normal text-black bg-indigo-50 break-normal font-sans pb-1 pt-1 text-black" >
181
195
<span class =" w-20
@@ -618,7 +632,8 @@ class="my-prism-editor"
618
632
data: {
619
633
docs: docs,
620
634
showRoute: false ,
621
- requestHeaders: ' '
635
+ requestHeaders: ' ' ,
636
+ filterTerm: ' '
622
637
},
623
638
created : function () {
624
639
axios .defaults .headers .common [' X-CSRF-TOKEN' ] = document .querySelector (' meta[name="csrf-token"]' ).getAttribute (' content' ),
@@ -637,6 +652,11 @@ class="my-prism-editor"
637
652
highlighterAtom (code ) {
638
653
return Prism .highlight (code, Prism .languages .atom , " js" );
639
654
},
655
+ filterDocs () {
656
+ for (doc of this .docs ) {
657
+ doc[' isHidden' ] = ! doc[' uri' ].includes (this .filterTerm )
658
+ }
659
+ },
640
660
request (doc ) {
641
661
642
662
// convert string to lower case
0 commit comments