rayyy-vue-table-components

<template>
  <BaseTable
    :data="tableData"
    :columns="columns"
    :loading="loading"
    @column-sort-change="handleSortChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BaseTable } from 'rayyy-vue-table-components'
import type { TableColumn, SortChangValue } from 'rayyy-vue-table-components'

interface User {
  id: number
  name: string
  email: string
  age: number
}

const loading = ref(false)
const tableData = ref<User[]>([
  { id: 1, name: '張三', email: 'zhangsan@example.com', age: 30 },
  { id: 2, name: '李四', email: 'lisi@example.com', age: 25 }
])

const columns: TableColumn<User>[] = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名', sortable: true },
  { prop: 'email', label: '郵箱' },
  { prop: 'age', label: '年齡', sortable: true }
]

const handleSortChange = (sortInfo: SortChangValue<User>) => {
  console.log('排序變更:', sortInfo)
}
</script>

<template>
  <BaseTable
    :data="tableData"
    :columns="columns"
    :show-selection="true"
    :show-summary="true"
    :summary-method="summaryMethod"
    @selection-change="handleSelectionChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BaseTable } from 'rayyy-vue-table-components'
import type { TableColumn } from 'rayyy-vue-table-components'

interface Product {
  id: number
  name: string
  price: number
  quantity: number
}

const tableData = ref<Product[]>([
  { id: 1, name: '產品A', price: 100, quantity: 5 },
  { id: 2, name: '產品B', price: 200, quantity: 3 }
])

const columns: TableColumn<Product>[] = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '產品名稱' },
  { prop: 'price', label: '單價' },
  { prop: 'quantity', label: '數量' }
]

const summaryMethod = ({ columns, data }: any) => {
  const sums: string[] = []
  columns.forEach((column: any, index: number) => {
    if (index === 0) {
      sums[index] = '總計'
    } else if (column.property === 'price') {
      const values = data.map((item: Product) => Number(item.price))
      sums[index] = values.reduce((prev, curr) => prev + curr, 0).toString()
    } else if (column.property === 'quantity') {
      const values = data.map((item: Product) => Number(item.quantity))
      sums[index] = values.reduce((prev, curr) => prev + curr, 0).toString()
    } else {
      sums[index] = ''
    }
  })
  return sums
}

const handleSelectionChange = (selection: Product[]) => {
  console.log('選中項:', selection)
}
</script>

<template>
  <BaseTable
    :data="tableData"
    :columns="columns"
    show-expand
    preserve-expanded
  >
    <template #expand="{ row }">
      <div class="m-4">
        <p>State: {{ row.state }}</p>
        <p>City: {{ row.city }}</p>
        <el-table :data="row.family" border>
          <el-table-column label="Name" prop="name" />
          <el-table-column label="State" prop="state" />
        </el-table>
      </div>
    </template>
  </BaseTable>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BaseTable } from 'rayyy-vue-table-components'
import type { TableColumn } from 'rayyy-vue-table-components'

interface Family {
  name: string
  state: string
}

interface UserWithFamily {
  id: number
  name: string
  state: string
  city: string
  family: Family[]
}

const tableData = ref<UserWithFamily[]>([
  {
    id: 1,
    name: '張三',
    state: '台北',
    city: '信義區',
    family: [
      { name: '張小明', state: '台北' },
      { name: '張小華', state: '新北' },
    ],
  },
])

const columns: TableColumn<UserWithFamily>[] = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名' },
  { prop: 'state', label: '縣市' },
  { prop: 'city', label: '區域' },
]
</script>

<template>
  <BaseTable
    :data="treeData"
    :columns="columns"
    row-key="id"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    :lazy="true"
    :load="loadChildren"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BaseTable } from 'rayyy-vue-table-components'
import type { TableColumn } from 'rayyy-vue-table-components'

interface TreeItem {
  id: string
  name: string
  department: string
  hasChildren?: boolean
  children?: TreeItem[]
}

const treeData = ref<TreeItem[]>([
  {
    id: 'dept-tech',
    name: '技術部',
    department: '技術部',
    children: [{ id: 'u-101', name: '林工程師', department: '技術部' }],
  },
  {
    id: 'dept-product',
    name: '產品部',
    department: '產品部',
    hasChildren: true,
  },
])

const columns: TableColumn<TreeItem>[] = [
  { prop: 'name', label: '名稱' },
  { prop: 'department', label: '部門' },
]

const loadChildren = (
  row: TreeItem,
  _treeNode: unknown,
  resolve: (data: TreeItem[]) => void,
) => {
  // 模擬 API
  setTimeout(() => {
    if (row.id === 'dept-product') {
      resolve([{ id: 'u-201', name: '蔡產品', department: '產品部' }])
      return
    }
    resolve([])
  }, 500)
}
</script>

<template>
  <SortTable
    :data="tableData"
    :columns="columns"
    :loading="loading"
    @sort-change="handleSortChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SortTable } from 'rayyy-vue-table-components'
import type { TableColumn, SortInfo } from 'rayyy-vue-table-components'

interface User {
  id: number
  name: string
  email: string
  age: number
  score: number
}

const loading = ref(false)
const tableData = ref<User[]>([
  { id: 1, name: '張三', email: 'zhangsan@example.com', age: 30, score: 85 },
  { id: 2, name: '李四', email: 'lisi@example.com', age: 25, score: 92 }
])

const columns: TableColumn<User>[] = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名', sortable: true },
  { prop: 'email', label: '郵箱' },
  { prop: 'age', label: '年齡', sortable: true },
  { prop: 'score', label: '分數', sortable: true }
]

const handleSortChange = (sortInfo: SortInfo<User>) => {
  console.log('排序變更:', sortInfo)
}
</script>

<template>
  <TitleTable
    title="用戶列表"
    :data="tableData"
    :columns="columns"
    :loading="loading"
    @add="handleAdd"
    @export="handleExport"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TitleTable } from 'rayyy-vue-table-components'
import type { TableColumn } from 'rayyy-vue-table-components'

interface User {
  id: number
  name: string
  email: string
}

const loading = ref(false)
const tableData = ref<User[]>([
  { id: 1, name: '張三', email: 'zhangsan@example.com' },
  { id: 2, name: '李四', email: 'lisi@example.com' }
])

const columns: TableColumn<User>[] = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名' },
  { prop: 'email', label: '郵箱' }
]

const handleAdd = () => {
  console.log('新增用戶')
}

const handleExport = () => {
  console.log('導出數據')
}
</script>

<template>
  <div class="space-y-4">
    <BaseInput
      v-model="inputValue"
      placeholder="請輸入內容"
      :clearable="true"
    />
    <BaseInput
      v-model="passwordValue"
      type="password"
      placeholder="請輸入密碼"
      show-password
    />
    <BaseInput
      v-model="emailValue"
      type="email"
      placeholder="請輸入郵箱"
      :validate="validateEmail"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BaseInput } from 'rayyy-vue-table-components'

const inputValue = ref('')
const passwordValue = ref('')
const emailValue = ref('')

const validateEmail = (value: string) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(value) || '請輸入有效的郵箱地址'
}
</script>

<template>
  <div class="button-group">
    <BaseBtn type="primary" @click="handleClick">主要按鈕</BaseBtn>
    <BaseBtn type="success" :loading="loading">成功按鈕</BaseBtn>
    <BaseBtn type="warning" plain>樸素按鈕</BaseBtn>
    <BaseBtn type="danger" disabled>禁用按鈕</BaseBtn>
    <BaseBtn type="info" link>文字按鈕</BaseBtn>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BaseBtn } from 'rayyy-vue-table-components'

const loading = ref(false)

const handleClick = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

<style scoped>
.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

<template>
  <SearchBar
    v-model="searchKeyword"
    placeholder="搜尋用戶、郵箱或電話..."
    :suggestions="suggestions"
    @search="handleSearch"
    @suggestion-click="handleSuggestionClick"
  />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { SearchBar } from 'rayyy-vue-table-components'

const searchKeyword = ref('')
const allSuggestions = ref([
  '張三', '李四', '王五', '趙六'
])

const suggestions = computed(() => {
  if (!searchKeyword.value) return []
  return allSuggestions.value.filter(item => 
    item.includes(searchKeyword.value)
  )
})

const handleSearch = (keyword: string) => {
  console.log('搜尋關鍵字:', keyword)
}

const handleSuggestionClick = (suggestion: string) => {
  searchKeyword.value = suggestion
}
</script>

<template>
  <div>
    <BaseBtn type="primary" @click="showDialog = true">
      打開對話框
    </BaseBtn>
    
    <BaseDialog 
      v-model="showDialog" 
      title="確認操作"
      sub-title="此操作將永久刪除該文件，是否繼續？"
      :is-warning="true"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <p>這是對話框的內容區域，您可以放置任何內容。</p>
    </BaseDialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BaseBtn, BaseDialog } from 'rayyy-vue-table-components'

const showDialog = ref(false)

const handleConfirm = () => {
  console.log('確認操作')
  showDialog.value = false
}

const handleCancel = () => {
  console.log('取消操作')
  showDialog.value = false
}
</script>

<template>
  <div>
    <BaseBtn type="danger" @click="showWarningDialog = true">
      刪除項目
    </BaseBtn>
    
    <BaseWaringDialog 
      v-model="showWarningDialog" 
      title="警告"
      sub-title="此操作無法復原，確定要刪除嗎？"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BaseBtn, BaseWaringDialog } from 'rayyy-vue-table-components'

const showWarningDialog = ref(false)

const handleConfirm = () => {
  console.log('確認刪除')
  showWarningDialog.value = false
}

const handleCancel = () => {
  console.log('取消刪除')
  showWarningDialog.value = false
}
</script>

<template>
  <MainPanel 
    title="用戶管理" 
    :show-back="true"
    max-height="calc(100vh-200px)"
  >
    <template #searchBar>
      <SearchBar @search="handleSearch" />
    </template>
    
    <template #main>
      <BaseTable
        :data="tableData"
        :columns="columns"
        :loading="loading"
      />
    </template>
    
    <template #footer>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </template>
  </MainPanel>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { MainPanel, SearchBar, BaseTable } from 'rayyy-vue-table-components'
import type { TableColumn } from 'rayyy-vue-table-components'

interface User {
  id: number
  name: string
  email: string
}

const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

const tableData = ref<User[]>([
  { id: 1, name: '張三', email: 'zhangsan@example.com' },
  { id: 2, name: '李四', email: 'lisi@example.com' }
])

const columns: TableColumn<User>[] = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名' },
  { prop: 'email', label: '郵箱' }
]

const handleSearch = (keyword: string) => {
  console.log('搜尋關鍵字:', keyword)
}
</script>

<template>
  <DetailLayout
    title="用戶詳細信息"
    :editable="isEditable"
    :loading="loading"
    @save="handleSave"
    @cancel="handleCancel"
    @back="handleBack"
  >
    <template #header>
      <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold">用戶管理</h1>
        <BaseBtn 
          type="primary" 
          @click="toggleEdit"
        >
          {{ isEditable ? '保存' : '編輯' }}
        </BaseBtn>
      </div>
    </template>
    
    <template #main>
      <div class="space-y-6">
        <div class="grid grid-cols-2 gap-4">
          <BaseInput
            v-model="userForm.name"
            label="姓名"
            :disabled="!isEditable"
          />
          <BaseInput
            v-model="userForm.email"
            label="郵箱"
            type="email"
            :disabled="!isEditable"
          />
        </div>
      </div>
    </template>
  </DetailLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DetailLayout, BaseBtn, BaseInput } from 'rayyy-vue-table-components'

const isEditable = ref(false)
const loading = ref(false)

const userForm = ref({
  name: '張三',
  email: 'zhangsan@example.com'
})

const toggleEdit = () => {
  isEditable.value = !isEditable.value
}

const handleSave = async () => {
  loading.value = true
  // 模擬保存操作
  await new Promise(resolve => setTimeout(resolve, 1000))
  loading.value = false
  isEditable.value = false
}

const handleCancel = () => {
  isEditable.value = false
}

const handleBack = () => {
  // 返回上一頁
  console.log('返回上一頁')
}
</script>

<template>
  <FilterLayout
    main-title="用戶管理"
    filter-title="篩選條件"
    @submit="handleFilterSubmit"
    @reset="handleFilterReset"
  >
    <template #filter-form>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <BaseInput
          v-model="filterForm.keyword"
          label="關鍵字"
          placeholder="搜尋姓名或郵箱"
        />
        <BaseInput
          v-model="filterForm.dateRange"
          label="創建時間"
          type="daterange"
        />
      </div>
    </template>
  </FilterLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FilterLayout, BaseInput } from 'rayyy-vue-table-components'

const filterForm = ref({
  keyword: '',
  dateRange: []
})

const handleFilterSubmit = () => {
  console.log('篩選條件:', filterForm.value)
}

const handleFilterReset = () => {
  filterForm.value = {
    keyword: '',
    dateRange: []
  }
}
</script>

<template>
  <SearchableListPanel
    title="用戶列表"
    :data="tableData"
    :columns="columns"
    :loading="loading"
    :pagination="pagination"
    @search="handleSearch"
    @filter="handleFilter"
    @page-change="handlePageChange"
  >
    <template #firstButton>
      <BaseBtn type="primary" @click="handleAdd">
        新增用戶
      </BaseBtn>
    </template>
    
    <template #customButton>
      <BaseBtn type="success" @click="handleExport">
        導出數據
      </BaseBtn>
    </template>
    
    <template #lastButton>
      <BaseBtn type="warning" @click="handleBatch">
        批量操作
      </BaseBtn>
    </template>
  </SearchableListPanel>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SearchableListPanel, BaseBtn } from 'rayyy-vue-table-components'
import type { TableColumn } from 'rayyy-vue-table-components'

interface User {
  id: number
  name: string
  email: string
  status: string
}

const loading = ref(false)
const tableData = ref<User[]>([
  { id: 1, name: '張三', email: 'zhangsan@example.com', status: 'active' },
  { id: 2, name: '李四', email: 'lisi@example.com', status: 'inactive' }
])

const columns: TableColumn<User>[] = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名' },
  { prop: 'email', label: '郵箱' },
  { prop: 'status', label: '狀態' }
]

const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 100
})

const handleSearch = (keyword: string) => {
  console.log('搜尋:', keyword)
}

const handleFilter = (filters: Record<string, any>) => {
  console.log('篩選:', filters)
}

const handlePageChange = (page: number, pageSize: number) => {
  console.log('分頁變更:', page, pageSize)
}

const handleAdd = () => {
  console.log('新增用戶')
}

const handleExport = () => {
  console.log('導出數據')
}

const handleBatch = () => {
  console.log('批量操作')
}
</script>

<template>
  <SearchableListPanel
    title="User List"
    :data="tableData"
    :columns="columns"
    :loading="loading"
    :pagination="pagination"
    :locale="elementLocale"
    @search="handleSearch"
  />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { SearchableListPanel } from 'rayyy-vue-table-components'
import en from 'element-plus/es/locale/lang/en'
import zhTw from 'element-plus/es/locale/lang/zh-tw'

const currentLocale = ref('zh-TW')

// 根據當前語系選擇 Element Plus locale
const elementLocale = computed(() => {
  return currentLocale.value === 'zh-TW' ? zhTw : en
})

// 切換語系
const switchLocale = () => {
  currentLocale.value = currentLocale.value === 'zh-TW' ? 'en-US' : 'zh-TW'
}

// 其他組件邏輯...
</script>

<template>
  <FunctionHeader
    title="用戶管理"
    sub-title="管理系統用戶信息"
    :breadcrumbs="breadcrumbs"
  >
    <template #actions>
      <BaseBtn type="primary">新增用戶</BaseBtn>
      <BaseBtn type="default">導出數據</BaseBtn>
    </template>
  </FunctionHeader>
</template>

<script setup lang="ts">
import { FunctionHeader, BaseBtn } from 'rayyy-vue-table-components'

const breadcrumbs = [
  { label: '首頁', path: '/' },
  { label: '系統管理', path: '/system' },
  { label: '用戶管理' }
]
</script>

<template>
  <div>
    <BaseBtn @click="showTransferDialog = true">配置表格列</BaseBtn>
    
    <TransferDialog
      v-model="showTransferDialog"
      :columns-value="tableColumns"
      transfer-title="配置表格列"
      @update:submit="handleColumnSubmit"
    >
      <template #list-container="{ columns, clickItemProp, handleItemEvents, handleMousedown }">
        <draggable :list="columns" item-key="prop" delay="200">
          <template #item="{ element, index }">
            <TransferItem
              :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>
    
    <!-- 使用配置後的表格 -->
    <BaseTable
      :data="tableData"
      :columns="visibleColumns"
      style="margin-top: 20px"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import draggable from 'vuedraggable'
import { BaseBtn, BaseTable, TransferDialog, TransferItem } from 'rayyy-vue-table-components'
import type { TableColumn } from 'rayyy-vue-table-components'

interface User {
  id: number
  name: string
  email: string
  age: number
}

const showTransferDialog = ref(false)
const tableData = ref<User[]>([
  { id: 1, name: '張三', email: 'zhangsan@example.com', age: 30 },
  { id: 2, name: '李四', email: 'lisi@example.com', age: 25 }
])

const tableColumns = ref<TableColumn<User>[]>([
  { prop: 'id', label: 'ID', width: 80, checkActive: true },
  { prop: 'name', label: '姓名', checkActive: true },
  { prop: 'email', label: '郵箱', checkActive: true },
  { prop: 'age', label: '年齡', checkActive: false }
])

const visibleColumns = computed(() => 
  tableColumns.value.filter(col => col.checkActive)
)

const handleColumnSubmit = (newColumns: TableColumn<User>[]) => {
  tableColumns.value = newColumns
  showTransferDialog.value = false
}
</script>