release: v0.10.0

README.md

@@ -71,7 +71,7 @@ npm i faim
 ### Vite
 
 ```ts
-// vite.config.ts
+// vite.config.mts
 
 import { defineConfig } from 'vite'
 
@@ -140,7 +140,7 @@ npm i unplugin-vue-components -D
 ```
 
 ```ts
-// vite.config.ts
+// vite.config.mts
 
 import FaimResolver from 'faim/auto-import-resolver'
 import Components from 'unplugin-vue-components/vite'
@@ -676,7 +676,7 @@ import FaMessageBox from 'faim/dist/components/MessageBox/index'
 
 #### srcAt
 
-用于定位 `value` 中的图片 `src`，适用于绑定值非 `src` 本身的情况
+用于定位 `model-value` 中的图片 `src`，适用于绑定值非 `src` 本身的情况
 
 - 支持属性名，如 `'url'`
 - 支持属性路径，如 `'data[0].url'`

demo/App.vue

@@ -4,6 +4,7 @@ import { reactive, ref } from 'vue-demi'
 import { FaMessageBox } from '../src'
 import { blobLikeToBase64, fileToBlob } from '../src/utils'
 import presets from './Upload/presets'
+import modifyQRCode from './utils/modifyQRCode'
 
 const console = window.console
 const show = ref(true)
@@ -300,6 +301,7 @@ function loading() {
           <FaImage
             :value="data.value.FaImage[0]"
             :model-value="data.value.FaImage[0]"
+            :qrcode="modifyQRCode"
           />
         </p>
 
@@ -329,11 +331,6 @@ function loading() {
           <FaImage
             :value="JSON.stringify(data.value.FaImage)"
             :model-value="JSON.stringify(data.value.FaImage)"
-            qrcode="auto"
-            :qrcode-options="{
-              width: 48,
-              height: 48,
-            }"
           />
         </p>
 

demo/utils/modifyQRCode.js

@@ -0,0 +1,52 @@
+export default function modifyQRCode(src) {
+  // 二维码画布
+  const width = 444
+  const height = 444
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  const ctx = canvas.getContext('2d')
+  const img = new Image()
+  img.src = src
+
+  return new Promise((resolve, reject) => {
+    img.onerror = (reason) => {
+      reject(reason)
+    }
+    img.onload = () => {
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+
+      // 内嵌图标
+      const canvasEmbedded = document.createElement('canvas')
+      const widthEmbedded = 148
+      const heightEmbedded = 52
+      canvasEmbedded.width = widthEmbedded
+      canvasEmbedded.height = heightEmbedded
+
+      // 背景
+      const ctxEmbedded = canvasEmbedded.getContext('2d')
+      ctxEmbedded.fillStyle = 'white'
+      ctxEmbedded.fillRect(0, 0, widthEmbedded, heightEmbedded)
+
+      // 边框
+      ctxEmbedded.lineWidth = 5
+      ctxEmbedded.strokeStyle = 'rgb(93,155,74)'
+      ctxEmbedded.strokeRect(0, 0, widthEmbedded, heightEmbedded)
+
+      // 编号，可换成图标等
+      const text = '12345'
+      const fontSize = 52
+      ctxEmbedded.font = `bolder ${fontSize}px Arial`
+      ctxEmbedded.fillStyle = 'rgb(93,155,74)'
+      const textMetrics = ctxEmbedded.measureText(text)
+      const textX = (widthEmbedded - textMetrics.width) / 2
+      const textY = (heightEmbedded + 38) / 2
+      ctxEmbedded.fillText(text, textX, textY)
+      const x = (canvas.width - canvasEmbedded.width) / 2
+      const y = (canvas.height - canvasEmbedded.height) / 2
+
+      ctx.drawImage(canvasEmbedded, x, y)
+      resolve(canvas.toDataURL())
+    }
+  })
+}

demo/vue2.6.js

@@ -8,6 +8,7 @@ import globalConfigForFaImageUpload from './ImageUpload/globalConfig'
 import globalConfigForFaRichText from './RichText/globalConfig'
 import globalConfigForFaUpload from './Upload/globalConfig'
 import 'element-ui/lib/theme-chalk/index.css'
+import 'uno.css'
 
 Vue.use(ElementUI, { locale: ElementUILocale })
 Vue.use(FaFormDialog, {

demo/vue2.7.js

@@ -8,6 +8,7 @@ import globalConfigForFaImageUpload from './ImageUpload/globalConfig'
 import globalConfigForFaRichText from './RichText/globalConfig'
 import globalConfigForFaUpload from './Upload/globalConfig'
 import 'element-ui/lib/theme-chalk/index.css'
+import 'uno.css'
 
 Vue.use(ElementUI, { locale: ElementUILocale })
 Vue.use(FaFormDialog, {

demo/vue3.js

@@ -9,6 +9,7 @@ import globalConfigForFaImageUpload from './ImageUpload/globalConfig'
 import globalConfigForFaRichText from './RichText/globalConfig'
 import globalConfigForFaUpload from './Upload/globalConfig'
 import 'element-plus/dist/index.css'
+import 'uno.css'
 
 const app = createApp(App)
   .use(ElementPlus, { locale: ElementPlusLocale })

dependency-licenses.txt

@@ -1,4 +1,4 @@
-├─ MIT: 99
+├─ MIT: 100
 ├─ Apache-2.0: 7
 ├─ BSD-2-Clause: 4
 ├─ BSD-3-Clause: 2

package.json

@@ -1,7 +1,7 @@
 {
   "name": "faim",
   "PascalCasedName": "Faim",
-  "version": "0.9.7",
+  "version": "0.10.0",
   "private": false,
   "description": "Element Plus & Element UI isomorphic UI component library, more than Element.",
   "author": {
@@ -95,12 +95,12 @@
     "vue-global-config": "^0.6.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.7.1",
+    "@antfu/eslint-config": "^3.7.2",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@element-plus/icons-vue": "latest",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.6.1",
+    "@types/node": "^22.7.2",
     "@types/uuid": "^10.0.0",
     "@types/validator": "^13.12.2",
     "@vitejs/plugin-vue": "latest",
@@ -114,7 +114,7 @@
     "esno": "^4.7.0",
     "faim": "workspace:*",
     "hash-wasm": "^4.11.0",
-    "json-editor-vue": "^0.16.0",
+    "json-editor-vue": "^0.17.0",
     "license-checker": "^25.0.1",
     "lint-staged": "^15.2.10",
     "magicast": "^0.3.5",
@@ -126,8 +126,9 @@
     "simple-git-hooks": "^2.11.1",
     "typescript": "^5.6.2",
     "unbuild": "^2.0.0",
+    "unocss": "^0.62.4",
     "unplugin-unused": "^0.2.3",
-    "vite": "^5.4.7",
+    "vite": "^5.4.8",
     "vue": "latest",
     "vue-tsc": "2.1.6",
     "zhlint": "^0.8.2"