feat(Table): support multiple/single selection

docs/components/content/examples/TableExampleSelectableSingle.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: '[email protected]',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: '[email protected]',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: '[email protected]',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: '[email protected]',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: '[email protected]',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: '[email protected]',
+  role: 'Member'
+}]
+
+const selected = ref([people[1]])
+const select = (row) => {
+  selected.value = [row]
+}
+</script>
+
+<template>
+  <UTable v-model="selected" :rows="people" :multiple="false" @select="select" />
+</template>

docs/content/2.components/table.md

@@ -273,6 +273,21 @@ componentProps:
 ---
 ::
 
+Now, you can enable **Single Selection** so it will only return the selected row by setting the `multiple` prop to `false`. 
+::callout{icon="i-heroicons-exclamation-triangle"}
+The default data type of `v-model` in `UTable` is `Array`, please beware of this when you enable **Single Selection**. For the proper handling, please refer to the following example.
+::
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-selectable-single'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+
 ### Searchable
 
 You can easily use the [Input](/components/input) component to filter the rows.

src/runtime/components/data/Table.vue

@@ -167,6 +167,10 @@ export default defineComponent({
       type: Array,
       default: null
     },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
     by: {
       type: [String, Function],
       default: () => defaultComparator
@@ -270,7 +274,12 @@ export default defineComponent({
         return props.modelValue
       },
       set (value) {
-        emit('update:modelValue', value)
+        if (props.multiple) {
+          emit('update:modelValue', value)
+        } else {
+          value = [value.at(-1)]
+          emit('update:modelValue', value)
+        }
       }
     })