@zzalai/leafer-point-annotation 1.1.0 → 1.1.1

package/README.md

@@ -38,7 +38,7 @@ pnpm add @zzalai/leafer-point-annotation
 
 ## 快速开始
 
-### 基础使用
+### 使用远程图片
 
 ```vue
 <template>
@@ -60,6 +60,7 @@ pnpm add @zzalai/leafer-point-annotation
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { PointAnnotation } from '@zzalai/leafer-point-annotation'
+import '@zzalai/leafer-point-annotation/dist/leafer-point-annotation.css'
 
 const annotationRef = ref<InstanceType<typeof PointAnnotation> | null>(null)
 const imageSource = computed(() => ({
@@ -127,6 +128,59 @@ const exportMask = async () => {
 </style>
 ```
 
+### 使用本地图片上传
+
+不提供 `imageSource` prop 时，会显示本地上传界面，支持点击选择或拖拽上传。
+
+```vue
+<template>
+  <div class="demo-container">
+    <PointAnnotation
+      ref="annotationRef"
+      :options="options"
+      @pointChange="handlePointChange"
+      @loadSuccess="handleLoadSuccess"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PointAnnotation } from '@zzalai/leafer-point-annotation'
+import '@zzalai/leafer-point-annotation/dist/leafer-point-annotation.css'
+
+const annotationRef = ref<InstanceType<typeof PointAnnotation> | null>(null)
+
+const options = ref({
+  pointStyle: {
+    circleFill: '#ff4d4f',
+    circleStroke: '#ffffff',
+    labelBackgroundColor: '#ffffff'
+  },
+  brushStyle: {
+    color: '#ff4d4f',
+    opacity: 0.55,
+    size: 100
+  }
+})
+
+const handlePointChange = (points) => {
+  console.log('标注点变化:', points)
+}
+
+const handleLoadSuccess = () => {
+  console.log('图片加载成功')
+}
+</script>
+
+<style scoped>
+.demo-container {
+  width: 100%;
+  height: 600px;
+}
+</style>
+```
+
 ## API 文档
 
 ### Props

package/README_EN.md

@@ -38,7 +38,7 @@ pnpm add @zzalai/leafer-point-annotation
 
 ## Quick Start
 
-### Basic Usage
+### Using Remote Image
 
 ```vue
 <template>
@@ -60,6 +60,7 @@ pnpm add @zzalai/leafer-point-annotation
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { PointAnnotation } from '@zzalai/leafer-point-annotation'
+import '@zzalai/leafer-point-annotation/dist/leafer-point-annotation.css'
 
 const annotationRef = ref<InstanceType<typeof PointAnnotation> | null>(null)
 const imageSource = computed(() => ({
@@ -127,6 +128,59 @@ const exportMask = async () => {
 </style>
 ```
 
+### Using Local Image Upload
+
+When not providing the `imageSource` prop, the local upload interface will be displayed, supporting click to select or drag and drop.
+
+```vue
+<template>
+  <div class="demo-container">
+    <PointAnnotation
+      ref="annotationRef"
+      :options="options"
+      @pointChange="handlePointChange"
+      @loadSuccess="handleLoadSuccess"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PointAnnotation } from '@zzalai/leafer-point-annotation'
+import '@zzalai/leafer-point-annotation/dist/leafer-point-annotation.css'
+
+const annotationRef = ref<InstanceType<typeof PointAnnotation> | null>(null)
+
+const options = ref({
+  pointStyle: {
+    circleFill: '#ff4d4f',
+    circleStroke: '#ffffff',
+    labelBackgroundColor: '#ffffff'
+  },
+  brushStyle: {
+    color: '#ff4d4f',
+    opacity: 0.55,
+    size: 100
+  }
+})
+
+const handlePointChange = (points) => {
+  console.log('Points changed:', points)
+}
+
+const handleLoadSuccess = () => {
+  console.log('Image loaded successfully')
+}
+</script>
+
+<style scoped>
+.demo-container {
+  width: 100%;
+  height: 600px;
+}
+</style>
+```
+
 ## API Documentation
 
 ### Props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzalai/leafer-point-annotation",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A Vue3 component for point annotation and brush painting on images using LeaferJS, supporting COCO/YOLO/JSON export, designed for AI model training dataset annotation",
   "type": "module",
   "publishConfig": {
@@ -14,6 +14,10 @@
       "import": "./dist/leafer-point-annotation.es.js",
       "require": "./dist/leafer-point-annotation.umd.js",
       "types": "./dist/index.d.ts"
+    },
+    "./dist/leafer-point-annotation.css": {
+      "import": "./dist/leafer-point-annotation.css",
+      "require": "./dist/leafer-point-annotation.css"
     }
   },
   "scripts": {
@@ -57,9 +61,10 @@
   "devDependencies": {
     "@types/node": "^25.6.0",
     "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/language-core": "^3.3.3",
     "terser": "^5.46.1",
     "typescript": "^6.0.2",
     "vite": "^8.0.8",
-    "vite-plugin-dts": "^3.0.0"
+    "vite-plugin-dts": "^5.0.2"
   }
 }

package/tsconfig.json

@@ -17,7 +17,11 @@
     "noFallthroughCasesInSwitch": true,
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "declaration": true,
+    "declarationDir": "./dist",
+    "rootDir": "./src",
+    "emitDeclarationOnly": false
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]

package/vite.config.ts

@@ -6,7 +6,12 @@ import path from 'path'
 export default defineConfig({
   plugins: [
     vue(),
-    process.env.NODE_ENV === 'production' ? dts() : null
+    process.env.NODE_ENV === 'production' ? dts({
+      outDirs: ['dist'],
+      include: ['src/**/*.ts', 'src/**/*.vue'],
+      exclude: ['src/**/*.spec.ts', 'src/**/*.test.ts'],
+      tsconfigPath: './tsconfig.json'
+    }) : null
   ].filter(Boolean),
   resolve: {
     alias: {