feat: combine search and searchOptions

francisashley · Jan 2, 2025 · 992448d · 992448d
1 parent d8f7faf
commit 992448d
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 25 deletions.
diff --git a/src/components/VueScreener.vue b/src/components/VueScreener.vue
@@ -6,10 +6,7 @@
           <h3 v-if="title" class="vsc-font-normal vsc-text-base vsc-mb-0 vsc-text-zinc-300">
             {{ title }}
           </h3>
-          <div class="vsc-flex vsc-items-center vsc-gap-2">
-            <VueScreenerSearch :screener="internalScreener" />
-            <VueScreenerSearchOptions :screener="internalScreener" />
-          </div>
+          <VueScreenerSearch :screener="internalScreener" />
         </div>
       </slot>
       <slot name="viewport" :screener="internalScreener">
@@ -29,7 +26,6 @@ import { computed, ref, watch } from 'vue'
 import VueScreenerViewport from './viewport/VueScreenerViewport.vue'
 import VueScreenerPagination from '../components/pagination/VueScreenerPagination.vue'
 import VueScreenerSearch from '../components/search/VueScreenerSearch.vue'
-import VueScreenerSearchOptions from '../components/search/VueScreenerSearchOptions.vue'
 import { useVueScreener } from '../hooks/use-vue-screener'
 import { twMerge } from 'tailwind-merge'
 

diff --git a/src/components/search/VueScreenerSearch.vue b/src/components/search/VueScreenerSearch.vue
@@ -1,25 +1,39 @@
 <template>
-  <UiInput
-    :class="twMerge('vsc-w-[200px] vsc-flex vsc-items-center vsc-gap-2 vsc-relative', props.class)"
-    type="text"
-    :value="screener.searchQuery.value.text"
-    :error="regex && !isValidQuery"
-    placeholder="Search..."
-    @keydown="onKeydown"
-    @input="onInput"
-  />
+  <div class="vsc-flex vsc-items-center vsc-gap-2 vsc-relative">
+    <UiInput
+      :class="twMerge('vsc-w-[280px] vsc-flex vsc-items-center vsc-gap-2 vsc-relative vsc-pr-20', props.class)"
+      type="text"
+      :value="screener.searchQuery.value.text"
+      :error="regex && !isValidQuery"
+      placeholder="Search..."
+      @keydown="onKeydown"
+      @input="onInput"
+    />
+    <VueScreenerSearchOptions
+      :screener="screener"
+      :class="twMerge('vsc-absolute vsc-right-0 vsc-border-0', optionsClass)"
+      :toggle-button-class="toggleButtonClass"
+      :toggle-button-active-class="toggleButtonActiveClass"
+      :toggle-button-icon-class="toggleButtonIconClass"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { VueScreener } from '@/interfaces/vue-screener'
 import { computed, HTMLAttributes, ref } from 'vue'
 import { isValidRegExp } from '../../utils/regex.utils'
 import UiInput from '../ui/input/Input.vue'
+import VueScreenerSearchOptions from './VueScreenerSearchOptions.vue'
 import { twMerge } from 'tailwind-merge'
 
 const props = defineProps<{
   screener: VueScreener
   class?: HTMLAttributes['class']
+  optionsClass?: string
+  toggleButtonClass?: string
+  toggleButtonActiveClass?: string
+  toggleButtonIconClass?: string
 }>()
 
 const history = ref<string[]>([])

diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,6 @@
 import VueScreener from './components/VueScreener.vue'
 
 import VueScreenerSearch from './components/search/VueScreenerSearch.vue'
-import VueScreenerSearchOptions from './components/search/VueScreenerSearchOptions.vue'
 
 import VueScreenerTableState from './components/viewport/states/VueScreenerTableState.vue'
 import VueScreenerTableHead from './components/table/VueScreenerTableHead.vue'
@@ -26,7 +25,6 @@ export {
   VueScreener,
   // Header
   VueScreenerSearch,
-  VueScreenerSearchOptions,
   // Viewport
   VueScreenerTableState,
   VueScreenerTableHead,

diff --git a/src/stories/3-theming/1-space.story.vue b/src/stories/3-theming/1-space.story.vue
@@ -4,10 +4,9 @@
       <div class="vsc-flex vsc-justify-between vsc-items-center vsc-mb-4 vsc-text-white">
         <h3 class="vsc-text-base vsc-mb-0">Space theme</h3>
         <div class="vsc-flex vsc-items-center vsc-gap-2">
-          <VueScreenerSearch :screener="screener" class="vsc-border-[#374151] vsc-bg-[#1f2937] vsc-text-white" />
-          <VueScreenerSearchOptions
+          <VueScreenerSearch
             :screener="screener"
-            class="vsc-border-[#374151] vsc-bg-[#1f2937]"
+            class="vsc-border-[#374151] vsc-bg-[#1f2937] vsc-text-white"
             toggle-button-class="vsc-bg-[#1f2937] hover:vsc-bg-[#374151] vsc-text-white vsc-rounded-sm vsc-w-[25px] vsc-h-[25px]"
             toggle-button-active-class="vsc-bg-[#3e51b5]"
           />
@@ -67,7 +66,6 @@
 import {
   VueScreener,
   VueScreenerSearch,
-  VueScreenerSearchOptions,
   VueScreenerPagination,
   useVueScreener,
   VueScreenerPaginationRowsPerPage,

diff --git a/src/stories/3-theming/2-cavern.story.vue b/src/stories/3-theming/2-cavern.story.vue
@@ -7,10 +7,7 @@
           <VueScreenerSearch
             :screener="screener"
             class="vsc-border-[#2a2b2b] vsc-bg-[#171717] vsc-text-white vsc-h-[30px]"
-          />
-          <VueScreenerSearchOptions
-            :screener="screener"
-            class="vsc-border-[#2a2b2b] vsc-bg-[#171717] vsc-p-px vsc-h-[30px]"
+            options-class="vsc-p-px vsc-h-[30px]"
             toggle-button-class="vsc-bg-transparent hover:vsc-bg-[#2a2b2b] vsc-text-white vsc-rounded-sm vsc-w-[26px] vsc-h-[26px]"
             toggle-button-active-class="vsc-bg-[#3e51b5]"
           />
@@ -79,7 +76,6 @@
 import {
   VueScreener,
   VueScreenerSearch,
-  VueScreenerSearchOptions,
   VueScreenerPagination,
   useVueScreener,
   VueScreenerPaginationRowsPerPage,