rayyy-vue-table-components 1.2.21 → 1.2.23

package/dist/src/components/items/FilterBtn.vue.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     badgeValue?: number;
+    drawerSize?: string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/src/components/items/SearchBar.vue.d.ts

@@ -1,8 +1,8 @@
 type __VLS_Props = {
     showFilter?: boolean;
     showSearch?: boolean;
-    fullInput?: boolean;
     badgeValue?: number;
+    filterDrawerSize?: string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/src/components/layout/SearchableListPanel.vue.d.ts

@@ -8,6 +8,7 @@ type __VLS_Props = {
     showFilter?: boolean;
     showDefaultSearch?: boolean;
     badgeValue?: number;
+    filterDrawerSize?: string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/src/types/components.d.ts

@@ -144,6 +144,8 @@ export interface BaseBtnInstance {
 export interface FilterBtnProps {
   /** 徽章數值 */
   badgeValue?: number
+  /** 抽屜大小 */
+  drawerSize?: string
 }
 
 /** FilterBtn 組件 Emits 類型 */
@@ -348,10 +350,10 @@ export interface SearchBarProps {
   showFilter?: boolean
   /** 是否顯示搜尋功能 */
   showSearch?: boolean
-  /** 是否為完整輸入框 */
-  fullInput?: boolean
   /** 徽章數值 */
   badgeValue?: number
+  /** 篩選抽屜大小 */
+  filterDrawerSize?: string
 }
 
 /** SearchBar 組件 Emits 類型 */
@@ -394,6 +396,8 @@ export interface SearchableListPanelProps {
   dataCy?: string
   /** 徽章數值 */
   badgeValue?: number
+  /** 篩選抽屜大小 */
+  filterDrawerSize?: string
 }
 
 /** SearchableListPanel 組件 Emits 類型 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "1.2.21",
+  "version": "1.2.23",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",

package/src/components/items/FilterBtn.vue

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
 import { computed, ref, useAttrs } from 'vue'
-import { useWindowSize } from '@vueuse/core'
 import { BaseBtn } from '@/components'
 import { Search, Filter } from '@element-plus/icons-vue'
 
-const { width } = useWindowSize()
-
-defineProps<{
+const props = defineProps<{
   badgeValue?: number
+  drawerSize?: string
 }>()
 
 // 獲取所有非 props 屬性
@@ -28,10 +26,8 @@ const resetValue = () => {
   emit('update:reset')
 }
 const computedDrawerSize = computed(() => {
-  if (width.value > 1200) {
-    return '30%'
-  } else if (width.value < 500) {
-    return '100%'
+  if (props.drawerSize) {
+    return props.drawerSize
   } else {
     return '50%'
   }

package/src/components/items/SearchBar.vue

@@ -6,8 +6,8 @@ import FilterBtn from './FilterBtn.vue'
 defineProps<{
   showFilter?: boolean
   showSearch?: boolean
-  fullInput?: boolean
   badgeValue?: number
+  filterDrawerSize?: string
 }>()
 
 const emits = defineEmits<{
@@ -39,7 +39,7 @@ const resetFilter = () => {
     </div>
 
     <div class="flex items-center justify-end">
-      <div v-if="showSearch" :class="{ 'w-full': fullInput, 'search-input': !fullInput }">
+      <div v-if="showSearch" class="search-input">
         <base-input
           v-model="keyword"
           placeholder="請輸入關鍵字搜尋列表"
@@ -50,7 +50,11 @@ const resetFilter = () => {
       </div>
 
       <div class="filter-customer" v-if="showFilter">
-        <filter-btn :badge-value="badgeValue" @update:reset="resetFilter">
+        <filter-btn
+          :badge-value="badgeValue"
+          @update:reset="resetFilter"
+          :drawer-size="filterDrawerSize"
+        >
           <slot name="filterBody" />
         </filter-btn>
       </div>

package/src/components/layout/SearchableListPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import { toRefs, computed } from 'vue'
 import type { Pager } from '@/types'
 import { MainPanel, SearchBar } from '@/components'
 
@@ -12,6 +12,7 @@ const props = defineProps<{
   showFilter?: boolean
   showDefaultSearch?: boolean
   badgeValue?: number
+  filterDrawerSize?: string
 }>()
 
 const { pagination } = toRefs(props)
@@ -22,6 +23,9 @@ const emits = defineEmits<{
   (e: 'updatePageSize', limit: number): boolean
 }>()
 
+const showAllFeatures = computed(() => {
+  return props.showDefaultSearch || (props.showSearch && props.showEdit && props.showFilter)
+})
 const search = (keyword: string) => {
   emits('search', keyword)
 }
@@ -43,15 +47,16 @@ const changePageSize = (limit: number) => {
   <main-panel :title="props.title" :show-back="showBack">
     <template #searchBar>
       <search-bar
-        :show-filter="showFilter"
-        :show-search="showSearch"
+        :show-filter="showAllFeatures || showFilter"
+        :show-search="showAllFeatures || showSearch"
         :badge-value="badgeValue"
+        :filterDrawerSize="filterDrawerSize"
         @keydown:enter="search"
         @update:clear="clearable"
       >
         <template #button>
           <slot name="firstButton"></slot>
-          <slot name="customButton"> </slot>
+          <slot name="customButton" v-if="showAllFeatures || showEdit"> </slot>
           <slot name="lastButton"></slot>
         </template>
         <template #filterBody>

package/src/types/components.d.ts

@@ -145,6 +145,8 @@ export interface BaseBtnInstance {
 export interface FilterBtnProps {
   /** 徽章數值 */
   badgeValue?: number
+  /** 抽屜大小 */
+  drawerSize?: string
 }
 
 /** FilterBtn 組件 Emits 類型 */
@@ -349,10 +351,10 @@ export interface SearchBarProps {
   showFilter?: boolean
   /** 是否顯示搜尋功能 */
   showSearch?: boolean
-  /** 是否為完整輸入框 */
-  fullInput?: boolean
   /** 徽章數值 */
   badgeValue?: number
+  /** 篩選抽屜大小 */
+  filterDrawerSize?: string
 }
 
 /** SearchBar 組件 Emits 類型 */
@@ -395,6 +397,8 @@ export interface SearchableListPanelProps {
   dataCy?: string
   /** 徽章數值 */
   badgeValue?: number
+  /** 篩選抽屜大小 */
+  filterDrawerSize?: string
 }
 
 /** SearchableListPanel 組件 Emits 類型 */