Merge pull request #1736 from DevCloudFE/dev

Update main from dev
DevCloudFE · Sep 7, 2023 · 4afaf09 · 4afaf09
2 parents f5ec1a0 + 16a4a1b
commit 4afaf09
Show file tree

Hide file tree

Showing 11 changed files with 232 additions and 27 deletions.
diff --git a/packages/devui-vue/devui/code-review/src/composables/use-code-review-expand.ts b/packages/devui-vue/devui/code-review/src/composables/use-code-review-expand.ts
@@ -45,10 +45,16 @@ export function useCodeReviewExpand(reviewContentRef: Ref<HTMLElement>, props: C
     }
 
     const loadMoreLine = trNodes[0].cloneNode(true) as HTMLTableRowElement;
-    loadMoreLine.children[0].removeChild(loadMoreLine.children[0].children[0]);
+    if (loadMoreLine.children[0].children[0]) {
+      loadMoreLine.children[0].removeChild(loadMoreLine.children[0].children[0]);
+    }
     (loadMoreLine.children[1] as HTMLElement).innerText = '';
     trNodes[0].parentElement?.appendChild(loadMoreLine);
-    updateLineNumberInDatasetForDoubleColumn(loadMoreLine, expandThreshold.value, 'bottom');
+    const res = updateLineNumberInDatasetForDoubleColumn(loadMoreLine, expandThreshold.value, 'bottom');
+    if (!res) {
+      loadMoreLine.remove();
+      return;
+    }
     attachExpandUpDownButton(loadMoreLine.children[0] as HTMLElement, 'down');
   };
 
@@ -63,7 +69,7 @@ export function useCodeReviewExpand(reviewContentRef: Ref<HTMLElement>, props: C
     const prefix = '--- updated_at\tJan 1, 2019, 0:0:0 AM\n+++ updated_at\tJan 1, 2019, 0:0:0 AM\n';
     const container = document.createElement('div');
     // 解析code
-    parseDiffCode(container, prefix + code, outputFormat.value);
+    parseDiffCode(container, prefix + code, outputFormat.value, true);
 
     const trNodes = Array.from(container.querySelectorAll('tr'));
     const expandLine = trNodes.find((element) => (element.children[1] as HTMLElement)?.innerText.trim().match(ExpandLineReg));
@@ -139,10 +145,16 @@ export function useCodeReviewExpand(reviewContentRef: Ref<HTMLElement>, props: C
     }
 
     const loadMoreLine = trNodes[0].cloneNode(true) as HTMLTableRowElement;
-    loadMoreLine.children[0].removeChild(loadMoreLine.children[0].children[0]);
+    if (loadMoreLine.children[0].children[0]) {
+      loadMoreLine.children[0].removeChild(loadMoreLine.children[0].children[0]);
+    }
     (loadMoreLine.children[1] as HTMLElement).innerText = '';
     trNodes[0].parentElement?.appendChild(loadMoreLine);
-    updateLineNumberInDataset(loadMoreLine, expandThreshold.value, 'bottom');
+    const res = updateLineNumberInDataset(loadMoreLine, expandThreshold.value, 'bottom');
+    if (!res) {
+      loadMoreLine.remove();
+      return;
+    }
     attachExpandUpDownButton(loadMoreLine.children[0] as HTMLElement, 'down');
   };
 
@@ -157,7 +169,7 @@ export function useCodeReviewExpand(reviewContentRef: Ref<HTMLElement>, props: C
     const prefix = '--- updated_at\tJan 1, 2019, 0:0:0 AM\n+++ updated_at\tJan 1, 2019, 0:0:0 AM\n';
     const container = document.createElement('div');
     // 解析code
-    parseDiffCode(container, prefix + code, outputFormat.value);
+    parseDiffCode(container, prefix + code, outputFormat.value, true);
 
     const trNodes = Array.from(container.querySelectorAll('tr'));
     const expandLine = trNodes.find((element) => (element.children[1] as HTMLElement)?.innerText.trim().match(ExpandLineReg));

diff --git a/packages/devui-vue/devui/code-review/src/utils.ts b/packages/devui-vue/devui/code-review/src/utils.ts
@@ -146,7 +146,7 @@ export function updateExpandLineCount(expandDom: HTMLElement, newExpandDom: HTML
 }
 
 // 解析diff
-export function parseDiffCode(container: HTMLElement, code: string, outputFormat: OutputFormat) {
+export function parseDiffCode(container: HTMLElement, code: string, outputFormat: OutputFormat, isAddCode = false) {
   const diff2HtmlUi = new Diff2HtmlUI(container, code, {
     drawFileList: false,
     matching: 'lines',
@@ -156,7 +156,7 @@ export function parseDiffCode(container: HTMLElement, code: string, outputFormat
   });
   if (outputFormat === 'side-by-side') {
     let diffHtmlStr = diff2HtmlUi.diffHtml;
-    if (diffHtmlStr.match(EmptyDataLangReg)) {
+    if (diffHtmlStr.match(EmptyDataLangReg) && isAddCode) {
       diffHtmlStr = diffHtmlStr.replace(EmptyDataLangReg, '');
     }
     const trList = diffHtmlStr.match(TableTrReg) as RegExpMatchArray;
@@ -226,9 +226,9 @@ export function updateLineNumberInDatasetForDoubleColumn(
     prevR = Math.max(nextR - expandThreshold + 1, 1);
   } else if (position === 'bottom') {
     const prevLineNode = trNode.previousElementSibling as HTMLElement;
-    prevL = parseInt((prevLineNode.children[0] as HTMLElement).innerText) + 1;
+    prevL = parseInt((prevLineNode?.children[0] as HTMLElement)?.innerText) + 1;
     nextL = prevL + expandThreshold - 1;
-    prevR = parseInt((prevLineNode.children[2] as HTMLElement).innerText) + 1;
+    prevR = parseInt((prevLineNode?.children[2] as HTMLElement)?.innerText) + 1;
     nextR = prevR + expandThreshold - 1;
   } else {
     const prevLineNode = trNode.previousElementSibling as HTMLElement;
@@ -244,7 +244,11 @@ export function updateLineNumberInDatasetForDoubleColumn(
       updateExpandUpDownButton(trNode);
     }
   }
+  if (isNaN(prevL) || isNaN(prevR) || isNaN(nextL) || isNaN(nextR)) {
+    return false;
+  }
   setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR);
+  return true;
 }
 
 /*
@@ -272,9 +276,9 @@ export function updateLineNumberInDataset(
     prevR = Math.max(nextR - expandThreshold + 1, 1);
   } else if (position === 'bottom') {
     const prevLineNode = trNode.previousElementSibling as HTMLElement;
-    prevL = parseInt((prevLineNode.children[0].children[0] as HTMLElement).innerText) + 1;
+    prevL = parseInt((prevLineNode?.children[0].children?.[0] as HTMLElement)?.innerText) + 1;
     nextL = prevL + expandThreshold - 1;
-    prevR = parseInt((prevLineNode.children[0].children[1] as HTMLElement).innerText) + 1;
+    prevR = parseInt((prevLineNode?.children[0].children?.[1] as HTMLElement)?.innerText) + 1;
     nextR = prevR + expandThreshold - 1;
   } else {
     const prevLineNode = trNode.previousElementSibling as HTMLElement;
@@ -290,7 +294,11 @@ export function updateLineNumberInDataset(
       updateExpandUpDownButton(trNode);
     }
   }
+  if (isNaN(prevL) || isNaN(prevR) || isNaN(nextL) || isNaN(nextR)) {
+    return false;
+  }
   setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR);
+  return true;
 }
 
 /*

diff --git a/packages/devui-vue/devui/menu/src/menu-types.ts b/packages/devui-vue/devui/menu/src/menu-types.ts
@@ -39,6 +39,10 @@ export const menuProps = {
     type: Boolean,
     default: false,
   },
+  disableOverflowStyle: {
+    type: Boolean,
+    default: false,
+  },
 } as const;
 
 export type MenuProps = ExtractPropTypes<typeof menuProps>;
diff --git a/packages/devui-vue/devui/menu/src/menu.tsx b/packages/devui-vue/devui/menu/src/menu.tsx
@@ -67,7 +67,7 @@ export default defineComponent({
         const ob = new IntersectionObserver(
           (entries: IntersectionObserverEntry[]) => {
             entries.forEach((entry: IntersectionObserverEntry) => {
-              if (!entry.isIntersecting) {
+              if (!entry.isIntersecting && !props.disableOverflowStyle) {
                 const cloneNode = entry.target.cloneNode(true) as Element as HTMLElement;
                 if (entry.target.classList.contains(`${ns.b()}-overflow-container`)) {
                   if (flag && entry.target.previousElementSibling && container.children.length) {
@@ -144,7 +144,7 @@ export default defineComponent({
             key="overflowContainer"
             title="..."
             class={overflowContainerClassName}
-            v-show={overflowItemLength.value > 0 && mode.value === 'horizontal'}></SubMenu>
+            v-show={overflowItemLength.value > 0 && mode.value === 'horizontal' && !props.disableOverflowStyle}></SubMenu>
         </ul>
       );
     };

diff --git a/packages/devui-vue/devui/tooltip/src/tooltip.scss b/packages/devui-vue/devui/tooltip/src/tooltip.scss
@@ -74,3 +74,8 @@
     }
   }
 }
+
+.#{$devui-prefix}-tooltip--with-content {
+  max-width: unset;
+  padding: 0;
+}
diff --git a/packages/devui-vue/devui/tooltip/src/tooltip.tsx b/packages/devui-vue/devui/tooltip/src/tooltip.tsx
@@ -19,9 +19,11 @@ export default defineComponent({
       props
     );
     const ns = useNamespace('tooltip');
-    const className = computed(() => {
-      return [ns.b(), ns.m(placement.value)].join(' ');
-    });
+    const className = computed(() => ({
+      [ns.b()]: true,
+      [ns.m(placement.value)]: true,
+      [ns.m('with-content')]: slots.content,
+    }));
     provide(POPPER_TRIGGER_TOKEN, origin);
 
     return () => (
@@ -41,7 +43,7 @@ export default defineComponent({
               onPositionChange={onPositionChange}
               onMouseenter={onMouseenterOverlay}
               onMouseleave={onMouseleave}>
-              <span innerHTML={content.value}></span>
+              {slots.content ? slots.content?.() : <span innerHTML={content.value}></span>}
             </FlexibleOverlay>
           </Transition>
         </Teleport>

diff --git a/packages/devui-vue/docs/components/editable-select/index.md b/packages/devui-vue/docs/components/editable-select/index.md
@@ -417,7 +417,7 @@ export default defineComponent({
           return item.label.toLowerCase().includes(query.toLowerCase());
         });
       } else {
-        options.value = [];
+        options.value.splice(0, options.value.length);
       }
     };
 
@@ -456,20 +456,20 @@ export default defineComponent({
 | placeholder           | `string`                               | 'Select' | 可选，输入框的默认提示文字                   | [基本用法](#基本用法)              |
 | width                 | `number`                               | --       | 可选，输入框宽度                             | [基本用法](#基本用法)              |
 | max-height            | `number`                               | --       | 可选，下拉框最大高度                         | [基本用法](#基本用法)              |
-| disabled              | `boolean`                              | false    | 可选，是否禁用选择器本身                     | [禁用选择器本身 ](#禁用选择器本身) |
+| disabled              | `boolean`                              | false    | 可选，是否禁用选择器本身                     | [禁用选择器本身](#禁用选择器本身) |
 | disabled-key          | `string`                               | ''       | 可选，设置禁用选项的 Key 值                  | [禁用选项](#有用选项)              |
 | enable-lazy-load      | `boolean`                              | false    | 可选，是否允许懒加载                         | [远程搜索](#远程搜索)              |
-| filter-method         | ` (inputValue:string)=>Array<Options>` | --       | 可选，自定义筛选方法                         | [自定义匹配方法](#自定义筛选方法)  |
+| filter-method         | `(inputValue:string)=>Array<Options>` | --       | 可选，自定义筛选方法                         | [自定义匹配方法](#自定义筛选方法)  |
 | remote-method         | `(inputValue:string)=>Array<Options>`  | --       | 可选，自定义远程搜索方法                     | [远程搜索](#远程搜索)              |
 
 ### EditableSelect 事件
 
 | 事件名         | 回调参数                        | 说明                          | 跳转 Demo             |
 | :------------- | :------------------------------ | :---------------------------- | :-------------------- |
-| load-more      | ` (inputvalue:string)=>void`    | 可选，懒加载触发事件          | [远程搜索](#远程搜索) |
-| focus          | ` (e: FocusEvent)=>void`        | 可选，当 input 获得焦点时触发 |                       |
-| blur           | ` (e: FocusEvent)->void`        | 可选，当 input 失去焦点时触发 |                       |
-| change         | ` (value:string\|number)=>void` | 可选，选中值发生变化时触发    |
+| load-more      | `(inputvalue:string)=>void`    | 可选，懒加载触发事件          | [远程搜索](#远程搜索) |
+| focus          | `(e: FocusEvent)=>void`        | 可选，当 input 获得焦点时触发 |                       |
+| blur           | `(e: FocusEvent)->void`        | 可选，当 input 失去焦点时触发 |                       |
+| change         | `(value:string\|number)=>void` | 可选，选中值发生变化时触发    |
 | visible-change | `(visible:boolean)=>void`       | 可选，下拉框显隐时触发        |
 
 ### EditableSelect 插槽

diff --git a/packages/devui-vue/docs/components/editor-md/index.md b/packages/devui-vue/docs/components/editor-md/index.md
@@ -242,7 +242,7 @@ editor-md/checkbox
     v-model="content"
     :placeholder="'You can enter @ associate member, enter # to associate an order number...'"
     :hint-config="hintConfig"
-    fullscreen-z-index="1000"
+    :fullscreen-z-index="1000"
     @content-change="valueChange"
   >
     <template #hintTemplate>
@@ -347,6 +347,137 @@ export default defineComponent({
 
 :::
 
+### TOC目录渲染
+
+:::demo 支持TOC目录生成
+
+```vue
+<template>
+  <d-editor-md v-model="content" :base-url="baseUrl"></d-editor-md>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const content = ref(`[TOC]
+# Directory
+
+## Level-1 Directory
+This is a Level-1 directory.
+
+### Level-2 Directory
+This is a Level-1 directory.
+
+## Level-1 Directory
+This is a Level-1 directory.
+`);
+    const baseUrl = location.href;
+
+    return { content, baseUrl };
+  },
+});
+</script>
+```
+
+:::
+
+### mermaid 渲染
+
+:::demo 支持mermaid流程图、甘特图、时序图等图表渲染
+
+```vue
+<template>
+  <d-editor-md v-model="content" :fullscreen-z-index="1000"></d-editor-md>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const content = ref(`# Flow Chart
+\`\`\`mermaid
+flowchart LR
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+\`\`\`
+
+# Gantt
+\`\`\`mermaid
+gantt
+    section Section
+    Completed :done,    des1, 2014-01-06,2014-01-08
+    Active        :active,  des2, 2014-01-07, 3d
+    Parallel 1   :         des3, after des1, 1d
+    Parallel 2   :         des4, after des1, 1d
+    Parallel 3   :         des5, after des3, 1d
+    Parallel 4   :         des6, after des4, 1d
+\`\`\`
+
+# Class Diagram
+\`\`\`mermaid
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+<<Interface>> Class01
+Class09 --> C2 : Where am I?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+class Class10 {
+  <<service>>
+  int id
+  size()
+}
+\`\`\`
+
+# State Diagram
+\`\`\`mermaid
+stateDiagram-v2
+[*] --> Still
+Still --> [*]
+Still --> Moving
+Moving --> Still
+Moving --> Crash
+Crash --> [*]
+\`\`\`
+
+# Pie
+\`\`\`mermaid
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15
+\`\`\`
+
+# Sequence Diagram
+\`\`\`mermaid
+sequenceDiagram
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+    John->>John: Fight against hypochondria
+end
+Note right of John: Rational thoughts!
+John-->>Alice: Great!
+John->>Bob: How about you?
+Bob-->>John: Jolly good!
+\`\`\`
+`);
+
+    return { content };
+  },
+});
+</script>
+
+:::
+
 ### EditorMd 参数
 
 | 参数名                 | 类型                                      | 默认值   | 说明                                                                                                               |

diff --git a/packages/devui-vue/docs/components/menu/index.md b/packages/devui-vue/docs/components/menu/index.md
@@ -203,6 +203,7 @@ let width = ref(480);
   });
   </script>
 ```
+
 :::
 
 ### 收缩菜单
@@ -373,6 +374,7 @@ const addSelect = () => {
 | open-keys           | Array                 | []         | 默认展开的子菜单 key 值                                                         | [默认展开](#默认展开)     |
 | default-select-keys | Array                 | []         | 默认选择菜单项 key 值                                                           | [基本用法](#基本用法)     |
 | router              | Boolean               | false      | 是否启用`vue-router`模式。启用该模式会在激活导航时以 key 作为 path 进行路由跳转 | -                         |
+| disableOverflowStyle| Boolean               | false      | 是否禁用宽度过小时菜单的省略样式                                              | -                         |
 
 ### Menu 事件