Merge pull request #1544 from DevCloudFE/dev

release v1.5.1

Author: kagol

.github/workflows/preview-build.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '19'
       - name: Run Npm Scripts
         run: |
           node -v

README.md

@@ -41,18 +41,17 @@ Install with pnpm
 pnpm add vue-devui
 ```
 
-
 Then import `DevUI` in the `main.ts` file:
 
 ```ts
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
 
 // Import Vue DevUI component and style
-import DevUI from 'vue-devui'
-import 'vue-devui/style.css'
+import DevUI from 'vue-devui';
+import 'vue-devui/style.css';
 
-createApp(App).use(DevUI).mount('#app')
+createApp(App).use(DevUI).mount('#app');
 ```
 
 Then you can use the vue devui component(such as `<d-button>`) in the `App.vue` file:
@@ -119,6 +118,7 @@ Maintainers are community members who have made outstanding contributions and ha
 - [brenner8023](https://github.com/brenner8023)
 
 Outstanding contributions include, but are not limited to, the following:
+
 - 10 or more PRs are merged
 - Put forward more than 10 review opinions approved by PR authors
 - Provide constructive optimization advice and promote the project to become better
@@ -220,6 +220,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center"><a href="https://github.com/Whbbit1999"><img src="https://avatars.githubusercontent.com/u/60510247?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Whbbit1999</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Whbbit1999" title="Code">💻</a></td>
       <td align="center"><a href="https://github.com/zhaoShijuan"><img src="https://avatars.githubusercontent.com/u/31791365?v=4?s=100" width="100px;" alt=""/><br /><sub><b>zhaoShijuan</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=zhaoShijuan" title="Code">💻</a></td>
       <td align="center"><a href="https://github.com/XiaoRIGE"><img src="https://avatars.githubusercontent.com/u/33147011?v=4?s=100" width="100px;" alt=""/><br /><sub><b>XiaoRIGE</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=XiaoRIGE" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/xiaogonggong-w"><img src="https://avatars.githubusercontent.com/u/79799040?v=4" width="100px;" alt=""/><br /><sub><b>xiaogonggong-w</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=xiaogonggong-w" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/hqchqc"><img src="https://avatars.githubusercontent.com/u/51051157?v=4" width="100px;" alt=""/><br /><sub><b>hqchqc</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=hqchqc" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/Lucky-Ya-Q"><img src="https://avatars.githubusercontent.com/u/63504321?v=4" width="100px;" alt=""/><br /><sub><b>Lucky-Ya-Q</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Lucky-Ya-Q" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>
@@ -233,7 +236,7 @@ This project follows the [all-contributors](https://github.com/all-contributors/
 
 ## Partner project
 
-- [H5-Dooring - 让H5制作，更简单](http://h5.dooring.cn/)
+- [H5-Dooring - 让 H5 制作，更简单](http://h5.dooring.cn/)
 - [灯塔 - 公益性质的反霸凌团队](https://www.light-tower.top/)
 
 ## License

README.zh-CN.md

@@ -32,14 +32,14 @@ npm i vue-devui
 在`main.ts`文件中引入`vue-devui`。
 
 ```ts
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
 
 // 引入 Vue DevUI 组件库及样式
-import DevUI from 'vue-devui'
-import 'vue-devui/style.css'
+import DevUI from 'vue-devui';
+import 'vue-devui/style.css';
 
-createApp(App).use(DevUI).mount('#app')
+createApp(App).use(DevUI).mount('#app');
 ```
 
 ### 3. 使用
@@ -74,6 +74,7 @@ pnpm scripts
 欢迎你参与到 Vue DevUI 项目的建设中来！🎉
 
 通过参与 Vue DevUI 项目，我们可以一起：
+
 - 🔥 学习最新的 `Vite`+`Vue3`+`TypeScript`+`JSX` 技术
 - 🎁 学习如何设计和开发组件
 - ⭐ 磨练编程技能，学习优秀的编程实践
@@ -107,6 +108,7 @@ pnpm scripts
 - [brenner8023](https://github.com/brenner8023)
 
 杰出贡献包括但不仅限于以下行为：
+
 - 合并 10 个以上 PR
 - 提出超过 10 条被 PR 作者认可的检视意见
 - 提供建设性的优化意见并推动项目变得更好
@@ -207,6 +209,10 @@ pnpm scripts
       <td align="center"><a href="https://github.com/hxj9102"><img src="https://avatars.githubusercontent.com/u/58357112?v=4?s=100" width="100px;" alt=""/><br /><sub><b>hxj9102</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=hxj9102" title="Code">💻</a></td>
       <td align="center"><a href="https://github.com/Whbbit1999"><img src="https://avatars.githubusercontent.com/u/60510247?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Whbbit1999</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Whbbit1999" title="Code">💻</a></td>
       <td align="center"><a href="https://github.com/zhaoShijuan"><img src="https://avatars.githubusercontent.com/u/31791365?v=4?s=100" width="100px;" alt=""/><br /><sub><b>zhaoShijuan</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=zhaoShijuan" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/XiaoRIGE"><img src="https://avatars.githubusercontent.com/u/33147011?v=4?s=100" width="100px;" alt=""/><br /><sub><b>XiaoRIGE</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=XiaoRIGE" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/xiaogonggong-w"><img src="https://avatars.githubusercontent.com/u/79799040?v=4" width="100px;" alt=""/><br /><sub><b>xiaogonggong-w</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=xiaogonggong-w" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/hqchqc"><img src="https://avatars.githubusercontent.com/u/51051157?v=4" width="100px;" alt=""/><br /><sub><b>hqchqc</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=hqchqc" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/Lucky-Ya-Q"><img src="https://avatars.githubusercontent.com/u/63504321?v=4" width="100px;" alt=""/><br /><sub><b>Lucky-Ya-Q</b></sub></a><br /><a href="https://github.com/DevCloudFE/vue-devui/commits?author=Lucky-Ya-Q" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>
@@ -220,7 +226,7 @@ pnpm scripts
 
 ## 合作项目
 
-- [H5-Dooring - 让H5制作，更简单](http://h5.dooring.cn/)
+- [H5-Dooring - 让 H5 制作，更简单](http://h5.dooring.cn/)
 - [灯塔 - 公益性质的反霸凌团队](https://www.light-tower.top/)
 
 ## 开源许可

packages/devui-vue/devui/image-preview/src/transform.ts

@@ -122,6 +122,8 @@ export default class Transform {
   reset(): void {
     this.transformX = this.TRANSFORMX;
     this.transformY = this.TRANSFORMY;
+    this.oTransformX = this.transformX;
+    this.oTransformY = this.transformY;
     this.zoom = this.ZOOM;
   }
   setPosition(): void {

packages/devui-vue/devui/menu/src/components/menu-item/menu-item.tsx

@@ -27,9 +27,9 @@ export default defineComponent({
     const multiple = inject('multiple') as boolean;
     const indent = inject('defaultIndent');
     const isCollapsed = inject('isCollapsed') as Ref<boolean>;
-    const defaultSelectKey = inject('defaultSelectKey') as string[];
+    const defaultSelectKey = inject('defaultSelectKey') as Ref<string[]>;
     const { disabled } = toRefs(props);
-    const isSelect = ref(initSelect(defaultSelectKey, key, multiple, disabled));
+    const isSelect = ref(initSelect(defaultSelectKey.value, key, multiple, disabled));
     const isLayer1 = ref(true);
     const rootMenuEmit = inject('rootMenuEmit') as (eventName: string, ...args: unknown[]) => void;
     const useRouter = inject('useRouter') as boolean;
@@ -90,7 +90,7 @@ export default defineComponent({
       }
     });
     watch(
-      () => defaultSelectKey,
+      ()=>[...defaultSelectKey.value],
       (n) => {
         isSelect.value = initSelect(n, key, multiple, disabled);
         classObject.value[menuItemSelect] = isSelect.value;

packages/devui-vue/devui/menu/src/composables/use-click.ts

@@ -7,7 +7,7 @@ interface clickEvent extends MouseEvent {
 }
 
 export function useClick(e: clickEvent): void {
-  const paths = e.path;
+  const paths = e.composedPath() as HTMLElement[];
   for (let i = 0; i < paths.length; i++) {
     const path = paths[i];
     if (path.classList.contains(`${ns.b()}-horizontal`)) {

packages/devui-vue/devui/menu/src/composables/use-layer-operate.ts

@@ -98,8 +98,7 @@ function getRoot(path: HTMLElement[]): HTMLElement {
 function clearSelect_isHorizontal(ele: HTMLElement, event: clickEvent) {
   let element = event.target as HTMLElement;
   let stack: Element[] = [];
-  const { path } = event;
-  const root = getRoot(path as HTMLElement[]);
+  const root = getRoot(event.composedPath() as HTMLElement[]);
   stack = [...Array.from(root.children)] as HTMLElement[];
   if (element.tagName === 'SPAN') {
     element = element.parentElement as HTMLElement;

packages/devui-vue/devui/menu/src/menu.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
   emits: ['select', 'deselect', 'submenu-change'],
   setup(props: MenuProps, ctx) {
     const ns = useNamespace('menu');
-    const {openKeys, mode, collapsed} = toRefs(props);
+    const {openKeys, mode, collapsed, defaultSelectKeys} = toRefs(props);
     // This ID is only for internal use. So we unwanted use reactivity
     const menuId = randomId(16);
     // register menu to recordTable.
@@ -25,7 +25,7 @@ export default defineComponent({
     provide('defaultIndent', props['indentSize']);
     provide('multiple', props['multiple']);
     provide('openKeys', openKeys);
-    provide('defaultSelectKey', props.defaultSelectKeys);
+    provide('defaultSelectKey', defaultSelectKeys);
     provide('mode', mode);
     provide('collapsedIndent', props['collapsedIndent']);
     provide('rootMenuEmit', ctx.emit);

packages/devui-vue/devui/tag/src/tag.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, watch, onUnmounted } from 'vue';
+import { defineComponent, toRefs, watch, onUnmounted, computed } from 'vue';
 import { tagProps, TagProps } from './tag-types';
 import { useClass, useColor } from './composables';
 import { useNamespace } from '../../shared/hooks/use-namespace';
@@ -23,17 +23,23 @@ export default defineComponent({
       e.stopPropagation();
       emit('tagDelete', e);
     };
+
+    // 计算内容的颜色
+    const contentColor = computed(() => {
+      return isDefaultTag() ? '' : checked.value ? '#fff' : themeColor.value;
+    });
+
+    // 关闭icon
     const closeIconEl = () => {
+      const iconName = isDefaultTag() ? 'error-o' : 'close';
+
       return deletable.value ? (
         <a class="remove-button" onClick={handleDelete}>
-          {isDefaultTag() ? (
-            <d-icon size="12px" name="error-o" color="#adb0b8" />
-          ) : (
-            <d-icon size="12px" name="close" color={themeColor.value} />
-          )}
+          <d-icon size="12px" name={iconName} color={contentColor.value} />
         </a>
       ) : null;
     };
+
     const unWatch = watch(checked, (newVal) => {
       emit('checkedChange', newVal);
     });
@@ -45,7 +51,7 @@ export default defineComponent({
           class={tagClass.value}
           style={{
             display: 'block',
-            color: checked.value ? '#fff' : themeColor.value,
+            color: contentColor.value,
             backgroundColor: checked.value ? themeColor.value : !color.value ? '' : 'var(--devui-base-bg, #ffffff)',
           }}
           title={tagTitle}>

packages/devui-vue/docs/.vitepress/config/lang.ts

@@ -2,13 +2,15 @@ const lang = {
   '/': {
     'hide-text': '隐藏代码',
     'show-text': '显示代码',
-    'copy-button-text': '复制代码片段'
+    'copy-button-text': '复制代码片段',
+    'copy-success-text': '复制成功',
   },
   '/en-US': {
     'hide-text': 'Hide',
     'show-text': 'Expand',
-    'copy-button-text': 'Copy'
-  }
-}
+    'copy-button-text': 'Copy',
+    'copy-success-text': 'Copy Success',
+  },
+};
 
-export default lang
+export default lang;