@aquiferre/ui-kit 0.1.5 → 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/Modal.vue

@@ -0,0 +1,79 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-if="visible" class="dialog-overlay">
+        <div class="fixed inset-0 bg-bg-overlay" @click="onOverlayClick" />
+        <div class="panel-glass dialog" :class="[sizeClass, customClass]">
+          <div v-if="title" class="flex items-center justify-between px-6 py-4 border-b border-border-primary">
+            <h3 class="text-lg font-medium text-text-primary">{{ title }}</h3>
+            <button
+              v-if="closable"
+              class="text-text-tertiary hover:text-text-primary text-2xl leading-none"
+              @click="close"
+            >&times;</button>
+          </div>
+          <div class="px-6 py-4">
+            <slot />
+          </div>
+          <div v-if="$slots.footer" class="px-6 py-4 border-t border-border-primary bg-bg-secondary/50 rounded-b-2xl">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  visible: boolean
+  title?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  closable?: boolean
+  maskClosable?: boolean
+  customClass?: string
+}>(), {
+  closable: true,
+  maskClosable: true,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  close: []
+}>()
+
+const sizeClass = computed(() => {
+  const map: Record<string, string> = {
+    sm: 'max-w-sm',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+  }
+  return map[props.size] || 'max-w-lg'
+})
+
+function close() {
+  emit('update:visible', false)
+  emit('close')
+}
+
+function onOverlayClick() {
+  if (props.maskClosable) {
+    close()
+  }
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

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/composables/useToast.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import type { ToastType } from '../types'
 
 interface ToastItem {
@@ -7,20 +7,38 @@ interface ToastItem {
   message: string
 }
 
-const toasts = ref<ToastItem[]>([])
-let nextId = 0
+// 在全局对象上存储 toast 状态，确保模块重复加载时也能共享状态
+function getGlobalToasts(): Ref<ToastItem[]> {
+  const w = window as any
+  if (!w.__TOAST_STATE__) {
+    w.__TOAST_STATE__ = ref<ToastItem[]>([])
+  }
+  return w.__TOAST_STATE__
+}
+
+function getGlobalNextId(): { value: number } {
+  const w = window as any
+  if (!w.__TOAST_NEXT_ID__) {
+    w.__TOAST_NEXT_ID__ = { value: 0 }
+  }
+  return w.__TOAST_NEXT_ID__
+}
 
 function add(type: ToastType, message: string) {
-  const id = nextId++
+  const toasts = getGlobalToasts()
+  const nextId = getGlobalNextId()
+  const id = nextId.value++
   toasts.value.push({ id, type, message })
   setTimeout(() => remove(id), 3000)
 }
 
 function remove(id: number) {
+  const toasts = getGlobalToasts()
   toasts.value = toasts.value.filter(t => t.id !== id)
 }
 
 export function useToast() {
+  const toasts = getGlobalToasts()
   return {
     toasts,
     success: (msg: string) => add('success', msg),

package/index.ts

@@ -6,11 +6,13 @@ export { default as SearchInput } from './components/SearchInput.vue'
 export { default as FilterDropdown } from './components/FilterDropdown.vue'
 export { default as FormDialog } from './components/FormDialog.vue'
 export { default as ConfirmDialog } from './components/ConfirmDialog.vue'
+export { default as Modal } from './components/Modal.vue'
 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,17 +1,25 @@
 {
   "name": "@aquiferre/ui-kit",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "private": false,
   "type": "module",
   "main": "index.ts",
   "exports": {
     ".": "./index.ts"
   },
-  "files": ["*.ts", "*.vue", "components/**/*.vue", "composables/**/*.ts"],
+  "files": [
+    "*.ts",
+    "*.vue",
+    "components/**/*.vue",
+    "composables/**/*.ts"
+  ],
+  "dependencies": {
+    "pinyin-pro": "^3.28.1"
+  },
   "peerDependencies": {
-    "vue": ">=3.0.0",
+    "@aquiferre/theme-kit": ">=0.1.0",
     "pinia": ">=2.0.0",
-    "@aquiferre/theme-kit": ">=0.1.0"
+    "vue": ">=3.0.0"
   },
   "publishConfig": {
     "access": "public"

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 {