Merge branch 'dev' into main

xingyan95 · xingyan95 · commit 9873a5ccb87a · 2023-08-03T13:10:00.000+08:00
diff --git a/packages/devui-vue/devui/avatar/src/components/icon-body.tsx b/packages/devui-vue/devui/avatar/src/components/icon-body.tsx
@@ -1,4 +1,4 @@
-import type { IconPropsType } from "../avatar-types";
+import type { IconPropsType } from '../avatar-types';
 
 export const IconBody = (props: IconPropsType): JSX.Element => {
   const { width, height } = props;
@@ -11,21 +11,15 @@ export const IconBody = (props: IconPropsType): JSX.Element => {
       }}
       viewBox="0 0 30 30"
       version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        id="未命名"
-        stroke="none"
-        stroke-width="1"
-        fill="none"
-        fill-rule="evenodd"
-      >
+      xmlns="http://www.w3.org/2000/svg">
+      <g id="未命名" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <circle id="Oval" fill="#CACFD8" cx="15" cy="15" r="15"></circle>
         <path
-          d="M14.9997866,16 C12.5145053,16 10.4997866,13.9852814 10.4997866, 11.5 C10.4997866,9.01471863 12.5145053,7 14.9997866,7 C17.485068, 7 19.4997866,9.01471863 19.4997866,11.5 C19.4997866,13.9852814 17.485068, 16 14.9997866,16 Z M23,23 L7,22.998553 C7,19.0122153 10.8892296, 16.5 14.9997866,16.5 C19.1103437,16.5 23,20 23,23 Z"
+          d={`M14.9997866,16 C12.5145053,16 10.4997866,13.9852814 10.4997866, 11.5 C10.4997866,9.01471863 12.5145053,7 14.9997866,7 
+          C17.485068, 7 19.4997866,9.01471863 19.4997866,11.5 C19.4997866,13.9852814 17.485068, 16 14.9997866,16 Z M23,23 L7,22.998553 
+          C7,19.0122153 10.8892296, 16.5 14.9997866,16.5 C19.1103437,16.5 23,20 23,23 Z`}
           id="形状结合"
-          fill="#FFFFFF"
-        ></path>
+          fill="#FFFFFF"></path>
       </g>
     </svg>
   );
diff --git a/packages/devui-vue/devui/avatar/src/components/icon-nobody.tsx b/packages/devui-vue/devui/avatar/src/components/icon-nobody.tsx
@@ -14,7 +14,13 @@ export const IconNobody = (props: IconPropsType): JSX.Element => {
       xmlns="http://www.w3.org/2000/svg">
       <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <path
-          d="M22.31,19.2474562 L22.31,21.9974562 L20.81,21.9974562 L20.81, 19.2474562 L18.06,19.2474562 L18.06,17.7474562 L20.81,17.7474562 L20.81, 14.9974562 L22.31,14.9974562 L22.31,17.7474562 L25.06,17.7474562 L25.06, 19.2474562 L22.31,19.2474562 Z M14.9297866,14.9974562 C12.4445053, 14.9974562 10.4297866,12.9827376 10.4297866,10.4974562 C10.4297866, 8.01217483 12.4445053,5.9974562 14.9297866,5.9974562 C17.415068, 5.9974562 19.4297866,8.01217483 19.4297866,10.4974562 C19.4297866, 12.9827376 17.415068,14.9974562 14.9297866,14.9974562 Z M19.6797866, 20.2474562 L19.6797866,21.9971623 L6.93,21.9960092 C6.93,18.0096715 10.8192296, 15.4974562 14.9297866,15.4974562 C16.4608397,15.4974562 17.9612467,15.983021 19.2414296, 16.7474562 L17.06,16.7474562 L17.06,20.2474562 L19.6797866,20.2474562 Z"
+          d={`M22.31,19.2474562 L22.31,21.9974562 L20.81,21.9974562 L20.81, 19.2474562 L18.06,19.2474562 L18.06,17.7474562 
+          L20.81,17.7474562 L20.81, 14.9974562 L22.31,14.9974562 L22.31,17.7474562 L25.06,17.7474562 L25.06, 19.2474562 
+          L22.31,19.2474562 Z M14.9297866,14.9974562 C12.4445053, 14.9974562 10.4297866,12.9827376 10.4297866,10.4974562 
+          C10.4297866, 8.01217483 12.4445053,5.9974562 14.9297866,5.9974562 C17.415068, 5.9974562 19.4297866,8.01217483 
+          19.4297866,10.4974562 C19.4297866, 12.9827376 17.415068,14.9974562 14.9297866,14.9974562 Z M19.6797866, 20.2474562 
+          L19.6797866,21.9971623 L6.93,21.9960092 C6.93,18.0096715 10.8192296, 15.4974562 14.9297866,15.4974562 C16.4608397,15.4974562 
+          17.9612467,15.983021 19.2414296, 16.7474562 L17.06,16.7474562 L17.06,20.2474562 L19.6797866,20.2474562 Z`}
           id="形状结合"
           fill="#959EB2"></path>
         <path
diff --git a/packages/devui-vue/devui/code-editor/src/code-editor-types.ts b/packages/devui-vue/devui/code-editor/src/code-editor-types.ts
@@ -15,7 +15,7 @@ export interface Comment {
   domNode?: HTMLElement;
   heightInPx?: number;
   allowEditorOverflow?: boolean;
-  offserLeft?: number;
+  offsetLeft?: number;
 }
 
 export const codeEditorProps = {
diff --git a/packages/devui-vue/devui/code-editor/src/code-editor.tsx b/packages/devui-vue/devui/code-editor/src/code-editor.tsx
@@ -7,8 +7,8 @@ import './code-editor.scss'
 export default defineComponent({
     name: 'DCodeEditor',
     props: codeEditorProps,
-    emits: ['update: modelValue', 'afterEditorInit', 'click'],
-    setup(props: codeEditorProps, ctx: SetupContext) {
+    emits: ['update:modelValue', 'afterEditorInit', 'click'],
+    setup(props: CodeEditorProps, ctx: SetupContext) {
         const { editorEl } = useCodeEditor(props, ctx);
 
         return () => <div ref={editorEl} class="devui-code-editor"></div>
diff --git a/packages/devui-vue/devui/code-editor/src/composables/use-code-editor.ts b/packages/devui-vue/devui/code-editor/src/composables/use-code-editor.ts
@@ -178,10 +178,10 @@ export function useCodeEditor(props: CodeEditorProps, ctx: SetupContext) {
       model = diffEditor.getModel().modified;
     }
 
-    model.onDidChangeContent(
+    model?.onDidChangeContent(
       throttle(() => {
         modifyValueFromInner = true;
-        ctx.emit('update: modelValue', model.getValue());
+        ctx.emit('update:modelValue', model.getValue());
       }, 100)
     );
   }
diff --git a/packages/devui-vue/docs/components/upload/index.md b/packages/devui-vue/docs/components/upload/index.md
@@ -341,6 +341,103 @@ export default {
 
 :::
 
+### 图片上传示例
+
+:::demo
+
+```vue
+<template>
+  <div class="img-container" v-if="!showUpload">
+    <img class="img-preview" />
+    <div class="delete-img" @click="handleDel">
+      <d-icon name="delete" size="14px"></d-icon>
+    </div>
+  </div>
+  <d-upload class="upload-demo-new" accept=".png" :upload-options="uploadOptions" :before-upload="beforeUpload" v-if="showUpload">
+    <div class="upload-trigger">
+      <d-icon name="add" size="24px"></d-icon>
+    </div>
+  </d-upload>
+</template>
+<script>
+import { ref, watch, nextTick } from 'vue';
+
+export default {
+  setup() {
+    const showUpload = ref(true);
+    const uploadOptions = ref({
+      uri: 'https://run.mocky.io/v3/132b3ea3-23ea-436b-aed4-c43ef9d116f0',
+    });
+
+    const beforeUpload = (file) => {
+      const reader = new FileReader();
+      reader.onload = async () => {
+        showUpload.value = false;
+        await nextTick();
+        document.getElementsByClassName('img-preview')[0].src = reader.result;
+      };
+      reader.readAsDataURL(file[0].file);
+      return false;
+    };
+
+    const handleDel = () => {
+      showUpload.value = true;
+    };
+
+    return {
+      uploadOptions,
+      beforeUpload,
+      showUpload,
+      handleDel,
+    };
+  },
+};
+</script>
+
+<style>
+.upload-demo-new .upload-trigger {
+  background-color: #fff;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  box-sizing: border-box;
+  width: 180px;
+  height: 180px;
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.upload-demo .upload-trigger .link {
+  color: #5e7ce0;
+}
+.img-container {
+  position: relative;
+}
+.img-preview {
+  width: 180px;
+  height: 180px;
+  border-radius: 6px;
+}
+.delete-img {
+  width: 24px;
+  height: 24px;
+  background-color: #f7f7f9;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: -12px;
+  left: 168px;
+}
+</style>
+```
+
+:::
+
 ### Upload 参数
 
 | 参数名         | 类型                              | 默认  | 说明                                                                                         | 跳转 Demo                         |
diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.5.7-hotfix.2",
+  "version": "1.5.7-hotfix.3",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export interface Comment {`
`15`	`15`	`domNode?: HTMLElement;`
`16`	`16`	`heightInPx?: number;`
`17`	`17`	`allowEditorOverflow?: boolean;`
`18`		`- offserLeft?: number;`
	`18`	`+ offsetLeft?: number;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`export const codeEditorProps = {`
Original file line number	Diff line number	Diff line change
`@@ -178,10 +178,10 @@ export function useCodeEditor(props: CodeEditorProps, ctx: SetupContext) {`
`178`	`178`	`model = diffEditor.getModel().modified;`
`179`	`179`	`}`
`180`	`180`
`181`		`- model.onDidChangeContent(`
	`181`	`+ model?.onDidChangeContent(`
`182`	`182`	`throttle(() => {`
`183`	`183`	`modifyValueFromInner = true;`
`184`		`- ctx.emit('update: modelValue', model.getValue());`
	`184`	`+ ctx.emit('update:modelValue', model.getValue());`
`185`	`185`	`}, 100)`
`186`	`186`	`);`
`187`	`187`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-devui",`
`3`		`- "version": "1.5.7-hotfix.2",`
	`3`	`+ "version": "1.5.7-hotfix.3",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"description": "DevUI components based on Vite and Vue3",`
`6`	`6`	`"keywords": [`