rayyy-vue-table-components 1.3.0 → 1.3.1

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

@@ -10,39 +10,7 @@ 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 } from '../types/components.d';
-export type { BaseTableEmits } from '../types/components.d';
-export type { BaseTableInstance } from '../types/components.d';
-export type { BaseBtnProps } from '../types/components.d';
-export type { BaseBtnEmits } from '../types/components.d';
-export type { BaseBtnInstance } from '../types/components.d';
-export type { BaseDialogProps } from '../types/components.d';
-export type { BaseDialogEmits } from '../types/components.d';
-export type { BaseDialogInstance } from '../types/components.d';
-export type { BaseInputProps } from '../types/components.d';
-export type { BaseInputEmits } from '../types/components.d';
-export type { BaseInputInstance } from '../types/components.d';
-export type { SortTableProps } from '../types/components.d';
-export type { SortTableEmits } from '../types/components.d';
-export type { SortTableInstance } from '../types/components.d';
-export type { SearchBarProps } from '../types/components.d';
-export type { SearchBarEmits } from '../types/components.d';
-export type { SearchBarInstance } from '../types/components.d';
-export type { SearchBarSlots } from '../types/components.d';
-export type { TransferDialogProps } from '../types/components.d';
-export type { TransferDialogEmits } from '../types/components.d';
-export type { TransferDialogInstance } from '../types/components.d';
-export type { TransferItemProps } from '../types/components.d';
-export type { TransferItemEmits } from '../types/components.d';
-export type { TransferItemInstance } from '../types/components.d';
-export type { MainPanelProps } from '../types/components.d';
-export type { MainPanelEmits } from '../types/components.d';
-export type { MainPanelInstance } from '../types/components.d';
-export type { FunctionHeaderProps } from '../types/components.d';
-export type { FunctionHeaderEmits } from '../types/components.d';
-export type { FunctionHeaderInstance } from '../types/components.d';
-export type { PluginOptions } from '../types/components.d';
-export type { VueTableComponentsPlugin } from '../types/components.d';
+export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, BaseInputProps, BaseInputEmits, BaseInputInstance, SortTableProps, SortTableEmits, SortTableInstance, 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 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';

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

@@ -14,7 +14,11 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "click:back": () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onClick:back"?: (() => any) | undefined;
+}>, {
     title: string;
     showBack: boolean | string | object;
     depth: number;

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

@@ -23,10 +23,12 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     search: (data: string | null) => any;
+    "click:back": () => any;
     updatePage: (page: number) => any;
     updatePageSize: (limit: number) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSearch?: ((data: string | null) => any) | undefined;
+    "onClick:back"?: (() => any) | undefined;
     onUpdatePage?: ((page: number) => any) | undefined;
     onUpdatePageSize?: ((limit: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -346,6 +346,8 @@ export interface SearchableListPanelEmits {
   (e: 'updatePage', page: number): boolean
   /** 更新頁面大小事件 */
   (e: 'updatePageSize', limit: number): boolean
+  /** 返回按鈕點擊事件 */
+  (e: 'click:back'): void
 }
 
 /** SearchableListPanel 組件實例類型 */
@@ -413,7 +415,7 @@ export interface MainPanelProps {
 /** MainPanel 組件 Emits 類型 */
 export interface MainPanelEmits {
   /** 返回按鈕點擊事件 */
-  (e: 'back', payload: { path?: string; [key: string]: unknown }): void
+  (e: 'click:back'): void
 }
 
 /** MainPanel 組件實例類型 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -64,7 +64,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/your-username/vue-table-components.git"
+    "url": ""
   },
   "scripts": {
     "dev": "vite",

package/src/components/index.ts

@@ -13,39 +13,57 @@ export { default as MainPanel } from './layout/MainPanel.vue'
 export { default as SearchableListPanel } from './layout/SearchableListPanel.vue'
 
 // 導出組件類型
-export type { BaseTableProps } from '../types/components.d'
-export type { BaseTableEmits } from '../types/components.d'
-export type { BaseTableInstance } from '../types/components.d'
-export type { BaseBtnProps } from '../types/components.d'
-export type { BaseBtnEmits } from '../types/components.d'
-export type { BaseBtnInstance } from '../types/components.d'
-export type { BaseDialogProps } from '../types/components.d'
-export type { BaseDialogEmits } from '../types/components.d'
-export type { BaseDialogInstance } from '../types/components.d'
-export type { BaseInputProps } from '../types/components.d'
-export type { BaseInputEmits } from '../types/components.d'
-export type { BaseInputInstance } from '../types/components.d'
-export type { SortTableProps } from '../types/components.d'
-export type { SortTableEmits } from '../types/components.d'
-export type { SortTableInstance } from '../types/components.d'
-export type { SearchBarProps } from '../types/components.d'
-export type { SearchBarEmits } from '../types/components.d'
-export type { SearchBarInstance } from '../types/components.d'
-export type { SearchBarSlots } from '../types/components.d'
-export type { TransferDialogProps } from '../types/components.d'
-export type { TransferDialogEmits } from '../types/components.d'
-export type { TransferDialogInstance } from '../types/components.d'
-export type { TransferItemProps } from '../types/components.d'
-export type { TransferItemEmits } from '../types/components.d'
-export type { TransferItemInstance } from '../types/components.d'
-export type { MainPanelProps } from '../types/components.d'
-export type { MainPanelEmits } from '../types/components.d'
-export type { MainPanelInstance } from '../types/components.d'
-export type { FunctionHeaderProps } from '../types/components.d'
-export type { FunctionHeaderEmits } from '../types/components.d'
-export type { FunctionHeaderInstance } from '../types/components.d'
-export type { PluginOptions } from '../types/components.d'
-export type { VueTableComponentsPlugin } from '../types/components.d'
+export type {
+  // BaseTable 組件類型
+  BaseTableProps,
+  BaseTableEmits,
+  BaseTableInstance,
+  // BaseBtn 組件類型
+  BaseBtnProps,
+  BaseBtnEmits,
+  BaseBtnInstance,
+  // BaseDialog 組件類型
+  BaseDialogProps,
+  BaseDialogEmits,
+  BaseDialogInstance,
+  // BaseInput 組件類型
+  BaseInputProps,
+  BaseInputEmits,
+  BaseInputInstance,
+  // SortTable 組件類型
+  SortTableProps,
+  SortTableEmits,
+  SortTableInstance,
+  // SearchBar 組件類型
+  SearchBarProps,
+  SearchBarEmits,
+  SearchBarInstance,
+  SearchBarSlots,
+  // TransferDialog 組件類型
+  TransferDialogProps,
+  TransferDialogEmits,
+  TransferDialogInstance,
+  // TransferItem 組件類型
+  TransferItemProps,
+  TransferItemEmits,
+  TransferItemInstance,
+  // MainPanel 組件類型
+  MainPanelProps,
+  MainPanelEmits,
+  MainPanelInstance,
+  // SearchableListPanel 組件類型
+  SearchableListPanelProps,
+  SearchableListPanelEmits,
+  SearchableListPanelInstance,
+  SearchableListPanelSlots,
+  // FunctionHeader 組件類型
+  FunctionHeaderProps,
+  FunctionHeaderEmits,
+  FunctionHeaderInstance,
+  // 插件類型
+  PluginOptions,
+  VueTableComponentsPlugin
+} from '../types/components.d'
 
 // 重新導出組件定義類型
 export type { default as BaseTableType } from './tables/BaseTable.vue'

package/src/components/layout/DetailLayout.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { MainPanel, BaseBtn } from '@/components'
+
+defineProps<{
+  title: string
+  showBack?: boolean | string | object
+  isEditable: boolean
+  pageLoading?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:saveEdit', value: boolean): void
+  (e: 'update:cancelEdit'): void
+}>()
+
+const saveDetailEdit = () => {
+  emit('update:saveEdit', false)
+}
+const cancelDetailEdit = () => {
+  emit('update:cancelEdit')
+}
+</script>
+
+<template>
+  <MainPanel :title="title" :show-back="showBack">
+    <template #main>
+      <div class="detail-container" v-loading="pageLoading">
+        <slot name="detailHeader"></slot>
+
+        <div class="content-wrapper">
+          <slot name="main"></slot>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="border-t pt-4 w-full flex items-center justify-end" v-if="isEditable">
+        <BaseBtn text="儲存" type="primary" is-fill @click="saveDetailEdit" />
+        <BaseBtn text="捨棄" type="primary" @click="cancelDetailEdit" />
+      </div>
+    </template>
+  </MainPanel>
+</template>
+
+<style lang="scss" scoped>
+.detail-container {
+  @apply h-full flex flex-col;
+  max-height: calc(100vh - 100px);
+  min-height: calc(100vh - 140px);
+}
+
+.content-wrapper {
+  @apply flex-1 overflow-y-auto;
+  max-height: calc(100vh - 100px);
+}
+</style>

package/src/components/layout/MainPanel.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { FunctionHeader } from '@/components'
 import { useRouter } from 'vue-router'
-import { ROUTES } from '@/router/constants.ts'
 
 const props = withDefaults(
   defineProps<{
@@ -15,14 +14,20 @@ const props = withDefaults(
     depth: 1,
   },
 )
-const router = useRouter()
+
+const emit = defineEmits<{
+  (e: 'click:back'): void
+}>()
+const onBackClick = () => {
+  emit('click:back')
+}
 </script>
 
 <template>
   <function-header
     :title="props.title"
     :showBack="props.showBack"
-    @back="router.push(ROUTES.DEMO)"
+    @back="onBackClick"
     :depth="props.depth"
   />
 

package/src/components/layout/SearchableListPanel.vue

@@ -19,6 +19,7 @@ const emits = defineEmits<{
   (e: 'search', data: string | null): void
   (e: 'updatePage', page: number): boolean
   (e: 'updatePageSize', limit: number): boolean
+  (e: 'click:back'): void
 }>()
 
 const showAllFeatures = computed(() => {
@@ -39,10 +40,13 @@ const updatePage = (page: number) => {
 const changePageSize = (limit: number) => {
   emits('updatePageSize', limit)
 }
+const onBackClick = () => {
+  emits('click:back')
+}
 </script>
 
 <template>
-  <main-panel :title="props.title" :show-back="showBack">
+  <main-panel :title="props.title" :show-back="showBack" @click:back="onBackClick">
     <template #searchBar>
       <search-bar
         :show-filter="showAllFeatures || showFilter"

package/src/components/tables/SortTable.vue

@@ -2,8 +2,8 @@
 import type { SortChangValue, TableColumn } from '@/types'
 import type { TableColumnCtx } from 'element-plus'
 import type { VNode } from 'vue'
-import BaseTable from './BaseTable.vue'
 import { Setting } from '@element-plus/icons-vue'
+import { BaseTable } from '@/components'
 
 defineProps<{
   data: T[]
@@ -13,7 +13,10 @@ defineProps<{
   loading?: boolean
   showSummary?: boolean
   showOverFlowTooltip?: boolean
-  summaryMethod?: (param: { columns: TableColumnCtx<Record<string, unknown>>[]; data: T[] }) => (string | VNode)[]
+  summaryMethod?: (param: {
+    columns: TableColumnCtx<Record<string, unknown>>[]
+    data: T[]
+  }) => (string | VNode)[]
   sortTableRowClassName?: (data: { row: T; rowIndex: number }) => string
 }>()
 
@@ -44,7 +47,10 @@ const handleColumnSortChange = (data: SortChangValue<T>) => {
   <div class="w-full mb-4">
     <div class="flex items-center h-12 bg-gray-200 px-1.5 rounded-t justify-end">
       <div class="flex items-center mr-4">
-        <div class="cursor-pointer text-blue-800 text-xl flex items-center justify-center hover:text-blue-600" @click="openTransferDialog">
+        <div
+          class="cursor-pointer text-blue-800 text-xl flex items-center justify-center hover:text-blue-600"
+          @click="openTransferDialog"
+        >
           <el-icon><Setting /></el-icon>
         </div>
       </div>
@@ -67,5 +73,4 @@ const handleColumnSortChange = (data: SortChangValue<T>) => {
   </div>
 </template>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>

package/src/components/tables/TitleTable.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import type { VNode } from 'vue'
+import type { TableColumnCtx } from 'element-plus'
+import type { TableColumn } from 'src/types'
+import { BaseTable, BaseBtn } from '@/components'
+
+// 使用泛型 T 來定義數據類型
+defineProps<{
+  data: T[]
+  columns: TableColumn<T>[]
+  tableTitle?: string
+  showSelection?: boolean
+  loading?: boolean
+  showSummary?: boolean
+  showOverFlowTooltip?: boolean
+  summaryMethod?: (param: {
+    columns: TableColumnCtx<Record<string, unknown>>[]
+    data: T[]
+  }) => (string | VNode)[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'click:add'): void
+  (e: 'click:edit'): void
+  (e: 'click:delete'): void
+  (e: 'update:selectRow', value: T[]): void
+  (e: 'click:cell', column: TableColumn<T>, row: T): void
+}>()
+
+const addInvoiceDetail = () => {
+  emit('click:add')
+}
+const deleteSelectRow = () => {
+  emit('click:delete')
+}
+const handleSelectionChange = (selectList: T[]) => {
+  emit('update:selectRow', selectList)
+}
+const handleCellClick = (column: TableColumn<T>, row: T) => {
+  emit('click:cell', column, row)
+}
+</script>
+
+<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">
+        <slot name="tableSearch" />
+
+        <div class="flex items-center">
+          <BaseBtn text="新增" type="primary" @click="addInvoiceDetail" />
+          <BaseBtn text="刪除" type="primary" @click="deleteSelectRow" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格主體 -->
+    <base-table
+      v-loading="loading"
+      element-loading-text="數據加載中..."
+      :data="data"
+      :columns="columns"
+      :show-summary="showSummary"
+      :summary-method="summaryMethod"
+      :show-selection="showSelection"
+      :show-over-flow-tooltip="showOverFlowTooltip"
+      @selection-change="handleSelectionChange"
+      @cell-click="handleCellClick"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/src/types/components.d.ts

@@ -347,6 +347,8 @@ export interface SearchableListPanelEmits {
   (e: 'updatePage', page: number): boolean
   /** 更新頁面大小事件 */
   (e: 'updatePageSize', limit: number): boolean
+  /** 返回按鈕點擊事件 */
+  (e: 'click:back'): void
 }
 
 /** SearchableListPanel 組件實例類型 */
@@ -414,7 +416,7 @@ export interface MainPanelProps {
 /** MainPanel 組件 Emits 類型 */
 export interface MainPanelEmits {
   /** 返回按鈕點擊事件 */
-  (e: 'back', payload: { path?: string; [key: string]: unknown }): void
+  (e: 'click:back'): void
 }
 
 /** MainPanel 組件實例類型 */