rayyy-vue-table-components 1.2.35 → 1.2.37

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

@@ -1,8 +1,6 @@
 export { default as BaseTable } from './tables/BaseTable.vue';
 export { default as BaseBtn } from './items/BaseBtn.vue';
 export { default as BaseInput } from './form/BaseInput.vue';
-export { default as FilterBtn } from './items/FilterBtn.vue';
-export { default as FilterDrawer } from './items/FilterDrawer.vue';
 export { default as BaseDialog } from './items/BaseDialog.vue';
 export { default as BaseForm } from './form/BaseForm.vue';
 export { default as BaseMultipleInput } from './form/BaseMultipleInput.vue';
@@ -13,12 +11,10 @@ export { default as TransferItem } from './transfer/transferItem.vue';
 export { default as FunctionHeader } from './layout/FunctionHeader.vue';
 export { default as MainPanel } from './layout/MainPanel.vue';
 export { default as SearchableListPanel } from './layout/SearchableListPanel.vue';
-export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, BaseInputProps, BaseInputEmits, BaseInputInstance, FilterBtnProps, FilterBtnEmits, FilterBtnInstance, FilterDrawerProps, FilterDrawerEmits, FilterDrawerInstance, BaseFormProps, BaseFormEmits, BaseFormInstance, SortTableProps, SortTableEmits, SortTableInstance, SearchBarProps, SearchBarEmits, SearchBarInstance, TransferDialogProps, TransferDialogEmits, TransferDialogInstance, TransferItemProps, TransferItemEmits, TransferItemInstance, MainPanelProps, MainPanelEmits, MainPanelInstance, FunctionHeaderProps, FunctionHeaderEmits, FunctionHeaderInstance, PluginOptions, VueTableComponentsPlugin, } from '../types/components';
+export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, BaseInputProps, BaseInputEmits, BaseInputInstance, BaseFormProps, BaseFormEmits, BaseFormInstance, SortTableProps, SortTableEmits, SortTableInstance, SearchBarProps, SearchBarEmits, SearchBarInstance, SearchBarSlots, TransferDialogProps, TransferDialogEmits, TransferDialogInstance, TransferItemProps, TransferItemEmits, TransferItemInstance, MainPanelProps, MainPanelEmits, MainPanelInstance, FunctionHeaderProps, FunctionHeaderEmits, FunctionHeaderInstance, PluginOptions, VueTableComponentsPlugin, } from '../types/components';
 export type { default as BaseTableType } from './tables/BaseTable.vue';
 export type { default as BaseBtnType } from './items/BaseBtn.vue';
 export type { default as BaseInputType } from './form/BaseInput.vue';
-export type { default as FilterBtnType } from './items/FilterBtn.vue';
-export type { default as FilterDrawerType } from './items/FilterDrawer.vue';
 export type { default as BaseDialogType } from './items/BaseDialog.vue';
 export type { default as BaseFormType } from './form/BaseForm.vue';
 export type { default as SortTableType } from './tables/SortTable.vue';

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

@@ -8,7 +8,7 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         button?(_: {}): any;
-        filterBody?(_: {}): any;
+        customerFilter?(_: {}): any;
     };
     refs: {};
     rootEl: HTMLDivElement;

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

@@ -17,7 +17,7 @@ declare function __VLS_template(): {
         firstButton?(_: {}): any;
         customButton?(_: {}): any;
         lastButton?(_: {}): any;
-        filterDrawBody?(_: {}): any;
+        filterButton?(_: {}): any;
         main?(_: {}): any;
     };
     refs: {};

package/dist/src/index.d.ts

@@ -2,13 +2,12 @@ import { App } from 'vue';
 import { default as BaseTable } from './components/tables/BaseTable.vue';
 import { default as BaseBtn } from './components/items/BaseBtn.vue';
 import { default as BaseInput } from './components/form/BaseInput.vue';
-import { default as FilterBtn } from './components/items/FilterBtn.vue';
 import { default as BaseDialog } from './components/items/BaseDialog.vue';
 import { default as SortTable } from './components/tables/SortTable.vue';
 import { default as SearchBar } from './components/items/SearchBar.vue';
 export * from './types';
 export * from './utils/tableHelper';
-export { BaseTable, BaseBtn, BaseInput, FilterBtn, BaseDialog, SortTable, SearchBar };
+export { BaseTable, BaseBtn, BaseInput, BaseDialog, SortTable, SearchBar };
 export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, PluginOptions, VueTableComponentsPlugin, } from './types/components';
 export * from './components';
 export declare function install(app: App, options?: {

package/dist/src/router/constants.d.ts

@@ -8,7 +8,6 @@ export declare const ROUTES: {
     readonly BASE_TABLE: "/demo/base-table";
     readonly BASE_BTN: "/demo/base-btn";
     readonly BASE_INPUT: "/demo/base-input";
-    readonly FILTER_BTN: "/demo/filter-btn";
     readonly BASE_DIALOG: "/demo/base-dialog";
     readonly BASE_FORM: "/demo/base-form";
     readonly SORT_TABLE: "/demo/sort-table";
@@ -28,7 +27,6 @@ export declare const ROUTE_NAMES: {
     readonly BASE_TABLE: "BaseTable";
     readonly BASE_BTN: "BaseBtn";
     readonly BASE_INPUT: "BaseInput";
-    readonly FILTER_BTN: "FilterBtn";
     readonly BASE_DIALOG: "BaseDialog";
     readonly BASE_FORM: "BaseForm";
     readonly SORT_TABLE: "SortTable";

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

@@ -138,59 +138,6 @@ export interface BaseBtnInstance {
   $emit: BaseBtnEmits
 }
 
-// ==================== FilterBtn 組件類型 ====================
-
-/** FilterBtn 組件 Props 類型 */
-export interface FilterBtnProps {
-  /** 徽章數值 */
-  badgeValue?: number
-  /** 抽屜大小，預設為 '50%' */
-  drawerSize?: string
-}
-
-/** FilterBtn 組件 Emits 類型 */
-export interface FilterBtnEmits {
-  /** 重置事件 */
-  (e: 'update:reset'): void
-  /** 提交事件 */
-  (e: 'update:submit'): void
-}
-
-/** FilterBtn 組件實例類型 */
-export interface FilterBtnInstance {
-  /** 組件 Props */
-  $props: FilterBtnProps
-  /** 組件 Emits */
-  $emit: FilterBtnEmits
-}
-
-// ==================== FilterDrawer 組件類型 ====================
-
-/** FilterDrawer 組件 Props 類型 */
-export interface FilterDrawerProps {
-  /** 是否顯示抽屜 */
-  modelValue: boolean
-  /** 抽屜大小，預設為 '50%' */
-  drawerSize?: string
-}
-
-/** FilterDrawer 組件 Emits 類型 */
-export interface FilterDrawerEmits {
-  /** 更新 modelValue */
-  (e: 'update:modelValue', value: boolean): void
-  /** 重置事件 */
-  (e: 'reset'): void
-  /** 提交事件 */
-  (e: 'submit'): void
-}
-
-/** FilterDrawer 組件實例類型 */
-export interface FilterDrawerInstance {
-  /** 組件 Props */
-  $props: FilterDrawerProps
-  /** 組件 Emits */
-  $emit: FilterDrawerEmits
-}
 
 // ==================== 對話框相關組件類型 ====================
 
@@ -402,6 +349,14 @@ export interface SearchBarInstance {
   $emit: SearchBarEmits
 }
 
+/** SearchBar 組件 Slots 類型 */
+export interface SearchBarSlots {
+  /** 按鈕 slot */
+  button: () => VNode[]
+  /** 自定義篩選 slot */
+  customerFilter: () => VNode[]
+}
+
 // ==================== SearchableListPanel 組件類型 ====================
 
 /** SearchableListPanel 組件 Props 類型 */
@@ -454,8 +409,8 @@ export interface SearchableListPanelSlots {
   customButton: () => VNode[]
   /** 最後一個按鈕 slot */
   lastButton: () => VNode[]
-  /** 篩選抽屜內容 slot */
-  filterDrawBody: () => VNode[]
+  /** 篩選按鈕 slot */
+  filterButton: () => VNode[]
   /** 主要內容 slot */
   main: () => VNode[]
 }
@@ -602,37 +557,6 @@ export declare const BaseBtn: DefineComponent<
   install: (app: App) => void
 }
 
-/** FilterBtn 組件定義 */
-export declare const FilterBtn: DefineComponent<
-  FilterBtnProps,
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  FilterBtnEmits
-> & {
-  /** 安裝方法 */
-  install: (app: App) => void
-}
-
-/** FilterDrawer 組件定義 */
-export declare const FilterDrawer: DefineComponent<
-  FilterDrawerProps,
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  FilterDrawerEmits
-> & {
-  /** 安裝方法 */
-  install: (app: App) => void
-}
 
 /** BaseDialog 組件定義 */
 export declare const BaseDialog: DefineComponent<
@@ -722,7 +646,7 @@ export declare const SearchBar: DefineComponent<
   {},
   {},
   {},
-  {},
+  SearchBarSlots,
   {},
   SearchBarEmits
 > & {
@@ -814,10 +738,6 @@ export interface VueTableComponentsPlugin {
   SortTable: typeof SortTable
   /** BaseBtn 組件 */
   BaseBtn: typeof BaseBtn
-  /** FilterBtn 組件 */
-  FilterBtn: typeof FilterBtn
-  /** FilterDrawer 組件 */
-  FilterDrawer: typeof FilterDrawer
   /** BaseDialog 組件 */
   BaseDialog: typeof BaseDialog
   /** TransferDialog 組件 */
@@ -847,8 +767,6 @@ declare module '@vue/runtime-core' {
     BaseTable: typeof BaseTable
     SortTable: typeof SortTable
     BaseBtn: typeof BaseBtn
-    FilterBtn: typeof FilterBtn
-    FilterDrawer: typeof FilterDrawer
     BaseDialog: typeof BaseDialog
     TransferDialog: typeof TransferDialog
     BaseInput: typeof BaseInput

package/package.json

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

package/src/assets/styles/_components.scss

@@ -18,52 +18,6 @@
   }
 }
 
-// ==================== FilterBtn 組件樣式 ====================
-.filter-btn {
-  @apply text-sky-500;
-
-  p {
-    @apply text-primary-80 ml-2 text-base font-bold;
-  }
-
-  i {
-    @apply text-xl;
-  }
-
-  .filter-icon {
-    @apply w-5 h-5 stroke-primary;
-  }
-
-
-
-  &:hover {
-    @apply text-white bg-sky-500;
-
-    p {
-      @apply text-white;
-    }
-
-    .filter-icon {
-      @apply stroke-white;
-    }
-
-    .fill-icon path {
-      @apply stroke-white ;
-    }
-  }
-
-  &:disabled {
-    @apply bg-white opacity-50;
-
-    &:hover {
-      @apply bg-white;
-
-      p {
-        @apply text-black/20;
-      }
-    }
-  }
-}
 
 // ==================== TransferItem 組件樣式 ====================
 .transfer-item-wrapper {
@@ -102,14 +56,6 @@
     @apply cursor-pointer text-primary-dark text-xl flex items-center justify-center;
   }
 
-  // FilterBtn 文字和圖標樣式
-  .filter-btn-text {
-    @apply text-primary-80 ml-2 text-base font-bold;
-  }
-
-  .filter-btn-icon {
-    @apply text-xl;
-  }
 
   // TransferDialog
   .transfer-sort-wrapper {

package/src/components/index.ts

@@ -2,8 +2,6 @@
 export { default as BaseTable } from './tables/BaseTable.vue'
 export { default as BaseBtn } from './items/BaseBtn.vue'
 export { default as BaseInput } from './form/BaseInput.vue'
-export { default as FilterBtn } from './items/FilterBtn.vue'
-export { default as FilterDrawer } from './items/FilterDrawer.vue'
 export { default as BaseDialog } from './items/BaseDialog.vue'
 export { default as BaseForm } from './form/BaseForm.vue'
 export { default as BaseMultipleInput } from './form/BaseMultipleInput.vue'
@@ -29,12 +27,6 @@ export type {
   BaseInputProps,
   BaseInputEmits,
   BaseInputInstance,
-  FilterBtnProps,
-  FilterBtnEmits,
-  FilterBtnInstance,
-  FilterDrawerProps,
-  FilterDrawerEmits,
-  FilterDrawerInstance,
   BaseFormProps,
   BaseFormEmits,
   BaseFormInstance,
@@ -44,6 +36,7 @@ export type {
   SearchBarProps,
   SearchBarEmits,
   SearchBarInstance,
+  SearchBarSlots,
   TransferDialogProps,
   TransferDialogEmits,
   TransferDialogInstance,
@@ -64,8 +57,6 @@ export type {
 export type { default as BaseTableType } from './tables/BaseTable.vue'
 export type { default as BaseBtnType } from './items/BaseBtn.vue'
 export type { default as BaseInputType } from './form/BaseInput.vue'
-export type { default as FilterBtnType } from './items/FilterBtn.vue'
-export type { default as FilterDrawerType } from './items/FilterDrawer.vue'
 export type { default as BaseDialogType } from './items/BaseDialog.vue'
 export type { default as BaseFormType } from './form/BaseForm.vue'
 export type { default as SortTableType } from './tables/SortTable.vue'

package/src/components/items/SearchBar.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { ref, useAttrs } from 'vue'
 import BaseInput from '../form/BaseInput.vue'
-import FilterBtn from './FilterBtn.vue'
 
 defineProps<{
   showFilter?: boolean
@@ -48,16 +47,7 @@ const resetFilter = () => {
           class="search-input_inner"
         />
       </div>
-
-      <div class="filter-customer" v-if="showFilter">
-        <filter-btn
-          :badge-value="badgeValue"
-          @update:reset="resetFilter"
-          :drawer-size="filterDrawerSize"
-        >
-          <slot name="filterBody" />
-        </filter-btn>
-      </div>
+      <slot name="customerFilter"> </slot>
     </div>
   </div>
 </template>
@@ -67,10 +57,6 @@ const resetFilter = () => {
   @apply flex-wrap;
 }
 
-.filter-customer {
-  @apply flex ml-0.5;
-}
-
 .search-input {
   @apply w-64;
 

package/src/components/layout/SearchableListPanel.vue

@@ -66,8 +66,8 @@ const changePageSize = (limit: number) => {
           <slot name="customButton" v-if="showAllFeatures || showEdit"> </slot>
           <slot name="lastButton"></slot>
         </template>
-        <template #filterBody>
-          <slot name="filterDrawBody"></slot>
+        <template #customerFilter>
+          <slot name="filterButton"></slot>
         </template>
       </search-bar>
     </template>

package/src/types/components.d.ts

@@ -139,59 +139,6 @@ export interface BaseBtnInstance {
   $emit: BaseBtnEmits
 }
 
-// ==================== FilterBtn 組件類型 ====================
-
-/** FilterBtn 組件 Props 類型 */
-export interface FilterBtnProps {
-  /** 徽章數值 */
-  badgeValue?: number
-  /** 抽屜大小，預設為 '50%' */
-  drawerSize?: string
-}
-
-/** FilterBtn 組件 Emits 類型 */
-export interface FilterBtnEmits {
-  /** 重置事件 */
-  (e: 'update:reset'): void
-  /** 提交事件 */
-  (e: 'update:submit'): void
-}
-
-/** FilterBtn 組件實例類型 */
-export interface FilterBtnInstance {
-  /** 組件 Props */
-  $props: FilterBtnProps
-  /** 組件 Emits */
-  $emit: FilterBtnEmits
-}
-
-// ==================== FilterDrawer 組件類型 ====================
-
-/** FilterDrawer 組件 Props 類型 */
-export interface FilterDrawerProps {
-  /** 是否顯示抽屜 */
-  modelValue: boolean
-  /** 抽屜大小，預設為 '50%' */
-  drawerSize?: string
-}
-
-/** FilterDrawer 組件 Emits 類型 */
-export interface FilterDrawerEmits {
-  /** 更新 modelValue */
-  (e: 'update:modelValue', value: boolean): void
-  /** 重置事件 */
-  (e: 'reset'): void
-  /** 提交事件 */
-  (e: 'submit'): void
-}
-
-/** FilterDrawer 組件實例類型 */
-export interface FilterDrawerInstance {
-  /** 組件 Props */
-  $props: FilterDrawerProps
-  /** 組件 Emits */
-  $emit: FilterDrawerEmits
-}
 
 // ==================== 對話框相關組件類型 ====================
 
@@ -403,6 +350,14 @@ export interface SearchBarInstance {
   $emit: SearchBarEmits
 }
 
+/** SearchBar 組件 Slots 類型 */
+export interface SearchBarSlots {
+  /** 按鈕 slot */
+  button: () => VNode[]
+  /** 自定義篩選 slot */
+  customerFilter: () => VNode[]
+}
+
 // ==================== SearchableListPanel 組件類型 ====================
 
 /** SearchableListPanel 組件 Props 類型 */
@@ -455,8 +410,8 @@ export interface SearchableListPanelSlots {
   customButton: () => VNode[]
   /** 最後一個按鈕 slot */
   lastButton: () => VNode[]
-  /** 篩選抽屜內容 slot */
-  filterDrawBody: () => VNode[]
+  /** 篩選按鈕 slot */
+  filterButton: () => VNode[]
   /** 主要內容 slot */
   main: () => VNode[]
 }
@@ -603,37 +558,6 @@ export declare const BaseBtn: DefineComponent<
   install: (app: App) => void
 }
 
-/** FilterBtn 組件定義 */
-export declare const FilterBtn: DefineComponent<
-  FilterBtnProps,
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  FilterBtnEmits
-> & {
-  /** 安裝方法 */
-  install: (app: App) => void
-}
-
-/** FilterDrawer 組件定義 */
-export declare const FilterDrawer: DefineComponent<
-  FilterDrawerProps,
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  FilterDrawerEmits
-> & {
-  /** 安裝方法 */
-  install: (app: App) => void
-}
 
 /** BaseDialog 組件定義 */
 export declare const BaseDialog: DefineComponent<
@@ -723,7 +647,7 @@ export declare const SearchBar: DefineComponent<
   {},
   {},
   {},
-  {},
+  SearchBarSlots,
   {},
   SearchBarEmits
 > & {
@@ -815,10 +739,6 @@ export interface VueTableComponentsPlugin {
   SortTable: typeof SortTable
   /** BaseBtn 組件 */
   BaseBtn: typeof BaseBtn
-  /** FilterBtn 組件 */
-  FilterBtn: typeof FilterBtn
-  /** FilterDrawer 組件 */
-  FilterDrawer: typeof FilterDrawer
   /** BaseDialog 組件 */
   BaseDialog: typeof BaseDialog
   /** TransferDialog 組件 */
@@ -848,8 +768,6 @@ declare module '@vue/runtime-core' {
     BaseTable: typeof BaseTable
     SortTable: typeof SortTable
     BaseBtn: typeof BaseBtn
-    FilterBtn: typeof FilterBtn
-    FilterDrawer: typeof FilterDrawer
     BaseDialog: typeof BaseDialog
     TransferDialog: typeof TransferDialog
     BaseInput: typeof BaseInput

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

@@ -1,31 +0,0 @@
-type __VLS_Props = {
-    badgeValue?: number;
-    drawerSize?: string;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        'fill-filter'?(_: {}): any;
-        'filter-icon'?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:reset": () => any;
-    "update:submit": () => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:reset"?: (() => any) | undefined;
-    "onUpdate:submit"?: (() => any) | undefined;
-}>, {
-    drawerSize: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,31 +0,0 @@
-type __VLS_Props = {
-    modelValue: boolean;
-    drawerSize?: string;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    reset: () => any;
-    submit: () => any;
-    "update:modelValue": (value: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onReset?: (() => any) | undefined;
-    onSubmit?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {
-    drawerSize: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/src/views/demo/FilterBtnDemo.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
-export default _default;

package/src/components/items/FilterBtn.vue

@@ -1,70 +0,0 @@
-<script lang="ts" setup>
-import { ref, useAttrs } from 'vue'
-import { BaseBtn } from '@/components'
-import { Filter } from '@element-plus/icons-vue'
-import FilterDrawer from './FilterDrawer.vue'
-
-withDefaults(
-  defineProps<{
-    badgeValue?: number
-    drawerSize?: string
-  }>(),
-  {
-    drawerSize: '50%',
-  },
-)
-
-// 獲取所有非 props 屬性
-const attrs = useAttrs()
-
-const showDrawer = ref(false)
-
-function onClickBtn() {
-  showDrawer.value = !showDrawer.value
-}
-
-const emit = defineEmits<{
-  (e: 'update:reset'): void
-  (e: 'update:submit'): void
-}>()
-
-const resetValue = () => {
-  emit('update:reset')
-}
-
-const submitFilter = () => {
-  emit('update:submit')
-}
-</script>
-
-<template>
-  <base-btn v-bind="attrs" type="primary" class="filter-btn" @click="onClickBtn">
-    <el-badge
-      :value="badgeValue"
-      class="!flex justify-center items-center"
-      type="primary"
-      v-if="badgeValue && badgeValue > 0"
-    >
-      <slot name="fill-filter">
-        <el-icon class="filter-icon fill-icon">
-          <Filter />
-        </el-icon>
-      </slot>
-    </el-badge>
-    <slot name="filter-icon" v-else>
-      <el-icon class="filter-icon">
-        <Filter />
-      </el-icon>
-    </slot>
-  </base-btn>
-  <FilterDrawer
-    v-model="showDrawer"
-    :drawerSize="drawerSize"
-    @reset="resetValue"
-    @submit="submitFilter"
-  >
-    <slot></slot>
-  </FilterDrawer>
-</template>
-
-<style scoped lang="scss"></style>