rayyy-vue-table-components 1.2.33 → 1.2.35

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

@@ -2,6 +2,7 @@ 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';
@@ -12,11 +13,12 @@ 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, 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 { 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/FilterDrawer.vue.d.ts

@@ -0,0 +1,31 @@
+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/types/components.d.ts

@@ -164,6 +164,34 @@ export interface FilterBtnInstance {
   $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
+}
+
 // ==================== 對話框相關組件類型 ====================
 
 // ==================== BaseDialog 組件類型 ====================
@@ -590,6 +618,22 @@ export declare const FilterBtn: DefineComponent<
   install: (app: App) => void
 }
 
+/** FilterDrawer 組件定義 */
+export declare const FilterDrawer: DefineComponent<
+  FilterDrawerProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  FilterDrawerEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
 /** BaseDialog 組件定義 */
 export declare const BaseDialog: DefineComponent<
   BaseDialogProps,
@@ -772,6 +816,8 @@ export interface VueTableComponentsPlugin {
   BaseBtn: typeof BaseBtn
   /** FilterBtn 組件 */
   FilterBtn: typeof FilterBtn
+  /** FilterDrawer 組件 */
+  FilterDrawer: typeof FilterDrawer
   /** BaseDialog 組件 */
   BaseDialog: typeof BaseDialog
   /** TransferDialog 組件 */
@@ -802,6 +848,7 @@ declare module '@vue/runtime-core' {
     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.33",
+  "version": "1.2.35",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",

package/src/components/index.ts

@@ -3,6 +3,7 @@ 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'
@@ -31,6 +32,9 @@ export type {
   FilterBtnProps,
   FilterBtnEmits,
   FilterBtnInstance,
+  FilterDrawerProps,
+  FilterDrawerEmits,
+  FilterDrawerInstance,
   BaseFormProps,
   BaseFormEmits,
   BaseFormInstance,
@@ -61,6 +65,7 @@ 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/FilterBtn.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { ref, useAttrs } from 'vue'
 import { BaseBtn } from '@/components'
-import { Search, Filter } from '@element-plus/icons-vue'
+import { Filter } from '@element-plus/icons-vue'
+import FilterDrawer from './FilterDrawer.vue'
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     badgeValue?: number
     drawerSize?: string
@@ -30,8 +31,9 @@ const emit = defineEmits<{
 const resetValue = () => {
   emit('update:reset')
 }
+
 const submitFilter = () => {
-  showDrawer.value = false
+  emit('update:submit')
 }
 </script>
 
@@ -55,29 +57,14 @@ const submitFilter = () => {
       </el-icon>
     </slot>
   </base-btn>
-  <el-drawer v-model="showDrawer" append-to-body>
-    <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>
-
+  <FilterDrawer
+    v-model="showDrawer"
+    :drawerSize="drawerSize"
+    @reset="resetValue"
+    @submit="submitFilter"
+  >
     <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>
+  </FilterDrawer>
 </template>
 
 <style scoped lang="scss"></style>

package/src/components/items/FilterDrawer.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { BaseBtn } from '@/components'
+import { Search } from '@element-plus/icons-vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    drawerSize?: string
+  }>(),
+  {
+    drawerSize: '50%',
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'reset'): void
+  (e: 'submit'): void
+}>()
+
+const showDrawer = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+})
+
+const resetValue = () => {
+  emit('reset')
+}
+
+const submitFilter = () => {
+  emit('submit')
+  showDrawer.value = false
+}
+</script>
+
+<template>
+  <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>

package/src/types/components.d.ts

@@ -165,6 +165,34 @@ export interface FilterBtnInstance {
   $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
+}
+
 // ==================== 對話框相關組件類型 ====================
 
 // ==================== BaseDialog 組件類型 ====================
@@ -591,6 +619,22 @@ export declare const FilterBtn: DefineComponent<
   install: (app: App) => void
 }
 
+/** FilterDrawer 組件定義 */
+export declare const FilterDrawer: DefineComponent<
+  FilterDrawerProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  FilterDrawerEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
 /** BaseDialog 組件定義 */
 export declare const BaseDialog: DefineComponent<
   BaseDialogProps,
@@ -773,6 +817,8 @@ export interface VueTableComponentsPlugin {
   BaseBtn: typeof BaseBtn
   /** FilterBtn 組件 */
   FilterBtn: typeof FilterBtn
+  /** FilterDrawer 組件 */
+  FilterDrawer: typeof FilterDrawer
   /** BaseDialog 組件 */
   BaseDialog: typeof BaseDialog
   /** TransferDialog 組件 */
@@ -803,6 +849,7 @@ declare module '@vue/runtime-core' {
     SortTable: typeof SortTable
     BaseBtn: typeof BaseBtn
     FilterBtn: typeof FilterBtn
+    FilterDrawer: typeof FilterDrawer
     BaseDialog: typeof BaseDialog
     TransferDialog: typeof TransferDialog
     BaseInput: typeof BaseInput