feat(abc:sv): add bordered property

- close ng-alain/ng-alain#2385

packages/abc/sv/demo/border.md

@@ -0,0 +1,52 @@
+---
+order: 2
+title:
+  zh-CN: 带边框的
+  en-US: Border
+---
+
+## zh-CN
+
+带边框和背景颜色。
+
+## en-US
+
+With border and background color.
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-demo',
+  template: `
+    <div class="mb-md">
+      <button nz-button (click)="bordered = !bordered">切换边框</button>
+      <nz-radio-group [(ngModel)]="size" class="ml-md">
+        <label nz-radio nzValue="default">default</label>
+        <label nz-radio nzValue="large">large</label>
+        <label nz-radio nzValue="small">small</label>
+      </nz-radio-group>
+    </div>
+    <div sv-container labelWidth="150" [bordered]="bordered" [size]="size">
+      <sv label="ID">1</sv>
+      <sv label="Name">asdf</sv>
+      <sv label="Age">25</sv>
+      <sv label="Long Optional Long Optional" optional="(RMB)">Optional</sv>
+      <sv label="Optional" optionalHelp="Tips">Optional Help</sv>
+      <sv label="Default" optionalHelp="The background color is #f50" optionalHelpColor="#f50"></sv>
+      <sv [label]="label" col="1">
+        <ng-template #label>
+          <a nz-tooltip="test">long</a>
+        </ng-template>
+        <p>Custom label</p>
+        <p>Custom label</p>
+        <p>Custom label</p>
+      </sv>
+    </div>
+  `
+})
+export class DemoComponent {
+  bordered = true;
+  size?: 'small' | 'large' | 'default' = 'default';
+}
+```

packages/abc/sv/index.en-US.md

@@ -24,6 +24,7 @@ Viewing grid system is a higher-order components based on the original [Grid Sys
 | `[default]` | whether default text | `boolean` | `true` | ✅ |
 | `[title]` | Display title | `string,TemplateRef<void>` | - | - |
 | `[noColon]` | Whether to not display : after label text | `boolean` | `false` | - |
+| `[bordered]` | Whether to display the border | `boolean` | `false` | - |
 
 ### sv
 

packages/abc/sv/index.zh-CN.md

@@ -24,6 +24,7 @@ module: import { SVModule } from '@delon/abc/sv';
 | `[default]` | 默认是否显示默认文本 | `boolean` | `true` | ✅ |
 | `[title]` | 标题 | `string,TemplateRef<void>` | - | - |
 | `[noColon]` | 默认是否不显示 label 后面的冒号 | `boolean` | `false` | - |
+| `[bordered]` | 是否展示边框 | `boolean` | `false` | - |
 
 ### sv
 

packages/abc/sv/style/index.less

@@ -229,4 +229,40 @@
   &__no-colon::after {
     content: ' ' !important;
   }
+
+  &__bordered {
+    overflow: hidden;
+    border-top: 1px solid @border-color-split;
+    border-bottom: 1px solid @border-color-split;
+    border-left: 1px solid @border-color-split;
+
+    @{sv-prefix}__item {
+      border-right: 1px solid @border-color-split;
+      border-bottom: 1px solid @border-color-split;
+    }
+
+    @{sv-prefix}__label {
+      background-color: @descriptions-bg;
+      border-right: 1px solid @border-color-split;
+    }
+
+    @{sv-prefix}__label,
+    @{sv-prefix}__detail {
+      padding: @descriptions-middle-padding;
+    }
+
+    &@{sv-prefix}__large {
+      @{sv-prefix}__label,
+      @{sv-prefix}__detail {
+        padding: @descriptions-default-padding;
+      }
+    }
+
+    &@{sv-prefix}__small {
+      @{sv-prefix}__label,
+      @{sv-prefix}__detail {
+        padding: @descriptions-small-padding;
+      }
+    }
+  }
 }

packages/abc/sv/sv-container.component.ts

@@ -18,7 +18,7 @@ import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/uti
   selector: 'sv-container, [sv-container]',
   exportAs: 'svContainer',
   template: `
-    <div class="ant-row" [ngStyle]="{ 'margin-left.px': -(gutter / 2), 'margin-right.px': -(gutter / 2) }">
+    <div class="ant-row" [ngStyle]="margin">
       <sv-title *ngIf="title">
         <ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>
       </sv-title>
@@ -31,6 +31,7 @@ import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/uti
     '[class.sv__vertical]': `layout === 'vertical'`,
     '[class.sv__small]': `size === 'small'`,
     '[class.sv__large]': `size === 'large'`,
+    '[class.sv__bordered]': `bordered`,
     '[class.clearfix]': `true`
   },
   preserveWhitespaces: false,
@@ -44,10 +45,11 @@ export class SVContainerComponent {
   static ngAcceptInputType_colInCon: NumberInput;
   static ngAcceptInputType_default: BooleanInput;
   static ngAcceptInputType_noColon: BooleanInput;
+  static ngAcceptInputType_bordered: BooleanInput;
 
   @Input('sv-container') @InputNumber(null) colInCon?: REP_TYPE;
   @Input() title?: string | TemplateRef<void>;
-  @Input() size!: 'small' | 'large';
+  @Input() size?: 'small' | 'large' | 'default';
   /** 列表项间距，单位为 `px` */
   @Input() @InputNumber() gutter!: number;
   @Input() layout!: 'horizontal' | 'vertical';
@@ -56,6 +58,11 @@ export class SVContainerComponent {
   @Input() @InputNumber() col!: number;
   @Input() @InputBoolean() default!: boolean;
   @Input() @InputBoolean() noColon = false;
+  @Input() @InputBoolean() bordered = false;
+
+  get margin(): { [k: string]: number } {
+    return this.bordered ? {} : { 'margin-left.px': -(this.gutter / 2), 'margin-right.px': -(this.gutter / 2) };
+  }
 
   constructor(configSrv: AlainConfigService) {
     configSrv.attach(this, 'sv', {

packages/abc/sv/sv.component.ts

@@ -40,8 +40,7 @@ export class SVComponent implements AfterViewInit, OnChanges {
   static ngAcceptInputType_hideLabel: BooleanInput;
 
   @ViewChild('conEl', { static: false })
-  private conEl!: ElementRef;
-  private el: HTMLElement;
+  private conEl!: ElementRef<HTMLElement>;
   private clsMap: string[] = [];
   _noColon = false;
 
@@ -60,8 +59,9 @@ export class SVComponent implements AfterViewInit, OnChanges {
 
   // #endregion
 
-  get paddingValue(): number {
-    return this.parent && this.parent.gutter / 2;
+  get paddingValue(): number | null {
+    if (this.parent.bordered) return null;
+    return this.parent.gutter / 2;
   }
 
   get labelWidth(): number | null | undefined {
@@ -70,20 +70,20 @@ export class SVComponent implements AfterViewInit, OnChanges {
   }
 
   constructor(
-    el: ElementRef,
+    private el: ElementRef<HTMLElement>,
     @Host() @Optional() public parent: SVContainerComponent,
     private rep: ResponsiveService,
     private ren: Renderer2
   ) {
     if (parent == null) {
       throw new Error(`[sv] must include 'sv-container' component`);
     }
-    this.el = el.nativeElement;
   }
 
   private setClass(): void {
-    const { el, ren, col, clsMap, type, rep, noColon, parent } = this;
-    this._noColon = noColon != null ? noColon : parent.noColon;
+    const { ren, col, clsMap, type, rep, noColon, parent } = this;
+    const el = this.el.nativeElement;
+    this._noColon = parent.bordered ? true : noColon != null ? noColon : parent.noColon;
     clsMap.forEach(cls => ren.removeClass(el, cls));
     clsMap.length = 0;
     const parentCol = parent.colInCon || parent.col;

packages/abc/sv/sv.spec.ts

@@ -93,6 +93,20 @@ describe('abc: view', () => {
             page.expect('sv__label-width', 0);
           });
         });
+        describe('#bordered', () => {
+          it('should working', () => {
+            context.bordered = true;
+            context.noColon = false;
+            fixture.detectChanges();
+            page
+              .expect(`${prefixCls}bordered`)
+              // noColon 始终为 true
+              .expect(`${prefixCls}no-colon`, 0, 'noColon应始终为true');
+            // gutter 始终为 空
+            const marginLeft = page.getEl(`.ant-row`).style.marginLeft;
+            expect(marginLeft).toBe('');
+          });
+        });
       });
       describe('#item', () => {
         describe('#col', () => {
@@ -230,8 +244,10 @@ describe('abc: view', () => {
     getEls(cls: string): DebugElement[] {
       return dl.queryAll(By.css(cls));
     }
-    expect(cls: string, count: number = 1): this {
-      expect(this.getEls(cls).length).toBe(count);
+    expect(cls: string, count: number = 1, message?: string): this {
+      let e = expect(this.getEls(cls).length);
+      if (message) e = e.withContext(message);
+      e.toBe(count);
       return this;
     }
   }
@@ -248,6 +264,8 @@ describe('abc: view', () => {
       [gutter]="parent_gutter"
       [col]="parent_col"
       [default]="parent_default"
+      [bordered]="bordered"
+      [noColon]="noColon"
     >
       <sv-title>title</sv-title>
       <sv
@@ -282,6 +300,8 @@ class TestComponent {
   parent_col: number = 3;
   parent_default: boolean = true;
   parent_title = 'title';
+  bordered = false;
+  noColon = false;
 
   label?: string;
   optional?: string;