rayyy-vue-table-components 1.2.34 → 1.2.36

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

@@ -1,7 +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 BaseDialog } from './items/BaseDialog.vue';
 export { default as BaseForm } from './form/BaseForm.vue';
 export { default as BaseMultipleInput } from './form/BaseMultipleInput.vue';
@@ -12,11 +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, 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 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;
+        'customer-filter'?(_: {}): any;
     };
     refs: {};
     rootEl: HTMLDivElement;

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,31 +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
-}
 
 // ==================== 對話框相關組件類型 ====================
 
@@ -374,6 +349,14 @@ export interface SearchBarInstance {
   $emit: SearchBarEmits
 }
 
+/** SearchBar 組件 Slots 類型 */
+export interface SearchBarSlots {
+  /** 按鈕 slot */
+  button: () => VNode[]
+  /** 自定義篩選 slot */
+  'customer-filter': () => VNode[]
+}
+
 // ==================== SearchableListPanel 組件類型 ====================
 
 /** SearchableListPanel 組件 Props 類型 */
@@ -574,21 +557,6 @@ export declare const BaseBtn: DefineComponent<
   install: (app: App) => void
 }
 
-/** FilterBtn 組件定義 */
-export declare const FilterBtn: DefineComponent<
-  FilterBtnProps,
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  FilterBtnEmits
-> & {
-  /** 安裝方法 */
-  install: (app: App) => void
-}
 
 /** BaseDialog 組件定義 */
 export declare const BaseDialog: DefineComponent<
@@ -678,7 +646,7 @@ export declare const SearchBar: DefineComponent<
   {},
   {},
   {},
-  {},
+  SearchBarSlots,
   {},
   SearchBarEmits
 > & {
@@ -770,8 +738,6 @@ export interface VueTableComponentsPlugin {
   SortTable: typeof SortTable
   /** BaseBtn 組件 */
   BaseBtn: typeof BaseBtn
-  /** FilterBtn 組件 */
-  FilterBtn: typeof FilterBtn
   /** BaseDialog 組件 */
   BaseDialog: typeof BaseDialog
   /** TransferDialog 組件 */
@@ -801,7 +767,6 @@ declare module '@vue/runtime-core' {
     BaseTable: typeof BaseTable
     SortTable: typeof SortTable
     BaseBtn: typeof BaseBtn
-    FilterBtn: typeof FilterBtn
     BaseDialog: typeof BaseDialog
     TransferDialog: typeof TransferDialog
     BaseInput: typeof BaseInput

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "1.2.34",
+  "version": "1.2.36",
   "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,7 +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 BaseDialog } from './items/BaseDialog.vue'
 export { default as BaseForm } from './form/BaseForm.vue'
 export { default as BaseMultipleInput } from './form/BaseMultipleInput.vue'
@@ -28,9 +27,6 @@ export type {
   BaseInputProps,
   BaseInputEmits,
   BaseInputInstance,
-  FilterBtnProps,
-  FilterBtnEmits,
-  FilterBtnInstance,
   BaseFormProps,
   BaseFormEmits,
   BaseFormInstance,
@@ -40,6 +36,7 @@ export type {
   SearchBarProps,
   SearchBarEmits,
   SearchBarInstance,
+  SearchBarSlots,
   TransferDialogProps,
   TransferDialogEmits,
   TransferDialogInstance,
@@ -60,7 +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 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="customer-filter"> </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/types/components.d.ts

@@ -139,31 +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
-}
 
 // ==================== 對話框相關組件類型 ====================
 
@@ -375,6 +350,14 @@ export interface SearchBarInstance {
   $emit: SearchBarEmits
 }
 
+/** SearchBar 組件 Slots 類型 */
+export interface SearchBarSlots {
+  /** 按鈕 slot */
+  button: () => VNode[]
+  /** 自定義篩選 slot */
+  'customer-filter': () => VNode[]
+}
+
 // ==================== SearchableListPanel 組件類型 ====================
 
 /** SearchableListPanel 組件 Props 類型 */
@@ -575,21 +558,6 @@ export declare const BaseBtn: DefineComponent<
   install: (app: App) => void
 }
 
-/** FilterBtn 組件定義 */
-export declare const FilterBtn: DefineComponent<
-  FilterBtnProps,
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  FilterBtnEmits
-> & {
-  /** 安裝方法 */
-  install: (app: App) => void
-}
 
 /** BaseDialog 組件定義 */
 export declare const BaseDialog: DefineComponent<
@@ -679,7 +647,7 @@ export declare const SearchBar: DefineComponent<
   {},
   {},
   {},
-  {},
+  SearchBarSlots,
   {},
   SearchBarEmits
 > & {
@@ -771,8 +739,6 @@ export interface VueTableComponentsPlugin {
   SortTable: typeof SortTable
   /** BaseBtn 組件 */
   BaseBtn: typeof BaseBtn
-  /** FilterBtn 組件 */
-  FilterBtn: typeof FilterBtn
   /** BaseDialog 組件 */
   BaseDialog: typeof BaseDialog
   /** TransferDialog 組件 */
@@ -802,7 +768,6 @@ declare module '@vue/runtime-core' {
     BaseTable: typeof BaseTable
     SortTable: typeof SortTable
     BaseBtn: typeof BaseBtn
-    FilterBtn: typeof FilterBtn
     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/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,83 +0,0 @@
-<script lang="ts" setup>
-import { ref, useAttrs } from 'vue'
-import { BaseBtn } from '@/components'
-import { Search, Filter } from '@element-plus/icons-vue'
-
-const props = 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 = () => {
-  showDrawer.value = false
-}
-</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>
-  <el-drawer v-model="showDrawer" :size="drawerSize">
-    <template #header>
-      <div class="flex justify-center text-base text-black font-semibold">
-        <span>查詢條件</span>
-      </div>
-    </template>
-
-    <div class="flex justify-between items-center pb-5 font-semibold">
-      <div class="text-base text-black/70">篩選條件</div>
-      <div class="text-base text-primary cursor-pointer" @click="resetValue">重置</div>
-    </div>
-
-    <slot></slot>
-
-    <template #footer>
-      <base-btn type="primary" class="filter-btn" @click="submitFilter">
-        <el-icon>
-          <Search />
-        </el-icon>
-        <p>查詢</p>
-      </base-btn>
-    </template>
-  </el-drawer>
-</template>
-
-<style scoped lang="scss"></style>