chore(release): release 18.0.0 (#360)

Co-authored-by: huaweidevcloud <[email protected]>
DevCloudFE · Dec 3, 2024 · 4955748 · 4955748
1 parent 1bc4dca
commit 4955748
Show file tree

Hide file tree

Showing 322 changed files with 5,265 additions and 4,286 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ To see more in [devui.design](https://devui.design/home).
 
 ## Angular Support
 
-Now supports Angular <font color=red>`^17.0.0`</font>
+Now supports Angular <font color=red>`^18.0.0`</font>
 
 ## Getting Started
 

diff --git a/README_zh_CN.md b/README_zh_CN.md
@@ -23,7 +23,7 @@ DevUI Design设计系统包含了DevUI规则、设计语言和最佳实践的资
 
 ## Angular版本
 
-当前支持的angular版本<font color=red>`^17.0.0`</font>
+当前支持的angular版本<font color=red>`^18.0.0`</font>
 
 ## 快速开始
 

diff --git a/devui-commons/src/constant.ts b/devui-commons/src/constant.ts
@@ -0,0 +1,6 @@
+export const LinkMap: Record<string, string> = {
+  codesandbox: 'https://codesandbox.io/api/v1/sandboxes/define?module=/src/app/app.component.ts',
+  versionRelease: 'https://github.com/DevCloudFE/ng-devui/releases',
+  gitcodeLink: 'https://gitcode.com/DevCloudFE',
+  vueDevuiLink: 'https://vue-devui.github.io',
+};
diff --git a/devui-commons/src/header/header.component.html b/devui-commons/src/header/header.component.html
@@ -47,6 +47,13 @@
     <div class="menu-item">
       <ng-content select="d-header-language-switch"></ng-content>
     </div>
+    <div class="menu-item">
+      <a [href]="gitcodeLink" rel="noopener noreferrer" target="blank">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M15.4791 4.97677C15.6201 4.89789 15.7691 4.8145 15.93 4.72314C15.9494 4.82848 15.9683 4.92046 15.9854 5.00383C16.0157 5.15091 16.0406 5.2719 16.0525 5.39144C16.1479 6.4296 16.6697 7.1933 17.4093 7.36527C18.4908 7.61639 19.5106 7.20133 20.06 6.28555C20.72 5.18673 20.4334 3.84099 19.3097 3.03098C16.1851 0.777435 12.7523 0.155888 9.05448 1.24127C1.08137 3.59371 -1.64675 13.3884 4.01196 19.3949C6.43292 21.9642 9.50695 23.0727 12.9963 22.9889C17.4663 22.8839 20.6857 20.6563 22.7408 16.7954C24.1978 14.0561 22.6139 11.0619 19.5805 10.4396C17.8481 10.0908 16.0765 9.97757 14.3137 10.103C13.7272 10.1594 13.1579 10.3325 12.6394 10.6124C12.0592 10.9135 11.8915 11.5383 11.9565 12.1575C12.0171 12.7217 12.4498 13.0601 12.965 13.1453C14.0024 13.3077 15.0522 13.402 16.1 13.4881C16.4032 13.5136 16.7093 13.5166 17.0149 13.5197C17.4534 13.5241 17.8912 13.5285 18.3187 13.5991C19.5385 13.8007 19.9574 14.7905 19.33 15.8495C19.1763 16.1041 18.9971 16.3424 18.7951 16.5607C17.9745 17.4632 16.9014 18.0981 15.7152 18.3827C13.55 18.9127 11.3827 18.9425 9.22755 18.2617C6.77347 17.4875 5.31042 15.6849 5.25902 13.2584C5.2398 11.7619 5.61972 10.2874 6.35969 8.9865C6.69401 8.38013 6.87751 7.75562 6.82593 7.06851C6.80422 6.77557 6.79219 6.48231 6.77927 6.16716C6.77239 5.99944 6.76526 5.82551 6.75628 5.64214C7.00484 5.69431 7.25032 5.76016 7.49161 5.83943C8.43027 6.21622 9.35415 6.38812 10.3702 6.11155C10.9482 5.97335 11.5455 5.93511 12.1363 5.9985C13.0877 6.07606 14.0387 5.84361 14.847 5.33586C15.0488 5.2176 15.2539 5.10279 15.4791 4.97677Z" fill="#DA203E"/>
+          </svg>        
+      </a>
+    </div>
     <div class="menu-item">
       <a [href]="githubLink" rel="noopener noreferrer" target="blank">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">

diff --git a/devui-commons/src/header/header.component.ts b/devui-commons/src/header/header.component.ts
@@ -4,6 +4,7 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { DevuiCommonsService } from '../devui-commons.service';
 import { I18nUtil } from '../i18n/i18n.util';
 import { LogoComponent } from './logo/logo.component';
+import { LinkMap } from '../constant';
 
 @Component({
   selector: 'd-common-header',
@@ -21,6 +22,7 @@ export class HeaderComponent implements OnInit {
 
   repoLink!: SafeResourceUrl;
   githubLink;
+  gitcodeLink = LinkMap.gitcodeLink;
 
   @ContentChildren(LogoComponent) subLogo: QueryList<LogoComponent> = new QueryList<LogoComponent>();
 
@@ -130,4 +132,4 @@ export class HeaderComponent implements OnInit {
     this.showHamburger = !this.showHamburger;
     this.cdr.detectChanges();
   }
-}
+}
diff --git a/devui-commons/src/header/menu/menu.component.ts b/devui-commons/src/header/menu/menu.component.ts
@@ -3,6 +3,7 @@ import { Component, EventEmitter, Input, OnInit, Output, Inject, ChangeDetectorR
 import { DevuiCommonsService } from '../../devui-commons.service';
 import { I18nUtil } from '../../i18n/i18n.util';
 import { componentSvg, designSvg, ecologySvg, logoSvg, vueDevUISvg } from './icon';
+import { LinkMap } from 'devui-commons/src/constant';
 
 @Component({
   selector: "d-header-menu",
@@ -45,7 +46,7 @@ export class MenuComponent implements OnInit {
           enDescription:
             "Cross-End component library based on Vue3 and DevUI design style",
           enName: "Vue DevUI",
-          href: "https://vue-devui.github.io/",
+          href: LinkMap.vueDevuiLink,
           icon: vueDevUISvg,
           menuName: "vue",
         },
@@ -123,4 +124,4 @@ export class MenuComponent implements OnInit {
   changeLanguage(lang): void {
     this.curLanguage = lang;
   }
-}
+}
diff --git a/devui-commons/src/header/theme-picker/theme-picker.component.ts b/devui-commons/src/header/theme-picker/theme-picker.component.ts
@@ -39,9 +39,9 @@ export class ThemePickerComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     if (typeof window !== 'undefined') {
-      this.themeService = window['devuiThemeService'];
-      this.themes = window['devuiThemes'];
-      this.theme = window['devuiCurrentTheme'];
+      this.themeService = (window as any).devuiThemeService;
+      this.themes = (window as any).devuiThemes;
+      this.theme = (window as any).devuiCurrentTheme;
     }
     const themeName = localStorage.getItem('user-custom-theme')?.split('-')[0];
     this.currentAdvancedTheme = this.advancedThemeList.find(theme => theme.value === themeName) ? themeName : 'infinity';
@@ -115,7 +115,7 @@ export class ThemePickerComponent implements OnInit, OnDestroy {
 
   themeFontSizeChange() {
     if (typeof window !== 'undefined' && this.largeFontSizeMode) {
-      this.largeFontTheme.data = { ...this.themes[window['devuiCurrentTheme']].data, ...LargeFontSize};
+      this.largeFontTheme.data = { ...this.themes[(window as any).devuiCurrentTheme].data, ...LargeFontSize};
       this.theme = `devui-large-font-theme`;
     } else {
       this.theme = `${this.themePrefix}-${this.themeMode}-theme`;

diff --git a/devui-commons/src/sidebar/sidebar.component.ts b/devui-commons/src/sidebar/sidebar.component.ts
@@ -5,6 +5,7 @@ import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { DevuiCommonsService } from '../devui-commons.service';
 import { I18nUtil } from '../i18n/i18n.util';
+import { LinkMap } from '../constant';
 
 interface navItem {
   name: string;
@@ -70,7 +71,7 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
   }
   rotateDegrees = 0;
   docLinkMap = {
-    'opensource': 'https://github.com/DevCloudFE/ng-devui/releases',
+    'opensource': LinkMap.versionRelease,
   };
   get navData() {
     return this._navData;
@@ -86,7 +87,7 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
     this.commonsService.on<any>('searchEvent').subscribe((term) => {
       this.filterData(term);
     });
-    this.changelogLink = this.docLinkMap['opensource'];
+    this.changelogLink = this.docLinkMap.opensource;
     if(this.showVersions){
       this.currentOption = this.versionOptions[0];
     }

diff --git a/devui/accordion/accordion-item-routerlink.component.ts b/devui/accordion/accordion-item-routerlink.component.ts
@@ -46,7 +46,7 @@ export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['item']) {
+    if (changes.item) {
       if (this.link) {
         this.urlTree = this.router.parseUrl(this.link);
         const handelPath = (url: string) => {

diff --git a/devui/accordion/accordion-item.component.html b/devui/accordion/accordion-item.component.html
@@ -1,4 +1,3 @@
-<div class="devui-accordion-splitter" [ngClass]="{ 'devui-parent-list': deepth === 0 }" [ngStyle]="{ left: deepth * 20 + 10 + 'px' }"></div>
 <ng-container *ngIf="!itemTemplate">
   {{ title }}
 </ng-container>

diff --git a/devui/accordion/accordion-menu.component.html b/devui/accordion/accordion-menu.component.html
@@ -29,17 +29,16 @@
   ></ng-template>
   <span class="devui-accordion-open-icon">
     <svg
-      width="1em"
-      height="1em"
+      width="16px"
+      height="16px"
       viewBox="0 0 16 16"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
     >
       <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <path
-          d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
-          fill-rule="nonzero"
+          d="M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z"
         ></path>
       </g>
     </svg>

diff --git a/devui/accordion/accordion.component.scss b/devui/accordion/accordion.component.scss
@@ -48,11 +48,13 @@
 :host ::ng-deep .devui-accordion-item-title {
   display: block;
   height: 40px;
-  width: 100%;
-  padding: 0 12px 0 20px;
+  width: calc(100% - 24px);
+  margin: 0 12px;
+  padding: 0 8px;
   font-weight: normal;
   line-height: 40px;
   color: $devui-text-weak;
+  border-radius: $devui-border-radius;
   background: transparent;
   cursor: pointer;
 
@@ -125,6 +127,8 @@
     width: 16px;
     height: 16px;
     line-height: 16px;
+    transform: rotate(-90deg);
+    transform-origin: center;
     transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
 
     & > svg {
@@ -146,8 +150,7 @@
   }
 
   &.open > .devui-accordion-open-icon {
-    transform: rotate(180deg);
-    transform-origin: center;
+    transform: none;
   }
 
   &.disabled > .devui-accordion-open-icon {
@@ -172,97 +175,10 @@
 /* 视觉融合灰线 */
 :host ::ng-deep .devui-accordion-item-title {
   position: relative;
-
-  .devui-accordion-splitter {
-    position: absolute;
-    display: inline-block;
-    left: 10px;
-    width: 2px;
-    height: 40px;
-    border-left: 2px solid $devui-dividing-line;
-    vertical-align: middle;
-
-    &.devui-parent-list {
-      border: transparent;
-    }
-  }
-
-  .devui-accordion-splitter::before {
-    content: '';
-    display: block;
-    width: 2px;
-    height: 18px;
-    border-left: 2px solid $devui-form-control-line-active;
-    position: absolute;
-    top: 11px;
-    left: -2px;
-    opacity: 0;
-  }
-
-  &.devui-router-active,
-  &.active {
-    &:not(.open) .devui-accordion-splitter::before {
-      opacity: 1;
-    }
-  }
 }
 
 :host ::ng-deep .devui-accordion-show-animate .devui-accordion-item-title {
   transition:
     font-weight $devui-animation-duration-fast $devui-animation-ease-in-out-smooth,
     background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth;
-
-  .devui-accordion-splitter::before {
-    transform: scaleY(0);
-    transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
-  }
-
-  &.devui-router-active,
-  &.active {
-    &:not(.open) .devui-accordion-splitter::before {
-      transform: scaleY(1);
-    }
-  }
-}
-
-:host ::ng-deep .devui-accordion-list > .devui-accordion-item:first-child {
-  & > .devui-accordion-item-title,
-  & > .devui-accordion-menu-item > .devui-accordion-item-title {
-    & > a > .devui-accordion-splitter,
-    & > .devui-accordion-splitter {
-      height: 28px;
-      top: 12px;
-
-      &::before {
-        top: 0;
-      }
-    }
-  }
-}
-
-:host ::ng-deep .devui-accordion-list > .devui-accordion-item:last-child {
-  & > .devui-accordion-item-title,
-  & > .devui-accordion-menu-item > .devui-accordion-item-title {
-    & > a > .devui-accordion-splitter,
-    & > .devui-accordion-splitter {
-      height: 28px;
-      top: 0;
-
-      &::before {
-        top: initial;
-        bottom: 0;
-      }
-    }
-  }
-}
-
-:host ::ng-deep .devui-accordion-list > .devui-accordion-item:last-child:first-child {
-  & > .devui-accordion-item-title,
-  & > .devui-accordion-menu-item > .devui-accordion-item-title {
-    & > a > .devui-accordion-splitter,
-    & > .devui-accordion-splitter {
-      height: 18px;
-      top: 11px;
-    }
-  }
 }