@aquiferre/ui-kit 0.1.5 → 0.1.6

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/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,6 +6,7 @@ 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'

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "@aquiferre/ui-kit",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": false,
   "type": "module",
   "main": "index.ts",
   "exports": {
     ".": "./index.ts"
   },
-  "files": ["*.ts", "*.vue", "components/**/*.vue", "composables/**/*.ts"],
+  "files": [
+    "*.ts",
+    "*.vue",
+    "components/**/*.vue",
+    "composables/**/*.ts"
+  ],
   "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"