rayyy-vue-table-components 1.0.40 → 1.2.0

package/README.md

@@ -9,8 +9,6 @@
 - 🎯 完整的 TypeScript 類型支持
 - 📱 響應式設計
 - 🔧 高度可配置
-- 🎛️ 可拖拽的列配置對話框
-- 📋 支持表格列的顯示/隱藏和排序
 
 ## 安裝
 
@@ -22,18 +20,6 @@ yarn add rayyy-vue-table-components
 pnpm add rayyy-vue-table-components
 ```
 
-### 依賴說明
-
-如果您需要使用 `TransferDialog` 組件，還需要安裝 `vuedraggable` 依賴：
-
-```bash
-npm install vuedraggable
-# 或
-yarn add vuedraggable
-# 或
-pnpm add vuedraggable
-```
-
 ## 使用方法
 
 ### 全局註冊
@@ -66,21 +52,43 @@ app.use(VueTableComponents)
     <p>您確定要執行此操作嗎？</p>
   </BaseDialog>
   
+  <!-- TransferDialog 示例 -->
   <TransferDialog
     v-model="showTransferDialog"
-    :columns-value="columns"
+    :columns-value="tableColumns"
     transfer-title="配置表格列"
-    @update:submit="handleTransferSubmit"
-  />
+    @update:submit="handleColumnSubmit"
+  >
+    <template #list-container="{ columns, clickItemProp, handleItemEvents, handleMousedown }">
+      <draggable :list="columns" item-key="prop" delay="200">
+        <template #item="{ element, index }">
+          <transfer-item
+            :columns-value="element"
+            :columns-index="index"
+            :columns-len="columns.length"
+            :class="{
+              'transfer-active-bg': element.checkActive,
+              'transfer-active-border': clickItemProp === element.prop,
+            }"
+            @mousedown="handleMousedown(element.prop || '')"
+            @update:toTop="handleItemEvents.toTop(index)"
+            @update:toBottom="handleItemEvents.toBottom(index)"
+            @update:toPre="handleItemEvents.toPre(index)"
+            @update:toNext="handleItemEvents.toNext(index)"
+          />
+        </template>
+      </draggable>
+    </template>
+  </TransferDialog>
 </template>
 
 <script setup lang="ts">
 // 方式一：從主模塊導入
-import { BaseTable, BaseBtn, BaseDialog, TransferDialog } from 'rayyy-vue-table-components'
+import { BaseTable, BaseBtn, BaseDialog, TransferDialog, TransferItem } from 'rayyy-vue-table-components'
 import type { TableColumn, SortChangValue } from 'rayyy-vue-table-components'
 
 // 方式二：單獨導入組件
-import { BaseTable, TransferDialog } from 'rayyy-vue-table-components/components'
+import { BaseTable } from 'rayyy-vue-table-components/components'
 import type { TableColumn } from 'rayyy-vue-table-components/types'
 
 // 方式三：單獨導入類型
@@ -108,15 +116,17 @@ const columns: TableColumn<User>[] = [
 ]
 
 const loading = ref(false)
-const showTransferDialog = ref(false)
 
 const handleSortChange = (sortInfo: SortChangValue<User>) => {
   console.log('排序變更:', sortInfo)
 }
 
-const handleTransferSubmit = (columns: TableColumn<User>[]) => {
-  console.log('TransferDialog 提交的列配置:', columns)
-  // 這裡可以更新表格的列配置
+const showTransferDialog = ref(false)
+const tableColumns = ref(columns)
+
+const handleColumnSubmit = (newColumns: TableColumn<User>[]) => {
+  tableColumns.value = newColumns
+  showTransferDialog.value = false
 }
 </script>
 ```
@@ -302,15 +312,29 @@ const tableProps: BaseTableProps<User> = {
 |------|------|--------|------|
 | modelValue | `boolean` | - | 對話框顯示狀態 |
 | columnsValue | `TableColumn<T>[]` | `[]` | 表格列配置 |
-| transferTitle | `string` | `'列配置'` | 對話框標題 |
-| checkAll | `boolean` | `false` | 是否全選 |
+| transferTitle | `string` | - | 對話框標題 |
 
 ### TransferDialog Events
 
 | 事件名 | 參數 | 說明 |
 |--------|------|------|
-| update:submit | `columns: TableColumn<T>[]` | 提交列配置 |
 | update:modelValue | `value: boolean` | 對話框顯示狀態變更 |
+| update:submit | `columns: TableColumn<T>[]` | 提交列配置 |
+
+### TransferDialog Slots
+
+| 插槽名 | 參數 | 說明 |
+|--------|------|------|
+| list-container | `{ columns, clickItemProp, handleItemEvents, handleMousedown }` | 自定義列表容器，支持拖拽功能 |
+
+### TransferItem Props
+
+| 屬性 | 類型 | 默認值 | 說明 |
+|------|------|--------|------|
+| columnsValue | `TableColumn<T>` | - | 列配置對象 |
+| columnsIndex | `number` | - | 列索引 |
+| columnsLen | `number` | - | 總列數 |
+| dialogModalVisible | `boolean` | - | 對話框顯示狀態 |
 
 ### TableColumn 接口
 
@@ -331,6 +355,123 @@ interface TableColumn<T = Record<string, unknown>> {
 }
 ```
 
+## TransferDialog 使用指南
+
+TransferDialog 是一個靈活的表格列配置組件，支持自定義列表容器和拖拽功能。
+
+### 基本使用
+
+```vue
+<template>
+  <TransferDialog
+    v-model="showDialog"
+    :columns-value="columns"
+    transfer-title="配置表格列"
+    @update:submit="handleSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+import { TransferDialog } from 'rayyy-vue-table-components'
+
+const showDialog = ref(false)
+const columns = ref<TableColumn<User>[]>([
+  { prop: 'id', label: 'ID', checkActive: true },
+  { prop: 'name', label: '姓名', checkActive: true },
+  { prop: 'email', label: '郵箱', checkActive: false }
+])
+
+const handleSubmit = (newColumns: TableColumn<User>[]) => {
+  columns.value = newColumns
+  showDialog.value = false
+}
+</script>
+```
+
+### 自定義拖拽功能
+
+```vue
+<template>
+  <TransferDialog
+    v-model="showDialog"
+    :columns-value="columns"
+    transfer-title="配置表格列"
+    @update:submit="handleSubmit"
+  >
+    <template #list-container="{ columns, clickItemProp, handleItemEvents, handleMousedown }">
+      <!-- 使用 vuedraggable 實現拖拽 -->
+      <draggable :list="columns" item-key="prop" delay="200">
+        <template #item="{ element, index }">
+          <transfer-item
+            :columns-value="element"
+            :columns-index="index"
+            :columns-len="columns.length"
+            :class="{
+              'transfer-active-bg': element.checkActive,
+              'transfer-active-border': clickItemProp === element.prop,
+            }"
+            @mousedown="handleMousedown(element.prop || '')"
+            @update:toTop="handleItemEvents.toTop(index)"
+            @update:toBottom="handleItemEvents.toBottom(index)"
+            @update:toPre="handleItemEvents.toPre(index)"
+            @update:toNext="handleItemEvents.toNext(index)"
+          />
+        </template>
+      </draggable>
+    </template>
+  </TransferDialog>
+</template>
+
+<script setup lang="ts">
+import { TransferDialog, TransferItem } from 'rayyy-vue-table-components'
+import draggable from 'vuedraggable'
+</script>
+```
+
+### 靜態列表（無拖拽）
+
+```vue
+<template>
+  <TransferDialog
+    v-model="showDialog"
+    :columns-value="columns"
+    transfer-title="配置表格列"
+    @update:submit="handleSubmit"
+  >
+    <template #list-container="{ columns, clickItemProp, handleItemEvents, handleMousedown }">
+      <!-- 使用靜態列表 -->
+      <div class="transfer-list">
+        <template v-for="(element, index) in columns" :key="element.prop">
+          <transfer-item
+            :columns-value="element"
+            :columns-index="index"
+            :columns-len="columns.length"
+            :class="{
+              'transfer-active-bg': element.checkActive,
+              'transfer-active-border': clickItemProp === element.prop,
+            }"
+            @mousedown="handleMousedown(element.prop || '')"
+            @update:toTop="handleItemEvents.toTop(index)"
+            @update:toBottom="handleItemEvents.toBottom(index)"
+            @update:toPre="handleItemEvents.toPre(index)"
+            @update:toNext="handleItemEvents.toNext(index)"
+          />
+        </template>
+      </div>
+    </template>
+  </TransferDialog>
+</template>
+```
+
+### 功能特色
+
+- ✅ **靈活的列表容器**：通過 slot 自定義列表渲染方式
+- ✅ **可選的拖拽功能**：支持或不支持拖拽排序
+- ✅ **內建排序操作**：上移、下移、置頂、置底
+- ✅ **搜尋過濾**：按列名快速定位
+- ✅ **批量選擇**：全選/取消全選功能
+- ✅ **狀態保持**：記住列的顯示/隱藏狀態
+
 ## 開發
 
 ```bash
@@ -350,19 +491,6 @@ npm run test:unit
 npm run lint
 ```
 
-## 組件列表
-
-| 組件 | 說明 | 依賴 |
-|------|------|------|
-| BaseTable | 基礎表格組件 | - |
-| BaseBtn | 基礎按鈕組件 | - |
-| BaseInput | 基礎輸入組件 | - |
-| FilterBtn | 篩選按鈕組件 | - |
-| BaseDialog | 基礎對話框組件 | - |
-| SortTable | 排序表格組件 | - |
-| SearchBar | 搜尋欄組件 | - |
-| TransferDialog | 列配置對話框組件 | vuedraggable |
-
 ## 許可證
 
 MIT License