rayyy-vue-table-components 1.3.4 → 1.3.6

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

@@ -11,7 +11,9 @@ 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, SortTableProps, SortTableEmits, SortTableInstance, TitleTableProps, TitleTableEmits, TitleTableInstance, SearchBarProps, SearchBarEmits, SearchBarInstance, SearchBarSlots, TransferDialogProps, TransferDialogEmits, TransferDialogInstance, TransferItemProps, TransferItemEmits, TransferItemInstance, MainPanelProps, MainPanelEmits, MainPanelInstance, SearchableListPanelProps, SearchableListPanelEmits, SearchableListPanelInstance, SearchableListPanelSlots, FunctionHeaderProps, FunctionHeaderEmits, FunctionHeaderInstance, PluginOptions, VueTableComponentsPlugin } from '../types/components.d';
+export { default as DetailLayout } from './layout/DetailLayout.vue';
+export { default as FilterLayout } from './layout/FilterLayout.vue';
+export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, BaseInputProps, BaseInputEmits, BaseInputInstance, SortTableProps, SortTableEmits, SortTableInstance, TitleTableProps, TitleTableEmits, TitleTableInstance, SearchBarProps, SearchBarEmits, SearchBarInstance, SearchBarSlots, TransferDialogProps, TransferDialogEmits, TransferDialogInstance, TransferItemProps, TransferItemEmits, TransferItemInstance, MainPanelProps, MainPanelEmits, MainPanelInstance, SearchableListPanelProps, SearchableListPanelEmits, SearchableListPanelInstance, SearchableListPanelSlots, FunctionHeaderProps, FunctionHeaderEmits, FunctionHeaderInstance, DetailLayoutProps, DetailLayoutEmits, DetailLayoutInstance, FilterLayoutProps, FilterLayoutEmits, FilterLayoutInstance, PluginOptions, VueTableComponentsPlugin } from '../types/components.d';
 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';
@@ -25,3 +27,5 @@ export type { default as SearchableListPanelType } from './layout/SearchableList
 export type { default as BaseMultipleInputType } from './form/BaseMultipleInput.vue';
 export type { default as FunctionHeaderType } from './layout/FunctionHeader.vue';
 export type { default as MainPanelType } from './layout/MainPanel.vue';
+export type { default as DetailLayoutType } from './layout/DetailLayout.vue';
+export type { default as FilterLayoutType } from './layout/FilterLayout.vue';

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

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    title: string;
+    showBack?: boolean | string | object;
+    isEditable: boolean;
+    pageLoading?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        detailHeader?(_: {}): any;
+        main?(_: {}): 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:saveEdit": (value: boolean) => any;
+    "update:cancelEdit": () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:saveEdit"?: ((value: boolean) => any) | undefined;
+    "onUpdate:cancelEdit"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/layout/FilterLayout.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    mainTitle: string;
+    filterTitle: 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, {} & {
+    submitEmit: () => any;
+    resetEmit: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmitEmit?: (() => any) | undefined;
+    onResetEmit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/tables/TitleTable.vue.d.ts

@@ -12,7 +12,10 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
         data: T[];
         columns: TableColumn<T>[];
         tableTitle?: string;
+        propIsEditable?: boolean;
         showSelection?: boolean;
+        onlyDelete?: boolean;
+        showDelete?: boolean;
         loading?: boolean;
         showSummary?: boolean;
         showOverFlowTooltip?: boolean;

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

@@ -16,6 +16,8 @@ export declare const ROUTES: {
     readonly SEARCH_BAR: "/demo/search-bar";
     readonly FUNCTION_HEADER: "/demo/function-header";
     readonly MAIN_PANEL: "/demo/main-panel";
+    readonly DETAIL_LAYOUT: "/demo/detail-layout";
+    readonly FILTER_LAYOUT: "/demo/filter-layout";
     readonly NOT_FOUND: "/:catchAll(.*)";
 };
 export declare const ROUTE_NAMES: {
@@ -35,5 +37,7 @@ export declare const ROUTE_NAMES: {
     readonly SEARCH_BAR: "SearchBar";
     readonly FUNCTION_HEADER: "FunctionHeader";
     readonly MAIN_PANEL: "MainPanel";
+    readonly DETAIL_LAYOUT: "DetailLayout";
+    readonly FILTER_LAYOUT: "FilterLayout";
     readonly NOT_FOUND: "NotFoundPage";
 };

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

@@ -102,8 +102,14 @@ export interface TitleTableProps<T extends Record<string, unknown> = Record<stri
   columns: import('./index').TableColumn<T>[]
   /** 表格標題 */
   tableTitle?: string
+  /** 是否可編輯（顯示新增/刪除按鈕） */
+  propIsEditable?: boolean
   /** 是否顯示選擇列 */
   showSelection?: boolean
+  /** 是否只顯示刪除按鈕（隱藏新增按鈕） */
+  onlyDelete?: boolean
+  /** 是否顯示刪除按鈕 */
+  showDelete?: boolean
   /** 是否顯示加載狀態 */
   loading?: boolean
   /** 是否顯示匯總行 */
@@ -472,6 +478,62 @@ export interface MainPanelInstance {
   $emit: MainPanelEmits
 }
 
+// ==================== DetailLayout 組件類型 ====================
+
+/** DetailLayout 組件 Props 類型 */
+export interface DetailLayoutProps {
+  /** 標題 */
+  title: string
+  /** 是否顯示返回按鈕 */
+  showBack?: boolean | string | object
+  /** 是否可編輯 */
+  isEditable: boolean
+  /** 頁面加載狀態 */
+  pageLoading?: boolean
+}
+
+/** DetailLayout 組件 Emits 類型 */
+export interface DetailLayoutEmits {
+  /** 保存編輯事件 */
+  (e: 'update:saveEdit', value: boolean): void
+  /** 取消編輯事件 */
+  (e: 'update:cancelEdit'): void
+}
+
+/** DetailLayout 組件實例類型 */
+export interface DetailLayoutInstance {
+  /** 組件 Props */
+  $props: DetailLayoutProps
+  /** 組件 Emits */
+  $emit: DetailLayoutEmits
+}
+
+// ==================== FilterLayout 組件類型 ====================
+
+/** FilterLayout 組件 Props 類型 */
+export interface FilterLayoutProps {
+  /** 主要標題 */
+  mainTitle: string
+  /** 篩選標題 */
+  filterTitle: string
+}
+
+/** FilterLayout 組件 Emits 類型 */
+export interface FilterLayoutEmits {
+  /** 提交篩選事件 */
+  (e: 'submitEmit'): void
+  /** 重置篩選事件 */
+  (e: 'resetEmit'): void
+}
+
+/** FilterLayout 組件實例類型 */
+export interface FilterLayoutInstance {
+  /** 組件 Props */
+  $props: FilterLayoutProps
+  /** 組件 Emits */
+  $emit: FilterLayoutEmits
+}
+
 // ==================== 轉移相關組件類型 ====================
 
 // ==================== TransferItem 組件類型 ====================
@@ -704,6 +766,38 @@ export declare const MainPanel: DefineComponent<
   install: (app: App) => void
 }
 
+/** DetailLayout 組件定義 */
+export declare const DetailLayout: DefineComponent<
+  DetailLayoutProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  DetailLayoutEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
+/** FilterLayout 組件定義 */
+export declare const FilterLayout: DefineComponent<
+  FilterLayoutProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  FilterLayoutEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
 /** TransferItem 組件定義 */
 export declare const TransferItem: DefineComponent<
   TransferItemProps<any>,
@@ -758,6 +852,10 @@ export interface VueTableComponentsPlugin {
   FunctionHeader: typeof FunctionHeader
   /** MainPanel 組件 */
   MainPanel: typeof MainPanel
+  /** DetailLayout 組件 */
+  DetailLayout: typeof DetailLayout
+  /** FilterLayout 組件 */
+  FilterLayout: typeof FilterLayout
   /** TransferItem 組件 */
   TransferItem: typeof TransferItem
 }
@@ -778,6 +876,8 @@ declare module '@vue/runtime-core' {
     SearchableListPanel: typeof SearchableListPanel
     FunctionHeader: typeof FunctionHeader
     MainPanel: typeof MainPanel
+    DetailLayout: typeof DetailLayout
+    FilterLayout: typeof FilterLayout
     TransferItem: typeof TransferItem
   }
 }

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

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

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

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

package/package.json

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

package/src/components/index.ts

@@ -12,6 +12,8 @@ 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 { default as DetailLayout } from './layout/DetailLayout.vue'
+export { default as FilterLayout } from './layout/FilterLayout.vue'
 
 // 導出組件類型
 export type {
@@ -65,6 +67,14 @@ export type {
   FunctionHeaderProps,
   FunctionHeaderEmits,
   FunctionHeaderInstance,
+  // DetailLayout 組件類型
+  DetailLayoutProps,
+  DetailLayoutEmits,
+  DetailLayoutInstance,
+  // FilterLayout 組件類型
+  FilterLayoutProps,
+  FilterLayoutEmits,
+  FilterLayoutInstance,
   // 插件類型
   PluginOptions,
   VueTableComponentsPlugin
@@ -84,3 +94,5 @@ export type { default as SearchableListPanelType } from './layout/SearchableList
 export type { default as BaseMultipleInputType } from './form/BaseMultipleInput.vue'
 export type { default as FunctionHeaderType } from './layout/FunctionHeader.vue'
 export type { default as MainPanelType } from './layout/MainPanel.vue'
+export type { default as DetailLayoutType } from './layout/DetailLayout.vue'
+export type { default as FilterLayoutType } from './layout/FilterLayout.vue'

package/src/components/layout/FilterLayout.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { MainPanel, BaseBtn } from '@/components'
+
+defineProps<{
+  mainTitle: string
+  filterTitle: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'submitEmit'): void
+  (e: 'resetEmit'): void
+}>()
+
+const doFilter = () => {
+  emit('submitEmit')
+}
+const resetFilter = () => {
+  emit('resetEmit')
+}
+</script>
+
+<template>
+  <main-panel :title="mainTitle">
+    <template #main>
+      <div class="filter-container">
+        <div class="filter-header">{{ filterTitle }}</div>
+
+        <slot></slot>
+      </div>
+    </template>
+    <template #footer>
+      <div class="submit-row">
+        <base-btn text="執行" is-fill type="primary" @click="doFilter" />
+        <base-btn text="重設" type="primary" @click="resetFilter" />
+      </div>
+    </template>
+  </main-panel>
+</template>
+
+<style scoped>
+.filter-container {
+  @apply w-full md:w-3/5;
+}
+
+.filter-header {
+  @apply px-4 py-2   font-bold  border-b text-lg;
+}
+
+.submit-row {
+  @apply flex items-center justify-end w-full;
+  @apply pt-2 border-t;
+}
+</style>

package/src/components/tables/TitleTable.vue

@@ -9,7 +9,10 @@ defineProps<{
   data: T[]
   columns: TableColumn<T>[]
   tableTitle?: string
+  propIsEditable?: boolean
   showSelection?: boolean
+  onlyDelete?: boolean
+  showDelete?: boolean
   loading?: boolean
   showSummary?: boolean
   showOverFlowTooltip?: boolean
@@ -44,15 +47,18 @@ const handleCellClick = (column: TableColumn<T>, row: T) => {
 <template>
   <div class="w-full mb-4">
     <!-- 表格標題區域：包含標題文本和操作按鈕 -->
-    <div class="flex items-center h-12 bg-gray-200 px-1.5 rounded-t justify-between" v-if="tableTitle">
-      <p class="font-bold text-20">{{ tableTitle }}</p>
+    <div
+      class="flex items-center h-12 bg-gray-200 px-1.5 rounded-t justify-between"
+      v-if="tableTitle"
+    >
+      <p class="font-bold text-xl">{{ tableTitle }}</p>
 
       <div class="flex items-center">
         <slot name="tableSearch" />
 
-        <div class="flex items-center">
-          <BaseBtn text="新增" type="primary" @click="addInvoiceDetail" />
-          <BaseBtn text="刪除" type="primary" @click="deleteSelectRow" />
+        <div class="flex items-center" v-if="propIsEditable">
+          <BaseBtn text="新增" type="primary" @click="addInvoiceDetail" v-if="!onlyDelete" />
+          <BaseBtn text="刪除" type="primary" @click="deleteSelectRow" v-if="showDelete" />
         </div>
       </div>
     </div>
@@ -65,7 +71,7 @@ const handleCellClick = (column: TableColumn<T>, row: T) => {
       :columns="columns"
       :show-summary="showSummary"
       :summary-method="summaryMethod"
-      :show-selection="showSelection"
+      :show-selection="propIsEditable || showSelection"
       :show-over-flow-tooltip="showOverFlowTooltip"
       @selection-change="handleSelectionChange"
       @cell-click="handleCellClick"

package/src/types/components.d.ts

@@ -103,8 +103,14 @@ export interface TitleTableProps<T extends Record<string, unknown> = Record<stri
   columns: import('./index').TableColumn<T>[]
   /** 表格標題 */
   tableTitle?: string
+  /** 是否可編輯（顯示新增/刪除按鈕） */
+  propIsEditable?: boolean
   /** 是否顯示選擇列 */
   showSelection?: boolean
+  /** 是否只顯示刪除按鈕（隱藏新增按鈕） */
+  onlyDelete?: boolean
+  /** 是否顯示刪除按鈕 */
+  showDelete?: boolean
   /** 是否顯示加載狀態 */
   loading?: boolean
   /** 是否顯示匯總行 */
@@ -473,6 +479,62 @@ export interface MainPanelInstance {
   $emit: MainPanelEmits
 }
 
+// ==================== DetailLayout 組件類型 ====================
+
+/** DetailLayout 組件 Props 類型 */
+export interface DetailLayoutProps {
+  /** 標題 */
+  title: string
+  /** 是否顯示返回按鈕 */
+  showBack?: boolean | string | object
+  /** 是否可編輯 */
+  isEditable: boolean
+  /** 頁面加載狀態 */
+  pageLoading?: boolean
+}
+
+/** DetailLayout 組件 Emits 類型 */
+export interface DetailLayoutEmits {
+  /** 保存編輯事件 */
+  (e: 'update:saveEdit', value: boolean): void
+  /** 取消編輯事件 */
+  (e: 'update:cancelEdit'): void
+}
+
+/** DetailLayout 組件實例類型 */
+export interface DetailLayoutInstance {
+  /** 組件 Props */
+  $props: DetailLayoutProps
+  /** 組件 Emits */
+  $emit: DetailLayoutEmits
+}
+
+// ==================== FilterLayout 組件類型 ====================
+
+/** FilterLayout 組件 Props 類型 */
+export interface FilterLayoutProps {
+  /** 主要標題 */
+  mainTitle: string
+  /** 篩選標題 */
+  filterTitle: string
+}
+
+/** FilterLayout 組件 Emits 類型 */
+export interface FilterLayoutEmits {
+  /** 提交篩選事件 */
+  (e: 'submitEmit'): void
+  /** 重置篩選事件 */
+  (e: 'resetEmit'): void
+}
+
+/** FilterLayout 組件實例類型 */
+export interface FilterLayoutInstance {
+  /** 組件 Props */
+  $props: FilterLayoutProps
+  /** 組件 Emits */
+  $emit: FilterLayoutEmits
+}
+
 // ==================== 轉移相關組件類型 ====================
 
 // ==================== TransferItem 組件類型 ====================
@@ -705,6 +767,38 @@ export declare const MainPanel: DefineComponent<
   install: (app: App) => void
 }
 
+/** DetailLayout 組件定義 */
+export declare const DetailLayout: DefineComponent<
+  DetailLayoutProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  DetailLayoutEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
+/** FilterLayout 組件定義 */
+export declare const FilterLayout: DefineComponent<
+  FilterLayoutProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  FilterLayoutEmits
+> & {
+  /** 安裝方法 */
+  install: (app: App) => void
+}
+
 /** TransferItem 組件定義 */
 export declare const TransferItem: DefineComponent<
   TransferItemProps<any>,
@@ -759,6 +853,10 @@ export interface VueTableComponentsPlugin {
   FunctionHeader: typeof FunctionHeader
   /** MainPanel 組件 */
   MainPanel: typeof MainPanel
+  /** DetailLayout 組件 */
+  DetailLayout: typeof DetailLayout
+  /** FilterLayout 組件 */
+  FilterLayout: typeof FilterLayout
   /** TransferItem 組件 */
   TransferItem: typeof TransferItem
 }
@@ -779,6 +877,8 @@ declare module '@vue/runtime-core' {
     SearchableListPanel: typeof SearchableListPanel
     FunctionHeader: typeof FunctionHeader
     MainPanel: typeof MainPanel
+    DetailLayout: typeof DetailLayout
+    FilterLayout: typeof FilterLayout
     TransferItem: typeof TransferItem
   }
 }