Add limit setting to search

app/templates/admin/indexes/item/documents/index.hbs

@@ -7,14 +7,16 @@
 </LinkTo>
 
 <div class='sm:flex sm:flex-nowrap'>
+  {{! q }}
   <Form::Input
     @placeholder='Search'
     @prefixIcon={{this.Magnify}}
     @value={{this.q}}
     @onChange={{this.searchTextChanged}}
-    class="sm:grow"
+    class='sm:grow'
   />
 
+  {{! sort }}
   {{#if this.sortValues.length}}
     <div class='relative mb-4 sm:ml-auto sm:flex-none'>
       <Listbox @value={{this.sort}} @onChange={{set this 'sort'}} as |listbox|>
@@ -52,6 +54,32 @@
     </div>
   {{/if}}
 
+  {{! limit }}
+  <div class='relative mb-4 sm:ml-4 sm:flex-none'>
+    <Listbox @value={{this.limit}} @onChange={{set this 'limit'}} as |listbox|>
+      <listbox.Button
+        class='inline-flex items-center px-3 py-2 border rounded cursor-pointer'
+      >
+        Limit: {{this.limit}}
+      </listbox.Button>
+      <listbox.Options
+        class='absolute z-dropdown right-0 w-28 min-w-min mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
+        as |options|
+      >
+        {{#each (array 20 50 100 500) as |item|}}
+          <options.Option @value={{item}} class='outline-none'>
+            <div
+              class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
+            >
+              {{item}}
+            </div>
+          </options.Option>
+        {{/each}}
+      </listbox.Options>
+    </Listbox>
+  </div>
+
+  {{! table settings }}
   <div class='relative mb-4 sm:ml-4 sm:flex-none'>
     <Menu as |menu|>
       <menu.Button as |menuButton|>