@aquiferre/ui-kit 0.1.6 → 0.1.7

package/components/DataTable.vue

@@ -10,10 +10,19 @@
             v-for="col in columns"
             :key="col.key"
             class="table-header-cell"
-            :class="col.width"
+            :class="[col.width, col.sortable ? 'cursor-pointer select-none' : '']"
             :style="col.align ? `text-align:${col.align}` : undefined"
+            @click="col.sortable ? onSortClick(col) : undefined"
           >
-            {{ col.title }}
+            <span class="inline-flex items-center gap-1">
+              {{ col.title }}
+              <span v-if="col.sortable" class="text-[10px] leading-none">
+                <span v-if="sort && sort.field === (col.sortField || col.key)" class="text-accent-primary">
+                  {{ sort.order === 'asc' ? '▲' : '▼' }}
+                </span>
+                <span v-else class="text-text-tertiary">↕</span>
+              </span>
+            </span>
           </th>
         </tr>
       </thead>
@@ -67,19 +76,33 @@ const props = withDefaults(defineProps<{
   selectable?: boolean
   selected?: string[]
   rowKey?: string
+  sort?: { field: string; order: 'asc' | 'desc' } | null
 }>(), {
   loading: false,
   emptyText: '暂无数据',
   selectable: false,
   selected: () => [],
   rowKey: 'id',
+  sort: null,
 })
 
 const emit = defineEmits<{
   'update:selected': [ids: string[]]
   'row-click': [row: any]
+  'sort-change': [payload: { field: string; order: 'asc' | 'desc' } | null]
 }>()
 
+function onSortClick(col: Column) {
+  const field = col.sortField || col.key
+  if (!props.sort || props.sort.field !== field) {
+    emit('sort-change', { field, order: 'asc' })
+  } else if (props.sort.order === 'asc') {
+    emit('sort-change', { field, order: 'desc' })
+  } else {
+    emit('sort-change', null)
+  }
+}
+
 const colspan = computed(() => props.columns.length + (props.selectable ? 1 : 0))
 
 const selectedSet = computed(() => new Set(props.selected))

package/components/SearchSelect.vue

@@ -0,0 +1,142 @@
+<template>
+  <div ref="rootRef" class="relative w-full">
+    <div
+      class="input flex items-center w-full focus-within:border-accent-primary"
+      :class="disabled ? 'opacity-60 cursor-not-allowed' : ''"
+    >
+      <input
+        ref="inputRef"
+        :value="inputValue"
+        :placeholder="displayLabel || placeholder"
+        :disabled="disabled"
+        class="flex-1 min-w-0 bg-transparent border-none outline-none text-input-text placeholder:text-input-placeholder"
+        @focus="onFocus"
+        @input="onInput"
+      />
+      <button
+        v-if="clearable && modelValue"
+        type="button"
+        class="px-2 text-text-tertiary hover:text-text-primary"
+        @click.stop="clear"
+        tabindex="-1"
+      >✕</button>
+      <button
+        type="button"
+        class="px-2 text-text-tertiary hover:text-text-primary"
+        @click.stop="toggle"
+        tabindex="-1"
+      >▾</button>
+    </div>
+
+    <div
+      v-if="open"
+      class="absolute top-full left-0 mt-1 w-full max-h-60 overflow-auto card shadow-lg z-20 py-1"
+    >
+      <div v-if="filtered.length === 0" class="px-4 py-2 text-sm text-text-tertiary">无匹配项</div>
+      <div
+        v-for="opt in filtered"
+        :key="opt.value"
+        class="px-4 py-2 text-sm text-text-primary hover:bg-bg-hover cursor-pointer"
+        :class="opt.value === modelValue ? 'bg-bg-secondary' : ''"
+        @mousedown.prevent="select(opt)"
+      >
+        {{ opt.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { match } from 'pinyin-pro'
+import type { SelectOption } from '../types'
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  options: SelectOption[]
+  placeholder?: string
+  clearable?: boolean
+  disabled?: boolean
+}>(), {
+  placeholder: '请选择',
+  clearable: true,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'change': [value: string]
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const inputRef = ref<HTMLInputElement | null>(null)
+const open = ref(false)
+const query = ref('')
+
+const displayLabel = computed(() => {
+  const opt = props.options.find(o => o.value === props.modelValue)
+  return opt ? opt.label : ''
+})
+
+const inputValue = computed(() => (open.value ? query.value : displayLabel.value))
+
+const filtered = computed(() => {
+  const q = query.value.trim()
+  if (!q) return props.options
+  const ql = q.toLowerCase()
+  return props.options.filter(o =>
+    o.label.toLowerCase().includes(ql) || match(o.label, q) !== null
+  )
+})
+
+function onInput(e: Event) {
+  query.value = (e.target as HTMLInputElement).value
+  open.value = true
+}
+
+function onFocus() {
+  open.value = true
+  query.value = ''
+}
+
+function select(opt: SelectOption) {
+  emit('update:modelValue', opt.value)
+  emit('change', opt.value)
+  query.value = ''
+  open.value = false
+}
+
+function clear() {
+  emit('update:modelValue', '')
+  emit('change', '')
+  query.value = ''
+  open.value = false
+}
+
+function toggle() {
+  if (props.disabled) return
+  open.value = !open.value
+  if (open.value) {
+    query.value = ''
+    inputRef.value?.focus()
+  }
+}
+
+function handleOutside(e: MouseEvent) {
+  if (rootRef.value && !rootRef.value.contains(e.target as Node)) {
+    open.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleOutside)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleOutside)
+})
+
+// 选项变化时（如异步加载完成），若已选中则无需调整；仅保证关闭态显示正确
+watch(() => props.options, () => {
+  if (!open.value) query.value = ''
+})
+</script>

package/index.ts

@@ -11,7 +11,8 @@ export { default as Toast } from './components/Toast.vue'
 export { default as StatusTag } from './components/StatusTag.vue'
 export { default as FileUploader } from './components/FileUploader.vue'
 export { default as UserPicker } from './components/UserPicker.vue'
+export { default as SearchSelect } from './components/SearchSelect.vue'
 export { default as SideMenu } from './components/SideMenu.vue'
 export { default as TopNavbar } from './components/TopNavbar.vue'
 export { useToast } from './composables/useToast'
-export type { Column, MenuItem, MenuGroup, NavModule, DropdownItem, ToastType } from './types'
+export type { Column, SelectOption, MenuItem, MenuGroup, NavModule, DropdownItem, ToastType } from './types'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquiferre/ui-kit",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": false,
   "type": "module",
   "main": "index.ts",
@@ -13,6 +13,9 @@
     "components/**/*.vue",
     "composables/**/*.ts"
   ],
+  "dependencies": {
+    "pinyin-pro": "^3.28.1"
+  },
   "peerDependencies": {
     "@aquiferre/theme-kit": ">=0.1.0",
     "pinia": ">=2.0.0",

package/types.ts

@@ -3,6 +3,13 @@ export interface Column {
   title: string
   width?: string
   align?: 'left' | 'center' | 'right'
+  sortable?: boolean
+  sortField?: string
+}
+
+export interface SelectOption {
+  value: string
+  label: string
 }
 
 export interface MenuItem {