fix(*): fix misalignment of col placeholders in se, sv, sg (#…

…1617)
ng-alain · Jul 20, 2023 · 83b08c9 · 83b08c9
1 parent 9ab109e
commit 83b08c9
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 27 deletions.
diff --git a/packages/abc/se/demo/complex.md b/packages/abc/se/demo/complex.md
@@ -21,16 +21,16 @@ import { STColumn } from '@delon/abc/st';
 @Component({
   selector: 'app-demo',
   template: `
-    <form nz-form #f="ngForm" se-container size="compact" gutter="24">
+    <form nz-form #f="ngForm" se-container="3" size="compact" gutter="24">
       <se-title>Title 1</se-title>
       <se label="ID" col="1" [optionalHelp]="optionalHelpTpl">
         1000
         <ng-template #optionalHelpTpl> Via by ng-template </ng-template>
       </se>
-      <se label="Name" required col="3" optionalHelp="The background color is #f50" optionalHelpColor="#f50">
-        <input type="text" nz-input [(ngModel)]="i.user_name" name="user_name" required />
+      <se label="Name" required col="2" optionalHelp="The background color is #f50" optionalHelpColor="#f50">
+        <input type="text" nz-input [(ngModel)]="i.user_name" name="user_name" required placeholder="占两栏" />
       </se>
-      <se label="Age" required col="3">
+      <se label="Age" required>
         <nz-select [(ngModel)]="i.user_age" name="user_age" nzAllowClear nzPlaceHolder="Choose">
           <nz-option [nzValue]="1" nzLabel="1"></nz-option>
           <nz-option [nzValue]="2" nzLabel="2"></nz-option>
@@ -39,7 +39,7 @@ import { STColumn } from '@delon/abc/st';
           <nz-option [nzValue]="5" nzLabel="5"></nz-option>
         </nz-select>
       </se>
-      <se label="Brithday" required col="3">
+      <se label="Brithday" required>
         <nz-date-picker [(ngModel)]="i.user_birthday" name="user_birthday" nzShowTime></nz-date-picker>
       </se>
       <se label="App Key" required>

diff --git a/packages/abc/se/se.component.ts b/packages/abc/se/se.component.ts
@@ -148,8 +148,8 @@ export class SEComponent implements OnChanges, AfterContentInit, AfterViewInit,
     this._labelWidth = parent.nzLayout === 'horizontal' ? (labelWidth != null ? labelWidth : parent.labelWidth) : null;
     clsMap.forEach(cls => ren.removeClass(el, cls));
     clsMap.length = 0;
-    const repCls =
-      parent.nzLayout === 'horizontal' ? rep.genCls(col != null ? col : parent.colInCon || parent.col) : [];
+    const parentCol = parent.colInCon || parent.col;
+    const repCls = parent.nzLayout === 'horizontal' ? rep.genCls(col != null ? col : parentCol, parentCol) : [];
     clsMap.push(`ant-form-item`, ...repCls, `${prefixCls}__item`);
     if (line || parent.line) {
       clsMap.push(`${prefixCls}__line`);

diff --git a/packages/abc/sg/demo/basic.md b/packages/abc/sg/demo/basic.md
@@ -19,7 +19,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-demo',
   template: ` <div sg-container="4">
-    <sg *ngFor="let i of ls; let idx = index">
+    <sg *ngFor="let i of ls; let idx = index" [col]="idx === 5 ? 2 : null">
       <div class="item">{{ idx + 1 }}</div>
     </sg>
   </div>`,
@@ -40,10 +40,10 @@ import { Component } from '@angular/core';
         line-height: 120px;
         font-size: 13px;
       }
-    `,
-  ],
+    `
+  ]
 })
 export class DemoComponent {
-  ls = Array(4).fill(0);
+  ls = Array(10).fill(0);
 }
 ```
diff --git a/packages/abc/sg/sg-container.component.ts b/packages/abc/sg/sg-container.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
 
-import { REP_TYPE } from '@delon/theme';
+import type { REP_TYPE } from '@delon/theme';
 import { AlainConfigService } from '@delon/util/config';
 import { InputNumber, NumberInput } from '@delon/util/decorator';
 

diff --git a/packages/abc/sg/sg.component.ts b/packages/abc/sg/sg.component.ts
@@ -59,7 +59,8 @@ export class SGComponent implements OnChanges, AfterViewInit {
     const { el, ren, clsMap, col, parent } = this;
     clsMap.forEach(cls => ren.removeClass(el, cls));
     clsMap.length = 0;
-    clsMap.push(...this.rep.genCls(col != null ? col : parent.colInCon || parent.col), `${prefixCls}__item`);
+    const parentCol = parent.colInCon || parent.col;
+    clsMap.push(...this.rep.genCls(col != null ? col : parentCol, parentCol), `${prefixCls}__item`);
     clsMap.forEach(cls => ren.addClass(el, cls));
     return this;
   }

diff --git a/packages/abc/sv/demo/basic.md b/packages/abc/sv/demo/basic.md
@@ -32,8 +32,9 @@ import { Component } from '@angular/core';
       </sv>
       <nz-divider></nz-divider>
       <sv label="Default"></sv>
-      <sv label="Unit" unit="个">10</sv>
+      <sv label="Unit" unit="个" col="2">10</sv>
       <sv label="Unit" unit="个"></sv>
+      <sv label="Col2" col="2">占两栏</sv>
       <sv label="Value">
         <sv-value prefix="约" unit="亿" tooltip="5,011,000,000">50.11</sv-value>
       </sv>

diff --git a/packages/abc/sv/index.en-US.md b/packages/abc/sv/index.en-US.md
@@ -15,10 +15,11 @@ Viewing grid system is a higher-order components based on the original [Grid Sys
 
 | Property | Description | Type | Default | Global Config |
 |----------|-------------|------|---------|---------------|
+| `[sv-container]` | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/theme/responsive) | `'1','2','3','4','5','6'` | `3` | ✅ |
+| `[col]` | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/theme/responsive) | `'1','2','3','4','5','6'` | `3` | ✅ |
 | `[size]` | size of view | `'small','large'` | `'large'` | ✅ |
 | `[layout]` | type of layout | `'horizontal','vertical'` | `'horizontal'` | ✅ |
 | `[gutter]` | specify the distance between two items, unit is `px` | `number` | `32` | ✅ |
-| `[col]` | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/theme/responsive) | `'1','2','3','4','5','6'` | `3` | ✅ |
 | `[labelWidth]` | label text of width | `number` | - | ✅ |
 | `[default]` | whether default text | `boolean` | `true` | ✅ |
 | `[title]` | Display title | `string,TemplateRef<void>` | - | - |

diff --git a/packages/abc/sv/index.zh-CN.md b/packages/abc/sv/index.zh-CN.md
@@ -15,10 +15,11 @@ module: import { SVModule } from '@delon/abc/sv';
 
 | 参数 | 说明 | 类型 | 默认值 | 全局配置 |
 |----|----|----|-----|------|
+| `[sv-container]` | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/theme/responsive)决定， | `'1','2','3','4','5','6'` | - | - |
+| `[col]` | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/theme/responsive)决定 | `'1','2','3','4','5','6'` | `3` | ✅ |
 | `[size]` | 大小 | `'small','large'` | `'large'` | ✅ |
 | `[layout]` | 布局 | `'horizontal','vertical'` | `'horizontal'` | ✅ |
 | `[gutter]` | 间距 | `number` | `32` | ✅ |
-| `[col]` | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/theme/responsive)决定 | `'1','2','3','4','5','6'` | `3` | ✅ |
 | `[labelWidth]` | 默认标签文本宽度 | `number` | - | ✅ |
 | `[default]` | 默认是否显示默认文本 | `boolean` | `true` | ✅ |
 | `[title]` | 标题 | `string,TemplateRef<void>` | - | - |

diff --git a/packages/abc/sv/sv-container.component.ts b/packages/abc/sv/sv-container.component.ts
@@ -11,9 +11,9 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
+import type { REP_TYPE } from '@delon/theme';
 import { AlainConfigService } from '@delon/util/config';
 import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator';
-
 @Component({
   selector: 'sv-container, [sv-container]',
   exportAs: 'svContainer',
@@ -44,6 +44,7 @@ export class SVContainerComponent {
   static ngAcceptInputType_default: BooleanInput;
   static ngAcceptInputType_noColon: BooleanInput;
 
+  @Input('sv-container') @InputNumber(null) colInCon?: REP_TYPE;
   @Input() title?: string | TemplateRef<void>;
   @Input() size!: 'small' | 'large';
   /** 列表项间距，单位为 `px` */

diff --git a/packages/abc/sv/sv.component.ts b/packages/abc/sv/sv.component.ts
@@ -86,7 +86,8 @@ export class SVComponent implements AfterViewInit, OnChanges {
     this._noColon = noColon != null ? noColon : parent.noColon;
     clsMap.forEach(cls => ren.removeClass(el, cls));
     clsMap.length = 0;
-    clsMap.push(...rep.genCls(col != null ? col : this.parent.col));
+    const parentCol = parent.colInCon || parent.col;
+    clsMap.push(...rep.genCls(col != null ? col : parentCol, parentCol));
     clsMap.push(`${prefixCls}__item`);
     if (this.parent.labelWidth) clsMap.push(`${prefixCls}__item-fixed`);
     if (type) clsMap.push(`${prefixCls}__type-${type}`);

diff --git a/packages/theme/src/services/responsive/responsive.spec.ts b/packages/theme/src/services/responsive/responsive.spec.ts
@@ -79,5 +79,10 @@ describe('theme: responsive', () => {
       expect(res.length).toBe(1);
       expect(res[0]).toBe(`ant-col-xs-24`);
     });
+    it('should be auto padding span', () => {
+      const res = srv.genCls(2, 3);
+      expect(res[0]).toBe(`ant-col-xs-24`);
+      expect(res[1]).toBe(`ant-col-sm-16`);
+    });
   });
 });
diff --git a/packages/theme/src/services/responsive/responsive.ts b/packages/theme/src/services/responsive/responsive.ts
@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { AlainConfigService, AlainThemeResponsiveConfig } from '@delon/util/config';
 
 export const REP_MAX = 6;
+export const SPAN_MAX = 24;
 
 export type REP_TYPE = 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -29,15 +30,21 @@ export class ResponsiveService {
     }
   }
 
-  genCls(count: number): string[] {
-    const rule = this.cog.rules[count > REP_MAX ? REP_MAX : Math.max(count, 1)];
+  genCls(count: number, defaultCol: number = 1): string[] {
+    const rule = { ...this.cog.rules[count > REP_MAX ? REP_MAX : Math.max(count, 1)] };
     const antColClass = 'ant-col';
-    const clsMap = [`${antColClass}-xs-${rule.xs}`];
-    if (rule.sm) clsMap.push(`${antColClass}-sm-${rule.sm}`);
-    if (rule.md) clsMap.push(`${antColClass}-md-${rule.md}`);
-    if (rule.lg) clsMap.push(`${antColClass}-lg-${rule.lg}`);
-    if (rule.xl) clsMap.push(`${antColClass}-xl-${rule.xl}`);
-    if (rule.xxl) clsMap.push(`${antColClass}-xxl-${rule.xxl}`);
+
+    const itemMaxSpan = SPAN_MAX / defaultCol;
+    const paddingSpan = (value: number | undefined): number | undefined => {
+      if (value == null || defaultCol <= 1 || count >= defaultCol) return value;
+      return Math.max(value, count * itemMaxSpan);
+    };
+    const clsMap = [`${antColClass}-xs-${paddingSpan(rule.xs)}`];
+    if (rule.sm) clsMap.push(`${antColClass}-sm-${paddingSpan(rule.sm)}`);
+    if (rule.md) clsMap.push(`${antColClass}-md-${paddingSpan(rule.md)}`);
+    if (rule.lg) clsMap.push(`${antColClass}-lg-${paddingSpan(rule.lg)}`);
+    if (rule.xl) clsMap.push(`${antColClass}-xl-${paddingSpan(rule.xl)}`);
+    if (rule.xxl) clsMap.push(`${antColClass}-xxl-${paddingSpan(rule.xxl)}`);
     return clsMap;
   }
 }
diff --git a/packages/util/config/theme/responsive.type.ts b/packages/util/config/theme/responsive.type.ts
@@ -1,7 +1,7 @@
 export interface AlainThemeResponsiveConfig {
   rules: {
     [key: number]: {
-      xs?: number;
+      xs: number;
       sm?: number;
       md?: number;
       lg?: number;