quickSearch && laySet style optimize

Author: akfdwjx

src/Skeleton.vue

@@ -85,21 +85,24 @@ onMounted(async () => {
     <div
       :class="`${tableBasicConf.styles.headerClass} iw-tt-header flex justify-between p-0 min-h-0`"
     >
-      <div class="tablist iw-tabs iw-tabs-sm iw-tabs-boxed">
-        <a
-          v-for="layout in tableLayoutsConf"
-          :key="layout.id"
-          :data-layout-id="layout.id"
-          role="tab"
-          class="iw-tt-header__item iw-tab"
-          :class="currentLayoutId === layout.id ? 'iw-tab-active' : ''"
-        >
-          <i :class="`${layout.icon}`" class="mr-1" /> {{ layout.title }}
-        </a>
-      </div>
-      <div>
+      <ScrollableComp class="flex-1">
+        <div class="tablist iw-tabs iw-tabs-sm iw-tabs-boxed">
+          <a
+            v-for="layout in tableLayoutsConf"
+            :key="layout.id"
+            :data-layout-id="layout.id"
+            role="tab"
+            class="iw-tt-header__item iw-tab flex flex-nowrap"
+            :class="currentLayoutId === layout.id ? 'iw-tab-active' : ''"
+          >
+            <i :class="`${layout.icon}`" class="mr-1" /> {{ layout.title }}
+          </a>
+        </div>
+      </ScrollableComp>
+      <div class="flex items-center">
         <QuickSearchComp
           v-if="props.layouts.find(layout => layout.id === currentLayoutId)?.quickSearch"
+          class="mx-2"
           :placeholder="props.layouts.find(layout => layout.id === currentLayoutId)?.quickSearch?.placeholder!"
           :search-content="tableLayoutsConf.find(layout => layout.id === currentLayoutId)?.quickSearchContent"
         />

src/components/function/QuickSearch.vue

@@ -1,24 +1,39 @@
 <script setup lang="ts">
-import * as eb from '../eventbus';
+import { ref } from 'vue'
+import * as eb from '../eventbus'
 
 const props = defineProps<{
   placeholder: string
   searchContent?: string
 }>()
 
+const quickSearchRef = ref()
+const showInput = ref(false)
+
 async function setQuickSearchContent(e: Event) {
   const target = e.target as HTMLInputElement
   await eb.modifyLayout({
     quickSearchContent: target.value,
   })
 }
+
+function handleQuickShow() {
+  showInput.value = !showInput.value
+}
 </script>
 
 <template>
-  <input
-    class="iw-input iw-input-bordered iw-input-xs"
-    :value="props.searchContent || ''"
-    :placeholder="props.placeholder"
-    @change="setQuickSearchContent"
-  >
+  <label class="iw-input iw-input-xs flex items-center" :class="`${showInput && 'iw-input-bordered'}`">
+    <input
+      ref="quickSearchRef"
+      type="text"
+      class="iw-grow border-none"
+      :class="`${showInput ? 'w-[150px]' : 'w-0'}`"
+      :value="props.searchContent || ''"
+      :placeholder="props.placeholder"
+      style="transition: all 0.2s ease-in-out"
+      @change="setQuickSearchContent"
+    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70 cursor-pointer" @click="handleQuickShow"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd" /></svg>
+  </label>
 </template>