@aquiferre/ui-kit 0.1.3 → 0.1.4

package/components/DataTable.vue

@@ -3,10 +3,15 @@
     <table class="table">
       <thead class="table-header">
         <tr>
+          <th v-if="selectable" class="table-header-cell w-8">
+            <input type="checkbox" :checked="allSelected" @change="toggleAll" />
+          </th>
           <th
             v-for="col in columns"
             :key="col.key"
             class="table-header-cell"
+            :class="col.width"
+            :style="col.align ? `text-align:${col.align}` : undefined"
           >
             {{ col.title }}
           </th>
@@ -14,12 +19,25 @@
       </thead>
       <tbody class="table-body">
         <tr v-if="!loading && data.length === 0">
-          <td :colspan="columns.length" class="table-empty">
+          <td :colspan="colspan" class="table-empty">
             {{ emptyText }}
           </td>
         </tr>
-        <tr v-for="(row, index) in data" :key="row.id || index" class="table-row">
-          <td v-for="col in columns" :key="col.key" class="table-cell">
+        <tr
+          v-for="(row, index) in data"
+          :key="row[rowKey] ?? index"
+          class="table-row cursor-pointer"
+          @click="handleRowClick(row)"
+        >
+          <td v-if="selectable" class="table-cell" @click.stop>
+            <input type="checkbox" :checked="isSelected(row)" @change="toggleRow(row)" />
+          </td>
+          <td
+            v-for="col in columns"
+            :key="col.key"
+            class="table-cell"
+            :class="col.align === 'center' ? 'text-center' : col.align === 'right' ? 'text-right' : undefined"
+          >
             <slot :name="col.key" :row="row" :value="row[col.key]">
               {{ row[col.key] }}
             </slot>
@@ -38,15 +56,64 @@
 </template>
 
 <script setup lang="ts">
-interface Column {
-  key: string
-  title: string
-}
+import { computed } from 'vue'
+import type { Column } from '../types'
 
-defineProps<{
+const props = withDefaults(defineProps<{
   columns: Column[]
   data: any[]
   loading?: boolean
   emptyText?: string
+  selectable?: boolean
+  selected?: string[]
+  rowKey?: string
+}>(), {
+  loading: false,
+  emptyText: '暂无数据',
+  selectable: false,
+  selected: () => [],
+  rowKey: 'id',
+})
+
+const emit = defineEmits<{
+  'update:selected': [ids: string[]]
+  'row-click': [row: any]
 }>()
+
+const colspan = computed(() => props.columns.length + (props.selectable ? 1 : 0))
+
+const selectedSet = computed(() => new Set(props.selected))
+
+function isSelected(row: any) {
+  return selectedSet.value.has(row[props.rowKey])
+}
+
+const allSelected = computed(() =>
+  props.data.length > 0 && props.data.every(row => selectedSet.value.has(row[props.rowKey]))
+)
+
+function toggleAll(e: Event) {
+  const checked = (e.target as HTMLInputElement).checked
+  if (checked) {
+    emit('update:selected', props.data.map(row => row[props.rowKey]))
+  } else {
+    emit('update:selected', [])
+  }
+}
+
+function toggleRow(row: any) {
+  const id = row[props.rowKey]
+  const current = [...props.selected]
+  const idx = current.indexOf(id)
+  if (idx >= 0) {
+    current.splice(idx, 1)
+  } else {
+    current.push(id)
+  }
+  emit('update:selected', current)
+}
+
+function handleRowClick(row: any) {
+  emit('row-click', row)
+}
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquiferre/ui-kit",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "type": "module",
   "main": "index.ts",

package/types.ts

@@ -1,6 +1,8 @@
 export interface Column {
   key: string
   title: string
+  width?: string
+  align?: 'left' | 'center' | 'right'
 }
 
 export interface MenuItem {